:root{--background:#f7f7f2;--foreground:#191a1f;--muted:#686d76;--line:#d8d9d0;--panel:#ffffff;--panel-strong:#eef4f6;--accent:#1e6f5c;--accent-strong:#155243;--danger:#b42318;--shadow:0 18px 45px rgba(23,34,43,0.12)}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{background:var(--background);color:var(--foreground);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{border:0}.app-shell{min-height:100vh}.topbar{border-bottom:1px solid var(--line);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar-inner{justify-content:space-between;gap:24px;margin:0 auto;max-width:1240px;padding:18px 24px}.brand,.topbar-inner{display:flex;align-items:center}.brand{gap:12px;min-width:0}.brand-mark{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2px;gap:2px;width:34px;height:34px;padding:4px;border:1px solid #20242a;background:#20242a;border-radius:7px;flex:0 0 auto}.brand-mark span{border-radius:2px}.brand h1{margin:0;font-size:1.15rem;line-height:1.15}.brand p{margin:2px 0 0;color:var(--muted);font-size:.88rem}.status-pill{border:1px solid var(--line);border-radius:999px;background:#fff;color:#354052;padding:8px 12px;font-size:.85rem;white-space:nowrap}.main-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);grid-gap:22px;gap:22px;margin:0 auto;max-width:1240px;padding:24px}.side-panel,.workspace{display:flex;flex-direction:column;gap:16px}.section{border-bottom:1px solid var(--line);padding:0 0 18px}.section:last-child{border-bottom:0;padding-bottom:0}.panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 18px 0}.panel-header h2,.section h2{margin:0;font-size:1rem;line-height:1.25}.panel-header p,.section p{margin:5px 0 0;color:var(--muted);font-size:.9rem;line-height:1.45}.panel-body{padding:18px}.controls-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.entry-mode-tabs{display:inline-grid;grid-template-columns:repeat(2,minmax(110px,1fr));gap:4px;border:1px solid var(--line);border-radius:8px;background:#eef2f1;padding:4px;margin-bottom:12px}.entry-mode-tabs button{min-height:34px;border-radius:6px;background:transparent;color:#34413c;cursor:pointer;font-weight:800;padding:7px 10px}.entry-mode-tabs button[aria-pressed=true]{background:#fff;color:#14231d;box-shadow:0 1px 3px rgba(23,34,43,.12)}.palette{display:grid;grid-template-columns:repeat(6,minmax(38px,1fr));grid-gap:8px;gap:8px;width:min(100%,330px)}.color-swatch{position:relative;aspect-ratio:1;border:2px solid #20242a;border-radius:7px;cursor:pointer}.color-swatch[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px}.color-swatch span{position:absolute;inset:auto 4px 3px;overflow:hidden;color:#111;font-size:.65rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.actions{display:flex;flex-wrap:wrap;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;border-radius:7px;background:#e8ecef;color:#17202a;cursor:pointer;font-weight:700;padding:9px 13px}.button.primary{background:var(--accent);color:white}.button.primary:hover{background:var(--accent-strong)}.button:disabled{cursor:not-allowed;opacity:.54}.toggle-control{display:inline-flex;align-items:center;gap:7px;min-height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#26313b;cursor:pointer;font-size:.9rem;font-weight:800;padding:8px 11px}.toggle-control input{width:16px;height:16px;accent-color:var(--accent)}.cube-net{display:grid;grid-template-columns:repeat(4,minmax(112px,1fr));grid-template-rows:repeat(3,auto);grid-gap:12px;gap:12px;align-items:center;max-width:760px}.cube-visual-layout{margin-bottom:18px}.cube-visual-panel{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--panel-strong)}.cube-3d-preview{width:100%;min-height:280px}.cube-3d-preview canvas{display:block;width:100%;height:auto}.face-card{min-width:0}.face-card.empty{visibility:hidden}.face-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:#3b4350;font-size:.78rem;font-weight:800;text-transform:uppercase}.face-title span:last-child{color:var(--muted);font-weight:700;text-transform:none}.face-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:4px;gap:4px;aspect-ratio:1;border:4px solid #20242a;border-radius:8px;background:#20242a;padding:4px}.sticker{display:block;width:100%;border:1px solid rgba(0,0,0,.35);border-radius:4px;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.sticker:hover{transform:scale(.96);border-color:white}.sticker.center{box-shadow:inset 0 0 0 3px rgba(0,0,0,.34)}.sticker.locked{cursor:not-allowed}.sticker.invalid-piece{outline:3px solid var(--danger);outline-offset:-4px}.sticker:disabled{opacity:1}.guided-entry{display:grid;grid-gap:14px;gap:14px;max-width:560px}.guided-entry-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px}.guided-entry-kicker{color:var(--muted);font-size:.78rem;font-weight:900;text-transform:uppercase}.guided-entry h3{margin:4px 0;color:#14231d;font-size:1.05rem;line-height:1.25}.guided-entry p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.4}.guided-entry-progress{display:grid;min-width:112px;grid-gap:2px;gap:2px;border:1px solid #cbded8;border-radius:7px;background:#f7fbf9;padding:9px 10px;text-align:right}.guided-entry-progress strong{color:#17352b;font-size:1rem}.guided-entry-progress span{color:var(--muted);font-size:.76rem;font-weight:800}.guided-face-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:7px;gap:7px;aspect-ratio:1;border:6px solid #20242a;border-radius:8px;background:#20242a;padding:7px}.guided-sticker{display:flex;align-items:flex-end;justify-content:center;width:100%;min-width:0;border:1px solid rgba(0,0,0,.42);border-radius:5px;color:rgba(0,0,0,.72);cursor:pointer;font-size:clamp(.55rem,1.8vw,.78rem);font-weight:900;line-height:1;padding:7px 3px;text-align:center}.guided-sticker.center{box-shadow:inset 0 0 0 4px rgba(0,0,0,.36)}.guided-sticker.locked{cursor:not-allowed}.guided-sticker.entered{outline:3px solid var(--accent);outline-offset:-5px}.guided-sticker.invalid-piece{outline:3px solid var(--danger);outline-offset:-5px}.guided-sticker:disabled{opacity:1}.guided-entry-actions{display:flex;flex-wrap:wrap;gap:8px}.validation-list{display:grid;grid-gap:8px;gap:8px;margin:0;padding:0;list-style:none}.validation-list li{border-left:4px solid var(--line);background:#f8f9fa;border-radius:6px;padding:9px 10px;color:#394250;font-size:.9rem}.validation-list li.valid{border-color:var(--accent)}.validation-list li.invalid{border-color:var(--danger)}.count-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px}.count-item{justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:7px;padding:8px 10px}.count-item,.count-label{display:flex;align-items:center}.count-label{gap:8px;min-width:0}.mini-swatch{width:18px;height:18px;border:1px solid #20242a;border-radius:4px;flex:0 0 auto}.count-label span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review-summary{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px;margin-top:10px}.review-summary div{display:grid;grid-gap:2px;gap:2px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:9px 10px}.review-summary strong{color:#17251f;font-size:1rem}.review-summary span{color:var(--muted);font-size:.8rem;font-weight:700}.piece-issue-list{display:grid;grid-gap:8px;gap:8px;margin:10px 0 0;padding:0;list-style:none}.piece-issue-list li{border-left:4px solid var(--line);border-radius:6px;background:#f8f9fa;color:#394250;font-size:.84rem;line-height:1.35;padding:8px 10px}.piece-issue-list li.error{border-color:var(--danger)}.piece-issue-list li.info{border-color:#87929d}.review-note,.review-ok{margin:10px 0 0;color:var(--muted);font-size:.86rem;line-height:1.4}.solve-card{display:grid;grid-gap:16px;gap:16px}.solve-progress{height:8px;overflow:hidden;border-radius:999px;background:#dfe5e2}.solve-progress span{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .18s ease}.step-meta{color:var(--muted);font-size:.88rem;font-weight:700}.step-context{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.phase-badge{border:1px solid #b9d1cb;border-radius:999px;background:#eff7f4;color:#17352b;font-size:.78rem;font-weight:800;padding:5px 9px}.phase-panel{border:1px solid #d1ddd9;border-radius:8px;background:#fbfcfb;padding:11px 12px}.phase-panel h3{margin:0 0 5px;color:#17251f;font-size:.95rem;line-height:1.25}.phase-panel p{margin:0;color:#4b5a55;font-size:.86rem;line-height:1.4}.guided-steps{display:grid;grid-gap:10px;gap:10px}.guided-step{display:grid;grid-template-columns:34px minmax(0,1fr);grid-gap:10px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px}.guided-step span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#e7eeeb;color:#182820;font-weight:900}.guided-step p{margin:0;color:#111820;font-size:1rem;font-weight:800;line-height:1.35}.guided-step.emphatic{border-color:#94bbb0;background:#ecf7f3}.guided-step.emphatic p{font-size:1.16rem}.notation-note{margin:0;color:var(--muted);font-size:.85rem;line-height:1.45}.education-panel{border:1px solid #cbded8;border-radius:8px;background:#f7fbf9;padding:12px}.education-panel h3{margin:0 0 6px;color:#17251f;font-size:.9rem;line-height:1.25}.education-panel p{margin:0;color:#26352f;font-size:.9rem;line-height:1.45}.education-panel .phase-purpose{margin-bottom:8px;color:#17352b;font-weight:700}.education-panel ul{display:grid;grid-gap:6px;gap:6px;margin:10px 0 0;padding-left:18px;color:#3b4944;font-size:.85rem;line-height:1.4}.steps-list{display:grid;grid-gap:8px;gap:8px;max-height:360px;overflow:auto;padding-right:4px}.step-row{border:1px solid var(--line);border-radius:7px;background:#fff;color:#242a32;padding:10px;text-align:left}.step-row.active{border-color:var(--accent);background:#ecf7f3}.step-row span{display:block;color:var(--muted);font-size:.78rem;font-weight:800;margin-bottom:3px}.step-row strong{display:block;color:#17352b;font-size:.82rem;margin-bottom:4px}.empty-state{border:1px dashed #aeb4bb;border-radius:8px;color:var(--muted);padding:18px;text-align:center}.error-text{color:var(--danger);font-size:.9rem;line-height:1.45;margin:0}@media (max-width:960px){.main-grid{grid-template-columns:1fr}}@media (max-width:640px){.main-grid,.topbar-inner{padding-left:14px;padding-right:14px}.topbar-inner{align-items:flex-start;flex-direction:column}.cube-net{grid-template-columns:repeat(3,minmax(84px,1fr));gap:9px}.face-card.empty{display:none}.palette{grid-template-columns:repeat(3,minmax(42px,1fr))}.count-grid{grid-template-columns:1fr}.guided-entry-header{flex-direction:column}.guided-entry-progress{width:100%;text-align:left}}