.sheet--circular { background:#f5f5f5; }
.sheet--circular .sheet-inner { max-width:760px; }
.sheet--circular .bar { z-index:2; background:#f5f5f5; }
.sheet--circular .bar,.sheet--circular .bar button { color:#3d3d3d; }
.sheet--circular .sheet-body { padding:0; text-align:left; }
.sheet--circular #sheet-icon { display:none; }
.sheet--circular #sheet-text { margin:0; line-height:1.4; }
.ck-page { --ck-blue:#1677ff; --ck-muted:#999; min-height:calc(100vh - 52px); padding:18px 16px 36px; color:#3d3d3d; }
.ck-page [hidden] { display:none !important; }
.ck-page button,.ck-page input,.ck-page select { font:inherit; }
.ck-page button { cursor:pointer; }
.ck-tabs { display:grid; grid-template-columns:1fr 1fr; margin:0 0 28px; border-bottom:1px solid var(--line); background:transparent; }
.ck-tabs button { min-height:58px; padding:14px 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:#8d9299; font-size:17px; }
.ck-tabs button.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:700; }
.ck-tabs button:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
.ck-diagram-panel { display:grid; gap:20px; color:#26313f; }
.ck-diagram-card { --card-color:#448bff; overflow:hidden; border:1px solid #e5e8ed; border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(31,43,58,.06); }
.ck-diagram-card--green { --card-color:#22b17f; }
.ck-diagram-card--orange { --card-color:#f59b0b; }
.ck-diagram-card--red { --card-color:#ff6269; }
.ck-diagram-card>header { position:relative; display:flex; min-height:112px; padding:24px 20px; align-items:center; gap:14px; border-bottom:1px solid #e8ebef; }
.ck-diagram-card>header::before { position:absolute; inset:0 auto 0 0; width:4px; background:var(--card-color); content:""; }
.ck-step { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--card-color) 13%,white); color:var(--card-color); font-size:19px; font-weight:800; }
.ck-diagram-card header h3 { margin:0; color:#202b39; font-size:21px; }
.ck-diagram-card header p { margin:3px 0 0; color:#9aa5b4; font-size:14px; }
.ck-diagram-card header button { margin-left:auto; padding:8px 0; border:0; background:transparent; color:var(--card-color); white-space:nowrap; }
.ck-card-body { padding:18px 20px 20px; }
.ck-scroll { overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.ck-diagram-card table { width:100%; min-width:510px; border-collapse:collapse; table-layout:fixed; color:#444; text-align:center; }
.ck-diagram-card th,.ck-diagram-card td { height:52px; border:1px solid #e2e6ea; }
.ck-diagram-card th { background:#f0f3f6; font-weight:600; }
.ck-order-table th:first-child { width:44px; }
.ck-order-table td { background:#fff; }
.ck-order-table td>button { display:block; width:100%; height:100%; padding:0; border:0; outline:0; background:transparent; color:#3375df; font-weight:700; text-align:center; }
.ck-order-table td>button.selected { background:#edf4ff; box-shadow:inset 0 0 0 2px var(--ck-blue); }
.ck-card-foot,.ck-config-tools,.ck-matrix-caption,.ck-preview-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ck-card-foot { margin-top:12px; color:#9aa5b4; font-size:14px; }
.ck-card-foot button,.ck-config-tools>button { padding:8px 16px; border:0; border-radius:10px; background:color-mix(in srgb,var(--card-color) 10%,white); color:var(--card-color); font-weight:600; }
.ck-order-picker { margin-top:12px; padding:10px; border-radius:14px; background:#f6f7f9; }
.ck-order-picker>div { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.ck-order-picker>div button { width:76px; height:64px; flex:0 0 76px; border:0; border-radius:12px; background:#fff; color:#111; font-size:21px; font-weight:700; box-shadow:0 2px 7px #0001; }
.ck-order-picker footer { display:grid; margin-top:8px; grid-template-columns:1fr 1.3fr; gap:8px; }
.ck-order-picker footer button { min-height:52px; border:1px solid #ffc0c4; border-radius:12px; background:#fff3f4; color:#ee4d59; font-weight:700; }
.ck-order-picker footer button:last-child { border-color:#347de5; background:#347de5; color:#fff; }
.ck-config-tools { margin-bottom:12px; }
.ck-route-stepper { display:flex; height:46px; align-items:center; overflow:hidden; border:1px solid #cfe5dd; border-radius:12px; background:#f8fffc; }
.ck-route-stepper button { width:50px; height:100%; border:0; background:transparent; color:#13966b; font-size:23px; }
.ck-route-stepper strong { padding-left:15px; border-left:1px solid #dce9e5; color:#26342f; font-size:19px; }
.ck-route-stepper small { padding:0 15px 0 3px; border-right:1px solid #dce9e5; color:#78867f; }
.ck-config-table th:first-child,.ck-intent-table th:first-child { width:44px; }
.ck-config-table td { background:#fff; }
.ck-config-table button { width:100%; height:100%; border:0; background:transparent; color:#a8caff; font-size:23px; }
.ck-config-table tr.used th { background:#e5f8f0; color:#15946a; }
.ck-config-table tr.used td { background:#e4f7fc; }
.ck-config-table tr.used button { color:#4c91ff; }
.ck-config-table tr.used td.action-tuck { background:#f5fae9; }
.ck-config-table tr.used td.action-tuck button,.ck-intent-table td.action-tuck { color:#20aa77; }
.ck-config-table tr.used td.action-miss { background:#fff4df; }
.ck-config-table tr.used td.action-miss button,.ck-intent-table td.action-miss { color:#df7718; }
.ck-config-table button:disabled { cursor:default; }
.ck-helper { margin:12px 0 0; color:#9aa5b4; font-size:14px; }
.ck-matrix-caption { margin-bottom:10px; color:#9aa5b4; }
.ck-matrix-caption strong { color:#da8100; }
.ck-intent-table td { background:#e2f5fc; color:#4c91ff; font-size:21px; }
.ck-intent-table td.action-tuck { background:#f5fae9; }
.ck-intent-table td.action-miss { background:#fff4df; }
.ck-preview-tools { margin-bottom:14px; }
.ck-side-switch { display:grid; width:250px; padding:4px; grid-template-columns:1fr 1fr; border-radius:12px; background:#f1f2f5; }
.ck-side-switch button { min-height:42px; border:0; border-radius:9px; background:transparent; color:#9aa5b4; }
.ck-side-switch button.active { background:#fff; color:#ee4c55; font-weight:700; box-shadow:0 2px 8px #0001; }
.ck-color-picker { position:relative; flex:0 0 auto; }
.ck-color-trigger { display:grid; width:50px; height:50px; padding:5px; border:1px solid color-mix(in srgb,var(--picked) 55%,white); border-radius:50%; background:#fff; box-shadow:0 4px 14px #a83d4b20; place-items:center; }
.ck-color-trigger span { display:block; width:30px; height:30px; border:4px solid color-mix(in srgb,var(--picked) 72%,#8f3e47); border-radius:50%; background:var(--picked); box-shadow:inset 0 0 0 1px #fff7; }
.ck-color-popover { position:absolute; z-index:5; top:58px; right:0; width:284px; padding:16px; border:1px solid #e9e9ed; border-radius:18px; background:#fff; box-shadow:0 16px 40px #25304424; }
.ck-color-popover::before { position:absolute; top:-6px; right:19px; width:12px; height:12px; border:1px solid #e9e9ed; border-right:0; border-bottom:0; background:inherit; content:""; transform:rotate(45deg); }
.ck-color-popover header { display:flex; align-items:center; justify-content:space-between; }
.ck-color-popover header div { display:flex; align-items:baseline; gap:9px; }
.ck-color-popover strong { color:#30343a; font-size:15px; }
.ck-color-popover small { color:#9ca2aa; font-size:12px; letter-spacing:.04em; }
.ck-color-popover header button { width:28px; height:28px; padding:0; border:0; border-radius:50%; background:#f4f5f7; color:#9298a0; font-size:19px; line-height:1; }
.ck-color-presets { display:grid; margin-top:15px; grid-template-columns:repeat(8,1fr); gap:7px; }
.ck-color-presets button { position:relative; width:25px; height:25px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #dfe2e6; }
.ck-color-presets button[aria-pressed="true"] { box-shadow:0 0 0 2px #59616b; transform:scale(.9); }
.ck-hue-control { display:block; margin-top:16px; color:#858c95; font-size:13px; }
.ck-hue-control span { display:block; margin-bottom:9px; }
.ck-hue-control input { width:100%; height:9px; margin:0; border-radius:10px; outline:0; appearance:none; background:linear-gradient(90deg,#ef6a6a,#eecf6a,#6aef83,#6ae5ef,#6a79ef,#cf6aef,#ef6a82); }
.ck-hue-control input::-webkit-slider-thumb { width:20px; height:20px; border:3px solid #fff; border-radius:50%; appearance:none; background:var(--picked); box-shadow:0 1px 6px #0004; }
.ck-hue-control input::-moz-range-thumb { width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:var(--picked); box-shadow:0 1px 6px #0004; }
.ck-rgb-inputs { display:grid; margin-top:18px; grid-template-columns:repeat(3,1fr); gap:9px; }
.ck-rgb-inputs label { display:grid; grid-template-columns:20px 1fr; align-items:center; border:1px solid #e2e5e9; border-radius:10px; background:#f7f8fa; overflow:hidden; }
.ck-rgb-inputs span { color:#969ca5; font-size:12px; font-weight:700; text-align:right; }
.ck-rgb-inputs input { width:100%; min-width:0; height:38px; padding:0 8px 0 5px; border:0; outline:0; background:transparent; font-size:14px; text-align:center; }
.ck-rgb-inputs label:focus-within { border-color:var(--picked); box-shadow:0 0 0 2px color-mix(in srgb,var(--picked) 16%,transparent); }
.ck-loop-preview { min-height:420px; padding:20px; overflow-x:auto; border-radius:18px; background:#f7f8fa; }
.ck-loop-preview p { color:#a7afbc; }
.ck-loop-preview svg { display:block; width:var(--loop-width); min-width:var(--loop-min-width); max-width:100%; height:auto; }
.ck-loop-preview path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ck-stitch-shadow { stroke:color-mix(in srgb,var(--loop-color) 72%,#7e2630); stroke-width:9; }
.ck-stitch-yarn { stroke:color-mix(in srgb,var(--loop-color) 42%,white); stroke-width:5; }
.ck-action-overlay { position:fixed; z-index:40; inset:0; display:flex; align-items:flex-end; justify-content:center; background:rgba(10,15,20,.34); }
.ck-action-sheet { width:min(760px,100%); padding:10px 20px max(24px,env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:#fff; color:#111; box-shadow:0 -12px 40px #0002; }
.ck-sheet-handle { display:block; width:76px; height:6px; margin:0 auto 16px; border-radius:9px; background:#e2e5e9; }
.ck-action-sheet>header { display:flex; align-items:flex-start; justify-content:space-between; }
.ck-action-sheet h3 { margin:0; font-size:25px; }
.ck-action-sheet header p { margin:5px 0 0; color:#999; }
.ck-action-sheet header button { display:grid; width:52px; height:52px; border:0; border-radius:50%; background:#f5f6f8; color:#999; font-size:30px; place-items:center; }
.ck-action-options { display:grid; margin-top:20px; grid-template-columns:repeat(3,1fr); gap:12px; }
.ck-action-options>button { display:flex; min-height:176px; padding:16px 8px; align-items:center; justify-content:center; flex-direction:column; border:1px solid transparent; border-radius:18px; background:#edf9f4; color:#1ba978; }
.ck-action-options>button:first-child { background:#fff; color:#347ff0; }
.ck-action-options>button:last-child { background:#fff3e8; color:#dc7015; }
.ck-action-options>button.selected { border-color:currentColor; }
.ck-action-options b { font-size:48px; line-height:1; font-weight:500; }
.ck-action-options strong { margin-top:14px; color:#111; font-size:20px; }
.ck-action-options small { margin-top:5px; color:#999; font-size:15px; }
.ck-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.ck-heading h3 { margin:0; font-size:22px; font-weight:700; }
.ck-heading>div { display:flex; gap:8px; }
.ck-quiet,.ck-primary,.ck-result-reset { min-height:40px; padding:6px 14px; border-radius:10px; }
.ck-quiet { border:1px solid #d8d8d8; background:#fff; color:#888; }
.ck-primary { border:1px solid var(--ck-blue); background:var(--ck-blue); color:white; }
.ck-yarns { display:grid; gap:14px; }
.ck-yarn { padding:16px; border-radius:12px; background:#fff; }
.ck-yarn-head { display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.ck-yarn-head strong { font-size:17px; white-space:nowrap; }
.ck-switch { display:flex; gap:2px; padding:4px; border-radius:10px; background:#f7f7f7; }
.ck-switch button { border:0; border-radius:8px; padding:7px 9px; background:transparent; color:#555; font-size:14px; white-space:nowrap; }
.ck-switch button[aria-pressed="true"] { background:#fff; color:var(--ck-blue); }
.ck-remove { margin-left:auto; padding:5px; border:0; background:transparent; color:#999; font-size:13px; }
.ck-yarn-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:9px 2px; border-radius:10px; background:#f7f7f7; }
.ck-yarn-fields label { min-width:0; padding:0 8px; text-align:center; }
.ck-yarn-fields label+label { border-left:1px solid #ebebeb; }
.ck-yarn-fields label>span { display:block; margin-bottom:6px; color:#888; font-size:15px; }
.ck-yarn-fields label>div { display:flex; align-items:center; justify-content:center; gap:4px; }
.ck-yarn-fields input { width:54%; min-width:0; border:0; outline:0; background:transparent; color:#333; text-align:center; }
.ck-yarn-fields small { color:#999; font-size:13px; white-space:nowrap; }
.ck-ratio { display:flex; justify-content:space-between; margin:10px 0 7px; color:#888; font-size:14px; }
.ck-ratio output { color:var(--ck-blue); }
.ck-track { height:8px; overflow:hidden; border-radius:9px; background:#eee; }
.ck-track span { display:block; height:100%; border-radius:9px; background:var(--ck-blue); }
.ck-machine { margin:16px 0 30px; padding:18px; border-radius:12px; background:#f8faff; }
.ck-machine-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.ck-machine-grid>label,.ck-price>label { min-width:0; color:#444; font-size:16px; }
.ck-input { display:flex; align-items:center; gap:6px; margin-top:8px; }
.ck-input input,.ck-price input { width:100%; min-width:0; height:42px; padding:0 10px; border:1px solid transparent; border-radius:5px; outline:0; background:#fff; color:#333; }
.ck-input input:focus,.ck-price input:focus,.ck-yarn-fields input:focus { border-color:var(--ck-blue); }
.ck-input span { min-width:50px; color:#aaa; font-size:14px; white-space:nowrap; }
.ck-price { margin-top:18px; }
.ck-price>div { display:flex; gap:10px; align-items:center; margin-top:8px; }
.ck-price input { flex:1; }
.ck-currency { position:relative; flex:0 0 auto; color:#333; }
.ck-currency-trigger { padding:8px 2px; border:0; background:transparent; color:inherit; font-size:14px !important; white-space:nowrap; }
.ck-currency-menu { position:absolute; z-index:4; top:100%; right:0; min-width:124px; padding:4px; border:1px solid #d9dde1; border-radius:8px; background:#f5f5f5; box-shadow:0 8px 22px #0002; }
.ck-currency-menu button { display:block; width:100%; padding:9px 8px; border:0; border-radius:5px; background:transparent; color:inherit; font-size:14px; text-align:left; white-space:nowrap; }
.ck-currency-menu button:hover,.ck-currency-menu button[aria-selected="true"] { background:#e4e8ed; }
.ck-results { margin-top:34px; }
.ck-result-reset { border:0; border-radius:24px; background:#e0eeff; color:var(--ck-blue); }
.ck-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ck-metrics article { display:flex; min-height:126px; padding:14px 4px; align-items:center; justify-content:center; flex-direction:column; border-radius:12px; background:#fff; text-align:center; }
.ck-metrics strong { color:var(--ck-blue); font-size:29px; line-height:1.2; overflow-wrap:anywhere; }
.ck-metrics .ck-orange { color:#ff643b; }
.ck-metrics span { margin-top:4px; color:#999; font-size:13px; }
.ck-details { margin:24px 0 0; }
.ck-details>div { display:flex; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid #ebebeb; font-size:16px; }
.ck-details dt,.ck-details dd { margin:0; }
.ck-details dd { font-weight:700; }
.ck-note { margin:20px 0; color:#999; font-size:13px; text-align:center; }
.ck-note strong { color:var(--ck-blue); }
.ck-page input::-webkit-inner-spin-button,.ck-page input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.ck-page input[type=number] { appearance:textfield; -moz-appearance:textfield; }
.ck-page input[type=number] { color:#2f6f6a; caret-color:#2f6f6a; }
.ck-page .ck-rgb-inputs input { color:#3b3f45; caret-color:var(--picked); }
.ck-page input[type=number]::placeholder { color:#999; opacity:1; }
.ck-page button:focus-visible,.ck-page input:focus-visible,.ck-page select:focus-visible { outline:2px solid var(--ck-blue); outline-offset:2px; }
.ck-page .ck-rgb-inputs input:focus-visible { outline:none; }
:root[data-theme="dark"] .sheet--circular { background:#17191c; }
:root[data-theme="dark"] .sheet--circular .bar { background:#17191c; }
:root[data-theme="dark"] .ck-yarn,:root[data-theme="dark"] .ck-metrics article,:root[data-theme="dark"] .ck-quiet { background:#24272b; color:#dfe2e6; }
:root[data-theme="dark"] .ck-page { color:#dfe2e6; }
:root[data-theme="dark"] .ck-machine,:root[data-theme="dark"] .ck-yarn-fields,:root[data-theme="dark"] .ck-switch { background:#20252e; }
:root[data-theme="dark"] .ck-input input,:root[data-theme="dark"] .ck-price input,:root[data-theme="dark"] .ck-switch button[aria-pressed="true"] { background:#30343a; color:#fff; }
:root[data-theme="dark"] .ck-page input[type=number] { color:#6fc2b9; caret-color:#6fc2b9; }
:root[data-theme="dark"] .ck-machine-grid>label,:root[data-theme="dark"] .ck-price>label,:root[data-theme="dark"] .ck-currency { color:#dfe2e6; }
:root[data-theme="dark"] .ck-currency-menu { border-color:#34383e; background:#17191c; box-shadow:0 8px 22px #0008; }
:root[data-theme="dark"] .ck-currency-menu button:hover,:root[data-theme="dark"] .ck-currency-menu button[aria-selected="true"] { background:#30343a; }
:root[data-theme="dark"] .ck-track { background:#34383e; }
:root[data-theme="dark"] .ck-diagram-panel { color:#dfe2e6; }
:root[data-theme="dark"] .ck-diagram-card { border-color:#30343a; background:#202327; box-shadow:none; }
:root[data-theme="dark"] .ck-diagram-card>header { border-color:#30343a; }
:root[data-theme="dark"] .ck-diagram-card header h3 { color:#eef0f2; }
:root[data-theme="dark"] .ck-step { background:color-mix(in srgb,var(--card-color) 18%,#202327); }
:root[data-theme="dark"] .ck-diagram-card th { background:#282c31; color:#dfe2e6; }
:root[data-theme="dark"] .ck-order-table td,:root[data-theme="dark"] .ck-config-table td { background:#202327; }
:root[data-theme="dark"] .ck-diagram-card th,:root[data-theme="dark"] .ck-diagram-card td { border-color:#34383e; }
:root[data-theme="dark"] .ck-config-table tr.used th { background:#18382f; color:#63c8a5; }
:root[data-theme="dark"] .ck-config-table tr.used td,:root[data-theme="dark"] .ck-intent-table td { background:#19333d; }
:root[data-theme="dark"] .ck-route-stepper { border-color:#315248; background:#1c2d28; }
:root[data-theme="dark"] .ck-route-stepper strong { color:#dfe2e6; }
:root[data-theme="dark"] .ck-card-foot button,:root[data-theme="dark"] .ck-config-tools>button { background:color-mix(in srgb,var(--card-color) 14%,#202327); }
:root[data-theme="dark"] .ck-side-switch { background:#292d32; }
:root[data-theme="dark"] .ck-side-switch button.active { background:#373b41; }
:root[data-theme="dark"] .ck-color-trigger { border-color:#5a3c42; background:#25292e; box-shadow:none; }
:root[data-theme="dark"] .ck-color-popover { border-color:#3a3e44; background:#25292e; box-shadow:0 16px 40px #0007; }
:root[data-theme="dark"] .ck-color-popover::before { border-color:#3a3e44; }
:root[data-theme="dark"] .ck-color-popover strong { color:#f0f1f3; }
:root[data-theme="dark"] .ck-color-popover header button { background:#34383e; color:#aeb3ba; }
:root[data-theme="dark"] .ck-color-presets button { border-color:#25292e; box-shadow:0 0 0 1px #4a4f56; }
:root[data-theme="dark"] .ck-color-presets button[aria-pressed="true"] { box-shadow:0 0 0 2px #e3e5e8; }
:root[data-theme="dark"] .ck-rgb-inputs label { border-color:#3b4047; background:#1e2227; }
:root[data-theme="dark"] .ck-page .ck-rgb-inputs input { color:#eef0f2; }
:root[data-theme="dark"] .ck-loop-preview { background:#191c20; }
:root[data-theme="dark"] .ck-order-picker { background:#282c31; }
:root[data-theme="dark"] .ck-order-picker>div button { background:#353a40; color:#fff; }
:root[data-theme="dark"] .ck-order-table td>button.selected { background:#20314b; }
:root[data-theme="dark"] .ck-config-table tr.used td.action-tuck { background:#21392e; }
:root[data-theme="dark"] .ck-config-table tr.used td.action-miss { background:#3c3020; }
:root[data-theme="dark"] .ck-intent-table td.action-tuck { background:#21392e; }
:root[data-theme="dark"] .ck-intent-table td.action-miss { background:#3c3020; }
:root[data-theme="dark"] .ck-action-sheet { background:#202327; color:#eef0f2; }
:root[data-theme="dark"] .ck-action-sheet header button { background:#30343a; }
:root[data-theme="dark"] .ck-action-options>button:first-child { background:#242c39; }
:root[data-theme="dark"] .ck-action-options>button { background:#20352e; }
:root[data-theme="dark"] .ck-action-options>button:last-child { background:#382b21; }
:root[data-theme="dark"] .ck-action-options strong { color:#fff; }
@media (max-width:560px) { .ck-page { padding:16px 13px 36px; } .ck-tabs { margin-bottom:26px; } .ck-heading h3 { font-size:20px; } .ck-yarn { padding:14px; } .ck-machine { padding:16px; } .ck-metrics { gap:8px; } .ck-metrics article { min-height:110px; } .ck-metrics strong { font-size:25px; } .ck-metrics span { font-size:11px; } }