@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#000920;--panel:#06112d;--panel-soft:#091737;--text:#fff;--muted:#94a0b5;--line:rgba(255,255,255,.08);--accent:#5270ff;--accent2:#8258ff;--sidebar:260px}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:14px/1.5 Inter,Arial,sans-serif}.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:0 clamp(22px,9vw,180px)}
.site-header{grid-column:1/-1;display:flex;align-items:center;gap:26px;min-height:88px;border-bottom:1px solid var(--line)}.logo{font-weight:700;letter-spacing:1px;font-size:20px}.logo b{color:#5285ff;font-size:28px}.header-actions{margin-left:auto;display:flex;gap:22px;color:var(--muted)}.header-actions span{display:flex;align-items:center;gap:7px}.header-actions img{width:17px;height:17px}.profile{display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4d68ff,#9c71ff)}.profile strong,.profile small{display:block}.profile small{color:var(--muted);font-size:11px}
.sidebar{padding:36px 28px 36px 0;border-right:1px solid var(--line)}.nav-menu{padding:0;margin:0;list-style:none;display:grid;gap:8px}.nav-item a{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:11px;color:var(--muted);text-decoration:none;font-weight:500}.nav-item img{width:18px;height:18px}.nav-item a:hover{color:#fff;background:var(--panel)}.nav-item.active a{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2))}.download{height:150px;margin-top:34px;border-radius:16px;background:linear-gradient(180deg,transparent,#050d27),url('../image/bg-download.webp') center/cover}
.main-content{padding:38px 0 50px 38px;min-width:0}.page-heading{margin-bottom:28px}.page-heading h1{font-size:30px;line-height:1.2;margin:0 0 8px}.page-heading p{margin:0;color:var(--muted);max-width:650px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}.card h2{font-size:18px;margin:0 0 16px}.card p{color:var(--muted)}.wide{grid-column:1/-1}.metric{font-size:34px;font-weight:700;margin:5px 0}.eyebrow{font-size:12px;color:var(--muted);margin:0}.key{display:flex;gap:10px;padding:12px;border-radius:10px;background:#020a20;border:1px solid var(--line)}.key code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:#b8c4e5}.button{border:0;border-radius:10px;padding:11px 16px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font:inherit;font-weight:600;cursor:pointer}.button.secondary{background:transparent;border:1px solid var(--line);color:#dce3f4}.button:disabled{opacity:.6;cursor:wait}.list{display:grid;gap:0}.list-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--line)}.list-row:first-child{border-top:0;padding-top:0}.list-row strong{display:block}.list-row span{color:var(--muted);font-size:12px}.status{display:inline-flex;border-radius:999px;padding:4px 9px;background:rgba(75,202,138,.14);color:#78e7a9;font-size:12px}.form-row{display:grid;grid-template-columns:1fr auto;gap:10px}.input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:#020a20;color:#fff;font:inherit}.notice{margin-top:14px;color:var(--muted);font-size:13px}.notice.error{color:#ff9191}.global-footer{grid-column:1/-1;display:flex;justify-content:space-between;padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.global-footer a{color:inherit}.empty{color:var(--muted);padding:10px 0}
@media(max-width:900px){.app{padding:0 22px;grid-template-columns:1fr}.site-header{min-height:74px}.sidebar{padding:18px 0;border-right:0;overflow:auto}.nav-menu{display:flex;width:max-content}.nav-item a{padding:10px 12px}.download{display:none}.main-content{padding:28px 0}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.header-actions{display:none}}@media(max-width:520px){.profile small{display:none}.profile strong{font-size:12px}.site-header{gap:8px}.logo{font-size:17px}.global-footer{gap:8px;flex-direction:column}.form-row{grid-template-columns:1fr}.card{padding:20px}}

/* Shared shell: pixel-aligned with auth.html at desktop resolution. */
.app{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100vh;padding:0 250px;background:var(--bg)}
.site-header{grid-column:1/-1;min-height:75px;padding:25px 0;border-bottom:1px solid var(--line);background:var(--bg)}
.sidebar{width:300px;padding:40px 30px 40px 0;border-right:0;background:var(--bg)}
.nav-menu{display:flex;flex-direction:column;gap:12px}
.nav-item{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;font-size:14px}
.nav-item a{padding:0;display:flex;align-items:center;gap:10px;width:100%;border-radius:0;background:transparent!important}
.nav-item.active{background:linear-gradient(90deg,#4264ff 0%,#8258ff 100%)}
.nav-item.active a,.nav-item a:hover{color:#fff;background:transparent!important}
.download{height:180px;margin-top:auto;border-radius:16px;background:linear-gradient(180deg,transparent,#050d27),url('../image/bg-download.webp') center/cover}
.main-content{padding:40px 0 40px 0}
.global-footer{grid-column:1/-1;padding:25px 0;background:var(--bg)}
@media(max-width:1400px){.app{padding:0 80px}}
@media(max-width:900px){.app{padding:0 22px;display:grid;grid-template-columns:1fr}.sidebar{width:auto;padding:18px 0}.main-content{padding:28px 0}.nav-menu{flex-direction:row}.download{display:none}}
/* Header markup and metrics copied from auth.html. */
.site-header .logo{display:flex;align-items:center;font-size:20px;font-weight:700;letter-spacing:1px}
.site-header .logo span:first-child{color:#4a86ff;font-size:28px;margin-right:5px}
.site-header .header-actions{display:flex;margin-left:auto;align-items:center;gap:25px;font-size:13px;color:#8b96a8}
.site-header .header-actions span{display:flex;align-items:center;gap:8px;cursor:pointer;transition:color .2s}
.site-header .header-actions img{width:18px;height:18px;object-fit:contain}
.site-header .header-actions span:hover{color:#fff}
.site-header .user-profile{display:flex;align-items:center;gap:12px}
.site-header .avatar{width:40px;height:40px;background-color:#d9d9d9;border-radius:50%}
.site-header .user-info h4{font-size:14px;font-weight:600;margin:0}
.site-header .user-info p{font-size:12px;color:#8b96a8;margin:0}