*,::after,::before{margin:0;padding:0;box-sizing:border-box}:root{--bg-deep:#0b0b12;--bg-panel:#111118;--bg-surface:#1a1a26;--bg-elevated:#222233;--bg-hover:#2a2a40;--accent:#c9a54e;--accent-dim:#806a30;--accent-glow:rgba(201, 165, 78, 0.18);--text-primary:#e8e6e0;--text-mid:#aaa;--text-dim:#5a5a6a;--border:#252535;--red:#ef5350;--nav-bg:#0e0e16;--nav-border:#1e1e2e;--shadow-soft:rgba(0, 0, 0, 0.5)}[data-theme=light]{--bg-deep:#e8e5e0;--bg-panel:#f2f0ec;--bg-surface:#ffffff;--bg-elevated:#e9e6e1;--bg-hover:#ddd9d2;--accent:#b8942d;--accent-dim:#9a7c28;--accent-glow:rgba(184, 148, 45, 0.15);--text-primary:#1a1816;--text-mid:#555250;--text-dim:#908a82;--border:#cdc8c0;--red:#d32f2f;--nav-bg:#f7f5f2;--nav-border:#d8d4cd;--shadow-soft:rgba(0, 0, 0, 0.1)}#navbar{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 18px;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);flex-shrink:0;z-index:100}.nav-left{display:flex;align-items:center;gap:10px}.nav-logo{font-size:20px;line-height:1;color:var(--accent)}.nav-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--accent);letter-spacing:.3px}.nav-right{display:flex;align-items:center;gap:12px}.nav-author{font-size:11px;color:var(--text-dim);font-style:italic;letter-spacing:.2px;margin-left:2px}.nav-coffee-btn{min-height:auto;min-width:auto;padding:4px 10px;font-size:16px;line-height:1;border-radius:6px;cursor:pointer;transition:background .15s,transform .1s}.nav-coffee-btn:hover{background:var(--accent-glow);transform:scale(1.05)}.nav-coffee-btn:active{transform:scale(.95)}.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease;pointer-events:none}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal-overlay.hidden{display:none!important}.modal-card{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:28px 24px 20px;max-width:340px;width:90vw;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.35);transform:scale(.92) translateY(12px);transition:transform .25s ease}.modal-overlay.visible .modal-card{transform:scale(1) translateY(0)}.modal-close{position:absolute;top:10px;right:14px;background:0 0;border:none;color:var(--text-dim);font-size:24px;cursor:pointer;line-height:1;padding:4px;transition:color .15s}.modal-close:hover{color:var(--text-primary)}.modal-heading{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--accent);margin:0 0 4px}.modal-sub{font-size:13px;color:var(--text-mid);margin:0 0 16px}.modal-qr{width:100%;max-width:240px;border-radius:10px;border:2px solid var(--border)}.modal-copy{margin-top:14px;font-size:10px;color:var(--text-dim);letter-spacing:.3px}#theme-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 2px}#theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}.theme-icon{font-size:16px;line-height:1;transition:opacity .25s,color .25s}.theme-icon--dark{color:var(--accent);opacity:1}.theme-icon--light{color:var(--text-dim);opacity:.5}.theme-track{width:36px;height:20px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border);position:relative;transition:background .25s,border-color .25s}#theme-toggle:hover .theme-track{border-color:var(--accent-dim)}.theme-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);position:absolute;top:2px;left:2px;transition:left .25s cubic-bezier(.4, 0, .2, 1);box-shadow:0 1px 3px rgba(0,0,0,.3)}[data-theme=light] .theme-thumb{left:18px}[data-theme=light] .theme-icon--dark{color:var(--text-dim);opacity:.5}[data-theme=light] .theme-icon--light{color:var(--accent);opacity:1}body,html{height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;transition:background .3s,color .3s;-webkit-tap-highlight-color:transparent}#page-jump,#theme-toggle,.btn,.editor-cb,.editor-turn-btn,.eo-cell,.mv,.palette-piece,.promo-cancel,.promo-tile,chess-board{touch-action:manipulation}#app{display:flex;flex-direction:row;height:calc(100vh - 44px)}#left-panel{flex:1;display:flex;flex-direction:column;background:var(--bg-panel);min-width:280px;border-right:1px solid var(--border);transition:background .3s,border-color .3s}#splitter{width:5px;background:var(--border);cursor:col-resize;flex-shrink:0;transition:background .2s}#splitter.active,#splitter:hover{background:var(--accent)}#right-panel{flex:1;min-width:360px;display:flex;flex-direction:column;align-items:center;background:var(--bg-deep);overflow-y:auto;padding:20px 16px;transition:background .3s}.btn{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;padding:6px 14px;cursor:pointer;font-size:13px;transition:all .15s;white-space:nowrap}.btn:hover{background:var(--bg-hover);border-color:var(--accent-dim)}.btn:disabled{opacity:.3;cursor:default;pointer-events:none}.btn.accent{background:var(--accent);color:#111;border-color:var(--accent);font-weight:600}.btn.accent:hover{background:#d4b058}#viewer-toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.toolbar-sep{width:1px;height:24px;background:var(--border)}#page-info{color:var(--text-mid);font-size:13px;min-width:48px;text-align:center}#page-jump{width:48px;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;padding:4px 6px;text-align:center;font-size:13px}#page-jump:focus{outline:0;border-color:var(--accent)}#pdf-container{flex:1;overflow:auto;display:flex;justify-content:center;padding:16px;background:var(--bg-deep)}#pdf-canvas{display:none;box-shadow:0 4px 24px var(--shadow-soft)}#empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-dim)}#empty-state .icon{font-size:52px;opacity:.35}#empty-state p{font-size:15px}.restore-note{font-size:12px;color:var(--accent-dim);margin-top:2px}#board-wrapper{width:100%;max-width:380px;position:relative;-webkit-user-select:none;user-select:none;display:flex;align-items:stretch}#board-wrapper chess-board{--light-color:#f0d9b5;--dark-color:#b58863;flex:1;min-width:0;display:block;border:2px solid var(--border);border-radius:4px 0 0 4px;overflow:hidden;aspect-ratio:1/1;line-height:0;font-size:0}#stm-bar{width:22px;flex-shrink:0;display:flex;flex-direction:column;border-radius:0 4px 4px 0;overflow:hidden;position:relative;border:1px solid var(--border);border-left:none}.stm-half{transition:flex .4s ease,background .2s}#stm-black{background:#333;flex:1}#stm-white{background:#ccc;flex:1}#stm-bar.white-to-move #stm-white{background:#fff}#stm-bar.white-to-move #stm-black{background:#333}#stm-bar.black-to-move #stm-black{background:#000}#stm-bar.black-to-move #stm-white{background:#555}#eval-label{position:absolute;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;line-height:1;pointer-events:none;white-space:nowrap;z-index:2;opacity:0;transition:opacity .2s}#stm-bar.eval-active #eval-label{opacity:1}#eval-label.eval-top{top:4px;bottom:auto;color:#ccc}#eval-label.eval-bottom{bottom:4px;top:auto;color:#333}#stm-bar.eval-active #stm-white{background:#f0f0f0}#stm-bar.eval-active #stm-black{background:#1a1a1a}#engine-panel{width:100%;max-width:380px;margin-top:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12px}#engine-info{display:flex;align-items:center;gap:10px;margin-bottom:4px}.engine-eval{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;min-width:50px}.engine-eval.eval-white{color:var(--text)}.engine-eval.eval-black{color:var(--red,#e05050)}.engine-eval.eval-draw{color:var(--text-dim)}.engine-depth{color:var(--text-dim);font-size:11px;font-variant-numeric:tabular-nums}.engine-status{margin-left:auto;color:var(--text-dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px}.engine-status.running{color:var(--accent)}#engine-pv{color:var(--text-mid);font-size:11px;line-height:1.5;min-height:18px;word-break:break-word;font-variant-numeric:tabular-nums}#engine-toggle-btn.active{background:var(--accent);color:#000}#arrow-svg{position:absolute;pointer-events:none;z-index:10;overflow:hidden}#promo-dialog{position:absolute;z-index:20;display:flex;flex-direction:column;width:12.5%;box-shadow:0 4px 24px var(--shadow-soft);overflow:hidden;border-radius:2px}.promo-tile{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .12s;padding:6%}.promo-tile img{width:100%;height:100%;object-fit:contain;pointer-events:none}.promo-light{background:#f0d9b5}.promo-dark{background:#b58863}.promo-tile:hover{filter:brightness(1.15)}.promo-cancel{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.4em;color:#999;background:rgba(0,0,0,.5);transition:background .12s,color .12s}.promo-cancel:hover{background:rgba(0,0,0,.7);color:#fff}#status-bar{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--text-mid)}.turn-dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--border)}.turn-dot.w{background:#fff}.turn-dot.b{background:#333;border-color:#555}#board-controls{display:flex;gap:8px;margin-top:12px;width:100%;max-width:380px}#board-controls .btn{flex:1;text-align:center}#export-controls{display:flex;gap:8px;margin-top:6px;width:100%;max-width:380px}#export-controls .btn{text-align:center}#fen-section{width:100%;max-width:380px;margin-top:14px}#fen-display-row{display:flex;gap:6px;align-items:stretch}#fen-display{flex:1;min-width:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text-mid);font-family:'SF Mono',Consolas,monospace;font-size:11px;word-break:break-all;cursor:pointer;transition:border-color .2s,background .3s}#fen-display:hover{border-color:var(--accent-dim)}.fen-copy-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;flex-shrink:0;position:relative;overflow:hidden}.fen-copy-btn:active{transform:scale(.95)}.fen-copy-icon{font-size:14px;line-height:1;transition:opacity .2s}.fen-copy-label{font-size:12px;transition:opacity .2s}.fen-copy-btn.copied{border-color:#4caf50;color:#4caf50}.fen-copy-btn.copied .fen-copy-icon{opacity:0}.fen-copy-btn.copied .fen-copy-label::after{content:'✓ Copied!';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:#4caf50;white-space:nowrap}.fen-copy-btn.copied .fen-copy-label{opacity:0}#fen-row{display:flex;gap:6px;margin-top:8px}#fen-input{flex:1;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;padding:6px 10px;font-family:'SF Mono',Consolas,monospace;font-size:12px;max-length:200}#fen-input:focus{outline:0;border-color:var(--accent)}#fen-input::placeholder{color:var(--text-dim)}#move-section{width:100%;max-width:380px;margin-top:14px;flex:1;display:flex;flex-direction:column;min-height:120px}#move-heading{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px}#move-list{flex:1;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:8px;min-height:80px;max-height:240px}.mv-row{display:grid;grid-template-columns:34px 1fr 1fr;gap:4px;margin-bottom:2px}.mv-num{color:var(--text-dim);font-size:12px;padding:3px 0;text-align:right;padding-right:6px}.mv{font-size:13px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:background .1s}.mv:hover{background:var(--bg-hover)}.mv.active{background:var(--accent-glow);color:var(--accent);font-weight:600}#keyboard-hint{margin-top:10px;margin-bottom:16px;padding:6px 0;font-size:10px;color:var(--text-dim);text-align:center;letter-spacing:.3px;position:relative;z-index:1;background:var(--bg-deep);flex-shrink:0;width:100%;max-width:380px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:8px;padding:10px 20px;font-size:13px;opacity:0;transition:all .3s ease;z-index:1000;pointer-events:none}#toast.show{transform:translateX(-50%) translateY(0);opacity:1}#editor-panel{width:100%;max-width:380px;margin-top:12px}#editor-palette{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.palette-row{display:flex;gap:4px}.palette-piece{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;border:2px solid transparent;background:var(--bg-surface);transition:border-color .15s,background .15s,transform .1s;padding:6px}.palette-piece:hover{background:var(--bg-hover);border-color:var(--border)}.palette-piece.selected{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 0 1px var(--accent-dim)}.palette-piece:active{transform:scale(.93)}.palette-piece img{width:100%;height:100%;object-fit:contain;pointer-events:none}.palette-piece .trash-icon{font-size:20px;line-height:1;color:var(--red)}#editor-options{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.editor-row{display:flex;align-items:center;gap:10px}.editor-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;min-width:50px}.editor-toggle-group{display:flex;gap:0}.editor-turn-btn{border-radius:0;padding:4px 14px;font-size:12px}.editor-turn-btn:first-child{border-radius:5px 0 0 5px}.editor-turn-btn:last-child{border-radius:0 5px 5px 0;margin-left:-1px}.editor-turn-btn.active{background:var(--accent);color:#111;border-color:var(--accent);font-weight:600}.editor-turn-btn.active:hover{background:#d4b058}.editor-castle-group{display:flex;gap:10px}.editor-cb{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:13px;color:var(--text-mid)}.editor-cb input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:15px;height:15px}.editor-cb span{font-family:'SF Mono',Consolas,monospace;font-size:13px;font-weight:600}#editor-actions{display:flex;gap:6px}#editor-actions .btn{flex:1;text-align:center;font-size:12px;padding:7px 6px}.editor-hint{margin-top:8px;font-size:10px;color:var(--text-dim);text-align:center;letter-spacing:.3px}.edit-mode-badge{font-size:10px;text-transform:uppercase;letter-spacing:1px;background:var(--accent-glow);color:var(--accent);padding:2px 8px;border-radius:4px;font-weight:600}#editor-overlay{position:absolute;z-index:15;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:2px}.eo-cell{cursor:var(--piece-cursor,pointer);transition:background .12s;position:relative}.eo-cell:hover{background:rgba(201,165,78,.25)}.eo-cell::after{content:'';position:absolute;inset:4%;background-image:var(--ghost-piece,none);background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;pointer-events:none;transition:opacity .15s}.eo-cell:hover::after{opacity:.7}.eo-cell.eo-placed{animation:eo-flash-green .35s ease-out}@keyframes eo-flash-green{0%{background:rgba(76,175,80,.45)}100%{background:0 0}}.eo-cell.eo-removed{animation:eo-flash-red .35s ease-out}@keyframes eo-flash-red{0%{background:rgba(239,83,80,.4)}100%{background:0 0}}[data-theme=light] .eo-cell:hover{background:rgba(184,148,45,.25)}@media (pointer:coarse){.btn{min-height:44px;min-width:44px;font-size:13px}.palette-piece{width:52px;height:52px}.editor-turn-btn{padding:6px 16px;min-height:40px}.editor-cb{gap:6px;font-size:14px}.editor-cb input[type=checkbox]{width:18px;height:18px}.mv{padding:6px 10px;font-size:14px}#page-jump{min-height:40px;font-size:14px;width:52px}#splitter{width:10px}}@media (max-width:834px){#app{flex-direction:column;height:calc(100vh - 44px)}.nav-author{display:none}#left-panel{min-width:0!important;width:100%!important;flex:none!important;height:45vh;min-height:200px;max-height:55vh;border-right:none;border-bottom:1px solid var(--border)}#splitter{display:none}#right-panel{min-width:0;flex:1;width:100%;overflow-y:auto;padding:16px}#board-wrapper{max-width:460px}#board-controls,#editor-panel,#engine-panel,#export-controls,#fen-section,#move-section{max-width:460px}#viewer-toolbar{padding:8px 12px;gap:6px}#status-bar{font-size:14px}#fen-display{font-size:11px}#move-list{max-height:200px}#keyboard-hint{display:none}}@media (max-width:744px){#left-panel{height:40vh;min-height:180px;max-height:45vh}#right-panel{padding:12px 10px}#board-wrapper{max-width:400px}#board-controls,#editor-panel,#engine-panel,#export-controls,#fen-section,#move-section{max-width:400px}#navbar{padding:0 12px}.nav-title{font-size:14px}.nav-author{display:none}#board-controls{flex-wrap:wrap}}@media (min-width:835px) and (max-width:1024px){#app{flex-direction:row}#right-panel{min-width:420px;padding:18px 14px}#board-wrapper{max-width:440px}#board-controls,#editor-panel,#engine-panel,#export-controls,#fen-section,#move-section{max-width:440px}#left-panel{min-width:320px}#stm-bar{width:24px}#eval-label{font-size:10px}}@media (min-width:1025px) and (max-width:1366px){#app{flex-direction:row}#right-panel{min-width:460px;padding:20px 18px}#board-wrapper{max-width:480px}#board-controls,#editor-panel,#engine-panel,#export-controls,#fen-section,#move-section{max-width:480px}#left-panel{min-width:340px}#stm-bar{width:26px}#eval-label{font-size:10px}.engine-eval{font-size:18px}#engine-pv{font-size:12px}}@media (orientation:landscape) and (max-height:600px){#app{flex-direction:column}#left-panel{min-width:0!important;width:100%!important;flex:none!important;height:50vh;border-right:none;border-bottom:1px solid var(--border)}#splitter{display:none}#right-panel{min-width:0;flex:1;width:100%}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}.hidden{display:none!important}