.pw-hero{background:linear-gradient(135deg,#1D4F91 0%,#3B5FA8 55%,#5E4481 100%)}
.pw-hero .wrap{padding-top:28px;padding-bottom:30px}
.pw-section{padding-top:22px}
/* แถบด่าน */
.lvbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.lv{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:#fff;font-family:var(--head);font-weight:600;font-size:15px;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative}
.lv:hover{border-color:var(--accent-line)}
.lv.pass{background:var(--green);border-color:var(--green);color:#fff}
.lv.cur{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--accent)}
.lv.play{width:auto;border-radius:99px;padding:0 14px;gap:6px}
.lv.play.cur{background:var(--accent);border-color:var(--accent);color:#fff}
.lvbar .sep{width:1px;height:28px;background:var(--line);margin:0 4px}
/* โจทย์ */
.task{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:14px}
.task-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.task-head h2{margin:0;font-size:22px}
.badge{font-size:13px;font-weight:700;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:2px 10px}
.goal{margin:6px 0 8px;font-size:18px;font-weight:600;color:var(--ink-2)}
.learn summary{cursor:pointer;color:var(--accent);font-weight:600}
.learn p{margin:8px 0}
.learn pre,.cheat code,.learn code{font-family:Menlo,Consolas,'Sarabun',monospace;font-size:14px}
.learn pre{background:#2A2140;color:#fff;border-radius:10px;padding:10px 12px;overflow-x:auto;margin:8px 0}
.learn code{background:var(--bg-soft);border-radius:5px;padding:1px 5px;color:#A03266}
.img-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:2px 6px;margin:2px;font-family:Menlo,Consolas,monospace;font-size:13px;background:#fff;cursor:pointer}
.img-chip img{width:22px;height:22px;object-fit:contain}
.task-side{border-left:1px solid var(--line);padding-left:18px}
.side-title{font-family:var(--head);font-weight:600;margin:0 0 6px}
.checklist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.checklist li{display:flex;gap:8px;align-items:flex-start;font-size:15.5px}
.checklist li i{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #CFC7DC;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;color:#fff}
.checklist li.ok i{background:var(--green);border-color:var(--green)}
.checklist li.ok{color:var(--green)}
.lint{background:var(--orange-soft);color:#7A3A06;border-radius:10px;padding:8px 10px;font-size:14.5px;margin-bottom:10px}
.hint{background:#FFF4D6;border-radius:10px;padding:8px 10px;margin:8px 0 0;font-size:15px}
/* พื้นที่ทำงาน: พรีวิวซ้าย โค้ดขวา */
.ws{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:min(62vh,600px);min-height:380px}
.pane{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;min-height:0}
.pane-head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg-soft);font-family:var(--head);font-size:15px}
.pane-head .note{font-family:var(--body);font-size:13px}
.dot-row{display:inline-flex;gap:5px}.dot-row i{width:10px;height:10px;border-radius:50%;background:#E6E1EE}
.dot-row i:nth-child(1){background:#F28B82}.dot-row i:nth-child(2){background:#FDD663}.dot-row i:nth-child(3){background:#81C995}
#preview{flex:1;width:100%;border:0;background:#fff}
.code-pane{background:#1F1A2B;border-color:#1F1A2B}
.code-pane .pane-head{background:#2A2140;border-color:#3A2F55;color:#fff}
.code-pane .pane-head .note{color:#BDB6CC}
.ed{flex:1;display:flex;min-height:0;position:relative}
.gutter{width:40px;flex:0 0 auto;overflow:hidden;background:#1A1624;color:#6E6684;text-align:right;padding:12px 8px 12px 0;font:13px/24px Menlo,Consolas,monospace;white-space:pre;user-select:none}
.ed-main{flex:1;position:relative;min-width:0}
.ed-main pre,.ed-main textarea{position:absolute;inset:0;margin:0;padding:12px 14px;border:0;font:15px/24px Menlo,Consolas,'Sarabun',monospace;white-space:pre;overflow:auto;tab-size:2;letter-spacing:0}
.ed-main pre{color:#EDE7F6;pointer-events:none;overflow:hidden}
.ed-main textarea{background:transparent;color:transparent;caret-color:#FFC94D;resize:none;outline:none}
.ed-main textarea::selection{background:rgba(255,201,77,.35);color:transparent}
.hl .p{color:#8C84A0}.hl .t{color:#FF8FB1}.hl .a{color:#9CC3F5}.hl .s{color:#7BD389}.hl .c{color:#6E6684;font-style:italic}
.tagbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;background:#2A2140;border-top:1px solid #3A2F55}
.tagbar button{font-family:Menlo,Consolas,monospace;font-size:13.5px;background:#3A2F55;color:#fff;border:1px solid #52467A;border-radius:8px;padding:5px 9px;cursor:pointer}
.tagbar button:hover{background:#52467A}
.tagbar .lbl{color:#BDB6CC;font-size:13px;align-self:center;margin-right:2px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.actions .spacer{flex:1}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cheat{background:var(--bg-soft);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.cheat h3{font-size:17px;margin:0 0 8px}
.cheat .grid2{display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cheat code{color:#A03266}
@media (max-width:860px){
  .task{grid-template-columns:1fr}.task-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
  .ws{grid-template-columns:1fr;height:auto}
  .preview-pane{height:300px}.code-pane{height:380px}
}
/* ตำแหน่งพรีวิว */
.layout-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:10px}
.layout-bar .chip{min-height:34px;padding:0 12px;font-size:14px}
.pane-switch{display:none;margin-left:auto;background:var(--bg-soft);border-radius:10px;padding:3px}
.layout-bar.tab-mode .pane-switch{display:inline-flex}
.pane-switch button{border:0;background:transparent;padding:6px 18px;border-radius:8px;font-family:var(--head);font-weight:500;font-size:15px;cursor:pointer;color:var(--ink-2)}
.pane-switch button[aria-selected="true"]{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ws.pos-right .preview-pane,.ws.pos-bottom .preview-pane{order:2}
.ws.pos-top,.ws.pos-bottom,.ws.pos-tab{grid-template-columns:1fr;height:auto}
.ws.pos-top .pane,.ws.pos-bottom .pane{height:min(46vh,440px);min-height:280px}
.ws.pos-tab .pane{height:min(66vh,640px);min-height:360px}
.ws.pos-tab.show-code .preview-pane,.ws.pos-tab.show-preview .code-pane{display:none}
/* แท็กที่ค้นพบเอง */
.cheat.found{background:linear-gradient(135deg,#FFF8E1,#FFF1C9)}
.cheat.found:empty{display:none}
.found .grid2 div{background:#fff;border:1px solid #F2DFA6;border-radius:10px;padding:6px 10px}
.found .warn{color:#B85C12;font-size:13.5px}
.found .unknown{margin:10px 0 0;color:#7A3A06;font-size:14.5px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2A2140;color:#fff;border-radius:14px;padding:12px 18px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:55;font-weight:600;max-width:calc(100% - 32px)}
.toast code{color:#FFC94D;font-family:Menlo,Consolas,monospace}