@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');

:root {
  --canvas: #f2f0ea; --paper: #fbfaf6; --panel: #fffefa; --ink: #171713;
  --muted: #716f67; --faint: #9d9a90; --line: #dedbd2; --line-dark: #c8c4b9;
  --signal: #ef5b3f; --signal-deep: #d9472e; --signal-soft: #fee9e3;
  --lime: #d9ef71; --green: #247a55; --green-soft: #e3f3ea;
  --amber: #aa6815; --amber-soft: #fff0d6; --blue: #355fca; --blue-soft: #e9eeff;
  --shadow-sm: 0 1px 2px rgba(24,23,19,.04), 0 6px 20px rgba(24,23,19,.05);
  --shadow-lg: 0 22px 60px rgba(31,28,20,.12); --radius: 18px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "DM Sans","Noto Sans TC",sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button,input,textarea,select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 3px solid rgba(239,91,63,.22); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: 244px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; padding: 26px 18px 20px; background: #191916; color: #f8f6ee; border-right: 1px solid rgba(255,255,255,.06); }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 9px 26px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--signal); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.brand-mark svg { width: 18px; height: 18px; }
.brand-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }
.brand-title span { color: var(--signal); }
.brand-kicker { margin: -2px 0 0; color: #8f8d85; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.workspace-card { margin: 0 2px 24px; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); }
.workspace-card small { color: #929087; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.workspace-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 13px; font-weight: 700; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(217,239,113,.11); }
.nav-label { padding: 0 11px 8px; color: #6f6e67; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav { display: grid; gap: 4px; }
.nav button { width: 100%; display: flex; align-items: center; gap: 11px; position: relative; padding: 10px 11px; color: #aaa8a0; background: transparent; border-radius: 11px; text-align: left; font-size: 13px; font-weight: 600; transition: color .2s,background .2s,transform .2s var(--ease); }
.nav button svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav button:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); }
.nav button.active { color: #fff; background: rgba(255,255,255,.1); }
.nav button.active::after { content: ""; position: absolute; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.sidebar-footer { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.user-row { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #272b10; font-size: 11px; font-weight: 800; }
.user-meta strong { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.user-meta span { color: #77756e; font-size: 10px; }

.main { min-width: 0; padding: 0 42px 64px; }
.main::before { content: ""; position: fixed; inset: 0 0 auto 244px; height: 260px; z-index: -1; background: radial-gradient(circle at 88% 0%,rgba(239,91,63,.11),transparent 34%),linear-gradient(180deg,#f8f6f0 0%,transparent 100%); }
.utility-bar { height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(200,196,185,.7); margin-bottom: 34px; }
.crumb { color: var(--faint); font-size: 12px; font-weight: 600; }
.crumb strong { color: var(--ink); }
.utility-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--ink); border: 1px solid var(--line); transition: all .2s; }
.icon-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 16px; height: 16px; }
.live-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.62); color: var(--muted); font-size: 11px; font-weight: 700; }
.live-pill i { width: 6px; height: 6px; background: #47a373; border-radius: 50%; animation: pulse 2s infinite; }

.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; animation: rise .55s var(--ease) both; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: var(--signal-deep); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 17px; height: 2px; background: currentColor; }
.topbar h1 { margin: 0; font-size: clamp(28px,3vw,42px); line-height: 1.1; letter-spacing: -.05em; font-weight: 800; }
.topbar p { max-width: 650px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 5px 13px rgba(23,23,19,.12); transition: transform .2s var(--ease),box-shadow .2s,background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(23,23,19,.16); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 14px; height: 14px; }
.btn.secondary { background: rgba(255,255,255,.76); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.secondary:hover { background: #fff; border-color: var(--line-dark); }
.btn.warn { background: var(--signal); }

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.panel { position: relative; background: rgba(255,254,250,.92); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); overflow: hidden; animation: rise .55s var(--ease) both; }
.panel:nth-child(2) { animation-delay: .06s; }
.panel:nth-child(3) { animation-delay: .12s; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.panel h2,.panel h3 { margin: 0; letter-spacing: -.02em; }
.panel h2 { font-size: 15px; }
.panel h3 { margin-top: 18px; font-size: 13px; }
.panel-caption { color: var(--faint); font-size: 11px; }
.muted { color: var(--muted); }

.hero-dashboard { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.8fr); gap: 16px; margin-bottom: 16px; }
.readiness-card { min-height: 260px; padding: 27px; background: #20211d; color: #fff; border: 0; }
.readiness-card::after { content: ""; position: absolute; width: 210px; height: 210px; top: -85px; right: -42px; border: 45px solid rgba(217,239,113,.1); border-radius: 50%; }
.readiness-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.readiness-label { color: #aaa99f; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.readiness-score { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; }
.readiness-score strong { font-size: 72px; line-height: .95; letter-spacing: -.08em; }
.readiness-score span { color: #8d8c83; font-size: 15px; }
.score-change { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 99px; background: rgba(217,239,113,.12); color: var(--lime); font-size: 10px; font-weight: 700; }
.readiness-copy { max-width: 410px; margin: 22px 0 0; color: #b8b6ad; font-size: 12px; }
.readiness-footer { position: absolute; left: 27px; right: 27px; bottom: 25px; display: flex; align-items: center; gap: 12px; }
.readiness-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.readiness-bar span { display: block; height: 100%; border-radius: inherit; background: var(--lime); transform-origin: left; animation: grow 1s .25s var(--ease) both; }
.readiness-footer small { color: #807f77; }
.next-card { min-height: 260px; padding: 26px; background: var(--signal); color: #fff; border: 0; }
.next-card .step-no { color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.next-card h2 { max-width: 260px; margin: 28px 0 10px; font-size: 25px; line-height: 1.25; }
.next-card p { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; }
.next-card .btn { position: absolute; bottom: 24px; left: 24px; right: 24px; background: #fff; color: var(--ink); }
.metric-strip { grid-template-columns: repeat(3,1fr); margin-bottom: 16px; }
.metric { padding: 18px 20px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--signal-soft); color: var(--signal); }
.metric-icon.green { background: var(--green-soft); color: var(--green); }
.metric-icon.blue { background: var(--blue-soft); color: var(--blue); }
.metric-icon svg { width: 15px; height: 15px; }
.metric strong { display: block; margin-top: 18px; font-size: 29px; line-height: 1; letter-spacing: -.04em; }
.metric-label { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: var(--muted); font-size: 11px; }
.metric-trend { color: var(--green); font-weight: 700; }

.tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 4px 8px; color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.tag.warn { color: var(--amber); background: var(--amber-soft); }
.tag.danger { color: var(--signal-deep); background: var(--signal-soft); }
.list { display: grid; gap: 8px; }
.item { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.65); transition: border .2s,transform .2s,box-shadow .2s; }
.item:hover { border-color: var(--line-dark); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(23,23,19,.05); }
.item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item h3,.item p { margin: 0; }
.item p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.todo-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.todo-item:last-child { border-bottom: 0; }
.todo-check { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--canvas); color: var(--muted); }
.todo-check.done { background: var(--green-soft); color: var(--green); }
.todo-check svg { width: 13px; height: 13px; }
.todo-copy strong { display: block; font-size: 12px; }
.todo-copy span { color: var(--faint); font-size: 10px; }

.form { display: grid; gap: 13px; }
.field { display: grid; gap: 6px; }
.field label { color: #55534c; font-size: 11px; font-weight: 700; }
.field input,.field textarea,.field select { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 12px; transition: border .2s,box-shadow .2s; }
.field input:hover,.field textarea:hover,.field select:hover { border-color: var(--line-dark); }
.field input:focus,.field textarea:focus,.field select:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(239,91,63,.1); outline: 0; }
.field textarea { min-height: 94px; resize: vertical; }
.inline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 19px 0; }

.score-row { display: grid; grid-template-columns: 132px 1fr 42px; align-items: center; gap: 11px; margin: 13px 0; font-size: 11px; }
.score-row strong { text-align: right; font-size: 12px; }
.bar { height: 6px; background: #e9e6de; border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--signal); transform-origin: left; animation: grow .8s var(--ease) both; }
.score-row:nth-child(even) .bar span { background: #ed8a39; }
.score-ring { --score: 0; width: 128px; height: 128px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--signal) calc(var(--score) * 1%),#ece8df 0); }
.score-ring::after { content: ""; position: absolute; inset: 10px; border-radius: inherit; background: var(--panel); }
.score-ring strong { position: relative; z-index: 1; font-size: 34px; letter-spacing: -.06em; }

.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table th,.table td { border-bottom: 1px solid var(--line); padding: 12px 9px; text-align: left; vertical-align: middle; }
.table th { color: var(--faint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: rgba(242,240,234,.65); }
.table .btn { min-height: 30px; padding: 6px 9px; font-size: 10px; }
.type-cell { display: flex; align-items: center; gap: 8px; }
.type-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--signal-soft); color: var(--signal); }
.type-icon svg { width: 13px; height: 13px; }
.empty { padding: 26px; border: 1px dashed var(--line-dark); border-radius: 13px; color: var(--faint); text-align: center; font-size: 11px; background: rgba(242,240,234,.35); }
.empty-icon { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 auto 9px; border-radius: 10px; background: #ebe8df; color: var(--muted); }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 12px; background: var(--amber-soft); color: #72501f; font-size: 11px; border: 1px solid #f2dcb3; }
.notice svg { flex: 0 0 auto; width: 15px; margin-top: 1px; }
.process { display: grid; grid-template-columns: repeat(5,1fr); margin-bottom: 17px; padding: 17px 18px; }
.process-step { position: relative; padding-right: 16px; }
.process-step:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 31px; right: 5px; height: 1px; background: var(--line-dark); }
.process-step i { position: relative; z-index: 1; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #ebe8df; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; }
.process-step.active i { background: var(--signal); color: #fff; box-shadow: 0 0 0 5px var(--signal-soft); }
.process-step.done i { background: var(--ink); color: #fff; }
.process-step b { display: block; margin-top: 8px; font-size: 10px; }
.process-step span { color: var(--faint); font-size: 9px; }
.preview-paper { min-height: 260px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: inset 4px 0 0 var(--signal); }
.preview-paper h3 { margin-top: 0; font-size: 19px; }
.preview-paper pre { margin: 14px 0 0; color: #4f4d46; font: 400 12px/1.8 "Noto Sans TC",sans-serif; white-space: pre-wrap; }

.login { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: #191916; overflow: hidden; }
.login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; color: #fff; overflow: hidden; }
.login-story::before { content: ""; position: absolute; width: 560px; height: 560px; left: -180px; bottom: -270px; border: 90px solid rgba(239,91,63,.22); border-radius: 50%; }
.login-story::after { content: "AI"; position: absolute; right: -34px; bottom: -110px; color: rgba(255,255,255,.035); font-size: 390px; font-weight: 900; line-height: 1; letter-spacing: -.12em; }
.login-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; font-weight: 800; }
.login-logo .brand-mark { width: 38px; height: 38px; }
.login-copy { position: relative; z-index: 1; max-width: 580px; }
.login-copy .eyebrow { color: var(--lime); }
.login-copy h1 { margin: 0; font-size: clamp(42px,5vw,76px); line-height: .98; letter-spacing: -.07em; }
.login-copy h1 em { color: var(--signal); font-style: normal; }
.login-copy p { max-width: 520px; margin: 24px 0 0; color: #a9a79e; font-size: 14px; }
.login-proof { position: relative; z-index: 1; display: flex; gap: 28px; }
.login-proof div { padding-left: 12px; border-left: 1px solid #4a4943; }
.login-proof strong { display: block; font-size: 17px; }
.login-proof span { color: #77756f; font-size: 10px; }
.login-form-side { display: grid; place-items: center; padding: 30px; background: var(--paper); border-radius: 30px 0 0 30px; }
.login-card { width: min(390px,100%); animation: rise .7s var(--ease) both; }
.login-card .mini-label { color: var(--signal); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-card h2 { margin: 10px 0 7px; font-size: 30px; letter-spacing: -.05em; }
.login-card > p { margin: 0 0 27px; color: var(--muted); font-size: 12px; }
.login-card .btn { width: 100%; margin-top: 2px; background: var(--signal); }
.footer-note { margin-top: 15px; color: var(--faint); font-size: 10px; text-align: center; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); font-size: 11px; font-weight: 700; animation: toastIn .35s var(--ease) both; }
.toast svg { width: 15px; color: var(--lime); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(71,163,115,.35); } 50% { box-shadow: 0 0 0 5px rgba(71,163,115,0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; } }
@media (max-width:1050px) { .main { padding: 0 24px 50px; } .hero-dashboard { grid-template-columns: 1fr; } .next-card { min-height: 235px; } }
@media (max-width:820px) {
  .shell { grid-template-columns: 1fr; } .sidebar { position: sticky; height: auto; padding: 12px 14px; flex-direction: row; align-items: center; overflow-x: auto; }
  .brand-lockup { padding: 0 12px 0 0; } .brand-kicker,.workspace-card,.nav-label,.sidebar-footer { display:none; }
  .nav { display:flex; gap:3px; } .nav button { width:auto; white-space:nowrap; } .nav button.active::after { display:none; }
  .main::before { left:0; } .utility-bar { height:58px; margin-bottom:24px; }
  .grid.two,.grid.three,.metric-strip,.inline { grid-template-columns:1fr; } .topbar { display:grid; align-items:start; } .actions { justify-content:flex-start; }
  .process { grid-template-columns:1fr; gap:10px; } .process-step { display:grid; grid-template-columns:30px 1fr; align-items:center; column-gap:9px; }
  .process-step:not(:last-child)::after { top:25px; bottom:-11px; left:13px; right:auto; width:1px; height:auto; }
  .process-step b { margin:0; } .process-step span { grid-column:2; }
  .login { grid-template-columns:1fr; } .login-story { min-height:310px; padding:28px; } .login-copy h1 { font-size:45px; }
  .login-copy p,.login-proof { display:none; } .login-form-side { border-radius:25px 25px 0 0; padding:38px 25px; }
}
@media (max-width:540px) { .main { padding:0 14px 38px; } .brand-title { display:none; } .nav button { padding:9px; } .nav button span { display:none; } .topbar h1 { font-size:31px; } .readiness-score strong { font-size:58px; } .score-row { grid-template-columns:108px 1fr 34px; } }

/* Friendly guided experience */
:root { --canvas:#f7f8fc; --paper:#fff; --panel:#fff; --ink:#252638; --muted:#686b7c; --faint:#9799aa; --line:#e7e8ef; --line-dark:#d8dae4; --signal:#7065e8; --signal-deep:#584dcf; --signal-soft:#eeecff; --lime:#dff5c9; --shadow-sm:0 8px 30px rgba(49,45,90,.055); }
.sidebar { background:#fff; color:var(--ink); border-right:1px solid var(--line); }
.brand-mark { background:linear-gradient(145deg,#7569ed,#9b91ff); box-shadow:0 7px 16px rgba(112,101,232,.22); }
.brand-title span { color:var(--signal); }
.brand-kicker,.nav-label { color:#aaaabb; }
.workspace-card { background:#f7f6ff; border-color:#ebe9ff; }
.workspace-card small { color:#9995b7; }
.nav button { color:#737587; }
.nav button:hover { color:var(--signal-deep); background:#f7f6ff; }
.nav button.active { color:var(--signal-deep); background:var(--signal-soft); }
.nav button.active::after { background:var(--signal); }
.sidebar-footer { border-color:var(--line); }
.user-meta span { color:#9a9cab; }
.avatar { background:#ebe9ff; color:var(--signal-deep); }
.main::before { background:radial-gradient(circle at 92% 0%,rgba(144,133,244,.1),transparent 30%),linear-gradient(180deg,#fbfbff 0%,transparent 100%); }
.eyebrow { color:var(--signal); text-transform:none; letter-spacing:.03em; }
.topbar h1 { font-size:clamp(28px,3vw,39px); }
.btn { background:var(--signal); box-shadow:0 7px 18px rgba(112,101,232,.2); }
.btn:hover { background:var(--signal-deep); box-shadow:0 10px 22px rgba(112,101,232,.26); }
.btn.warn { background:#f18b62; }
.panel { border-color:var(--line); box-shadow:var(--shadow-sm); }
.live-pill { background:#fff; }
.status-dot { background:#72bf72; box-shadow:0 0 0 4px rgba(114,191,114,.13); }
.tag { color:#477a47; background:#edf8e9; }
.tag.warn { color:#8e6b27; background:#fff6dc; }
.tag.danger { color:#b25b45; background:#fff0eb; }
.bar span { background:var(--signal); }
.score-row:nth-child(even) .bar span { background:#9f94f5; }

.friendly-hero { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:30px; min-height:260px; margin-bottom:18px; padding:34px 38px; border-radius:26px; background:linear-gradient(135deg,#eeecff 0%,#f7f2ff 55%,#fff5e8 100%); border:1px solid #e5e1fb; overflow:hidden; position:relative; animation:rise .5s var(--ease) both; }
.friendly-hero::before,.friendly-hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.5); }
.friendly-hero::before { width:170px; height:170px; right:90px; top:-90px; }
.friendly-hero::after { width:100px; height:100px; left:-40px; bottom:-55px; }
.friendly-copy { position:relative; z-index:1; align-self:center; }
.friendly-badge { display:inline-flex; padding:6px 10px; border-radius:99px; background:#fff; color:var(--signal-deep); font-size:11px; font-weight:800; box-shadow:0 4px 12px rgba(70,61,130,.07); }
.friendly-copy h2 { max-width:620px; margin:16px 0 8px; font-size:30px; line-height:1.25; letter-spacing:-.04em; }
.friendly-copy p { margin:0 0 22px; color:var(--muted); font-size:13px; }
.friendly-primary { min-height:44px; padding:11px 18px; border-radius:12px; }
.friendly-visual { position:relative; z-index:1; align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.82); box-shadow:0 17px 40px rgba(81,69,147,.11); }
.friendly-visual span { position:absolute; top:17px; right:16px; font-size:22px; animation:float 2.8s ease-in-out infinite; }
.friendly-visual strong { color:var(--signal-deep); font-size:52px; line-height:1; letter-spacing:-.07em; }
.friendly-visual small { margin-top:5px; color:var(--muted); font-size:11px; font-weight:700; }

.journey-panel { padding:25px; margin-bottom:18px; }
.journey-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.journey-card { min-height:174px; display:flex; flex-direction:column; align-items:flex-start; position:relative; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fbfbfd; text-align:left; color:var(--ink); transition:.22s var(--ease); }
.journey-card:hover { transform:translateY(-3px); border-color:#cfcaf7; box-shadow:0 10px 24px rgba(77,68,140,.09); }
.journey-card.current { background:#f3f1ff; border:2px solid #aaa2f3; }
.journey-card.done { background:#f5faf2; border-color:#dcecd3; }
.journey-number { width:30px; height:30px; display:grid; place-items:center; margin-bottom:20px; border-radius:9px; background:#ebecef; color:#77798a; font-size:11px; font-weight:800; }
.journey-number svg { width:15px; }
.journey-card.current .journey-number { background:var(--signal); color:#fff; }
.journey-card.done .journey-number { background:#72b76e; color:#fff; }
.journey-card strong { display:block; font-size:13px; }
.journey-card p { margin:6px 0 25px; color:var(--muted); font-size:10px; line-height:1.5; }
.journey-action { position:absolute; left:16px; bottom:13px; color:var(--signal); font-size:10px; font-weight:800; }
.journey-card.done .journey-action { color:#51924f; }

.simple-results { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.result-card { display:flex; align-items:center; gap:15px; padding:18px 20px; }
.result-emoji { width:43px; height:43px; display:grid; place-items:center; border-radius:13px; background:#f7f6fb; font-size:21px; }
.result-card strong { display:block; font-size:22px; line-height:1; }
.result-card p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.calm-report { margin-top:18px; }
.quiet-actions { display:flex; justify-content:flex-end; gap:15px; margin-top:18px; }
.text-btn { display:inline-flex; align-items:center; gap:6px; padding:6px; background:transparent; color:var(--faint); font-size:10px; }
.text-btn:hover { color:var(--signal); }
.text-btn svg { width:13px; }

.helper-card { display:flex; align-items:flex-start; gap:13px; padding:15px; margin-bottom:16px; border-radius:14px; background:#f7f6ff; color:#54536b; font-size:11px; }
.helper-icon { flex:0 0 auto; width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:#fff; font-size:16px; }
.helper-card strong { display:block; margin-bottom:2px; color:var(--ink); font-size:12px; }
.quick-choices { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.choice-chip { padding:7px 10px; border:1px solid #dedbf7; border-radius:99px; background:#faf9ff; color:#6159a2; font-size:10px; font-weight:700; }
.choice-chip:hover { background:var(--signal-soft); border-color:#bbb5f1; }
.optional-box { margin-top:14px; border-top:1px solid var(--line); }
.optional-box summary { padding:14px 0 5px; color:var(--muted); cursor:pointer; font-size:11px; font-weight:700; }
.generator-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.generator-card { min-height:175px; display:flex; flex-direction:column; align-items:flex-start; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; text-align:left; color:var(--ink); box-shadow:var(--shadow-sm); transition:.22s var(--ease); }
.generator-card:hover { transform:translateY(-3px); border-color:#cfcaf7; }
.generator-card span { font-size:27px; }
.generator-card strong { margin-top:14px; font-size:15px; }
.generator-card p { margin:5px 0 15px; color:var(--muted); font-size:10px; }
.generator-card b { margin-top:auto; color:var(--signal); font-size:11px; }
.flow-next { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:16px; padding:22px 24px; border:1px solid #e4e2f5; border-radius:18px; background:#f8f7ff; }
.flow-next > div { display:grid; grid-template-columns:auto 1fr; column-gap:11px; align-items:center; }
.flow-next > div > span { grid-row:1 / 3; font-size:27px; }
.flow-next strong { font-size:14px; }
.flow-next p { margin:2px 0 0; color:var(--muted); font-size:10px; }
.flow-next.ready { background:#f3faef; border-color:#dcebd4; }

@keyframes float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-6px) rotate(5deg); } }
@media (max-width:1050px) { .journey-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px) {
  .sidebar { background:#fff; } .friendly-hero { grid-template-columns:1fr; padding:26px; }
  .friendly-visual { position:absolute; right:20px; top:20px; width:95px; height:95px; opacity:.45; }
  .friendly-visual strong { font-size:34px; } .friendly-copy { padding-right:70px; }
  .simple-results,.generator-grid { grid-template-columns:1fr; }
  .flow-next { align-items:flex-start; flex-direction:column; }
}
@media (max-width:540px) { .journey-grid { grid-template-columns:1fr; } .journey-card { min-height:130px; } .friendly-copy { padding-right:0; } .friendly-visual { display:none; } }