:root{--bg: #09090b;--surface: #131316;--surface-2: #1b1b20;--surface-3: #242429;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #8b5cf6;--accent-2: #6366f1;--accent-grad: linear-gradient(135deg, #8b5cf6, #6366f1);--success: #22c55e;--danger: #ef4444;--radius-lg: 20px;--radius: 14px;--radius-sm: 10px;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--nav-size: 76px;--aside-size: 340px}*{box-sizing:border-box;margin:0}html,body,app-root{margin:0;padding:0;width:100%;height:100%}body{background-color:var(--bg);background-image:radial-gradient(900px 500px at 85% -10%,rgba(99,102,241,.09),transparent 60%),radial-gradient(700px 400px at -10% 110%,rgba(139,92,246,.07),transparent 60%);background-attachment:fixed;font-family:var(--font-ui);color:var(--text);overflow:hidden}h1{font-size:26px;font-weight:700;letter-spacing:-.02em}h2{font-size:20px;font-weight:700;letter-spacing:-.01em}h3{font-size:16px;font-weight:600}a{color:var(--accent);text-decoration:none;transition:color .15s ease}a:hover{color:#a78bfa}button,input,textarea{font-family:var(--font-ui);font-size:15px}button{cursor:pointer}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}.input-text-field{padding:12px 16px;border-radius:var(--radius);background-color:var(--surface-2);border:1px solid var(--border);outline:none;color:var(--text);transition:border-color .15s ease}.input-text-field:focus{border-color:var(--accent)}.input-text-field::placeholder{color:var(--text-muted)}.field{margin-bottom:18px}.field-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:7px}.field input[type=text],.field textarea{width:100%;padding:12px 16px;border-radius:var(--radius);background-color:var(--surface-2);border:1px solid var(--border);outline:none;color:var(--text);transition:border-color .15s ease}.field input[type=text]:focus,.field textarea:focus{border-color:var(--accent)}input[type=file]{color:var(--text-secondary);font-size:14px}input[type=file]::file-selector-button{font-family:var(--font-ui);background:var(--surface-3);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:8px 16px;margin-right:12px;cursor:pointer;transition:background .15s ease}input[type=file]::file-selector-button:hover{background:#2e2e35}.input-button{padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface-3);color:var(--text);font-weight:600;transition:all .15s ease}.input-button:hover{background:#2e2e35;border-color:var(--border-strong)}.input-button-green{background:var(--success);border-color:transparent;color:#052e12}.input-button-green:hover{background:#4ade80;border-color:transparent}.input-button-red{background:#ef44441f;border-color:#ef444459;color:#f87171}.input-button-red:hover{background:#ef444438;border-color:#ef444480}.btn-primary{padding:11px 24px;border-radius:999px;border:none;background:var(--accent-grad);color:#fff;font-weight:700;letter-spacing:.01em;transition:all .15s ease;box-shadow:0 4px 20px #8b5cf659}.btn-primary:hover{filter:brightness(1.12);box-shadow:0 4px 28px #8b5cf680}.btn-primary:active{transform:scale(.97)}.btn-primary:disabled{opacity:.5;cursor:default}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip input{display:none}.chip span{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.chip span:hover{border-color:var(--border-strong);color:var(--text)}.chip input:checked+span{border-color:var(--accent);background:#8b5cf624;color:var(--text)}.chip-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.mono{font-family:var(--font-mono)}.muted{color:var(--text-muted)}app-root{display:flex;flex-wrap:nowrap}.nav-rail{width:var(--nav-size);flex:0 0 auto;height:100%;display:flex;flex-direction:column;align-items:center;padding:20px 0;gap:28px;border-right:1px solid var(--border);background:#13131699;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:200}.nav-logo img{width:44px;height:44px;border-radius:12px;transition:transform .2s ease}.nav-logo:hover img{transform:scale(1.08)}.nav-links{display:flex;flex-direction:column;gap:10px;flex:1}.nav-link{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);color:var(--text-muted);border:1px solid transparent;background:transparent;transition:all .15s ease}.nav-link:hover{color:var(--text);background:var(--surface-2)}.nav-link-active{color:var(--text);background:#8b5cf624;border-color:#8b5cf659}.nav-link svg{width:23px;height:23px}.nav-profile-toggle{display:none;padding:0}.nav-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}.main-block{flex:1 1 auto;height:100%;min-width:0}.container{height:100%;overflow-y:auto;padding:36px 32px 48px}.page{max-width:860px;margin:0 auto;animation:page-appears .45s ease}@keyframes page-appears{0%{transform:translateY(14px);opacity:0}}.side-panel{width:var(--aside-size);flex:0 0 auto;height:100%;overflow-y:auto;border-left:1px solid var(--border);padding:24px 20px;display:flex;flex-direction:column;gap:16px;background-color:#101014}.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}.side-profile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}.side-profile-picture{width:84px;height:84px;object-fit:cover;border-radius:50%;border:2px solid var(--border-strong)}.side-profile a{color:var(--text)}.side-profile a:hover{color:var(--accent)}.side-profile h1{font-size:20px}.side-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);margin-bottom:14px}.progress-track{width:100%;height:12px;border-radius:999px;background:var(--surface-3);overflow:hidden}.progress-fill{height:100%;border-radius:999px;transition:width .4s ease}.progress-labels{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}.status-hint{margin-top:12px;font-size:13px;color:var(--text-secondary)}.increase-status-button{margin-top:12px;width:100%;color:#fff;border:none;padding:11px 20px;border-radius:999px;font-weight:700;transition:filter .15s ease,transform .1s ease}.increase-status-button:hover{filter:brightness(1.2)}.increase-status-button:active{transform:scale(.97)}.help-link{display:inline-block;margin-top:12px;font-size:13px}.stats-list{display:flex;flex-direction:column;gap:14px}.stats-item{display:flex;justify-content:space-between;align-items:center;gap:12px}.stats-item-label{display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:13px;min-width:0}.stats-item-label svg{width:17px;height:17px;flex:0 0 auto;color:var(--text-muted)}.stats-item-value{font-family:var(--font-mono);font-size:13px;color:var(--success);white-space:nowrap}.beta-warning{font-size:12px;color:var(--text-muted);line-height:1.5;padding:0 4px}.image-viewer-container{position:fixed;inset:0;background:#000c;z-index:1001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;cursor:zoom-out;animation:viewer-appears .2s ease}@keyframes viewer-appears{0%{opacity:0}}.image-viewer-image{max-height:82%;max-width:90%;border-radius:var(--radius);box-shadow:0 24px 80px #0009}@media (max-width: 1280px){.side-panel{position:fixed;top:0;right:0;bottom:0;z-index:300;transform:translate(105%);transition:transform .25s ease;box-shadow:-20px 0 60px #00000080;background-color:#101014}.side-panel-open{transform:translate(0)}.nav-profile-toggle{display:flex}}@media (max-width: 1000px){app-root{flex-direction:column}.nav-rail{order:2;width:100%;height:68px;flex-direction:row;justify-content:space-around;padding:0 16px;gap:0;border-right:none;border-top:1px solid var(--border)}.nav-logo img{width:36px;height:36px}.nav-links{flex-direction:row;justify-content:center;gap:6px;flex:0 1 auto}.nav-link{width:46px;height:46px}.main-block{order:1;height:calc(100% - 68px)}.container{padding:20px 14px 32px}.side-panel{width:min(var(--aside-size),88vw)}}*::-webkit-scrollbar{background:none;width:6px}*::-webkit-scrollbar-thumb{background:#2c2c33;border-radius:100px}*::-webkit-scrollbar-thumb:hover{background:#3d3d46}
