/* SYC main panel. Same visual language as the Claude panel: dark, brand mark
   behind everything, one accent. */

/* The very same face the Claude console loads, from the very same URL, so a
   reply reads identically in both places. */
@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/vazirmatn-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/vazirmatn-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

/* Users panel themes only: each theme gets a face of its own, not just a
   different weight, so girly/skeleton/super-dark read as different rooms
   rather than the same page recoloured. --theme-font (set by theme.js) picks
   between these and Vazirmatn, which stays the "light" theme's face. */
@font-face {
  font-family: "Lalezar";
  src: url("/assets/lalezar-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Reem Kufi";
  src: url("/assets/reemkufi-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Reem Kufi";
  src: url("/assets/reemkufi-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Aref Ruqaa";
  src: url("/assets/arefruqaa-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aref Ruqaa";
  src: url("/assets/arefruqaa-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}
/* Blaka Hollow: the hollow/bony display face the "Skeletal" theme now uses. */
@font-face {
  font-family: "Blaka Hollow";
  src: url("/assets/blakahollow-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #071116;
  --panel: rgba(13, 27, 33, 0.88);
  --border: rgba(181, 219, 213, 0.14);
  --border-strong: rgba(85, 214, 176, 0.32);
  --text: #edf8f5;
  --muted: #9aafac;
  /* Same names and same values as the Claude console's :root, so the session
     column and the chat can be copied across verbatim instead of re-tuned. */
  --muted-2: #69817e;
  --panel-solid: #0d1b21;
  --panel-soft: rgba(255, 255, 255, 0.05);
  --accent: #55d6b0;
  --accent-2: #78aef8;
  --accent-soft: rgba(85, 214, 176, 0.13);
  --success: #55d6b0;
  --danger: #ff7890;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

/* The per-theme face is kept ONLY inside the users panel, where a theme is a
   whole skin. In the main panel and every other section the decorative faces
   (Blaka Hollow, Aref Ruqaa, Lalezar) turned readable Persian titles into an
   ugly, "wrong-looking" line, so those headings stay on Vazirmatn like the
   body text around them. */
.user-brand-row strong,
.user-empty-state strong {
  font-family: var(--theme-font, "Vazirmatn"), system-ui, sans-serif;
}

.theme-display,
.dash h1,
.brand strong {
  font-family: "Vazirmatn", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  /* Vazirmatn everywhere text has to be *read*. The per-theme face is a
     display face only (see .theme-display below) — Aref Ruqaa and Lalezar set
     across a whole chat transcript are unreadable, which is what the users
     panel turned into when --theme-font was applied here. */
  font-family: "Vazirmatn", system-ui, sans-serif;
  /* The photographs live in .theme-backdrop; the body only holds the base
     colour, so the pages that never load a theme still look right. */
  background: var(--bg);
  transition: background 1.2s ease, color .3s ease;
  -webkit-font-smoothing: antialiased;
}

.ambient {
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 70vh;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(139, 124, 248, 0.16), transparent 70%);
  pointer-events: none;
}

.watermark {
  position: fixed;
  inset: 12% 20%;
  z-index: 0;
  background: url("/syc-logo.jpg") center / min(46vw, 520px) no-repeat;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(circle at center, #000 42%, transparent 76%);
  mask-image: radial-gradient(circle at center, #000 42%, transparent 76%);
  pointer-events: none;
}

/* --- Login ---------------------------------------------------------------- */

.login-body {
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  padding: 34px 30px;
  text-align: center;
  background: linear-gradient(145deg, rgba(24, 31, 50, 0.96), rgba(15, 21, 36, 0.96));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.brand-orb {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  color: #c6bdff;
  background: linear-gradient(145deg, rgba(139, 124, 248, 0.22), rgba(90, 215, 197, 0.1));
  border: 1px solid rgba(165, 151, 255, 0.28);
  border-radius: 50%;
  position: relative;
}

/* One bright point runs the rim when the page appears. */
.brand-orb::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 300deg,
    rgba(139, 124, 248, 0.55) 342deg, #fff 355deg, rgba(139, 124, 248, 0.5) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: sweep 2.4s cubic-bezier(0.33, 0, 0.2, 1) 1 both;
}

@keyframes sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.brand-orb.small { width: 40px; height: 40px; margin: 0; }

.brand-orb svg {
  position: relative;
  z-index: 3;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.brand-orb.small svg { width: 20px; height: 20px; }

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 3px;
}

.login-card h1 { margin: 6px 0 20px; font-size: 19px; }

label {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

input, select, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  background: rgba(8, 12, 22, 0.72);
  border: 1px solid var(--border);
  border-radius: 11px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(139, 124, 248, 0.55);
}

button {
  padding: 11px 16px;
  color: #140f2e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 90ms ease, opacity 140ms ease;
}

button:active { transform: scale(0.97); }
button:disabled { opacity: 0.6; cursor: default; }

.login-card button { width: 100%; margin-top: 6px; }


.login-card small {
  display: block;
  margin-top: 12px;
  min-height: 16px;
  color: #e0645f;
  font-size: 11.5px;
}

/* --- SYC command-center login -------------------------------------------- */

/* Overscroll and short viewports must never show a white canvas behind the scene. */
html:has(> .login-body) { background: #01030b; }

.login-body {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow-x: hidden;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  color: #f5f8ff;
  background:
    radial-gradient(circle at 50% -12%, rgba(14, 104, 255, 0.26), transparent 38%),
    radial-gradient(circle at 8% 88%, rgba(13, 72, 199, 0.18), transparent 34%),
    linear-gradient(155deg, #01030b 0%, #040b1d 48%, #01040c 100%);
  isolation: isolate;
}

.login-scene,
.login-scene > div {
  position: fixed;
  pointer-events: none;
}

.login-scene { inset: 0; z-index: -1; overflow: hidden; }

.login-nebula {
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.8;
  animation: login-nebula-drift 10s ease-in-out infinite alternate;
}

.login-nebula-one {
  top: -18vw;
  right: calc(50% - 36vw);
  width: 72vw;
  height: 48vw;
  background: radial-gradient(circle, rgba(0, 111, 255, 0.25), rgba(25, 70, 190, 0.08) 45%, transparent 71%);
}

.login-nebula-two {
  left: -20vw;
  bottom: -24vw;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgba(0, 84, 255, 0.15), transparent 68%);
  animation-delay: -4s;
}

.login-grid {
  inset: 0;
  opacity: 0.11;
  background-image:
    linear-gradient(rgba(89, 149, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 149, 255, 0.28) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 70%);
  transform: perspective(500px) rotateX(64deg) scale(1.7) translateY(20%);
  transform-origin: bottom;
}

.login-stars {
  inset: 0;
  opacity: 0.58;
  background-image:
    radial-gradient(circle, #82bdff 0 1px, transparent 1.6px),
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #2e8cff 0 1px, transparent 1.8px);
  background-position: 11px 19px, 67px 83px, 129px 41px;
  background-size: 143px 127px, 191px 179px, 233px 211px;
  animation: login-stars-pulse 5s ease-in-out infinite alternate;
}

.login-ring {
  border: 1px solid rgba(74, 144, 255, 0.12);
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(0, 94, 255, 0.035);
}

.login-ring-one { top: 10%; right: -13vw; width: 38vw; height: 38vw; }
.login-ring-two { left: -9vw; bottom: 6%; width: 30vw; height: 30vw; }

.login-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(100svh - 48px);
}

.login-body .login-card {
  position: relative;
  width: min(430px, 100%);
  overflow: visible;
  padding: 34px 38px 25px;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(12, 25, 52, 0.9), rgba(3, 10, 25, 0.94)),
    rgba(3, 10, 25, 0.92);
  border: 1px solid rgba(95, 159, 255, 0.27);
  border-radius: 30px;
  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(32, 100, 234, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 50px rgba(9, 67, 169, 0.08);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  animation: login-card-arrive 0.75s cubic-bezier(.2,.8,.2,1) both;
}

.login-body .login-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(88, 161, 255, 0.55), transparent 26%, transparent 70%, rgba(0, 79, 255, 0.28));
  filter: blur(12px);
  opacity: 0.36;
}

.login-card-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.login-card-shine::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -70%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(121, 184, 255, 0.08), transparent);
  transform: rotate(18deg);
  animation: login-card-shine 7s ease-in-out 1.2s infinite;
}

.login-logo-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 164px;
  height: 164px;
  margin: -10px auto 4px;
}

.login-halo {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 133, 255, 0.42), rgba(0, 82, 255, 0.17) 35%, transparent 68%);
  filter: blur(15px);
  animation: login-halo-breathe 2.2s ease-in-out infinite alternate;
}

.login-logo-frame {
  position: relative;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border: 2px solid rgba(133, 194, 255, 0.7);
  border-radius: 50%;
  background: #06122d;
  box-shadow:
    0 0 12px #41a4ff,
    0 0 34px rgba(0, 108, 255, 0.9),
    0 0 72px rgba(0, 76, 255, 0.6),
    inset 0 0 16px rgba(63, 156, 255, 0.35);
}

.login-logo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 18px rgba(72, 166, 255, 0.55);
}

.login-logo-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); }

.login-orbit {
  position: absolute;
  border-radius: 50%;
}

.login-orbit-outer {
  inset: 4px;
  border: 1px solid rgba(64, 149, 255, 0.25);
  box-shadow: 0 0 20px rgba(0, 103, 255, 0.24), inset 0 0 18px rgba(0, 80, 255, 0.12);
  animation: login-orbit-spin 3.2s linear infinite;
}

.login-orbit-outer::before {
  content: "✦";
  position: absolute;
  top: 10px;
  left: 13px;
  width: 19px;
  height: 19px;
  color: #fff;
  font-size: 20px;
  line-height: 19px;
  text-shadow:
    0 0 5px #fff,
    0 0 12px #67b7ff,
    0 0 25px #0077ff,
    0 0 44px #005eff;
  animation: login-star-flare 0.9s ease-in-out infinite alternate;
}

.login-orbit-outer::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 18px;
  width: 33px;
  height: 2px;
  background: linear-gradient(90deg, rgba(57, 151, 255, 0.9), transparent);
  filter: blur(2px);
  transform: rotate(42deg);
  transform-origin: right;
}

.login-orbit-inner {
  inset: 18px;
  border: 1px dashed rgba(128, 190, 255, 0.28);
  animation: login-orbit-spin 9s linear infinite reverse;
}

.login-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 7px;
  color: #68adff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 4px;
}

