:root {
  --account-surface:#0e192b;
  --account-surface-2:#111f35;
  --account-line:rgba(170,190,220,.16);
  --account-text:#f4f7fb;
  --account-muted:#9eacc0;
  --account-accent:#9fb3d3;
}
.account-page { min-height:100vh; background:radial-gradient(900px 520px at 50% -120px,rgba(86,113,164,.22),transparent 66%),#07101f; color:var(--account-text); }
.auth-shell { width:min(calc(100% - 36px),520px); margin:0 auto; padding:90px 0 120px; }
.auth-card { border:1px solid var(--account-line); border-radius:20px; padding:32px; background:rgba(14,25,43,.86); box-shadow:0 28px 80px rgba(0,0,0,.32); }
.auth-card h1 { font-size:38px; margin:0 0 10px; }
.auth-card p { color:var(--account-muted); }
.discord-auth { width:100%; margin-top:24px; min-height:48px; border:0; border-radius:11px; background:#5865f2; color:white; font-weight:750; font-size:15px; cursor:pointer; }
.discord-auth:hover { filter:brightness(1.07); }
.remember-row { display:flex; align-items:center; gap:9px; margin-top:18px; color:#c8d2e0; font-size:14px; }
.auth-note { margin-top:20px; font-size:12px; color:#7f8da3; }
.account-error { margin:16px 0 0; padding:10px 12px; border:1px solid rgba(208,104,104,.35); border-radius:10px; color:#efb2b2; background:rgba(208,104,104,.08); }

.dashboard-shell { width:min(calc(100% - 36px),1380px); margin:0 auto; padding:46px 0 100px; }
.dashboard-top { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.dashboard-top h1 { margin:0; font-size:42px; }
.dashboard-top p { margin:7px 0 0; color:var(--account-muted); }
.dashboard-actions { display:flex; gap:10px; flex-wrap:wrap; }
.account-btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; border:1px solid var(--account-line); border-radius:10px; background:rgba(255,255,255,.035); color:#eef3fa; text-decoration:none; font-weight:680; cursor:pointer; white-space:nowrap; }
.account-btn:hover { background:rgba(255,255,255,.065); }
.account-btn.primary { background:linear-gradient(135deg,#dce7f7,#9dafcc); color:#07101f; border-color:transparent; }
.account-btn.danger { color:#efb1b1; border-color:rgba(208,104,104,.30); }
.account-btn:disabled { opacity:.5; cursor:not-allowed; }

.dashboard-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.dashboard-panels { min-width:0; }
.dashboard-nav { align-self:start; position:sticky; top:94px; display:grid; gap:5px; }
.dashboard-nav button { text-align:left; border:0; border-radius:9px; padding:11px 13px; background:transparent; color:var(--account-muted); font-weight:650; cursor:pointer; }
.dashboard-nav button:hover,.dashboard-nav button.active { color:white; background:rgba(255,255,255,.055); }
.dashboard-panel { display:none; min-width:0; border:1px solid var(--account-line); border-radius:18px; padding:30px; background:rgba(14,25,43,.72); }
.dashboard-panel.active { display:block; }
.dashboard-panel h2 { font-size:26px; margin:0 0 24px; }
.dashboard-panel > p { color:var(--account-muted); margin:-14px 0 22px; }
.dashboard-panel h3 { margin-top:30px; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.form-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-field.full { grid-column:1/-1; }
.form-field label,.detail-setting label { color:#cbd5e3; font-size:13px; font-weight:680; }
.form-field input,.form-field textarea,.form-field select,.detail-setting input,.detail-setting textarea,.editor-row input,.editor-row select {
  width:100%; min-width:0; border:1px solid var(--account-line); border-radius:10px; background:#091322; color:#edf3fb; padding:11px 12px; outline:none; font:inherit;
}
.form-field textarea,.detail-setting textarea { min-height:100px; resize:vertical; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus,.detail-setting input:focus,.detail-setting textarea:focus,.editor-row input:focus,.editor-row select:focus { border-color:rgba(159,179,211,.45); box-shadow:0 0 0 3px rgba(115,136,173,.09); }
.form-field small,#slug-preview { color:var(--account-muted); font-size:12px; overflow-wrap:anywhere; }
input[type="color"] { min-height:44px; padding:5px; }
.range-row { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:12px; align-items:center; }
.range-row input[type="range"] { padding:0; border:0; box-shadow:none; background:transparent; }
.range-row output { color:var(--account-muted); font-size:13px; text-align:right; }

.fixed-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.detail-setting { min-width:0; padding:16px; border:1px solid var(--account-line); border-radius:13px; background:rgba(255,255,255,.025); }
.detail-setting.full-detail { grid-column:1/-1; }
.setting-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.switch-row { display:inline-flex; align-items:center; gap:7px; color:var(--account-muted)!important; cursor:pointer; font-size:12px!important; }
.switch-row input { appearance:none; -webkit-appearance:none; width:32px; height:18px; margin:0; border:1px solid var(--account-line); border-radius:999px; background:rgba(255,255,255,.08); position:relative; cursor:pointer; transition:.16s ease; }
.switch-row input::after { content:""; position:absolute; width:12px; height:12px; top:2px; left:2px; border-radius:50%; background:#8f9caf; transition:.16s ease; }
.switch-row input:checked { border-color:rgba(159,179,211,.55); background:rgba(159,179,211,.28); }
.switch-row input:checked::after { left:16px; background:#eef4fc; }
.switch-row input:focus-visible { outline:2px solid rgba(159,179,211,.55); outline-offset:2px; }
.toggle-card input { accent-color:#9fb3d3; }
.domain-input { display:flex; align-items:stretch; min-width:0; }
.domain-input span { display:flex; align-items:center; padding:0 10px; border:1px solid var(--account-line); border-right:0; border-radius:10px 0 0 10px; background:rgba(255,255,255,.045); color:var(--account-muted); font-size:13px; }
.domain-input input { border-radius:0 10px 10px 0; }

.toggle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; }
.toggle-card { display:flex; align-items:flex-start; gap:11px; padding:14px; border:1px solid var(--account-line); border-radius:12px; background:rgba(255,255,255,.025); cursor:pointer; }
.toggle-card input { margin-top:3px; }
.toggle-card span { display:grid; gap:2px; }
.toggle-card strong { font-size:14px; }
.toggle-card small { color:var(--account-muted); font-size:12px; line-height:1.4; }

.editor-list { display:grid; gap:10px; }
.editor-row { display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--account-line); border-radius:12px; background:rgba(255,255,255,.025); min-width:0; }
.social-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0; }
.social-row.has-custom-label .social-fields { grid-template-columns:minmax(120px,.35fr) minmax(180px,.65fr); }
.editor-controls { display:flex; gap:5px; }
.icon-btn { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--account-line); border-radius:8px; background:rgba(255,255,255,.035); color:white; cursor:pointer; }
.empty-editor { padding:24px; border:1px dashed var(--account-line); border-radius:12px; color:var(--account-muted); text-align:center; }

.panel-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--account-line); }
.storage-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:-8px 0 18px; }
.storage-note { margin:0; color:var(--account-muted); font-size:.86rem; }
.image-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:14px; align-items:start; }
.image-card { min-width:0; border:1px solid var(--account-line); border-radius:13px; padding:14px; background:rgba(255,255,255,.025); overflow:hidden; }
.image-card > strong { display:block; }
.image-card > small { display:block; margin:2px 0 10px; color:var(--account-muted); font-size:12px; }
.image-card input[type="file"] { display:block; width:100%; max-width:100%; min-width:0; color:var(--account-muted); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.image-card input[type="file"]::file-selector-button { margin-right:8px; padding:7px 9px; border:1px solid var(--account-line); border-radius:8px; background:rgba(255,255,255,.045); color:var(--account-text); cursor:pointer; }
.image-preview { width:100%; height:150px; border-radius:9px; background:#07101f center/cover no-repeat; display:grid; place-items:center; overflow:hidden; color:#6f7d92; margin-bottom:12px; }
.image-preview.avatar-preview img { width:92px; height:92px; border-radius:50%; object-fit:cover; }
.image-preview img { width:100%; height:100%; object-fit:cover; }
.image-actions { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--account-line); }
.image-actions .account-btn { flex:1 1 110px; }

.session-list { display:grid; gap:10px; margin-top:18px; }
.session-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--account-line); border-radius:12px; }
.session-card strong { display:block; font-size:14px; }
.session-card span { color:var(--account-muted); font-size:12px; }
.discord-account { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--account-line); border-radius:12px; margin-top:18px; }
.discord-account img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.toast { position:fixed; right:20px; bottom:20px; z-index:100; max-width:360px; padding:12px 15px; border:1px solid var(--account-line); border-radius:10px; background:#101c30; box-shadow:0 16px 50px rgba(0,0,0,.35); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.error { border-color:rgba(208,104,104,.38); color:#efb1b1; }
.danger-zone { margin-top:34px; padding-top:24px; border-top:1px solid rgba(208,104,104,.22); }
.danger-zone h3 { color:#efb1b1; }

@media(max-width:1100px) {
  .editor-row { grid-template-columns:minmax(140px,180px) minmax(0,1fr) auto; }
  .social-row.has-custom-label .social-fields { grid-template-columns:1fr; }
}
@media(max-width:850px) {
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-nav { position:static; display:flex; overflow:auto; padding-bottom:3px; }
  .dashboard-nav button { white-space:nowrap; }
  .form-grid,.fixed-details,.toggle-grid,.image-grid { grid-template-columns:1fr; }
  .detail-setting.full-detail { grid-column:auto; }
  .editor-row { grid-template-columns:1fr; }
  .social-row.has-custom-label .social-fields { grid-template-columns:1fr; }
  .editor-controls { justify-content:flex-end; }
  .dashboard-top { align-items:flex-start; flex-direction:column; }
}
@media(max-width:560px) {
  .dashboard-shell { width:min(calc(100% - 24px),1380px); padding-top:28px; }
  .dashboard-panel { padding:20px; border-radius:14px; }
  .dashboard-top h1 { font-size:34px; }
  .session-card { align-items:flex-start; flex-direction:column; }
  .session-card .account-btn { width:100%; }
}