/* E-Girl Empire — operator dashboard.
   Dark, neon, dense. Three panes on a laptop, one at a time on a phone.
   No framework and no build step: the whole client is three files.

   No web fonts. Every external request from this page is a record, somewhere
   else, that this dashboard exists and who was looking at it — so the type is
   whatever the machine already has, sized and tracked to read like the design. */

:root {
  --acc:       #ff2d96;
  --acc-soft:  rgba(255, 45, 150, .12);
  --acc-line:  rgba(255, 45, 150, .28);
  --acc-dim:   rgba(255, 45, 150, .14);
  --violet:    #b45bff;
  --mint:      #3dff9e;
  --cyan:      #4ff0e4;
  --gold:      #ffd34f;
  --red:       #ff6b6b;
  --bg:        #0d0912;
  --text:      #f0e6f4;
  --muted:     rgba(240, 230, 244, .5);
  --faint:     rgba(240, 230, 244, .35);
  --panel:     rgba(255, 255, 255, .04);
  --panel-2:   rgba(255, 255, 255, .06);
  --hair:      rgba(255, 45, 150, .12);
  --r:         11px;

  --display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", Avenir, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(180, 91, 255, .10), transparent 60%),
    radial-gradient(1000px 500px at 10% 110%, rgba(255, 45, 150, .08), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 13.5px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; }
a:hover { filter: brightness(1.25); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--faint); }
::selection { background: rgba(255, 45, 150, .4); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 45, 150, .25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 150, .45); }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }
@keyframes pulseDot { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes riseIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* ---------- shared bits ---------- */

.btn {
  padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .13); background: var(--panel); color: var(--text);
  white-space: nowrap;
}
.btn:hover { border-color: var(--acc-line); background: var(--acc-soft); }
.btn.primary {
  border: 0; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--acc), var(--violet));
  box-shadow: 0 0 18px rgba(255, 45, 150, .35);
}
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; border-color: var(--acc-line); color: var(--acc); }
.btn.danger { border-color: rgba(255, 107, 107, .4); color: var(--red); }
.btn.danger:hover { background: rgba(255, 107, 107, .12); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.sm { padding: 4px 9px; font-size: 11px; border-radius: 7px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .12); background: var(--panel); color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.chip.on { border-color: var(--acc); background: var(--acc-soft); color: #ff8ac4; }
.chip.whale  { border-color: rgba(255, 211, 79, .4); background: rgba(255, 211, 79, .12); color: var(--gold); }
.chip.flag   { border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .1); color: var(--red); }
.chip.good   { border-color: rgba(61, 255, 158, .35); background: rgba(61, 255, 158, .08); color: var(--mint); }
.chip.cool   { border-color: rgba(180, 91, 255, .4); background: rgba(180, 91, 255, .12); color: #c98aff; }
.chip .x { opacity: .5; font-size: 12px; margin-left: 1px; }
.chip .x:hover { opacity: 1; }

.card {
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: 14px; padding: 16px 18px;
}
.card.lit {
  background: rgba(255, 45, 150, .07); border-color: var(--acc-line);
  box-shadow: 0 0 24px rgba(255, 45, 150, .12);
}
.eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint);
}
.hint { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.money { color: var(--mint); font-weight: 800; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

label.field { display: grid; gap: 5px; font-size: 11.5px; color: var(--muted); margin-bottom: 11px; }
label.field > input, label.field > textarea, label.field > select,
.inp {
  background: var(--panel); border: 1px solid var(--acc-dim); border-radius: 9px;
  padding: 9px 11px; color: var(--text); font-size: 13px; outline: none; width: 100%;
}
label.field > input:focus, label.field > textarea:focus, .inp:focus { border-color: var(--acc); }
label.field > textarea { resize: vertical; line-height: 1.55; }
label.check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; margin-bottom: 10px; cursor: pointer; }
label.check input { accent-color: var(--acc); width: 16px; height: 16px; }
.fieldset { margin-bottom: 26px; }
.fieldset h3 { font-size: 13px; font-weight: 800; margin: 0 0 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.avatar {
  border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; flex: none; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- login ---------- */

.login { height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(360px, 100%); display: grid; gap: 12px; padding: 32px;
  background: rgba(13, 9, 18, .8); border: 1px solid var(--acc-line); border-radius: 18px;
  box-shadow: 0 0 60px rgba(255, 45, 150, .12);
}
.login-card h1 {
  font: 800 17px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 6px; text-align: center;
  background: linear-gradient(90deg, #fff, var(--acc));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-card input {
  background: var(--panel); border: 1px solid var(--acc-dim);
  border-radius: 10px; padding: 11px 13px; outline: none;
}
.login-card input:focus { border-color: var(--acc); }
.error { color: var(--red); font-size: 12px; min-height: 16px; text-align: center; margin: 0; }

/* ---------- shell ---------- */

.app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--hair); background: rgba(13, 9, 18, .7); flex: none;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--acc), var(--violet));
  box-shadow: 0 0 18px rgba(255, 45, 150, .55);
  font: 800 13px/1 var(--display); color: #fff;
}
.logo-text {
  font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(90deg, #fff, var(--acc));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pill {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  border: 1px solid var(--acc-line); border-radius: 999px; background: var(--acc-soft);
  font-size: 12px; font-weight: 700;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.live { background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulseDot 2.4s infinite; }
.dot.dead { background: var(--red); box-shadow: 0 0 8px var(--red); }
.status { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }

.switch { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.switch input { display: none; }
.switch .track {
  width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14); position: relative; transition: .15s;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--muted); transition: .15s;
}
.switch input:checked + .track { background: var(--acc-soft); border-color: var(--acc); }
.switch input:checked + .track::after { left: 18px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }

.bell { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.bell:hover { background: var(--acc-soft); }
.bell .count {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--acc); color: #fff;
  font-size: 9.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 10px rgba(255, 45, 150, .6);
}

.body { display: flex; flex: 1; min-height: 0; }

.rail {
  width: 62px; flex: none; border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 5px;
}
.rail-btn {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: rgba(240, 230, 244, .45); border: 1px solid transparent; position: relative;
}
.rail-btn:hover { color: #fff; background: rgba(255, 45, 150, .1); }
.rail-btn.on { color: #fff; background: rgba(255, 45, 150, .18); border-color: rgba(255, 45, 150, .4); }
.rail-btn .tip {
  position: absolute; left: 52px; padding: 4px 9px; border-radius: 7px; font-size: 11px;
  background: #1a1220; border: 1px solid var(--acc-line); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: .12s; z-index: 30;
}
.rail-btn:hover .tip { opacity: 1; }
.rail-spacer { flex: 1; }

.screen { display: flex; flex: 1; min-width: 0; min-height: 0; }
.pad { flex: 1; min-width: 0; overflow-y: auto; padding: 24px 28px; }
.pad h2 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }

/* ---------- conversation list ---------- */

.list {
  width: clamp(250px, 25vw, 340px); flex: none;
  border-right: 1px solid var(--hair); display: flex; flex-direction: column; min-height: 0;
}
.list-head { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 9px; flex: none; }
.list-title { display: flex; align-items: baseline; gap: 8px; }
.list-title b { font-size: 15px; }
.list-title .n { font-size: 11px; font-weight: 700; color: var(--acc); }
.seg { display: flex; gap: 2px; background: rgba(255, 255, 255, .05); border-radius: 7px; padding: 2px; }
.seg button { font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 5px; color: var(--faint); }
.seg button.on { color: #fff; background: rgba(255, 45, 150, .35); }
.search {
  display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .05);
  border: 1px solid var(--acc-dim); border-radius: 9px; padding: 7px 10px;
}
.search input { flex: 1; background: none; border: 0; outline: none; font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rows { flex: 1; overflow-y: auto; padding: 2px 7px 14px; display: flex; flex-direction: column; gap: 2px; }

.crow {
  display: flex; gap: 10px; padding: 9px; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; animation: riseIn .16s ease-out;
}
.crow:hover { background: rgba(255, 45, 150, .07); }
.crow.on { background: rgba(255, 45, 150, .1); border-color: rgba(255, 45, 150, .35); }
.crow.blocked { opacity: .4; }
.crow .av { width: 40px; height: 40px; font-size: 12.5px; position: relative; }
.crow .mode-dot {
  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--bg);
}
.mode-auto   { background: var(--mint); box-shadow: 0 0 7px var(--mint); }
.mode-suggest{ background: var(--gold); }
.mode-manual { background: rgba(255, 255, 255, .3); }
.crow .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crow .l1 { display: flex; align-items: center; gap: 6px; }
.crow .nm { font-size: 12.5px; font-weight: 700; }
.crow .t { font-size: 10.5px; color: var(--faint); flex: none; }
.crow .l2 { display: flex; align-items: center; gap: 6px; }
.crow .last { font-size: 11.5px; color: var(--muted); flex: 1; min-width: 0; }
.crow .unread {
  flex: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--acc); color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 0 10px rgba(255, 45, 150, .6);
}
.crow .l3 { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--faint); }
.tier {
  font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; flex: none;
  letter-spacing: .04em;
}
.empty { padding: 34px 16px; text-align: center; font-size: 12px; color: var(--faint); }