.login-eyebrow span { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #207cf1); }
.login-eyebrow span:last-child { transform: scaleX(-1); }

.login-body .login-card h1 {
  margin: 0;
  color: #f7faff;
  font-size: clamp(21px, 5.4vw, 27px);
  font-weight: 800;
  letter-spacing: -0.6px;
  text-shadow: 0 2px 18px rgba(89, 158, 255, 0.17);
}

.login-body .login-card h1 b { color: #6fb6ff; font-weight: 900; }

.login-subtitle {
  margin: 7px 0 24px;
  color: #8193b5;
  font-size: 12px;
}

.login-fields { display: grid; gap: 15px; }

.login-body .login-field {
  display: block;
  margin: 0;
  color: #aab8d2;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
}

.login-body .login-field[hidden] {
  display: none !important;
}

.login-field-label { display: block; margin: 0 4px 7px; }

.login-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  height: 51px;
  overflow: hidden;
  background: rgba(1, 7, 20, 0.72);
  border: 1px solid rgba(91, 127, 179, 0.26);
  border-radius: 14px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.login-input-shell:focus-within {
  border-color: rgba(70, 157, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(27, 116, 255, 0.12), 0 0 25px rgba(0, 98, 255, 0.12);
  transform: translateY(-1px);
}

.login-input-shell > svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-left: 15px;
  color: #5697e9;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-body .login-input-shell input {
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px;
  color: #edf5ff;
  font-size: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.login-body .login-input-shell input::placeholder { color: #53647f; opacity: 1; }
.login-body .login-input-shell input:focus { outline: 0; }

.login-password-toggle {
  display: grid;
  flex: 0 0 43px;
  place-items: center;
  width: 43px;
  height: 43px;
  margin: 0 0 0 3px;
  padding: 0;
  color: #607696;
  background: transparent;
  border-radius: 12px;
}

.login-password-toggle:hover,
.login-password-toggle[aria-pressed="true"] { color: #72b9ff; background: rgba(59, 139, 242, 0.08); }

.login-password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-body .login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin: 21px 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(115deg, #0867df, #168cff 48%, #0758cd);
  border: 1px solid rgba(132, 198, 255, 0.38);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 91, 225, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.login-body .login-submit:hover { filter: brightness(1.1); box-shadow: 0 13px 36px rgba(0, 104, 255, 0.44); transform: translateY(-1px); }
.login-body .login-submit:active { transform: translateY(1px) scale(0.99); }

.login-submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
}

.login-submit.is-loading svg { animation: login-loading 0.8s linear infinite; }

.login-body .login-card small {
  display: block;
  min-height: 17px;
  margin: 10px 0 0;
  color: #ff777f;
  font-size: 11px;
}

.login-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #526886;
  font-size: 9.5px;
}

.login-secure i {
  width: 5px;
  height: 5px;
  background: #24bc8e;
  border-radius: 50%;
  box-shadow: 0 0 8px #20cc96;
}

@keyframes login-orbit-spin { to { transform: rotate(360deg); } }
@keyframes login-halo-breathe { to { opacity: 0.65; transform: scale(1.12); } }
@keyframes login-star-flare { to { transform: scale(1.32) rotate(18deg); } }
@keyframes login-stars-pulse { to { opacity: 0.8; } }
@keyframes login-nebula-drift { to { transform: translate3d(3vw, 2vh, 0) scale(1.08); } }
@keyframes login-card-arrive { from { opacity: 0; transform: translateY(22px) scale(0.975); } }
@keyframes login-card-shine { 0%, 68% { right: -70%; } 88%, 100% { right: 130%; } }
@keyframes login-loading { to { transform: rotate(180deg); } }

@media (max-width: 520px) {
  .login-body { padding-inline: 14px; }
  .login-body .login-card { padding: 29px 22px 22px; border-radius: 25px; }
  .login-logo-stage { width: 148px; height: 148px; }
  .login-logo-frame { width: 105px; height: 105px; }
  .login-subtitle { margin-bottom: 20px; }
  .login-ring { display: none; }
}

@media (max-height: 720px) {
  .login-body .login-card { padding-top: 22px; padding-bottom: 18px; }
  .login-logo-stage { width: 125px; height: 125px; margin-top: -7px; }
  .login-logo-frame { width: 88px; height: 88px; }
  .login-subtitle { margin-bottom: 14px; }
  .login-fields { gap: 10px; }
  .login-input-shell { height: 46px; }
  .login-body .login-submit { height: 47px; margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-body *, .login-body *::before, .login-body *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

button.ghost {
  color: var(--muted);
  font-weight: 400;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

/* --- Shell ---------------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 5vw, 54px);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand strong { display: block; font-size: 14px; }
.brand span { color: var(--muted); font-size: 11.5px; }

.back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 11px;
}

.back svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.topbar-right { display: flex; align-items: center; gap: 10px; }
.who { color: var(--muted); font-size: 12px; }

.dash {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 54px) clamp(16px, 5vw, 54px) 60px;
}

.dash h1 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 27px); }
.lede { margin: 0 0 28px; color: var(--muted); font-size: 13px; line-height: 1.9; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.card:hover {
  background: rgba(139, 124, 248, 0.1);
  border-color: rgba(139, 124, 248, 0.34);
  transform: translateY(-2px);
}

.card.disabled { opacity: 0.5; pointer-events: none; }
.card b { font-size: 14px; }
.card small { color: var(--muted); font-size: 11.5px; line-height: 1.7; }

.card em {
  margin-top: 4px;
  color: #f0c07a;
  font-size: 10.5px;
  font-style: normal;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  color: #bdb4ff;
  background: rgba(139, 124, 248, 0.13);
  border-radius: 11px;
}

.card-icon svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Brand logos on the professional-account cards: a white (or brand-coloured)
   badge with the official SVG mark inside, so each engine is recognisable at
   a glance instead of being a plain text card. */
.card-icon.card-logo { background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28); }
.card-icon.card-logo img { width: 21px; height: 21px; display: block; }
.card-icon.card-logo i { font-style: normal; font-weight: 700; font-size: 15px; color: #5a4fd0; }
.card-icon.card-logo.brand-kimi { background: #000; } /* Kimi: white K + blue dot on black */
.card-icon.card-logo.brand-api { background: linear-gradient(135deg, #6366f1, #0ea5e9); }
.card-icon.card-logo.brand-api svg { width: 21px; height: 21px; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-icon.card-logo img { filter: none !important; }
.card-icon.card-logo.brand-main-gpt { background: #10a37f; color: #fff; }
.card-icon.card-logo.brand-openrouter { background: #7c3aed; } /* OpenRouter violet */
.card-icon.card-logo.brand-openrouter img { filter: brightness(0) invert(1); }

.card.admin { border-color: rgba(224, 162, 72, 0.28); }
.card.admin .card-icon { color: #f0c07a; background: rgba(224, 162, 72, 0.12); }

.empty {
  padding: 60px 20px;
  color: var(--muted);
  text-align: center;
}

.empty p { margin: 0 0 6px; font-size: 14px; }
.empty small { font-size: 12px; opacity: 0.75; }

.hidden { display: none !important; }

.muted { color: var(--muted); font-size: 12.5px; text-align: center; }

/* A section a user may see the name of but not enter. Rendered without a link,
   so there is nothing to click; the server refuses the route regardless. */
.card.locked {
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed;
  border-color: rgba(224, 162, 72, 0.3);
}

.card.locked:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(224, 162, 72, 0.3);
}

.card.locked .card-icon {
  color: #f0c07a;
  background: rgba(224, 162, 72, 0.1);
}

.card.locked em { color: #e0a248; }

.main-gpt-toggle {
  position: absolute;
  inset: 12px auto auto 12px;
  width: 42px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(127, 127, 127, .22);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.main-gpt-toggle span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
  transition: transform .18s ease;
}

.main-gpt-toggle[aria-checked="true"] { background: #10a37f; border-color: #10a37f; }
.main-gpt-toggle[aria-checked="true"] span { transform: translateX(18px); }
.main-gpt-toggle:disabled { cursor: wait; opacity: .6; }

.codex-classic-control {
  position: absolute;
  inset: 12px auto auto 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  direction: ltr;
}

.codex-classic-control .main-gpt-toggle {
  position: static;
  flex: 0 0 auto;
}

/* --- Live free console ----------------------------------------------------- */

.live-console {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(70vh, 660px);
}

.live-servers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.live-server {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 13px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
}

.live-server:hover { background: rgba(255, 255, 255, 0.08); }

.live-server:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.live-server.picked {
  background: rgba(139, 124, 248, 0.16);
  border-color: rgba(139, 124, 248, 0.4);
}

/* Green once the runtime is up and the session is attached — that is the
   moment sending becomes possible. */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.live-dot.running {
  background: #55c98a;
  box-shadow: 0 0 0 3px rgba(85, 201, 138, 0.18);
}

.live-dot.starting {
  background: #e0a248;
  animation: pulse 1.2s ease-in-out infinite;
}

.live-dot.sleeping { background: rgba(255, 255, 255, 0.22); }
.live-dot.error { background: #e0645f; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.live-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.live-composer { display: flex; gap: 9px; align-items: flex-end; }
.live-composer textarea { flex: 1; resize: vertical; }
.live-composer button { flex: 0 0 auto; }

.live-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

/* --- Chat transcript ------------------------------------------------------ */
/* Ported line for line from the Claude console's stylesheet: the free sessions
   have to read exactly like it — same bubble, same headings, same code block,
   same line height — because it is the same conversation, only a different
   door. */

.message-row {
  display: flex;
  width: 100%;
  margin: 0 0 22px;
  animation: message-in 240ms ease both;
}

@keyframes message-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-row.user { justify-content: flex-start; }

.message-row.assistant {
  align-items: flex-start;
  gap: 12px;
}

.message-bubble {
  max-width: min(78%, 760px);
  line-height: 1.95;
  /* 15px is the Claude console's body size; the transcript keeps it even
     though the rest of this panel is smaller. */
  font-size: 15px;
  overflow-wrap: anywhere;
}

.message-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user .message-bubble {
  padding: 12px 16px;
  color: #f7f6ff;
  background: linear-gradient(135deg, rgba(119, 101, 235, 0.92), rgba(99, 93, 205, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 10px 32px rgba(75, 59, 180, 0.16);
}

.assistant .message-bubble {
  flex: 1;
  max-width: calc(100% - 46px);
  padding: 5px 2px 0;
  color: #e5e8f0;
}

.message-content {
  text-align: start;
  unicode-bidi: plaintext;
}

.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }

.message-content p { margin: 0 0 13px; }

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
  margin: 22px 0 10px;
  color: #fafbff;
  line-height: 1.55;
}

.message-content h1 { font-size: 19px; }
.message-content h2 { font-size: 17px; }
.message-content h3 { font-size: 15px; }
.message-content h4 { font-size: 14px; }
.message-content h5 { font-size: 13px; }
.message-content h6 { font-size: 12px; color: #d7dcec; }

.message-content ul,
.message-content ol {
  margin: 9px 0 15px;
  padding-left: 23px;
}

/* A nested list rides tight under its parent item rather than opening a fresh
   block of space. */
.message-content li > ul,
.message-content li > ol {
  margin: 5px 0 4px;
}

.message-content li { margin: 5px 0; }

.message-content del { color: #97a0b4; text-decoration-color: rgba(151, 160, 180, 0.7); }

.message-content hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Task lists lose the marker and carry a small square instead, ticked when the
   source wrote `[x]`. */
.message-content ul.task-list { list-style: none; padding-left: 4px; }
.message-content li.task-item { display: flex; align-items: flex-start; gap: 9px; }
.task-box {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.02);
}
.task-box.done {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--panel);
}

.message-content blockquote {
  margin: 15px 0;
  padding: 8px 14px;
  color: #b9c0d0;
  background: rgba(255, 255, 255, 0.025);
  border-left: 3px solid var(--accent);
  border-radius: 8px 0 0 8px;
}

.message-content a {
  color: #a99cff;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 156, 255, 0.35);
}

.message-content code {
  padding: 2px 6px;
  color: #c6bdff;
  background: rgba(139, 124, 248, 0.1);
  border: 1px solid rgba(139, 124, 248, 0.12);
  border-radius: 6px;
  direction: ltr;
  font-family: "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 0.86em;
  unicode-bidi: isolate;
}

.code-block {
  margin: 16px 0;
  overflow: hidden;
  background: #080c14;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
  direction: ltr;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}

.copy-code {
  padding: 3px 8px;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 10px;
}

.copy-code:hover {
  color: white;
  background: rgba(255, 255, 255, 0.06);
}

.code-block pre {
  margin: 0;
  padding: 15px;
  overflow-x: auto;
  color: #cdd4e3;
  text-align: left;
  white-space: pre;
}

.code-block pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 12px;
  line-height: 1.7;
}

/* The blinking caret the Claude console shows while an answer is still
   arriving. It sits on the segment itself, not on a child: while text is
   streaming the segment holds a bare text node and has no element children at
   all, which is why the caret used to never show. Only the newest segment of a
   turn carries it. */
.message-bubble.streaming .message-content:last-of-type::after {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  content: "";
  vertical-align: -2px;
  background: var(--accent);
  border-radius: 2px;
  animation: caret 1s steps(2) infinite;
}

@keyframes caret { 0%,100% { opacity: 1 } 50% { opacity: 0 } }

/* --- Users panel ---------------------------------------------------------- */
/* The session chips carry the colour the session is known by elsewhere, so a
   user recognises the blue and the red one at a glance. */
.user-console { display: grid; gap: 14px; }

.user-sessions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-session {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 14px;
  min-width: 190px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.user-session small { grid-column: 1 / -1; color: #9ba5b9; font-size: 12px; }
.user-session:hover { background: rgba(255, 255, 255, 0.08); }
.user-session.picked { border-color: rgba(139, 124, 248, 0.6); background: rgba(139, 124, 248, 0.12); }

.user-dot { width: 10px; height: 10px; border-radius: 50%; background: #6b7488; }
/* Inside a session row the dot is the 7px status pip Claude puts between the
   title and the three-dot button, not the 10px legacy badge. */
.user-session > .user-dot { width: 7px; height: 7px; }
.accent-blue .user-dot { background: #4d8dff; }
.accent-red .user-dot { background: #ff5f6d; }
.accent-green .user-dot { background: #3ecf8e; }

/* --- Settings ------------------------------------------------------------- */
.settings { display: grid; gap: 14px; }
.settings h3 { margin: 0; }

.settings-user {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.settings-row > span { color: #9ba5b9; font-size: 13px; min-width: 54px; }

.tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 13px;
}

.tick.accent-blue { border-color: rgba(77, 141, 255, 0.45); }
.tick.accent-red { border-color: rgba(255, 95, 109, 0.45); }
.tick.accent-green { border-color: rgba(62, 207, 142, 0.45); }

.settings-actions { display: flex; align-items: center; gap: 10px; }
.settings-note { color: #9ba5b9; font-size: 12px; }

/* Detailed users/session mirror ------------------------------------------- */
.dash:has(#userConsole:not(.hidden)) {
  max-width: 1680px;
  padding: clamp(16px, 2.5vw, 34px) clamp(12px, 2.5vw, 36px) 36px;
}

.user-console { display: block; }

.user-app-shell {
  position: relative;
  display: grid;
  /* Same corner as /profage/codex: the session list sits in the first (left,
     under this forced ltr) column and the transcript fills the rest — not
     the mirror image of it. */
  grid-template-areas: "sessions chat";
  grid-template-columns: 312px minmax(0, 1fr);
  direction: ltr;
  height: clamp(680px, calc(100dvh - 135px), 920px);
  min-height: 680px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  backdrop-filter: blur(24px);
}

.user-chat-pane {
  grid-area: chat;
  direction: ltr;
  display: grid;
  /* toolbar, policy bar, transcript, error strip, composer. The live console
     has no error strip and simply leaves the fourth row at zero height. */
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 22%);
}

.user-panel-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 76px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(18px);
}

.user-conversation-heading {
  display: grid;
  gap: 4px;
  min-width: 150px;
  margin-right: auto;
}

.user-conversation-heading strong { font-size: 15px; }
.user-conversation-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.user-presence {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 0 4px rgba(62, 207, 142, .1);
}

/* .picker-row / .model-picker-button from the Claude topbar. The users panel
   drives its pickers with a native <select> rather than a popup listbox, so
   the label becomes the caption and the select sits inside the same pill. */
.user-picker-row { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; min-width: 0; }
.user-panel-toolbar label.compact {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 170px;
  min-height: 39px;
  margin: 0;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 10px;
  text-align: left;
}
.user-panel-toolbar select {
  flex: 1;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0 2px;
  color: #e7e9f2;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
}
.user-panel-toolbar select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
.user-panel-toolbar select option { color: var(--text); background: var(--panel-solid); }
.user-panel-toolbar #userViewer { width: auto; }

.user-mirror-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 78%, white);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: 10px;
  white-space: nowrap;
}

.user-policy-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--muted);
  background: rgba(127, 127, 127, .025);
  font-size: 10px;
}
.user-policy-bar svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

.live-settings-panel {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: rgba(127, 127, 127, .04);
  font-size: 12px;
}
.live-settings-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.live-settings-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.live-settings-row select { min-width: 160px; }
#liveSettingsNote { color: var(--muted); }

.user-message-stream {
  min-height: 0 !important;
  max-height: none !important;
  padding: 26px clamp(18px, 5vw, 76px) 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  scroll-behavior: smooth;
}
.user-message-stream .message-row { width: 100%; max-width: 920px; margin-left: auto; margin-right: auto; }

.user-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 100%;
  padding: 50px 20px;
  color: var(--muted);
  text-align: center;
}
.user-empty-state strong { color: var(--text); font-size: 16px; }
.user-empty-state span,
.user-empty-state p { max-width: 420px; font-size: 12px; line-height: 1.9; }
.user-empty-state p { margin: 0; }
.user-empty-mark {
  display: grid !important;
  place-items: center;
  width: 44px;
  height: 44px;
  max-width: none !important;
  margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1;
}

/* The transcript keeps its own scrollbox; the wrapper only exists to hang the
   jump button over it without moving with the text. */
.user-stream-wrap { position: relative; display: grid; min-height: 0; }
.user-stream-wrap > .user-message-stream { min-height: 0; }

.user-jump {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 16px;
  transform: translateX(50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
}
.user-jump:hover { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.user-jump svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.user-jump.hidden { display: none; }

/* Manager view only: the transcript opens on the last three turns, same as a
   fresh Codex session load, with this above the log to pull the rest in. */
.user-history-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - clamp(36px, 10vw, 152px));
  margin: 12px auto 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.user-history-more:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.user-history-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.user-history-more.hidden { display: none; }

/* A failed poll or a rejected message says so here, above the composer, and
   the conversation itself is left on screen. */
.user-error-strip {
  margin: 0;
  padding: 8px clamp(16px, 5vw, 72px);
  border-top: 1px solid color-mix(in srgb, #ef4444 40%, transparent);
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: color-mix(in srgb, #ef4444 55%, var(--text));
  font-size: 11px;
  text-align: center;
}
.user-error-strip.hidden { display: none; }

.user-typing .message-bubble { padding: 12px 16px !important; }
.typing-dots { display: flex; gap: 5px; }
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: .18s; }
.typing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }

/* === Composer: .composer-wrap / .composer / .composer-actions from the
   Claude console. The mirror has no attachments and no voice input, so those
   two round buttons are absent; everything else is the same box. ========== */
.user-composer-zone {
  position: relative;
  z-index: 9;
  padding: 0 clamp(16px, 4.8vw, 72px) max(12px, env(safe-area-inset-bottom));
  border-top: 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 94%, transparent) 24%);
}

.user-composer {
  display: block !important;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 10px 11px 9px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 19px;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(22px);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.user-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.user-composer textarea {
  display: block;
  width: 100%;
  min-height: 0;
  max-height: 190px;
  margin: 0;
  padding: 4px 5px 2px;
  overflow-y: auto;
  resize: none;
  outline: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.8;
}
.user-composer textarea::placeholder { color: var(--muted-2); }
.user-composer-actions { display: flex; align-items: center; min-height: 34px; }
.user-composer-hint { flex: 1; padding-left: 5px; color: var(--muted-2); font-size: 9px; }
.user-send-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  color: white;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7768eb, #8b7cf8);
  box-shadow: 0 8px 20px rgba(119, 104, 235, .24);
  transition: transform 90ms ease, background 140ms ease, border-color 140ms ease;
}
.user-send-button:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); }
.user-send-button:active { transform: scale(.96); }
.user-send-button:disabled { cursor: default; opacity: .38; box-shadow: none; }
.user-send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transform: scaleX(-1); }

.user-session-pane {
  grid-area: sessions;
  direction: ltr;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 10px;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, var(--panel));
}

.user-brand-row { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 3px; }
.user-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  /* .brand-mark from the Claude sidebar: a glass chip, not a solid accent
     tile — the two headers sit side by side in the same panel. */
  position: relative;
  isolation: isolate;
  color: #c6bdff;
  background: linear-gradient(145deg, rgba(139, 124, 248, 0.2), rgba(90, 215, 197, 0.09));
  border: 1px solid rgba(165, 151, 255, 0.25);
  box-shadow: inset 0 0 24px rgba(139, 124, 248, 0.08), 0 8px 26px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  font-weight: 700;
}
.user-brand-row .user-back-hub { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); }
.user-brand-row .user-back-hub:hover { color: var(--text); border-color: var(--border); background: rgba(127, 127, 127, .07); }
.user-brand-row .user-back-hub svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.user-brand-row > div { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; }
.user-brand-row strong { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.user-brand-row small { color: var(--muted); font-size: 10px; }

.user-manager-accounts {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0 0 11px;
  padding: 9px 10px;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  text-align: left;
}
.user-manager-accounts > span:last-child { display: grid; gap: 2px; min-width: 0; }
.user-manager-accounts strong { font-size: 11px; }
.user-manager-accounts small { color: var(--muted); font-size: 9px; }
.user-manager-accounts-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 17%, var(--panel)); font-size: 16px; }
.user-manager-accounts:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* .session-search from the Claude console, value for value. */
.user-session-search { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .035); transition: border-color 160ms ease, background 160ms ease; }
.user-session-search:focus-within { border-color: rgba(139, 124, 248, .45); background: rgba(255, 255, 255, .05); }
.user-session-search svg { position: static; flex: 0 0 auto; width: 18px; height: 18px; transform: none; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--muted-2); pointer-events: none; }
.user-session-search input { width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; outline: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 13px; }
.user-session-search input::placeholder { color: var(--muted-2); }

/* .session-caption: the "Sessions" line with its actions, above the search box
   exactly as in the Claude sidebar. */
.pane-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 5px 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.pane-title-actions { display: flex; align-items: center; gap: 2px; }
.pane-title button, .user-close-sessions, .user-mobile-sessions {
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
}
.pane-title button { display: grid; }
.pane-title button:hover, .user-close-sessions:hover, .user-mobile-sessions:hover { color: var(--text); border-color: var(--border); background: rgba(127, 127, 127, .07); }
.pane-title svg, .user-close-sessions svg, .user-mobile-sessions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#userRefresh.refreshing svg { animation: user-refresh .7s linear infinite; }
@keyframes user-refresh { to { transform: rotate(360deg); } }

/* === Session column: a straight port of the Claude console ===============
   .session-list / .session-item / .session-select / .session-icon /
   .session-title / .session-time, renamed to the .user-* namespace this page
   already uses but keeping every measurement, colour and easing. */
.user-sessions { flex: 1; display: grid; align-content: start; gap: 0; min-height: 0; margin: 0 -5px; overflow-x: hidden; overflow-y: auto; padding: 0 5px 10px; scrollbar-color: rgba(255, 255, 255, .13) transparent; scrollbar-width: thin; }
.user-session {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 7px 30px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 2px 0;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  text-align: left;
  transition: 150ms ease;
}
.user-session:hover { border-color: transparent; background: rgba(255, 255, 255, .04); }
.user-session.picked { border-color: rgba(139, 124, 248, .18); background: linear-gradient(100deg, rgba(139, 124, 248, .14), rgba(90, 215, 197, .035)); }
.user-session.picked::before { position: absolute; top: 8px; left: -1px; width: 3px; height: calc(100% - 16px); content: ""; background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 999px 0 0 999px; }
.user-session-icon { position: relative; display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--muted); background: rgba(255, 255, 255, .04); }
.user-session-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.user-session.picked .user-session-icon { color: #bcb2ff; background: rgba(139, 124, 248, .12); }
.user-session-copy { display: flex; flex-direction: column; min-width: 0; }
.user-session-name { overflow: hidden; color: #dfe3ed; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.user-session-meta { display: flex; min-width: 0; gap: 5px; margin-top: 2px; color: var(--muted-2); font-size: 10px; }
.user-session-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-session-meta span + span::before { content: "·"; margin-right: 5px; }
/* The three dots are decoration here — the mirror has no rename or delete —
   but the row would sit at a different width without them, and the whole
   point is that the two lists line up. */
.user-session-more { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted-2); }
.user-session-more svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.user-session-empty { padding: 22px 12px; color: var(--muted); font-size: 11px; line-height: 1.9; text-align: center; }

.user-sidebar-footer { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 10px 8px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.6; }
.user-sidebar-footer small { color: var(--muted-2); direction: ltr; }
.user-lock-icon { display: grid; place-items: center; width: 7px; height: 7px; border: 0; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 4px rgba(72, 215, 168, .09), 0 0 14px rgba(72, 215, 168, .4); font-size: 0; }
.user-sidebar-scrim, .user-mobile-sessions, .user-close-sessions { display: none; }

/* OpenCode uses the Codex workspace primitives above, with server-specific
   controls layered on top. */
.dash:has(#liveConsole:not(.hidden)) {
  max-width: 1680px;
  padding: clamp(16px, 2.5vw, 34px) clamp(12px, 2.5vw, 36px) 36px;
}
.live-console { display: block; height: auto; }
.live-app-shell .user-session-pane { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.live-app-shell .live-servers { display: grid; flex-wrap: nowrap; gap: 4px; }
.live-server-row { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 2px; border-radius: 11px; }
.live-server-pick.user-session { grid-template-columns: 32px minmax(0, 1fr) 7px; padding: 11px 8px; margin: 0; }
.live-server-pick:disabled { cursor: not-allowed; opacity: .42; }
.live-server-rename { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: 13px; }
.live-server-rename:hover { color: var(--text); border-color: var(--border); background: rgba(127, 127, 127, .07); }
.live-dot.ready, .live-dot.running { background: #3ecf8e; box-shadow: 0 0 0 3px rgba(62, 207, 142, .12); }
.live-dot.starting { background: #e0a248; }
.live-dot.sleeping, .live-dot.unconfigured { background: #6b7488; }
.live-dot.error, .live-dot.offline { background: #e0645f; }
.live-dot.disabled { background: #4d5360; }
.user-presence.ready, .user-presence.running { background: #3ecf8e; box-shadow: 0 0 0 4px rgba(62, 207, 142, .1); }
.user-presence.starting { background: #e0a248; box-shadow: 0 0 0 4px rgba(224, 162, 72, .1); animation: pulse 1.2s ease-in-out infinite; }
.user-presence.sleeping, .user-presence.unconfigured { background: #6b7488; box-shadow: 0 0 0 4px rgba(107, 116, 136, .1); }
.user-presence.error, .user-presence.offline { background: #e0645f; box-shadow: 0 0 0 4px rgba(224, 100, 95, .1); }
.user-presence.disabled { background: #4d5360; box-shadow: 0 0 0 4px rgba(77, 83, 96, .1); }
#liveRefresh.refreshing svg { animation: user-refresh .7s linear infinite; }
.live-loader { width: 26px; height: 26px; border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: user-refresh .8s linear infinite; }
.live-history-actions { position: sticky; z-index: 2; top: 0; display: flex; justify-content: center; max-width: 920px; margin: 0 auto 18px; }
.live-history-actions button { padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--panel) 90%, transparent); font-size: 10px; backdrop-filter: blur(12px); }
.live-history-actions button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.turn-complete { display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); align-items: center; gap: 11px; width: 100%; max-width: 920px; margin: 5px auto 24px; color: #3ecf8e; font-size: 10px; }
.turn-complete span { height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, #3ecf8e 35%, transparent)); }
.turn-complete span:last-child { background: linear-gradient(90deg, color-mix(in srgb, #3ecf8e 35%, transparent), transparent); }
.turn-complete b { font-weight: 650; }
/* --- What the engine did, inside the answer it belongs to ----------------- */
/* A turn is text segments and collapsible tool cards in arrival order, so the
   terminal work behind an answer is visible without crowding the reading. */
.activity-card {
  width: 100%;
  margin: 8px 0;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
}

.message-body > .message-content + .activity-card { margin-top: 12px; }

.activity-card summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
}

.activity-card summary::-webkit-details-marker { display: none; }

.activity-card summary svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--accent-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.activity-card summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-card summary em {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 7px;
  color: var(--success);
  background: rgba(72, 215, 168, 0.07);
  border: 1px solid rgba(72, 215, 168, 0.12);
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
}

.activity-card summary em:empty { display: none; }

.activity-card summary em.running {
  color: var(--accent-2);
  background: rgba(90, 215, 197, 0.08);
  border-color: rgba(90, 215, 197, 0.16);
}

.activity-card summary em.failed {
  color: var(--danger);
  background: rgba(255, 120, 144, 0.08);
  border-color: rgba(255, 120, 144, 0.18);
}

.activity-card pre {
  max-height: 260px;
  margin: 0;
  padding: 11px 13px;
  overflow: auto;
  color: #aeb6c7;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid var(--border);
  direction: ltr;
  font-family: "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.65;
}

.activity-card .tool-out { color: #93a0b6; background: rgba(0, 0, 0, 0.16); }
/* The model's own reasoning is a footnote, not part of the answer. */
.activity-card.thinking summary svg { color: var(--muted); }
.activity-card.thinking pre { direction: ltr; text-align: start; font-family: inherit; }

.copy-answer {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 9px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
}

.copy-answer:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.copy-answer svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --- Tables, media and check lists inside an answer ----------------------- */
/* A table is a block the answer often depends on, so it gets a frame of its
   own and scrolls sideways instead of squeezing its columns on a phone. */
.message-content .table-wrap {
  margin: 14px 0 18px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  -webkit-overflow-scrolling: touch;
}

.message-content .md-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
}

.message-content .md-table th,
.message-content .md-table td {
  padding: 9px 13px;
  max-width: 320px;
  text-align: start;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--border);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
}

.message-content .md-table th:last-child,
.message-content .md-table td:last-child { border-inline-end: 0; }
.message-content .md-table tbody tr:last-child td { border-bottom: 0; }

.message-content .md-table thead th {
  position: sticky;
  top: 0;
  color: #fafbff;
  font-weight: 600;
  background: rgba(139, 124, 248, 0.14);
  backdrop-filter: blur(6px);
}

.message-content .md-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.message-content .md-table tbody tr:hover { background: rgba(139, 124, 248, 0.07); }
.message-content .md-table code { white-space: nowrap; }

/* --- Pictures, clips and sound written into an answer --------------------- */
.message-content .md-media { margin: 14px 0 18px; }

.message-content .md-media img,
.message-content .md-media video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.message-content .md-media img { cursor: zoom-in; }
.message-content .md-media audio { width: 100%; max-width: 420px; }

.message-content .md-media figcaption {
  margin-top: 6px;
  color: var(--muted);
  text-align: start;
  font-size: 12.5px;
}

.message-content .md-inline-image {
  max-height: 1.6em;
  vertical-align: text-bottom;
  border-radius: 4px;
  cursor: zoom-in;
}

/* Full-screen view for a picture. One node, reused for every image. */
.md-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 6, 12, 0.92);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}

.md-lightbox.hidden { display: none; }

.md-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.md-lightbox-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 16px;
  width: 40px;
  height: 40px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

@media (max-width: 620px) {
  .message-content .md-table { font-size: 13px; }
  .message-content .md-table th,
  .message-content .md-table td { padding: 7px 10px; }
  .message-content .md-media img,
  .message-content .md-media video { max-height: 48vh; }
}

/* Large settings workspace ------------------------------------------------ */
.settings { gap: 18px; }
.settings-toptabs { display: flex; gap: 8px; padding: 6px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); backdrop-filter: blur(20px); }
.settings-toptab { flex: 1; padding: 12px 14px; color: var(--muted); text-align: center; border: none; border-radius: 12px; background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.settings-toptab:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.settings-toptab.active { color: var(--text); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.settings-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.settings-group-card { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.settings-group-card h3 { margin: 0; }
.settings-group-card p { margin: 0; color: var(--muted); font-size: 12px; }
.settings-group-members { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-group-member { padding: 5px 10px; color: var(--text); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.settings-group-empty { color: var(--muted-2); font-size: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.status-row:last-child { border-bottom: 0; }
.status-pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; white-space: nowrap; border: 1px solid var(--border); }
.status-pill.ok { color: #4ade80; border-color: color-mix(in srgb, #4ade80 45%, transparent); background: color-mix(in srgb, #4ade80 12%, transparent); }
.status-pill.bad { color: #f87171; border-color: color-mix(in srgb, #f87171 45%, transparent); background: color-mix(in srgb, #f87171 12%, transparent); }
.setting-num-input { width: 100%; padding: 10px 12px; color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: var(--panel-solid); font-family: inherit; font-size: 13px; }
.usage-limit-opener { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; color: var(--text); text-align: left; border: 1px solid var(--border); border-radius: 12px; background: rgba(127,127,127,.055); }
.usage-limit-opener span { display: grid; gap: 4px; }.usage-limit-opener small { color: var(--muted); }.usage-limit-opener strong { color: var(--accent); }
.usage-limit-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.usage-limit-modal.hidden { display: none; }
.usage-limit-dialog { width: min(560px, 100%); padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel-solid); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.usage-limit-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }.usage-limit-dialog h3, .usage-limit-dialog p { margin: 0; }.usage-limit-dialog p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.usage-limit-dialog header button { width: 36px; height: 36px; color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: transparent; font-size: 22px; }
.usage-limit-fields { display: grid; gap: 10px; margin-bottom: 16px; }.usage-limit-fields label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; margin: 0; }.usage-limit-fields span { display: flex; align-items: center; gap: 8px; }.usage-limit-fields em { min-width: 95px; color: var(--muted); font-size: 11px; font-style: normal; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); backdrop-filter: blur(20px); }
.settings-heading h2, .settings-heading p { margin: 0; }
.settings-heading p { color: var(--muted); margin-top: 5px; }
.settings-user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.settings-user-card { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "glyph copy open" "glyph meta open"; align-items: center; gap: 5px 13px; min-height: 126px; padding: 18px; color: var(--text); text-align: left; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: 0 14px 36px rgba(0, 0, 0, .12); }
.settings-user-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); transform: translateY(-2px); }
.section-setting-card.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.section-panel-editor { margin-top: 18px; display: grid; gap: 16px; }
.section-panel-editor > label { display: grid; gap: 8px; }
.section-panel-editor > label > small { color: var(--muted); }
.section-panel-editor textarea { width: 100%; resize: vertical; }
.immutable-agent-policy { display: grid; gap: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.immutable-agent-policy > div { display: grid; gap: 4px; }
.immutable-agent-policy small { color: var(--muted); }
.immutable-agent-policy pre { margin: 0; padding: 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 84%, transparent); font: inherit; line-height: 1.85; }
.professional-permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.professional-permission-grid h4 { margin:16px 0 8px; color:var(--muted); font-size:13px; }
.settings-user-glyph { grid-area: glyph; display: grid; place-items: center; width: 50px; height: 50px; font-size: 18px; font-weight: 800; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.settings-user-copy { grid-area: copy; display: grid; min-width: 0; }
.settings-user-copy b { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.settings-user-copy small, .settings-user-meta small { color: var(--muted); }
.settings-user-meta { grid-area: meta; display: grid; min-width: 0; }
.settings-user-open { grid-area: open; align-self: stretch; display: grid; place-items: center; padding-inline-start: 14px; color: color-mix(in srgb, var(--accent) 74%, var(--text)); border-inline-start: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
.settings-detail { display: grid; gap: 14px; min-width: 0; }
.settings-detail-heading { display: flex; align-items: center; gap: 14px; }
.settings-back { white-space: nowrap; }
.settings-accounts { border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.settings-accounts > summary { padding: 16px 18px; cursor: pointer; color: var(--muted); }
.settings-accounts[open] > summary { border-bottom: 1px solid var(--border); }
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-people { position: sticky; top: 18px; display: grid; gap: 7px; padding: 10px; max-height: 82vh; overflow: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.settings-people button { display: grid; gap: 2px; padding: 11px 12px; text-align: left; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 12px; }
.settings-people button small { color: var(--muted); }
.settings-people button:hover, .settings-people button.active { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.setting-pw code { font-family: var(--font-mono, monospace); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 5px; border-radius: 5px; direction: ltr; unicode-bidi: embed; }
.setting-pw.muted { opacity: .6; }
#settingsEditor { display: grid; gap: 14px; min-width: 0; }
.setting-user-title, .setting-card, .setting-metrics, .sticky-save { border: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(18px); border-radius: 18px; }
.setting-user-title { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.setting-user-title h2 { margin: 0; }.setting-user-title span { color: var(--muted); }
.professional-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.professional-session { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(127,127,127,.055); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.professional-session:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.professional-session small { color: var(--muted); }
.professional-session em { color: color-mix(in srgb, var(--accent) 78%, var(--text)); font-size: 11px; font-style: normal; }

/* Head row: the engine's brand logo in a rounded badge next to the title. */
.professional-head { display: flex; align-items: center; gap: 10px; }
.professional-logo { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25); font-weight: 700; }
.professional-logo img { width: 24px; height: 24px; display: block; }
.pro-claude .professional-logo { background: #d97757; } /* Anthropic coral */
.pro-claude .professional-logo img { filter: brightness(0) invert(1); } /* dark glyph -> white */
.pro-kimi .professional-logo { background: #1a56db; } /* Kimi blue */
.pro-kimi .professional-logo img { filter: brightness(0) invert(1); }
.pro-codex .professional-logo { background: #10a37f; } /* OpenAI green */
.pro-codex .professional-logo img { filter: brightness(0) invert(1); }
.professional-titles { display: grid; gap: 4px; min-width: 0; }
.professional-titles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.professional-engine { width: fit-content; padding: 2px 8px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; font-size: 10px; }
.professional-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.setting-fixed-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fixed-fact { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.fixed-fact span { color: var(--muted); font-size: 12px; }
.policy-readonly { padding: 14px; color: var(--muted); white-space: pre-wrap; border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 12px; background: rgba(127,127,127,.045); }
.role-pill { padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; font-size: 12px; }
.setting-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.setting-metrics label { margin: 0; }.setting-metrics small { color: var(--muted); display: block; margin-top: 5px; }
.setting-card { padding: 18px; }.setting-card h3 { margin: 0 0 13px; font-size: 15px; }
.setting-checks, .model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.compact-checks { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.setting-check { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(127,127,127,.055); cursor: pointer; }
.setting-check input { width: auto; margin-top: 4px; accent-color: var(--accent); }
.setting-check span { display: grid; gap: 3px; }.setting-check b { font-size: 13px; }.setting-check small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; }
.theme-choice { display: grid; gap: 6px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.theme-choice input { position: absolute; opacity: 0; }.theme-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.theme-preview { height: 80px; border-radius: 9px; background-size: cover !important; }.theme-choice small { color: var(--muted); font-size: 10px; }
.text-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.text-settings label { margin: 0; }.text-settings small { display: block; color: var(--muted); min-height: 38px; }.text-settings textarea { margin-top: 8px; resize: vertical; }
.syc-directive {
  grid-column: 1 / -1;
  padding: 16px;
  color: #fff5bf;
  border: 1px solid #d6aa32 !important;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(122,82,4,.46), rgba(244,196,70,.12));
  box-shadow: inset 0 1px rgba(255,246,188,.14), 0 14px 34px rgba(92,62,0,.20);
}
.syc-directive > b { color: #ffe184; font-size: 15px; }
.syc-directive small { color: #eadb9c; }
.syc-directive textarea { color: #fff9dc; border-color: rgba(240,197,70,.55); background: rgba(32,23,3,.62); }
.account-password-protected { display: grid; align-content: center; gap: 4px; min-height: 62px; padding: 10px 12px; color: #ffe184; border: 1px solid rgba(214,170,50,.48); border-radius: 12px; background: rgba(214,170,50,.09); }
.account-password-protected small { color: var(--muted); }
.message-live-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.message-live-meta strong { color: var(--text); }
.message-row.tool-event .message-bubble { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, var(--bg)); }
body[data-theme="light"] .syc-directive { color: #594100; background: linear-gradient(135deg, #fff5c7, #fffdf2); border-color: #b9850f !important; }
body[data-theme="light"] .syc-directive > b { color: #684a00; }
body[data-theme="light"] .syc-directive small { color: #765f20; }
body[data-theme="light"] .syc-directive textarea { color: #2c240e; background: #fffef8; border-color: #bd901f; }
.sticky-save { position: sticky; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px; box-shadow: 0 14px 35px rgba(0,0,0,.25); }
.sticky-save span { color: var(--muted); }
.secret-zone { padding: 16px; min-height: 76px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 20px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.secret-launch { width: 100%; color: var(--muted); background: transparent; border: 0; }
.secret-gate { max-width: 560px; margin: 12px auto; text-align: center; }.secret-gate > div { display: flex; gap: 8px; }.secret-gate input { flex: 1; }.secret-gate small { display: block; color: #ff8b97; margin-top: 7px; }
.secret-editor { display: grid; gap: 12px; max-width: 920px; margin: 12px auto; }.secret-selectors { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }.secret-selectors label { margin: 0; }.secret-enabled { display: flex; gap: 8px; align-items: center; margin: 0; }.secret-enabled input { width: auto; }.secret-editor textarea { resize: vertical; }.secret-editor p { margin: 0; color: var(--muted); font-size: 12px; }
.secret-user-lock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(127,127,127,.05); }
.secret-user-lock span, .secret-user-lock small { color: var(--muted); }

/* Per-theme identity lives at the end of this file, after the components. */

/* Profile and account controls ------------------------------------------- */
.profile-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; color: var(--text); background: rgba(127,127,127,.07); border: 1px solid var(--border); border-radius: 12px; }
.profile-avatar, .account-avatar, .user-account-avatar { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.profile-avatar { width: 29px; height: 29px; border-radius: 9px; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,5,12,.72); backdrop-filter: blur(12px); }
.modal-backdrop[hidden] { display: none; }
.profile-modal { position: relative; width: min(520px, 100%); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb, var(--panel) 96%, #080c16); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 10px; }
.profile-heading { display: flex; align-items: center; gap: 14px; padding: 0 0 18px; }
.profile-heading h2, .profile-heading p { margin: 0; }
.profile-heading p { margin-top: 4px; color: var(--muted); }
.profile-avatar-large { display: grid; place-items: center; width: 62px; height: 62px; font-size: 30px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.profile-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 13px; background: rgba(127,127,127,.05); }
.profile-tabs button { color: var(--muted); background: transparent; border: 0; }
.profile-tabs button.active { color: var(--text); background: color-mix(in srgb, var(--accent) 17%, transparent); }
.profile-pane { display: none; gap: 13px; }
.profile-pane.active { display: grid; }
.ticket-list { display: grid; gap: 9px; }
.ticket-summary { display: grid; gap: 5px; width: 100%; padding: 13px 15px; text-align: start; color: var(--text); border: 1px solid var(--border); border-radius: 13px; background: rgba(127,127,127,.05); }
.ticket-summary span, .ticket-thread small, .ticket-message time { color: var(--muted); font-size: 12px; }
.ticket-thread, .ticket-messages { display: grid; gap: 12px; }
.ticket-thread header { display: grid; gap: 7px; }
.ticket-thread header h3 { margin: 0; }
.ticket-message { padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: rgba(127,127,127,.05); }
.ticket-message.admin { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ticket-message p { margin: 7px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.access-notice { display: grid; gap: 4px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, #f2b84b 55%, var(--border)); border-radius: 14px; background: color-mix(in srgb, #f2b84b 10%, var(--panel)); }
.access-notice span { color: var(--muted); }
.password-field { display: grid; grid-template-columns: minmax(0,1fr) 42px; overflow: hidden; margin-top: 7px; border: 1px solid var(--border); border-radius: 10px; background: rgba(127,127,127,.06); }
.password-field input { min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.password-eye { width: 42px; padding: 0; color: var(--muted); background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
.field-hint { color: var(--muted); font-size: 11px; }
.form-status { min-height: 22px; margin: 0; color: var(--muted); }
.form-status.success { color: #55d9a5; }
.form-status.error { color: #ff8b97; }

/* The only destination for employees should be unmistakable. */
.cards .users-primary { grid-column: 1 / -1; min-height: 148px; padding: 28px; border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel)); box-shadow: 0 22px 60px color-mix(in srgb, var(--accent) 12%, transparent); }
.cards .users-primary b { font-size: clamp(20px, 2vw, 28px); }
.cards .users-primary p { max-width: 620px; font-size: 14px; }

/* Managers see one closed row per employee — never a session list — until the
   "+" is clicked. What opens is a read-only mirror; nothing here is editable. */
.user-account-group { display: grid; gap: 0; padding: 1px 0; }
.user-account-group + .user-account-group { border-top: 1px solid var(--border); }
.user-account-toggle {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 7px;
  color: var(--text);
  background: transparent;
  border-radius: 10px;
  text-align: left;
}
.user-account-toggle:hover { background: rgba(127, 127, 127, .055); }
.user-account-toggle:disabled { cursor: not-allowed; opacity: .5; }
.user-account-group.expanded > .user-account-toggle { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.user-account-copy { display: grid; min-width: 0; }
.user-account-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-account-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-account-plus {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 8px;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.user-account-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.user-account-sessions { display: grid; gap: 3px; padding: 0 0 8px; }
.user-account-group:not(.expanded) > .user-account-sessions { display: none; }

/* Manager-only account administration. */
.account-admin { display: grid; gap: 15px; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); backdrop-filter: blur(18px); }
.account-admin-heading h2, .account-admin-heading p { margin: 0; }
.account-admin-heading p { margin-top: 5px; color: var(--muted); }
.account-grid { display: grid; gap: 8px; }
.account-row { display: grid; grid-template-columns: minmax(180px,1.1fr) minmax(135px,.65fr) minmax(210px,1fr) auto; align-items: end; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: rgba(127,127,127,.045); }
.account-row > label { margin: 0; }
.account-identity { display: flex; align-items: center; gap: 10px; min-width: 0; align-self: center; }
.account-identity > span:last-child { display: grid; min-width: 0; }
.account-identity b, .account-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { color: var(--muted); }
.account-avatar { width: 42px; height: 42px; border-radius: 12px; }
.account-actions { display: flex; align-items: center; gap: 7px; min-height: 42px; }
.account-actions button { white-space: nowrap; }
.role-locked { padding: 8px 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; white-space: nowrap; }
.account-note { grid-column: 1 / -1; min-height: 14px; color: var(--muted); }
.account-manager-modal { position: relative; width: min(980px, 100%); max-height: min(820px, calc(100dvh - 40px)); overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: color-mix(in srgb, var(--panel) 97%, #080c16); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.account-manager-heading { padding: 0 2px 20px 48px; }
.account-manager-heading h2, .account-manager-heading p { margin: 0; }
.account-manager-heading p { margin-top: 6px; color: var(--muted); line-height: 1.8; }
.account-manager-modal .account-grid { gap: 10px; }
/* --- Themes ---------------------------------------------------------------
   Each user theme is a photograph set plus a palette. The backdrop below holds
   the photographs (two layers, so one dissolves into the next every 30s), and
   the blocks after it give every theme a texture of its own — the panel does
   not merely change colour when the theme changes. */

.theme-backdrop { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: var(--bg); }
.theme-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover !important;
  background-position: center !important;
  transition: opacity 1.6s ease;
  animation: theme-drift 34s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.theme-layer.visible { opacity: 1; }
@keyframes theme-drift { from { transform: scale(1.02); } to { transform: scale(1.09); } }

@media (prefers-reduced-motion: reduce) {
  .theme-layer { animation: none; transition: opacity .4s linear; }
}

/* Shared: panels sit on the photograph, so they all get real glass. */
body[data-theme] .card, body[data-theme] .setting-card, body[data-theme] .account-admin,
body[data-theme] .secret-zone, body[data-theme] .user-app-shell { backdrop-filter: blur(16px) saturate(1.15); }
body[data-theme] .topbar { background: color-mix(in srgb, var(--panel) 50%, transparent); backdrop-filter: blur(18px); }
body[data-theme] .card { background: color-mix(in srgb, var(--panel) 42%, transparent); }
body[data-theme] .card:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
body[data-theme] .ambient { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
/* The two purple marks of the default skin follow the theme accent as well. */
body[data-theme] .card-icon { color: color-mix(in srgb, var(--accent) 72%, var(--text)); background: color-mix(in srgb, var(--accent) 15%, transparent); }
body[data-theme] .brand-orb {
  color: color-mix(in srgb, var(--accent) 62%, var(--text));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
body[data-theme] .profile-trigger, body[data-theme] .back, body[data-theme] button.ghost { color: var(--text); background: color-mix(in srgb, var(--panel) 55%, transparent); }
body[data-theme] button.ghost, body[data-theme] .who { color: var(--muted); }

/* Girly — rose glass, generous curves, a warm bloom over everything. */
body[data-theme="girly"] .card, body[data-theme="girly"] .setting-card,
body[data-theme="girly"] .user-app-shell, body[data-theme="girly"] .profile-modal { border-radius: 24px; }
body[data-theme="girly"] .card { box-shadow: 0 18px 40px rgba(60, 10, 40, .28); }
body[data-theme="girly"] .card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(255, 111, 174, .28); }
body[data-theme="girly"] .brand strong {
  background: linear-gradient(90deg, #fff, #ffb9d8 55%, #ffd9b0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-theme="girly"] button:not(.ghost):not(.profile-trigger) { color: #3d0d27; box-shadow: 0 10px 24px rgba(255, 111, 174, .25); }
body[data-theme="girly"] .watermark { opacity: .09; filter: saturate(1.25) hue-rotate(-18deg); }
body[data-theme="girly"] .theme-layer.visible { filter: saturate(1.08); }

/* Skeletal — a terminal behind glass: monospace, dashes, scanlines, phosphor. */
body[data-theme="skeleton"] { letter-spacing: .02em; }
body[data-theme="skeleton"] .card, body[data-theme="skeleton"] .setting-card,
body[data-theme="skeleton"] .user-workspace, body[data-theme="skeleton"] .account-admin,
body[data-theme="skeleton"] .user-app-shell { border-style: dashed; border-radius: 10px; }
body[data-theme="skeleton"] .brand strong, body[data-theme="skeleton"] .dash h1 { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent); }
body[data-theme="skeleton"] .card em, body[data-theme="skeleton"] .who { text-transform: uppercase; font-size: 10.5px; }
body[data-theme="skeleton"] button:not(.ghost):not(.profile-trigger) { color: #04140a; border-radius: 6px; }
body[data-theme="skeleton"] .watermark { opacity: .05; filter: grayscale(1) brightness(1.7) sepia(1) hue-rotate(58deg) saturate(4); }
body[data-theme="skeleton"] .theme-layer.visible { filter: grayscale(.4) brightness(1.05) sepia(.3) hue-rotate(58deg) saturate(1.6); }
/* CRT lines and a slow phosphor pulse, above the content but never in its way. */
body[data-theme="skeleton"]::before {
  content: ""; position: fixed; z-index: 60; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  animation: crt-flicker 5.5s steps(1, end) infinite;
}
@keyframes crt-flicker { 0%, 92% { opacity: .55; } 94% { opacity: .3; } 96% { opacity: .7; } 100% { opacity: .55; } }

/* Normal Light — daylight: white cards, ink text, shadows instead of glow. */
body[data-theme="light"] .card, body[data-theme="light"] .setting-card,
body[data-theme="light"] .account-admin, body[data-theme="light"] .user-app-shell {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 12px 30px rgba(20, 28, 47, .10);
}
body[data-theme="light"] .card:hover { background: color-mix(in srgb, var(--accent) 8%, #fff); box-shadow: 0 16px 36px rgba(37, 99, 235, .16); }
body[data-theme="light"] button:not(.ghost):not(.profile-trigger) { color: #fff; }
body[data-theme="light"] button.ghost, body[data-theme="light"] .back { background: rgba(20, 28, 47, .05); }
body[data-theme="light"] input, body[data-theme="light"] textarea, body[data-theme="light"] select { color: var(--text); background: rgba(255, 255, 255, .78); }
body[data-theme="light"] .watermark { opacity: .04; filter: invert(1) grayscale(1); }
body[data-theme="light"] .ambient { opacity: .5; }

/* Super Dark — deep black, violet neon on the edges, a vignette that closes in. */
body[data-theme="super-dark"] .ambient { opacity: .5; }
body[data-theme="super-dark"] .card, body[data-theme="super-dark"] .setting-card,
body[data-theme="super-dark"] .user-app-shell { background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .55); }
body[data-theme="super-dark"] .card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 24px 60px color-mix(in srgb, var(--accent) 22%, transparent); }
body[data-theme="super-dark"] .brand strong, body[data-theme="super-dark"] .dash h1 { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
body[data-theme="super-dark"] button:not(.ghost):not(.profile-trigger) { color: #0b0620; box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 32%, transparent); }
body[data-theme="super-dark"] .theme-layer.visible { filter: contrast(1.08) brightness(1.02); }
body[data-theme="super-dark"]::before {
  content: ""; position: fixed; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 48%, rgba(0, 0, 0, .38) 100%);
}

@media (max-width: 900px) {
  .user-app-shell { grid-template-areas: "chat"; grid-template-columns: 1fr; height: calc(100dvh - 116px); min-height: 600px; border-radius: 16px; }
  .user-session-pane {
    position: absolute;
    z-index: 20;
    inset: 0 0 0 auto;
    width: min(330px, 88vw);
    max-height: none;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: -24px 0 60px rgba(0, 0, 0, .32);
    transform: translateX(105%);
    transition: transform .22s ease;
  }
  .user-app-shell.sidebar-open .user-session-pane { transform: translateX(0); }
  .user-sidebar-scrim { position: absolute; z-index: 19; inset: 0; display: block; opacity: 0; pointer-events: none; background: rgba(3, 6, 13, .67); transition: opacity .2s ease; }
  .user-app-shell.sidebar-open .user-sidebar-scrim { opacity: 1; pointer-events: auto; }
  .user-mobile-sessions, .user-close-sessions { display: grid; }
  .user-panel-toolbar { padding: 10px 12px; }
  .user-conversation-heading { margin-right: auto; }
  .user-picker-row { order: 3; width: 100%; }
  .user-picker-row { gap: 8px; }
  .user-picker-row label.compact { flex: 1 1 140px; min-width: 0; }
  .user-picker-row select, .user-panel-toolbar #userViewer { width: auto; }
  .user-mirror-badge { display: none; }
  .user-message-stream { padding: 20px 12px 26px !important; }
  .user-composer-zone { padding: 0 10px max(10px, env(safe-area-inset-bottom)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-people { position: static; grid-template-columns: repeat(2, 1fr); max-height: none; }
  .account-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .account-actions { justify-content: flex-end; }
  .theme-grid, .text-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .account-manager-modal { padding: 18px 12px 12px; }
  .account-manager-heading { padding: 4px 8px 16px 42px; }
  .setting-checks, .model-grid, .setting-metrics, .theme-grid, .text-settings, .secret-selectors { grid-template-columns: 1fr; }
  .settings-heading { align-items: flex-start; flex-direction: column; }
  .settings-detail-heading { align-items: flex-start; flex-direction: column; }
  .settings-user-grid, .setting-fixed-facts, .professional-grid { grid-template-columns: 1fr; }
  .settings-user-card { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "glyph copy" "glyph meta" "open open"; min-height: 0; }
  .settings-user-glyph { width: 44px; height: 44px; }
  .settings-user-open { justify-content: start; min-height: 34px; padding: 8px 0 0; border-inline-start: 0; border-top: 1px solid var(--border); }
  .secret-user-lock { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 1fr; }
  .account-actions { justify-content: stretch; }
  .account-actions button { flex: 1; }
  .topbar-right .profile-trigger > span:last-child { display: none; }
}

/* === Dedicated OpenCode project console ================================== */
#liveConsole { --oc: var(--accent); }
#liveConsole[data-accent="blue"] { --oc: #4d8dff; }
#liveConsole[data-accent="red"] { --oc: #ff5f6d; }
#liveConsole[data-accent="green"] { --oc: #3ecf8e; }

.live-server-row { --oc: var(--accent); }
.live-server-row.accent-blue { --oc: #4d8dff; }
.live-server-row.accent-red { --oc: #ff5f6d; }
.live-server-row.accent-green { --oc: #3ecf8e; }

/* Claude marks a bridged session with a short 3px rail on the leading edge
   and a tinted icon — not a tinted row and not a tinted title. Same rule
   here, so a coloured session reads the same in both lists. */
.live-server-row.accent-blue .live-server-pick,
.live-server-row.accent-red .live-server-pick,
.live-server-row.accent-green .live-server-pick,
.user-session.accent-blue,
.user-session.accent-red,
.user-session.accent-green,
.user-session.accent-violet { position: relative; }
.live-server-row.accent-blue .live-server-pick::before,
.live-server-row.accent-red .live-server-pick::before,
.live-server-row.accent-green .live-server-pick::before,
.user-session.accent-blue::before,
.user-session.accent-red::before,
.user-session.accent-green::before,
.user-session.accent-violet::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 22px;
  content: "";
  border-radius: 99px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--oc, var(--accent)), color-mix(in srgb, var(--oc, var(--accent)) 55%, white));
}
.user-session.accent-blue { --oc: #4d8dff; }
.user-session.accent-red { --oc: #ff5f6d; }
.user-session.accent-green { --oc: #3ecf8e; }
.user-session.accent-violet { --oc: var(--accent); }
.live-server-row.accent-blue .user-session-icon,
.user-session.accent-blue .user-session-icon { color: #6fd3f5; }
.live-server-row.accent-red .user-session-icon,
.user-session.accent-red .user-session-icon { color: #f0956a; }
.live-server-row.accent-green .user-session-icon,
.user-session.accent-green .user-session-icon { color: #6fe0b4; }
.live-server-row.accent-blue .live-server-pick:hover,
.live-server-row.accent-red .live-server-pick:hover,
.live-server-row.accent-green .live-server-pick:hover {
  background: rgba(255, 255, 255, .04);
}
.live-server-row.accent-blue .live-server-pick.picked,
.live-server-row.accent-red .live-server-pick.picked,
.live-server-row.accent-green .live-server-pick.picked {
  border-color: color-mix(in srgb, var(--oc) 55%, var(--border));
  border-left-color: var(--oc);
  background: linear-gradient(275deg, color-mix(in srgb, var(--oc) 26%, transparent), transparent 74%);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--oc) 16%, transparent);
}

/* --- Polish -------------------------------------------------------------- */
.live-app-shell {
  border-color: color-mix(in srgb, var(--oc, var(--accent)) 22%, var(--border));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42),
              0 0 0 1px color-mix(in srgb, var(--oc, var(--accent)) 8%, transparent);
  transition: border-color .35s ease, box-shadow .35s ease;
}
#liveConsole .user-chat-pane {
  background:
    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--oc) 16%, transparent), transparent 42%),
    radial-gradient(circle at 88% 108%, color-mix(in srgb, var(--oc) 8%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 24%);
  transition: background .35s ease;
}
#liveConsole .user-panel-toolbar {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oc) 7%, transparent), transparent),
              color-mix(in srgb, var(--panel) 88%, transparent);
}
/* A hairline of the session colour under the toolbar, so the identity of the
   open session is readable without looking at the sidebar. */
#liveConsole .user-panel-toolbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oc), transparent);
  opacity: .75;
}
#liveConsole .user-conversation-heading strong { letter-spacing: .2px; }
.live-server-badge {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--oc) 30%, var(--border));
  border-radius: 999px;
  color: color-mix(in srgb, var(--oc) 70%, var(--muted));
  background: color-mix(in srgb, var(--oc) 10%, transparent);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
#liveConsole .user-mirror-badge {
  border-color: color-mix(in srgb, var(--oc) 34%, var(--border));
  color: color-mix(in srgb, var(--oc) 76%, white);
  background: color-mix(in srgb, var(--oc) 10%, transparent);
}
#liveConsole .user-policy-bar { background: color-mix(in srgb, var(--oc) 5%, transparent); }
#liveConsole .user-composer:focus-within {
  border-color: color-mix(in srgb, var(--oc) 62%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc) 12%, transparent);
}
#liveConsole .user-composer button:not(:disabled) {
  background: linear-gradient(135deg, var(--oc), color-mix(in srgb, var(--oc) 45%, var(--accent-2)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--oc) 24%, transparent);
}
#liveConsole .user-composer button:not(:disabled):hover { filter: brightness(1.08); }
/* The glass chip keeps Claude's shape; only its tint follows the picked
   server, so the two sidebars still read as the same component. */
#liveConsole .user-brand-mark {
  background: linear-gradient(145deg, color-mix(in srgb, var(--oc, var(--accent)) 20%, transparent), rgba(90, 215, 197, 0.09));
  border-color: color-mix(in srgb, var(--oc, var(--accent)) 25%, var(--border));
}
#liveConsole .user-session-search:focus-within { border-color: color-mix(in srgb, var(--oc) 45%, var(--border)); }
#liveConsole .user-empty-mark {
  border-color: color-mix(in srgb, var(--oc) 32%, var(--border));
  color: color-mix(in srgb, var(--oc) 78%, white);
}

.live-server-pick { transition: transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.live-server-pick:not(:disabled):hover { transform: translateX(-2px); }
.live-server-pick.picked .user-session-chevron { opacity: 1; }
.live-server-row:hover .live-server-rename { color: var(--text); }

/* The status light keeps breathing while a server is answering, so a running
   job is visible from the sidebar without opening the session. */
.live-dot.running { animation: pulse 1.3s ease-in-out infinite; }
#liveConsole .live-servers { padding-right: 2px; scrollbar-width: thin; }

/* The project flag sits in the avatar chip with the status light as a badge. */
.live-server-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.live-server-flag { font-size: 15px; line-height: 1; }
.live-server-mark .live-dot {
  position: absolute;
  left: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--panel) 96%, black);
}
.live-server-row .user-session-meta { display: flex; gap: 6px; color: var(--muted); font-size: 10.5px; }
.live-server-row .user-session-meta span + span::before { content: "·"; margin-right: 6px; }
.live-server-row .user-session-name { font-size: 13px; }

#liveConsole .user-brand-row strong { letter-spacing: .3px; }
#liveConsole .user-session-pane {
  background: linear-gradient(200deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 38%),
              color-mix(in srgb, var(--panel) 92%, transparent);
}
#liveConsole .live-servers::-webkit-scrollbar { width: 6px; }
#liveConsole .live-servers::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
#liveConsole .user-message-stream::-webkit-scrollbar { width: 8px; }
#liveConsole .user-message-stream::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--oc) 20%, transparent); }
#liveConsole .user-empty-state { animation: oc-rise .5s ease both; }
#liveConsole .message-row { animation: oc-rise .28s ease both; }
@keyframes oc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Settings are grouped by domain so the real controls stay compact. */
.settings-accordion { display: grid; gap: 10px; }
.settings-accordion details { overflow: clip; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--panel-soft) 86%, transparent); }
.settings-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.settings-accordion summary::-webkit-details-marker { display: none; }
.settings-accordion summary::after { content: "＋"; color: var(--accent); font-size: 18px; font-weight: 400; }
.settings-accordion details[open] summary::after { content: "−"; }
.settings-accordion details[open] summary { border-bottom: 1px solid var(--border); }
.accordion-body { display: grid; gap: 12px; padding: 14px; }
.fixed-engine-grid, .settings-accordion .checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opencode-model-note { padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--oc, var(--accent)) 30%, var(--border)); border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--oc, var(--accent)) 7%, transparent); font-size: 12px; line-height: 1.8; }
@media (max-width: 760px) { .fixed-engine-grid, .settings-accordion .checks-grid { grid-template-columns: 1fr; } }

/* --- Per-engine settings gear on a section card ----------------------------
   The card stays one big link; the gear is a sibling floating over its corner,
   so tapping the card still opens the engine and only the gear opens settings. */
.card-wrap {
  position: relative;
  display: flex;
}

.card-wrap > .card {
  flex: 1;
}

.card-gear {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line, #2a2f3a);
  background: var(--panel, #171a21);
  color: var(--text, #e8eaf0);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.card-gear:hover,
.card-gear:focus-visible {
  opacity: 1;
  transform: rotate(30deg);
}

body.profage-section .dash {
  max-width: 1180px;
  padding-top: clamp(18px, 3vw, 34px);
}

body.profage-section .lede {
  margin-bottom: 18px;
}

/* Nine cards no longer fit one screen, so the grid scrolls on its own instead
   of pushing the page. The mask fades the last row so it reads as "more
   below" rather than a clipped card. */
body.profage-section .grid {
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
  gap: 9px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 12px 2px;
  margin-inline-end: -4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

body.profage-section .grid::-webkit-scrollbar {
  width: 7px;
}

body.profage-section .grid::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

body.profage-section .grid::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, currentColor 34%, transparent);
}

body.profage-section .card {
  height: 68px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: initial;
  column-gap: 9px;
  row-gap: 1px;
  padding: 9px 10px;
  padding-inline-end: 40px;
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.profage-section .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, currentColor 12%, transparent);
}

body.profage-section .card-icon {
  grid-row: 1 / span 2;
  align-self: center;
  width: 30px;
  height: 30px;
  margin: 0;
  font-size: 15px;
}

body.profage-section .card b {
  grid-column: 2;
  font-size: 14px;
  letter-spacing: -.01em;
}

body.profage-section .card small {
  grid-column: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11px;
  line-height: 1.4;
}

body.profage-section .card em {
  position: absolute;
  top: 44px;
  inset-inline-end: 9px;
  margin: 0;
  font-size: 9px;
}

body.profage-section .card-gear {
  top: 9px;
  inset-inline-end: 9px;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  font-size: 14px;
}

.engine-settings-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.engine-settings-layer.hidden { display: none; }

.engine-settings-box {
  width: min(920px, 100%);
  height: min(88vh, 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel, #171a21);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 16px;
  overflow: hidden;
}

.engine-settings-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #2a2f3a);
}

.engine-settings-close {
  border: 1px solid var(--line, #2a2f3a);
  background: transparent;
  color: var(--text, #e8eaf0);
  border-radius: 10px;
  padding: 7px 14px;
  cursor: pointer;
}

.engine-settings-box iframe {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: block;
  width: 100%;
  border: 0;
  background: var(--bg, #12141a);
}

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .engine-settings-layer { padding: 0; }
  .engine-settings-box { width: 100%; height: 100%; border-radius: 0; border: 0; }
}

/* 2026 interface refresh --------------------------------------------------
   A consistent interaction layer shared by the dashboard, every section,
   communications and the account profile. Theme rules below remain opt-in. */
:is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 3px;
}

:is(.back, .profile-trigger, .modal-close, .profile-tabs button, .profile-inline-actions button,
    .profile-inline-actions .profile-upload, .profile-form-footer button, .security-card button) {
  min-height: 44px;
}

.topbar {
  border-bottom-color: color-mix(in srgb, var(--accent) 13%, var(--border));
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .12);
  backdrop-filter: blur(22px) saturate(1.15);
}

.card, .setting-card, .account-admin, .secret-zone {
  border-color: var(--border);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .16);
}

.profile-avatar img, .account-avatar img, .user-account-avatar img,
.profile-photo-preview img, .profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full per-account profile. */
.profile-layer.modal-backdrop { padding: clamp(12px, 3vw, 32px); }
.profile-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1040px, 100%);
  max-height: calc(100dvh - clamp(24px, 6vw, 64px));
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% -20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 36%),
    color-mix(in srgb, var(--panel-solid) 94%, var(--bg));
  box-shadow: 0 40px 120px rgba(0, 0, 0, .58);
}
.profile-heading {
  min-height: 112px;
  padding: 24px 30px 18px 76px;
  border-bottom: 1px solid var(--border);
}
.profile-heading h2 { font-size: clamp(21px, 2.4vw, 29px); }
.profile-heading p { line-height: 1.7; }
.profile-kicker {
  color: var(--accent) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.profile-avatar-large {
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 21px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 16%, transparent);
}
.profile-modal > .modal-close {
  top: 25px;
  right: 27px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--panel-soft);
}
.profile-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 24px 18px;
  padding: 6px;
  border-radius: 16px;
}
.profile-tabs button {
  padding: 10px 12px;
  border-radius: 11px;
  font-weight: 700;
  cursor: pointer;
}
.profile-tabs button.active {
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.profile-content {
  min-height: 0;
  padding: 0 24px 28px;
  overflow: auto;
  scrollbar-color: color-mix(in srgb, var(--accent) 28%, transparent) transparent;
}
.profile-pane { gap: 16px; animation: profile-pane-in .22s ease both; }
@keyframes profile-pane-in { from { opacity: 0; transform: translateY(5px); } }
.profile-photo-editor {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), var(--panel-soft));
}
.profile-photo-editor b { font-size: 16px; }
.profile-photo-editor p { margin: 5px 0 12px; color: var(--muted); font-size: 12px; }
.profile-photo-preview {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 26px;
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}
.profile-photo-preview .profile-avatar-large { width: 100%; height: 100%; border: 0; border-radius: inherit; }
.profile-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: pointer;
}
.profile-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-form-grid label, .security-card label { margin: 0; }
.profile-span-2 { grid-column: 1 / -1; }
.profile-form-grid :is(input, textarea), .security-card :is(input, textarea) {
  width: 100%;
  margin-top: 7px;
  border-color: var(--border);
  background: var(--panel-soft);
}
.profile-form-grid textarea { resize: vertical; }
.profile-form-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 2px; }
.profile-form-footer .form-status { flex: 1; }
.profile-account-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
}
.profile-account-card :is(small, strong, p) { display: block; margin: 0; }
.profile-account-card small { color: var(--muted); }
.profile-account-card strong { margin-top: 2px; font-size: 17px; }
.profile-account-card p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.profile-account-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 20px;
}
.profile-note, .custom-theme-note {
  padding: 14px 16px;
  color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-size: 12px;
  line-height: 1.9;
}
.security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.security-card {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel-soft);
}
.security-card[hidden] { display: none !important; }
.syc-password-protection { border-color: rgba(241, 196, 86, .48); background: linear-gradient(145deg, rgba(241, 196, 86, .12), rgba(132, 91, 15, .07)); }
.syc-password-protection .security-card-head > span { color: #f1c456; }
.syc-password-protection .security-state { border-color: rgba(241, 196, 86, .35); color: color-mix(in srgb, #f1c456 76%, var(--text)); }
.security-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.security-card-head h3, .security-card-head p { margin: 0; }
.security-card-head p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.security-state {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
}
.security-state.on { color: var(--success); border-color: color-mix(in srgb, var(--success) 42%, var(--border)); }
.totp-setup { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.totp-setup img { width: 150px; height: 150px; padding: 8px; border-radius: 16px; background: white; }
.totp-setup code { display: block; overflow-wrap: anywhere; padding: 10px; direction: ltr; color: var(--text); border-radius: 10px; background: rgba(127,127,127,.08); }
.appearance-intro { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.appearance-intro h3, .appearance-intro p { margin: 0; }
.appearance-intro p { margin-top: 5px; color: var(--muted); line-height: 1.8; }
.profile-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.profile-theme-card {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--panel-soft);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.profile-theme-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); }
.profile-theme-card.active { border-color: color-mix(in srgb, var(--accent) 68%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); }
.profile-theme-card > span:nth-child(2) { display: grid; min-width: 0; }
.profile-theme-card b { font-size: 14px; }
.profile-theme-card small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.65; }
.profile-theme-card em { position: absolute; top: 9px; right: 9px; color: var(--accent); font-size: 9px; font-style: normal; }
.profile-theme-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  width: 86px;
  height: 62px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: var(--preview-bg);
}
.profile-theme-preview i { border-radius: 4px; background: var(--preview-panel); }
.profile-theme-preview i:nth-child(2) { background: var(--preview-accent); }
.profile-theme-preview i:nth-child(3) { grid-column: 1 / -1; background: linear-gradient(90deg, var(--preview-accent), var(--preview-accent2)); }
.profile-theme-preview i:nth-child(4) { display: none; }

/* Codex — warm studio paper, deliberate geometry and a quiet craft signature. */
body[data-theme="codex"] .theme-backdrop {
  background:
    linear-gradient(rgba(217,119,87,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,178,111,.03) 1px, transparent 1px),
    var(--bg);
  background-size: 28px 28px;
}
body[data-theme="codex"] .theme-backdrop::after { background: radial-gradient(circle at 18% 8%, rgba(217,119,87,.09), transparent 34%); }
body[data-theme="codex"] :is(.card, .setting-card, .account-admin, .profile-modal, .secret-zone) {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 9px 10px 0 color-mix(in srgb, var(--accent) 4%, transparent), 0 24px 55px rgba(0,0,0,.22);
}
body[data-theme="codex"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
body[data-theme="codex"] :is(.back, .profile-trigger, button, input, textarea, select) { border-radius: 8px; }
body[data-theme="codex"] .brand-orb { border-radius: 10px; transform: rotate(-2deg); }
body[data-theme="codex"] .dash h1 { letter-spacing: -.035em; }
body[data-theme="codex"] .profile-kicker::before { content: "CODEX / "; color: var(--accent-2); }

/* Light must remain fully usable, including overlays and muted copy. */
body[data-theme="light"] .profile-modal,
body[data-theme="light"] .account-manager-modal {
  color: var(--text);
  background: rgba(255,255,255,.97);
  box-shadow: 0 32px 90px rgba(25, 39, 58, .22);
}
body[data-theme="light"] :is(.profile-photo-editor, .profile-account-card, .security-card, .profile-theme-card, .profile-tabs) { background: rgba(233,239,246,.72); }
body[data-theme="light"] :is(.field-hint, .form-status, .profile-note, .custom-theme-note, .profile-theme-card small) { color: #566477; }
body[data-theme="light"] .modal-backdrop { background: rgba(22,34,48,.44); }

@media (max-width: 760px) {
  .profile-layer.modal-backdrop { align-items: end; padding: 0; }
  .profile-modal { width: 100%; max-height: 94dvh; border-radius: 24px 24px 0 0; border-bottom: 0; }
  .profile-heading { min-height: 94px; padding: 18px 20px 14px 66px; }
  .profile-modal > .modal-close { top: 18px; right: 16px; }
  .profile-avatar-large { width: 58px; height: 58px; border-radius: 17px; }
  .profile-tabs { margin: 12px 14px 15px; overflow-x: auto; grid-template-columns: repeat(4, minmax(112px, 1fr)); }
  .profile-content { padding: 0 14px 22px; }
  .profile-form-grid, .security-grid, .profile-theme-grid { grid-template-columns: 1fr; }
  .profile-span-2 { grid-column: auto; }
  .totp-setup { grid-template-columns: 1fr; }
  .totp-setup img { justify-self: center; }
}

@media (max-width: 460px) {
  .profile-photo-editor { grid-template-columns: 1fr; text-align: center; }
  .profile-photo-preview { justify-self: center; }
  .profile-inline-actions, .profile-form-footer { justify-content: center; }
  .appearance-intro { display: grid; }
  .profile-theme-card { grid-template-columns: 72px minmax(0,1fr); }
  .profile-theme-preview { width: 72px; }
}

/* Professional account launcher. Keep all styling inside this section. */
/* The SYC logo stays in the background on every section, this one included (owner, 2026-09-18). */
body.profage-section .ambient { opacity: .25; }
body.profage-section .topbar { background: var(--bg); }
body.profage-section .dash { max-width: 1140px; padding: 32px 24px 48px; }
body.profage-section #items.grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  max-height: none; overflow: visible; padding: 0; margin: 0;
  -webkit-mask-image: none; mask-image: none;
}
body.profage-section .professional-card {
  position: relative; display: flex; align-items: center; min-width: 0;
  min-height: 98px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel-solid); box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}
body.profage-section .professional-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--panel-solid) 97%, var(--accent));
}
body.profage-section .professional-card:focus-within {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
body.profage-section .professional-card > .card {
  position: static; display: grid; flex: 1; min-width: 0; height: auto; min-height: 96px;
  grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; align-items: center; column-gap: 11px; row-gap: 3px;
  margin: 0; padding: 18px 16px; padding-inline-end: 8px;
  border: 0; border-radius: 12px; background: transparent; color: var(--text);
  box-shadow: none; opacity: 1; transform: none; text-align: start; overflow: visible;
}
body.profage-section .professional-card > .card:not(.disabled)::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
}
body.profage-section .professional-card > .card:hover {
  background: transparent; box-shadow: none; transform: none;
}
body.profage-section .professional-card .card-icon {
  grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px;
  display: grid; place-items: center; margin: 0; border: 0; border-radius: 10px;
  background: var(--panel-soft); color: var(--muted); box-shadow: none;
}
body.profage-section .professional-card .card-icon img { width: 24px; height: 24px; object-fit: contain; }
body.profage-section .professional-card .card-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.5; }
body.profage-section .professional-card .card b {
  grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; font-weight: 650; line-height: 1.7;
}
body.profage-section .professional-card .card small {
  grid-column: 2; grid-row: 2; display: block; margin: 0; color: var(--muted);
  font-size: 10px; line-height: 1.7; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset;
}
body.profage-section .professional-card-footer {
  display: flex; flex-direction: column-reverse; align-items: end; justify-content: center;
  flex: 0 0 auto; gap: 8px; min-height: 64px; padding: 12px 0; padding-inline-end: 14px;
  margin: 0; border: 0;
}
body.profage-section .professional-card .card-gear {
  position: relative; inset: auto; z-index: 2; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 5px; margin: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted-2); opacity: 1; transform: none;
}
body.profage-section .professional-card .card-gear svg {
  width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5;
}
body.profage-section .professional-card .card-gear:hover {
  color: var(--text); background: var(--panel-soft); transform: none;
}
body.profage-section .professional-card .codex-classic-control {
  position: relative; inset: auto; z-index: 2; display: flex; align-items: center;
  gap: 6px; direction: ltr; color: var(--muted); font: inherit; font-size: 9px; font-weight: 400;
}
body.profage-section .professional-card .codex-classic-toggle {
  position: relative; inset: auto; flex: 0 0 auto; width: 26px; height: 15px;
  padding: 2px; direction: ltr; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--muted-2) 35%, var(--panel-solid));
}
body.profage-section .professional-card .codex-classic-toggle span {
  width: 11px; height: 11px; border-radius: 50%; background: var(--muted);
  box-shadow: none; transform: translateX(0);
}
body.profage-section .professional-card .codex-classic-toggle[aria-checked="true"] { background: var(--accent); }
body.profage-section .professional-card .codex-classic-toggle[aria-checked="true"] span {
  transform: translateX(11px); background: var(--panel-solid);
}
body.profage-section .professional-card .codex-classic-toggle:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
body.profage-section .professional-open-label { color: var(--muted-2); font-size: 9px; white-space: nowrap; }
body.profage-section .professional-open-label svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; }
body.profage-section .professional-card.is-pending { background: color-mix(in srgb, var(--panel-solid) 65%, var(--bg)); }
body.profage-section .professional-card.is-pending .card-icon { opacity: .65; }
@media (max-width: 900px) {
  body.profage-section #items.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.profage-section .dash { padding: 18px 16px 32px; }
  body.profage-section #items.grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  body.profage-section .professional-card { min-height: 80px; }
  body.profage-section .professional-card > .card { min-height: 78px; padding-block: 13px; }
  body.profage-section .professional-card-footer { padding-block: 7px; gap: 3px; }
  body.profage-section .topbar { gap: 10px; padding-inline: 16px; }
  body.profage-section .topbar-right { gap: 6px; }
  body.profage-section .topbar .who, body.profage-section #sectionBlurb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.profage-section .professional-card, body.profage-section .codex-classic-toggle,
  body.profage-section .codex-classic-toggle span { transition: none; }
}

/* Free: avatar circle in the top bar; hover (desktop) lists profile sections */
.avatar-menu { position: relative; }
.avatar-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0 !important; border-radius: 50% !important; background: transparent !important; border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)) !important; box-shadow: none !important; cursor: pointer; transition: transform .15s, border-color .15s; }
.avatar-button:hover, .avatar-button:focus-visible { transform: scale(1.05); border-color: var(--accent) !important; }
.avatar-button .profile-avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; font-size: 18px; }
.avatar-button .profile-avatar img, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 220px; padding: 8px; display: none; flex-direction: column; gap: 2px; background: var(--panel, #111827); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.avatar-dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.avatar-dropdown-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.avatar-dropdown-head b { font-size: 14px; }
.avatar-dropdown-head small { color: var(--muted); font-size: 12px; }
.avatar-dropdown button { all: unset; box-sizing: border-box; width: 100%; padding: 9px 10px; border-radius: 9px; color: var(--text); font-size: 13.5px; cursor: pointer; text-align: left; }
.avatar-dropdown button:hover, .avatar-dropdown button:focus-visible { background: rgba(127,127,127,.12); }
.avatar-dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.avatar-dropdown .avatar-signout { color: #f87171; }
@media (hover: hover) and (pointer: fine) {
  .avatar-menu:hover .avatar-dropdown, .avatar-menu:focus-within .avatar-dropdown { display: flex; }
}
/* Profile: 2FA, sessions, upgrade */
.totp-setup { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0; }
.totp-setup img { width: 168px; height: 168px; padding: 8px; background: #fff; border-radius: 12px; }
.totp-setup code { padding: 6px 10px; border-radius: 8px; background: rgba(127,127,127,.12); font-size: 13px; letter-spacing: 1px; word-break: break-all; }
.security-card form { display: flex; flex-direction: column; gap: 10px; }
.security-state.success { color: #34d399; }
button.danger { color: #fff; background: #dc2626; border: 0; }
.upgrade-intro h3 { margin: 4px 0; }
.upgrade-intro p { color: var(--muted); margin: 0 0 14px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.upgrade-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(127,127,127,.05); }
.upgrade-card b { font-size: 16px; }
.upgrade-card small { color: var(--muted); }
.upgrade-card em { margin-top: 6px; font-style: normal; font-size: 12px; color: var(--muted); }
.upgrade-card.current { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.upgrade-card.current em { color: #34d399; font-weight: 600; }
.topbar { z-index: 40; }
/* Free: brand tiles keep their real logo colors on every theme */
.professional-card .card-icon.card-logo { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
.professional-card .card-icon.card-logo.brand-kimi { background: #000 !important; border-color: rgba(255,255,255,.12) !important; }
.professional-card .card-icon.card-logo.brand-api { background: linear-gradient(135deg, #6366f1, #0ea5e9) !important; }
.professional-card.is-pending .card-icon.card-logo, .professional-card .card.disabled .card-icon.card-logo { opacity: 1 !important; filter: none !important; }
.security-card-head { justify-content: flex-start; text-align: left; }
.security-card-head > span { flex: 0 0 auto; width: 22px; }
.profile-heading { padding: 24px 76px 18px 30px; }
body.profage-section .professional-card .card.disabled { opacity: .8; }

/* Language picker inside the profile menu (SYC panel languages, 2026-09-18). */
.avatar-language { padding: 6px 10px 8px; display: grid; gap: 6px; }
.avatar-language > small { color: var(--muted, #9ba5b9); font-size: 11px; }
.avatar-language-options { display: flex; flex-wrap: wrap; gap: 4px; }
.avatar-language-chip {
  padding: 4px 8px; border-radius: 999px; font: inherit; font-size: 11px; cursor: pointer;
  color: var(--text, #eef1f8); background: transparent; border: 1px solid var(--border, #273047);
}
.avatar-language-chip:hover { border-color: var(--accent, #6c5ce7); }
.avatar-language-chip.active { background: var(--accent, #6c5ce7); border-color: var(--accent, #6c5ce7); color: #fff; }

/* A dimmed card is not dead: clicking one says why it is dimmed, and the toast
   is where that sentence lands. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  color: #f4f1ff;
  font-size: 12.5px;
  text-align: center;
  background: rgba(24, 20, 48, 0.94);
  border: 1px solid rgba(139, 124, 248, 0.34);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  z-index: 60;
}

/* The locked cards on Connection and Communications are reachable by keyboard,
   so they need the same pointer affordance as a link. */
.card.locked[role="button"] { cursor: pointer; }
.card.locked[role="button"]:focus-visible {
  outline: 2px solid rgba(139, 124, 248, 0.6);
  outline-offset: 2px;
}

/* --- Connection · Android ---------------------------------------------- */
.device-page { display: grid; gap: 14px; max-width: 760px; }
.device-card {
  padding: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.device-card h2 { margin: 0 0 4px; font-size: 14px; }
.device-card p.muted { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.device-download {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.device-download:hover { border-color: rgba(139, 124, 248, 0.34); background: rgba(139, 124, 248, 0.08); }
.device-download b { display: block; font-size: 13px; }
.device-download small { color: var(--muted); font-size: 11.5px; }
.device-hash { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 10.5px; color: var(--muted); }
.device-hash code { overflow-wrap: anywhere; }
.device-pairing { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.device-qr { width: 168px; height: 168px; padding: 8px; background: #fff; border-radius: 12px; }
.device-code { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: 3px; }
.device-known { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.device-known small { display: block; }
.device-dot { padding: 4px 10px; font-size: 11px; border-radius: 999px; }
.device-dot.on { color: #7ee2b8; background: rgba(46, 160, 110, 0.16); }
.device-dot.off { color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.device-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.device-perm { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.device-card .ghost.danger { color: #ffb4b4; border-color: rgba(255, 120, 120, 0.3); }

/* Install-on-demand for professional accounts (core install shows these) */
.professional-card .install-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.professional-card.is-installing .card { pointer-events: none; opacity: .85; }
.install-progress { margin-top: 8px; }
.install-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.install-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#28E0B0,#2ED8FF); transition: width .3s ease; }
.install-step { font-size: 11.5px; color: var(--muted, #9298ac); margin-top: 5px; min-height: 15px; }
.install-step.err { color: #ffb4b4; }

/* Central account onboarding and launch-plan selection. */
#onboardingNav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
#onboardingNav button {
  border: 0; background: transparent; color: var(--muted, #9298ac);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
#onboardingNav button:hover, #onboardingNav button:focus-visible { color: var(--text, #eef1f8); }
.plan-grid { display: grid; gap: 9px; }
.plan-card {
  display: grid; gap: 5px; width: 100%; padding: 12px; text-align: left;
  color: var(--text, #eef1f8); background: rgba(255,255,255,.04);
  border: 1px solid var(--border, #273047); border-radius: 12px; cursor: pointer;
}
.plan-card:not(:disabled):hover { border-color: var(--accent, #6c5ce7); background: rgba(108,92,231,.1); }
.plan-card:disabled { opacity: .5; cursor: not-allowed; }
.plan-card span, .plan-card small { color: var(--muted, #9298ac); }