:root{
  --bg:#0B0D14;
  --panel:#0F121A;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.95);
  --muted:rgba(255,255,255,.62);
  --radius: clamp(10px, 0.9vw, 16px);
  --gap: clamp(10px, 0.85vw, 18px);
  --space: clamp(8px, 0.75vw, 14px);
  --headGap: clamp(6px, 0.75vw, 14px);
  --headPadY: clamp(7px, 0.75vw, 12px);
  --headPadX: clamp(9px, 0.9vw, 14px);
  --headSize: clamp(10px, 1vw, 12px);
  --pillPadY: clamp(5px, 0.65vw, 9px);
  --pillPadX: clamp(8px, 0.9vw, 12px);
  --pillGap: clamp(6px, 0.75vw, 12px);

  --cols:3;
  --rows:3;

  --shadow: 0 14px 40px rgba(0,0,0,.45);
  --shadow2: 0 10px 24px rgba(0,0,0,.32);

  --green:#24C26C;
  --amber:#FF9F1C;
  --red:#FF4D4D;
  --accent:#FF9F1C;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:
    linear-gradient(135deg, rgba(255,159,28,.08), transparent 26%),
    linear-gradient(315deg, rgba(36,194,108,.06), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--bg);
  color:var(--text);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  overflow:hidden;
  letter-spacing: .01em;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body.auth-locked header,
body.auth-locked main,
body.auth-locked #desktopBlocker{
  display:none;
}
#app{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  height:100%;
  flex:1 1 auto;
}

header{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:calc(var(--space) * 1) calc(var(--space) * 1.6);
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  gap:calc(var(--space) * 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  position:sticky;
  top:0;
  z-index:10;
}
.head-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--space) * 1);
  flex-wrap:wrap;
}
.head-status{
  display:flex;
  align-items:center;
  gap:calc(var(--space) * .8);
  flex-wrap:wrap;
  justify-content:center;
  flex:1;
}
.lefthead{
  display:flex;
  align-items:center;
  gap:calc(var(--space) * 1);
  min-width:0;
  flex-wrap:wrap;
}
.righthead{
  display:flex;
  align-items:center;
  gap:calc(var(--space) * 1);
}
.logo__image{
  height:36px;
  width:auto;
  display:block;
  border-radius:12px;
}
.logo-mark{
  width:clamp(46px, 4.2vw, 64px);
  height:clamp(46px, 4.2vw, 64px);
  border-radius:calc(var(--radius) * .9);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  padding:clamp(8px, 0.9vw, 12px);
  box-shadow: var(--shadow2);
}
.logo-mark__initials{
  font-size:clamp(16px, 1.4vw, 20px);
  font-weight:800;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
  text-shadow:0 6px 14px rgba(0,0,0,.26);
}
.chip{
  font-size:12px;
  color:var(--muted);
  padding:calc(var(--space) * .7) calc(var(--space) * 1);
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.03);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:calc(var(--space) * .8);
  box-shadow: var(--shadow2);
  text-transform: uppercase;
  letter-spacing:.25px;
}
.chip strong{ color:var(--text); font-weight:700; }
.chip--db, .chip--collector{ gap:calc(var(--space) * .4); }
.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--muted);
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, box-shadow .18s ease;
}
.status-dot--idle{ background:var(--muted); }
.status-dot--ok{
  background:#2ecc71;
  box-shadow:0 0 0 4px rgba(46,204,113,.2), 0 0 0 1px rgba(0,0,0,.2);
}
.status-dot--error{
  background:#ff5b5b;
  box-shadow:0 0 0 4px rgba(255,91,91,.18), 0 0 0 1px rgba(0,0,0,.2);
}