/* ---------- thread ---------- */

.thread { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.thread-head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--hair);
}
.thread-head .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.thread-head .who b { font-size: 14px; font-weight: 800; }
.thread-head .sub { display: flex; gap: 8px; font-size: 11px; color: var(--muted); }
.thread-head .sub .h { color: var(--violet); }

.modes { display: flex; gap: 2px; background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 2px; }
.modes button {
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 6px; color: var(--faint);
}
.modes button.on { color: #0d0912; background: var(--acc); box-shadow: 0 0 12px rgba(255, 45, 150, .5); }
.modes button.on[data-mode="suggest"] { background: var(--gold); }
.modes button.on[data-mode="manual"] { background: rgba(255, 255, 255, .75); }
.modes button.inherited { color: var(--mint); border: 1px dashed rgba(61, 255, 158, .4); }

.banner {
  margin: 10px 16px 0; padding: 9px 13px; border-radius: 10px; font-size: 12px;
  border: 1px solid rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .08); color: #ffb3b3;
  display: flex; align-items: center; gap: 10px;
}
.banner.warn { border-color: rgba(255, 211, 79, .4); background: rgba(255, 211, 79, .08); color: #ffe08a; }
.banner.info { border-color: rgba(79, 240, 228, .35); background: rgba(79, 240, 228, .06); color: #a8f5ef; }

.msgs { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; animation: riseIn .16s ease-out; }
.msg.in { justify-content: flex-start; }
.msg.out { justify-content: flex-end; }
.bub { max-width: min(56%, 520px); padding: 9px 13px; font-size: 13px; line-height: 1.5; }
.msg.in .bub {
  background: var(--panel-2); border: 1px solid rgba(180, 91, 255, .22);
  border-radius: 14px 14px 14px 4px;
}
.msg.out .bub {
  background: linear-gradient(135deg, rgba(255, 45, 150, .85), rgba(180, 91, 255, .75));
  border-radius: 14px 14px 4px 14px; color: #fff;
  box-shadow: 0 2px 16px rgba(255, 45, 150, .22);
}
.msg.out.queued .bub { opacity: .6; }
.msg.deleting .bub { opacity: .35; text-decoration: line-through; }

/* The delete control. Hidden until you hover the message, because it is the one
   button on this screen with no undo and it should not be the first thing the
   eye lands on. Always visible on touch, where there is no hover to reveal it. */
.msg-del {
  align-self: center; flex: none; width: 22px; height: 22px; border-radius: 6px;
  color: var(--faint); font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s;
}
.msg:hover .msg-del { opacity: 1; }
.msg-del:hover { color: var(--red); background: rgba(255, 107, 107, .12); }
@media (hover: none) { .msg-del { opacity: .45; } }
.msg.out.failed .bub { background: rgba(255, 107, 107, .18); border: 1px solid var(--red); color: #ffc9c9; }
.bub .meta { font-size: 9.5px; opacity: .6; margin-top: 4px; text-align: right; }
.msg.in .bub .meta { text-align: left; }
.bub img, .bub video { max-width: 100%; border-radius: 9px; display: block; margin-bottom: 6px; }
.bub audio { width: 240px; margin-bottom: 4px; }
.daymark {
  align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--faint);
  padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px;
}
.logline {
  align-self: center; display: flex; align-items: center; gap: 8px; padding: 5px 14px;
  border-radius: 999px; background: rgba(61, 255, 158, .08);
  border: 1px solid rgba(61, 255, 158, .3); color: var(--mint);
  font-size: 11.5px; font-weight: 700;
}

/* the suggestion, sitting above the box */
.suggest { margin: 0 16px; display: flex; flex-direction: column; gap: 6px; }
.sug {
  border: 1px solid var(--acc-line); background: rgba(255, 45, 150, .06);
  border-radius: 12px; padding: 10px 13px; display: flex; flex-direction: column; gap: 8px;
}
.sug .txt { font-size: 13px; line-height: 1.5; }
.sug .who { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sug .acts { display: flex; gap: 6px; flex-wrap: wrap; }

.composer { flex: none; padding: 9px 16px 14px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.quick { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.compose-row { display: flex; align-items: flex-end; gap: 9px; }
.compose-row textarea {
  flex: 1; min-height: 38px; max-height: 140px; resize: none;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--acc-dim);
  border-radius: 10px; padding: 9px 13px; font-size: 13px; outline: none;
}
.compose-row textarea:focus { border-color: var(--acc); }
.icon-btn {
  width: 40px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--acc-line); background: var(--acc-soft); color: var(--acc);
}
.icon-btn:hover { background: rgba(255, 45, 150, .18); }
.icon-btn.send {
  border: 0; color: #fff; background: linear-gradient(135deg, var(--acc), var(--violet));
  box-shadow: 0 0 16px rgba(255, 45, 150, .45);
}

/* ---------- fan panel ---------- */

.fan {
  width: 296px; flex: none; border-left: 1px solid var(--hair);
  overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 15px;
}
.fan .head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fan .head .avatar {
  width: 68px; height: 68px; font-size: 21px;
  border: 2px solid var(--acc-line); box-shadow: 0 0 24px rgba(255, 45, 150, .3);
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--panel); border: 1px solid var(--hair); border-radius: 11px; padding: 9px 11px; }
.stat b { font-size: 15px; font-weight: 800; display: block; }
.stat span { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.block { display: flex; flex-direction: column; gap: 7px; }
.fan textarea { min-height: 78px; }
.missing { display: flex; flex-wrap: wrap; gap: 5px; }
.missing .chip { cursor: default; border-style: dashed; }

/* ---------- vault ---------- */

.vault-side {
  width: 250px; flex: none; border-right: 1px solid var(--hair);
  overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px;
}
.shelf {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r); cursor: pointer; border: 1px solid transparent;
}
.shelf:hover { background: rgba(255, 45, 150, .07); }
.shelf.on { background: rgba(255, 45, 150, .1); border-color: rgba(255, 45, 150, .35); }
.shelf .avatar { width: 34px; height: 34px; font-size: 12px; background: linear-gradient(135deg, var(--acc), var(--violet)); }
.shelf .nm { font-size: 12.5px; font-weight: 700; }
.shelf .sub { font-size: 10px; color: var(--faint); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--hair); border-radius: 13px; overflow: hidden; background: var(--panel); }
.tile .thumb {
  height: 128px; display: grid; place-items: center; background: rgba(255, 45, 150, .05);
  position: relative; cursor: pointer;
}
.tile .thumb img, .tile .thumb video { width: 100%; height: 100%; object-fit: cover; }
.tile .body { padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; }
.tile .t { font-size: 12px; font-weight: 700; }
.tile .acts { display: flex; gap: 5px; flex-wrap: wrap; }
.tile .price { font-size: 12px; font-weight: 800; color: var(--mint); }
.tile .price.none { color: var(--faint); font-weight: 600; }

.tile-peek {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 7px; font-size: 12px; line-height: 1;
  background: rgba(13, 9, 18, .72); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .14); opacity: 0; transition: opacity .12s;
}
.tile:hover .tile-peek { opacity: 1; }
.tile-peek:hover { background: var(--acc); border-color: var(--acc); }
@media (hover: none) { .tile-peek { opacity: .8; } }

