:root {
  --ink: #14231f;
  --ink-2: #314c43;
  --muted: #6f7f79;
  --line: #d8dfd9;
  --paper: #f5f2eb;
  --panel: #ffffff;
  --mint: #d7e5d4;
  --mint-deep: #2f6654;
  --coral: #bd8659;
  --soft: #eef2ed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea, select { font: inherit; }
.auth-required { min-height: 100vh; overflow: auto; }
.auth-required .app-shell { display: none; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; background: radial-gradient(circle at 15% 10%, rgba(203,233,223,.7), transparent 32%), var(--paper); }
.auth-orbit { width: min(480px, 100%); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin: 0 0 18px 6px; }
.auth-brand .auth-locale-toggle { margin-left: auto; }
.auth-mark { width: 42px; height: 42px; object-fit: cover; object-position: 50% 42%; border-radius: 12px; }
.auth-brand strong { display: block; color: var(--ink); font-family: Georgia, serif; font-size: 21px; font-weight: 600; }
.auth-brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.auth-card { padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 22px 60px rgba(23,45,59,.12); }
.auth-card h1 { margin: 10px 0 10px; font-size: 37px; letter-spacing: -.02em; }
.auth-lede { margin-bottom: 25px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-form .field { margin-bottom: 17px; }
.auth-form .primary-button { margin-top: 7px; }
.auth-stepper { display: flex; gap: 8px; margin: 0 0 22px; color: var(--muted); font-size: 11px; }
.auth-stepper span { padding: 7px 10px; border-radius: 999px; background: #f0f5f3; }
.auth-stepper .done, .auth-stepper .current { color: var(--mint-deep); background: var(--mint); font-weight: 700; }
.consent-row { display: flex; align-items: flex-start; gap: 9px; margin: 3px 0 12px; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.consent-row input { margin-top: 3px; accent-color: var(--mint-deep); }
.auth-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-message { min-height: 20px; margin: 12px 0 0; color: #a04e36; font-size: 12px; line-height: 1.5; }
.auth-link { display: block; margin: 16px auto 0; padding: 0; border: 0; color: var(--mint-deep); background: transparent; font-size: 12px; font-weight: 700; }
.auth-link:hover { text-decoration: underline; }
.auth-footer { margin: 15px 0 0 6px; color: var(--muted); font-size: 11px; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; height: 100vh; }
.sidebar { position: sticky; top: 0; width: 255px; height: 100vh; flex: 0 0 255px; padding: 28px 18px 20px; background: var(--ink); color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 9px 32px; }
.brand-mark { width: 38px; height: 38px; object-fit: cover; object-position: 50% 42%; border-radius: 11px; }
.brand-lockup strong { display: block; font-family: Georgia, serif; font-size: 20px; letter-spacing: .01em; }
.brand-lockup span { display: block; margin-top: 3px; color: #9ab4b7; font-size: 11px; letter-spacing: .08em; }
.workspace-label { padding: 0 12px 12px; color: #78939a; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.primary-nav { display: grid; gap: 5px; }
.nav-item { border: 0; border-radius: 9px; padding: 12px 13px; text-align: left; color: #b8cbcd; background: transparent; display: flex; align-items: center; gap: 12px; font-size: 14px; transition: .18s ease; }
.admin-nav[hidden] { display: none !important; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active { color: var(--ink); background: var(--mint); font-weight: 700; }
.nav-icon { width: 18px; text-align: center; font-size: 17px; }
.sidebar-footer { margin-top: auto; padding: 16px 11px 0; border-top: 1px solid rgba(255,255,255,.12); color: #a5bbbd; font-size: 12px; }
.sidebar-footer small { display: block; margin: 8px 0 0 15px; color: #718d92; line-height: 1.4; }
.sidebar-settings { width: 100%; margin-top: 12px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e9ad73; vertical-align: 1px; }
.main-content { min-width: 0; flex: 1; height: 100vh; overflow-y: auto; }
.topbar { position: sticky; top: 0; z-index: 10; height: 74px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fbfaf6; }
.breadcrumb { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); }
.slash { color: #becac8; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.status-chip { padding: 7px 11px; border: 1px solid #e4d7c8; border-radius: 999px; color: #8b6c54; background: #fff9f1; font-size: 12px; }
.locale-toggle { min-width: 38px; height: 29px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.locale-toggle:hover { border-color: var(--mint-deep); color: var(--mint-deep); background: var(--soft); }
.icon-button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); background: #fff; }
.avatar { width: 31px; height: 31px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: var(--mint); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.page-content { max-width: 1260px; padding: 50px 54px 70px; margin: 0 auto; }
.eyebrow { color: var(--mint-deep); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-family: Georgia, serif; font-size: clamp(34px, 4vw, 54px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
h2 { margin-bottom: 10px; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
h3 { margin-bottom: 8px; font-size: 15px; }
.lede { max-width: 580px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 42px; }
.hero-note { max-width: 230px; padding: 15px 17px; border-left: 3px solid var(--coral); color: var(--ink-2); background: #fff; font-size: 13px; line-height: 1.55; }
.identity-panel { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 24px; align-items: center; margin: 0 0 42px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.identity-panel h2 { margin: 7px 0 8px; font-size: 23px; }
.identity-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; color: var(--muted); font-size: 13px; }
.identity-summary .text-action { margin-top: 0; }
.identity-panel p { max-width: 280px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.identity-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.identity-option { min-height: 100px; padding: 13px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); background: #fcfdfc; text-align: left; transition: .18s ease; }
.identity-option:hover { border-color: var(--mint-deep); transform: translateY(-1px); }
.identity-option.selected { border-color: var(--mint-deep); background: var(--mint); box-shadow: 0 0 0 2px rgba(36,118,110,.08); }
.identity-option span { display: block; margin-bottom: 12px; color: var(--mint-deep); font-size: 18px; }
.identity-option strong { display: block; font-size: 12px; }
.identity-option small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.onboarding-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(23,45,59,.55); backdrop-filter: blur(4px); }
.onboarding-modal { width: min(620px, 100%); padding: 32px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; background: var(--paper); box-shadow: 0 24px 80px rgba(10,25,34,.3); }
.onboarding-modal h2 { margin: 10px 0 9px; font-size: 31px; }
.onboarding-modal > p { max-width: 470px; margin-bottom: 23px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.onboarding-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.identity-detail-field { margin: 20px 0 0; }
.identity-detail-field input { background: #fff; }
.onboarding-submit { margin-top: 22px; }
.onboarding-submit:disabled { cursor: not-allowed; opacity: .42; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card { min-height: 214px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 9px 30px rgba(23,45,59,.08); }
.focus-stage { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
.focus-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: center; gap: 40px 32px; padding: 48px 36px 32px; margin-bottom: 24px; border-radius: 12px; }
.focus-stage .stage-meta { position: absolute; top: 24px; right: 28px; left: 30px; display: flex; justify-content: space-between; color: #8db5aa; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.hero-portrait { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 1; border: 1px solid rgba(215,229,212,.62); background: #050707; box-shadow: 18px 22px 0 rgba(3,14,18,.3); }
.hero-portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: contrast(1.14) saturate(.7); transform: scale(1.04); }
.hero-portrait-caption { position: absolute; right: -18px; bottom: 20px; z-index: 5; padding: 8px 11px; color: var(--ink); background: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .11em; transform: rotate(-4deg); }
.hero-portrait-caption span, .hero-portrait-index { display: none; }
.stage-review-entry { position: absolute; right: 30px; bottom: 24px; z-index: 6; width: min(280px, 40%); min-height: 130px; padding: 16px 18px; border: 1px solid rgba(215,229,212,.35); background: rgba(16,43,53,.88); color: #fff; }
.stage-review-entry h3 { margin: 8px 0 6px; color: #fff; font-family: Georgia, serif; font-size: 18px; }
.stage-review-entry p { margin: 0 0 9px; color: #b4cfca; font-size: 11px; line-height: 1.45; }
.stage-review-entry .text-action { color: var(--mint); }
.focus-stage + .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.focus-stage::before { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(215,229,212,.055) 59px 60px), repeating-linear-gradient(0deg, transparent 0 58px, rgba(215,229,212,.04) 59px 60px); content: ''; animation: story-grid-shift 15s linear infinite; }
.focus-stage::after { position: absolute; right: -18%; bottom: -62%; width: 72%; height: 110%; border: 1px solid rgba(215,229,212,.2); border-radius: 50%; content: ''; animation: story-orbit 14s ease-in-out infinite alternate; }
.focus-stage-copy { grid-column: 1; grid-row: 1; min-width: 0; position: relative; z-index: 2; transition: transform .2s ease-out; transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px), 0); }
.focus-stage-copy h2 { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.2; }
.focus-stage-copy p { color: #b4cfca; line-height: 1.8; }
.focus-stage-copy .eyebrow { color: #a7cfc0; margin-bottom: 16px; }
.lens-ribbon { display: flex; flex-wrap: wrap; gap: 16px; color: #d7e5d4; font-size: 12px; margin-top: 24px; }
.focus-stage::after { pointer-events: none; }
.focus-stage .letter-glitch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .42; mask-image: radial-gradient(ellipse at center, #0007, #000 65%, transparent 100%); }
.focus-stage:has(.letter-glitch)::before { background: none; animation: none; }
.focus-stage:has(.letter-glitch)::after { display: none; }
.focus-stage:has(.letter-glitch) .focus-stage-copy { padding: 18px; border-radius: 12px; background: rgba(16, 35, 30, .88); }
.leaflet-pocket { z-index: 2; }
.hero-portrait { position: relative; z-index: 3; overflow: hidden; transition: transform .17s ease-out; transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }
.hero-portrait::before { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.1) 11px, transparent 12px); mix-blend-mode: screen; opacity: .25; content: ''; animation: story-scan 7s linear infinite; pointer-events: none; }
.hero-portrait::after { position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, transparent 28%, rgba(215,229,212,.24) 50%, transparent 72%); transform: translateX(-120%); content: ''; animation: story-sweep 5.5s ease-in-out infinite; pointer-events: none; }
.hero-portrait-grid { position: absolute; inset: 9% -9% -9% 9%; z-index: 1; border: 1px solid var(--coral); transform: rotate(9deg); animation: story-frame-float 5s ease-in-out infinite; pointer-events: none; }
.feature-card { --dx: 0px; --dy: 0px; --rx: 0deg; --ry: 0deg; --tx: 50%; --ty: 50%; position: relative; overflow: hidden; transform: translate3d(var(--dx), var(--dy), 0) rotateX(var(--ry)) rotateY(var(--rx)); transition: transform .13s ease-out, border-color .2s ease, box-shadow .18s ease; }
.feature-card::before { position: absolute; inset: -50%; background: conic-gradient(from 180deg at var(--tx) var(--ty), transparent 0 20%, rgba(215,229,212,.75) 31%, transparent 42% 100%); opacity: 0; transform: rotate(15deg); content: ''; transition: opacity .2s ease; pointer-events: none; }
.feature-card:hover::before { opacity: 1; }
.feature-card > * { position: relative; z-index: 1; }
@keyframes story-grid-shift { from { transform: translate(0, 0); } to { transform: translate(60px, 60px); } }
@keyframes story-orbit { from { transform: rotate(-22deg) translateX(-10px); } to { transform: rotate(-16deg) translateX(26px); } }
@keyframes story-frame-float { 0%,100% { transform: rotate(9deg) translate(0,0); } 50% { transform: rotate(12deg) translate(4px,-7px); } }
@keyframes story-scan { from { transform: translateY(-18px); } to { transform: translateY(18px); } }
@keyframes story-sweep { 0%,35% { transform: translateX(-120%); } 65%,100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .focus-stage::before, .focus-stage::after, .hero-portrait::before, .hero-portrait::after, .hero-portrait-grid { animation: none; } }
@media (max-width: 1000px) { .focus-stage { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; } .focus-stage .hero-portrait { grid-column: 1; grid-row: 1; width: min(100%, 340px); justify-self: center; } .focus-stage-copy { grid-column: 1; grid-row: 2; } }
@media (max-width: 680px) { .focus-stage { padding: 28px 18px; gap: 28px; } .focus-stage + .feature-grid { grid-template-columns: 1fr; } }
.feature-card .card-symbol { color: var(--mint-deep); font-size: 24px; }
.feature-card h3 { margin-top: 25px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.feature-card p { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.text-action { margin-top: auto; padding: 0; border: 0; color: var(--mint-deep); background: none; font-size: 13px; font-weight: 700; text-align: left; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 25px; }
.section-head p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr); gap: 28px; align-items: start; }
.generate-left-column { min-width: 0; }
.generate-left-column .work-poster-section { margin-top: 26px; }
.generate-left-column .work-poster-frame { width: 100%; max-width: 500px; }
.form-panel, .result-panel, .info-panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.form-panel { padding: 28px; }
.result-panel { min-height: 400px; padding: 28px; }
.info-panel { padding: 20px 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; padding: 11px 12px; border: 1px solid #cddbd9; border-radius: 7px; outline: none; color: var(--ink); background: #fcfdfc; transition: border .18s ease, box-shadow .18s ease; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--mint-deep); box-shadow: 0 0 0 3px rgba(36,118,110,.1); }
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.helper { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.primary-button { width: 100%; padding: 12px 16px; border: 0; border-radius: 7px; color: #fff; background: var(--ink); font-weight: 700; transition: .18s ease; }
.primary-button:hover { background: #2d5260; }
.primary-button:disabled { cursor: wait; opacity: .6; }
.ghost-button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-2); background: #fff; font-size: 12px; }
.result-empty { min-height: 340px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.result-empty strong { display: block; margin-bottom: 8px; color: var(--ink-2); font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.result-empty p { max-width: 245px; font-size: 13px; line-height: 1.6; }
.result-mode { margin-bottom: 19px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: #967152; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.score-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 19px; }
.score { color: var(--mint-deep); font-family: Georgia, serif; font-size: 49px; line-height: 1; }
.score small { display: block; color: var(--muted); font-family: inherit; font-size: 11px; letter-spacing: .08em; }
.result-block { margin: 19px 0; }
.result-block h4 { margin: 0 0 8px; color: var(--ink-2); font-size: 12px; }
.result-block p, .result-block li { color: #50636a; font-size: 13px; line-height: 1.65; }
.long-detail { font-size: 14px !important; line-height: 1.85 !important; }
.radar-wrap { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(116px, .62fr); gap: 12px; align-items: center; padding: 8px 0 4px; }
.radar-chart { width: 100%; max-width: 270px; overflow: visible; }
.radar-grid { fill: none; stroke: #dbe7e3; stroke-width: 1; }
.radar-axis { stroke: #e2ebe8; stroke-width: 1; }
.radar-value { fill: rgba(36,118,110,.19); stroke: #24766e; stroke-width: 2; }
.radar-point { fill: #e98b68; stroke: #fff; stroke-width: 1.5; }
.radar-label { fill: #587077; font-size: 9px; font-weight: 700; }
.dimension-list { display: grid; gap: 7px; }
.dimension-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 11px; }
.dimension-item strong { color: var(--mint-deep); font-size: 12px; }
.result-block ul { margin: 0; padding-left: 18px; }
.callout { padding: 13px 14px; border-left: 3px solid var(--coral); background: #fff8f3; color: #725641; font-size: 13px; line-height: 1.55; }
.work-poster-section { margin: 28px 0 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.work-poster-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.work-poster-heading h4 { margin: 5px 0 5px; color: var(--ink); font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.work-poster-heading p { max-width: 460px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.poster-source-status { margin-top: 7px !important; color: var(--mint-deep) !important; font-weight: 700; }
.poster-model-status { margin-top: 9px !important; padding-left: 10px; border-left: 2px solid var(--coral); color: #8b6648 !important; }
.poster-model-status.is-ready { color: var(--mint-deep) !important; border-left-color: var(--mint-deep); }
.poster-download { flex: 0 0 auto; color: #fff; border-color: var(--mint-deep); background: var(--mint-deep); }
.poster-download:hover, .poster-download:focus-visible { background: var(--ink); }
.work-poster-frame { width: min(100%, 500px); margin: 0 auto; padding: 8px; border: 0; background: #161616; box-shadow: 0 18px 46px rgba(18,18,18,.24); }
.work-poster-canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; background: #102824; }
@media (max-width: 560px) { .work-poster-heading { align-items: stretch; flex-direction: column; } .poster-download { width: 100%; } .work-poster-frame { padding: 6px; } }
.feedback-row { display: flex; gap: 8px; margin-top: 16px; }
.feedback-row button { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-2); background: #fff; font-size: 12px; }
.feedback-row button.selected { border-color: var(--mint-deep); color: var(--mint-deep); background: var(--mint); }
.notice { margin-bottom: 20px; padding: 12px 14px; border-radius: 7px; color: #765c43; background: #fff8ed; font-size: 12px; line-height: 1.55; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 20px; align-items: start; }
.settings-form { max-width: 720px; }
.settings-actions { display: flex; gap: 10px; align-items: center; }
.settings-actions .primary-button { width: auto; min-width: 150px; }
.settings-actions .ghost-button { min-height: 43px; }
.settings-feedback { min-height: 20px; margin: 14px 0 0; color: var(--mint-deep); font-size: 12px; line-height: 1.5; }
.settings-info h3 { margin: 9px 0 8px; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.settings-info p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.recommend-grid { display: grid; gap: 12px; }
.recommend-card { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fbfdfc; }
.recommend-card header { display: flex; justify-content: space-between; gap: 10px; }
.recommend-card h3 { margin: 0; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.type-tag { color: var(--mint-deep); font-size: 11px; font-weight: 800; }
.recommend-card p { margin: 8px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.recommend-card .feedback-row { margin-top: 0; }
.recommend-detail-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: rgba(7,28,32,.66); backdrop-filter: blur(5px); animation: recommend-backdrop-in .24s ease-out both; }
.recommend-detail-dialog { position: relative; width: min(820px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px 30px 30px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; box-shadow: 0 24px 70px rgba(4,24,25,.28); animation: recommend-dialog-in .3s ease-out both; }
.recommend-detail-close { position: sticky; top: 0; z-index: 2; float: right; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); background: #fffdf9; font-size: 20px; cursor: pointer; }
.recommend-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; clear: both; }
.recommend-detail-header h2 { margin: 0; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.recommend-detail-header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.recommend-fit-block { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdfc; }
.recommend-detail-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recommend-detail-notes .result-block { margin: 0; padding: 16px; border-left: 3px solid var(--coral); background: #fff8f3; }
.recommend-detail-notes p { margin-bottom: 0; }
@keyframes recommend-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes recommend-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 680px) { .recommend-detail-backdrop { padding: 12px; } .recommend-detail-dialog { max-height: calc(100dvh - 24px); padding: 20px 18px 24px; } .recommend-detail-header h2 { font-size: 24px; } .recommend-detail-notes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .recommend-detail-backdrop, .recommend-detail-dialog { animation: none; } }
.candidate-list { display: grid; gap: 9px; margin-top: 12px; }
.candidate { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fcfdfc; cursor: pointer; }
.candidate:hover, .candidate.selected { border-color: var(--mint-deep); background: #f1fbf7; }
.candidate strong { display: block; font-size: 13px; }
.candidate span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.mini-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 35px; }
.mini-stat { padding: 16px; border-top: 2px solid var(--mint); background: #fff; }
.mini-stat strong { display: block; margin-bottom: 5px; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.mini-stat span { color: var(--muted); font-size: 12px; }
.fade-in { animation: fade .24s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .sidebar { width: 210px; flex-basis: 210px; } .page-content { padding: 38px 28px 55px; } .workspace, .settings-layout { grid-template-columns: 1fr; } .result-panel { min-height: 260px; } }
@media (max-width: 680px) { .app-shell { display: block; height: auto; } .sidebar { position: static; width: auto; height: auto; padding: 14px 14px 10px; overflow: visible; } .main-content { height: auto; overflow: visible; } .brand-lockup { padding: 0 5px 13px; } .workspace-label, .sidebar-footer { display: none; } .primary-nav { display: flex; overflow-x: auto; gap: 5px; } .nav-item { flex: 0 0 auto; padding: 9px 11px; font-size: 12px; } .sidebar-settings { margin-top: 7px; width: auto; } .topbar { height: 58px; padding: 0 18px; } .status-chip, .icon-button { display: none; } .page-content { padding: 29px 18px 44px; } .hero { display: block; margin-bottom: 28px; } .hero-note { margin-top: 22px; max-width: none; } .identity-panel { grid-template-columns: 1fr; gap: 17px; margin-bottom: 28px; } .identity-options, .onboarding-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .onboarding-modal { padding: 25px 19px; } .onboarding-modal h2 { font-size: 27px; } .feature-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; gap: 0; } .radar-wrap { grid-template-columns: 1fr; } .radar-chart { margin: 0 auto; } .dimension-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } h1 { font-size: 37px; } }

.locale-toggle { min-width: 58px; height: 36px; border: 1px solid #b88b5e; color: #7e5736; background: #fff8ee; box-shadow: 0 4px 12px rgba(126,87,54,.14); font-size: 12px; }
.locale-toggle:hover { color: #fff; background: #9a6b45; border-color: #9a6b45; }
select.locale-toggle { min-width: 116px; padding: 0 10px; cursor: pointer; letter-spacing: normal; }
select.locale-toggle option { color: #172d3b; background: #fff; }
.credits-chip { padding: 8px 12px; border: 1px solid #d9c6a9; border-radius: 999px; color: #7e5736; background: #fffaf1; font-size: 12px; font-weight: 700; cursor: pointer; }
.credits-chip:hover, .credits-chip:focus-visible { border-color: var(--coral); outline: 2px solid color-mix(in srgb, var(--coral) 28%, transparent); }
.admin-credit-form { display: flex; gap: 10px; align-items: center; }
.admin-credit-form input { width: 120px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.admin-row-credit { width: 72px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; }
.admin-row-credit-button { padding: 7px 10px; }
.credit-panel { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; padding: 18px 20px; border: 1px solid #d9c6a9; border-radius: 10px; background: #fffaf1; }
.credit-panel h3 { margin: 5px 0 5px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.credit-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.credit-panel p strong { color: #8c5c38; }
.topup-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topup-options small { width: 100%; color: var(--muted); font-size: 10px; text-align: right; }
.membership-section { margin: 18px 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; }
.membership-section h3 { margin: 4px 0 4px; font-family: Georgia, serif; font-size: 22px; }
.membership-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.membership-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.membership-card.featured { border-color: var(--mint-deep); box-shadow: inset 0 3px var(--mint-deep); }
.membership-card strong { font-family: Georgia, serif; font-size: 19px; color: var(--ink); }
.membership-card span { color: var(--mint-deep); font-size: 13px; font-weight: 700; }
.membership-card p { min-height: 34px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.membership-card button { margin-top: auto; }
.profile-popover { position: fixed; top: 62px; right: 38px; z-index: 40; width: 240px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; box-shadow: 0 16px 42px rgba(20,35,31,.2); }
.profile-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.profile-heading img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; background: var(--ink); }
.profile-heading strong, .profile-heading span { display: block; }
.profile-heading strong { color: var(--ink); font-size: 13px; }
.profile-heading span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.profile-meta { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; color: var(--muted); font-size: 11px; }
.profile-meta strong { color: var(--ink-2); font-size: 11px; }
.avatar-upload, .profile-settings, .profile-logout { display: block; width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); background: #fff; font-size: 11px; text-align: center; cursor: pointer; }
.avatar-upload { margin-bottom: 7px; }
.avatar-upload input { display: none; }
.profile-settings, .profile-logout { margin-top: 7px; }
.profile-recharge { display: block; width: 100%; margin-top: 7px; padding: 8px 9px; border: 0; border-radius: 6px; color: #fff; background: var(--mint-deep); font-size: 11px; cursor: pointer; }
.profile-logout { color: #9a5138; }
.weekly-shelf { margin-top: 42px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf9; }
.focus-stage .weekly-shelf { grid-column: 1 / -1; position: relative; z-index: 2; min-width: 0; margin-top: 0; color: var(--ink); }
.stage-identity-edit { grid-column: 1 / -1; justify-self: end; position: relative; z-index: 2; color: #d7e5d4; }
.leaflet-pocket { grid-column: 1 / -1; grid-row: 1; position: relative; width: min(100%, 680px); min-height: 540px; justify-self: center; padding-top: 48px; isolation: isolate; perspective: 1200px; }
.focus-stage:has(.leaflet-pocket) .focus-stage-copy { grid-column: 1 / -1; grid-row: 2; }
.leaflet-pocket .hero-portrait { width: min(100%, 340px); margin: 35px auto 0; cursor: pointer; z-index: 4; transition: transform .65s cubic-bezier(.22,.8,.25,1), opacity .65s, filter .65s; }
.leaflet-tab { position: absolute; inset: 0 8px 12px; padding: 12px 16px; border: 1px solid #d9c6a9; border-radius: 5px; background: #fff8ee; color: #31554c; text-align: left; font-size: 12px; font-weight: 700; transform: rotate(-5deg); transition: transform .25s ease; box-shadow: 0 8px 25px #0003; }
.leaflet-tab:hover, .leaflet-tab:focus-visible { transform: rotate(-7deg) translateY(-6px); }
.leaflet-tab { display: flex; align-items: flex-start; }
.leaflet-pocket .hero-portrait:focus-visible { outline: 3px solid #ef9a6d; outline-offset: 4px; }
.shelf-leaflet { position: absolute; inset: 42px 0 auto; width: 100%; max-height: 470px; padding: 20px; border: 1px solid #d9c6a9; border-radius: 8px; background: #fffdf9; color: var(--ink); box-shadow: 0 18px 40px #0005; overflow-y: auto; z-index: 2; transform: translateY(-20px) rotate(-6deg) scale(.76); opacity: .8; transition: transform .65s cubic-bezier(.22,.8,.25,1), opacity .65s; pointer-events: none; }
.leaflet-pocket .leaflet-tab { inset: 0 0 auto; z-index: 6; width: fit-content; max-width: 100%; transform: none; }
.leaflet-pocket.shelf-front .hero-portrait { transform: translate(15%, -42px) rotate(9deg) scale(.84); opacity: .45; filter: brightness(.7); z-index: 1; }
.leaflet-pocket.shelf-front .shelf-leaflet { transform: translateY(8px) rotate(0) scale(1); opacity: 1; z-index: 5; pointer-events: auto; cursor: pointer; }
.shelf-leaflet[open] { animation: leaflet-unfold .36s ease-out; }
.shelf-leaflet::backdrop { background: #071c20aa; backdrop-filter: blur(5px); }
.focus-stage .shelf-leaflet .weekly-shelf { margin: 0; padding: 14px 4px 4px; border: 0; background: transparent; }
.leaflet-close { display: block; margin-left: auto; padding: 8px 12px; border: 1px solid #d9c6a9; border-radius: 5px; color: #31554c; background: #fff8ee; }
@keyframes leaflet-unfold { from { opacity: 0; transform: translateY(32px) rotate(-5deg) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .leaflet-pocket { grid-column: 1; grid-row: 1; width: min(100%, 680px); justify-self: center; } }
@media (max-width: 680px) { .shelf-leaflet { padding: 12px; } .leaflet-pocket { min-height: 530px; } }
@media (prefers-reduced-motion: reduce) { .leaflet-pocket .hero-portrait, .shelf-leaflet { transition: none; } }
@media (prefers-reduced-motion: reduce) { .shelf-leaflet[open] { animation: none; } .leaflet-tab { transition: none; } }
.weekly-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.weekly-header h2 { margin: 6px 0 7px; }
.weekly-header p { margin: 0; color: var(--muted); font-size: 13px; }
.split-flap-label { padding: 8px 10px; border: 1px solid #d9c6a9; border-radius: 4px; color: #8c5c38; background: #fff8ee; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.book-shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.shelf-column { min-width: 0; }
.shelf-column-title { margin: 0 0 12px; font-size: 14px; color: var(--mint-deep); }
.book-ticket { display: grid; grid-template-columns: 39px minmax(0, 1fr) 28px; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px; border-top: 1px solid var(--line); animation: shelf-in .42s ease both; animation-delay: var(--delay); }
.book-number { display: grid; place-items: center; width: 34px; height: 28px; color: #fff; background: var(--ink); border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.split-flap { position: relative; overflow: hidden; }
.split-flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255,255,255,.35); }
.book-ticket h3 { margin: 0; color: var(--ink); font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.book-ticket p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.book-action { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; color: var(--mint-deep); background: #fff; }
.book-action:hover { color: #fff; border-color: var(--mint-deep); background: var(--mint-deep); }
@keyframes shelf-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) { .weekly-shelf { padding: 18px 14px; } .book-shelf-grid { grid-template-columns: 1fr; } .weekly-header { display: block; } .split-flap-label { display: inline-block; margin-top: 12px; } }
/* Both cards contribute their full height: the recommendation card never scrolls. */
.leaflet-pocket { display: grid; grid-template-columns: minmax(0, 1fr); }
.leaflet-pocket .hero-portrait { grid-area: 1 / 1; align-self: start; justify-self: center; }
.leaflet-pocket .shelf-leaflet { grid-area: 1 / 1; align-self: start; position: relative; inset: auto; max-height: none; overflow: visible; padding: 14px; }
.shelf-leaflet .weekly-header { display: flex; gap: 8px; margin-bottom: 10px; }
.shelf-leaflet .weekly-header h2 { font-size: 21px; line-height: 1.25; margin: 3px 0 5px; }
.shelf-leaflet .weekly-header p { font-size: 11px; line-height: 1.4; }
.shelf-leaflet .split-flap-label { flex-shrink: 0; margin-top: 0; padding: 5px; font-size: 8px; letter-spacing: .05em; }
.shelf-leaflet .book-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shelf-leaflet .shelf-column-title { font-size: 12px; margin-bottom: 6px; }
.shelf-leaflet .book-ticket { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 6px; min-height: 48px; padding: 6px 0; }
.shelf-leaflet .book-ticket h3 { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.shelf-leaflet .book-ticket p { font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.shelf-leaflet .book-number { width: 23px; height: 23px; font-size: 10px; }
.shelf-leaflet .book-action { width: 24px; height: 24px; }
.shelf-leaflet .leaflet-close { padding: 5px 8px; font-size: 11px; }
@media (max-width: 480px) {
  .leaflet-pocket .shelf-leaflet { padding: 10px; }
  .shelf-leaflet .book-ticket { grid-template-columns: minmax(0, 1fr) 24px; }
  .shelf-leaflet .book-number { display: none; }
  .shelf-leaflet .weekly-header h2 { font-size: 18px; }
  .shelf-leaflet .split-flap-label { display: none; }
}
.shelf-leaflet .book-ticket { grid-template-columns: 24px minmax(0, 1fr); }
.shelf-leaflet:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
@media (max-width: 480px) { .shelf-leaflet .book-ticket { grid-template-columns: minmax(0, 1fr); } }
.shelf-leaflet .book-number { display: grid; border: 0; cursor: pointer; }
.shelf-leaflet .book-number:hover, .shelf-leaflet .book-number:focus-visible { background: var(--mint-deep); outline: 2px solid var(--coral); outline-offset: 2px; }
@media (max-width: 480px) { .shelf-leaflet .book-ticket { grid-template-columns: 24px minmax(0, 1fr); } }
.shelf-review-dialog { width: min(560px, calc(100vw - 32px)); max-height: 85dvh; overflow: auto; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf9; color: var(--ink); }
.shelf-review-dialog::backdrop { background: #071c2088; backdrop-filter: blur(4px); }
.shelf-review-dialog[open] { animation: review-dialog-reveal .3s ease-out both; }
.shelf-review-dialog[open]::backdrop { animation: review-backdrop-reveal .3s ease-out both; }
@keyframes review-dialog-reveal { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes review-backdrop-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .shelf-review-dialog[open], .shelf-review-dialog[open]::backdrop { animation: none; }
}
.shelf-review-dialog > button { display: block; margin-left: auto; }
.shelf-review-dialog h2 { font-size: 24px; margin: 14px 0 20px; }
.shelf-review-dialog h3 { font-size: 15px; margin-top: 20px; }
.shelf-review-dialog p { font-size: 14px; line-height: 1.85; }
.admin-page .section-head { margin-bottom: 24px; }
.admin-content { display: grid; gap: 20px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-stat { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(20,35,31,.06); }
.admin-stat strong { display: block; color: var(--ink); font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.admin-stat span { color: var(--muted); font-size: 12px; }
.admin-section { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.admin-section h3 { margin-bottom: 14px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-card { padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcf9; }
.plan-card div { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); font-weight: 700; }
.plan-card span { color: var(--coral); }
.plan-card p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.admin-table { display: grid; gap: 8px; }
.admin-row { display: grid; grid-template-columns: 1.4fr .8fr .6fr 150px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.admin-row small { color: var(--muted); }
.admin-row strong { color: var(--mint-deep); }
.admin-row select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); background: #fff; }
.assistant-widget { position: fixed; right: 24px; bottom: 24px; z-index: 30; }
.assistant-toggle { position: relative; width: 130px; height: 130px; padding: 10px 12px 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; border: 3px solid #111; border-radius: 12px; color: #111; background: #f0a96f; box-shadow: 5px 5px 0 #111; transition: transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .4s cubic-bezier(.175,.885,.32,1.275), background .25s ease; }
.assistant-toggle::after { content: ''; position: absolute; width: 90px; height: 18px; top: 17px; right: -35px; border-top: 3px solid #111; border-bottom: 3px solid #111; opacity: .25; transform: rotate(45deg); pointer-events: none; }
.assistant-toggle:hover, .assistant-toggle:focus-visible { background: #d8e6d5; box-shadow: 2px 2px 0 #111; transform: translate(3px, 3px) rotate(-1deg); outline: 0; }
.assistant-toggle:active { box-shadow: 0 0 0 #111; transform: translate(5px, 5px); }
.assistant-toggle img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: cover; object-position: 50% 42%; border: 2px solid #111; border-radius: 7px; filter: contrast(1.12); }
.assistant-toggle .assistant-powered { position: relative; z-index: 1; font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .12em; }
.assistant-toggle strong { position: relative; z-index: 1; width: 100%; padding-top: 6px; border-top: 2px solid #111; font-size: 13px; line-height: 1; letter-spacing: .04em; text-align: center; }
.assistant-panel { position: absolute; right: 0; bottom: 146px; width: min(350px, calc(100vw - 30px)); padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf9; box-shadow: 0 18px 50px rgba(20,35,31,.2); }
.assistant-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--ink); }
.assistant-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.assistant-suggestions button { padding: 6px 8px; border: 1px solid #d9c6a9; border-radius: 999px; color: #7e5736; background: #fff8ee; font-size: 11px; }
.assistant-messages { max-height: 220px; overflow-y: auto; display: grid; gap: 7px; margin-bottom: 10px; }
.assistant-message { max-width: 90%; margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.assistant-bot { color: var(--ink-2); background: var(--soft); }
.assistant-user { justify-self: end; color: #fff; background: var(--ink); }
#assistant-form { display: flex; gap: 7px; }
#assistant-form input { min-width: 0; flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 6px; }
#assistant-form button { padding: 0 12px; border: 0; border-radius: 6px; color: #fff; background: var(--mint-deep); font-size: 12px; }
@media (max-width: 680px) { .admin-stat-grid, .plan-grid { grid-template-columns: 1fr; } .admin-row { grid-template-columns: 1fr 1fr; } .assistant-widget { right: 16px; bottom: 16px; } .assistant-toggle { width: 112px; height: 112px; padding: 8px 10px; gap: 4px; } .assistant-toggle img { width: 46px; height: 46px; flex-basis: 46px; } .assistant-toggle .assistant-powered { font-size: 8px; } .assistant-toggle strong { font-size: 11px; padding-top: 5px; } .assistant-panel { bottom: 126px; } .credit-panel { display: block; } .topup-options { margin-top: 14px; justify-content: flex-start; } .topup-options small { text-align: left; } .profile-popover { right: 16px; } }
@media (max-width: 680px) { .membership-grid { grid-template-columns: 1fr; } }