select, .btn{
  appearance:none;
  position:relative;
  color: var(--text);
  border:1px solid rgba(255,255,255,.22);
  border-radius:calc(var(--radius) * .7);
  padding:clamp(7px, 0.8vw, 11px) clamp(13px, 1vw, 18px);
  font-size:var(--headSize);
  outline:none;
  cursor:pointer;
  letter-spacing:.18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,159,28,.22), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(9,12,19,.95), rgba(11,14,22,.85));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 28px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.04);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .2s ease;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:clamp(7px, 0.8vw, 11px) clamp(12px, 0.95vw, 16px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.55px;
  background:
    linear-gradient(135deg, rgba(255,159,28,.34), rgba(36,194,108,.34)),
    linear-gradient(180deg, rgba(14,19,27,.94), rgba(9,12,18,.88));
  border:1px solid rgba(255,159,28,.65);
  box-shadow:
    0 16px 32px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.24);
}
.btn.btn-sm{
  padding:6px 10px;
  font-size:calc(var(--headSize) * 0.95);
  letter-spacing:.35px;
}
.btn.btn-ghost{
  background:linear-gradient(180deg, rgba(14,19,27,.7), rgba(9,12,18,.7));
  border-color:rgba(255,255,255,.28);
}
.btn.btn--active{
  border-color:rgba(36,194,108,.85);
  box-shadow:
    0 16px 32px rgba(0,0,0,.48),
    0 0 0 1px rgba(36,194,108,.55),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.btn:hover{
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(255,189,92,.9);
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,189,92,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:active{
  transform: translateY(0);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.45),
    0 10px 20px rgba(0,0,0,.34);
}
.btn:focus-visible{
  border-color: rgba(255,189,92,.82);
  box-shadow:
    0 16px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.24);
}
select{
  padding-left: calc(var(--space) * 3.1);
  padding-right: calc(var(--space) * 3.2);
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(9,12,19,.96), rgba(11,14,22,.88)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M2.5 3.25L7 6.75L11.5 3.25' stroke='%23FFD9A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position:
    center,
    center,
    left calc(var(--space) * 1.2) center;
  background-size: auto, auto, 14px 10px;
}
select:hover{
  border-color: rgba(255,189,92,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 14px 28px rgba(0,0,0,.42);
}
select:focus-visible{
  border-color: rgba(255,189,92,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 12px 26px rgba(0,0,0,.42);
}
select option{
  background: #0A0C12;
  color: var(--text);
}
select::-ms-expand{ display:none; }

.sel-sm{
  padding:clamp(5px, 0.65vw, 9px) clamp(8px, 0.85vw, 12px);
  font-size: clamp(10px, 0.9vw, 11.5px);
}

.dot{
  width:clamp(10px, 1vw, 14px);
  height:clamp(10px, 1vw, 14px);
  border-radius:50%;
  display:inline-block;
  background:#888;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
.dot.live{ background:var(--green); animation: blink 1s infinite; box-shadow: 0 0 12px rgba(0,255,102,.40); }
.dot.stale{ background:var(--amber); box-shadow: 0 0 10px rgba(255,176,0,.28); }
.dot.offline{ background:var(--red); box-shadow: 0 0 10px rgba(255,77,77,.28); }
@keyframes blink{ 0%{opacity:1} 50%{opacity:.25} 100%{opacity:1} }

main{
  flex:1;
  padding: calc(var(--space) * 1.4);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.grid{
  height:100%;
  display:grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 900px){
  body{ overflow:hidden; }
  #app{ height:100dvh; }
  header{ padding:calc(var(--space) * .8) calc(var(--space) * 1); }
  main{ height:100%; padding:calc(var(--space) * .8); }
  .grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height:100%;
    min-height:0;
  }
  .card{ height:100%; }
  #viewToggleBtn{ display:none; }
}

.card{
  height:100%;
  min-height:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)), var(--panel);
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow);
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-left:clamp(2px, 0.35vw, 5px) solid rgba(255,159,28,.55);
  pointer-events:none;
  opacity:.8;
}
.card-h + .plot-wrap{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--headGap);
  padding:var(--headPadY) var(--headPadX);
  border-bottom:1px solid var(--line2);
  background: linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.008));
}
.card-h .pill,
.card-h select,
.card-h .btn{
  min-width:0;
  line-height:1.1;
}
.h-left{
  display:flex;
  align-items:center;
  gap:var(--headGap);
  min-width:0;
}
.h-right{
  display:flex;
  align-items:center;
  gap:var(--headGap);
  justify-content:flex-end;
  min-width:0;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:var(--pillGap);
  padding:0;
  border:0;
  border-radius:0;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-size:var(--headSize);
  white-space:nowrap;
  letter-spacing:.25px;
}
.pill-ghost{
  background: rgba(255,255,255,.015);
  border-style:dashed;
  box-shadow:none;
}
.pill-ghost strong{ color: var(--text); }
.pill b{
  color: rgba(255,255,255,.92);
  font-weight:850;
  letter-spacing:.25px;
  font-size:var(--headSize);
}

.plot-wrap{ flex:1 1 auto; min-height:0; position:relative; }
.plot{ position:absolute; inset:0; width:100%; height:100%; transition: opacity .14s ease; }
.plot--terminal{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
}
.plot-wrap.loading .plot{ filter: blur(8px); transition: filter .18s ease; }
.plot-wrap--swap .plot{ opacity:.82; }
.plot-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.plot-wrap.loading::after{
  content:"Loading…";
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:750;
  letter-spacing:.3px;
  font-size:14px;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  background: rgba(11,13,20,.46);
  backdrop-filter: blur(6px);
  opacity:1;
  pointer-events:none;
}

