/* SYC-AI panel — design layer v2 (2026-09-24).
   One calm, detailed look for every page of the hosted panel. Loaded after
   main.css and scoped to body.v2 so it wins without !important wars.
   Rules of this layer: no blinking, no counters, no ad-like badges; motion is
   limited to a 1-2 px hover lift and is switched off for reduced motion;
   every direction-sensitive value uses logical properties so Persian and
   Arabic read correctly. */

html:has(body.v2) { background: #050914; }
body.v2 {
  --bg: #050914;
  --bg-2: #0a1226;
  --panel: rgba(16, 24, 44, 0.74);
  --panel-solid: #0e1629;
  --panel-soft: rgba(255, 255, 255, 0.04);
  --border: rgba(150, 172, 255, 0.13);
  --border-strong: rgba(96, 150, 255, 0.5);
  --text: #eaf0ff;
  --muted: #9eabc6;
  --muted-2: #6f7d9c;
  --accent: #4f8cff;
  --accent-2: #8b7bff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --success: #34d399;
  --warn: #f6c453;
  --danger: #fb7185;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  color: var(--text);
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(79, 140, 255, 0.16), transparent 62%),
    radial-gradient(900px 520px at 108% 6%, rgba(139, 123, 255, 0.11), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 46%);
  background-color: #050914;
  min-height: 100vh;
}

body.v2 .ambient { display: none; }
/* The brand mark stays in the background, quieter than before. */
body.v2 .watermark { opacity: 0.12; filter: saturate(0.9); }

/* ---- top bar ------------------------------------------------------------ */
body.v2 .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px clamp(16px, 4vw, 44px);
  background: rgba(5, 9, 20, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}
