/* Heycat user portal — cute, warm and premium. Motion always plays. */
:root {
  --cream: #f8f6ef; --cream-2: #f1eee3; --paper: #fffdf8; --white: #fff;
  --pine: #183f36; --pine-2: #1f4d42; --pine-deep: #0d2621; --pine-ink: #0a1f1a;
  --coral: #ef7855; --coral-2: #f79a72; --coral-deep: #d95a35; --peach: #fde5d8; --blush: #ffb9a3;
  --mint: #dcebdd; --mint-2: #b9d8c1; --mint-ink: #2f6b55; --gold: #e3b26b; --gold-soft: #fbecd2; --sky: #6aa6c9; --red: #d84a3a;
  --ink: #183f36; --muted: #5d6e66; --muted-2: #85948b; --line: rgba(24, 63, 54, .1); --line-2: rgba(24, 63, 54, .16);
  --font: 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', Georgia, 'Noto Sans SC', serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-io: cubic-bezier(.76, 0, .24, 1);
  --shadow-sm: 0 1px 2px rgba(24, 63, 54, .05), 0 6px 18px -10px rgba(24, 63, 54, .22);
  --shadow: 0 1px 2px rgba(24, 63, 54, .04), 0 14px 34px -12px rgba(24, 63, 54, .18), 0 40px 80px -36px rgba(24, 63, 54, .2);
  --shadow-lg: 0 2px 4px rgba(24, 63, 54, .05), 0 24px 60px -18px rgba(24, 63, 54, .3), 0 70px 120px -50px rgba(24, 63, 54, .3);
  --radius: 26px; --radius-sm: 16px; --sidebar: 268px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--cream); color: var(--ink); font-family: var(--font); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 600px at 100% -10%, rgba(255, 213, 192, .55), transparent 60%), radial-gradient(800px 600px at -10% 110%, rgba(207, 230, 212, .55), transparent 60%); }
body::after { content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.modal-open { overflow: hidden; }
::selection { background: var(--coral); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; }
h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; font-weight: 700; }
html[lang="en"] h1, html[lang="en"] h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: rgba(24, 63, 54, .06); padding: 2px 6px; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 10px; }
.muted { color: var(--muted); }
.center { text-align: center; justify-content: center; }
.pos { color: var(--mint-ink); }
.neg { color: var(--coral-deep); }

