:root{--bg-app: #F2F0EA;--bg-card: #FFFFFF;--bg-card-subtle: #F7F5F0;--bg-inverse: #16140F;--bg-inverse-raised: #24211B;--bg-hover: #F2F0EA;--gradient-hero: linear-gradient(135deg, #2E1A3E 0%, #45265A 55%, #553067 100%);--primary: #A8696D;--primary-hover: #96585C;--primary-soft: #F3E7E7;--on-primary: #FFFFFF;--accent: #F1581F;--accent-soft: #FDE7DC;--accent-hatch: rgba(241, 88, 31, .55);--text-primary: #1B1813;--text-secondary: #8C877B;--text-tertiary: #B5B0A4;--text-on-inverse: #F5F2EC;--text-on-inverse-2: #9A948A;--border: #E9E6DE;--border-strong: #D9D5CB;--divider-dotted: 1px dashed #D9D5CB;--success: #2F8A47;--success-soft: #E4F3E8;--info: #4C5FD5;--info-soft: #E7EAFB;--warning: #D97B12;--warning-soft: #FBEEDC;--danger: #DE4A4A;--danger-soft: #FBE5E5;--pastel-1: #F4D7E2;--pastel-1-fg: #B0517E;--pastel-2: #D9EFD9;--pastel-2-fg: #3F8A4B;--pastel-3: #FBEACB;--pastel-3-fg: #C08A2D;--pastel-4: #DCE6F9;--pastel-4-fg: #4C5FD5;--chart-line: #C9C4B8;--chart-line-2: #4C5FD5;--chart-dot: #1B1813;--chart-grid: #EFEDE6;--chart-gauge-track: #ECEAE3;--chart-gauge-fill: #1B1813;--radius-card: 20px;--radius-inner: 14px;--radius-pill: 999px;--shadow-card: 0 1px 2px rgb(0 0 0 / .04);--shadow-float: 0 8px 24px rgb(0 0 0 / .12);--font-sans: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, sans-serif;--fs-title: 26px;--fw-title: 700;--fs-kpi: 30px;--fw-kpi: 700;--fs-card-h: 17px;--fw-card-h: 600;--fs-body: 14px;--fw-body: 500;--fs-small: 12.5px;--fs-label: 11px;--ls-heading: -.02em;--ls-label: .08em;--space-card-pad: 22px;--space-gap: 18px;--space-page: 28px;--foot-left: var(--info);--foot-left-soft: var(--info-soft);--foot-right: var(--accent);--foot-right-soft: var(--accent-soft)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%;background:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hatch{background:repeating-linear-gradient(45deg,var(--accent-hatch) 0 3px,transparent 3px 6px),var(--accent-soft)}button{font-family:inherit;font-weight:600}input{font-family:inherit}.app{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto 1fr;gap:var(--space-gap) 24px;padding:22px var(--space-page) var(--space-page);min-height:100vh}.topbar{grid-column:1 / -1;display:flex;align-items:center;padding-bottom:6px}.brand{display:flex;align-items:center;gap:14px}.brand-glyph{width:34px;height:34px;border-radius:10px;background:var(--bg-inverse);color:var(--text-on-inverse);display:grid;place-items:center;font-size:16px;font-weight:700;letter-spacing:-.02em}.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1.1}.brand-mark{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}.brand-tag{font-size:11px;font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-card-pad);box-shadow:var(--shadow-card)}.board-column{grid-column:1 / 2;grid-row:2 / 3;display:flex;flex-direction:column;gap:var(--space-gap);min-height:0}.title-card{display:flex;align-items:center;gap:14px}.title-block-label{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}.title-input{flex:1;background:var(--bg-card-subtle);border:1px solid var(--border);border-radius:var(--radius-pill);padding:10px 18px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);outline:none;transition:border-color .15s ease,background .15s ease}.title-input::placeholder{color:var(--text-tertiary);font-weight:500}.title-input:focus{border-color:var(--primary);background:var(--bg-card)}.board-wrap{position:relative;flex:1;min-height:820px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px;box-shadow:var(--shadow-card);overflow:hidden}.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.board-head-title{font-size:var(--fs-card-h);font-weight:var(--fw-card-h);letter-spacing:var(--ls-heading);color:var(--text-primary)}.board-head-hint{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);font-size:12px;font-weight:500;color:var(--text-secondary)}.board-head-hint .pill-dot{width:8px;height:8px;border-radius:50%}.board-head-hint.left .pill-dot{background:var(--foot-left)}.board-head-hint.right .pill-dot{background:var(--foot-right)}.board{position:relative;height:calc(100% - 42px);border-radius:var(--radius-inner);background:radial-gradient(circle,rgba(24,24,26,.06) 1px,transparent 1px) 11px 11px / 22px 22px,var(--bg-card-subtle);border:1px dashed var(--border-strong);cursor:crosshair;overflow:hidden}.ladder{position:absolute;left:50%;top:36px;bottom:36px;transform:translate(-50%);width:130px;display:flex;flex-direction:column;pointer-events:none}.ladder:before,.ladder:after{content:"";position:absolute;top:0;bottom:0;width:6px;background:var(--bg-inverse);border-radius:3px;z-index:1}.ladder:before{left:-3px}.ladder:after{right:-3px}.cell{position:relative;flex:1}.rung{flex:0 0 12px;background:repeating-linear-gradient(45deg,rgba(212,160,23,.55) 0 3px,transparent 3px 6px),#fbe9a8;border-top:1px solid #D4A017;border-bottom:1px solid #D4A017}.cell-label{position:absolute;top:50%;right:calc(100% + 18px);transform:translateY(-50%);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;pointer-events:none}.cell-label:after{content:"";position:absolute;top:50%;left:calc(100% + 6px);width:6px;height:1px;background:var(--border-strong);transform:translateY(-50%)}.dot{position:absolute;width:38px;height:38px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;color:#fff;-webkit-user-select:none;user-select:none;pointer-events:none;border:2px solid var(--bg-card);animation:dot-in .24s cubic-bezier(.34,1.56,.64,1)}.dot:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:1px dashed currentColor;opacity:.4}.dot.left{background:var(--foot-left);color:var(--foot-left);box-shadow:0 4px 14px #4c5fd538}.dot.left>span{color:#fff}.dot.right{background:var(--foot-right);color:var(--foot-right);box-shadow:0 4px 14px #f1581f38}.dot.right>span{color:#fff}.board[data-dot-size=s] .dot{width:30px;height:30px;font-size:11px}.board[data-dot-size=s] .dot:after{top:-5px;right:-5px;bottom:-5px;left:-5px}@keyframes dot-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.sidebar{grid-column:2 / 3;grid-row:2 / 3;display:flex;flex-direction:column;gap:var(--space-gap);align-self:start;position:sticky;top:22px;max-height:calc(100vh - 44px);min-height:0}.side-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-card-pad);box-shadow:var(--shadow-card)}.side-card.flex-grow{flex:1;display:flex;flex-direction:column;min-height:0}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.card-head-title{font-size:var(--fs-card-h);font-weight:var(--fw-card-h);letter-spacing:var(--ls-heading);color:var(--text-primary)}.count-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--bg-card-subtle);border:1px solid var(--border);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.foot-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}.foot-btn{position:relative;padding:16px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-inner);cursor:pointer;color:var(--text-secondary);transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .2s ease;text-align:left;display:flex;flex-direction:column;gap:4px;font-family:inherit}.foot-btn:hover{border-color:var(--border-strong);color:var(--text-primary)}.foot-pip{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--border-strong);transition:background .15s ease,box-shadow .15s ease}.foot-glyph{font-size:30px;font-weight:700;line-height:1;letter-spacing:var(--ls-heading);color:var(--text-primary);font-variant-numeric:tabular-nums}.foot-name{font-size:11px;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary)}.foot-btn.active.left{background:var(--foot-left-soft);border-color:var(--foot-left);color:var(--foot-left)}.foot-btn.active.left .foot-glyph,.foot-btn.active.left .foot-name{color:var(--foot-left)}.foot-btn.active.left .foot-pip{background:var(--foot-left);box-shadow:0 0 0 4px #4c5fd52e}.foot-btn.active.right{background:var(--foot-right-soft);border-color:var(--foot-right);color:var(--foot-right)}.foot-btn.active.right .foot-glyph,.foot-btn.active.right .foot-name{color:var(--foot-right)}.foot-btn.active.right .foot-pip{background:var(--foot-right);box-shadow:0 0 0 4px #f1581f2e}.size-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.size-toggle-label{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary)}.seg{display:inline-flex;padding:3px;border:1px solid var(--border);background:var(--bg-card-subtle);border-radius:var(--radius-pill)}.seg-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;padding:0 14px;height:28px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:background .15s ease,color .15s ease}.seg-btn:hover{color:var(--text-primary)}.seg-btn.active{background:var(--bg-inverse);color:var(--text-on-inverse)}.hint{margin:12px 0 0;font-size:12.5px;font-weight:500;line-height:1.55;color:var(--text-secondary)}.steps-list{display:flex;flex-direction:column;overflow-y:auto;padding-right:4px;margin-right:-4px;min-height:0;flex:1}.steps-list::-webkit-scrollbar{width:6px}.steps-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.step-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-primary);transition:background .12s ease}.step-row:last-child{border-bottom:none}.step-row:hover{background:var(--bg-hover)}.step-index{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-tertiary);min-width:22px}.step-foot{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:capitalize}.step-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0}.step-swatch.left{background:var(--foot-left)}.step-swatch.right{background:var(--foot-right)}.step-cell{font-size:11.5px;font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);font-variant-numeric:tabular-nums}.delete-btn{background:transparent;border:none;width:24px;height:24px;border-radius:50%;color:var(--text-tertiary);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;transition:color .15s ease,background .15s ease}.delete-btn:hover{background:var(--danger-soft);color:var(--danger)}.empty-state{padding:24px 0;text-align:center;font-size:12px;font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary);border:1px dashed var(--border);border-radius:var(--radius-inner)}.actions{display:flex;flex-direction:column;gap:10px}.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;letter-spacing:-.005em;cursor:pointer;transition:opacity .15s ease,background .15s ease,border-color .15s ease,color .15s ease}.btn-primary{background:var(--bg-inverse);border:1px solid var(--bg-inverse);color:var(--text-on-inverse)}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-primary svg{width:14px;height:14px}.btn-secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.export-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#141416b8;display:grid;place-items:center;padding:24px;overflow:auto}.export-view{padding:36px 32px 40px;background:#fff;color:#1b1813;border-radius:var(--radius-card);box-shadow:0 24px 80px #00000073;max-width:calc(100vw - 48px)}.export-view .dot{animation:none}.export-title{text-align:center;font-size:22px;font-weight:700;letter-spacing:var(--ls-heading);color:#1b1813;margin-bottom:22px;word-break:break-word}.export-board-wrap{position:relative;background:#fff;overflow:hidden;max-width:100%}.export-board-wrap .board{position:absolute;top:0;right:0;bottom:0;left:0;cursor:default;border:none;background:#fff}.export-board-wrap .dot{border-color:#fff}@media (max-width: 980px){.app{grid-template-columns:1fr;padding:18px}.sidebar{grid-column:1 / -1;grid-row:auto;position:static;max-height:none}.board-wrap{min-height:480px}}