:root{--primary:#3390ec;--primary-dark:#2678c9;--bg:#eef3f7;--card:#fff;--text:#17212b;--muted:#74808a;--line:#dfe7ed;--danger:#e45454;--shadow:0 18px 55px rgba(23,43,65,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}button,input{font:inherit}.auth-body{min-height:100vh;background:radial-gradient(circle at 20% 15%,#d8f1ff 0,transparent 32%),linear-gradient(145deg,#eff8fd,#e6edf4);display:grid;place-items:center;padding:24px}.auth-shell{width:min(100%,590px)}.auth-card{position:relative;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);border-radius:26px;box-shadow:var(--shadow);padding:36px;animation:rise .45s ease}.brand-mark{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:33px;font-weight:800;background:linear-gradient(145deg,#54b5f5,#2786dc);box-shadow:0 10px 28px rgba(51,144,236,.35)}h1{margin:0}.auth-card h1{text-align:center;font-size:28px}.auth-subtitle{text-align:center;color:var(--muted);line-height:1.5;margin:8px auto 26px}.auth-form{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field span{font-size:13px;color:var(--muted);font-weight:650}.field input{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:14px 15px;outline:none;background:#fbfdff;transition:.2s}.field input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(51,144,236,.12);background:#fff}.primary-btn,.danger-btn{border:0;border-radius:13px;padding:14px 18px;color:#fff;font-weight:700;cursor:pointer;transition:.2s;text-decoration:none;text-align:center}.primary-btn{background:linear-gradient(135deg,var(--primary),#287bc5);box-shadow:0 8px 20px rgba(51,144,236,.25)}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 11px 25px rgba(51,144,236,.32)}.primary-btn span{float:right;font-size:22px;line-height:16px}.primary-btn.inline{display:inline-block;padding-inline:24px}.danger-btn{background:var(--danger)}.auth-note{text-align:center;color:var(--muted);font-size:13px;margin:16px 0 0}.alert{padding:12px 14px;border-radius:12px;margin:0 0 16px;font-size:14px}.alert.error{color:#a72e2e;background:#fff0f0;border:1px solid #ffd2d2}.back-link{display:inline-block;color:var(--primary);text-decoration:none;font-size:14px;margin:-8px 0 18px}.password-wrap{position:relative}.password-wrap input{padding-right:48px}.eye-btn{position:absolute;right:7px;top:7px;width:36px;height:36px;border:0;background:transparent;color:var(--muted);cursor:pointer}.grid-form{display:grid;grid-template-columns:1fr 1fr}.grid-form .full{grid-column:1/-1}.steps{display:flex;justify-content:center;gap:7px;margin:-10px 0 24px}.steps i{width:28px;height:4px;border-radius:9px;background:var(--line)}.steps i.done,.steps i.active{background:var(--primary)}.skip-form{text-align:right;margin:-14px 0 10px}.skip-btn{border:0;background:none;color:var(--primary);cursor:pointer;font-weight:650}.photo-form{align-items:center}.avatar-picker{width:150px;height:150px;border-radius:50%;display:block;position:relative;cursor:pointer}.avatar-picker img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 8px 30px rgba(26,55,80,.18)}.avatar-picker span{position:absolute;right:4px;bottom:8px;width:39px;height:39px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:22px;border:3px solid #fff}.avatar-picker input{display:none}
.app-body{height:100vh;overflow:hidden;background:#c9dbe7}.app-layout{width:min(1180px,100%);height:100vh;margin:auto;display:grid;grid-template-columns:320px 1fr;background:var(--card);box-shadow:0 0 40px rgba(0,0,0,.12)}.sidebar{display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line);z-index:10}.side-profile{padding:28px 22px 22px;background:linear-gradient(140deg,#3390ec,#2075c6);color:#fff;display:flex;align-items:center;gap:13px;position:relative}.side-profile img,.header-avatar img{object-fit:cover;border-radius:50%}.side-profile img{width:58px;height:58px;border:3px solid rgba(255,255,255,.8)}.side-profile strong{display:block}.side-profile small{display:block;margin-top:5px;color:#dcefff}.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#55e18b;margin-right:4px}.close-side{display:none}.side-nav{padding:12px;display:flex;flex-direction:column;gap:3px;overflow:auto}.side-nav a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:11px;color:var(--text);text-decoration:none;font-size:14px}.side-nav a:hover,.side-nav a.active{background:#edf6fd;color:var(--primary)}.side-nav a span{font-size:19px;width:23px;text-align:center}.side-nav a b{margin-left:auto;font-size:10px;background:#edf1f4;color:#87939d;padding:3px 6px;border-radius:8px}.theme-switch{margin:auto 12px 16px;border:0;border-top:1px solid var(--line);background:none;padding:16px 12px 4px;text-align:left;color:var(--muted);cursor:pointer}.main-panel{min-width:0;display:flex;flex-direction:column;background:#f7f9fb}.app-header{height:76px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:16px}.app-header h1{font-size:19px}.app-header small{color:var(--primary)}.menu-btn{display:none;border:0;background:none;font-size:23px}.header-avatar{margin-left:auto}.header-avatar img{width:42px;height:42px}.folder-tabs{display:flex;gap:4px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}.folder-tabs button{white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:10px 13px;border-radius:10px;cursor:pointer}.folder-tabs button.active{background:#e9f4fd;color:var(--primary);font-weight:700}.empty-state{margin:auto;text-align:center;width:min(480px,90%);color:var(--muted)}.empty-state h2{color:var(--text);margin:14px 0 6px}.empty-state p{line-height:1.6;margin:0 0 22px}.empty-icon{width:84px;height:84px;margin:auto;border-radius:50%;display:grid;place-items:center;font-size:36px;background:#e4f3fd;color:var(--primary)}.welcome-pill{display:inline-block;color:#158648;background:#e4faed;padding:9px 14px;border-radius:99px;margin-bottom:22px}.overlay{display:none}
.settings-body{min-height:100vh;background:var(--bg);padding:30px}.settings-shell{max-width:720px;margin:auto;background:#fff;border-radius:22px;padding:28px;box-shadow:var(--shadow);position:relative}.settings-header{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);padding-bottom:19px;margin-bottom:25px}.settings-header>a{width:40px;height:40px;display:grid;place-items:center;text-decoration:none;border-radius:50%;background:#edf6fd;color:var(--primary);font-size:28px}.settings-header h1{font-size:22px}.settings-header small{color:var(--muted)}.profile-form{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}.avatar-picker.small{width:96px;height:96px}.avatar-picker.small span{width:31px;height:31px;font-size:15px}.profile-name{display:flex;flex-direction:column;gap:5px}.profile-name small{color:var(--muted)}.profile-form .grid-form,.profile-form>.primary-btn{grid-column:1/-1}.toast{position:fixed;right:25px;top:25px;background:#20a663;color:#fff;padding:13px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;transform:translateX(30px);z-index:50}.toast.show{animation:toast 5s ease forwards}
body.dark{--bg:#17212b;--card:#202b36;--text:#eef4f8;--muted:#9aaab8;--line:#344451;background:#17212b}.dark .main-panel{background:#18242f}.dark .folder-tabs,.dark .app-header{background:var(--card)}.dark .field input{background:#17212b;color:#fff}.dark .side-nav a:hover,.dark .side-nav a.active{background:#263d50}.dark .empty-icon{background:#263d50}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes toast{0%{opacity:0;transform:translateX(30px)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateX(30px)}}
@media(max-width:760px){.auth-body{padding:0;background:#fff;display:block}.auth-shell{width:100%}.auth-card{min-height:100vh;border-radius:0;box-shadow:none;padding:34px 22px}.grid-form{grid-template-columns:1fr}.grid-form .full{grid-column:auto}.app-layout{display:block}.sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,330px);transform:translateX(-105%);transition:.25s;box-shadow:8px 0 35px rgba(0,0,0,.2)}.sidebar.open{transform:none}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9}.overlay.show{display:block}.menu-btn,.close-side{display:block}.close-side{position:absolute;right:12px;top:12px;border:0;background:rgba(255,255,255,.17);color:#fff;border-radius:50%;width:31px;height:31px;font-size:20px}.main-panel{height:100vh}.app-header{padding:0 16px}.folder-tabs{padding-inline:8px}.settings-body{padding:0}.settings-shell{min-height:100vh;border-radius:0;padding:22px}.profile-form{grid-template-columns:1fr;text-align:center}.avatar-picker.small{margin:auto}.profile-form .grid-form,.profile-form>.primary-btn{grid-column:auto}.toast{right:14px;top:14px}.profile-name{text-align:center}}