:root{--bg: #0D0A18;--panel: #17122A;--board: #120E22;--line: #2C2448;--line2: #4A3F78;--text: #F5F0FF;--muted: #A89EC9;--pink: #FF4FB0;--pink-bg: #2A1028;--cyan: #2EE6F6;--lime: #B6F23A;--orange: #FF9F2E;--red: #FF5A6E;--grape: #9B5CFF;--display: "Fredoka", system-ui, sans-serif;--body: "DM Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--cyan)}.app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;overflow-x:clip}.screen{flex:1;padding:calc(14px + env(safe-area-inset-top)) 16px 96px}.head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.head h1{margin:0;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}.head .sub{font-size:13px;color:var(--muted);margin-top:2px}.grow{flex:1;min-width:0}.btn{height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-family:var(--display);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.btn.primary{background:var(--pink);border-color:var(--pink);color:#1a0716}.btn.cyan{background:var(--cyan);border-color:var(--cyan);color:#04262a}.btn.danger{background:#2a0d14;border-color:var(--red);color:#ffc2cb}.btn.on{background:var(--pink-bg);border-color:var(--pink)}.btn:disabled{opacity:.45;cursor:default}.btn.icon{width:44px;padding:0}.row{display:flex;gap:8px;align-items:center}.wrap{flex-wrap:wrap}.stat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px;min-width:0}.stat .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.stat .v{font-family:var(--mono);font-size:15px;margin-top:2px}.fit-short{background:#2a1d0c;border-color:var(--orange)}.fit-short .v{color:#ffd9a8;font-family:var(--display);font-weight:600}.fit-ok{background:#14240a;border-color:var(--lime)}.fit-ok .v{color:#d8ff8a;font-family:var(--display);font-weight:600}.fit-over{background:#2a0d14;border-color:var(--red)}.fit-over .v{color:#ffc2cb;font-family:var(--display);font-weight:600}.card{background:var(--board);border:1px solid var(--line);border-radius:22px;padding:14px 10px 16px;margin-top:10px}.card-title{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 10px;gap:8px}.card-title b{font-family:var(--display);font-weight:600;font-size:15px}.hint{font-size:12px;color:var(--muted)}.label{font-family:var(--display);font-weight:600;font-size:15px}.strand{display:grid;grid-template-columns:repeat(auto-fill,36px);gap:4px;justify-content:center}.slot{width:36px;height:38px;padding:0;border:none;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.slot.wide{grid-column:span var(--span);width:auto}.slot .empty{width:24px;height:30px;border-radius:8px;border:1px dashed var(--line2)}.slot.sel .bead-svg{outline:2px solid var(--text);outline-offset:2px;border-radius:9px}.caret{position:absolute;left:-3px;top:3px;width:3px;height:32px;border-radius:2px;background:var(--pink);animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:.15}}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.chip{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 10px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:left}.chip.low{border-color:#6b5a1a}.chip.out{opacity:.45}.chip .nm{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip .ct{display:block;font-family:var(--mono);font-size:12px;color:var(--muted)}.chip.low .ct{color:#ffd93d}.chip>span:last-child{min-width:0;line-height:1.15}.list{display:flex;flex-direction:column;gap:10px;margin-top:8px}.item{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px}.pill{font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;white-space:nowrap}.pill.ok{background:#14240a;color:#d8ff8a}.pill.short{background:#2a0d14;color:#ffc2cb}.mini{display:flex;gap:2px;padding:8px 6px;border-radius:12px;background:var(--board);overflow:hidden;margin-top:10px}.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}.field>span{font-size:13px;color:var(--muted)}.input{height:48px;border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:0 14px;font-size:16px;width:100%}.input:focus{outline:2px solid var(--pink);outline-offset:1px}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:14px}.seg button.on{background:var(--pink-bg);border-color:var(--pink)}.swatch{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);padding:0;overflow:hidden;background:none}.swatch input{width:64px;height:64px;margin:-8px;border:none;padding:0;background:none;cursor:pointer}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:calc(88px + env(safe-area-inset-bottom));background:#241d3d;border:1px solid var(--line2);padding:10px 14px;border-radius:14px;font-size:14px;max-width:90vw;z-index:20}nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;align-items:center;height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #241D3D;background:#110d1f}nav.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;color:var(--muted);font-size:11px;min-width:52px;padding:6px 0}nav.tabs button.on{color:var(--pink);font-weight:700}.login{max-width:400px;margin:0 auto;padding:72px 20px;text-align:center}.login h1{font-family:var(--display);font-size:36px;margin:16px 0 6px}.center-msg{text-align:center;color:var(--muted);padding:40px 16px}.ring{position:relative;margin:0 auto}.ring svg{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.ring .ruler-in{font-family:var(--mono);font-size:10px;fill:var(--text);text-anchor:middle;dominant-baseline:middle}.ring .ruler-in.start{fill:var(--pink);font-weight:700}.ring .ruler-mm{font-family:var(--mono);font-size:8.5px;fill:var(--muted);text-anchor:middle;dominant-baseline:middle}.ring .ring-big{font-family:var(--mono);font-size:14px;fill:var(--text);text-anchor:middle}.ring .ring-small{font-size:11px;fill:var(--muted);text-anchor:middle}.ring .blink{animation:blink 1s steps(1) infinite}.ring-bead{position:absolute;padding:0;border:none;background:none;display:flex;line-height:0}.ring-bead.sel .bead-svg{outline:2px solid var(--text);outline-offset:2px;border-radius:6px}.ring-bead.over{opacity:.45}.ring-bead.over .bead-svg{outline:2px solid var(--red);outline-offset:1px;border-radius:6px}.ruler-wrap{position:fixed;left:0;right:0;top:0;bottom:calc(68px + env(safe-area-inset-bottom));padding:calc(10px + env(safe-area-inset-top)) 0 6px;background:#f7f3ff}.ruler-box{position:relative;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.rl-ticks line{stroke:#1a1430;stroke-width:1}.rl-num{fill:#1a1430;font:700 13px var(--mono)}.rl-zero,.rl-line{stroke:var(--pink);stroke-width:2}.rl-label{position:absolute;top:8px;font:700 12px var(--mono);color:#6b5f94}.rl-left{left:56px}.rl-right{right:56px}.rl-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(230px,58vw);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 12px;border-radius:16px;background:#0d0a18eb;color:var(--text)}.ruler-wrap.overlay{bottom:0;z-index:30;padding-bottom:calc(6px + env(safe-area-inset-bottom))}.rl-overlay-cal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;overflow-y:auto;background:var(--bg)}.rl-warn{font-size:12px;color:#ffd27a}.rl-help{margin:0;padding-left:18px;text-align:left;font-size:13px;line-height:1.4;display:grid;gap:6px}