:root{font-family:system-ui,-apple-system,"Microsoft JhengHei","Noto Sans TC",sans-serif;color:#24344f;background:#f4f6fb;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#f4f6fb}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.42;cursor:not-allowed}
button:focus-visible,input:focus-visible,.furniture:focus-visible{outline:3px solid #e9a83a;outline-offset:2px}
[hidden]{display:none!important}
.site-head{background:linear-gradient(117deg,#1b2d4c,#304a6c);color:white;padding:21px clamp(16px,3vw,42px);display:flex;align-items:end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.back-link{color:#b8d5fd;text-decoration:none;font-size:13px}
.back-link:hover{text-decoration:underline}
.eyebrow{color:#a9c6e7;font-size:11px;letter-spacing:.16em;margin-top:11px}
h1{font-size:clamp(25px,3vw,38px);line-height:1.15;margin:3px 0}
h1 span{background:#f2c66d;color:#203151;border-radius:7px;font-size:14px;padding:3px 7px;vertical-align:middle;letter-spacing:.03em}
.site-head p{margin:0;color:#d0e0f3;font-size:14px}
.mode-tabs{display:flex;gap:8px;border-radius:16px;background:#12223c;padding:6px}
.mode{border:0;background:transparent;color:#ccd9ec;padding:11px 17px;border-radius:11px;font-weight:700}
.mode.active{background:#fff;color:#213b63;box-shadow:0 4px 16px #0d183344}
.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;padding:20px clamp(12px,2vw,32px);max-width:1780px;margin:auto}
.sidebar,.mode-panel,.workspace{background:white;border:1px solid #e4eaf2;border-radius:17px;box-shadow:0 4px 16px #2031510b}
.sidebar{padding:19px;align-self:start;position:sticky;top:12px;max-height:calc(100vh - 25px);overflow:auto}
.sidebar-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px;margin-bottom:16px}
h2{margin:0;font-size:18px}
.muted{color:#66758c;font-size:12px}
.search-label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
input[type=search],input[type=number]{border:1px solid #cfd8e6;border-radius:9px;padding:9px 10px;min-height:40px;color:#263a57;background:#fff}
input[type=search]{width:100%}
input[type=number]{width:81px}
.filters{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0}
.filter{border:1px solid #d4deeb;background:#fff;padding:7px 10px;border-radius:20px;color:#50617d;font-size:12px}
.filter.active{background:#253e67;border-color:#253e67;color:white}
.palette{display:grid;gap:9px}
.palette-card{border:1px solid #e2e9f0;border-radius:12px;background:#fbfcfe;padding:12px;text-align:left;display:flex;align-items:center;gap:10px;transition:background .15s,border-color .15s}
.palette-card:not(:disabled):hover{border-color:#759bcc;background:#f1f7ff}
.palette-icon{width:38px;min-width:38px;height:38px;display:grid;place-items:center;background:#eaf1fb;border-radius:10px;font-size:21px}
.palette-info{display:flex;flex-direction:column;gap:3px}
.palette-info strong{font-size:13px}
.palette-info small{font-size:11px;color:#78849b}
.sidebar-tip{font-size:12px;line-height:1.6;color:#526783;background:#f1f6fd;padding:12px;border-radius:12px;margin:17px 0 0}
.main-area{min-width:0}
.mode-panel{padding:17px 20px;margin-bottom:12px}
.panel-title{display:flex;flex-wrap:wrap;gap:7px 14px;align-items:baseline;margin-bottom:12px}
.panel-title strong{font-size:16px}
.settings-row{display:flex;align-items:center;gap:12px 15px;flex-wrap:wrap;margin-bottom:10px}
.settings-row:last-child{margin-bottom:0}
.settings-row label{font-size:12px;display:flex;align-items:center;gap:7px;font-weight:600}
input[type=range]{width:110px;accent-color:#3868a1}
input[type=checkbox]{width:17px;height:17px;accent-color:#305887}
.small{font-size:11px}
.btn{border:1px solid #d8e1ef;border-radius:9px;min-height:37px;padding:8px 12px;background:white;color:#304764;font-weight:650;font-size:12px}
.btn:hover:not(:disabled){border-color:#9cb3d2;background:#eef4fc}
.btn.primary{border-color:#294a79;background:#294a79;color:white;font-size:13px}
.btn.primary:hover:not(:disabled){background:#1c365a}
.btn.soft{background:#f8fafd}
.btn.danger-light{background:#fff8f7;color:#a53b3f;border-color:#f2d6d7}
.btn.icon-btn{font-size:17px;width:35px;padding:4px;min-height:35px}
.challenge-actions,.score-summary,.level-list{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.score-summary{color:#536684;font-size:12px;margin-top:12px}
.score-summary strong{color:#1a3765}
.level{padding:10px 13px;border:1px solid #dce5f0;background:#f9fbff;color:#405675;border-radius:10px;font-weight:700}
.level.active{border-color:#345c8e;background:#eaf3ff;color:#244775}
#checkFeedback:not(:empty){margin-top:14px;background:#f0f6ff;border-left:4px solid #4e81bd;border-radius:9px;padding:12px;font-size:13px;line-height:1.5}
#checkFeedback ul{margin:0;padding-left:20px}
.workspace{overflow:hidden}
.workspace-top{padding:15px 19px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:11px;border-bottom:1px solid #e8ecf3}
.workspace-top h2{font-size:16px;margin-bottom:3px}
.zoom-controls{display:flex;align-items:center;gap:7px}
#zoomLabel{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:#526784}
.board-scroll{min-width:0;width:100%;height:clamp(340px,51vh,610px);overflow:auto;background:radial-gradient(circle at 40% 10%,#fff,#edf2f8);overscroll-behavior:contain}
.board-outer{position:relative;display:inline-block;padding:36px;margin:14px 18px;min-width:max-content;vertical-align:top}
#stage{position:relative;border:2px solid #7288a7;box-shadow:0 8px 25px #2b46611e;background-color:#fff;background-image:linear-gradient(to right,#dbe3ed 1px,transparent 1px),linear-gradient(to bottom,#dbe3ed 1px,transparent 1px),linear-gradient(to right,#b2c4da 1px,transparent 1px),linear-gradient(to bottom,#b2c4da 1px,transparent 1px);background-size:var(--minor) var(--minor),var(--minor) var(--minor),var(--major) var(--major),var(--major) var(--major)}
.board-overlay{position:absolute;inset:0}
#blockedZones{pointer-events:none;z-index:2}
#objects{z-index:3;pointer-events:none}
.blocked{position:absolute;display:flex;justify-content:center;align-items:center;text-align:center;font-size:11px;color:#a44342;font-weight:800;background:repeating-linear-gradient(45deg,#f5a8a862 0 7px,#ffe4e47a 7px 14px);border:2px dashed #db6660;overflow:hidden}
.ruler{position:absolute;color:#75849c;font-size:10px;pointer-events:none}
.ruler-x{left:36px;top:9px;height:27px;border-bottom:1px solid #c4d0e2}
.ruler-y{top:36px;left:9px;width:27px;border-right:1px solid #c4d0e2}
.ruler span{position:absolute;white-space:nowrap}
.ruler-x span{top:6px;transform:translateX(-50%)}
.ruler-y span{left:2px;transform:translateY(-50%)}
.furniture{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:2px;text-align:center;border:1.7px solid #587295;border-radius:5px;background:#e8eff9;color:#263d60;user-select:none;touch-action:none;cursor:grab;overflow:visible;pointer-events:auto;transform-origin:center;box-shadow:0 2px 4px #1e395719}
.furniture:active{cursor:grabbing}
.furniture[data-type^="bed"]{background:#fce9ec;border-color:#bc7d87}
.furniture[data-type^="sofa"]{background:#e5f1ff;border-color:#739cc2}
.furniture[data-type^="table"]{background:#e2f7e9;border-color:#71a88b}
.furniture[data-type^="chair"]{background:#efe5ff;border-color:#a18dc5}
.furniture[data-type="wardrobe"],.furniture[data-type="bookshelf"],.furniture[data-type="tv"]{background:#fff4d9;border-color:#bc9b58}
.furniture[data-type="door"],.furniture[data-type="window"]{background:#f3f4f6;border-style:dashed}
.furniture.selected{outline:3px solid #e8a63f;outline-offset:2px;box-shadow:0 0 0 4px #f3c66e66}
.furniture.invalid{outline:3px solid #d95353;outline-offset:1px}
.furniture-name{font-weight:750;font-size:11px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.furniture small{font-size:9px;color:#52627a}
.resize-handle{position:absolute;right:-6px;bottom:-6px;background:#38669b;border:2px solid white;width:19px;height:19px;border-radius:5px;cursor:nwse-resize;touch-action:none}
.toolbar{padding:14px 17px;display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #e8edf5}
.toolbar-group{display:flex;gap:6px;flex-wrap:wrap}
.nudge-panel{padding:0 17px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.nudge-buttons{display:flex;gap:5px}
.nudge-buttons .btn{width:40px;height:38px;font-size:17px}
.message{min-height:24px;margin:10px 3px;color:#206554;font-weight:650;font-size:13px}
.message.error{color:#b54044}
.site-foot{text-align:center;font-size:12px;color:#7a89a1;padding:12px 20px 25px}
@media (max-width:940px){
 .app-shell{grid-template-columns:1fr;gap:12px}
 .sidebar{position:static;max-height:none}
 .palette{grid-template-columns:repeat(2,minmax(0,1fr));max-height:250px;overflow:auto}
 .sidebar-tip{margin-top:10px}
 .mode-panel{padding:14px}
}
@media (max-width:540px){
 .site-head{padding:17px 15px}
 .mode-tabs{width:100%}
 .mode{flex:1;padding:10px 6px;font-size:13px}
 .app-shell{padding:11px}
 .palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:190px}
 .palette-card{padding:8px;gap:6px}
 .palette-icon{width:32px;height:32px;min-width:32px;font-size:19px}
 .palette-info strong{font-size:12px}
 .sidebar{padding:13px}
 .workspace-top{padding:12px}
 .zoom-controls{width:100%}
 .board-scroll{height:48vh;min-height:330px}
 .toolbar{padding:10px}
 .toolbar-group{width:100%}
 .toolbar .btn{flex:1;white-space:nowrap;min-width:65px;padding:8px 5px}
 .nudge-panel{padding:7px 12px 14px}
 .nudge-buttons .btn{width:47px;height:43px}
 .settings-row{gap:9px}
 .grid-range{width:100%}
 .settings-row input[type=number]{width:71px}
}