/* Qroid redesign (2026-11). One layer over the SPA's base styles.
   Palette comes from the mascot itself: lavender shell, indigo outline,
   cyan eyes; marigold marks paid / Advanced items only.
   Type: Bricolage Grotesque for headings, Atkinson Hyperlegible for reading. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/font-bricolage.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/font-atkinson-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/font-atkinson-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
/* Body face: Atkinson letters with Bricolage digits. Atkinson draws a slashed
   zero, which reads as "Ø" in rupee prices; the digit face is declared last so
   it wins for 0-9 only. */
@font-face { font-family: "Qroid Text"; src: url("/assets/font-atkinson-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Qroid Text"; src: url("/assets/font-atkinson-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Qroid Text"; src: url("/assets/font-bricolage.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Qroid Text"; src: url("/assets/font-bricolage.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }

:root {
  /* Night sky (dark): deep desaturated navy, never black. Research basis:
     blues are the most preferred hue across cultures (Palmer & Schloss 2010,
     PNAS) and the least arousing; pleasantness rises with brightness and
     peaks at MEDIUM saturation (Wilms & Oberfeld 2018). So: sky blues and
     teal at medium saturation, bright light surfaces, one soft amber accent. */
  --paper: #0F1B2D; --surface: #15243A; --raised: #1C2E48;
  --ink: #E6EEF7; --ink-2: #C3D3E6; --muted: #94A9C2;
  --line: #24364F; --line-strong: #36506F;
  --signal: #5FD3DA; --glow: #45DCE4;
  --marigold: #F5C35C; --marigold-ink: #2E2100; --marigold-soft: #3A3020;
  --lav-soft: #1C2E48; --primary: #9CCBF2; --primary-ink: #0F1B2D; --primary-hover: #B9DCF7;
  --sky: #1A2F4C; --frame: #22385A;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-text: "Qroid Text", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* the SPA's own names, mapped onto the new tokens */
  --bg: var(--paper); --panel: var(--surface); --panel-border: var(--line);
  --btn-primary: var(--primary); --btn-primary-hover: var(--primary-hover);
  --me: #24476E; --bot: var(--raised); --txt: var(--ink);
  --accent: var(--signal); --accent-yellow: var(--marigold);
}
[data-theme="light"] {
  /* Clear sky (light): bright, low-saturation blue-white paper, deep blue ink. */
  --paper: #F3F7FB; --surface: #FDFEFF; --raised: #E9F1F8;
  --ink: #14273F; --ink-2: #2F4A68; --muted: #52677F;
  --line: #D6E2EE; --line-strong: #AFC3D8;
  --signal: #0E7C86; --glow: #45DCE4;
  --marigold: #F2B84B; --marigold-ink: #3B2A00; --marigold-soft: #FFF2D6;
  --lav-soft: #E7F0F8; --primary: #1F4F8A; --primary-ink: #FFFFFF; --primary-hover: #183F70;
  --sky: #E1EEF9; --frame: #FFFFFF;
  --bg: var(--paper); --panel: var(--surface); --panel-border: var(--line);
  --btn-primary: var(--primary); --btn-primary-hover: var(--primary-hover);
  --me: var(--primary); --bot: var(--raised); --txt: var(--ink);
  --accent: var(--signal); --accent-yellow: var(--marigold);
}

body { font-family: var(--font-text); font-size: 16px; line-height: 1.55; background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .logo-text, .pricing-title, .price-card h3, .cost, .auth-card h2 {
  font-family: var(--font-display); letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* ---------- header ---------- */
header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
.logo-wrap { gap: 10px; }
.logo-text { font-family: var(--font-display); font-weight: 750; font-size: 1.45rem; letter-spacing: -0.02em;
  color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.logo-text span { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.theme-btn, .user-chip { font-family: var(--font-text); font-size: .9rem; font-weight: 700; color: var(--ink);
  background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: none; }
.theme-btn:hover { background: var(--lav-soft); border-color: var(--ink); }
.user-chip a { color: var(--signal) !important; }

/* ---------- landing: the hero ---------- */
#landing-view .container { max-width: 1120px; }
#landing-view .hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center; gap: clamp(28px, 5vw, 72px); text-align: left; padding: clamp(32px, 6vw, 84px) 0 clamp(28px, 4vw, 56px); }
.hero-copy { max-width: 36rem; }
#landing-view .hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.02; font-weight: 760;
  letter-spacing: -0.035em; margin: 0 0 22px; color: var(--ink); text-wrap: balance; }
#landing-view .hero h1 span { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
#landing-view .hero p { font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 32em; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.hero-cta { font-family: var(--font-display); font-size: 1.08rem; font-weight: 650; color: var(--primary-ink);
  background: var(--primary); border: 0; border-radius: 999px; padding: 15px 26px; cursor: pointer; }
.hero-cta:hover { background: var(--primary-hover); }
#landing-view .know-qroid-btn { color: var(--ink-2); font-weight: 700; font-size: .98rem; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
#landing-view .know-qroid-btn:hover { text-decoration-color: var(--ink); }
#landing-view .hero .hero-note { font-size: .9rem; margin-top: 18px; color: var(--muted); }

/* The one bold element: Qroid waving from an aircraft window. */
#landing-view .robot-box { position: relative; justify-self: center; width: min(100%, 330px); max-width: 330px;
  margin: 0; padding: 0; border: 0; background: none !important; box-shadow: none !important; overflow: visible; }
#landing-view #landing-robot-container { position: relative; width: 100%; aspect-ratio: 33 / 41;
  border-radius: 46% / 37%; background: var(--sky); border: 14px solid var(--frame);
  box-shadow: 0 0 0 1px var(--line-strong), inset 0 0 0 1px var(--line); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; padding: 16% 8% 5%; }
#landing-view .robot-bubble { position: absolute; z-index: 2; left: -18%; top: 4%; max-width: 64%;
  text-align: left; font-size: .9rem; line-height: 1.4; }
#landing-view #landing-robot-container .mascot-host, #landing-view #landing-robot-container .qroid-stage { width: 100%; height: 100%; }

/* ---------- mascot (the original Qroid, SVG) ---------- */
.qroid-stage { display: block; width: 100%; height: 100%; }
.mascot-host .qroid-stage { animation: none !important; transform: none !important; }
.qroid-stage::after { display: none !important; }
.qroid-mascot.q2 { display: block; width: 100%; height: 100%; overflow: visible; }
.q2 .q2-arm  { transform-box: view-box; transform-origin: 38px 93px; }
.q2 .q2-head { transform-box: view-box; transform-origin: 70px 82px; }
.q2 .q2-body { transform-box: view-box; transform-origin: 70px 134px; }
.q2 .q2-glow { transform-box: fill-box; transform-origin: center; }
.q2 .q2-lid  { transform-box: fill-box; transform-origin: center; transition: transform .09s ease-in-out; }
.mascot-host.is-blinking .q2-lid, .mascot-host.is-winking .q2-lid-l { transform: scaleY(.12); }
.mascot-waving      .q2-arm  { animation: q2-wave .62s ease-in-out 6 alternate; }
.mascot-nodding     .q2-head { animation: q2-nod .9s ease-in-out infinite alternate; }
.mascot-celebrating .q2-arm  { animation: q2-wave .3s ease-in-out 8 alternate; }
.mascot-celebrating .q2-body { animation: q2-hop .6s ease-out 4; }
.mascot-smiling     .q2-glow { animation: q2-glow .75s ease-in-out 2 alternate; }
.mascot-jumping     .q2-body { animation: q2-hop 1.1s cubic-bezier(.3,.7,.4,1) 1; }
.mascot-dancing     .q2-body { animation: q2-sway 1.4s ease-in-out infinite alternate; }
.mascot-dancing     .q2-arm  { animation: q2-wave 1.4s ease-in-out infinite alternate; }
.mascot-clapping    .q2-body { animation: q2-hop .43s ease-out 4; }
@keyframes q2-wave { from { transform: rotate(0deg); } to { transform: rotate(-26deg); } }
@keyframes q2-nod  { to { transform: translateY(2.5px) rotate(2deg); } }
@keyframes q2-hop  { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes q2-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes q2-glow { to { transform: scale(1.3); } }

/* ---------- landing: lower sections ---------- */
.ad-panel { background: none !important; border: 0; border-left: 4px solid var(--marigold); border-radius: 0;
  box-shadow: none; padding: 6px 0 6px 24px; margin: 8px 0 56px; text-align: left; }
.ad-panel::before { display: none; }
.ad-panel .ad-text { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.65rem) !important; font-weight: 600;
  line-height: 1.35 !important; color: var(--ink); max-width: 40em; }
.ad-panel h3 { font-family: var(--font-display); }
.pricing-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 720; text-align: left; margin-bottom: 24px; color: var(--ink); }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: none;
  padding: 28px 26px; display: flex; flex-direction: column; transform: none; }
.price-card:hover { transform: none; box-shadow: none; }
.price-card.popular { border: 2px solid var(--ink); }
.price-card.price-card-advanced { border: 2px solid var(--marigold); }
.price-card .badge { position: static; transform: none; align-self: flex-start; order: -1; margin: 0 0 14px;
  font-family: var(--font-text); font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  padding: 5px 12px; border-radius: 999px; background: var(--lav-soft); color: var(--ink-2); box-shadow: none; }
.price-card.popular .badge { background: var(--primary); color: var(--primary-ink); }
.price-card .badge-advanced { background: var(--marigold); color: var(--marigold-ink); }
.price-card .badge-free { background: #DDF2E8; color: #0E5136; }
[data-theme="dark"] .price-card .badge-free, :root:not([data-theme="light"]) .price-card .badge-free { background: #183D30; color: #BDF0D8; }
.price-card h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.price-card .cost { font-size: 2.4rem; font-weight: 760; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.price-card ul li::before { color: var(--signal); }
.early-bird { display: inline-block; font-family: var(--font-text); font-size: .78rem; font-weight: 700; letter-spacing: 0;
  color: var(--marigold-ink); background: var(--marigold-soft); padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
:root:not([data-theme="light"]) .early-bird { color: var(--marigold); }
.price-btn { font-family: var(--font-display); font-weight: 650; font-size: 1rem; border-radius: 999px; border: 0;
  background: var(--primary); color: var(--primary-ink); box-shadow: none; margin-top: auto; }
.price-btn:hover { background: var(--primary-hover); transform: none; box-shadow: none; }
.price-btn.price-btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.price-btn.price-btn-quiet:hover { background: var(--lav-soft); }
.price-btn.price-btn-advanced { background: var(--marigold); color: var(--marigold-ink); }
.price-btn.price-btn-advanced:hover { background: #F7C96E; }
.coupon-box { background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 14px; }
.coupon-info h4 { text-transform: none; letter-spacing: 0; }
.coupon-badge { background: var(--lav-soft); color: var(--ink); border: 1px solid var(--line-strong); }
.pro-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.pro-card:hover { transform: none; box-shadow: none; }
.pro-icon { background: var(--lav-soft); border-radius: 12px; }
.pro-card h3 { font-family: var(--font-display); font-weight: 700; }
.ad-title, .core-ad .ad-kicker { text-transform: none; letter-spacing: 0; background: none;
  -webkit-text-fill-color: currentColor; color: var(--ink-2); font-size: .9rem; }
.download-btn { background: var(--primary); color: var(--primary-ink); border-radius: 14px; }
.download-btn span { text-transform: none !important; }

/* ---------- app: sidebar ---------- */
.sidebar { background: var(--paper); border-right: 1px solid var(--line); }
.sidebar .sidebar-act, .sidebar button.sidebar-act { font-family: var(--font-text); font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: none; }
.sidebar .sidebar-act:hover { border-color: var(--ink); background: var(--lav-soft); }
.prev-chats h4 { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: .95rem;
  font-weight: 700; color: var(--ink-2); }
.user-badge { background: var(--lav-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  font-weight: 700; box-shadow: none; }
#app-view[data-guide="advanced"] #client-info { background: var(--marigold); color: var(--marigold-ink);
  border: 0; box-shadow: none; }
.robot-box, [data-theme="light"] .robot-box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: none; }
.robot-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 14px; font-size: .85rem; font-weight: 700; box-shadow: none; }
.robot-bubble::after { border-color: var(--line-strong) transparent; }

/* ---------- app: chat ---------- */
.chat-pane, #chat { background: var(--paper); }
#app-view[data-guide="advanced"] .chat-pane { background: var(--paper); box-shadow: none; border-color: var(--line); }
.msg { border-radius: 18px; font-size: 1rem; line-height: 1.62; }
.msg.bot { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 6px; }
.msg.me { background: var(--me); color: #FFFFFF; border: 0; box-shadow: none; border-bottom-right-radius: 6px; }
.msg.me a { color: #CFEFFF; }
.msg.bot h2, .msg.bot h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.msg.bot strong, [data-theme="light"] .msg.bot strong { color: var(--ink); }
.msg.bot a { color: var(--signal); }
.msg.bot ol li::marker { color: var(--muted); }
.msg blockquote { border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.md-table th { background: var(--lav-soft); }
#app-view[data-guide="advanced"] .msg.bot.report { border: 1px solid var(--line-strong); }
.mcq-wrap { gap: 10px; }
.mcq-btn, #app-view[data-guide="advanced"] .mcq-btn { font-family: var(--font-text); font-size: .95rem; font-weight: 700;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 10px 18px; box-shadow: none; }
.mcq-btn:hover:not(:disabled), #app-view[data-guide="advanced"] .mcq-btn:hover:not(:disabled) {
  background: var(--lav-soft); color: var(--ink); border-color: var(--ink); transform: none; box-shadow: none; }
.mcq-btn.picked { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.mcq-btn:disabled { opacity: .5; }
.chat-footer { background: var(--surface); border-top: 1px solid var(--line); box-shadow: none; }
input[type=text], textarea#text { font-family: var(--font-text); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: 14px; }
input[type=text]:focus, textarea#text:focus { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); outline: 0; }
.send-btn, .analyze-btn, #app-view[data-guide="advanced"] .send-btn, #app-view[data-guide="advanced"] .analyze-btn {
  font-family: var(--font-display); font-weight: 650; background: var(--primary); color: var(--primary-ink); border: 0;
  border-radius: 14px; box-shadow: none; }
.send-btn:hover, .analyze-btn:hover { background: var(--primary-hover); }
#app-view[data-guide="advanced"] .send-btn:not(.stopping) { background: var(--marigold); color: var(--marigold-ink); }
.send-btn.stopping, #app-view[data-guide="advanced"] .send-btn.stopping { background: transparent; color: var(--muted);
  border: 1.5px solid var(--line-strong); }
.btn { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 14px; }
.btn:hover { border-color: var(--ink); }
.status-badge { font-family: var(--font-text); background: var(--marigold-soft); color: var(--marigold-ink); }
:root:not([data-theme="light"]) .status-badge { color: var(--marigold); }

/* ---------- sign-in ---------- */
.auth-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgb(8 20 36 / .24); }
.auth-card .sub { color: var(--muted); }
.auth-field { font-family: var(--font-text); background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 12px; }
.auth-field:focus { border-color: var(--signal); outline: 0; }
.auth-submit { font-family: var(--font-display); font-weight: 650; background: var(--primary); color: var(--primary-ink); border-radius: 999px; box-shadow: none; }
.auth-submit:hover { background: var(--primary-hover); }
.seg.active { background: var(--primary); color: var(--primary-ink); }

/* ---------- language lab + final tests ---------- */
dialog.ql-dialog { width: min(780px, calc(100vw - 24px)); max-height: 88vh; overflow: auto; padding: 0;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 80px rgb(8 20 36 / .30); font-family: var(--font-text); }
dialog.ql-dialog::backdrop { background: rgb(10 22 38 / .55); }
.ql-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ql-head h2 { margin: 0; font-size: 1.3rem; font-weight: 720; }
.ql-body { padding: 18px 24px 28px; }
.ql-body h3 { font-size: 1.15rem; font-weight: 700; margin: 22px 0 10px; }
.ql-body h4 { font-family: var(--font-display); font-size: 1rem; margin: 18px 0 8px; }
.ql-body p { line-height: 1.6; margin: 8px 0; }
.ql-body [role=status], .ql-notice { color: var(--muted); font-size: .9rem; }
.ql-dialog button { font-family: var(--font-text); font-size: .95rem; font-weight: 700; min-height: 44px; padding: 10px 18px;
  color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; margin: 6px 8px 6px 0; }
.ql-dialog button:hover:not(:disabled) { border-color: var(--ink); background: var(--lav-soft); }
.ql-dialog button.ql-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.ql-dialog button.ql-primary:hover:not(:disabled) { background: var(--primary-hover); }
.ql-dialog button:disabled { opacity: .55; cursor: wait; }
.ql-dialog input, .ql-dialog textarea, .ql-dialog select { box-sizing: border-box; width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; margin: 4px 0 12px; }
.ql-dialog textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
.ql-dialog input:focus, .ql-dialog textarea:focus, .ql-dialog select:focus { border-color: var(--signal); outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.ql-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 4px 0 18px; counter-reset: ql; }
.ql-steps li { counter-increment: ql; font-size: .85rem; font-weight: 700; color: var(--muted); padding: 10px 12px 10px 12px;
  border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.ql-steps li::before { content: counter(ql) "  "; font-family: var(--font-display); }
.ql-steps li.is-done { color: var(--ink-2); }
.ql-steps li.is-done::before { content: "✓  "; }
.ql-steps li.is-now { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.ql-question { padding: 14px 16px; margin: 10px 0; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.ql-question p { margin: 0 0 4px; }
.ql-question input, .ql-question textarea { margin-bottom: 0; }
.ql-task { padding: 16px 18px; border-radius: 14px; background: var(--lav-soft); border-left: 4px solid var(--signal); }
.ql-text { padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line);
  font-size: 1.05rem; line-height: 1.75; max-width: 70ch; }
.ql-score { font-family: var(--font-display); font-size: 1.6rem; font-weight: 750; margin: 6px 0; }
.ql-feedback details, .ql-dialog details { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; }
.ql-dialog summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.ql-crit { display: grid; grid-template-columns: minmax(8em, max-content) 1fr; gap: 4px 14px; margin: 8px 0; }
.ql-crit b { font-variant-numeric: tabular-nums; }
.ql-mistake { padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.ql-mistake s { color: #B4233A; text-decoration-thickness: 1.5px; }
.ql-mistake ins { color: #0E7A4E; text-decoration: none; font-weight: 700; }
:root:not([data-theme="light"]) .ql-mistake s { color: #FF8FA0; }
:root:not([data-theme="light"]) .ql-mistake ins { color: #7CE8B5; }
.ql-mistake small { display: block; color: var(--muted); margin-top: 3px; }
.ql-result-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.ql-result-row.ok::before { content: "✓ "; color: #0E7A4E; font-weight: 700; }
.ql-result-row.no::before { content: "✗ "; color: #B4233A; font-weight: 700; }
.ql-dialog pre { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  #landing-view .hero { grid-template-columns: minmax(0, 1fr); text-align: left; }
  #landing-view .robot-box { width: min(78%, 300px); }
  #landing-view .robot-bubble { left: -8%; }
  .ql-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-head, .ql-body { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .q2 *, .mascot-host * { animation: none !important; transition: none !important; }
}

/* Mascot outline per theme: on dark plates the indigo line would vanish. */
:root { --q2-line: #8FB0D3; --q2-pod: #2E4A6E; }
[data-theme="light"] { --q2-line: #1F3354; --q2-pod: #1F3354; }
.q2 .q2-o, .logo-mark .q2-o { stroke: var(--q2-line); }
.q2 .q2-of, .logo-mark .q2-of { fill: var(--q2-pod); }

/* Leftovers from the old skin */
.msg.bot h2 { background: none; border-radius: 0; padding: 0 0 0 12px; border-left: 4px solid var(--marigold);
  color: var(--ink); font-size: 1.2rem; }
.msg.bot h3 { border-left: 0; padding-left: 0; font-size: 1.05rem; }
.msg.bot, .msg.bot.report { box-shadow: none; }
#app-view[data-guide="advanced"] .user-badge::before { text-transform: none; letter-spacing: 0; }
.app-download { justify-content: flex-start; }

/* Workspace panel (qroid-workspace.css) */
.qw-preview, .qw-comparison, .qw-dialog { background: var(--surface); border-color: var(--line); }
.qw-preview h2, .qw-dialog h2, .qw-plan h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
.qw-eyebrow, [data-theme="light"] .qw-eyebrow { color: var(--muted); letter-spacing: 0; font-size: .9rem; }
.qw-button { border-radius: 999px; border-color: var(--line-strong); }
.qw-button:hover { border-color: var(--ink); }
.qw-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.qw-next { border-left-color: var(--marigold); }

/* Sign-in: the watermarked stock city photo is retired; Qroid flies in over
   the same sky as the landing window, with the paper planes kept. */
html #login-view { background: var(--sky) !important; }
#login-view .sky-haze, #login-view .cyber-cars { display: none; }
#login-view .login-robot { filter: drop-shadow(0 14px 18px rgb(20 39 63 / .16)); }
#login-view .login-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: none; font-family: var(--font-text); }
#login-view .auth-close { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
#login-view .auth-card { background: var(--surface); backdrop-filter: none; }
#login-view .auth-card h2, #login-view .auth-card h2 * { color: var(--ink) !important; -webkit-text-fill-color: currentColor; background: none; }
#login-view .seg-toggle { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
#login-view .seg { background: transparent; color: var(--ink-2); border: 0; border-radius: 999px; box-shadow: none; }
#login-view .seg.active { background: var(--primary); color: var(--primary-ink); }
#login-view .provider-btn { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong);
  border-radius: 999px; box-shadow: none; }
#login-view .provider-btn:hover { border-color: var(--ink); background: var(--lav-soft); }
#login-view .auth-divider { color: var(--muted); }
#login-view .auth-divider::before, #login-view .auth-divider::after { background: var(--line); }
#login-view .terms-row a, #login-view .auth-card a { color: var(--signal); }