:root{--bg: oklch(.984 .008 120);--bg-warm: oklch(.962 .013 105);--surface: oklch(1 0 0);--surface-2: oklch(.975 .01 130);--line: oklch(.9 .012 140);--line-strong: oklch(.84 .016 145);--sage-50: oklch(.972 .018 152);--sage-100: oklch(.945 .03 152);--sage-200: oklch(.9 .043 152);--sage-300: oklch(.835 .055 151);--sage-400: oklch(.76 .06 150);--sage-500: oklch(.68 .062 150);--sage-600: oklch(.58 .058 150);--sage-700: oklch(.48 .05 151);--sage-800: oklch(.39 .04 152);--sage-900: oklch(.31 .03 152);--teal-100: oklch(.945 .034 195);--teal-300: oklch(.82 .06 195);--teal-500: oklch(.66 .075 198);--teal-700: oklch(.48 .058 200);--gold-100: oklch(.945 .035 88);--gold-300: oklch(.85 .075 86);--gold-500: oklch(.76 .095 85);--gold-700: oklch(.56 .08 84);--ink: oklch(.3 .022 152);--ink-soft: oklch(.45 .025 152);--ink-mute: oklch(.58 .02 150);--ink-faint: oklch(.68 .016 150);--ok: oklch(.64 .11 150);--ok-bg: oklch(.945 .04 150);--warn: oklch(.72 .11 75);--warn-bg: oklch(.955 .045 80);--danger: oklch(.6 .13 28);--danger-bg: oklch(.955 .03 30);--info: oklch(.62 .08 235);--info-bg: oklch(.955 .025 235);--r-xs: 8px;--r-sm: 12px;--r-md: 16px;--r-lg: 22px;--r-xl: 30px;--r-pill: 999px;--sh-sm: 0 1px 2px oklch(.45 .04 150 / .06), 0 1px 1px oklch(.45 .04 150 / .04);--sh-md: 0 4px 14px oklch(.45 .04 150 / .08), 0 2px 5px oklch(.45 .04 150 / .05);--sh-lg: 0 16px 40px oklch(.45 .05 150 / .12), 0 6px 14px oklch(.45 .04 150 / .07);--sh-xl: 0 30px 70px oklch(.42 .05 150 / .16), 0 10px 24px oklch(.42 .04 150 / .09);--font-head: "Bricolage Grotesque", "Mulish", system-ui, sans-serif;--font-body: "Mulish", system-ui, -apple-system, sans-serif;--maxw: 1200px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:700;line-height:1.08;margin:0;color:var(--sage-900);letter-spacing:-.01em}p{margin:0}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}img{max-width:100%;display:block}input,select,textarea,button{font-family:inherit;font-size:16px;color:var(--ink)}::selection{background:var(--sage-200)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;border:3px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:var(--sage-400);background-clip:content-box}#root{min-height:100vh}.app-frame{min-height:100vh;display:flex;flex-direction:column}.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}.eyebrow{font-family:var(--font-body);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-600);display:inline-flex;align-items:center;gap:8px}.eyebrow:before{content:"";width:22px;height:2px;background:var(--gold-500);border-radius:2px}.muted{color:var(--ink-mute)}.center{text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:var(--r-pill);padding:13px 22px;font-weight:700;font-size:15px;line-height:1;transition:transform .14s ease,box-shadow .2s ease,background .2s ease,border-color .2s;white-space:nowrap;user-select:none}.btn:active{transform:translateY(1px)}.btn-lg{padding:16px 28px;font-size:16.5px}.btn-sm{padding:9px 15px;font-size:13.5px;gap:6px}.btn-primary{background:var(--sage-600);color:#fff;box-shadow:var(--sh-sm)}.btn-primary:hover{background:var(--sage-700);box-shadow:var(--sh-md)}.btn-gold{background:var(--gold-500);color:#3f3012}.btn-gold:hover{background:var(--gold-300)}.btn-ghost{background:transparent;color:var(--sage-700);border-color:var(--line-strong)}.btn-ghost:hover{background:var(--sage-50);border-color:var(--sage-300)}.btn-soft{background:var(--sage-100);color:var(--sage-800)}.btn-soft:hover{background:var(--sage-200)}.btn-white{background:#fff;color:var(--sage-800);box-shadow:var(--sh-sm)}.btn-white:hover{box-shadow:var(--sh-md)}.btn-block{width:100%}.btn[disabled]{opacity:.5;pointer-events:none}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}.card-pad{padding:24px}.badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:var(--r-pill);background:var(--sage-100);color:var(--sage-800)}.badge.dot:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}.badge-ok{background:var(--ok-bg);color:#225a31}.badge-warn{background:var(--warn-bg);color:#875814}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-info{background:var(--info-bg);color:var(--info)}.badge-neutral{background:var(--surface-2);color:var(--ink-mute)}.badge-gold{background:var(--gold-100);color:var(--gold-700)}.badge-teal{background:var(--teal-100);color:var(--teal-700)}.field{display:flex;flex-direction:column;gap:7px}.field>label,.lbl{font-weight:700;font-size:14px;color:var(--ink-soft)}.lbl .req{color:var(--danger);margin-left:2px}.hint{font-size:12.5px;color:var(--ink-faint)}.input,.select,.textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--sage-400);box-shadow:0 0 0 4px var(--sage-100)}.input::placeholder{color:var(--ink-faint)}.textarea{min-height:92px;resize:vertical;line-height:1.45}.select{appearance:none;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 1l5 5 5-5' stroke='%237a8a7c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}.seg{display:inline-flex;flex-wrap:wrap;gap:8px}.seg-opt{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);font-weight:600;font-size:14px;color:var(--ink-soft);background:var(--surface);transition:all .14s;user-select:none}.seg-opt:hover{border-color:var(--sage-300);background:var(--sage-50)}.seg-opt.on{border-color:var(--sage-500);background:var(--sage-100);color:var(--sage-800);box-shadow:0 0 0 3px var(--sage-100)}.yn{display:inline-flex;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);overflow:hidden}.yn button{border:none;background:var(--surface);padding:9px 20px;font-weight:700;font-size:14px;color:var(--ink-mute);transition:all .14s}.yn button.on-yes{background:var(--ok-bg);color:#225a31}.yn button.on-no{background:var(--danger-bg);color:var(--danger)}.yn-sm button{padding:5px 14px;font-size:13px}.chip-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .14s}.chip-toggle:hover{border-color:var(--sage-600)}.chip-toggle.on{background:var(--sage-100);border-color:var(--sage-600);color:var(--sage-800)}.chk{display:flex;align-items:flex-start;gap:11px;cursor:pointer}.chk .box{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1.8px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;transition:all .14s;margin-top:1px}.chk.on .box{background:var(--sage-600);border-color:var(--sage-600)}.chk .box svg{opacity:0;transition:opacity .12s}.chk.on .box svg{opacity:1}.upload{display:flex;align-items:center;gap:14px;padding:16px;border:1.6px dashed var(--line-strong);border-radius:var(--r-md);background:var(--surface-2);transition:all .15s;cursor:pointer}.upload:hover{border-color:var(--sage-400);background:var(--sage-50)}.upload.done{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}.steps{display:flex;align-items:center;gap:0}.step{display:flex;align-items:center;gap:0;flex:1;min-width:0}.step .node{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--surface);border:2px solid var(--line-strong);color:var(--ink-mute);transition:all .2s;z-index:1}.step .bar{flex:1;height:3px;background:var(--line);margin:0 4px;border-radius:2px;transition:background .25s}.step.done .node{background:var(--sage-600);border-color:var(--sage-600);color:#fff}.step.active .node{background:#fff;border-color:var(--sage-600);color:var(--sage-700);box-shadow:0 0 0 4px var(--sage-100)}.step.done .bar{background:var(--sage-500)}.img-ph{position:relative;border-radius:var(--r-md);overflow:hidden;background:repeating-linear-gradient(135deg,#e2efe4 0 11px,#eef6ef 11px 22px);border:1px solid var(--line);display:grid;place-items:center}.img-ph span{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;letter-spacing:.02em;color:var(--ink-mute);background:#ffffffb8;padding:5px 11px;border-radius:7px;backdrop-filter:blur(2px)}.divider{height:1px;background:var(--line);border:0;margin:0}.row{display:flex;align-items:center;gap:10px}.stack{display:flex;flex-direction:column}.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.pill-tab{padding:9px 16px;border-radius:var(--r-pill);font-weight:700;font-size:14px;color:var(--ink-mute);transition:all .14s}.pill-tab.on{background:var(--sage-600);color:#fff}.pill-tab:not(.on):hover{background:var(--sage-100);color:var(--sage-800)}.fade-in{opacity:1;transform:none;transition:transform .45s ease}@starting-style{.fade-in{transform:translateY(8px)}}@media (prefers-reduced-motion: reduce){.fade-in{transition:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.avatar{border-radius:50%;background:var(--sage-200);color:var(--sage-800);display:grid;place-items:center;font-weight:800;font-family:var(--font-head);flex:0 0 auto}.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:800;padding:12px 14px;border-bottom:1px solid var(--line)}.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}.tbl tbody tr{transition:background .12s}.tbl tbody tr:hover{background:var(--sage-50)}
