:root{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;color:#1e2430;background:radial-gradient(circle at top left,rgba(255,206,153,.42),transparent 30%),radial-gradient(circle at top right,rgba(132,197,255,.38),transparent 26%),linear-gradient(180deg,#f7f3eb,#efe7d5)}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}button,input,select{font:inherit}button{border:none;border-radius:12px;padding:10px 14px;background:#f1e7d2;color:#1f2a37;cursor:pointer;transition:transform .18s ease,background .18s ease}button:hover:not(:disabled){transform:translateY(-1px);background:#e7d5b6}button:disabled{opacity:.55;cursor:not-allowed}.app-shell{min-height:100vh;display:flex;flex-direction:column;padding:18px;gap:16px}.entry-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.entry-card{width:min(560px,100%);background:#fffcf7e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(130,97,57,.12);box-shadow:0 18px 50px #6d58361f;border-radius:28px;padding:24px}.entry-form{display:flex;flex-direction:column;gap:14px}.entry-mode-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.entry-upload{display:inline-flex;align-items:center;justify-content:center}.entry-status{min-height:20px;color:#6f5a3d;font-size:14px}.topbar,.status-bar,.panel{background:#fffcf7d6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(130,97,57,.12);box-shadow:0 18px 50px #6d58361f}.topbar{border-radius:24px;padding:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.topbar-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand{display:flex;flex-direction:column;margin-right:10px}.brand-tag{font-size:12px;color:#996e37}.field{display:flex;flex-direction:column;gap:6px;min-width:140px}.field span{font-size:12px;color:#6f5a3d}.field input,.field select{border:1px solid rgba(145,112,68,.24);border-radius:12px;padding:10px 12px;background:#fffdf9}.field.compact{min-width:120px}.upload-btn{position:relative;overflow:hidden;border-radius:12px;padding:10px 14px;background:#d96b4b;color:#fff;cursor:pointer}.upload-btn input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.primary-btn{background:#39587b;color:#fff}.active-color-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fffaf2;border:1px solid rgba(145,112,68,.18)}.swatch{width:20px;height:20px;border-radius:999px;border:2px solid rgba(0,0,0,.1)}.layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(420px,1.8fr) minmax(240px,.8fr);gap:16px;min-height:0;flex:1;align-items:stretch}.left-column,.board-column,.right-column{display:flex;flex-direction:column;gap:16px;min-height:0;width:100%}.left-column>.panel,.board-column>.panel{flex:1}.right-column{justify-content:space-between;justify-self:stretch}.dashboard-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex:1}.project-list{display:flex;flex-direction:column;gap:12px}.project-card{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:#fff8ee;border:1px solid rgba(145,112,68,.14)}.project-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.right-column>.info-panel,.right-column>.color-panel{flex:0 0 auto}.right-column>.panel:last-child{flex:1}.panel{border-radius:24px;padding:16px}.panel-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-header h2{margin:0;font-size:18px}.panel-hint{color:#876945;font-size:12px}.board-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}.board-zoom-actions{display:flex;gap:8px;flex-wrap:wrap}.zoom-status{font-size:12px;color:#876945}.board-wrapper{position:relative;border-radius:18px;border:1px solid rgba(145,112,68,.12);background:#fff8ed;overflow:hidden}.board-viewport{position:absolute;right:0;bottom:0;overflow:hidden;touch-action:none;overscroll-behavior:contain;cursor:grab;background:linear-gradient(180deg,#fff8edeb,#faf2e2f5)}.board-wrapper:before{content:"";display:block;min-height:560px}.board-viewport.dragging{cursor:grabbing}.board-viewport.interactive-viewport{cursor:none}.board-cursor-overlay{position:absolute;left:0;top:0;pointer-events:none;z-index:5}.board-ruler{position:absolute;z-index:6;background:#f5ebd8f2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;overflow:hidden}.board-ruler-top{top:0;border-bottom:1px solid rgba(145,112,68,.18)}.board-ruler-left{left:0;border-right:1px solid rgba(145,112,68,.18)}.ruler-tick{position:absolute;font-size:11px;color:#7a6140;transform:translate(-50%);white-space:nowrap}.board-ruler-left .ruler-tick{left:50%;transform:translate(-50%,-50%)}.board-ruler-top .ruler-tick{top:6px}.ruler-tick.major{font-weight:700;color:#5f482b}.board-cursor-bead,.remove-cursor{display:block;width:14px;height:14px;margin-left:0;margin-top:0;transform:translate(-50%,-50%)}.board-cursor-bead{box-shadow:inset -2px -3px 4px #0000002e,inset 3px 4px 6px #fff6}.board-cursor-bead.round{border-radius:999px}.board-cursor-bead.square{border-radius:4px}.remove-cursor{position:relative;border-radius:999px;border:2px solid #ce6140;background:#fff7f1f2;box-shadow:0 4px 10px #733a1f26}.remove-cursor-x{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#ce6140}.board-stage-anchor{position:absolute;left:50%;top:50%;width:0;height:0}.board-stage-translate{will-change:transform}.board-stage-scale{transform-origin:top left;will-change:transform}.board-grid{display:grid;min-width:max-content;min-height:max-content}.corner-cell,.axis-cell,.grid-cell{width:var(--cell-size);height:var(--cell-size);min-width:var(--cell-size);min-height:var(--cell-size);aspect-ratio:1 / 1}.corner-cell,.axis-cell{display:flex;align-items:center;justify-content:center;font-size:11px;color:#7a6140;background:#f5ebd8;border-right:1px solid rgba(145,112,68,.12);border-bottom:1px solid rgba(145,112,68,.12)}.grid-cell{position:relative;border-radius:0;padding:0;border-right:1px solid rgba(145,112,68,.12);border-bottom:1px solid rgba(145,112,68,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}.grid-cell.major-x{border-left:2px solid rgba(125,95,54,.42)}.grid-cell.major-y{border-top:2px solid rgba(125,95,54,.42)}.grid-cell.interactive{background:radial-gradient(circle at center,rgba(92,72,38,.08) 0 14%,transparent 15%),#fbf7ee}.grid-cell:hover:not(:disabled){transform:none}.grid-cell.pixel-phase.interactive{background:#f5efe4}.bead{display:block;width:76%;height:76%;aspect-ratio:1 / 1;box-shadow:inset -2px -3px 4px #0000002e,inset 3px 4px 6px #fff6}.bead.round{border-radius:999px}.bead.square{width:100%;height:100%;border-radius:0;box-shadow:none}.slot-guide{width:30%;height:30%;aspect-ratio:1 / 1;border-radius:999px;background:#7a61401f}.reference-overlay{font-size:8px;color:#171e2b9e;padding:2px;line-height:1.05}.color-panel .palette-grid{display:grid;grid-template-columns:1fr;gap:10px}.current-code-card{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:#fff8ee}.family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.family-item{padding:10px 8px}.family-item.active{background:#e6eef8;border:1px solid #39587b}.family-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.back-family-btn{padding:8px 10px}.recent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.recent-item{display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:8px 10px;border:1px solid transparent}.recent-item.active{border-color:#39587b;background:#e6eef8}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.tool-item{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent}.tool-item.active{border-color:#ce6140;background:#fff0e8}.tool-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:#f3dfcf;color:#a24a31;font-size:12px;font-weight:700}.palette-item{display:flex;align-items:center;gap:10px;justify-content:flex-start;border:1px solid transparent;text-align:left}.palette-item.active{border-color:#39587b;background:#e6eef8}.palette-swatch{width:18px;height:18px;border-radius:999px;border:1px solid rgba(0,0,0,.1)}.palette-main-code{min-width:48px;font-weight:700}.palette-sub-code{color:#876945;font-size:12px}.color-picker-popover{position:relative;margin-top:8px;padding:12px;border-radius:16px;border:1px solid rgba(145,112,68,.18);background:#fffaf4;box-shadow:0 16px 30px #6d583624}.popover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;max-height:360px;overflow:auto}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.info-grid>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:#fff8ee}.info-label{font-size:12px;color:#846948}.preview-image{display:block;width:100%;border-radius:16px;image-rendering:pixelated;background:#fff}.status-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-radius:18px;padding:14px 16px;font-size:14px}@media(max-width:1200px){.layout,.dashboard-layout{grid-template-columns:1fr}.right-column{width:auto;max-width:none;justify-self:stretch}}@media(max-width:720px){.app-shell{padding:12px}.board-viewport{min-height:auto}.board-wrapper:before{min-height:420px}.status-bar,.info-grid{grid-template-columns:1fr}.family-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.recent-grid,.popover-grid{grid-template-columns:1fr}}