*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0d0d14;--bg-secondary:#151520;--bg-card:#1a1a26;--bg-input:#1c1c28;
    --border:#2a2a3a;--border-focus:#8b5cf6;
    --accent:#3b82f6;--accent-glow:rgba(139,92,246,0.4);--accent-dark:#1d4ed8;--accent-light:#60a5fa;
    --text:#e0e0e0;--text-secondary:#b0b0b8;--text-muted:#707080;
    --live-red:#ef4444;--success:#22c55e;
    --shadow:0 4px 20px rgba(0,0,0,0.3);
}
html{height:100%;background:var(--bg)}
body{min-height:100%;color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding-bottom:40px}

/* Layout */
.page{max-width:900px;margin:0 auto;padding:20px}
.page-header{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.page-header .avatar{width:72px;height:72px;border-radius:50%;border:3px solid var(--accent);object-fit:cover}
.page-header .info{flex:1}
.page-header .info h1{font-size:22px;font-weight:800;margin-bottom:2px}
.page-header .info .subtitle{font-size:13px;color:var(--text-muted)}
.page-header .info .badges{display:flex;gap:6px;margin-top:6px}
.page-header .info .badges .badge{
    font-size:10px;padding:3px 10px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.badge-admin{background:rgba(231,76,60,0.15);color:#e74c3c}
.badge-anon{background:rgba(139,92,246,0.15);color:var(--accent-light)}
.badge-streamer{background:rgba(155,89,182,0.15);color:#9b59b6}
.badge-user{background:rgba(52,152,219,0.15);color:#3498db}

/* Section tabs */
.section-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--bg-secondary);border-radius:10px;padding:4px;overflow-x:auto}
.section-tabs button{
    flex-shrink:0;padding:8px 16px;border:none;border-radius:8px;font-size:12px;font-weight:600;
    background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.section-tabs button.active{background:var(--bg-card);color:var(--accent-light)}
.section-tabs button:hover:not(.active){color:var(--text)}

/* Approvals (my/approvals.js): one row per waiting request, and the count on its tab */
.section-tabs .tab-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent, #fff));font-size:11px;line-height:18px;text-align:center}
.approval{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:var(--bg-secondary)}
.approval-summary{font-weight:600;color:var(--text);margin-bottom:6px;overflow-wrap:anywhere}
.approval-meta{font-size:12px;color:var(--text-secondary);margin-bottom:10px;overflow-wrap:anywhere}
.approval-who{color:var(--text);font-weight:600}
.approval-cap{font-size:11px;padding:1px 6px;border-radius:5px;background:var(--bg-input);border:1px solid var(--border)}
.approval-resources{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.approval-resources li{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--bg-input);color:var(--text-secondary);overflow-wrap:anywhere}
.approval .btn-row{display:flex;gap:8px;flex-wrap:wrap}
.approvals-empty{color:var(--text-secondary);font-size:13px}

/* Section */
.section{display:none;animation:sec-in .2s ease}
.section.active{display:block}
@keyframes sec-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.card h3{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .icon{font-size:16px}
.card p{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* Form fields */
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
/* Every text field on the page follows the active theme: its input colour, a hover tint and an accent focus ring. */
:where(input:not([type]),input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=number],select,textarea){
    padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;
    color:var(--text);font:inherit;font-size:13px;outline:none;min-height:40px;
    transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
:where(input:not([type]),input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=number],select,textarea):hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
:where(input:not([type]),input[type=text],input[type=url],input[type=email],input[type=search],input[type=password],input[type=number],select,textarea):focus{
    border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);
    background:color-mix(in srgb,var(--accent) 5%,var(--bg-input));
}
:where(input,textarea)::placeholder{color:var(--text-muted);opacity:1}
:where(input,select,textarea):user-invalid{border-color:var(--danger,#ef4444)}
.form-field input,.form-field select,.form-field textarea{width:100%}
.form-field textarea{resize:vertical;min-height:60px}
.form-field .hint{font-size:10px;color:var(--text-muted);margin-top:3px}
.theme-submit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:12px;align-items:start;margin-top:16px}
.theme-submit .form-field{margin:0}
.theme-submit .btn{margin-top:21px;min-height:40px}
@media (max-width:640px){.theme-submit{grid-template-columns:1fr}.theme-submit .btn{margin-top:0}}

.btn{
    padding:8px 20px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;
}
.btn-primary{background:var(--accent-strong, var(--accent, #3472d8));color:var(--on-accent-strong, var(--on-accent,#fff))}
.btn-primary:hover{background:var(--accent-dark)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent-dark);color:var(--accent-light)}
.btn-danger{background:rgba(231,76,60,0.1);color:var(--live-red);border:1px solid rgba(231,76,60,0.2)}
.btn-danger:hover{background:rgba(231,76,60,0.2)}
.btn-row{display:flex;gap:8px;margin-top:12px}
.data-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text-secondary);line-height:1.5}
.data-check input{margin-top:3px}
.data-status{align-self:center;font-size:12px;color:var(--text-secondary)}
.module-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border)}
.module-row:first-child{border-top:0}
.module-row-main{flex:1;min-width:0}
.module-row-main strong{display:block;font-size:13px}
.module-row-main small{display:block;font-size:12px;color:var(--text-muted);line-height:1.5}
.module-row-main code{display:block;margin-top:4px;font-size:11px;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:7.5em;overflow:auto}

/* Account list */
.account-list{display:flex;flex-direction:column;gap:8px}
.account-item{
    display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;
    background:var(--bg-input);border:1px solid var(--border);
}
.account-item.active{border-color:var(--accent)}
.account-item img{width:36px;height:36px;border-radius:50%}
.account-item .name{font-size:13px;font-weight:600}
.account-item .meta{font-size:11px;color:var(--text-muted)}
.account-item .actions{margin-left:auto;display:flex;gap:6px}

/* Notification pref grid */
.notif-grid{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center;font-size:12px}
.notif-grid .cat{font-weight:600;text-transform:capitalize}
.notif-grid .toggle{width:36px;height:20px;border-radius:10px;border:none;cursor:pointer;position:relative;transition:background .2s}
.notif-grid .toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s}
.notif-grid .toggle.on{background:var(--accent)}
.notif-grid .toggle.on::after{transform:translateX(16px)}
.notif-grid .toggle.off{background:var(--border)}

/* Linked services */
.linked-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--bg-input);margin-bottom:8px;text-decoration:none;color:inherit;transition:transform .15s,background .15s}
a.linked-item:hover{background:var(--bg-hover,var(--bg-card));transform:translateX(2px)}
.linked-item .svc-meta{margin-left:auto;text-align:right;font-size:11px;color:var(--text-muted);white-space:nowrap}
.linked-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px}
.linked-grid a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;border:1px dashed var(--border);font-size:12px;color:var(--text-secondary);text-decoration:none;transition:border-color .15s,color .15s}
.linked-grid a:hover{border-color:var(--accent);color:var(--text)}
.hist-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.hist-chips{display:flex;flex-wrap:wrap;gap:6px}
.hist-chips button{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s}
.hist-chips button.active,.hist-chips button:hover{border-color:var(--accent);color:var(--accent-light);background:rgba(var(--accent-rgb,139,92,246),.08)}
.hist-search{flex:1;min-width:160px;padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:13px}
.hist-pause{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.btn-small{padding:6px 10px;font-size:12px}
.hist-day{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px}
.hist-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;text-decoration:none;color:inherit;transition:background .12s;animation:sec-in .25s ease both}
.hist-item:hover{background:var(--bg-input)}
.hist-item .hi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--accent-rgb,139,92,246),.12);color:var(--accent-light);flex:none}
.hist-item .ht{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-item .hs{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-item .hx{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none;font-size:11px;color:var(--text-muted)}
.hist-item .hx button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;opacity:0;transition:opacity .15s}
.hist-item:hover .hx button{opacity:1}
.hist-item .hx button:hover{color:var(--danger,#ef4444)}
.hist-empty{padding:26px;text-align:center;color:var(--text-muted);font-size:13px}
.linked-item .svc-icon{font-size:20px;width:32px;text-align:center}
.linked-item .svc-name{font-size:13px;font-weight:600}
.linked-item .svc-user{font-size:11px;color:var(--text-muted)}
.linked-item .svc-status{margin-left:auto;font-size:11px;font-weight:600;color:var(--success)}

/* Themes */
.theme-hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.theme-hero-copy{max-width:560px}
.theme-hero-copy p{margin-top:8px}
.theme-current{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);min-width:220px}
.theme-current-swatch{display:flex;gap:4px}
.theme-current-swatch span,.theme-preview-swatch span{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.08);display:inline-block}
.theme-current .label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.theme-current .name{font-size:13px;font-weight:700;margin-top:2px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.theme-custom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.theme-custom-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer}
.theme-custom-row input[type=color]{width:34px;height:34px;border:none;border-radius:8px;background:none;cursor:pointer;padding:0}
.theme-custom-row input[type=color]::-webkit-color-swatch{border:1px solid var(--border);border-radius:6px}
.theme-custom-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.theme-card{background:var(--bg-input);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,transform .15s,box-shadow .15s}
.theme-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.theme-card.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(139,92,246,.25) inset}
.theme-preview{border-radius:12px;padding:14px;background:linear-gradient(135deg,var(--theme-bg-1,#202331),var(--theme-bg-2,#181a24));border:1px solid rgba(255,255,255,.06)}
.theme-preview-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.theme-preview-chip{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.theme-preview-bars{display:grid;gap:7px}
.theme-preview-bars span{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.16)}
.theme-preview-bars span:first-child{width:72%}
.theme-preview-bars span:last-child{width:46%}
.theme-card h4{font-size:14px;font-weight:700}
.theme-card p{font-size:12px;color:var(--text-secondary);line-height:1.55}
.theme-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.theme-badges{display:flex;gap:6px;flex-wrap:wrap}
.theme-badge{font-size:10px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.theme-empty{padding:16px;border-radius:12px;background:var(--bg-input);border:1px dashed var(--border);text-align:center;color:var(--text-muted);font-size:13px}

/* Anon info card */
.anon-card{text-align:center;padding:32px 20px}
.anon-card .number{font-size:48px;font-weight:800;color:var(--accent);margin-bottom:8px}
.anon-card .label{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.anon-card .stats{display:flex;justify-content:center;gap:24px}
.anon-card .stat{text-align:center}
.anon-card .stat .val{font-size:20px;font-weight:700}
.anon-card .stat .key{font-size:10px;color:var(--text-muted);text-transform:uppercase}

/* Loading */
.loading-spinner{text-align:center;padding:40px;color:var(--text-muted);font-size:13px}
.acct-retry-btn{display:inline-block;background:var(--accent,#8b5cf6);color:#0b0d10;border:none;border-radius:6px;padding:3px 12px;font-weight:600;font-size:0.85em;cursor:pointer;vertical-align:baseline}
.acct-retry-btn:hover{filter:brightness(1.08)}

@media(max-width:600px){
    .page{padding:12px}
    .page-header{flex-direction:column;text-align:center}
    .page-header .info .badges{justify-content:center}
    .notif-grid{grid-template-columns:1fr auto auto}
    .notif-grid .col-email,.notif-grid .col-toast{display:none}
}

/* Dashboard Showcase */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.dashboard-showcase { margin: 32px 0; padding: 28px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.showcase-header { text-align: center; margin-bottom: 24px; }
.showcase-header h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.showcase-header p { font-size: 12px; color: var(--text-muted); }
.showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.showcase-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; gap: 8px; animation: float ease-in-out infinite; transition: all 0.3s ease; }
.showcase-card:nth-child(1) { animation-delay: 0s; animation-duration: 3s; }
.showcase-card:nth-child(2) { animation-delay: 0.15s; animation-duration: 3.3s; }
.showcase-card:nth-child(3) { animation-delay: 0.3s; animation-duration: 3.6s; }
.showcase-card:nth-child(4) { animation-delay: 0.45s; animation-duration: 3.2s; }
.showcase-card:hover { transform: translateY(-4px); border-color: var(--accent); background: rgba(139,92,246,0.08); }
.showcase-card-icon { font-size: 1.4rem; color: var(--accent-light); }
.showcase-card-label { font-size: 11px; font-weight: 700; text-align: center; }
.quick-access { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.quick-link { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); text-decoration: none; color: var(--text-secondary); font-size: 10px; font-weight: 600; text-align: center; transition: all 0.25s ease; animation: fadeInScale 0.5s ease both; }
.quick-link i { font-size: 1rem; margin-bottom: 4px; }
.quick-link:nth-child(1) { animation-delay: 0.1s; }
.quick-link:nth-child(2) { animation-delay: 0.15s; }
.quick-link:nth-child(3) { animation-delay: 0.2s; }
.quick-link:nth-child(4) { animation-delay: 0.25s; }
.quick-link:nth-child(5) { animation-delay: 0.3s; }
.quick-link:nth-child(6) { animation-delay: 0.35s; }
.quick-link:hover { border-color: var(--accent); color: var(--accent-light); background: rgba(139,92,246,0.08); }
@media(max-width:600px){ .showcase-grid { grid-template-columns: repeat(2, 1fr); } .quick-access { grid-template-columns: repeat(3, 1fr); } }
.recent-tools { margin-top: 14px; }
.recent-tools h3 { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.recent-tools-list { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-tool { padding: 6px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-tool:hover { border-color: var(--accent); color: var(--accent-light); }
.recent-tools-status { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); }
.recent-tools-status:empty { display: none; }
.recent-tool-item { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.recent-tool-star { border: 0; background: none; color: var(--text-secondary); cursor: pointer; padding: 6px; font-size: 12px; border-radius: 999px; }
.recent-tool-star[aria-pressed="true"] { color: var(--accent-light); }
.recent-tool-star:hover, .recent-tool-star:focus-visible { color: var(--accent-light); }