*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f3f5f1;color:#18221d}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.page-shell{min-height:100vh;display:flex;flex-direction:column}.app-shell{flex:1;display:grid;grid-template-columns:minmax(300px,372px) minmax(0,1fr);gap:18px;padding:18px}.control-panel,.workspace-panel{background:#fff;border:1px solid #d8ded7;border-radius:8px;box-shadow:0 16px 42px #1a262014}.control-panel{display:flex;flex-direction:column;gap:18px;padding:18px;min-width:0}.workspace-panel{min-width:0;display:grid;grid-template-rows:auto minmax(460px,1fr) auto;overflow:hidden}.panel-header,.preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.header-actions{display:flex;gap:8px;align-items:center}.panel-header h1,.preview-header h2{margin:0;font-size:23px;line-height:1.15;letter-spacing:0}.preview-header{padding:18px 20px 14px;border-bottom:1px solid #dfe4dc}.preview-header p,.eyebrow,.status-text{margin:0;color:#5f6d64;font-size:13px}.eyebrow{color:#1f7b66;font-weight:700;text-transform:uppercase}fieldset{border:0;padding:0;margin:0;display:grid;gap:12px}legend{padding:0 0 8px;font-weight:800;color:#253229}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field{display:grid;gap:6px;min-width:0}.field span,.toggle-row span{font-size:13px;font-weight:650;color:#4e5c53}.field input,.field select{width:100%;min-height:40px;border:1px solid #cbd5cd;border-radius:7px;padding:8px 10px;color:#18221d;background:#fbfcfa}.field input:focus,.field select:focus{outline:2px solid #8fc8b3;border-color:#27816b}.field input:disabled,.field select:disabled,.segmented button:disabled{color:#718077;background:#eef2ed}.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #cbd5cd;border-radius:7px;padding:3px;background:#eef2ed}.segmented button{min-height:34px;border:0;border-radius:5px;background:transparent;color:#4f5c54;font-weight:750}.segmented button.active{background:#fff;color:#166d5a;box-shadow:0 1px 4px #1a26201f}.toggle-row{display:flex;gap:10px;align-items:center}.toggle-row input{width:18px;height:18px;accent-color:#1f7b66}.summary-panel{display:grid;gap:6px;padding:10px;border:1px solid #dce4dd;border-radius:8px;background:#f8faf7}.summary-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.summary-row span{color:#5f6d64}.summary-row strong{color:#19231e;text-align:right}.message-list{display:grid;gap:5px;border-radius:8px;padding:10px 12px;font-size:13px}.message-list p{margin:0}.error-list{color:#7c2522;background:#fdebea;border:1px solid #f2bbb7}.warning-list{color:#6f4a13;background:#fff4da;border:1px solid #efd08c}.primary-button,.icon-button,.download-link,.secondary-button{border:0;display:inline-flex;align-items:center;justify-content:center}.export-actions{display:grid;gap:10px}.icon-button{flex:0 0 auto;width:38px;height:38px;border-radius:7px;color:#405049;background:#eef2ed}.icon-button:hover{color:#166d5a;background:#e0eee8}.primary-button{width:100%;min-height:46px;gap:10px;border-radius:7px;color:#fff;background:#1f7b66;font-weight:800}.primary-button:hover:not(:disabled){background:#176a57}.primary-button:disabled{opacity:.48}.primary-button.compact{width:auto;min-height:40px;padding:0 14px}.secondary-button{min-height:40px;border-radius:7px;border:1px solid #cbd5cd;color:#415149;background:#f8faf7;padding:0 12px;font-weight:800}.secondary-button:hover{border-color:#9db2a6;background:#eef2ed}.secondary-button:disabled{opacity:.48;cursor:not-allowed}.wide-button{width:100%}.download-link{min-height:46px;gap:10px;border:1px solid #b9dacd;border-radius:7px;color:#166d5a;background:#edf8f3;padding:9px 12px;text-decoration:none;font-weight:800}.download-link span{min-width:0;display:grid;gap:2px}.download-link small{color:#5b7167;font-size:12px;font-weight:700}.download-link:hover{border-color:#8fc8b3;background:#e2f3ec}.compatibility-pill{white-space:nowrap;border:1px solid #b9dacd;border-radius:999px;color:#166d5a;background:#edf8f3;padding:6px 10px;font-size:12px;font-weight:800}.preview-frame{min-height:0;position:relative}.preview-canvas{width:100%;height:100%}.preview-empty{height:100%;min-height:360px;display:grid;place-items:center;color:#68746d;background:#f4f6f2}.tile-label{padding:2px 6px;border-radius:999px;background:#ffffffdb;border:1px solid rgba(64,80,73,.16);color:#21312a;font-size:11px;font-weight:800;pointer-events:none;-webkit-user-select:none;user-select:none}.tile-table{max-height:220px;overflow:auto;border-top:1px solid #dfe4dc;background:#fbfcfa}.tile-table-head,.tile-table-row{display:grid;grid-template-columns:.8fr .8fr 1.4fr 1.4fr;gap:12px;padding:9px 20px;align-items:center;font-size:13px}.tile-table-head{position:sticky;top:0;z-index:1;color:#5c6a61;background:#f2f5f0;font-weight:850}.tile-table-row{border-top:1px solid #e9eee7}.tile-table-row span{min-width:0;overflow-wrap:anywhere}.app-footer{display:flex;justify-content:center;gap:12px;padding:0 18px 16px;color:#65746b;font-size:12px;font-weight:700}.app-footer span+span:before{content:"/";margin-right:12px;color:#9aa69f}.app-footer a{color:inherit;text-decoration:none}.app-footer a:hover{text-decoration:underline}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:18px;background:#18221d6b}.settings-dialog{width:min(720px,100%);max-height:min(860px,calc(100vh - 36px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid #cdd8cf;border-radius:8px;background:#fff;box-shadow:0 24px 80px #121a163d}.dialog-header,.dialog-actions{display:flex;align-items:center;gap:10px;padding:14px 16px}.dialog-header{justify-content:space-between;border-bottom:1px solid #e1e7df}.dialog-header h2{margin:0;font-size:19px;letter-spacing:0}.settings-body{overflow:auto;display:grid;gap:18px;padding:16px}.dialog-actions{justify-content:flex-end;flex-wrap:wrap;border-top:1px solid #e1e7df;background:#fbfcfa}@media(max-width:920px){.app-shell{grid-template-columns:1fr}.workspace-panel{grid-template-rows:auto 430px auto}}@media(max-width:560px){.app-shell{padding:10px}.two-col,.tile-table-head,.tile-table-row{grid-template-columns:1fr}.preview-header{align-items:flex-start;flex-direction:column}.app-footer{flex-direction:column;gap:4px;align-items:center}.app-footer span+span:before{content:"";margin:0}.dialog-actions{display:grid;grid-template-columns:1fr 1fr}.dialog-actions .primary-button{width:100%}}