body.v2 .brand { gap: 12px; }
body.v2 .brand strong { font-size: 15px; letter-spacing: 0.01em; }
body.v2 .brand span { font-size: 12px; color: var(--muted); }
body.v2 .back {
  width: 40px; height: 40px; flex-basis: 40px;
  border-radius: 12px;
  color: var(--text);
  background: var(--panel-soft);
  border-color: var(--border);
  transition: border-color .15s ease, background .15s ease;
}
body.v2 .back:hover { border-color: var(--border-strong); background: var(--accent-soft); }
body.v2 [dir="rtl"] .back svg, html[dir="rtl"] body.v2 .back svg { transform: scaleX(-1); }
body.v2 .brand-orb.small {
  width: 40px; height: 40px;
  background: url("/assets/syc-logo.svg") center / 30px no-repeat, rgba(79, 140, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
body.v2 .brand-orb.small::before, body.v2 .brand-orb.small svg { display: none; }

/* ---- page frame ---------------------------------------------------------- */
body.v2 .dash { max-width: 1320px; padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 44px) 64px; }
body.v2 .page-hero { margin: 0 0 26px; }
body.v2 .eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.v2 .dash h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
body.v2 .dash h1 .soft { color: var(--muted); font-weight: 500; }
body.v2 .lede { margin: 0; max-width: 720px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
body.v2 .section-title { margin: 30px 0 12px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- cards ---------------------------------------------------------------- */
body.v2 .grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
body.v2 .card {
  position: relative;
  gap: 6px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
body.v2 a.card:hover, body.v2 .card-wrap:hover > a.card:not(.disabled) {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(79, 140, 255, 0.1), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow);
}
body.v2 .card b { font-size: 15.5px; font-weight: 700; }
body.v2 .card small { color: var(--muted); font-size: 13px; line-height: 1.65; }
body.v2 .card em {
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
}
body.v2 .card-icon {
  width: 44px; height: 44px;
  margin-bottom: 10px;
  color: #cfe0ff;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.24), rgba(139, 123, 255, 0.18));
  border: 1px solid rgba(150, 172, 255, 0.2);
  border-radius: 14px;
}
body.v2 .card-icon svg { width: 21px; height: 21px; stroke-width: 1.8; }
body.v2 .card.admin { border-color: var(--border); }
body.v2 .card.admin .card-icon { color: #ffe3a6; background: linear-gradient(135deg, rgba(246, 196, 83, 0.26), rgba(246, 150, 83, 0.14)); border-color: rgba(246, 196, 83, 0.28); }
body.v2 .card .go {
  position: absolute; inset-block-start: 20px; inset-inline-end: 18px;
  width: 20px; height: 20px; color: var(--muted-2);
}
body.v2 .card .go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] body.v2 .card .go svg { transform: scaleX(-1); }
body.v2 a.card:hover .go { color: var(--accent); }
body.v2 .card.locked { opacity: 0.62; border-style: solid; border-color: var(--border); cursor: default; }
body.v2 .card.locked:hover { transform: none; box-shadow: none; }
body.v2 .card.locked .card-icon { color: var(--muted); background: var(--panel-soft); border-color: var(--border); }
body.v2 .card.locked em { color: var(--muted); }

/* ---- home ----------------------------------------------------------------- */
body.v2 .home-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
body.v2 .home-grid .card { min-height: 188px; }
body.v2 .start-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
body.v2 .start-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  color: inherit; text-decoration: none;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .15s ease, background .15s ease;
}
body.v2 .start-step:hover { border-color: var(--border-strong); background: var(--accent-soft); }
body.v2 .start-step .tick {
  flex: 0 0 26px; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--muted-2);
  color: transparent;
}
body.v2 .start-step.done .tick { border-color: var(--success); background: rgba(52, 211, 153, 0.15); color: var(--success); }
body.v2 .start-step .tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.v2 .start-step b { display: block; font-size: 14px; margin-bottom: 2px; }
body.v2 .start-step small { color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* ---- notices: announcements, restricted access, thank-you ---------------- */
body.v2 .access-notice {
  gap: 6px; margin-bottom: 18px; padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(246, 196, 83, 0.35);
  background: linear-gradient(180deg, rgba(246, 196, 83, 0.1), rgba(246, 196, 83, 0.04));
}
body.v2 .access-notice.announcement { border-color: rgba(79, 140, 255, 0.35); background: linear-gradient(180deg, rgba(79, 140, 255, 0.12), rgba(79, 140, 255, 0.04)); position: relative; padding-inline-end: 48px; }
body.v2 .access-notice strong { font-size: 14.5px; }
body.v2 .access-notice span { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
body.v2 .announce-close {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 18px; line-height: 1; cursor: pointer;
}
body.v2 .announce-close:hover { color: var(--text); border-color: var(--border-strong); }
body.v2 .thanks-card {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 0 0 20px; padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(139, 123, 255, 0.35);
  background: linear-gradient(135deg, rgba(139, 123, 255, 0.14), rgba(79, 140, 255, 0.06));
}
body.v2 .thanks-hand { font-size: 30px; line-height: 1; }
body.v2 .thanks-body strong { display: block; font-size: 15.5px; margin-bottom: 6px; }
body.v2 .thanks-body p { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
body.v2 .thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.v2 .thanks-star {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 12px;
  color: #0b1020; background: linear-gradient(135deg, #ffd978, #f6c453);
  font-weight: 700; font-size: 13.5px; text-decoration: none;
}
body.v2 .thanks-later { padding: 9px 12px; border-radius: 12px; color: var(--muted); background: transparent; border: 1px solid var(--border); font: inherit; font-size: 13px; cursor: pointer; }
body.v2 .thanks-later:hover { color: var(--text); border-color: var(--border-strong); }

/* ---- professional accounts: cards in the middle, features around them ---- */
body.v2.profage-section .dash { max-width: 1400px; }
body.v2 .accounts-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
body.v2 .accounts-layout > * { min-width: 0; }
@media (min-width: 1280px) {
  body.v2 .accounts-layout { grid-template-columns: 268px minmax(0, 1fr) 268px; align-items: start; }
}
body.v2 .feature-column { display: grid; gap: 12px; align-content: start; }
@media (max-width: 1279px) {
  body.v2 .feature-column { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); order: 2; }
  body.v2 .accounts-center { order: 1; }
}
body.v2 .feature-box {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 14px 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--border);
  border-radius: 16px;
}
body.v2 .feature-box .fi {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center;
  color: #cfe0ff;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.2), rgba(139, 123, 255, 0.14));
  border: 1px solid rgba(150, 172, 255, 0.18);
  border-radius: 11px;
}
body.v2 .feature-box .fi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.v2 .feature-box b { display: block; font-size: 13.5px; margin: 1px 0 3px; }
body.v2 .feature-box small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

body.v2.profage-section .grid,
body.v2 .accounts-grid {
  max-height: none; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
  padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
body.v2.profage-section #items.grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
body.v2 .professional-card {
  display: flex; align-items: center;
  min-height: 108px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
body.v2 .professional-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); background: linear-gradient(180deg, rgba(79, 140, 255, 0.09), rgba(255, 255, 255, 0.02)); }
body.v2 .professional-card.is-pending:hover { border-color: var(--border); box-shadow: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)); }
body.v2 .professional-card > .card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px;
  align-items: center;
  min-height: 106px;
  padding: 18px; padding-inline-end: 8px;
  border: 0; background: transparent; box-shadow: none;
}
body.v2 .professional-card > .card:hover { transform: none; box-shadow: none; background: transparent; border: 0; }
body.v2 .professional-card > .card .card-icon { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; border-radius: 15px; }
body.v2 .professional-card > .card .card-icon img { width: 26px; height: 26px; }
body.v2 .professional-card > .card b { align-self: end; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2 .professional-card > .card small { align-self: start; font-size: 12.5px; white-space: normal; overflow: visible; text-overflow: clip; text-align: start; }
body.v2 .professional-card-footer {
  position: static;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 0;
  padding: 12px 0; padding-inline-end: 16px;
}
body.v2 .card-gear {
  position: static;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  opacity: 1;
}
body.v2 .card-gear svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; }
body.v2 .card-gear:hover { color: var(--text); border-color: var(--border-strong); transform: none; }
body.v2 .professional-open-label {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
  text-decoration: none;
}
body.v2 .professional-card .install-btn,
body.v2 .hosted-actions button,
body.v2 .hosted-actions a {
  padding: 7px 13px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79, 140, 255, 0.28);
}
body.v2 .hosted-actions a.open-link { background: rgba(52, 211, 153, 0.16); color: var(--success); box-shadow: none; border: 1px solid rgba(52, 211, 153, 0.35); text-decoration: none; }
body.v2 .professional-card.is-pending > .card { opacity: 0.7; }
body.v2 .professional-card.is-pending .professional-open-label { color: var(--muted-2); }
body.v2 .professional-card > .card.disabled { opacity: 1; pointer-events: auto; cursor: default; }
body.v2 .professional-card > .card.disabled:hover { transform: none; box-shadow: none; border-color: var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)); }
body.v2 .status-chip { display: inline-flex; align-items: center; gap: 6px; }
body.v2 .status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
body.v2 .status-chip.ok::before { background: var(--success); }
body.v2 .status-chip.warn::before { background: var(--warn); }
body.v2 .install-progress { width: 150px; }
body.v2 .install-bar { height: 6px; border-radius: 99px; background: var(--panel-soft); overflow: hidden; }
body.v2 .install-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
body.v2 .install-step { margin-top: 6px; color: var(--muted); font-size: 11.5px; text-align: end; }

