:root{--bg: #ffffff;--panel: #f5f6f8;--panel-edge: #e8eaee;--rule: #e2e4e8;--ink: #1b1d21;--ink-soft: #565b64;--ink-faint: #6b717b;--thread: #a81b45;--thread-soft: #fdf2f5;--ok: #2f6b4f;--ok-soft: #eff6f2;--warn: #8a5a12;--warn-soft: #fdf6ea;--on-dark: #ffffff;--scrim: rgba(27, 29, 33, .72);--sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, sans-serif;--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--s7: 48px;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-text-size-adjust:100%}.num{font-family:var(--mono);font-variant-numeric:tabular-nums}.screen{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--s5) var(--s5) var(--s6)}.foot{padding:var(--s3) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));display:grid;gap:var(--s2)}h1{font-size:1.6rem;font-weight:700;line-height:1.25;text-wrap:balance}h2{font-size:1.15rem;font-weight:600}h3{font-size:1rem;font-weight:600}p{color:var(--ink-soft)}.lede{font-size:1.03rem;line-height:1.6}.tiny{font-size:.8125rem}.muted{color:var(--ink-faint)}.stack{display:grid;gap:var(--s4)}.row{display:flex;align-items:center;gap:var(--s3)}.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;padding:0 var(--s4);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font:inherit;font-size:1.03rem;font-weight:600;cursor:pointer;transition:background .14s var(--ease),transform 90ms var(--ease)}.btn:active:not(:disabled){transform:scale(.985)}.btn:disabled{opacity:.42;cursor:not-allowed}.btn-primary{background:var(--thread);border-color:var(--thread);color:var(--on-dark)}.btn-ghost{border:none;background:none;color:var(--ink-soft);font-weight:500;min-height:44px}label{display:block;font-size:.875rem;font-weight:600;margin-bottom:var(--s1)}.input{width:100%;min-height:52px;padding:0 var(--s3);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}.input:focus-visible,.btn:focus-visible{outline:2px solid var(--thread);outline-offset:2px}.input::placeholder{color:var(--ink-faint)}.seg{display:flex;gap:var(--s2)}.seg .btn{flex:1;font-weight:500}.seg .on{background:var(--ink);border-color:var(--ink);color:var(--on-dark);font-weight:600}.check{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer}.check input{width:24px;height:24px;accent-color:var(--thread);margin-top:2px;flex:none}.check span{font-size:.9rem;color:var(--ink);line-height:1.45}.note{padding:var(--s3) var(--s4);border-radius:var(--r-md);border:1px solid var(--rule);background:var(--panel);font-size:.875rem}.note-ok{background:var(--ok-soft);border-color:#2f6b4f40;color:var(--ok)}.note-warn{background:var(--warn-soft);border-color:#8a5a1240;color:var(--warn)}.note-bad{background:var(--thread-soft);border-color:#a81b4540;color:var(--thread)}.cam{position:fixed;inset:0;background:#000;overflow:hidden}.cam video{width:100%;height:100%;object-fit:cover}.cam canvas{display:none}.guide{position:absolute;inset:6% 0 14%;width:100%;pointer-events:none}.hud{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));display:grid;gap:var(--s3)}.card{background:var(--bg);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s2)}.turnbar{background:var(--scrim);color:var(--on-dark);border-radius:var(--r-lg);padding:var(--s4);display:grid;gap:var(--s1);justify-items:center;text-align:center}.turnstep{font-size:.8rem;opacity:.75;font-family:var(--mono)}.turnlabel{font-size:1.5rem;font-weight:700}.count{font-size:3rem;font-weight:700;font-family:var(--mono);line-height:1.05}.dial{position:absolute;top:calc(var(--s5) + env(safe-area-inset-top));left:50%;transform:translate(-50%)}.busy{position:absolute;inset:0;display:grid;place-items:center;background:var(--scrim);color:var(--on-dark);font-size:1.1rem;font-weight:600;gap:var(--s3)}.stage{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--r-lg);padding:var(--s3);touch-action:none}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--s2)}.tile{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s3);display:grid;gap:2px}.tile b{font-size:1.35rem;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}.tile i{font-style:normal;font-size:.75rem;color:var(--ink-faint)}.list{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}.list>div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3);border-top:1px solid var(--rule);font-size:.9rem}.list>div:first-child{border-top:none}.spin{width:22px;height:22px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
