:root {
  --bg: #f6f7f9; --card: #ffffff; --ink: #14181f; --muted: #667085; --line: #e3e7ee;
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #e6f4f2;
  --star: #f59e0b; --star-soft: #fff4dc; --danger: #b42318; --danger-soft: #fee4e2;
  --ai: #5b5bd6; --ai-soft: #ecebff; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216; --card: #171b21; --ink: #e8ecf1; --muted: #98a2b3; --line: #262c35;
    --accent: #2dd4bf; --accent-ink: #06201c; --accent-soft: #10302c;
    --star: #fbbf24; --star-soft: #3a2d0f; --danger: #f97066; --danger-soft: #3b1512;
    --ai: #a5a3ff; --ai-soft: #262356; --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .25rem; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h1 .spark { width: .9em; height: .9em; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: .25rem 0; }
.muted { color: var(--muted); }
small, .small { font-size: .85rem; }
[hidden] { display: none !important; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; }
.spark { width: 1em; height: 1em; fill: var(--star); vertical-align: -0.12em; }
.logo { color: var(--star); }
.top-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.pill b { color: var(--ink); }

.app { max-width: 1100px; margin: 0 auto; padding: 1.25rem 16px 4rem; }
.loading { padding: 3rem; text-align: center; color: var(--muted); }
.splash { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; animation: fade .4s ease; }
.splash-logo { width: 72px; height: 72px; fill: var(--star); animation: pulse 1.1s ease-in-out infinite alternate; }
.splash-title { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.splash-sub { color: var(--muted); font-size: .95rem; }
.splash-sub::after { content: ""; display: block; width: 28px; height: 28px; margin: .9rem auto 0; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes pulse { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: 9px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-weight: 600; transition: transform .05s ease, background .15s; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--card) 90%, var(--ink) 10%); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.05); background: var(--accent); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--card) 70%, var(--ink) 8%); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: .3rem .6rem; font-size: .85rem; }
.btn.apple { background: #000; color: #fff; border-color: #000; width: 100%; padding: .6rem; }
@media (prefers-color-scheme: dark) { .btn.apple { background: #fff; color: #000; border-color: #fff; } }
.btn.apple svg { width: 16px; height: 16px; fill: currentColor; }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--muted); }
input[type=text], input[type=email], input[type=password], textarea, select { width: 100%; padding: .55rem .7rem; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
textarea { resize: vertical; min-height: 72px; }
.hint { font-size: .8rem; color: var(--muted); }
.error { color: var(--danger); font-size: .9rem; }

/* auth */
.auth { max-width: 420px; margin: 3rem auto; }
.auth h1 { text-align: center; margin-bottom: .25rem; }
.auth .sub { text-align: center; color: var(--muted); margin-bottom: 1.25rem; }
.auth-google { display: flex; justify-content: center; margin: 1.75rem 0 .9rem; min-height: 44px; }
.auth-google .gbtn { width: 100%; max-width: 320px; display: flex; justify-content: center; }
.auth-note { text-align: center; margin: 0 0 1.5rem; }
.auth .legal { text-align: center; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.tabs { display: flex; gap: .25rem; background: var(--bg); padding: .25rem; border-radius: 10px; margin-bottom: 1rem; }
.tabs button { flex: 1; border: 0; background: transparent; padding: .45rem; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs button.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; margin: 1rem 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* projects */
.project-card { display: block; color: inherit; cursor: pointer; transition: border-color .15s, transform .1s; }
.project-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.project-card h3 { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.project-card .brief { color: var(--muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.project-card .stats { margin-top: .6rem; display: flex; gap: .9rem; font-size: .85rem; color: var(--muted); }
.role { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.role.member { background: var(--ai-soft); color: var(--ai); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.role.requests { background: var(--star-soft); color: var(--star); }
.project-card.archived { opacity: .7; }
.archived-block summary { cursor: pointer; }
.sii { width: 16px; height: 16px; vertical-align: -3px; margin-right: .15rem; }
.me-photo-wrap { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; margin-right: .35rem; }
.me-photo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.7); background: var(--card); }
.me-photo-fallback { display: none; }
.me-photo-wrap.broken .me-photo { display: none; }
.me-photo-wrap.broken .me-photo-fallback { display: inline; }
.account-btn { display: inline-flex; align-items: center; }
html[data-theme="xp"] button.wb, html[data-theme="xp"] a.wb { padding: 0; cursor: pointer; display: inline-block; }
html[data-theme="xp"] a.wb:hover { filter: brightness(1.12); }
html[data-theme="xp"] button.wb.close:hover { filter: brightness(1.12); }
html[data-theme="xp"] button.wb.close:active { filter: brightness(.9); }
.xp-q { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 20px "Trebuchet MS", Tahoma, sans-serif; color: #fff; background: radial-gradient(circle at 35% 30%, #7FB2FF, #1F5FD6 70%); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.role.invited { background: var(--bg); color: var(--muted); border: 1px dashed var(--line); text-transform: none; letter-spacing: 0; font-weight: 600; }
.credits { margin-bottom: 1rem; }
.credits-num { font-size: 1.1rem; white-space: nowrap; }
.credits-num b { font-size: 1.5rem; color: var(--ai); }
.inbox { margin-bottom: 1rem; border-color: color-mix(in srgb, var(--star) 45%, var(--line)); }
.inbox-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.inbox-row .who { flex: 1; min-width: 200px; }
.inbox-row select { width: auto; max-width: 220px; }
.request-access { margin-top: 1.25rem; }
.member-row.requested { background: color-mix(in srgb, var(--card) 85%, var(--star-soft)); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 8px; }

/* project page */
.proj-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.proj-head .brief { color: var(--muted); max-width: 70ch; white-space: pre-wrap; }
.members { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); border: 2px solid var(--card); }
.avatar.pending { background: var(--bg); color: var(--muted); border-style: dashed; border-color: var(--line); }
.panel { display: grid; gap: .8rem; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 760px) { .panel { grid-template-columns: 1fr; } }
.gen .row input { flex: 1; min-width: 180px; }
.quota { height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); margin-top: .5rem; }
.quota > div { height: 100%; background: var(--ai); transition: width .3s; }
.quota.full > div { background: var(--danger); }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1.1rem 0 .7rem; }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.chip { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: .85rem; color: var(--muted); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.toolbar .search { flex: 1; min-width: 160px; }
.toolbar select { width: auto; }

.name { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem .9rem .7rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .35rem; transition: border-color .15s; animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.name.starred { border-color: color-mix(in srgb, var(--star) 60%, var(--line)); background: color-mix(in srgb, var(--card) 85%, var(--star-soft)); }
.name .text { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; padding-right: 3.2rem; word-break: break-word; }
.name .meaning { font-size: .82rem; color: var(--muted); margin-top: -.1rem; line-height: 1.3; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.seg button { border: 0; background: transparent; padding: .25rem .6rem; border-radius: 7px; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--muted); }
.seg button.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.name .meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.badge { font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.badge.ai { background: var(--ai-soft); color: var(--ai); border-color: transparent; }
.badge.manual { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.import { background: #e6f4ea; color: #137333; border-color: transparent; }
@media (prefers-color-scheme: dark) { .badge.import { background: #10301c; color: #6fcf97; } }
.prov { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.prov .spark { width: .85em; height: .85em; vertical-align: -0.1em; }
.sc-meta .prov { font-size: .75rem; width: 100%; text-align: center; }
.star { position: absolute; top: .55rem; right: .55rem; border: 0; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--line); display: inline-flex; align-items: center; gap: .15rem; padding: .25rem .35rem; border-radius: 8px; }
.star:hover { color: var(--star); background: var(--star-soft); }
.star.on { color: var(--star); }
.star .count { font-size: .8rem; font-weight: 700; color: var(--muted); }
.star.on .count { color: var(--star); }
.starred-by { font-size: .75rem; color: var(--star); }
.del { position: absolute; bottom: .4rem; right: .5rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; font-size: 1rem; padding: .1rem .35rem; border-radius: 6px; }
.name:hover .del, .name:focus-within .del { opacity: .7; }
.del:hover { opacity: 1 !important; color: var(--danger); background: var(--danger-soft); }
.skeleton { height: 86px; border-radius: var(--radius); background: linear-gradient(90deg, var(--card), color-mix(in srgb, var(--card) 70%, var(--line)), var(--card)); background-size: 200% 100%; animation: sh 1.2s infinite; border: 1px solid var(--line); }
@keyframes sh { to { background-position: -200% 0; } }

/* members list */
.member-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.member-row:last-child { border-bottom: 0; }
.member-row .who { flex: 1; min-width: 0; }
.member-row .who div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* modal + toast */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.modal .card { width: min(480px, 100%); max-height: 90vh; overflow: auto; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 30; max-width: 90vw; font-size: .9rem; }
.toast.error { background: var(--danger); color: #fff; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Google button container + phones ---- */
.gbtn { display: flex; justify-content: center; min-height: 44px; margin-bottom: .6rem; }
.gbtn > div { width: 100% !important; }
.desktop-only { display: inline; }
.top { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.app { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
@media (display-mode: standalone) { .top { padding-top: calc(.7rem + env(safe-area-inset-top)); } }
@media (hover: none) {
  .del { opacity: .55; }
  .star { padding: .4rem .5rem; }
}
@media (max-width: 640px) {
  .desktop-only { display: none; }
  html { -webkit-text-size-adjust: 100%; }
  input[type=text], input[type=email], input[type=password], textarea, select { font-size: 16px; } /* no iOS zoom on focus */
  .app { padding-top: .9rem; }
  h1 { font-size: 1.35rem; }
  .auth { margin: 1.25rem auto; }
  .proj-head > .stack { align-items: stretch; width: 100%; }
  .proj-head .members { justify-content: flex-start; }
  .proj-head .row .btn { flex: 1; }
  .gen .row { flex-direction: column; align-items: stretch; }
  .gen .row .btn { width: 100%; }
  .toolbar { gap: .5rem; }
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; width: 100%; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; }
  .toolbar .search { min-width: 0; flex: 1 1 60%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .project-card { grid-column: 1 / -1; }
  .name { padding: .75rem .7rem .6rem; }
  .name .text { font-size: 1rem; padding-right: 2.6rem; }
  .name .meaning { font-size: .76rem; }
  .name .meta { font-size: .72rem; gap: .35rem; }
  .modal { align-items: flex-end; padding: 0; }
  .modal .card { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); animation: sheet .25s ease; }
  @keyframes sheet { from { transform: translateY(24px); opacity: .6; } }
  .toast { bottom: calc(1rem + env(safe-area-inset-bottom)); width: calc(100% - 32px); text-align: center; }
}
@media (max-width: 360px) { .grid { grid-template-columns: 1fr; } }

/* ---- swipe deck ---- */
.view-seg button { padding: .35rem .8rem; font-size: .9rem; }
.quick .chip { font-size: .8rem; padding: .25rem .6rem; }
.quick .chip:disabled { opacity: .5; cursor: not-allowed; }
.deck { position: relative; height: min(420px, 58vh); max-width: 440px; margin: .5rem auto 0; perspective: 1000px; }
.swipe-card { position: absolute; inset: 0; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(16,24,40,.14); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
@media (prefers-color-scheme: dark) { .swipe-card { box-shadow: 0 12px 34px rgba(0,0,0,.5); } }
.swipe-card.dragging { cursor: grabbing; }
.swipe-card.depth1 { transform: translateY(12px) scale(.965); opacity: .9; }
.swipe-card.depth2 { transform: translateY(24px) scale(.93); opacity: .7; }
.sc-text { font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; word-break: break-word; }
.sc-meaning { margin-top: .6rem; color: var(--muted); font-size: 1rem; max-width: 30ch; }
.sc-suffix { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; font-size: .9rem; color: var(--ink); padding: .3rem .4rem .3rem .7rem; border: 1px dashed var(--line); border-radius: 8px; }
.sc-suffix span { white-space: nowrap; }
.sc-suffix span + span::before { content: "·"; color: var(--muted); margin-right: .5rem; }
.sc-suffix-hide { border: 0; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 .25rem; cursor: pointer; border-radius: 4px; }
.sc-suffix-hide:hover { color: var(--danger); background: var(--danger-soft); }
html[data-theme="xp"] .sc-suffix { border: 1px solid #ACA899; border-radius: 2px; background: #F7F5EC; font-family: Tahoma, sans-serif; }
html[data-theme="xp"] .sc-suffix-hide { border-radius: 2px; }
.sc-meta { position: absolute; bottom: 1.1rem; left: 1.1rem; right: 1.1rem; display: flex; justify-content: center; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.stamp { position: absolute; top: 1.2rem; padding: .25rem .7rem; border: 3px solid; border-radius: 8px; font-weight: 900; letter-spacing: .12em; font-size: 1.1rem; opacity: 0; pointer-events: none; }
.stamp.star { right: 1.2rem; color: var(--star); border-color: var(--star); transform: rotate(12deg); }
.stamp.pass { left: 1.2rem; color: var(--danger); border-color: var(--danger); transform: rotate(-12deg); }
.deck-modes { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin-bottom: .6rem; }
.deck-modes .chip.danger { color: var(--danger); }
.deck-modes .chip:disabled { opacity: .5; cursor: not-allowed; }
.elsewhere.private { opacity: .85; }
.pill.clickable { cursor: pointer; }
.deck-actions { display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin-top: 1.1rem; }
.sheet-import { border-top: 1px solid var(--line); padding-top: .8rem; }
.import-opts label { display: inline-flex; align-items: center; gap: .35rem; }
.drive-error { border: 0; padding: 1.2rem 1rem; }
.drive-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.drive-row { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; }
.drive-row:last-child { border-bottom: 0; }
.drive-row:hover { background: color-mix(in srgb, var(--card) 80%, var(--accent-soft)); }
.drive-row.sel { background: var(--accent-soft); }
.drive-row .drive-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-opts select, .import-opts input { padding: .25rem .4rem; font-size: .85rem; width: auto; }
.gs-icon { display: inline-block; width: 16px; height: 20px; border-radius: 3px; background: #0f9d58; position: relative; }
.gs-icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 8px; border: 1.5px solid #fff; border-radius: 1px; background: repeating-linear-gradient(to bottom, transparent 0 2px, #fff 2px 3.5px); }
.btn.topup { background: var(--ai); }
.btn.topup:hover { background: var(--ai); filter: brightness(1.08); }
.round { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); font-size: 1.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s; }
.round:active { transform: scale(.92); }
.round.pass { color: var(--danger); }
.round.like { color: var(--star); font-size: 1.7rem; }
.round.double { color: var(--ai); font-size: 1.05rem; letter-spacing: -.05em; width: 52px; height: 52px; border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); }
.stamp.double { top: auto; bottom: 3.2rem; left: 50%; right: auto; transform: translateX(-50%) rotate(-6deg); color: var(--ai); border-color: var(--ai); }
.dbl { position: absolute; top: 2.3rem; right: .6rem; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .68rem; font-weight: 800; padding: .05rem .35rem; border-radius: 6px; cursor: pointer; opacity: 0; }
.name:hover .dbl, .name.starred:focus-within .dbl, .dbl.on { opacity: 1; }
.dbl.on { background: var(--ai); color: #fff; border-color: transparent; }
.name.double { border-color: color-mix(in srgb, var(--ai) 60%, var(--star)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ai) 25%, transparent), var(--shadow); }
.dbl-by { color: var(--ai); }
@media (hover: none) { .name.starred .dbl { opacity: 1; } }
.round.undo { width: 46px; height: 46px; font-size: 1.1rem; color: var(--muted); }
.round:disabled { opacity: .4; cursor: not-allowed; }
.deck-empty { max-width: 440px; margin: .5rem auto; text-align: center; padding: 2rem 1.25rem; }
.deck-empty .big { font-size: 2.4rem; }
.name.passed { opacity: .55; }
.name.clickable { cursor: pointer; }
.name.clickable:hover { border-color: var(--accent); }
.badge.notes { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.final { background: var(--star); color: #1a1200; border-color: transparent; }
.agreed { text-align: center; padding: .6rem 0 .2rem; }
.agreed-name { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .2rem; }
.agreed p { margin: .8rem 0 0; }
html[data-theme="xp"] .agreed-name { font-family: "Trebuchet MS", Tahoma, sans-serif; color: #0A246A; }
.chip.final { border-color: var(--star); color: var(--star); font-weight: 700; }
.detail-sec { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .8rem; }
.detail-sec h3 { font-size: .95rem; margin-bottom: .4rem; }
.stances { display: flex; flex-wrap: wrap; gap: .4rem; }
.stance { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .25rem; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; }
.stance .avatar { width: 22px; height: 22px; font-size: .6rem; }
.stance .sym { font-weight: 800; }
.stance.liked { border-color: color-mix(in srgb, var(--star) 60%, var(--line)); background: var(--star-soft); }
.stance.liked .sym { color: var(--star); }
.stance.double { border-color: var(--ai); background: var(--ai-soft); }
.stance.double .sym { color: var(--ai); }
.stance.passed { opacity: .7; }
.stance.passed .sym { color: var(--danger); }
.stance.none .sym { color: var(--muted); }
.overlap-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: .5rem; background: var(--bg); border: 1px solid var(--line); }
.ob.liked { background: var(--star); } .ob.passed { background: var(--danger); opacity: .6; } .ob.none { background: transparent; }
.notes { display: flex; flex-direction: column; gap: .5rem; max-height: 40vh; overflow: auto; }
.note { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; }
.note-head { display: flex; align-items: center; gap: .5rem; }
.note-head .btn { margin-left: auto; }
.note-text { white-space: pre-wrap; margin-top: .15rem; }
.elsewhere { color: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.elsewhere:hover { border-color: var(--accent); }
.seq { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .02rem .35rem; font-variant-numeric: tabular-nums; }
.sc-seq { position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: var(--muted); }
.swipe-card.fresh .sc-seq { top: 3rem; }
.lib-project { margin-bottom: .75rem; }
.lib-project summary { cursor: pointer; }
.lib-project code { font-size: .78rem; color: var(--muted); }
.lib-lines { margin-top: .6rem; font-size: .92rem; max-height: 60vh; overflow: auto; }
.lib-line { display: flex; gap: .6rem; align-items: baseline; padding: .18rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lib-line .seq { min-width: 2.6rem; text-align: right; }
.lib-line .nid { font-size: .72rem; color: var(--muted); min-width: 10.5rem; }
.lib-line .nm { font-weight: 600; }
.lib-line .sc { color: var(--star); font-weight: 700; margin-left: auto; }
.lib-line.liked .nm { color: var(--accent); }
.badge.linkish { cursor: pointer; }
@media (max-width: 640px) { .deck { height: min(400px, 52vh); } .deck-actions { gap: 1.1rem; } }

/* ---- fresh names + Venn ---- */
.badge.new { background: var(--ai); color: #fff; border-color: transparent; }
.name.fresh { box-shadow: inset 3px 0 0 var(--ai), var(--shadow); }
.swipe-card.fresh { background: linear-gradient(165deg, var(--card) 55%, color-mix(in srgb, var(--card) 70%, var(--ai-soft))); border-color: color-mix(in srgb, var(--ai) 50%, var(--line)); }
.tag { position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.tag.new { background: var(--ai); color: #fff; }
.tag.seen { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.venn { max-width: 720px; margin: .5rem auto; }
.venn-svg { width: 100%; height: auto; display: block; }
.venn-svg .vt { font-size: 12.5px; fill: var(--ink); font-weight: 600; }
.venn-svg .vt.dim { fill: var(--muted); font-weight: 400; }
.venn-svg .vl { font-size: 13px; font-weight: 800; }
.venn-pick { margin-bottom: .5rem; }
.venn-list { border-top: 1px solid var(--line); padding: .6rem 0; }
.venn-list summary { cursor: pointer; font-weight: 600; }
.venn-list .pill b { color: var(--star); }


/* =====================================================================
   Windows XP "Corporate" theme (Luna blue chrome on a silver/beige body)
   Research notes: Luna = Windows XP's default visual style, blue scheme by
   default with Olive ("Homestead") and Silver ("Metallic") variants; rounded
   blue gradient title bars set in Trebuchet MS Bold, Tahoma for UI text, the
   #ECE9D8 dialog face, raised 3px-radius buttons with a #003C74 border and an
   orange hover glow, sunken #7F9DB9 text boxes, green segmented progress bars,
   a green Start button and a red close button. "Corporate" here = the silver
   body with the blue chrome, as in Office 2003 / Luna Silver on business PCs.
   ===================================================================== */
html[data-theme="xp"] {
  --bg: #ECE9D8; --card: #FFFFFF; --ink: #000000; --muted: #5A5A5A; --line: #919B9C;
  --accent: #316AC5; --accent-ink: #FFFFFF; --accent-soft: #D6E3F7;
  --star: #E39A00; --star-soft: #FFF3C8; --danger: #C13A24; --danger-soft: #F9DAD3;
  --ai: #0046D5; --ai-soft: #DCE6FA; --shadow: none; --radius: 3px;
  --xp-title-a: #0A5FEE; --xp-title-b: #3C8FFF; --xp-title-c: #0A4FD3; --xp-frame: #0831D9;
  --xp-btn-border: #003C74; --xp-input-border: #7F9DB9; --xp-face: #ECE9D8;
  color-scheme: light;
}
html[data-theme="xp"] body { background: var(--bg); color: #000; font: 12px/1.45 Tahoma, "Segoe UI", Verdana, sans-serif; -webkit-font-smoothing: auto; }
html[data-theme="xp"] h1, html[data-theme="xp"] h2, html[data-theme="xp"] h3 { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; letter-spacing: 0; }
html[data-theme="xp"] h1 { font-size: 1.35rem; font-weight: 700; }
html[data-theme="xp"] h2 { font-size: 1.05rem; font-weight: 700; }
html[data-theme="xp"] h3 { font-size: .95rem; font-weight: 700; }
html[data-theme="xp"] a { color: #0046D5; }
html[data-theme="xp"] .splash-logo { fill: var(--star); }

/* Title bar */
html[data-theme="xp"] .top { background: linear-gradient(#0A5FEE 0%, #3C8FFF 9%, #0A5FEE 60%, #0046D5 100%); color: #fff; border-bottom: 1px solid var(--xp-frame); backdrop-filter: none; padding-top: .4rem; padding-bottom: .4rem; position: sticky; }
html[data-theme="xp"] .brand { color: #fff; font: 700 19px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 0 #0F1089; order: 1; }
html[data-theme="xp"] .brand .spark { fill: #FFD35B; width: 18px; height: 18px; }
html[data-theme="xp"] .top-right { order: 2; }
html[data-theme="xp"] .xp-winbtns { display: inline-flex; gap: 2px; order: 3; margin-left: .4rem; }
html[data-theme="xp"] .wb { width: 21px; height: 21px; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(#5A9BFF, #2F74E8 50%, #1F5FD6); box-shadow: inset 1px 1px 0 rgba(255,255,255,.45); position: relative; }
html[data-theme="xp"] .wb::after { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; border: 2px solid #fff; border-width: 0 0 2px 0; }
html[data-theme="xp"] .wb.max::after { border-width: 2px 1px 1px 1px; }
html[data-theme="xp"] .wb.close { background: linear-gradient(#E68B7B, #D65C47 50%, #C13A24); }
html[data-theme="xp"] .wb.close::after { border: 0; content: "×"; color: #fff; font: 700 15px/11px Tahoma; text-align: center; left: 0; right: 0; top: 4px; }
html[data-theme="xp"] .top .pill, html[data-theme="xp"] .top .btn.ghost, html[data-theme="xp"] .top a.btn { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; padding: .2rem .55rem; font-size: 12px; }
html[data-theme="xp"] .top .pill b, html[data-theme="xp"] .top .btn.ghost:hover { color: #fff; background: rgba(255,255,255,.28); }
html[data-theme="xp"] .top .sii { filter: drop-shadow(0 0 1px rgba(0,0,0,.4)); }

/* Status bar */
.xp-status { display: none; }
html[data-theme="xp"] .xp-status { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 24px; background: #ECE9D8; border-top: 1px solid #fff; box-shadow: inset 0 1px 0 #ACA899; font: 11px Tahoma, sans-serif; color: #000; z-index: 4; }
html[data-theme="xp"] .xp-cell { padding: 3px 8px; border-right: 1px solid #ACA899; box-shadow: inset 1px 0 0 #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
html[data-theme="xp"] .xp-grow { flex: 1; }
html[data-theme="xp"] .app { padding-bottom: calc(4rem + 24px); }

/* Windows & panels */
html[data-theme="xp"] .card { border: 1px solid #919B9C; border-radius: 3px; box-shadow: none; background: #fff; }
html[data-theme="xp"] .empty { border: 1px dashed #ACA899; background: #F7F5EC; color: #5A5A5A; border-radius: 3px; }
html[data-theme="xp"] .pill { border-radius: 3px; background: #F4F2E8; border-color: #ACA899; }
html[data-theme="xp"] .role { border-radius: 2px; text-transform: none; letter-spacing: 0; font-size: .74rem; }
html[data-theme="xp"] .badge { border-radius: 2px; }
html[data-theme="xp"] .seq, html[data-theme="xp"] .dbl, html[data-theme="xp"] .tag { border-radius: 2px; }

/* Buttons: raised, 3px radius, #003C74 border, orange hover glow, blue default ring */
html[data-theme="xp"] .btn, html[data-theme="xp"] .chip, html[data-theme="xp"] .round, html[data-theme="xp"] .tabs button, html[data-theme="xp"] .seg button {
  font: 12px Tahoma, "Segoe UI", sans-serif; color: #000; border-radius: 3px; border: 1px solid var(--xp-btn-border);
  background: linear-gradient(#FFFFFF, #ECEBE5 86%, #D8D0C4); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #E3DFD3; padding: 3px 12px; min-height: 23px; transition: none;
}
html[data-theme="xp"] .btn:hover, html[data-theme="xp"] .chip:hover, html[data-theme="xp"] .round:hover, html[data-theme="xp"] .seg button:hover { background: linear-gradient(#FFFFFF, #ECEBE5 86%, #D8D0C4); box-shadow: inset 0 0 0 1px #FFC73C, inset 0 0 0 2px #F9D389, inset 0 0 0 3px #FFF1C7; filter: none; }
html[data-theme="xp"] .btn:active, html[data-theme="xp"] .chip:active, html[data-theme="xp"] .round:active { background: linear-gradient(#D9D5CE, #ECEBE5); box-shadow: inset 1px 1px 2px rgba(0,0,0,.18); transform: none; }
html[data-theme="xp"] .btn.primary, html[data-theme="xp"] .btn.topup { color: #000; background: linear-gradient(#FFFFFF, #ECEBE5 86%, #D8D0C4); box-shadow: inset 0 0 0 1px #4A7EE0, inset 0 0 0 2px #A9C4F3; }
html[data-theme="xp"] .btn.primary:hover, html[data-theme="xp"] .btn.topup:hover { box-shadow: inset 0 0 0 1px #FFC73C, inset 0 0 0 2px #F9D389; }
html[data-theme="xp"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: #0046D5; text-decoration: underline; padding-left: 4px; padding-right: 4px; }
html[data-theme="xp"] .btn.ghost:hover { background: transparent; box-shadow: none; color: #FF6A00; }
html[data-theme="xp"] .btn.danger, html[data-theme="xp"] .chip.danger { color: #A3200F; }
html[data-theme="xp"] .btn.apple { background: linear-gradient(#FFFFFF, #ECEBE5 86%, #D8D0C4); color: #000; }
html[data-theme="xp"] .btn:disabled, html[data-theme="xp"] .chip:disabled { color: #ACA899; text-shadow: 1px 1px 0 #fff; border-color: #C9C7BA; background: #F1EFE2; box-shadow: none; }
html[data-theme="xp"] .chip.active, html[data-theme="xp"] .tabs button.active, html[data-theme="xp"] .seg button.active { background: linear-gradient(#DCE9FA, #C1D2EE); color: #000; border-color: #316AC5; box-shadow: inset 1px 1px 2px rgba(0,0,0,.08); }
html[data-theme="xp"] .tabs, html[data-theme="xp"] .seg { background: transparent; border: 0; padding: 0; gap: 2px; }
html[data-theme="xp"] .round { width: 48px; height: 48px; border-radius: 3px; font-size: 1.3rem; }
html[data-theme="xp"] .round.undo { width: 40px; height: 40px; }
html[data-theme="xp"] .round.pass { color: #A3200F; }
html[data-theme="xp"] .round.like { color: #C98500; }
html[data-theme="xp"] .round.double { color: #0046D5; }
html[data-theme="xp"] .star { border-radius: 2px; }

/* Text boxes: sunken, #7F9DB9 */
html[data-theme="xp"] input[type=text], html[data-theme="xp"] input[type=email], html[data-theme="xp"] input[type=password], html[data-theme="xp"] input[type=url], html[data-theme="xp"] textarea, html[data-theme="xp"] select {
  border: 1px solid var(--xp-input-border); border-radius: 0; background: #fff; font: 12px Tahoma, sans-serif; padding: 3px 5px; box-shadow: none; color: #000;
}
html[data-theme="xp"] input:focus, html[data-theme="xp"] textarea:focus, html[data-theme="xp"] select:focus { border-color: #316AC5; box-shadow: none; outline: 1px dotted #000; outline-offset: -3px; }
html[data-theme="xp"] .field label { color: #000; font-weight: 400; }
html[data-theme="xp"] ::selection { background: #316AC5; color: #fff; }

/* Progress: green segmented blocks on a sunken white track */
html[data-theme="xp"] .quota { height: 12px; border: 1px solid #686868; border-radius: 0; background: #fff; box-shadow: inset 1px 1px 0 #BFBFBF; }
html[data-theme="xp"] .quota > div { background: repeating-linear-gradient(90deg, transparent 0 1px, #4CE24C 1px 8px, transparent 8px 10px), linear-gradient(#8DF08D, #2DB92D); background-blend-mode: multiply; border-radius: 0; }
html[data-theme="xp"] .quota.full > div { background: repeating-linear-gradient(90deg, transparent 0 1px, #E05A3A 1px 8px, transparent 8px 10px), linear-gradient(#F3A48E, #C13A24); }

/* Dialogs: window chrome with a Luna title bar and red close button */
html[data-theme="xp"] .modal { background: rgba(0,0,0,.25); }
html[data-theme="xp"] .modal .card { border: 1px solid var(--xp-frame); border-radius: 8px 8px 3px 3px; padding: .9rem 1rem 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); background: var(--xp-face); }
html[data-theme="xp"] .modal .card > h2:first-child, html[data-theme="xp"] .modal .card > .row:first-child { margin: -.9rem -1rem .9rem; padding: .35rem .5rem .35rem .7rem; background: linear-gradient(#0A5FEE 0%, #3C8FFF 9%, #0A5FEE 60%, #0046D5 100%); color: #fff; border-radius: 7px 7px 0 0; font: 700 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 0 #0F1089; }
html[data-theme="xp"] .modal .card > .row:first-child h2 { color: #fff; font: inherit; margin: 0; }
html[data-theme="xp"] .modal .card > .row:first-child .btn { background: linear-gradient(#E68B7B, #D65C47 50%, #C13A24); color: #fff; border: 1px solid #fff; width: 21px; height: 21px; min-height: 21px; padding: 0; font-weight: 700; text-decoration: none; box-shadow: inset 1px 1px 0 rgba(255,255,255,.4); }
html[data-theme="xp"] .modal .card > .row:first-child .btn:not(:last-child) { background: linear-gradient(#FFFFFF, #ECEBE5 86%, #D8D0C4); color: #000; width: auto; padding: 0 8px; border-color: #003C74; }
html[data-theme="xp"] .modal .card .card, html[data-theme="xp"] .note, html[data-theme="xp"] .member-row.requested { background: #fff; border-color: #ACA899; }
html[data-theme="xp"] .detail-sec, html[data-theme="xp"] .venn-list, html[data-theme="xp"] .member-row, html[data-theme="xp"] .inbox-row, html[data-theme="xp"] .lib-line { border-color: #ACA899; }

/* Swipe card = a small window */
html[data-theme="xp"] .swipe-card { border-radius: 8px 8px 3px 3px; border: 1px solid var(--xp-frame); box-shadow: 0 6px 18px rgba(0,0,0,.25); background: #fff; padding-top: 3.2rem; }
html[data-theme="xp"] .swipe-card.fresh { background: #fff; border-color: var(--xp-frame); }
html[data-theme="xp"] .sc-seq { top: 0; left: 0; right: 0; transform: none; padding: .35rem .7rem; text-align: left; background: linear-gradient(#0A5FEE 0%, #3C8FFF 9%, #0A5FEE 60%, #0046D5 100%); color: #fff; font: 700 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px 0 #0F1089; border-radius: 7px 7px 0 0; }
html[data-theme="xp"] .swipe-card.fresh .sc-seq { top: 0; }
html[data-theme="xp"] .swipe-card .tag { top: 3.4rem; }
html[data-theme="xp"] .sc-text { font-family: "Trebuchet MS", Tahoma, sans-serif; }
html[data-theme="xp"] .stamp { border-radius: 2px; }

/* Name tiles */
html[data-theme="xp"] .name { border-radius: 3px; box-shadow: none; border-color: #ACA899; animation: none; }
html[data-theme="xp"] .name.starred { background: #FFF7D6; border-color: #E0B84C; }
html[data-theme="xp"] .name.fresh { box-shadow: inset 3px 0 0 #316AC5; }
html[data-theme="xp"] .name .text { font-family: "Trebuchet MS", Tahoma, sans-serif; font-weight: 700; }
html[data-theme="xp"] .project-card:hover { border-color: #316AC5; transform: none; }

/* Balloon tips */
html[data-theme="xp"] .toast { background: #FFFFE1; color: #000; border: 1px solid #000; border-radius: 3px; box-shadow: 2px 2px 3px rgba(0,0,0,.3); font: 12px Tahoma, sans-serif; }
html[data-theme="xp"] .toast.error { background: #FFFFE1; color: #A3200F; }

/* Inbox / credits panels get the group-box look */
html[data-theme="xp"] .credits, html[data-theme="xp"] .inbox, html[data-theme="xp"] .request-access { background: #F7F5EC; }
html[data-theme="xp"] .credits-num b { color: #0046D5; }

/* Scrollbars (WebKit): light XP-style */
html[data-theme="xp"] ::-webkit-scrollbar { width: 17px; height: 17px; }
html[data-theme="xp"] ::-webkit-scrollbar-track { background: #F1F1EB; }
html[data-theme="xp"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #DDE7FA, #C0D3F5); border: 1px solid #9DB8E6; border-radius: 2px; }

/* Modern theme keeps its dark mode; XP is always light */
html[data-theme="xp"] .modern-only { display: none; }


/* --- XP tab control for the view switcher: white active tab with the orange top stripe --- */
html[data-theme="xp"] .view-seg, html[data-theme="xp"] .tabs { display: flex; gap: 0; align-items: flex-end; border-bottom: 1px solid #919B9C; padding: 0 6px; margin-bottom: -1px; position: relative; z-index: 1; }
html[data-theme="xp"] .view-seg button, html[data-theme="xp"] .tabs button { flex: 0 0 auto; border: 1px solid #919B9C; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#FFFFFF, #F4F3EE 60%, #E6E3D8); padding: 4px 12px 3px; margin-bottom: 0; box-shadow: none; color: #000; font-weight: 400; min-height: 0; position: relative; top: 1px; }
html[data-theme="xp"] .view-seg button:hover, html[data-theme="xp"] .tabs button:hover { box-shadow: inset 0 2px 0 #FFC73C; }
html[data-theme="xp"] .view-seg button.active, html[data-theme="xp"] .tabs button.active { background: #fff; box-shadow: inset 0 3px 0 #E68B2C, inset 0 4px 0 #FFC73C; padding-top: 6px; top: 1px; margin-top: -3px; border-color: #919B9C; border-bottom: 1px solid #fff; z-index: 2; }
html[data-theme="xp"] .view-seg + .card, html[data-theme="xp"] .view-seg + div > .card:first-child, html[data-theme="xp"] .view-seg ~ .venn { border-top-left-radius: 0; }
html[data-theme="xp"] .view-seg + * { position: relative; z-index: 0; }

/* --- Luna colour schemes --- */
html[data-theme="xp"][data-scheme="olive"] { --accent: #93A070; --accent-soft: #E3E8D4; --ai: #5D7232; --ai-soft: #E7EDD8; --xp-frame: #5E6F3B; --xp-btn-border: #55682E; --xp-input-border: #A6B388; }
html[data-theme="xp"][data-scheme="olive"] .top, html[data-theme="xp"][data-scheme="olive"] .modal .card > h2:first-child, html[data-theme="xp"][data-scheme="olive"] .modal .card > .row:first-child, html[data-theme="xp"][data-scheme="olive"] .sc-seq { background: linear-gradient(#9BB36F 0%, #B8CC8E 9%, #8FA75F 60%, #7B9448 100%); text-shadow: 1px 1px 0 #4F6029; }
html[data-theme="xp"][data-scheme="olive"] .wb { background: linear-gradient(#C6D6A1, #A2B775 50%, #8CA35B); }
html[data-theme="xp"][data-scheme="olive"] .chip.active, html[data-theme="xp"][data-scheme="olive"] .seg button.active { background: linear-gradient(#EAF0DC, #D5E0BC); border-color: #7B9448; }
html[data-theme="xp"][data-scheme="olive"] .btn.primary, html[data-theme="xp"][data-scheme="olive"] .btn.topup { box-shadow: inset 0 0 0 1px #8DA65B, inset 0 0 0 2px #CBDBA7; }
html[data-theme="xp"][data-scheme="olive"] a, html[data-theme="xp"][data-scheme="olive"] .btn.ghost, html[data-theme="xp"][data-scheme="olive"] .credits-num b { color: #4F6A1F; }
html[data-theme="xp"][data-scheme="olive"] ::selection { background: #93A070; }
html[data-theme="xp"][data-scheme="olive"] .badge.new, html[data-theme="xp"][data-scheme="olive"] .tag { background: #5D7232; }

html[data-theme="xp"][data-scheme="silver"] { --bg: #E6E6E6; --accent: #7A7D9A; --accent-soft: #E1E2EC; --ai: #4D5173; --ai-soft: #E4E5F0; --xp-frame: #6F7187; --xp-btn-border: #5F6378; --xp-input-border: #A0A2B5; --xp-face: #F0F0F0; --line: #9D9DA1; }
html[data-theme="xp"][data-scheme="silver"] body { background: #E6E6E6; }
html[data-theme="xp"][data-scheme="silver"] .top, html[data-theme="xp"][data-scheme="silver"] .modal .card > h2:first-child, html[data-theme="xp"][data-scheme="silver"] .modal .card > .row:first-child, html[data-theme="xp"][data-scheme="silver"] .sc-seq { background: linear-gradient(#D5D7E4 0%, #F3F4F9 9%, #C5C7D8 60%, #A6A8BE 100%); color: #000; text-shadow: 1px 1px 0 #fff; }
html[data-theme="xp"][data-scheme="silver"] .brand, html[data-theme="xp"][data-scheme="silver"] .modal .card > .row:first-child h2 { color: #000; text-shadow: 1px 1px 0 #fff; }
html[data-theme="xp"][data-scheme="silver"] .top .pill, html[data-theme="xp"][data-scheme="silver"] .top .btn.ghost, html[data-theme="xp"][data-scheme="silver"] .top a.btn { background: rgba(255,255,255,.55); color: #000; border-color: #8F92A8; }
html[data-theme="xp"][data-scheme="silver"] .top .pill b, html[data-theme="xp"][data-scheme="silver"] .top .btn.ghost:hover { color: #000; background: rgba(255,255,255,.85); }
html[data-theme="xp"][data-scheme="silver"] .wb { background: linear-gradient(#F4F4F8, #C9CBDB 50%, #A9ABC0); border-color: #8F92A8; }
html[data-theme="xp"][data-scheme="silver"] .wb::after { border-color: #333; }
html[data-theme="xp"][data-scheme="silver"] .wb.close { background: linear-gradient(#E68B7B, #D65C47 50%, #C13A24); border-color: #fff; }
html[data-theme="xp"][data-scheme="silver"] .wb.close::after { color: #fff; }
html[data-theme="xp"][data-scheme="silver"] .xp-status, html[data-theme="xp"][data-scheme="silver"] .credits, html[data-theme="xp"][data-scheme="silver"] .inbox, html[data-theme="xp"][data-scheme="silver"] .request-access { background: #F0F0F0; }
html[data-theme="xp"][data-scheme="silver"] .xp-cell { border-right-color: #9D9DA1; }
html[data-theme="xp"][data-scheme="silver"] .btn, html[data-theme="xp"][data-scheme="silver"] .chip, html[data-theme="xp"][data-scheme="silver"] .round { background: linear-gradient(#FFFFFF, #F1F1F3 86%, #DADAE0); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #E6E6EA; }
html[data-theme="xp"][data-scheme="silver"] .btn:disabled, html[data-theme="xp"][data-scheme="silver"] .chip:disabled { background: #F1F1F1; border-color: #C9C9CE; }
html[data-theme="xp"][data-scheme="silver"] .chip.active, html[data-theme="xp"][data-scheme="silver"] .seg button.active { background: linear-gradient(#E9EAF2, #D4D6E3); border-color: #7A7D9A; }
html[data-theme="xp"][data-scheme="silver"] .btn.primary, html[data-theme="xp"][data-scheme="silver"] .btn.topup { box-shadow: inset 0 0 0 1px #8A8DAA, inset 0 0 0 2px #CFD1E0; }
html[data-theme="xp"][data-scheme="silver"] .empty { background: #F6F6F6; border-color: #B9B9BD; }
html[data-theme="xp"][data-scheme="silver"] .pill { background: #F4F4F6; border-color: #B9B9BD; }
html[data-theme="xp"][data-scheme="silver"] .view-seg button, html[data-theme="xp"][data-scheme="silver"] .tabs button { background: linear-gradient(#FFFFFF, #F3F3F5 60%, #E2E2E6); }
html[data-theme="xp"][data-scheme="silver"] .sc-text, html[data-theme="xp"][data-scheme="silver"] .name .text { color: #000; }
html[data-theme="xp"][data-scheme="silver"] ::selection { background: #7A7D9A; color: #fff; }

.legal { text-align: center; margin-top: 1rem; }
.legal a { color: var(--muted); text-decoration: underline; }