/* the device strip above the accounts */
body.v2 .device-bar {
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(79, 140, 255, 0.1), rgba(79, 140, 255, 0.03));
  border: 1px solid rgba(79, 140, 255, 0.28);
}
body.v2 .device-bar h3 { margin: 0 0 8px; font-size: 15.5px; gap: 10px; }
body.v2 .device-bar > div { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
body.v2 .device-bar code {
  margin: 6px 0 10px; padding: 10px 12px;
  border-radius: 12px;
  background: rgba(3, 6, 14, 0.7);
  border: 1px solid var(--border);
  color: #dbe6ff; font-size: 12.5px;
}
body.v2 .device-bar select {
  padding: 8px 12px;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit; font-size: 13.5px;
}
body.v2 .hosted-state { color: var(--muted); font-size: 12.5px; }

/* ---- connection pages ----------------------------------------------------- */
body.v2 .device-page { max-width: 880px; gap: 14px; }
body.v2 .device-card {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
}
body.v2 .device-card h2 { font-size: 15.5px; margin-bottom: 6px; }
body.v2 .device-card p.muted { font-size: 13.5px; }
body.v2 .device-perms { display: grid; gap: 10px; }
body.v2 .device-perm {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  cursor: pointer;
}
body.v2 .device-perm input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
body.v2 .device-perm b { display: block; font-size: 13.5px; }
body.v2 .device-perm small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
body.v2 .device-perm-danger { border-color: rgba(251, 113, 133, 0.35); }
body.v2 .device-perm-danger b { color: #ffc2cc; }
body.v2 .get-button, body.v2 .primary {
  padding: 11px 18px; border-radius: 12px; border: 0;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 700; box-shadow: 0 8px 22px rgba(79, 140, 255, 0.3);
}
body.v2 .get-command { border-radius: 12px; background: rgba(3, 6, 14, 0.7); }

/* ---- profile, plans and payments ----------------------------------------- */
body.v2 .profile-modal { border-radius: 22px; background: linear-gradient(180deg, #111a31, #0b1224); border-color: var(--border); }
body.v2 .upgrade-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
body.v2 .upgrade-card {
  gap: 8px; padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
}
body.v2 .upgrade-card.current { border-color: rgba(52, 211, 153, 0.5); background: linear-gradient(180deg, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.02)); }
body.v2 .upgrade-card .plan-price { font-size: 13px; color: var(--muted); }
body.v2 .upgrade-card .plan-price s { opacity: 0.7; }
body.v2 .upgrade-card button[disabled] {
  margin-top: 6px; padding: 9px 12px; border-radius: 11px;
  color: var(--muted); background: var(--panel-soft); border: 1px dashed var(--border);
  font: inherit; font-size: 12.5px; cursor: not-allowed;
}
body.v2 .pay-methods { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 14px; }
body.v2 .pay-method {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background: var(--panel-soft); border: 1px solid var(--border);
  opacity: 0.8;
}
body.v2 .pay-method .pm-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-weight: 800; font-size: 12px; }
body.v2 .pay-method b { display: block; font-size: 13px; }
body.v2 .pay-method small { display: block; color: var(--muted); font-size: 11.5px; }

/* ---- language offer, busy page ------------------------------------------- */
.lang-offer {
  position: fixed; z-index: 50;
  inset-block-start: 14px; inset-inline-end: 14px;
  display: flex; gap: 6px; align-items: center;
  padding: 6px 6px 6px 12px;
  color: #dbe6ff;
  background: rgba(10, 18, 38, 0.86);
  border: 1px solid rgba(150, 172, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-size: 12.5px;
}
.lang-offer button { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(150, 172, 255, 0.25); color: #dbe6ff; background: transparent; font: inherit; cursor: pointer; }
.lang-offer button.on { color: #fff; background: #4f8cff; border-color: #4f8cff; }
body.busy-page { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 16px; background: #050914; color: #eaf0ff; font-family: "Vazirmatn", system-ui, sans-serif; }
.busy-card { max-width: 440px; text-align: center; padding: 28px; border-radius: 20px; border: 1px solid rgba(150, 172, 255, 0.18); background: rgba(16, 24, 44, 0.8); }
.busy-card h1 { font-size: 20px; }
.busy-card p { color: #9eabc6; line-height: 1.7; }
.busy-card .button { display: inline-block; margin: 4px; padding: 10px 16px; border-radius: 12px; color: #fff; background: #4f8cff; text-decoration: none; }
.busy-card .button.ghost { background: transparent; border: 1px solid rgba(150, 172, 255, 0.3); }

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 640px) {
  body.v2 .dash { padding: 20px 16px 48px; }
  body.v2 .grid, body.v2 .accounts-grid, body.v2.profage-section .grid, body.v2.profage-section .accounts-grid { grid-template-columns: 1fr; }
  body.v2.profage-section #items.grid { grid-template-columns: minmax(0, 1fr); }
  body.v2 .professional-card > .card { min-height: 96px; }
  body.v2 .thanks-card { flex-direction: column; gap: 10px; }
  body.v2 .feature-column { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.v2 *, body.v2 *::before, body.v2 *::after { transition: none !important; }
  body.v2 a.card:hover { transform: none; }
}

/* focus stays visible everywhere */
body.v2 a:focus-visible, body.v2 button:focus-visible, body.v2 select:focus-visible, body.v2 input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* sign-in page: small legal links under the card */
.login-legal { margin: 10px 0 0; text-align: center; font-size: 12px; color: #7f8db0; }
.login-legal a { color: #9fb6ff; text-decoration: none; }
.login-legal a:hover { text-decoration: underline; }

/* connection overview: the same tall cards as the home page */
body.v2.connection-section .grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
body.v2.connection-section .card { min-height: 170px; }
body.v2.connection-section .card em { margin-top: auto; }
.login-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.login-card .login-langs button { display: inline-flex; width: auto; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(150, 172, 255, 0.22); background: transparent; box-shadow: none; color: #9fb0d6; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.login-card .login-langs button.on, .login-card .login-langs button:hover { color: #fff; border-color: #4f8cff; background: rgba(79, 140, 255, 0.18); }
body.v2 #profileCentralPassword input { display: block; width: 100%; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(3, 6, 14, 0.6); color: var(--text); font: inherit; }
body.v2 #profileCentralPassword button { margin-top: 10px; }

/* ---- SYC-AI (All in One) ---------------------------------------------------- */
body.v2.aio-page { overflow: hidden; }
body.v2 .aio-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(79, 140, 255, 0.22), rgba(139, 123, 255, 0.16)); }
body.v2 .aio-mark img { width: 26px; height: 26px; }
body.v2 .aio-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #dfe8ff; background: linear-gradient(135deg, rgba(79, 140, 255, 0.35), rgba(139, 123, 255, 0.35)); border: 1px solid rgba(139, 123, 255, 0.45); vertical-align: 2px; }
body.v2 .aio-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; }
body.v2 .aio-icon-btn:hover { border-color: var(--border-strong); background: var(--accent-soft); }
body.v2 .aio-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.v2 .topbar-right { display: flex; align-items: center; gap: 8px; }
body.v2 .aio-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr) 280px; height: calc(100vh - 65px); height: calc(100dvh - 65px); }
body.v2 .aio-side, body.v2 .aio-usage { padding: 16px; overflow-y: auto; border-inline-end: 1px solid var(--border); background: rgba(8, 13, 28, 0.5); }
body.v2 .aio-usage { border-inline-end: 0; border-inline-start: 1px solid var(--border); }
body.v2 .aio-usage h2 { margin: 2px 0 12px; font-size: 13px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
body.v2 .aio-new { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
body.v2 .aio-plus { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--accent-soft); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.v2 .aio-plus span[aria-hidden] { font-size: 18px; line-height: 1; color: var(--accent); }
body.v2 .aio-plus.gold { border-color: rgba(246, 196, 83, 0.55); background: rgba(246, 196, 83, 0.12); }
body.v2 .aio-plus.gold span[aria-hidden] { color: var(--warn); }
body.v2 .aio-plus:hover { filter: brightness(1.15); }
body.v2 .aio-sessions { display: grid; gap: 6px; }
body.v2 .aio-session { display: flex; align-items: stretch; border-radius: 12px; border: 1px solid transparent; }
body.v2 .aio-session.on, body.v2 .aio-session:hover { border-color: var(--border); background: var(--panel-soft); }
body.v2 .aio-session.on { border-color: var(--border-strong); }
body.v2 .aio-session-open { flex: 1; min-width: 0; padding: 9px 10px; text-align: start; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; }
body.v2 .aio-session-open b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2 .aio-session-open small { display: flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 11.5px; margin-top: 2px; }
body.v2 .aio-session-open small img { width: 13px; height: 13px; }
body.v2 .aio-session-del { width: 30px; border: 0; background: none; color: var(--muted-2); font-size: 18px; cursor: pointer; opacity: 0; }
body.v2 .aio-session:hover .aio-session-del, body.v2 .aio-session.on .aio-session-del { opacity: 1; }
body.v2 .aio-session-del:hover { color: var(--danger); }
body.v2 .aio-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
body.v2 .aio-head { display: flex; align-items: center; gap: 10px; padding: 12px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--border); }
body.v2 .aio-side-toggle { display: none; }
body.v2 .aio-title { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; }
body.v2 .aio-title:hover:not(:disabled), body.v2 .aio-title:focus { border-color: var(--border); background: var(--panel-soft); outline: none; }
body.v2 .aio-device { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); }
body.v2 .aio-device svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.v2 .aio-device select { max-width: 200px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
body.v2 .aio-device select option, body.v2 .aio-dialog select option { background: #0e1629; }
body.v2 .aio-empty { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px clamp(16px, 4vw, 48px); text-align: center; }
body.v2 .aio-empty h1 { margin: 6px 0 0; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.01em; }
body.v2 .aio-empty > p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.8; font-size: 14.5px; }
body.v2 .aio-engines { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
body.v2 .aio-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-soft); font-size: 13px; }
body.v2 .aio-chip img { width: 16px; height: 16px; }
body.v2 .aio-chip small { color: var(--muted); font-size: 12px; }
body.v2 .aio-chip.ok { border-color: rgba(52, 211, 153, 0.4); }
body.v2 .aio-chip.ok small { color: var(--success); }
body.v2 .aio-chip.off small { color: var(--warn); }
body.v2 .aio-chip.soon { opacity: .6; }
body.v2 .aio-link { color: var(--accent); font-size: 13px; }
body.v2 .aio-suggest { width: min(640px, 100%); margin-top: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); text-align: start; }
body.v2 .aio-suggest label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
body.v2 .aio-suggest-row { display: flex; gap: 8px; }
body.v2 .aio-suggest-row input, body.v2 .aio-dialog input:not([type=checkbox]):not([type=radio]), body.v2 .aio-dialog select, body.v2 .aio-dialog textarea { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(5, 9, 20, 0.6); color: var(--text); font: inherit; font-size: 13.5px; }
body.v2 .aio-dialog textarea { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.7; }
body.v2 .aio-suggest-row button, body.v2 .aio-offer button, body.v2 .aio-template-actions button, body.v2 #applySuggest { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--accent-soft); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.v2 .aio-suggest-out { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.7; }
body.v2 .aio-suggest-out p { margin: 0 0 6px; }
body.v2 .aio-thread { flex: 1; overflow-y: auto; padding: 20px clamp(14px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
body.v2 .aio-msg { max-width: min(860px, 100%); padding: 12px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.75; overflow-wrap: anywhere; }
body.v2 .aio-msg.user { align-self: flex-end; background: linear-gradient(135deg, rgba(79, 140, 255, 0.24), rgba(139, 123, 255, 0.18)); border: 1px solid rgba(96, 150, 255, 0.35); }
body.v2 .aio-msg.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); }
body.v2 .aio-msg.bot.engine-claude { border-inline-start: 3px solid #d97757; }
body.v2 .aio-msg.bot.engine-codex { border-inline-start: 3px solid #10a37f; }
body.v2 .aio-msg.system { align-self: center; max-width: 640px; padding: 8px 14px; font-size: 13px; color: var(--muted); background: var(--panel-soft); border: 1px dashed var(--border); text-align: center; }
body.v2 .aio-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
body.v2 .aio-by img { width: 18px; height: 18px; }
body.v2 .aio-by small { color: var(--muted); font-size: 12px; }
body.v2 .aio-by small.why { padding: 1px 8px; border-radius: 999px; background: var(--panel-soft); border: 1px solid var(--border); }
body.v2 .aio-body pre { margin: 8px 0; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); overflow-x: auto; direction: ltr; text-align: left; }
body.v2 .aio-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
body.v2 .aio-body :not(pre) > code { padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
body.v2 .aio-body .md-h { display: block; margin: 6px 0 2px; font-size: 15px; }
body.v2 .aio-body .md-li { display: block; padding-inline-start: 14px; position: relative; }
body.v2 .aio-body .md-li::before { content: "•"; position: absolute; inset-inline-start: 2px; color: var(--accent); }
body.v2 .aio-body a { color: var(--accent); }
body.v2 .aio-tools { margin: 4px 0 8px; font-size: 12.5px; color: var(--muted); }
body.v2 .aio-tools summary { cursor: pointer; }
body.v2 .aio-tools div { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2 .aio-tools code { color: var(--text); opacity: .8; }
body.v2 .aio-quota { margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: rgba(246, 196, 83, 0.1); border: 1px solid rgba(246, 196, 83, 0.35); color: #ffe3a6; }
body.v2 .aio-quota.err { background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.35); color: #ffd0d8; }
body.v2 .aio-tokens { display: block; margin-top: 6px; color: var(--muted-2); font-size: 11.5px; }
body.v2 .aio-offer { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-soft); font-size: 13px; }
body.v2 .aio-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
body.v2 .aio-composer { margin: 0 clamp(10px, 3vw, 28px) 14px; padding: 10px; border-radius: 18px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }
body.v2 .aio-composer textarea { width: 100%; box-sizing: border-box; min-height: 52px; max-height: 40vh; padding: 8px 10px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; }
body.v2 .aio-composer textarea:focus { outline: none; }
body.v2 .aio-engine-pick { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: rgba(5, 9, 20, 0.5); }
body.v2 .aio-engine-pick button, body.v2 .aio-seg button, body.v2 .aio-tabs button { padding: 6px 12px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
body.v2 .aio-engine-pick button.on, body.v2 .aio-seg button.on, body.v2 .aio-tabs button.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
body.v2 .aio-compose-row { display: flex; align-items: center; gap: 10px; }
body.v2 .aio-hint { flex: 1; min-width: 0; color: var(--muted-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2 .aio-send, body.v2 .aio-stop { padding: 10px 20px; border-radius: 12px; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); text-decoration: none; display: inline-block; }
body.v2 .aio-stop { background: rgba(251, 113, 133, 0.18); color: #ffd0d8; border: 1px solid rgba(251, 113, 133, 0.45); }
body.v2 .aio-ghost { width: 100%; margin-top: 4px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
body.v2 .aio-usage-card { padding: 12px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); }
body.v2 .aio-usage-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
body.v2 .aio-usage-card header img { width: 18px; height: 18px; }
body.v2 .aio-usage-card header small { margin-inline-start: auto; color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
body.v2 .aio-meter { margin: 8px 0; font-size: 12px; }
body.v2 .aio-meter span { color: var(--muted); }
body.v2 .aio-meter small { color: var(--muted-2); font-size: 11.5px; }
body.v2 .aio-bar { height: 6px; margin: 4px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
body.v2 .aio-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
body.v2 .aio-limit { margin: 0 0 6px; font-size: 12px; color: var(--warn); }
body.v2 .aio-note { margin: 8px 0 0; color: var(--muted-2); font-size: 12px; line-height: 1.6; }
body.v2 .aio-note.ok { color: var(--success); }
body.v2 .aio-note.err { color: var(--danger); }
body.v2 .aio-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(3, 6, 14, 0.66); backdrop-filter: blur(6px); }
body.v2 .aio-dialog { width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--border); background: var(--panel-solid); box-shadow: var(--shadow); overflow: hidden; }
body.v2 .aio-dialog.wide { width: min(900px, 100%); }
body.v2 .aio-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
body.v2 .aio-dialog > .aio-note { margin: 12px 20px 0; }
body.v2 .aio-close { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
body.v2 .aio-tabs { display: flex; gap: 4px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--border); }
body.v2 .aio-tabs button { white-space: nowrap; }
body.v2 .aio-tab { padding: 16px 20px; overflow-y: auto; display: grid; gap: 12px; }
body.v2 .aio-box { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.025); }
body.v2 .aio-box h3 { margin: 0 0 4px; font-size: 14px; }
body.v2 .aio-box > p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
body.v2 .aio-switch { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-size: 13.5px; line-height: 1.6; cursor: pointer; }
body.v2 .aio-switch input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
body.v2 .aio-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: eng; }
body.v2 .aio-order li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-soft); font-size: 13.5px; counter-increment: eng; }
body.v2 .aio-order li::before { content: counter(eng); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
body.v2 .aio-order li.soon { opacity: .55; }
body.v2 .aio-order li.soon small { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
body.v2 .aio-order img { width: 18px; height: 18px; }
body.v2 .aio-order-btns { margin-inline-start: auto; display: flex; gap: 4px; }
body.v2 .aio-order-btns button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
body.v2 .aio-order-btns button:disabled { opacity: .3; cursor: default; }
body.v2 .aio-routes { display: grid; gap: 8px; margin-top: 8px; }
body.v2 .aio-route { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
body.v2 .aio-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: rgba(5, 9, 20, 0.5); }
body.v2 .aio-perms { display: grid; gap: 8px; }
body.v2 .aio-perms label { display: flex; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-soft); cursor: pointer; }
body.v2 .aio-perms label:has(input:checked) { border-color: var(--border-strong); background: var(--accent-soft); }
body.v2 .aio-perms label.danger:has(input:checked) { border-color: rgba(251, 113, 133, 0.6); background: rgba(251, 113, 133, 0.1); }
body.v2 .aio-perms label.danger b { color: #ffc2cc; }
body.v2 .aio-perms input { margin-top: 3px; accent-color: var(--accent); }
body.v2 .aio-perms b { display: block; font-size: 13.5px; }
body.v2 .aio-perms small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
body.v2 .aio-credit { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
body.v2 .aio-credit a, body.v2 .aio-skill a { color: var(--accent); }
body.v2 .aio-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
body.v2 .aio-skill { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-soft); }
body.v2 .aio-skill.soon { opacity: .72; }
body.v2 .aio-skill-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-weight: 800; color: #dfe8ff; background: linear-gradient(135deg, rgba(79, 140, 255, 0.3), rgba(139, 123, 255, 0.25)); }
body.v2 .aio-skill b { display: block; font-size: 13.5px; }
body.v2 .aio-skill small { display: block; color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 2px; }
body.v2 .aio-skill small.by { color: var(--muted-2); }
body.v2 .aio-skill > button, body.v2 .aio-skill > .aio-soon { grid-column: 2; justify-self: start; }
body.v2 .aio-toggle { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
body.v2 .aio-toggle.on { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.45); color: var(--success); }
body.v2 .aio-soon { font-size: 12px; color: var(--muted-2); }
body.v2 .aio-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
body.v2 .aio-dialog-foot .aio-note { margin: 0; }
body.v2 .aio-template-grid { padding: 16px 20px 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
body.v2 .aio-template { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-soft); }
body.v2 .aio-template:hover { border-color: rgba(246, 196, 83, 0.45); }
body.v2 .aio-template-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--warn); background: rgba(246, 196, 83, 0.12); border: 1px solid rgba(246, 196, 83, 0.3); }
body.v2 .aio-template-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.v2 .aio-template b { font-size: 14px; }
body.v2 .aio-template small { flex: 1; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
body.v2 .aio-template-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
body.v2 .aio-template-actions a { color: var(--muted); font-size: 12.5px; }
@media (max-width: 1100px) {
  body.v2 .aio-shell { grid-template-columns: 250px minmax(0, 1fr); }
  body.v2 .aio-usage { position: fixed; inset-block: 65px 0; inset-inline-end: 0; width: min(320px, 88vw); z-index: 40; transform: translateX(110%); transition: transform .2s ease; background: var(--panel-solid); }
  html[dir="rtl"] body.v2 .aio-usage { transform: translateX(-110%); }
  body.v2.aio-usage-open .aio-usage { transform: none; }
}
@media (max-width: 760px) {
  body.v2 .aio-shell { grid-template-columns: minmax(0, 1fr); }
  body.v2 .aio-side-toggle { display: grid; }
  body.v2 .aio-side { position: fixed; inset-block: 65px 0; inset-inline-start: 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-110%); transition: transform .2s ease; background: var(--panel-solid); }
  html[dir="rtl"] body.v2 .aio-side { transform: translateX(110%); }
  body.v2.aio-side-open .aio-side { transform: none; }
  body.v2 .aio-device select { max-width: 110px; }
  body.v2 .aio-route { grid-template-columns: 1fr 1fr; }
  body.v2 .aio-route span { grid-column: 1 / -1; }
  body.v2 .aio-hint { display: none; }
  body.v2 .topbar .brand > div > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.v2 .aio-side, body.v2 .aio-usage { transition: none; } }

/* ---- professional accounts: the All in One card and the "coming" boxes ----- */
body.v2 .professional-card.aio-card { border-color: rgba(139, 123, 255, 0.5); background: linear-gradient(160deg, rgba(79, 140, 255, 0.16), rgba(139, 123, 255, 0.1) 60%, rgba(255, 255, 255, 0.02)); }
body.v2 .professional-card.aio-card .card-icon { background: linear-gradient(135deg, rgba(79, 140, 255, 0.3), rgba(139, 123, 255, 0.25)); border-color: rgba(139, 123, 255, 0.45); }
body.v2 .professional-card.aio-card .card-icon img { width: 30px; height: 30px; }
body.v2 .professional-card.aio-card > .card b { white-space: normal; }
body.v2 .professional-card.aio-card .aio-tag { font-size: 10.5px; vertical-align: 1px; }
body.v2 .aio-open { text-decoration: none; }
body.v2 .idea-head { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
body.v2 .idea-box { width: 100%; text-align: start; font: inherit; color: var(--text); cursor: pointer; }
body.v2 .idea-box:hover { border-color: var(--border-strong); background: linear-gradient(180deg, rgba(79, 140, 255, 0.08), rgba(255, 255, 255, 0.02)); }
body.v2 .idea-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.v2 .idea-text { display: block; min-width: 0; }
body.v2 .idea-tag { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: var(--muted); border: 1px solid var(--border); background: var(--panel-soft); }
body.v2 .idea-toast { position: fixed; inset-inline: 16px; bottom: 18px; z-index: 70; max-width: 460px; margin-inline: auto; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: var(--shadow); font-size: 13px; line-height: 1.6; }
body.v2 .idea-toast b { display: block; margin-bottom: 2px; }
body.v2 .idea-toast span { color: var(--muted); }
body.v2 .aio-side, body.v2 .aio-sessions, body.v2 .aio-session { min-width: 0; }
body.v2 .aio-side { overflow-x: hidden; }
body.v2 .aio-device select { padding: 2px 0; min-height: 0; height: auto; box-shadow: none; }
body.v2 .aio-head { min-height: 0; }
body.v2 .aio-box code { font-size: 12px; color: var(--text); }
body.v2 .aio-compose-row { justify-content: flex-end; }
body.v2 .aio-open { padding: 7px 14px; border-radius: 10px; background: rgba(52, 211, 153, 0.16); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.35); font-weight: 700; }
body.v2 .aio-body pre + br { display: none; }
body.v2 .second-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); }
body.v2 .second-account span { font-weight: 600; color: var(--text); }
body.v2 .second-account small { font-size: 12px; }
body.v2 .second-account small.ok { color: var(--success); }
body.v2 .second-account button { padding: 5px 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
body.v2 .aio-body p { margin: 0 0 10px; }
body.v2 .aio-body p:last-child { margin-bottom: 0; }
body.v2 .aio-body ul { margin: 0 0 10px; padding-inline-start: 20px; }
body.v2 .aio-body li { margin: 2px 0; }
body.v2 .aio-body li::marker { color: var(--accent); }
body.v2 .aio-body p.md-h { font-weight: 700; font-size: 15px; margin-bottom: 4px; }

/* ---- main page: help link, "needs an upgrade" pages ----------------------- */
body.v2 .help-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); }
body.v2 .help-link:hover { border-color: var(--border-strong); background: var(--accent-soft); }
body.v2 .help-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.v2 .card em.needs-upgrade { color: #ffe3a6; border-color: rgba(246, 196, 83, 0.35); background: rgba(246, 196, 83, 0.1); }
body.v2 .upgrade-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
body.v2 .upgrade-card-box { min-height: 170px; }
body.v2 .upgrade-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(246, 196, 83, 0.3); background: linear-gradient(135deg, rgba(246, 196, 83, 0.09), rgba(79, 140, 255, 0.06)); }
body.v2 .upgrade-cta b { display: block; font-size: 14.5px; }
body.v2 .upgrade-cta small { color: var(--muted); font-size: 13px; }
body.v2 .upgrade-open { padding: 10px 18px; border-radius: 12px; border: 0; font: inherit; font-weight: 700; cursor: pointer; color: #1a1300; background: linear-gradient(135deg, #f6c453, #f1a64a); }

/* ---- guide (/help) ---------------------------------------------------------- */
body.v2 .help-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
body.v2 .help-toc { position: sticky; top: 90px; display: grid; gap: 4px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); }
body.v2 .help-toc a { padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 13.5px; text-decoration: none; }
body.v2 .help-toc a:hover, body.v2 .help-toc a.on { color: var(--text); background: var(--accent-soft); }
body.v2 .help-body { min-width: 0; }
body.v2 .help-section { margin: 0 0 18px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); scroll-margin-top: 90px; }
body.v2 .help-section h2 { margin: 0 0 12px; font-size: 20px; }
body.v2 .help-section p { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
body.v2 .help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
body.v2 .help-steps li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel-soft); }
body.v2 .help-steps b { display: block; margin-bottom: 6px; font-size: 15.5px; }
body.v2 .help-steps img, body.v2 .help-media img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
body.v2 .help-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
body.v2 .help-list { margin: 0 0 10px; padding-inline-start: 20px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
body.v2 .help-list li::marker { color: var(--accent); }
body.v2 .help-section details { border-top: 1px solid var(--border); padding: 10px 0; }
body.v2 .help-section details summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
body.v2 .help-section details p { margin: 8px 0 0; }
body.v2 .help-star { display: flex; gap: 22px; align-items: center; margin: 26px 0 10px; padding: 26px; border-radius: 24px; border: 1px solid rgba(246, 196, 83, 0.4); background: linear-gradient(135deg, rgba(246, 196, 83, 0.13), rgba(139, 123, 255, 0.1)); }
body.v2 .help-star-hand { font-size: 72px; line-height: 1; }
body.v2 .help-star h2 { margin: 0 0 8px; font-size: 21px; }
body.v2 .help-star p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
@media (max-width: 900px) {
  body.v2 .help-layout { grid-template-columns: minmax(0, 1fr); }
  body.v2 .help-toc { position: static; display: flex; flex-wrap: wrap; }
  body.v2 .help-steps li, body.v2 .help-media { grid-template-columns: minmax(0, 1fr); }
  body.v2 .help-star { flex-direction: column; text-align: center; }
}

/* ---- profile: plan time, privacy, balance ----------------------------------- */
body.v2 .plan-time { color: var(--success) !important; font-weight: 600; }
body.v2 .plan-time.soon { color: var(--warn) !important; }
body.v2 .danger-ghost { border-color: rgba(251, 113, 133, 0.45) !important; color: #ffc2cc !important; }
body.v2 .balance-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(79, 140, 255, 0.1), rgba(139, 123, 255, 0.06)); }
body.v2 .balance-card small { display: block; color: var(--muted); font-size: 12px; }
body.v2 .balance-card strong { font-size: 22px; letter-spacing: 0.01em; }
body.v2 .balance-card button { padding: 9px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); font: inherit; font-size: 13px; }
body.v2 .avatar-menu-link { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; }
body.v2 .avatar-menu-link:hover { background: var(--accent-soft); }

/* Sign in with Google / GitHub, under the main button. */
.login-body .login-oauth { margin: 14px 0 0; }
.login-body .login-oauth[hidden] { display: none; }
.login-body .login-oauth-or { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #6f86a6; font-size: 11.5px; }
.login-body .login-oauth-or::before, .login-body .login-oauth-or::after { content: ''; flex: 1; height: 1px; background: rgba(120, 160, 220, 0.2); }
.login-body .login-oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin: 0 0 9px; color: #e6efff; font-size: 13px; font-weight: 700; text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(140, 180, 240, 0.26); border-radius: 14px; transition: border-color 160ms ease, background 160ms ease; }
.login-body .login-oauth-btn[hidden] { display: none; }
.login-body .login-oauth-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(140, 190, 255, 0.55); }
.login-body .login-oauth-btn svg { width: 19px; height: 19px; }
.login-body .login-oauth-note { margin: 12px 0 0; color: #8fa6c6; font-size: 12px; line-height: 1.7; }