.term-log{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  padding:0 calc(var(--space) * .9) 0 calc(var(--space) * .9);
}
pre.terminal{
  margin:0;
  white-space:pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:11.5px;
  line-height:1.35;
  color: rgba(255,255,255,0.86);
  overflow:auto;
  padding:calc(var(--space) * .9);
  height:100%;
  min-height:0;
  flex:1 1 auto;
  background: rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.term-input{
  padding: 0 calc(var(--space) * .9) calc(var(--space) * .9) calc(var(--space) * .9);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.term-input form{
  display:flex;
  gap:8px;
  align-items:center;
}
.term-input input{
  flex:1 1 auto;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-size:12px;
}
.term-input input:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.term-feedback{
  min-height:18px;
  font-size:12px;
  color: var(--muted2);
}
.term-feedback--error{
  color: #ffb3b3;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border:0;
}

footer{
  height:var(--footerH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding: 0 calc(var(--space) * 1.6);
  color:var(--muted);
  font-size:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.02));
  gap:calc(var(--space) * 1.2);
  backdrop-filter: blur(10px);
}

.desktop-blocker{
  position:fixed;
  inset:0;
  background: rgba(11,13,20,.96);
  color: var(--text);
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:calc(var(--space) * 2.8);
  z-index:9999;
  backdrop-filter: blur(12px);
  flex-direction:column;
  gap:calc(var(--space) * 1.2);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 38px rgba(0,0,0,.55);
}
.desktop-blocker__title{
  font-size:28px;
  letter-spacing:.5px;
  font-weight:800;
  text-transform:uppercase;
}
.desktop-blocker__subtitle{
  color: var(--muted);
  max-width:60vw;
  line-height:1.5;
  font-size:14px;
}
.auth-screen{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(7,9,15,.85);
  backdrop-filter: blur(6px);
  z-index:999;
  padding:clamp(20px, 2vw, 32px);
}
.auth-screen.visible{ display:flex; }
.loading-screen{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(7,9,15,.85);
  backdrop-filter: blur(6px);
  z-index:1000;
  padding:clamp(20px, 2vw, 32px);
}
.loading-screen.visible{ display:flex; }
.loading-card{
  width:min(420px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:calc(var(--radius) * 1.1);
  padding:clamp(24px, 2vw, 32px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 1.2vw, 16px);
  box-shadow: var(--shadow);
  text-align:left;
}
.loading-spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.loading-title{
  font-size:clamp(16px, 1.4vw, 19px);
  font-weight:700;
  letter-spacing:.3px;
}
.loading-subtitle{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}
.auth-card{
  width:min(520px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:calc(var(--radius) * 1.1);
  padding:clamp(22px, 2vw, 32px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.4vw, 18px);
  box-shadow: var(--shadow);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
}
.auth-card__logo{
  width:74px;
  height:74px;
  border-radius:calc(var(--radius) * 1.2);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  padding:12px;
  align-self:flex-start;
}
.auth-card__logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.auth-card__title{
  font-size:clamp(17px, 1.5vw, 20px);
  font-weight:750;
  letter-spacing:.4px;
}
.auth-socials{
  display:flex;
  gap:10px;
  align-items:center;
}
.auth-tabs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.auth-tab{
  border:1px solid var(--line2);
  background:rgba(255,255,255,.02);
  color:var(--text);
  border-radius:calc(var(--radius) * .8);
  padding:10px 12px;
  font-weight:700;
  letter-spacing:.25px;
  transition: border-color .15s ease, background .15s ease;
  cursor:pointer;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}
.auth-tab--active{
  border-color: rgba(255,189,92,.6);
  background: rgba(255,189,92,.08);
}
.auth-note{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}
.auth-note--payment{
  border:1px solid rgba(255,189,92,.35);
  background:rgba(255,189,92,.06);
  border-radius:calc(var(--radius) * .8);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.auth-note__headline{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.2px;
}
.auth-note__body{
  color:var(--muted);
}
.auth-paylink{
  align-self:flex-start;
}
.auth-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:13px;
}
.auth-field__label{ font-weight:700; letter-spacing:.25px; }
.auth-field input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line2);
  border-radius:calc(var(--radius) * .8);
  padding:clamp(11px, 1vw, 14px) clamp(12px, 1vw, 16px);
  color:var(--text);
  font-size:14px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: border-color .15s ease, box-shadow .18s ease;
}
.auth-field input:focus{
  border-color: rgba(255,189,92,.55);
  box-shadow: 0 0 0 1px rgba(255,189,92,.22);
}
.auth-error{
  min-height:18px;
  color:#FF6B6B;
  font-weight:650;
  letter-spacing:.2px;
  font-size:12px;
}
.auth-meta{
  min-height:18px;
  color:#EFC078;
  font-weight:650;
  letter-spacing:.2px;
  font-size:12px;
}
.auth-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line2);
  border-radius:calc(var(--radius) * .8);
  padding:12px 14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.auth-consent input{ margin-top:4px; }
