:root{--bg: #f8f9fa;--board-bg: #ffffff;--grid-thin: #ced4da;--grid-thick: #343a40;--text-given: #212529;--text-user: #4338ca;--text-pencil: #6c757d;--text-error: #dc3545;--green: #198754;--btn-bg: #e9ecef;--btn-hover: #dee2e6;--btn-active: #4f46e5;--btn-text: #495057;--btn-text-active: #ffffff;--selection: rgba(79, 70, 229, .25);--highlight: rgba(253, 224, 71, .4);--error-bg: #fee2e2;--non-unique-bg: #fed7aa;--cell-size: 56px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text-given);min-height:100vh;-webkit-text-size-adjust:100%}#root{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-bottom:env(safe-area-inset-bottom,0)}.app-header{width:100%;max-width:800px;padding:16px 20px 8px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.app-title{font-size:20px;font-weight:700}.app-subtitle{font-size:13px;color:var(--text-pencil)}.puzzle-selectors{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.puzzle-selector{padding:6px 10px;border:1px solid var(--grid-thin);border-radius:6px;font-size:14px;background:#fff;color:var(--text-given);max-width:180px}.toolbar{display:flex;gap:6px;padding:8px 20px;max-width:800px;width:100%;flex-wrap:wrap;align-items:center}.toolbar button{padding:6px 14px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;background:var(--btn-bg);color:var(--btn-text);transition:all .15s}.toolbar button:hover{background:var(--btn-hover)}.toolbar button.active{background:var(--btn-active);color:var(--btn-text-active)}.toolbar button.action-btn{background:var(--btn-bg)}.toolbar button.action-btn:hover{background:var(--btn-hover)}.toolbar button:disabled{opacity:.5;cursor:not-allowed}.toolbar button.clear-marks-btn{background:#fff3cd;color:#856404}.toolbar button.clear-marks-btn:hover{background:#ffeaa7}.toolbar-separator{width:1px;height:24px;background:var(--grid-thin);margin:0 4px}.color-palette{display:flex;gap:2px}.color-swatch{width:18px;height:14px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666;border:1px solid #ccc}.board-container{position:relative;display:inline-grid;grid-template-columns:repeat(9,var(--cell-size));grid-template-rows:repeat(9,var(--cell-size));border:3px solid var(--grid-thick);background:var(--board-bg);-webkit-user-select:none;user-select:none;touch-action:none}.cell{width:var(--cell-size);height:var(--cell-size);border:1px solid var(--grid-thin);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;font-size:28px;font-weight:500;transition:background .1s;-webkit-tap-highlight-color:transparent}.cell.given{color:var(--text-given);font-weight:700}.cell.user{color:var(--text-user)}.cell.error{color:var(--text-error);background:var(--error-bg)}.cell.non-unique{background:var(--non-unique-bg)}.invalid-mark{color:var(--text-error)!important}.cell.selected{background:var(--selection)}.cell.highlighted{background:#fde04759;outline:2px solid rgba(234,179,8,.5)}.cell.error.cell.selected{background:var(--error-bg);outline:2px solid var(--text-error)}.cell[data-col="2"],.cell[data-col="5"]{border-right:2px solid var(--grid-thick)}.cell[data-col="3"],.cell[data-col="6"]{border-left:none}.cell[data-row="2"],.cell[data-row="5"]{border-bottom:2px solid var(--grid-thick)}.cell[data-row="3"],.cell[data-row="6"]{border-top:none}.cell-value{line-height:1;z-index:10;position:relative}.cell-corner-marks{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:10px;color:var(--text-pencil);pointer-events:none;z-index:5}.cell-corner-marks span{text-shadow:0 0 2px var(--board-bg),0 0 2px var(--board-bg),0 0 2px var(--board-bg)}.cell-center-marks{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:1px;font-size:11px;color:var(--text-pencil);pointer-events:none;z-index:5;flex-wrap:wrap}.cell-center-marks span{text-shadow:0 0 2px var(--board-bg),0 0 2px var(--board-bg),0 0 2px var(--board-bg)}.constraint-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.status-bar{max-width:800px;width:100%;padding:10px 20px;font-size:13px;min-height:36px;display:flex;align-items:center}.status-bar.error{color:var(--text-error)}.status-bar.success{color:var(--green)}.status-bar.info{color:var(--text-pencil)}.loading-indicator{font-size:13px;color:var(--text-user);font-style:italic}.solved-banner{font-size:18px;font-weight:700;color:var(--green);text-align:center;padding:10px}.editor-panel{max-width:800px;width:100%;padding:12px 20px;border-top:2px solid var(--grid-thin);background:#fff;position:relative;z-index:10}.editor-header{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.editor-header select{padding:6px 10px;border:1px solid var(--grid-thin);border-radius:6px;font-size:13px;flex:1;min-width:200px}.editor-form{display:flex;flex-direction:column;gap:8px}.editor-form-row{display:flex;align-items:center;gap:8px}.editor-form-row label{font-size:13px;min-width:80px;color:var(--text-pencil)}.editor-form-row input{flex:1;padding:4px 8px;border:1px solid var(--grid-thin);border-radius:4px;font-size:13px}.editor-form-row .grab-btn{padding:4px 10px;font-size:12px;background:var(--btn-bg);border:none;border-radius:4px;cursor:pointer}.editor-form-row .grab-btn:hover{background:var(--btn-hover)}.editor-form-row .cell-value-display{font-size:13px;color:var(--text-user);min-width:60px}.instance-list{max-height:150px;overflow-y:auto;border:1px solid var(--grid-thin);border-radius:6px;margin-bottom:8px}.instance-item{padding:6px 10px;font-size:12px;border-bottom:1px solid var(--grid-thin);display:flex;justify-content:space-between;align-items:center;cursor:pointer}.instance-item:hover{background:var(--btn-bg)}.instance-item.selected{background:var(--selection)}.instance-item .delete-btn{background:none;border:none;color:var(--text-error);cursor:pointer;font-size:14px;padding:0 4px}.editor-toggle{padding:4px 12px;font-size:12px;background:var(--btn-active);color:var(--btn-text-active);border:none;border-radius:4px;cursor:pointer}.editor-toggle.off{background:var(--btn-bg);color:var(--btn-text)}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fffffff2;z-index:100;display:flex;flex-direction:column;align-items:center;padding:40px;overflow-y:auto;-webkit-overflow-scrolling:touch}.help-overlay h2{font-size:24px;margin-bottom:20px}.help-overlay .constraint-desc{font-size:14px;margin-bottom:12px;line-height:1.6;max-width:600px;width:100%}.help-overlay .close-hint{margin-top:20px;color:var(--text-pencil);font-size:13px}.number-pad{display:none;gap:6px;padding:8px 12px;max-width:800px;width:100%;justify-content:center;flex-wrap:wrap;-webkit-tap-highlight-color:transparent}.num-btn{width:44px;height:44px;border:none;border-radius:10px;font-size:20px;font-weight:600;cursor:pointer;background:var(--btn-bg);color:var(--text-given);transition:all .1s;-webkit-tap-highlight-color:transparent}.num-btn:active{background:var(--btn-active);color:#fff}.num-btn.delete-btn{background:#fee2e2;color:var(--text-error);font-size:14px}.num-btn.clear-invalid-btn{background:#fff3cd;color:#856404;font-size:12px}.num-pad-mode{display:flex;align-items:center;font-size:13px;color:var(--text-pencil);padding-left:8px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.modal-content{background:#fff;border-radius:12px;padding:24px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #00000026;-webkit-overflow-scrolling:touch}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-header h3{font-size:18px;font-weight:700}.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-pencil);padding:4px}.modal-close:hover{color:var(--text-given)}.save-row{display:flex;gap:8px;margin-bottom:16px}.save-row input{flex:1;padding:8px 12px;border:1px solid var(--grid-thin);border-radius:6px;font-size:14px}.save-row button{padding:8px 16px;background:var(--btn-active);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer}.save-row button:hover{opacity:.9}.pm-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.pm-actions button{padding:6px 12px;background:var(--btn-bg);border:none;border-radius:6px;font-size:13px;cursor:pointer}.pm-actions button:hover{background:var(--btn-hover)}.pm-actions button:disabled{opacity:.5;cursor:not-allowed}.pm-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:2px solid var(--grid-thin);padding-bottom:4px}.pm-tabs button{padding:6px 14px;background:none;border:none;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-pencil);border-radius:6px 6px 0}.pm-tabs button.active{color:var(--btn-active);border-bottom:2px solid var(--btn-active);margin-bottom:-6px}.pm-tabs button:hover{color:var(--text-given)}.pm-list{max-height:300px;overflow-y:auto}.pm-empty{text-align:center;color:var(--text-pencil);padding:24px;font-size:14px}.pm-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--grid-thin)}.pm-item-info{flex:1;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.pm-item-info:hover{color:var(--text-user)}.pm-item-name{font-size:14px;font-weight:600}.pm-item-date{font-size:11px;color:var(--text-pencil)}.pm-item-dl,.pm-item-del{background:none;border:none;cursor:pointer;font-size:16px;padding:4px 6px;border-radius:4px}.pm-item-dl:hover,.pm-item-del:hover{background:var(--btn-bg)}.pm-item-del{color:var(--text-error)}.pm-collection{padding:12px 0}.pm-hint{font-size:13px;color:var(--text-pencil);margin-bottom:12px}.cc-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--text-pencil)}.cc-divider{border-top:1px solid var(--grid-thin);margin:6px 0}.cc-list-header>div{display:flex;gap:6px}.cc-small-btn{padding:4px 10px;font-size:12px;background:var(--btn-bg);border:none;border-radius:4px;cursor:pointer}.cc-small-btn:hover{background:var(--btn-hover)}.cc-del-btn{color:var(--text-error)}.cc-save-btn{padding:4px 12px;font-size:12px;background:var(--btn-active);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600}.cc-save-btn:hover{opacity:.9}.cc-edit{display:flex;flex-direction:column;gap:10px}.cc-edit-header{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}.cc-back-btn{background:none;border:none;font-size:14px;cursor:pointer;color:var(--text-user);padding:2px 6px}.cc-back-btn:hover{text-decoration:underline}.cc-row{display:flex;flex-direction:column;gap:3px}.cc-row label{font-size:12px;color:var(--text-pencil);font-weight:600}.cc-row label small{font-weight:400}.cc-row input[type=text],.cc-row input:not([type]){padding:6px 10px;border:1px solid var(--grid-thin);border-radius:4px;font-size:13px}.cc-row input:disabled{opacity:.5;background:#f0f0f0}.cc-section{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--grid-thin);padding-top:8px}.cc-section-header{font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.cc-section-header small{font-weight:400;color:var(--text-pencil)}.cc-schema-row{display:flex;gap:6px;align-items:center}.cc-schema-row input,.cc-schema-row select{padding:4px 8px;border:1px solid var(--grid-thin);border-radius:4px;font-size:12px}.cc-schema-row input{flex:1;min-width:0}.cc-schema-row label{font-size:11px;display:flex;align-items:center;gap:2px;white-space:nowrap;color:var(--text-pencil)}.cc-template-btns{display:flex;gap:6px;flex-wrap:wrap}.cc-hint{font-size:11px;color:var(--text-pencil);line-height:1.4}.cc-hint code{background:var(--btn-bg);padding:1px 4px;border-radius:3px;font-size:11px}.cc-code{font-family:SF Mono,Consolas,Monaco,monospace;font-size:12px;padding:8px;border:1px solid var(--grid-thin);border-radius:6px;resize:vertical;min-height:60px;line-height:1.5;background:#fafbfc;color:var(--text-given)}.cc-code.cc-error{border-color:var(--text-error);background:#fff5f5}.cc-error-msg{font-size:11px;color:var(--text-error)}.cc-edit-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--grid-thin)}.cc-edit-actions button{padding:6px 14px;border:none;border-radius:6px;font-size:13px;cursor:pointer;background:var(--btn-bg);color:var(--text-given)}.cc-edit-actions button:hover{background:var(--btn-hover)}.cc-edit-actions .cc-save-btn{background:var(--btn-active);color:#fff}@media(max-width:600px){:root{--cell-size: calc((100vw - 24px) / 9)}#root{min-height:100dvh;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 60px)}body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.app-header{padding:8px 10px 4px;gap:4px}.app-title{font-size:16px}.app-subtitle{font-size:10px}.puzzle-selector{font-size:12px;padding:3px 6px;max-width:130px}.puzzle-selectors{gap:4px}.toolbar{padding:4px 8px;gap:3px}.toolbar button{padding:5px 8px;font-size:11px}.toolbar-separator,.color-palette{display:none}.board-container{border-width:2px;margin:0 auto}.cell{font-size:calc(var(--cell-size) * .5)}.cell-corner-marks{font-size:calc(var(--cell-size) * .18)}.cell-center-marks{font-size:calc(var(--cell-size) * .2)}.number-pad{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--grid-thin);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:50;box-shadow:0 -2px 8px #00000014}.num-btn{width:calc((100vw - 80px)/5);height:42px;font-size:18px;border-radius:8px}.status-bar{padding:6px 10px;font-size:12px;min-height:24px}.solved-banner{font-size:14px;padding:6px}.editor-panel{padding:8px 10px}.editor-header select{min-width:0;font-size:12px}.editor-form-row label{min-width:50px;font-size:11px}.editor-form-row input{font-size:12px}.help-overlay{padding:16px}.help-overlay h2{font-size:18px}.help-overlay .constraint-desc{font-size:13px}.modal-content{max-width:100%;max-height:90vh;padding:16px;border-radius:8px}.save-row input{font-size:16px}.loading-indicator{padding:4px 10px}}@media(max-width:380px){.toolbar button{padding:4px 6px;font-size:10px}.num-btn{height:38px;font-size:16px}.puzzle-selector{max-width:110px;font-size:11px}}