/* ---------- Icons, cat mark, mascot ---------- */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.cat-mark .cat-head { fill: var(--coral); }
.cat-mark .cat-smile { fill: none; stroke: var(--pine); stroke-width: 8; stroke-linecap: round; }
.cat-mark .cat-eye { fill: var(--pine); transform-box: fill-box; transform-origin: center; animation: blink 5.6s infinite; }
@keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.12); } }
.mascot { overflow: visible; }
.mascot .mascot-ear { fill: #ffc4ac; opacity: .85; }
.mascot .blush { fill: #ff9b84; opacity: .55; }
.mascot .mascot-smile { fill: none; stroke: var(--pine); stroke-width: 6; stroke-linecap: round; }
.mascot .eye ellipse { fill: var(--pine); }
.mascot .glint { fill: #fff; }
.mascot .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.8s infinite; }
.mascot .pupils { transition: transform .25s ease-out; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes sheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes twinkle { 0%, 100% { transform: scale(.5) rotate(0); opacity: .35; } 50% { transform: scale(1.1) rotate(90deg); opacity: 1; } }
.pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4fae75; flex-shrink: 0; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 2s var(--ease-out) infinite; }

/* ---------- Boot ---------- */
.boot-screen { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--cream); }
.boot-cat { width: 76px; height: 76px; animation: bob 1.6s ease-in-out infinite; }
.boot-word { font-size: 30px; font-weight: 800; letter-spacing: -.05em; }
.boot-word span { color: var(--coral); }
.boot-bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(24, 63, 54, .1); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--gold)); animation: boot-bar 1.1s var(--ease-io) infinite; }
@keyframes boot-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* ---------- Buttons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: .005em; white-space: nowrap; transition: transform .45s var(--ease-spring), box-shadow .35s, background-color .3s, color .3s, border-color .3s, opacity .3s; }
.btn .icon { width: 18px; height: 18px; transition: transform .45s var(--ease-spring); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--ease-out); }
.btn:hover::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; transform: none; }
.btn-primary { color: #fffaf3; background: linear-gradient(135deg, #24584b, var(--pine) 55%, #123029); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px -12px rgba(24, 63, 54, .6); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 34px -14px rgba(24, 63, 54, .65), 0 0 0 5px rgba(239, 120, 85, .14); }
.btn-coral { color: #fff; background: linear-gradient(135deg, #f58a64, var(--coral) 50%, #e4643f); box-shadow: 0 12px 26px -12px rgba(217, 90, 53, .7); }
.btn-coral:hover { box-shadow: 0 18px 34px -12px rgba(217, 90, 53, .75), 0 0 0 5px rgba(239, 120, 85, .18); }
.btn-ghost { color: var(--ink); background: rgba(255, 255, 255, .72); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: #fff; box-shadow: var(--shadow-sm); }
.btn-glass { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255, 255, 255, .2); }
.btn-glass-dark { color: var(--pine); background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-sm); }
.btn-light { color: var(--pine-deep); background: #fffaf3; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5); }
.btn-danger { color: #fff; background: linear-gradient(135deg, #e0624c, var(--red)); box-shadow: 0 12px 26px -14px rgba(216, 74, 58, .7); }
.btn-sm { min-height: 38px; padding: 0 15px; font-size: 14px; }
.btn-xs { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy > * { opacity: 0; }
.btn.is-busy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-ghost.is-busy::before { border-color: rgba(24, 63, 54, .2); border-top-color: var(--pine); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); transition: background .3s, color .3s, transform .45s var(--ease-spring); }
.icon-btn:hover { background: rgba(24, 63, 54, .07); color: var(--ink); transform: scale(1.06); }
.icon-btn.xs { width: 28px; height: 28px; }
.icon-btn.xs .icon { width: 15px; height: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--coral-deep); transition: gap .4s var(--ease-spring); }
.text-link:hover { gap: 10px; }
.text-link .icon { width: 16px; height: 16px; }
.text-link-sm { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); font-weight: 600; transition: color .3s; }
.text-link-sm:hover { color: var(--ink); }
.text-link-sm .icon { width: 16px; height: 16px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink); transition: background .3s; }
.lang-toggle:hover { background: rgba(24, 63, 54, .07); }
.lang-toggle .icon { width: 17px; height: 17px; transition: transform .8s var(--ease-out); }
.lang-toggle:hover .icon { transform: rotate(180deg); }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: rgba(24, 63, 54, .07); color: var(--muted); }
.chip .icon { width: 13px; height: 13px; }
.chip .pulse-dot { width: 6px; height: 6px; }
.chip-online { background: #e3f3e8; color: #27744a; }
.chip-gold { background: var(--gold-soft); color: #94621a; }
.chip-mint { background: var(--mint); color: var(--mint-ink); }
.chip-gray { background: rgba(24, 63, 54, .07); color: var(--muted); }
.chip-red { background: #fde3df; color: #b73b2c; }
.chip-sky { background: #e2f0f8; color: #2d6d91; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 10px; }
.kicker .icon { width: 16px; height: 16px; }
.kicker-light { color: #ffc6ae; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.field-label .optional { font-style: normal; font-weight: 500; color: var(--muted-2); font-size: 12.5px; margin-right: auto; margin-left: 6px; }
.field-link { font-size: 13px; font-weight: 700; color: var(--coral-deep); }
.field-hint { font-size: 13px; color: var(--muted-2); min-height: 1em; }
input:not([type=radio]):not([type=checkbox]):not([type=range]), select, textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .85); font-size: 15.5px; color: var(--ink); outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23183f36' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
input::placeholder, textarea::placeholder { color: #a3aea8; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); background: #fff; box-shadow: 0 0 0 5px rgba(239, 120, 85, .14); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); box-shadow: 0 0 0 5px rgba(216, 74, 58, .12); animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.input-wrap, .input-suffix { position: relative; display: flex; align-items: center; }
.input-wrap input { padding-right: 52px; }
.peek { position: absolute; right: 8px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--muted-2); }
.peek:hover { color: var(--ink); background: rgba(24, 63, 54, .06); }
.input-suffix input { padding-right: 84px; }
.input-suffix > span { position: absolute; right: 16px; font-size: 13.5px; font-weight: 700; color: var(--muted-2); pointer-events: none; }
.form-error { display: flex; gap: 8px; align-items: center; padding: 11px 14px; border-radius: 14px; background: #fde9e5; color: #a8382a; font-size: 14px; font-weight: 600; }
.form-error.shake { animation: shake .45s; }
.fine-print { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.65; color: var(--muted-2); }
.fine-print .icon { width: 16px; height: 16px; margin-top: 2px; }
.fine-print.center { justify-content: center; margin: 22px auto 0; max-width: 720px; text-align: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.span-2 { grid-column: span 2; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(24, 63, 54, .07); gap: 2px; }
.segmented button { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); transition: background .35s var(--ease-out), color .3s, box-shadow .35s; }
.segmented button.is-on { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -6px rgba(24, 63, 54, .35); }
.segmented.big { display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; padding: 6px; gap: 6px; }
.segmented.big button { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 74px; padding: 12px 18px; border-radius: 17px; }
.segmented.big button .icon { width: 30px; height: 30px; padding: 6px; box-sizing: content-box; border-radius: 12px; background: rgba(24, 63, 54, .07); color: var(--pine); transition: background .3s, color .3s; }
.segmented.big button.is-on .icon { background: var(--coral); color: #fff; }
.segmented.big strong { display: block; font-size: 15.5px; color: var(--ink); }
.segmented.big small { display: block; font-size: 13px; color: var(--muted-2); font-weight: 500; }
.switch { position: relative; flex-shrink: 0; width: 54px; height: 32px; padding: 4px; border-radius: 999px; background: #cfd8cf; box-shadow: inset 0 1px 3px rgba(24, 63, 54, .18); transition: background .35s; }
.switch span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(24, 63, 54, .25); transition: transform .5s var(--ease-spring), width .3s; }
.switch:active span { width: 30px; }
.switch.is-on { background: linear-gradient(135deg, var(--coral-2), var(--coral)); }
.switch.is-on span { transform: translateX(22px); }
.switch.is-on:active span { transform: translateX(16px); }
.switch:disabled { opacity: .45; }
.switch:disabled span { width: 24px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 12px 0 6px; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, var(--coral) 0, var(--gold) var(--fill, 30%), #e6e9df var(--fill, 30%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 7px solid var(--coral); box-shadow: 0 4px 14px rgba(217, 90, 53, .45); transition: transform .4s var(--ease-spring); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 7px solid var(--coral); }
.range:active::-webkit-slider-thumb { transform: scale(1.25); }
.range-labels { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted-2); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-top: -6px; }
.strength i { height: 5px; border-radius: 4px; background: rgba(24, 63, 54, .1); transition: background .4s; }
.strength span { font-size: 12.5px; font-weight: 700; color: var(--muted-2); min-width: 56px; text-align: right; }
.strength[data-level="0"] i:nth-child(-n+1) { background: var(--red); }
.strength[data-level="1"] i:nth-child(-n+2) { background: var(--coral); }
.strength[data-level="2"] i:nth-child(-n+3) { background: var(--gold); }
.strength[data-level="3"] i:nth-child(-n+4), .strength[data-level="4"] i { background: #4fae75; }
.bonus-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, #fff1e8, #fde3d4); color: var(--coral-deep); font-size: 14px; font-weight: 600; animation: pop .7s var(--ease-spring) .2s both; }
.bonus-banner .icon { width: 26px; height: 26px; animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-12deg); } 82% { transform: rotate(10deg); } 88% { transform: rotate(-5deg); } }

/* ---------- Auth layout ---------- */
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.auth-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 52px; color: #f1f5ef; background: linear-gradient(160deg, #163d33, var(--pine-deep) 70%); isolation: isolate; }
.auth-blobs i { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; mix-blend-mode: screen; }
.auth-blobs i:nth-child(1) { width: 420px; height: 420px; left: -120px; top: -120px; background: rgba(118, 205, 165, .3); animation: drift-a 16s ease-in-out infinite alternate; }
.auth-blobs i:nth-child(2) { width: 380px; height: 380px; right: -140px; bottom: 10%; background: rgba(255, 150, 112, .3); animation: drift-b 18s ease-in-out infinite alternate; }
.auth-blobs i:nth-child(3) { width: 260px; height: 260px; left: 40%; top: 40%; background: rgba(227, 178, 107, .2); animation: drift-a 22s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(80px, 60px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-70px, -50px) scale(1.1); } }
.auth-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 60% 60%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 60% 60%, #000, transparent 75%); }
.auth-brand, .site-brand, .side-brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; transition: transform .6s var(--ease-spring); }
a:hover > .brand-mark { transform: rotate(-10deg) scale(1.08); }
.brand-word { font-size: 28px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.brand-period { color: var(--coral); display: inline-block; animation: period-pop 3s var(--ease-spring) infinite; }
@keyframes period-pop { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-5px) scale(1.4); } }
.brand-cn { font-size: 14px; font-weight: 600; padding-left: 12px; margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, .25); letter-spacing: .12em; }
.auth-hero { max-width: 520px; animation: rise 1s var(--ease-out) .1s both; }
.eyebrow-light { font-size: 12.5px; font-weight: 800; letter-spacing: .24em; color: #b8d5c2; margin-bottom: 18px; }
.auth-title { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.04em; font-weight: 900; color: #fffaf3; }
.auth-title span { background: linear-gradient(100deg, #f4936c, #ffc9a6 45%, #f4936c 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 6s ease-in-out infinite; }
html[lang="en"] .auth-title { font-family: var(--serif); font-weight: 600; font-variation-settings: "SOFT" 100; }
html[lang="en"] .auth-title span { font-style: italic; }
.auth-sub { margin-top: 18px; font-size: 17px; color: rgba(238, 243, 236, .74); max-width: 30em; }
.auth-stage { position: relative; align-self: center; width: min(360px, 70%); aspect-ratio: 1; margin: 20px 0; }
.auth-mascot { position: absolute; inset: 22%; width: 56%; height: 56%; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); }
.auth-orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .18); animation: spin 40s linear infinite; }
.auth-orbit.o2 { inset: 16%; border-style: solid; border-color: rgba(255, 200, 170, .16); animation-duration: 26s; animation-direction: reverse; }
.auth-orbit::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px var(--coral); }
.auth-orbit.o2::after { background: #9fd0b0; box-shadow: 0 0 16px #9fd0b0; top: auto; bottom: -6px; }
.auth-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); font-size: 13.5px; font-weight: 700; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: float-y 6s ease-in-out infinite; white-space: nowrap; }
.auth-chip .icon { width: 17px; height: 17px; color: #ffc0a6; }
.chip-a { top: 6%; left: -6%; } .chip-b { bottom: 12%; right: -12%; animation-delay: -2s; } .chip-c { bottom: -2%; left: 4%; animation-delay: -4s; }
.auth-foot { font-size: 13px; color: rgba(238, 243, 236, .5); }
.auth-main { display: flex; flex-direction: column; padding: 28px 40px; min-width: 0; }
.auth-top { display: flex; justify-content: space-between; align-items: center; }
.auth-host { flex: 1; display: grid; place-items: center; padding: 30px 0; position: relative; }
.auth-host > .view { width: 100%; display: grid; place-items: center; }
.auth-card { width: min(440px, 100%); padding: 38px; border-radius: 30px; background: rgba(255, 253, 248, .86); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; flex-direction: column; gap: 22px; }
.auth-card-head h2 { margin-bottom: 8px; }
.auth-card-head p { color: var(--muted); font-size: 15px; }
.auth-switch { text-align: center; font-size: 14.5px; color: var(--muted); }
.auth-switch a { font-weight: 800; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 4px; }
.auth-switch .icon { width: 15px; height: 15px; }
.success-card { align-items: center; text-align: center; }
.success-burst { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #6fc196, #2f8a5d); box-shadow: 0 20px 40px -16px rgba(47, 138, 93, .7); animation: pop .8s var(--ease-spring) both; }
.success-burst .icon { width: 38px; height: 38px; }
.success-burst::before, .success-burst::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(79, 174, 117, .4); animation: ping 2.2s var(--ease-out) infinite; }
.success-burst::after { animation-delay: 1.1s; }

/* ---------- Public site layout (download) ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(248, 246, 239, .78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; gap: 24px; width: min(1240px, 100% - 48px); margin: auto; height: 74px; }
.site-header .brand-mark { width: 34px; height: 34px; }
.site-header .brand-word { font-size: 26px; }
.site-nav { display: flex; gap: 6px; margin-left: 12px; }
.site-nav a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--muted); transition: background .3s, color .3s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); background: rgba(255, 255, 255, .85); }
.site-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.site-host { width: min(1240px, 100% - 48px); margin: 0 auto; padding: 36px 0 60px; position: relative; }
.site-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: min(1240px, 100% - 48px); margin: 0 auto; padding: 26px 0 90px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted-2); }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 24px 16px 18px; color: #e9f0ea; background: radial-gradient(500px 300px at 0% 0%, rgba(118, 205, 165, .16), transparent 70%), linear-gradient(180deg, #143a31, var(--pine-deep) 60%, #0a1f1a); overflow-y: auto; scrollbar-width: none; z-index: 60; }
.sidebar::-webkit-scrollbar { display: none; }
.side-brand { padding: 4px 10px 8px; }
.side-brand .brand-mark { width: 34px; height: 34px; }
.side-brand .brand-word { font-size: 25px; color: #fffaf3; }
.side-tag { font-size: 12px; white-space: nowrap; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #ffc6ae; }
.side-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.side-nav a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 14px; font-size: 14.5px; font-weight: 600; color: rgba(233, 240, 234, .72); transition: color .3s, background .3s; }
.side-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.side-nav a.is-active { color: #fff; }
.side-nav a.is-active .icon { color: var(--coral-2); }
.side-nav a .icon { transition: transform .5s var(--ease-spring), color .3s; }
.side-nav a:hover .icon { transform: scale(1.12) rotate(-6deg); }
.nav-badge { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; background: linear-gradient(135deg, var(--coral), var(--gold)); color: #fff; }
.side-indicator { position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 0; border-radius: 14px; background: rgba(255, 255, 255, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); opacity: 0; transition: transform .55s var(--ease-spring), height .4s, opacity .3s; }
.side-indicator::before { content: ""; position: absolute; left: -16px; top: 50%; width: 4px; height: 22px; margin-top: -11px; border-radius: 0 4px 4px 0; background: var(--coral); box-shadow: 0 0 14px var(--coral); }
.side-promo { position: relative; margin-top: auto; padding: 18px 16px 16px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 4px; }
.side-promo .side-mascot { position: absolute; right: 10px; top: -30px; width: 66px; height: 66px; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.side-promo strong { font-size: 15px; color: #fffaf3; padding-right: 60px; }
.side-promo span { font-size: 13px; color: rgba(233, 240, 234, .66); margin-bottom: 10px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: rgba(0, 0, 0, .16); }
.side-user > div { min-width: 0; flex: 1; }
.side-user strong, .side-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user strong { font-size: 14px; color: #fffaf3; }
.side-user small { font-size: 12.5px; color: rgba(233, 240, 234, .6); }
.side-user .icon-btn { color: rgba(233, 240, 234, .7); }
.side-user .icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--coral-2), var(--coral-deep)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.avatar-lg { width: 60px; height: 60px; font-size: 24px; }
.side-scrim { display: none; }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 74px; padding: 0 32px; background: rgba(248, 246, 239, .74); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid var(--line); }
.menu-btn { display: none; color: var(--ink); }
.topbar-title { min-width: 0; flex: 1; }
.crumb { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-in { animation: rise .5s var(--ease-out) both; }
.topbar-actions { position: relative; display: flex; align-items: center; gap: 6px; }
.balance-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease-spring), box-shadow .3s; }
.balance-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.balance-pill .coin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ffe4c4, #f6b77c); animation: coin-flip 6s ease-in-out infinite; }
.balance-pill .coin svg { width: 20px; height: 20px; }
@keyframes coin-flip { 0%, 85%, 100% { transform: rotateY(0); } 92% { transform: rotateY(180deg); } }
.balance-pill b { font-size: 15px; font-variant-numeric: tabular-nums; }
.balance-pill small { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.avatar-btn { border-radius: 50%; transition: transform .45s var(--ease-spring); }
.avatar-btn:hover { transform: scale(1.06); }
.user-menu { position: absolute; right: 0; top: 52px; width: 240px; padding: 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: menu-in .35s var(--ease-spring); transform-origin: top right; z-index: 50; }
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
.user-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-head strong, .user-menu-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-head small { color: var(--muted-2); font-size: 13px; }
.user-menu a, .user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-align: left; transition: background .25s; }
.user-menu a:hover, .user-menu button:hover { background: var(--cream); }
.user-menu .icon { width: 18px; height: 18px; color: var(--muted); }
.app-host { position: relative; flex: 1; padding: 30px 32px 110px; min-width: 0; }

/* ---------- Views & motion ---------- */
.view { animation: view-in .6s var(--ease-out) both; }
.view.is-leaving { position: absolute; left: 32px; right: 32px; top: 30px; animation: view-out .22s ease forwards; pointer-events: none; }
.site-host .view.is-leaving { left: 0; right: 0; top: 36px; }
.auth-host .view.is-leaving { inset: 30px 0 auto; }
@keyframes view-in { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes view-out { to { opacity: 0; transform: translateY(-8px); } }
[data-stagger] > * { animation: rise .75s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), box-shadow .4s; }
.page { display: flex; flex-direction: column; gap: 24px; max-width: 1280px; margin: 0 auto; }
.view-wide .page { max-width: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.page-head p { margin-top: 8px; color: var(--muted); font-size: 16px; max-width: 46em; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card { position: relative; padding: 24px; border-radius: var(--radius); background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); min-width: 0; }
.card[data-tilt]::before, .stat[data-tilt]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--px, 50%) var(--py, 50%), rgba(239, 120, 85, .1), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.card[data-tilt]:hover::before, .stat[data-tilt]:hover::before { opacity: 1; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.card-head small { display: block; color: var(--muted-2); font-size: 13px; margin-top: 2px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-wide-left { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.section-block { display: flex; flex-direction: column; gap: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.section-head p { max-width: 34em; color: var(--muted); }
.section-head.on-dark h2 { color: #fffaf3; }
.section-head.on-dark p { color: rgba(238, 243, 236, .7); }
.section-head.on-dark .kicker { color: #ffc0a6; }

/* ---------- Skeletons & empty states ---------- */
.skeleton, .skeleton-head, .skeleton-card, .skeleton-hero { border-radius: 18px; background: linear-gradient(90deg, rgba(24, 63, 54, .06) 25%, rgba(24, 63, 54, .12) 37%, rgba(24, 63, 54, .06) 63%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton-stack { display: flex; flex-direction: column; gap: 12px; }
.skeleton { height: 18px; }
.skeleton:nth-child(3n+1) { width: 92%; } .skeleton:nth-child(3n+2) { width: 74%; } .skeleton:nth-child(3n) { width: 58%; }
.skeleton-head { height: 74px; width: 46%; margin-bottom: 8px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.skeleton-card { height: 170px; border-radius: var(--radius); animation-delay: calc(var(--i) * 80ms); }
.skeleton-hero { height: 380px; border-radius: 32px; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 50px 24px; border-radius: 32px; background: rgba(255, 255, 255, .6); border: 1.5px dashed var(--line-2); }
.empty-state.big { padding: 60px 24px; }
.empty-state p { color: var(--muted); max-width: 32em; }
.empty-art { width: 128px; height: 128px; }
.empty-mascot { width: 100%; height: 100%; animation: bob 4.6s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(217, 90, 53, .25)); }
.empty-steps { list-style: none; padding: 0; margin: 6px 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.empty-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.empty-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; font-size: 13px; }
.empty-mini { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; color: var(--muted); text-align: center; }
.empty-cat { width: 52px; height: 52px; animation: bob 4s ease-in-out infinite; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions.center { justify-content: center; }

/* ---------- Dashboard ---------- */
.announce-stack { display: flex; flex-direction: column; gap: 10px; }
.announce { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: opacity .35s, transform .4s var(--ease-out); }
.announce.is-leaving { opacity: 0; transform: translateX(30px); }
.announce > .icon { width: 36px; height: 36px; padding: 8px; border-radius: 12px; color: var(--sky); background: #e2f0f8; animation: wiggle 4s ease-in-out infinite; }
.announce-success > .icon { color: var(--mint-ink); background: var(--mint); }
.announce-warning > .icon { color: #94621a; background: var(--gold-soft); }
.announce > div { flex: 1; }
.announce p { font-size: 14px; color: var(--muted); }
.dash-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 20px; padding: 36px 40px; border-radius: 34px; color: #f1f5ef; background: radial-gradient(500px 340px at 90% 10%, rgba(255, 150, 112, .3), transparent 65%), radial-gradient(600px 400px at 0% 100%, rgba(118, 205, 165, .22), transparent 60%), linear-gradient(140deg, #1b4a3e, var(--pine-deep)); box-shadow: 0 40px 80px -40px rgba(13, 38, 33, .7); isolation: isolate; }
.dash-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); animation: grid-pan 30s linear infinite; }
@keyframes grid-pan { to { background-position: 240px 120px; } }
.dash-hero h1 { color: #fffaf3; }
.dash-hero p { margin-top: 8px; color: rgba(238, 243, 236, .74); font-size: 16px; }
.hero-balance { margin: 24px 0 26px; }
.hero-balance small { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #b8d5c2; }
.hero-balance > div { display: flex; align-items: baseline; gap: 10px; }
.hero-balance strong { font-size: clamp(44px, 5vw, 64px); line-height: 1.1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; }
.hero-balance > div span { font-size: 16px; color: #b8d5c2; }
.hero-balance em { display: block; font-style: normal; font-size: 13.5px; color: rgba(238, 243, 236, .6); }
.dash-hero-art { position: relative; height: 270px; }
.hero-mascot { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .35)); }
.hero-orbit i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .18); animation: spin 36s linear infinite; }
.hero-orbit i:first-child { width: 250px; height: 250px; margin: -125px; }
.hero-orbit i:last-child { width: 330px; height: 330px; margin: -165px; border-style: solid; border-color: rgba(255, 190, 160, .14); animation-duration: 50s; animation-direction: reverse; }
.hero-orbit i::after { content: ""; position: absolute; top: 12%; left: 12%; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 16px var(--coral); }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font-size: 13.5px; font-weight: 700; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: float-y 6s ease-in-out infinite; }
.hero-chip .icon { width: 16px; height: 16px; color: var(--gold); }
.hc-1 { top: 12%; right: 0; } .hc-2 { bottom: 10%; left: 0; animation-delay: -3s; }
.hero-spark { position: absolute; color: var(--gold); animation: twinkle 3s ease-in-out infinite; }
.hero-spark .icon { width: 18px; height: 18px; fill: currentColor; }
.hero-spark.s1 { top: 4%; left: 20%; } .hero-spark.s2 { bottom: 6%; right: 18%; animation-delay: -1.4s; color: #ffc0a6; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 24px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow); overflow: hidden; }
.stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 8px; transition: transform .6s var(--ease-spring); }
.stat:hover .stat-icon { transform: rotate(-10deg) scale(1.1); }
.stat small { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.stat strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat em { position: absolute; right: 22px; bottom: 22px; font-style: normal; color: var(--muted-2); font-weight: 700; }
.tone-coral .stat-icon { background: linear-gradient(135deg, #ffe2d5, #ffc8b1); color: var(--coral-deep); }
.tone-gold .stat-icon { background: linear-gradient(135deg, #fff1d9, #f6d9a8); color: #a86d22; }
.tone-mint .stat-icon { background: linear-gradient(135deg, #e6f3e9, #c6e1cd); color: var(--mint-ink); }
.tone-pine .stat-icon { background: linear-gradient(135deg, #2a6152, var(--pine)); color: #fff; }
.chart-card .chart-total { font-size: 22px; font-weight: 800; }
.chart-total small { font-size: 13px; color: var(--muted-2); font-weight: 600; }
.node-card { display: flex; flex-direction: column; gap: 12px; overflow: hidden; background: linear-gradient(160deg, #fffaf6, #fdeee5); }
.node-card.is-hub { background: linear-gradient(160deg, #f3faf5, #dcebdd); }
.node-card p { color: var(--muted); font-size: 14.5px; }
.node-card .chip { align-self: flex-start; }
.node-card .btn { align-self: flex-start; margin-top: auto; }
.node-card-top { display: flex; align-items: center; gap: 14px; }
.node-net { flex: 1; width: 100%; min-height: 120px; max-height: 210px; margin: 4px 0; overflow: visible; }
.net-link { stroke: rgba(239, 120, 85, .3); stroke-width: 1.6; stroke-dasharray: 4 6; fill: none; animation: net-flow 1.6s linear infinite; }
.is-hub .net-link { stroke: rgba(47, 107, 85, .32); }
@keyframes net-flow { to { stroke-dashoffset: -20; } }
.net-packet { fill: var(--coral); opacity: .85; }
.is-hub .net-packet { fill: var(--mint-ink); }
.net-node { fill: #fff; stroke: rgba(24, 63, 54, .22); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pop .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 80ms + 200ms); }
.net-node.is-you { fill: var(--coral); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 4px 8px rgba(239, 120, 85, .5)); }
.net-hub { fill: var(--pine); stroke: #fff; stroke-width: 3; }
.is-hub .net-hub { fill: var(--coral); }
.net-hub-ring { fill: none; stroke: var(--coral); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: net-ring 2.6s var(--ease-out) infinite; }
@keyframes net-ring { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
.node-card-top small { font-size: 13px; color: var(--muted-2); font-weight: 600; }
.node-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--coral-2), var(--coral-deep)); box-shadow: 0 12px 24px -12px rgba(217, 90, 53, .7); animation: wiggle 5s ease-in-out infinite; }
.is-hub .node-badge { background: linear-gradient(135deg, #3b8a6a, var(--pine)); box-shadow: 0 12px 24px -12px rgba(24, 63, 54, .7); }
.node-badge .icon { width: 26px; height: 26px; }
.mini-devices, .ledger-list, .conv-list, .session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mini-devices a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; transition: background .25s, transform .4s var(--ease-spring); }
.mini-devices a:hover { background: var(--cream); transform: translateX(4px); }
.mini-devices a > div { flex: 1; min-width: 0; }
.mini-devices strong, .mini-devices small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-devices small { color: var(--muted-2); font-size: 13px; }
.os-icon { width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: var(--cream-2); color: var(--pine); flex-shrink: 0; }
.ledger-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row > div { flex: 1; min-width: 0; }
.ledger-row strong { display: block; font-size: 14.5px; }
.ledger-row small { display: block; color: var(--muted-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row b { font-variant-numeric: tabular-nums; font-size: 15px; }
.ledger-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; background: var(--cream-2); color: var(--pine); }
.ledger-icon .icon { width: 18px; height: 18px; }
.k-task_reward { background: #ffe8dc; color: var(--coral-deep); } .k-hub_commission { background: var(--mint); color: var(--mint-ink); } .k-model_usage { background: #ece8fb; color: #6a55b8; }
.k-withdrawal, .k-withdrawal_refund { background: var(--gold-soft); color: #94621a; } .k-signup_bonus { background: #ffe8dc; color: var(--coral); }

/* ---------- Charts ---------- */
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; overflow: visible; }
.chart-tick line { stroke: rgba(24, 63, 54, .08); stroke-dasharray: 3 5; }
.chart-tick text, .chart-x { font-size: 12px; fill: var(--muted-2); font-family: var(--font); }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease-out) .2s forwards; vector-effect: non-scaling-stroke; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart-area { opacity: 0; animation: fade-in 1.2s ease .7s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.chart-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop .5s var(--ease-spring) both; animation-delay: calc(var(--d) + 600ms); stroke: #fff; stroke-width: 2; }
.chart-bar { transform-box: fill-box; transform-origin: bottom; animation: grow .9s var(--ease-spring) both; animation-delay: var(--d); }
@keyframes grow { from { transform: scaleY(0); } }
.chart.is-static .chart-line, .chart.is-static .chart-area, .chart.is-static .chart-dot, .chart.is-static .chart-bar { animation-duration: 0s; animation-delay: 0s; }
.chart-cursor { stroke: rgba(24, 63, 54, .25); stroke-dasharray: 4 4; opacity: 0; transition: opacity .2s; }
.chart.is-hover .chart-cursor { opacity: 1; }
.chart-tip { position: absolute; top: 0; z-index: 2; min-width: 140px; padding: 10px 12px; border-radius: 14px; background: var(--pine-deep); color: #fff; font-size: 13px; box-shadow: var(--shadow-lg); pointer-events: none; display: flex; flex-direction: column; gap: 3px; animation: pop .3s var(--ease-spring); }
.chart-tip span { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .78); }
.chart-tip span b { margin-left: auto; color: #fff; }
.chart-tip i, .chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Devices ---------- */
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 22px; overflow: hidden; background: var(--line); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.summary-strip > div { padding: 16px 20px; background: rgba(255, 255, 255, .86); }
.summary-strip small { display: block; font-size: 13px; color: var(--muted-2); font-weight: 600; }
.summary-strip b { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.summary-strip.small { grid-template-columns: repeat(2, minmax(0, 1fr)); box-shadow: none; border-radius: 16px; }
.summary-strip.small > div { padding: 10px 14px; background: rgba(255, 255, 255, .7); }
.summary-strip.small b { font-size: 18px; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.device-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radius); background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow); overflow: hidden; transition: transform .6s var(--ease-out), box-shadow .4s; }
.device-card:hover { box-shadow: var(--shadow-lg); }
.device-card.is-online::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(79, 174, 117, .32); }
.device-card.is-paused { background: rgba(255, 252, 244, .9); }
.device-top { display: flex; align-items: center; gap: 12px; }
.device-name { flex: 1; min-width: 0; }
.device-name strong, .device-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-name strong { font-size: 16.5px; }
.device-name small { font-size: 13px; color: var(--muted-2); }
.device-spec { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--muted); }
.device-spec span { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-spec .icon { width: 16px; height: 16px; color: var(--muted-2); }
.load { display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.load b { text-align: right; font-variant-numeric: tabular-nums; }
.load-track { height: 8px; border-radius: 6px; background: rgba(24, 63, 54, .08); overflow: hidden; }
.load-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #7fbf98, #2f8a5d); animation: load-in 1.4s var(--ease-out) both; position: relative; overflow: hidden; }
.load-track i.gpu { background: linear-gradient(90deg, var(--coral-2), var(--coral-deep)); }
.load-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-100%); animation: load-sheen 2.4s ease-in-out infinite; }
@keyframes load-in { from { width: 0; } }
@keyframes load-sheen { to { transform: translateX(100%); } }
.device-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.device-foot small { display: block; font-size: 12px; color: var(--muted-2); font-weight: 600; }
.device-foot b { font-size: 16px; font-variant-numeric: tabular-nums; }
.hub-ribbon { position: absolute; top: 14px; right: -34px; display: flex; align-items: center; gap: 4px; padding: 3px 38px; transform: rotate(35deg); font-size: 12px; font-weight: 800; color: #fff; background: var(--pine); }
.hub-ribbon .icon { width: 12px; height: 12px; }
.device-add { align-items: center; justify-content: center; text-align: center; min-height: 260px; border: 2px dashed var(--line-2); background: rgba(255, 255, 255, .45); box-shadow: none; color: var(--muted); }
.device-add span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(135deg, var(--coral-2), var(--coral)); color: #fff; box-shadow: 0 16px 30px -14px rgba(217, 90, 53, .7); transition: transform .6s var(--ease-spring); }
.device-add span .icon { width: 30px; height: 30px; }
.device-add:hover span { transform: rotate(90deg) scale(1.08); }
.device-add strong { color: var(--ink); font-size: 16px; }
.device-add small { font-size: 13.5px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--muted); transition: color .3s, gap .4s var(--ease-spring); }
.back-link:hover { color: var(--ink); gap: 10px; }
.back-link .icon { width: 17px; height: 17px; }
.device-hero { display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 30px; background: linear-gradient(135deg, #fff, #fbf3ea); border: 1px solid #fff; box-shadow: var(--shadow); flex-wrap: wrap; }
.device-hero.is-online { background: linear-gradient(135deg, #fff, #eef7f0); }
.device-hero-icon { position: relative; }
.device-hero-icon .os-icon { width: 72px; height: 72px; padding: 18px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.device-hero-icon .ring { position: absolute; inset: -6px; border-radius: 28px; border: 2px solid rgba(79, 174, 117, .45); opacity: 0; }
.is-online .device-hero-icon .ring { opacity: 1; animation: ring-pulse 2.4s var(--ease-out) infinite; }
@keyframes ring-pulse { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.22); opacity: 0; } }
.device-hero-main { flex: 1; min-width: 220px; }
.rename { display: flex; align-items: center; gap: 6px; }
.rename h1 { font-size: clamp(26px, 3vw, 36px); overflow-wrap: anywhere; }
.device-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 8px; font-size: 14px; color: var(--muted); }
.pause-big { margin-left: auto; }
.controls-card { display: flex; flex-direction: column; gap: 4px; }
.save-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted-2); min-height: 26px; }
.save-state .icon { width: 15px; height: 15px; }
.save-state.is-saved { color: #2f8a5d; animation: pop .5s var(--ease-spring); }
.save-state.is-error { color: var(--red); }
.save-state.is-saving::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(24, 63, 54, .2); border-top-color: var(--pine); animation: spin .7s linear infinite; }
.control-row, .control-block { padding: 14px 0; border-top: 1px solid var(--line); }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.control-row:first-of-type { border-top: 0; }
.control-label { display: flex; align-items: center; gap: 14px; min-width: 0; }
.control-label > .icon { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--cream-2); color: var(--pine); }
.control-label strong { display: block; font-size: 15px; }
.control-label small { display: block; font-size: 13px; color: var(--muted-2); }
.control-block .control-label { margin-bottom: 4px; }
.control-block output { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--coral-deep); font-variant-numeric: tabular-nums; }
.control-block .segmented { margin-top: 10px; }
.time-window { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; animation: rise .5s var(--ease-out); }
.time-window label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.time-window input { width: 130px; min-height: 44px; }
.stats-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-stat small { display: block; font-size: 13px; color: var(--muted-2); font-weight: 600; }
.mini-stat strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.loads { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.specs-card h3 { margin-bottom: 12px; }
.specs { margin: 0; display: flex; flex-direction: column; }
.specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs > div:last-child { border-bottom: 0; }
.specs dt { color: var(--muted-2); font-weight: 600; }
.specs dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.specs.compact > div { padding: 6px 0; }
.attached-hub { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--mint); }
.attached-hub > .icon { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: #fff; color: var(--mint-ink); }
.attached-hub small, .attached-hub span { display: block; font-size: 12.5px; color: var(--mint-ink); }
.attached-hub strong { display: block; }
.table-scroll, .table-card { overflow-x: auto; }
.table-card { border-radius: var(--radius); background: rgba(255, 255, 255, .8); border: 1px solid #fff; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted-2); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background .25s; }
.table tbody tr:hover { background: rgba(248, 246, 239, .8); }
.table tr:last-child td { border-bottom: 0; }
.table .truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-2); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: var(--radius); border: 1.5px dashed rgba(216, 74, 58, .3); background: rgba(253, 233, 229, .4); }
.danger-zone p { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- Pairing modal ---------- */
.pair-body { display: flex; flex-direction: column; gap: 22px; }
.pair-stage { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.pair-code-wrap { position: relative; display: grid; place-items: center; width: 100%; padding: 22px 0; }
/* Countdown: a coral line that runs around the code card and shortens as the code ages. */
.pair-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.pair-ring rect { fill: none; stroke: rgba(24, 63, 54, .07); stroke-width: 3; x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); }
.pair-ring .pair-ring-fg { stroke: var(--coral); stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 6px rgba(239, 120, 85, .45)); }
.pair-code-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 140, .45), transparent); animation: glow-pulse 3s ease-in-out infinite; }
@keyframes glow-pulse { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.pair-code { position: relative; display: flex; gap: 4px; padding: 16px 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(24px, 6vw, 36px); font-weight: 800; letter-spacing: .04em; }
.pair-code span { display: inline-block; animation: code-in .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 45ms); }
.pair-code span.dash { color: var(--coral); }
@keyframes code-in { from { opacity: 0; transform: translateY(20px) rotateX(70deg); } }
.pair-meta { display: flex; align-items: center; gap: 12px; }
.pair-timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pair-timer .icon { width: 17px; height: 17px; }
.pair-wait { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.dots { display: inline-flex; gap: 4px; }
.dots i, .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2), .typing i:nth-child(2) { animation-delay: .15s; background: var(--gold); }
.dots i:nth-child(3), .typing i:nth-child(3) { animation-delay: .3s; background: #7fbf98; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
.pair-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pair-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--cream); animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
.pair-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pine); color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.pair-steps p { font-size: 14.5px; }
.pair-expired, .pair-success { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: pop .6s var(--ease-spring); }
.pair-expired > .icon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--gold-soft); color: #94621a; }
.pair-expired p, .pair-success p { color: var(--muted); max-width: 26em; }
.paired-device { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--mint); text-align: left; }
.paired-device small { display: block; font-size: 13px; color: var(--mint-ink); }

/* ---------- Modal & toast ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(13, 38, 33, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fade-in .35s ease both; overflow-y: auto; }
.modal-backdrop.is-leaving { animation: fade-out .3s ease forwards; }
.modal-backdrop.is-leaving .modal { animation: modal-out .3s ease forwards; }
@keyframes fade-out { to { opacity: 0; } }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px; border-radius: 30px; background: radial-gradient(circle at 100% 0%, #ffece2, transparent 45%), var(--paper); box-shadow: 0 60px 120px -30px rgba(13, 38, 33, .55); animation: modal-in .6s var(--ease-spring) both; }
.modal-sm { width: min(420px, 100%); }
.modal-lg { width: min(760px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(30px) scale(.92); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal-close { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cream-2); color: var(--pine); transition: transform .5s var(--ease-spring), background .3s; z-index: 2; }
.modal-close:hover { transform: rotate(90deg); background: var(--peach); }
.modal-title { display: flex; align-items: center; gap: 10px; padding-right: 44px; margin-bottom: 18px; font-size: 24px; }
.modal-title .icon { width: 24px; height: 24px; color: var(--coral); }
.modal-text { color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.modal.is-success { background: radial-gradient(circle at 50% 0%, #e3f3e8, transparent 55%), var(--paper); }
.toast-host { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; width: min(460px, 100% - 32px); }
.toast { position: relative; overflow: hidden; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--pine-deep); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: 0 20px 40px -14px rgba(13, 38, 33, .6); animation: toast-in .55s var(--ease-spring) both; }
.toast.is-leaving { animation: toast-out .35s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-20px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-14px) scale(.95); } }
.toast-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .14); flex-shrink: 0; }
.toast-icon .icon { width: 16px; height: 16px; }
.toast-success .toast-icon { background: #4fae75; }
.toast-error .toast-icon { background: var(--red); }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: left; animation: toast-bar linear forwards; }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1600; pointer-events: none; }

/* ---------- Node role ---------- */
.role-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.role-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 30px; background: rgba(255, 255, 255, .82); border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: var(--shadow); overflow: hidden; }
.role-card.is-current { border-color: rgba(239, 120, 85, .45); }
.role-card .btn, .role-card > .chip { align-self: flex-start; margin-top: auto; }
.role-hub { color: #eef3ec; background: radial-gradient(400px 260px at 100% 0%, rgba(255, 150, 112, .28), transparent 65%), linear-gradient(150deg, #1b4a3e, var(--pine-deep)); border-color: transparent; }
.role-card h3 { font-size: 22px; }
.role-card p { color: var(--muted); }
.role-card.role-hub h3 { color: #fffaf3; }
.role-card.role-hub p { color: rgba(238, 243, 236, .78); }
.role-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; background: linear-gradient(135deg, #ffe2d5, #ffc8b1); color: var(--coral-deep); animation: float-y 5s ease-in-out infinite; }
.role-hub .role-icon { background: rgba(255, 255, 255, .12); color: #ffc0a6; }
.role-icon .icon { width: 28px; height: 28px; }
.current-badge { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--coral); color: #fff; animation: pop .6s var(--ease-spring) .3s both; }
.current-badge .icon { width: 14px; height: 14px; }
.tick-list { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; }
.tick-list .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); margin-top: 1px; }
.role-hub .tick-list .icon { background: rgba(255, 255, 255, .14); color: #9fd0b0; }
.hub-forms { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-forms span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; font-weight: 700; }
.hub-forms .icon { width: 18px; height: 18px; color: #ffc0a6; }
.hub-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.hub-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 28px; background: rgba(255, 255, 255, .86); border: 1px solid #fff; box-shadow: var(--shadow); }
.hub-card.status-active { background: linear-gradient(160deg, #fff, #eef7f0); }
.hub-card-head { display: flex; align-items: center; gap: 14px; }
.hub-card-head > div { flex: 1; min-width: 0; }
.hub-card-head small { color: var(--muted-2); font-size: 13px; }
.hub-glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #3b8a6a, var(--pine)); flex-shrink: 0; }
.hub-glyph .icon { width: 26px; height: 26px; }
.ship-track { display: flex; align-items: center; gap: 6px; }
.ship-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.ship-step span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cream-2); color: var(--muted-2); transition: background .4s, color .4s; }
.ship-step span .icon { width: 18px; height: 18px; }
.ship-step small { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.ship-step.is-done span { background: var(--coral); color: #fff; animation: pop .6s var(--ease-spring) both; }
.ship-step.is-done small { color: var(--ink); }
.ship-line { flex: 1; height: 3px; border-radius: 3px; margin-bottom: 20px; background: var(--cream-2); }
.hub-device { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--cream); }
.hub-device > div { flex: 1; min-width: 0; }
.hub-device > .icon { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: #fff; color: var(--coral-deep); }
.hub-device small { display: block; color: var(--muted-2); font-size: 13px; }
.hub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 4px; }
.timeline::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--line-2), transparent); }
.timeline-item { position: relative; display: flex; gap: 16px; }
.timeline-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); color: var(--muted); flex-shrink: 0; }
.timeline-dot .icon { width: 18px; height: 18px; }
.status-approved .timeline-dot { background: #4fae75; border-color: #4fae75; color: #fff; }
.status-rejected .timeline-dot { background: #fde3df; border-color: #f2b8af; color: #b73b2c; }
.status-pending .timeline-dot { border-color: var(--gold); color: #94621a; animation: ring-gold 2s ease-in-out infinite; }
@keyframes ring-gold { 50% { box-shadow: 0 0 0 7px rgba(227, 178, 107, .2); } }
.timeline-body { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .82); border: 1px solid #fff; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.timeline-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.timeline-body small { color: var(--muted-2); font-size: 13px; }
.admin-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--cream); font-size: 14px; color: var(--muted); }
.admin-note .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--coral); }
.apply-form { display: flex; flex-direction: column; gap: 22px; padding: 28px; }
.apply-form[data-form="box"] .only-software, .apply-form[data-form="software"] .only-box { display: none; }
.apply-form fieldset { animation: rise .5s var(--ease-out) both; }
.box-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.box-option input { position: absolute; opacity: 0; pointer-events: none; }
.box-option-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; border-radius: 20px; border: 2px solid var(--line-2); background: #fff; cursor: pointer; transition: border-color .3s, box-shadow .3s, transform .45s var(--ease-spring); }
.box-option-card:hover { transform: translateY(-3px); }
.box-option input:checked + .box-option-card { border-color: var(--coral); box-shadow: 0 0 0 5px rgba(239, 120, 85, .14); }
.box-option input:focus-visible + .box-option-card { outline: 3px solid var(--coral); outline-offset: 3px; }
.box-art { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 15px; background: linear-gradient(135deg, #ffe2d5, #ffc8b1); color: var(--coral-deep); }
.box-option-card small { color: var(--muted); font-size: 13px; }
.box-option-card p { font-size: 13.5px; color: var(--muted); }
.box-option-card em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #94621a; }

/* ---------- Earnings ---------- */
.earn-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 20px; align-items: stretch; }
.earn-balance { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px 30px; border-radius: 30px; color: #f1f5ef; background: radial-gradient(360px 240px at 100% 0%, rgba(255, 150, 112, .3), transparent 65%), linear-gradient(150deg, #1b4a3e, var(--pine-deep)); box-shadow: 0 30px 60px -30px rgba(13, 38, 33, .7); }
.earn-balance small { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #b8d5c2; }
.earn-balance strong { font-size: clamp(40px, 4vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.earn-balance span { font-size: 14px; color: rgba(238, 243, 236, .7); }
.earn-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.earn-totals > div { grid-column: span 2; }
.earn-totals > div:nth-child(n+4) { grid-column: span 3; }
.earn-totals > div { position: relative; padding: 16px 18px; border-radius: 22px; background: rgba(255, 255, 255, .8); border: 1px solid #fff; box-shadow: var(--shadow-sm); }
.earn-totals > div > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--cream-2); color: var(--pine); margin-bottom: 8px; }
.earn-totals .icon { width: 17px; height: 17px; }
.earn-totals small { display: block; font-size: 13px; color: var(--muted-2); font-weight: 600; }
.earn-totals b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.withdraw-form { display: flex; flex-direction: column; gap: 14px; }
.method-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.method-pick label { position: relative; }
.method-pick input { position: absolute; opacity: 0; }
.method-pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-spring); }
.method-pick span:hover { transform: translateY(-2px); }
.method-pick input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; }
.method-pick input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chips button { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); background: rgba(24, 63, 54, .05); transition: background .3s, color .3s; }
.filter-chips button.is-on { background: var(--pine); color: #fff; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; font-weight: 700; color: var(--muted); }

/* ---------- Support ---------- */
.support-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 20px; padding: 36px 40px; border-radius: 34px; color: #f1f5ef; background: radial-gradient(500px 340px at 95% 10%, rgba(255, 150, 112, .32), transparent 60%), linear-gradient(140deg, #1b4a3e, var(--pine-deep)); }
.support-hero h1 { color: #fffaf3; }
.support-hero p { margin: 10px 0 22px; color: rgba(238, 243, 236, .74); }
.support-art { position: relative; justify-self: center; width: 180px; }
.support-mascot { width: 180px; height: 180px; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .35)); }
.speech { position: absolute; left: 70%; top: -6px; white-space: nowrap; padding: 9px 15px; border-radius: 16px; background: #fff; color: var(--pine); font-size: 14px; font-weight: 800; box-shadow: var(--shadow); animation: speech 4s var(--ease-spring) infinite; transform-origin: 0 100%; }
.speech::after { content: ""; position: absolute; left: 18px; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
@keyframes speech { 0%, 100% { transform: scale(1) rotate(0); } 8% { transform: scale(1.08) rotate(-3deg); } 16% { transform: scale(1) rotate(0); } }
.topic-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border-radius: 24px; background: rgba(255, 255, 255, .82); border: 1px solid #fff; box-shadow: var(--shadow); text-align: left; overflow: hidden; }
.topic-card > .icon { width: 46px; height: 46px; padding: 12px; border-radius: 15px; margin-bottom: 6px; background: linear-gradient(135deg, #ffe2d5, #ffc8b1); color: var(--coral-deep); transition: transform .6s var(--ease-spring); }
.topic-card:hover > .icon { transform: rotate(-10deg) scale(1.1); }
.topic-card small { color: var(--muted); font-size: 13.5px; }
.conv-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 16px; text-align: left; transition: background .25s, transform .4s var(--ease-spring); }
.conv-list button:hover { background: var(--cream); transform: translateX(4px); }
.conv-list button > div { flex: 1; min-width: 0; }
.conv-list strong, .conv-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list small { color: var(--muted-2); font-size: 13px; }
.conv-list time { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }
.conv-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--peach); color: var(--coral-deep); flex-shrink: 0; }
.conv-icon .icon { width: 18px; height: 18px; }

/* ---------- Settings ---------- */
.profile-row { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.profile-row small { display: block; color: var(--muted-2); font-size: 13px; }
.session-list li { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); transition: opacity .35s, transform .4s var(--ease-out); }
.session-list li.is-leaving { opacity: 0; transform: translateX(30px); }
.session-list li:last-child { border-bottom: 0; }
.session-list li > div { flex: 1; min-width: 0; }
.session-list strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.session-list small { display: block; color: var(--muted-2); font-size: 13px; }
.session-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--cream-2); color: var(--pine); }

/* ---------- Heycat Model ---------- */
.model-layout { position: relative; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; height: calc(100vh - 74px - 60px); height: calc(100dvh - 74px - 60px); min-height: 520px; }
/* The Model page is a full-height chat: no extra bottom gutter, and the floating support launcher stays out of the composer's way. */
body[data-page="model"] .app-host { padding-bottom: 30px; }
body[data-page="model"] .hc-support:not([data-open="true"]) .hc-support__launcher, body[data-page="model"] .hc-support:not([data-open="true"]) .hc-support__peek { visibility: hidden; pointer-events: none; }
.conv-side { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 28px; background: rgba(255, 255, 255, .78); border: 1px solid #fff; box-shadow: var(--shadow); min-height: 0; }
.conv-scroll { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.conv-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.conv-items li { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.conv-items a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; transition: background .25s; }
.conv-items a:hover { background: var(--cream); }
.conv-items a.is-on { background: var(--pine); color: #fff; }
.conv-items a.is-on small { color: rgba(255, 255, 255, .65); }
.conv-items a .icon { width: 18px; height: 18px; color: var(--muted-2); flex-shrink: 0; }
.conv-items a.is-on .icon { color: var(--coral-2); }
.conv-items span { min-width: 0; }
.conv-items strong, .conv-items small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-items strong { font-size: 14px; font-weight: 600; }
.conv-items small { font-size: 12px; color: var(--muted-2); }
.conv-empty { padding: 16px 12px; font-size: 14px; color: var(--muted-2); text-align: center; }
.usage-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--cream); }
.usage-mini small { display: block; font-size: 12px; color: var(--muted-2); font-weight: 600; }
.usage-mini strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.conv-scrim { display: none; }
.chat-main { display: flex; flex-direction: column; min-height: 0; border-radius: 30px; background: rgba(255, 255, 255, .82); border: 1px solid #fff; box-shadow: var(--shadow); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.conv-toggle { display: none; }
.chat-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.chat-title > div { min-width: 0; }
.chat-title strong, .chat-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title small { font-size: 12.5px; color: var(--muted-2); }
.model-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, var(--coral-2), var(--coral-deep)); color: #fff; flex-shrink: 0; box-shadow: 0 10px 20px -10px rgba(217, 90, 53, .7); }
.model-mark .icon { fill: currentColor; width: 18px; height: 18px; animation: spin 8s linear infinite; }
.chat-head-actions { display: flex; gap: 2px; }
.chat-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.chat-inner { max-width: 820px; margin: 0 auto; padding: 26px 24px 20px; display: flex; flex-direction: column; gap: 20px; }
.chat-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 0 10px; animation: rise .7s var(--ease-out) both; }
.chat-mascot { width: 104px; height: 104px; animation: bob 4.6s ease-in-out infinite; filter: drop-shadow(0 16px 16px rgba(217, 90, 53, .25)); }
.chat-welcome p { color: var(--muted); }
.demo-banner { display: flex; gap: 10px; align-items: flex-start; max-width: 520px; padding: 12px 16px; border-radius: 16px; background: var(--gold-soft); color: #85571a; font-size: 14px; text-align: left; }
.demo-banner .icon { width: 18px; height: 18px; margin-top: 2px; }
.suggest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 620px; margin-top: 10px; }
.suggest { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-align: left; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-sm); animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 200ms); transition: transform .45s var(--ease-spring), border-color .3s, box-shadow .3s; }
.suggest:hover { transform: translateY(-3px); border-color: rgba(239, 120, 85, .4); box-shadow: var(--shadow); }
.suggest .icon { width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: var(--peach); color: var(--coral-deep); }
.msg { display: flex; gap: 12px; animation: msg-in .6s var(--ease-spring) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.msg-user { justify-content: flex-end; }
.msg-user .bubble { max-width: min(78%, 620px); padding: 12px 18px; border-radius: 22px 22px 6px 22px; background: var(--pine); color: #f6f8f2; font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; box-shadow: 0 10px 20px -14px rgba(24, 63, 54, .7); }
.msg-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, #fff1e9, #ffd9c7); flex-shrink: 0; }
.msg-avatar svg { width: 24px; height: 24px; }
.msg-body { flex: 1; min-width: 0; }
.rich { font-size: 15.5px; line-height: 1.8; overflow-wrap: anywhere; }
.rich p + p, .rich p + ul, .rich ul + p, .rich p + ol, .rich ol + p, .rich pre + p, .rich p + pre { margin-top: 10px; }
.rich ul, .rich ol { margin: 0; padding-left: 22px; }
.rich li + li { margin-top: 4px; }
.rich-heading { font-weight: 800; }
.code-block { margin: 10px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--pine-ink); color: #e6f0ea; font-size: 13.5px; overflow-x: auto; }
.code-block code { background: none; padding: 0; color: inherit; }
.msg-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted-2); opacity: 0; transition: opacity .3s; }
.msg:hover .msg-foot, .msg:focus-within .msg-foot { opacity: 1; }
.typing { display: inline-flex; gap: 5px; padding: 10px 14px; border-radius: 16px; background: var(--cream); }
.caret { display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; vertical-align: -3px; border-radius: 2px; background: var(--coral); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.msg-error, .msg-stopped { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #a8382a; }
.msg-stopped { color: var(--muted-2); margin-top: 8px; }
.msg-error .icon { width: 17px; height: 17px; }
.balance-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--peach); }
.balance-card > .icon { width: 42px; height: 42px; padding: 10px; border-radius: 14px; background: #fff; color: var(--coral-deep); }
.balance-card p { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.composer { display: flex; align-items: flex-end; gap: 10px; margin: 0 auto; width: min(820px, 100% - 32px); padding: 8px 8px 8px 18px; border-radius: 24px; background: var(--cream); border: 1.5px solid var(--line-2); transition: border-color .3s, box-shadow .3s, background .3s; }
.composer:focus-within { background: #fff; border-color: rgba(239, 120, 85, .55); box-shadow: 0 0 0 5px rgba(239, 120, 85, .12); }
.transcript { display: flex; flex-direction: column; gap: 14px; max-height: min(56vh, 520px); overflow-y: auto; padding: 4px 4px 12px; margin-bottom: 8px; }
.transcript-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; animation: rise .5s var(--ease-out) both; }
.transcript-row small { font-size: 12px; font-weight: 700; color: var(--muted-2); padding: 0 6px; }
.transcript-row .bubble { max-width: 88%; padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: var(--cream-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.transcript-row.is-user { align-items: flex-end; }
.transcript-row.is-user .bubble { border-radius: 18px 18px 6px 18px; color: #fff; background: linear-gradient(135deg, var(--pine-2), var(--pine)); }
.transcript-row.is-agent .bubble { background: var(--gold-soft); }
.transcript-note { align-self: center; font-size: 12.5px; color: var(--muted-2); padding: 4px 12px; border-radius: 999px; background: rgba(24, 63, 54, .05); }
.transcript + .modal-actions { justify-content: space-between; align-items: center; }
.composer textarea:focus-visible { outline: none; }
.composer textarea { flex: 1; min-height: 44px !important; max-height: 220px; padding: 10px 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; resize: none; font-size: 15.5px; line-height: 1.55; }
.send { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 16px; background: var(--pine); color: #fff; transition: background .3s, transform .45s var(--ease-spring); }
.send:hover { background: var(--coral); transform: translateY(-2px) rotate(-8deg); }
.send.is-stop { background: var(--coral); animation: stop-pulse 1.4s ease-in-out infinite; }
@keyframes stop-pulse { 50% { box-shadow: 0 0 0 6px rgba(239, 120, 85, .2); } }
.composer-note { padding: 8px 16px 14px; text-align: center; font-size: 12.5px; color: var(--muted-2); }
.usage-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.usage-stats > div { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.usage-stats small { display: block; font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.usage-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* ---------- Download ---------- */
.download-page { gap: 40px; }
.dl-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 20px 0 10px; }
.dl-hero h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.08; letter-spacing: -.045em; font-weight: 900; }
.dl-hero h1 span { color: var(--coral); background: linear-gradient(100deg, #e4613c, #ef7855 30%, #f6a46f 50%, #ef7855 70%, #e4613c); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 6s ease-in-out infinite; }
html[lang="en"] .dl-hero h1 { font-family: var(--serif); font-weight: 600; font-variation-settings: "SOFT" 100; }
html[lang="en"] .dl-hero h1 span { font-style: italic; }
.lead { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 32em; }
.dl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 16px; }
.dl-note { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted-2); }
.dl-note .icon { width: 16px; height: 16px; }
.dl-hero-art { position: relative; display: grid; place-items: center; padding: 30px; }
.dl-hero-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 213, 192, .9), rgba(220, 235, 221, .4) 55%, transparent 70%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }
.dl-window { position: relative; width: min(360px, 100%); border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-lg); overflow: hidden; animation: float-y 6s ease-in-out infinite; transform: rotate(-3deg); }
.dl-window-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dl-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #f3a58b; } .dl-window-bar i:nth-child(2) { background: #f2cf8a; } .dl-window-bar i:nth-child(3) { background: #9fd0b0; }
.dl-window-bar span { margin-left: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.dl-window-body { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.dl-cat { width: 60px; height: 60px; }
.dl-pair small { display: block; font-size: 12px; font-weight: 700; color: var(--muted-2); letter-spacing: .08em; }
.dl-pair strong { font-family: ui-monospace, Menlo, monospace; font-size: 26px; letter-spacing: .08em; }
.dl-meter { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.dl-meter i { position: relative; display: block; height: 8px; border-radius: 6px; background: rgba(24, 63, 54, .08); overflow: hidden; }
.dl-meter i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--coral-2), var(--coral)); animation: meter 3.6s ease-in-out infinite alternate; }
.dl-meter:nth-child(4) i::after { background: linear-gradient(90deg, #7fbf98, #2f8a5d); animation-delay: -1.8s; }
@keyframes meter { from { transform: scaleX(.4); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.dl-status { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #27744a; }
.float-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: 13.5px; font-weight: 700; white-space: nowrap; animation: float-y 5s ease-in-out infinite; }
.float-chip .icon { width: 17px; height: 17px; color: var(--coral); }
.fc-1 { top: 8%; right: 0; } .fc-2 { bottom: 8%; left: 0; animation-delay: -2.5s; }
.steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step-pill { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .78); border: 1px solid #fff; box-shadow: var(--shadow-sm); }
.step-n { font-family: var(--serif); font-style: italic; font-size: 30px; font-weight: 600; color: var(--coral); line-height: 1; margin-bottom: 6px; font-variation-settings: "SOFT" 100; }
.step-pill small { color: var(--muted); font-size: 13.5px; }
.step-pill:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--coral); border-right: 2px solid var(--coral); transform: translateY(-50%) rotate(45deg); opacity: .6; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(3px, -50%) rotate(45deg); } }
.platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.platform-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 28px; background: rgba(255, 255, 255, .84); border: 1.5px solid #fff; box-shadow: var(--shadow); overflow: hidden; }
.platform-card.is-you { border-color: rgba(239, 120, 85, .5); box-shadow: var(--shadow-lg), 0 0 0 6px rgba(239, 120, 85, .08); }
.you-badge { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12.5px; font-weight: 800; animation: pop .6s var(--ease-spring) .4s both; }
.you-badge .icon { width: 13px; height: 13px; }
.platform-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(135deg, #f3f0e6, #e8e3d4); color: var(--pine); transition: transform .6s var(--ease-spring); }
.platform-card:hover .platform-icon { transform: rotate(-8deg) scale(1.06); }
.platform-icon .icon { width: 30px; height: 30px; }
.platform-req { font-size: 13.5px; color: var(--muted-2); margin-top: -8px; }
.build { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--cream); }
.build-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.build-arch { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--muted-2); }
.build-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted-2); }
.hash { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; text-align: left; transition: border-color .3s; }
.hash:hover { border-color: rgba(239, 120, 85, .4); }
.hash span { font-weight: 800; color: var(--muted-2); }
.hash code { flex: 1; background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; }
.hash .icon { width: 15px; height: 15px; color: var(--muted-2); }
.hash.is-copied .icon { color: #2f8a5d; }
.notes summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--coral-deep); }
.notes p { margin-top: 6px; font-size: 13.5px; color: var(--muted); white-space: pre-wrap; }
.soon { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 20px; border: 1.5px dashed var(--line-2); background: linear-gradient(110deg, rgba(248, 246, 239, .6) 40%, rgba(255, 255, 255, .95) 50%, rgba(248, 246, 239, .6) 60%); background-size: 250% 100%; animation: shimmer 3.2s linear infinite; }
.soon p { font-size: 13.5px; color: var(--muted); }
.soon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(227, 178, 107, .5); animation: ring-gold 2s ease-in-out infinite; }
.hub-band { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 40px; border-radius: 36px; color: #eef3ec; background: radial-gradient(600px 340px at 100% 0%, rgba(255, 150, 112, .26), transparent 60%), radial-gradient(500px 340px at 0% 100%, rgba(118, 205, 165, .2), transparent 60%), linear-gradient(150deg, #1b4a3e, var(--pine-deep)); isolation: isolate; }
.hub-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 26px 26px; animation: grid-pan 30s linear infinite; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hub-option { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 28px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hub-option h3 { color: #fffaf3; font-size: 22px; }
.hub-option p { color: rgba(238, 243, 236, .74); font-size: 14.5px; }
.hub-option .btn { align-self: flex-start; margin-top: auto; }
.hub-option-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; background: linear-gradient(135deg, var(--coral-2), var(--coral-deep)); color: #fff; box-shadow: 0 16px 30px -14px rgba(217, 90, 53, .8); animation: float-y 5s ease-in-out infinite; }
.hub-option-icon .icon { width: 28px; height: 28px; }
.box-models { display: flex; flex-direction: column; gap: 8px; }
.box-model { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.box-model strong { display: block; color: #fffaf3; }
.box-model span, .box-model small { display: block; font-size: 13px; color: rgba(238, 243, 236, .7); }
.box-model small { color: #ffc0a6; }
.mini-builds { display: flex; flex-direction: column; gap: 8px; }
.mini-build { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.mini-build > .icon { width: 22px; height: 22px; color: #9fd0b0; }
.mini-build a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13.5px; font-weight: 700; color: #ffc0a6; }
.mini-build a .icon { width: 15px; height: 15px; }
.soon-inline { margin-left: auto; font-size: 13px; font-weight: 700; color: rgba(238, 243, 236, .6); }
.hub-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: rgba(238, 243, 236, .66); }
.hub-note .icon { width: 16px; height: 16px; margin-top: 3px; }
.faq-band { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.faq-side { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 6px; }
.faq-side .btn { margin-top: 6px; }
.faq-cat { position: absolute; right: 8%; bottom: -8px; width: 64px; height: 64px; opacity: .9; animation: float-y 5s ease-in-out infinite; }
.faq-mini { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-radius: 20px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); overflow: hidden; transition: background .3s; }
.faq-item[open] { background: #fff; box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-2); flex-shrink: 0; transition: transform .5s var(--ease-spring), background .3s; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--pine); }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i { transform: rotate(135deg); background: var(--coral); }
.faq-item[open] summary i::before, .faq-item[open] summary i::after { background: #fff; }
.faq-item p { padding: 0 22px 18px; color: var(--muted); animation: rise .5s var(--ease-out); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earn-hero { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  :root { --sidebar: 240px; }
  .grid-wide-left, .grid-2 { grid-template-columns: 1fr; }
  .dash-hero { grid-template-columns: 1fr; }
  .dash-hero-art { display: none; }
  .platform-grid { grid-template-columns: 1fr 1fr; }
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-pill:nth-child(2)::after { display: none; }
  .auth-art { padding: 34px; }
}
@media (max-width: 960px) {
  .faq-band { grid-template-columns: 1fr; gap: 20px; }
  .faq-cat { display: none; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-105%); transition: transform .55s var(--ease-io); box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .4); }
  .shell.sidebar-open .sidebar { transform: none; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(13, 38, 33, .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .4s; }
  .shell.sidebar-open .side-scrim { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 0 18px; }
  .app-host { padding: 22px 18px 110px; }
  .view.is-leaving { left: 18px; right: 18px; top: 22px; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-art { min-height: 0; padding: 26px 24px 30px; }
  .auth-hero { display: none; }
  .auth-stage, .auth-foot { display: none; }
  .auth-art .auth-brand .brand-cn { border-color: rgba(255, 255, 255, .25); }
  .auth-main { padding: 18px 20px 90px; }
  .model-layout { grid-template-columns: 1fr; height: calc(100vh - 74px - 44px); height: calc(100dvh - 74px - 44px); }
  body[data-page="model"] .app-host { padding-bottom: 22px; }
  .conv-side { position: fixed; left: 12px; top: 86px; bottom: 12px; z-index: 70; width: min(300px, 84vw); transform: translateX(-115%); transition: transform .5s var(--ease-io); box-shadow: var(--shadow-lg); background: var(--paper); }
  .model-layout.conv-open .conv-side { transform: none; }
  .conv-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(13, 38, 33, .35); opacity: 0; pointer-events: none; transition: opacity .4s; display: block; }
  .model-layout.conv-open .conv-scrim { opacity: 1; pointer-events: auto; }
  .conv-toggle { display: inline-grid; }
  .dl-hero { grid-template-columns: 1fr; }
  .dl-hero-art { max-width: 460px; width: 100%; margin: 0 auto; }
  .role-choice, .hub-grid { grid-template-columns: 1fr; }
  .support-hero { grid-template-columns: 1fr; }
  .support-art { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chat-head { gap: 8px; padding: 12px 12px; }
  .chat-head .model-mark { display: none; }
  .chat-title small { display: none; }
  body { font-size: 15px; }
  .hide-sm { display: none !important; }
  .topbar { height: 64px; gap: 6px; padding: 0 12px; }
  .balance-pill { padding-right: 10px; }
  .balance-pill small { display: none; }
  .lang-toggle span { display: none; }
  .lang-toggle { padding: 0 10px; }
  .app-host { padding: 18px 14px 110px; }
  .view.is-leaving { left: 14px; right: 14px; top: 18px; }
  .page { gap: 18px; }
  .card { padding: 18px; border-radius: 22px; }
  .dash-hero, .support-hero { padding: 26px 22px; border-radius: 28px; }
  .stat-grid { gap: 12px; }
  .stat { padding: 16px; }
  .stat strong { font-size: 24px; }
  .stat-icon { width: 38px; height: 38px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-grid, .hub-list { grid-template-columns: 1fr; }
  .device-hero { padding: 20px; gap: 14px; }
  .pause-big { width: 100%; margin-left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .segmented.big { grid-template-columns: 1fr; }
  .earn-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earn-totals > div, .earn-totals > div:nth-child(n+4) { grid-column: auto; }
  .earn-totals > div:last-child { grid-column: span 2; }
  .platform-grid { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .step-pill { padding: 14px 16px; }
  .step-pill::after { display: none; }
  .dl-hero-art { padding: 40px 6px 34px; }
  .fc-1 { top: 0; right: 4px; } .fc-2 { bottom: 0; left: 4px; }
  .float-chip { padding: 8px 13px; font-size: 13px; }
  .step-pill::after { display: none; }
  .hub-band { padding: 26px 20px; border-radius: 28px; }
  .site-header-inner { height: 64px; gap: 10px; width: calc(100% - 28px); }
  .site-nav { display: none; }
  .site-actions { gap: 6px; }
  .site-actions .btn-sm { padding-left: 13px; padding-right: 13px; }
  .site-host { width: calc(100% - 28px); padding-top: 22px; }
  .site-footer { width: calc(100% - 28px); }
  .auth-card { padding: 26px 20px; border-radius: 26px; }
  .modal { padding: 26px 20px; border-radius: 26px; }
  .modal-title { font-size: 21px; }
  .pair-code { padding: 12px 14px; letter-spacing: 0; }
  .suggest-grid { grid-template-columns: 1fr; }
  .chat-inner { padding: 18px 14px; }
  .composer { width: calc(100% - 20px); }
  .msg-user .bubble { max-width: 88%; }
  .usage-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-layout { height: calc(100vh - 64px - 36px); height: calc(100dvh - 64px - 36px); min-height: 460px; }
  body[data-page="model"] .app-host { padding-bottom: 18px; }
  .conv-side { top: 76px; }
  .table th, .table td { padding: 10px; }
  .danger-zone { padding: 18px; }
  .stats-card { grid-template-columns: 1fr 1fr; }
  .hero-balance strong { font-size: 44px; }
  .ship-step small { font-size: 12px; }
}