.auth-consent a{ color:var(--text); font-weight:700; }
.auth-submit{
  width:100%;
  justify-content:center;
}
.hidden{ display:none !important; }
body.desktop-required .desktop-blocker{ display:flex; }

@media (max-width: 640px){
  .auth-screen{
    align-items:flex-start;
    padding:20px 16px;
  }
  .auth-card{
    width:100%;
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
  }
}

/* TERMS PAGE */
body.terms-page{
  overflow:auto;
  padding:calc(var(--space) * 1.5) calc(var(--space) * 1.2);
  background:var(--bg);
}
.terms-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space);
  padding:calc(var(--space) * 1.1);
  border-bottom:1px solid var(--line);
  margin-bottom:calc(var(--space) * 1.1);
  background:rgba(0,0,0,.08);
}
.terms-header__left, .terms-header__right{ display:flex; align-items:center; gap:calc(var(--space) * .9); flex-wrap:wrap; }
.terms-shell{
  display:flex;
  flex-direction:column;
  gap:calc(var(--space) * 1.2);
  max-width:900px;
  margin:0 auto calc(var(--space) * 2);
  padding:0 calc(var(--space) * 1.1);
}
.terms-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:calc(var(--space) * .6);
  border-bottom:1px solid var(--line2);
}
.terms-lede{ color:var(--muted); line-height:1.6; margin:0; }
.terms-meta{ color:var(--muted2); font-size:13px; letter-spacing:.2px; }
.terms-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:calc(var(--space) * .6);
  border-bottom:1px solid var(--line2);
}
.terms-section:last-of-type{ border-bottom:none; padding-bottom:0; }
.terms-list{ margin:0; padding-left:18px; color:var(--muted); line-height:1.55; }
.terms-list li + li{ margin-top:6px; }
.terms-paragraph{ margin:0; color:var(--muted); line-height:1.55; }

/* ACCOUNT & SETTINGS PAGE */
body.account-page{
  overflow:auto;
  padding:calc(var(--space) * 1.05) calc(var(--space) * 1.6);
}

.account-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space);
  padding:calc(var(--space) * .95) calc(var(--space) * 1.2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
  margin-bottom:calc(var(--space) * .9);
}

.account-header__left, .account-header__right{
  display:flex;
  align-items:center;
  gap:calc(var(--space) * 0.9);
  flex-wrap:wrap;
}

.back-link{
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;
  padding:10px 14px;
  border:1px solid var(--line2);
  border-radius:calc(var(--radius) * .6);
  background:rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.back-link:hover{ color:var(--text); border-color:rgba(255,255,255,.4); transform:translateY(-1px); }

.account-shell{
  display:flex;
  flex-direction:column;
  gap:calc(var(--space) * .65);
  max-width:1200px;
  margin:0 auto calc(var(--space) * 2);
}
.account-shell--wide{ max-width:1280px; }

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: var(--shadow);
}

.account-hero{
  padding:calc(var(--space) * 1.15) calc(var(--space) * 1.4);
  display:flex;
  justify-content:space-between;
  gap:calc(var(--space) * 1.1);
  align-items:center;
  border:1px solid var(--line2);
  border-radius:var(--radius);
}
.account-hero h1{ margin:6px 0 10px; font-size:clamp(24px, 2.4vw, 32px); }
.account-hero p{ margin:0; color:var(--muted); max-width:640px; line-height:1.5; }
.account-hero__pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line2);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--muted);
}
.hero-pill__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(123,92,255,.15);
}

.eyebrow{ text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:750; font-size:12px; }

.hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:calc(var(--space) * .8);
  min-width:260px;
}
.hero-stat{
  padding:12px 14px;
  border:1px solid var(--line2);
  border-radius:calc(var(--radius) * .7);
  background:rgba(255,255,255,.03);
}
.hero-stat__label{ color:var(--muted); font-size:12px; letter-spacing:.2px; }
.hero-stat__value{ font-weight:800; margin-top:6px; letter-spacing:.3px; }
.hero-stat__value--accent{ color:var(--accent); }

.account-layout{
  display:grid;
  grid-template-columns:minmax(260px, 0.9fr) minmax(0, 2.1fr);
  gap:calc(var(--space) * 1);
  align-items:start;
}
.account-sidebar{
  display:flex;
  flex-direction:column;
  gap:calc(var(--space) * .9);
  min-width:0;
}
.account-main{
  display:flex;
  flex-direction:column;
  gap:calc(var(--space) * 1);
  min-width:0;
}

.account-card{ padding:calc(var(--space) * 1.05); display:flex; flex-direction:column; gap:calc(var(--space) * .75); min-width:0; }
.account-card--tight{ padding:calc(var(--space) * .9); }
.account-card--danger{ border-color:rgba(255,97,97,.35); }
.account-card--wide{ grid-column:1 / -1; }
.account-card__head{ display:flex; justify-content:space-between; align-items:center; gap:calc(var(--space) * .8); flex-wrap:wrap; }
.account-card h2{ margin:6px 0 0; font-size:18px; }
.account-danger-actions{ display:flex; flex-direction:column; gap:10px; }
.account-danger-actions .btn{ width:100%; }

.account-profile{
  display:flex;
  gap:calc(var(--space) * .8);
  align-items:center;
}
.avatar--lg{
  width:62px;
  height:62px;
  font-size:22px;
}
.account-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Cleaner account visuals */
body.account-page .account-header,
body.account-page .card{
  background:none;
  border:1px solid var(--line2);
  box-shadow:none;
}
body.account-page .account-hero{
  background:none;
  border:1px solid var(--line2);
}
body.account-page .back-link{
  background:none;
  box-shadow:none;
}

@media (max-width: 980px){
  .account-layout{
    grid-template-columns:1fr;
  }
  .account-hero{
    flex-direction:column;
    align-items:flex-start;
  }
}

.detail-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin:0; }
.detail-list dt{ color:var(--muted); font-size:12px; letter-spacing:.2px; }
.detail-list dd{ margin:4px 0 0; font-weight:750; }
.muted-text{ color:var(--muted); line-height:1.5; margin:0; }

.checklist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; color:var(--muted); }
.checklist span{ color:var(--green); font-weight:800; margin-right:8px; }

.toggle-list{ display:flex; flex-direction:column; gap:10px; }
.toggle{ display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:650; }
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle__control{
  width:40px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.08);
  position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .16s ease, border-color .16s ease;
}
.toggle__control::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--text);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition: transform .16s ease, background .16s ease;
}
.toggle input:checked + .toggle__control{ background:rgba(36,194,108,.2); border-color:rgba(36,194,108,.5); }
.toggle input:checked + .toggle__control::after{ transform:translateX(18px); background:#2ecc71; }
.toggle__label{ flex:1; }

.workspace-prefs{ display:flex; flex-direction:column; gap:12px; }
.prefs-row{ display:flex; justify-content:space-between; align-items:center; gap:calc(var(--space) * 1); flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line2); }
.prefs-row:first-of-type{ border-top:0; }
.prefs-label{ font-weight:750; }
.prefs-sub{ color:var(--muted); font-size:13px; }
.prefs-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.pill-list{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line2);
  letter-spacing:.2px;
}

.account-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--line2);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.account-pill__name{ font-weight:800; letter-spacing:.3px; }
.account-pill__role{ color:var(--muted); font-size:12px; }
.account-meta{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.account-meta__row{ display:flex; flex-direction:column; gap:2px; }
.account-meta__label{ font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.55); }
.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(255,159,28,.6), rgba(36,194,108,.6));
  font-weight:800;
  letter-spacing:.4px;
}

.form{ display:flex; flex-direction:column; gap:12px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-label{ font-weight:750; letter-spacing:.2px; color:var(--muted); }
.form input,
.form textarea{
  border:1px solid var(--line2);
  border-radius:calc(var(--radius) * .7);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  color:var(--text);
  font-weight:700;
  width:100%;
  box-sizing:border-box;
}
.form textarea{ min-height:120px; resize:vertical; font-family:inherit; line-height:1.5; }
.form input:disabled{ opacity:.7; cursor:not-allowed; }
.form-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.form-hint{ color:var(--muted); font-size:13px; }
.form-hint.error{ color:var(--accent2); }