:root{--bg:#f4f5f7;--panel-bg:#fff;--panel-border:#e1e3e8;--text:#1c1e26;--text-muted:#6b7080;--accent:#2f7de1;--accent-hover:#1f66c4;--danger:#d64545;--input-bg:#fff;--input-border:#cbd0da;--canvas-bg:#dfe3ea;--shadow:0 8px 24px #14161e2e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font:13px/1.4 Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}button,input,select,textarea{font:inherit;color:inherit}h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}.app-shell{flex-direction:column;height:100vh;display:flex;overflow:hidden}.topbar{background:var(--panel-bg);border-bottom:1px solid var(--panel-border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex}.topbar-left,.topbar-right{align-items:center;gap:8px;display:flex}.app-title{white-space:nowrap;margin-right:8px;font-size:15px;font-weight:600}.flag-name-input{background:0 0;border:1px solid #0000;border-radius:4px;min-width:140px;padding:4px 8px;font-size:13px}.flag-name-input:hover,.flag-name-input:focus{border-color:var(--input-border);background:var(--input-bg);outline:none}.app-body{flex:1;min-height:0;display:flex}.sidebar{background:var(--panel-bg);border-right:1px solid var(--panel-border);flex-direction:column;width:380px;min-width:340px;max-width:440px;min-height:0;display:flex}.mode-tabs{border-bottom:1px solid var(--panel-border);flex-shrink:0;display:flex}.mode-tab{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:10px;font-weight:600}.mode-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.sidebar-scroll{flex:1;padding-bottom:24px;overflow-y:auto}.canvas-area{background:var(--canvas-bg);background-image:linear-gradient(45deg,#d3d7de 25%,#0000 25%),linear-gradient(-45deg,#d3d7de 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d3d7de 75%),linear-gradient(-45deg,#0000 75%,#d3d7de 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex}.statusbar{background:var(--panel-bg);border-top:1px solid var(--panel-border);color:var(--text-muted);flex-shrink:0;gap:20px;padding:6px 16px;font-size:11px;display:flex}.panel-section{border-bottom:1px solid var(--panel-border);padding:14px 16px}.panel-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px;font-size:11px;font-weight:700}.panel-subsection{margin-top:12px}.param-stack{border:none;flex-direction:column;gap:10px;margin:0;padding:0;display:flex}.param-stack:disabled{opacity:.5}.hint-text{color:var(--text-muted);font-size:12px}.field-label{color:var(--text-muted);margin-bottom:4px;font-size:11px;font-weight:600;display:block}.field-suffix{color:var(--text-muted);font-size:11px}select,input[type=text],input[type=number]{border:1px solid var(--input-border);background:var(--input-bg);border-radius:4px;width:100%;padding:5px 7px}.number-field{display:block}.number-field-row{align-items:center;gap:8px;display:flex}.number-field-row input[type=range]{flex:1}.number-field-value{flex-shrink:0;align-items:center;gap:4px;display:flex}.number-field-value input[type=number]{width:62px}.color-input{flex-direction:column;gap:4px;display:flex}.color-input-row{align-items:center;gap:6px;display:flex}.color-input-row input[type=color]{border:1px solid var(--input-border);cursor:pointer;background:0 0;border-radius:4px;width:32px;height:28px;padding:0}.hex-input{flex:1;font-family:ui-monospace,Consolas,monospace}.recent-colors{flex-wrap:wrap;gap:4px;margin-top:2px;display:flex}.recent-swatch{border:1px solid var(--input-border);cursor:pointer;border-radius:3px;width:16px;height:16px;padding:0}.primary-button,.secondary-button,.icon-button{cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:5px}.primary-button{background:var(--accent);color:#fff;border-color:var(--accent);padding:7px 14px;font-weight:600}.primary-button:hover{background:var(--accent-hover)}.secondary-button{background:var(--panel-bg);border-color:var(--input-border);padding:6px 12px}.secondary-button:hover{border-color:var(--accent);color:var(--accent)}.icon-button{color:var(--text-muted);background:0 0;border-color:#0000;padding:4px 6px}.icon-button:hover{color:var(--text);background:#0000000f}.icon-button.danger:hover{color:var(--danger)}button:disabled{opacity:.4;cursor:not-allowed}.checkbox-field{align-items:center;gap:6px;font-size:12px;display:flex}.button-row{flex-wrap:wrap;gap:8px;display:flex}.ratio-grid,.pattern-grid,.preset-position-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.ratio-button,.pattern-button{border:1px solid var(--input-border);background:var(--panel-bg);cursor:pointer;text-align:center;border-radius:5px;padding:8px 4px;font-size:12px}.ratio-button.active,.pattern-button.active{border-color:var(--accent);color:var(--accent);background:#2f7de11a;font-weight:600}.custom-ratio-row{align-items:flex-end;gap:6px;margin-top:8px;display:flex}.ratio-colon{color:var(--text-muted);padding-bottom:6px}.emblem-picker{grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px;display:grid}.emblem-picker-item{aspect-ratio:1;border:1px solid var(--input-border);background:var(--panel-bg);cursor:pointer;color:var(--text);border-radius:5px;justify-content:center;align-items:center;display:flex}.emblem-picker-item.active{border-color:var(--accent);color:var(--accent);background:#2f7de11a}.stripes-editor,.stripe-row{flex-direction:column;gap:8px;display:flex}.stripe-row{background:#00000008;border-radius:6px;flex-direction:row;align-items:flex-end;gap:6px;padding:8px}.stripe-row>.color-input{flex-shrink:0}.stripe-row>.number-field{flex:1}.layer-card{border:1px solid var(--panel-border);border-radius:6px;flex-direction:column;gap:8px;margin-top:10px;padding:10px;display:flex}.layer-card-header{justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.layer-list{flex-direction:column;gap:2px;margin-top:10px;display:flex}.layer-list-empty{color:var(--text-muted);padding:8px 0;font-size:12px}.layer-list-item{cursor:pointer;border-radius:5px;align-items:center;gap:2px;padding:4px;display:flex}.layer-list-item:hover{background:#0000000a}.layer-list-item.active{background:#2f7de11f}.layer-name{text-overflow:ellipsis;white-space:nowrap;flex-direction:column;flex:1;min-width:0;font-size:12px;display:flex;overflow:hidden}.layer-type-tag{color:var(--text-muted);font-size:10px}.layer-name-input{flex:1;min-width:0}.layer-actions{flex-shrink:0;gap:0;display:flex}.add-layer-menu,.dropdown-anchor{display:inline-block;position:relative}.add-layer-dropdown{z-index:20;background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--shadow);border-radius:6px;flex-direction:column;min-width:180px;max-height:320px;padding:4px;display:flex;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto}.add-layer-option{text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 10px}.add-layer-option:hover{color:var(--accent);background:#2f7de11a}.flag-canvas-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.flag-canvas-svg{box-shadow:var(--shadow);touch-action:none;background:#fff}.modal-overlay{z-index:100;background:#0a0c1473;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel-bg);box-shadow:var(--shadow);border-radius:10px;flex-direction:column;width:min(520px,92vw);max-height:88vh;display:flex}.modal-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.modal-header h2{font-size:15px}.modal-body{flex-direction:column;gap:18px;padding:16px;display:flex;overflow-y:auto}.export-section h3{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px;font-size:12px}.ai-preview,.json-input{border:1px solid var(--input-border);resize:vertical;border-radius:6px;width:100%;padding:8px;font-family:ui-monospace,Consolas,monospace;font-size:11px}.status-line{color:var(--text-muted);font-size:12px}.status-line.error{color:var(--danger)}.status-line.warning{color:#a06600}.status-line ul{margin-top:4px;padding-left:16px;list-style:outside}