.step-n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
  background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line);
}

.drop {
  border: 1px dashed var(--acc-line); border-radius: 13px; padding: 22px;
  text-align: center; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.drop.over { background: var(--acc-soft); border-color: var(--acc); color: var(--text); }

/* ---------- metrics ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi b { font-size: 23px; font-weight: 800; display: block; }
.kpi .lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.kpi .delta { font-size: 10.5px; font-weight: 700; margin-top: 6px; }
.kpi .delta.up { color: var(--mint); }
.kpi .delta.down { color: var(--red); }
.kpi .delta.flat { color: var(--faint); }
.bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--acc), var(--violet)); }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 0 8px 7px; font-weight: 800; }
.tbl td { padding: 8px; border-top: 1px solid rgba(255, 255, 255, .05); }

/* ---------- training ---------- */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs button {
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 9px;
  color: var(--muted); border: 1px solid transparent;
}
.tabs button.on { color: #fff; background: var(--acc-soft); border-color: var(--acc-line); }

.practice { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.ptrail { min-height: 180px; max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.lesson {
  border: 1px solid var(--hair); border-radius: 11px; padding: 10px 13px;
  display: flex; flex-direction: column; gap: 5px; background: var(--panel); margin-bottom: 8px;
}
.lesson.retired { opacity: .45; }
.lesson .him { font-size: 12px; color: var(--muted); }
.lesson .her { font-size: 13px; }
.lesson .foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.score { font-size: 10.5px; font-weight: 800; color: var(--mint); }
.explain-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.explain-effect {
  font-size: 11.5px; line-height: 1.55; color: var(--mint);
  border-left: 2px solid rgba(61, 255, 158, .35); padding-left: 10px; margin-top: 8px;
}
.summary { font-size: 12.5px; line-height: 1.6; }
.sug-x { color: var(--faint); font-size: 12px; width: 20px; height: 20px; border-radius: 5px; }
.sug-x:hover { color: var(--red); background: rgba(255, 107, 107, .12); }
.unread.waiting { background: transparent; border: 1px solid var(--acc); color: var(--acc); box-shadow: none; }
.score.cold { color: var(--faint); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  padding: 10px 18px; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  background: #1a1220; border: 1px solid var(--acc-line);
  box-shadow: 0 8px 34px rgba(0, 0, 0, .5); animation: riseIn .16s ease-out;
}
.toast.bad { border-color: var(--red); color: #ffc9c9; }

/* ---------- modal ---------- */

.modal-wrap {
  position: fixed; inset: 0; z-index: 80; background: rgba(6, 4, 9, .72);
  display: grid; place-items: center; padding: 24px;
}
.modal {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  background: #140e1c; border: 1px solid var(--acc-line); border-radius: 16px; padding: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.modal h3 { margin: 0 0 4px; font-size: 15px; }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* ---------- alerts drawer ---------- */

.drawer {
  position: fixed; top: 56px; right: 0; bottom: 0; width: min(380px, 100%); z-index: 70;
  background: #120c19; border-left: 1px solid var(--acc-line); padding: 16px;
  overflow-y: auto; box-shadow: -18px 0 46px rgba(0, 0, 0, .45);
}
.alert-row {
  border: 1px solid var(--hair); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
}
.alert-row:hover { border-color: var(--acc-line); background: var(--acc-soft); }

/* ---------- phone ---------- */

.back-btn { display: none; }

@media (max-width: 900px) {
  .fan { position: fixed; inset: 56px 0 0 auto; width: min(320px, 100%); z-index: 60; background: #120c19; }
  .fan.hidden-pane { display: none; }
}

/* Phone. The dashboard gets used one-handed at least as often as it gets used
   on a laptop, so this is not a fallback — it is the other half of the design. */
@media (max-width: 700px) {
  .rail { width: 52px; }
  .list { width: 100%; }
  .screen.chats.has-thread .list { display: none; }
  .screen.chats:not(.has-thread) .thread { display: none; }
  .back-btn { display: grid; }
  .pad { padding: 16px; }
  .vault-side { width: 100%; }
  .screen.vault.has-shelf .vault-side { display: none; }
  .topbar { gap: 10px; padding: 0 10px; }
  .topbar .status, .topbar .auto-all { display: none; }
  .modal { padding: 18px; }
  .modal .acts button { flex: 1 1 auto; }
  .thread-head { padding: 9px 10px; gap: 8px; flex-wrap: wrap; }
  /* The mode switch gets its own full-width row rather than being crushed in
     beside the name. It is the control most often reached for on a phone. */
  .thread-head .who { flex: 1 1 auto; min-width: 110px; }
  .thread-head .modes { order: 9; flex: 1 1 100%; }
  .thread-head .modes button { flex: 1; }
  .msgs { padding: 14px 12px; }
  .bub { max-width: 82%; }
  .composer { padding: 8px 10px 12px; }
  .fan { padding: 16px 14px; }
}

/* Narrower still: the wordmark stops fitting beside the account pill, and a
   two-line logo looks broken rather than compact. */
@media (max-width: 460px) {
  .logo-text { display: none; }
  .thread-head #t-spend-wrap { display: none !important; }
  .modes button { padding: 5px 8px; font-size: 10.5px; }
}

/* Reply-to grouping and the on-open "writing a suggestion" placeholder. */
.row-header {
  padding: 10px 12px 4px; color: var(--faint);
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.sug-thinking {
  margin: 0 16px; padding: 9px 13px; border-radius: 12px; font-size: 12.5px;
  color: var(--muted); border: 1px dashed var(--acc-line); background: rgba(255,45,150,.04);
}