:root{color:#172126;background:#f6f8f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #f6f8f7;--surface: #ffffff;--surface-2: #edf5f3;--border: #d8e4e0;--border-strong: #b7cbc5;--text: #172126;--muted: #657670;--teal: #2ca6a4;--teal-dark: #177d7b;--coral: #ff7c66;--coral-dark: #d85f4d;--gold: #d9a326;--shadow: 0 12px 36px rgba(23, 33, 38, .08)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{color:inherit}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:68px;display:flex;align-items:center;gap:20px;padding:0 20px;border-bottom:1px solid var(--border);background:#fffffff2;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px;min-width:215px}.brand strong{display:block;font-size:16px;line-height:1.1}.brand small{color:var(--muted);font-size:12px}.brand-mark{display:grid;grid-template-columns:repeat(2,12px);grid-template-rows:repeat(2,12px);gap:3px;padding:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.brand-mark span{border-radius:50%}.brand-mark span:nth-child(1){background:var(--teal)}.brand-mark span:nth-child(2){background:var(--coral)}.brand-mark span:nth-child(3){background:var(--gold)}.brand-mark span:nth-child(4){background:#7bd9b1}.topbar-actions{display:flex;align-items:center;gap:8px;overflow-x:auto;width:100%;padding-bottom:2px}.locale-control{flex:0 0 auto}.locale-control select{min-width:118px;height:38px}.topbar-actions button,.stage-actions button,.icon-button,.button-pair button,.export-grid button,.replace-grid button{border:1px solid var(--border);background:var(--surface);border-radius:8px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease;white-space:nowrap}.topbar-actions button:hover,.stage-actions button:hover,.icon-button:hover,.button-pair button:hover,.export-grid button:hover,.replace-grid button:hover{border-color:var(--border-strong);transform:translateY(-1px)}button.primary,.primary{background:var(--coral);border-color:var(--coral);color:#fff}button.primary:hover,.primary:hover{background:var(--coral-dark);border-color:var(--coral-dark)}button:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.workspace{display:grid;grid-template-columns:minmax(288px,336px) minmax(0,1fr) minmax(300px,360px);gap:14px;padding:14px;height:calc(100vh - 68px)}.left-panel,.right-panel,.canvas-stage{background:var(--surface);border:1px solid var(--border);border-radius:10px;min-height:0;box-shadow:var(--shadow)}.panel-scroll{overflow-y:auto;padding:12px}.panel-section{border-bottom:1px solid var(--border);padding:0 0 14px;margin:0 0 14px}.panel-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.section-heading-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}h1,h2,p{margin:0}h1{font-size:20px;line-height:1.15;letter-spacing:0}h2{font-size:14px;line-height:1.2;letter-spacing:0}.section-heading-row p,.stage-toolbar p,.template-meta,.saved-row small,.field span,.setting-row>span{color:var(--muted);font-size:12px}.icon-button{width:36px;height:36px;padding:0;flex:0 0 auto}.drop-target{width:100%;min-height:132px;border:1px dashed var(--border-strong);background:linear-gradient(180deg,#f9fbfb,#eef7f5);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--muted);cursor:pointer;overflow:hidden}.drop-target img{width:100%;height:170px;object-fit:cover}.field,.toggle-row,.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}.field{align-items:flex-start;flex-direction:column;gap:6px}.field select,.field input[type=range],.replace-grid select{width:100%}select,input[type=range]{accent-color:var(--teal)}select{height:38px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);padding:0 10px}.segmented-control{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface-2);border-radius:8px;padding:4px;margin:12px 0}.segmented-control button{border:0;background:transparent;border-radius:6px;height:34px;cursor:pointer;font-size:12px}.segmented-control button.active,.category-tabs button.active{background:#fff;color:var(--teal-dark);box-shadow:0 1px 5px #17212614}.button-pair{display:flex;gap:6px}.button-pair button{width:36px;padding:0}.toggle-row{justify-content:flex-start;font-size:13px}.field-error{color:#b52d2d;font-size:12px;margin-top:8px}.recommendation-box{border:1px solid var(--border);background:#fbfefd;border-radius:8px;padding:12px;display:grid;gap:8px}.recommendation-box strong{font-size:13px}.recommendation-box span,.recommendation-box p,.recommendation-box em{color:var(--muted);font-size:12px;line-height:1.45}.recommendation-box em{color:#9a4c20}.full-width{width:100%;height:36px;border-radius:8px;border:0;cursor:pointer}.template-gallery{scroll-margin-top:80px}.category-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.category-tabs button{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:6px 9px;font-size:12px;cursor:pointer}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.template-card{border:1px solid var(--border);background:#fff;border-radius:8px;padding:9px;text-align:left;cursor:pointer;display:grid;gap:6px;transition:border-color .15s ease,transform .15s ease}.template-card:hover{border-color:var(--teal);transform:translateY(-1px)}.mini-pattern-canvas{width:100%;max-width:92px;justify-self:center;image-rendering:pixelated}.template-title{font-size:12px;font-weight:700}.difficulty{justify-self:start;border-radius:6px;padding:3px 6px;font-size:11px;text-transform:capitalize}.difficulty-easy{background:#e8f7ef;color:#176b41}.difficulty-medium{background:#fff4d8;color:#7b5514}.difficulty-hard{background:#ffe6e0;color:#9b3d2c}.canvas-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.stage-toolbar{min-height:66px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--border)}.stage-actions{display:flex;align-items:center;gap:7px}.stage-actions button{width:38px;padding:0}.stage-actions button.active-icon{background:#e6f6f4;border-color:var(--teal);color:var(--teal-dark)}.zoom-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.zoom-control input{width:120px}.canvas-scroll{overflow:auto;display:grid;place-items:center;background:linear-gradient(90deg,rgba(23,33,38,.035) 1px,transparent 1px),linear-gradient(0deg,rgba(23,33,38,.035) 1px,transparent 1px),#f8faf9;background-size:24px 24px;padding:32px}.pattern-canvas{background:#fff;border:1px solid var(--border-strong);box-shadow:0 18px 60px #17212629;image-rendering:pixelated;touch-action:none}.pattern-canvas.tool-pencil,.pattern-canvas.tool-eraser,.pattern-canvas.tool-fill{cursor:crosshair}.pattern-canvas.tool-eyedropper{cursor:copy}.statusbar{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tool-grid button{height:42px;border:1px solid var(--border);background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.tool-grid button.active{border-color:var(--teal);background:#e6f6f4;color:var(--teal-dark)}.selected-swatch{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;border:1px solid rgba(23,33,38,.18);font-weight:800;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.palette-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.palette-grid button{aspect-ratio:1;min-width:0;border:2px solid rgba(23,33,38,.1);border-radius:8px;font-weight:800;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.palette-grid button.selected{border-color:var(--teal);outline:2px solid rgba(44,166,164,.25)}.replace-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.replace-grid button{grid-column:1 / -1}.count-list{display:grid;gap:6px;max-height:240px;overflow-y:auto}.count-row{display:grid;grid-template-columns:16px minmax(0,1fr) 28px 48px;align-items:center;gap:8px;min-height:30px;border-bottom:1px solid #edf2f0;font-size:13px}.count-row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count-row code{color:var(--muted);font-size:12px}.count-row strong{text-align:right}.count-swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(23,33,38,.18)}.export-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.saved-list{display:grid;gap:8px}.saved-row{display:grid;grid-template-columns:minmax(0,1fr) 34px 34px;gap:6px;align-items:center}.saved-row button{min-width:0;border:1px solid var(--border);background:#fff;border-radius:8px;min-height:34px;cursor:pointer}.saved-row>button:first-child{text-align:left;padding:7px 9px}.saved-row span,.saved-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-row>button:not(:first-child){display:grid;place-items:center}.empty-state{border:1px dashed var(--border-strong);border-radius:8px;padding:12px;color:var(--muted);font-size:12px;text-align:center}@media(max-width:1200px){.workspace{grid-template-columns:300px minmax(0,1fr)}.right-panel{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.right-panel .panel-section{border-bottom:0;border-right:1px solid var(--border);margin:0;padding:0 12px 0 0}.right-panel .panel-section:nth-child(3n){border-right:0}}@media(max-width:840px){.topbar{height:auto;min-height:68px;align-items:flex-start;flex-direction:column;padding:12px}.topbar-actions{width:100%;flex-wrap:wrap;overflow:visible}.topbar-actions button{flex:1 1 154px}.locale-control,.locale-control select{flex:1 1 154px;width:100%}.workspace{height:auto;grid-template-columns:1fr}.left-panel,.right-panel,.canvas-stage{max-height:none}.right-panel{display:block}.right-panel .panel-section{border-right:0;border-bottom:1px solid var(--border);margin:0 0 14px;padding:0 0 14px}.stage-toolbar{align-items:flex-start;flex-direction:column}.stage-actions{width:100%;flex-wrap:wrap}.canvas-scroll{min-height:480px;justify-content:start;place-items:start}}