:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--ink: #172033;--muted: #66738a;--page: #f5f8fb;--panel: #ffffff;--line: #dde6ef;--dark: #071421;--teal: #02a79c;--teal-soft: #def9f4;--coral: #ff4f46;--blue: #1475d1;--yellow: #ffc933;--green: #15a86f;--shadow: 0 18px 48px rgba(18, 32, 54, .1);--mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}html{min-width:320px;background:var(--page)}body{margin:0;color:var(--ink);background:var(--page)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:14px}.topbar{display:grid;grid-template-columns:minmax(280px,1fr) auto auto;gap:16px;align-items:center;min-height:66px;padding:0 16px;border-radius:10px;color:#effcff;background:linear-gradient(90deg,#071421,#0b2339);box-shadow:var(--shadow)}.brand,.topbar nav,.export-button,.panel-title,.panel-heading,.download-button,.seo-panel,.seo-points,footer,footer nav,.code-card div{display:flex;align-items:center}.brand{gap:12px;color:inherit;text-decoration:none}.brand>span{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#071421;background:linear-gradient(135deg,#00c2a8,#45dcff)}.brand h1,.brand strong,.brand small{display:block}.brand h1,.brand strong{margin:0;font-size:18px;line-height:1.1}.brand small{color:#effcffb8}.topbar nav{gap:8px}.topbar nav a{min-height:36px;padding:0 11px;border-radius:8px;color:#effcffc2;text-decoration:none;font-size:13px;font-weight:850}.topbar nav a:hover{color:#fff;background:#ffffff1a}.export-button,.download-button,.code-card button{gap:8px;border:1px solid transparent;border-radius:8px;color:#fff;background:var(--teal);font-weight:900}.export-button{min-height:40px;padding:0 14px}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr) 360px;gap:12px;align-items:start;margin-top:12px}.control-rail,.output-panel{display:grid;gap:12px}.panel,.preview-panel,.output-panel,.seo-panel{border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow)}.panel,.output-panel{padding:14px}.panel-title{gap:8px;color:var(--teal);font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.panel-title>span{display:grid;place-items:center;width:22px;height:22px;color:#fff;border-radius:999px;background:var(--teal)}.upload-zone{display:grid;place-items:center;gap:8px;min-height:178px;margin-top:12px;padding:16px;border:1px dashed #a7c4d6;border-radius:10px;text-align:center;cursor:pointer}.upload-zone input{display:none}.upload-zone img{width:86px;height:86px;border-radius:18px}.upload-zone span{color:var(--muted);font-size:12px}.text-field,.color-field,.range-field{display:grid;gap:7px;margin-top:12px}.text-field span,.color-field span,.range-field span{color:var(--muted);font-size:12px;font-weight:850}.text-field input,.color-field input:last-child{width:100%;min-height:40px;border:1px solid var(--line);border-radius:8px;padding:0 10px;color:var(--ink);outline:none}.color-field{grid-template-columns:74px minmax(0,1fr);align-items:end}.color-field span{grid-column:1 / -1}.color-field input[type=color]{width:74px;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent}.range-field span{display:flex;justify-content:space-between;gap:8px}.toggle-row{display:flex;gap:9px;align-items:center;margin-top:12px;font-weight:850}.preview-panel{overflow:hidden}.panel-heading{justify-content:space-between;gap:12px;min-height:62px;padding:12px 14px;border-bottom:1px solid var(--line)}.panel-heading>span{color:var(--muted);font-size:12px;font-weight:850}.panel-heading.compact{min-height:48px;border-bottom:0;padding:0 0 8px}.preview-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:12px;padding:14px}.preview-grid article{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.preview-grid h2{margin:0;padding:12px;font-size:15px}.browser-preview{grid-column:1 / -1}.browser-chrome{display:grid;grid-template-columns:12px 12px 12px 32px minmax(0,1fr);gap:8px;align-items:center;min-height:54px;margin:0 14px;padding:0 12px;border-radius:12px 12px 0 0;background:#f1f5f9}.browser-chrome span:nth-child(-n+3){width:12px;height:12px;border-radius:999px}.browser-chrome span:nth-child(1){background:#ff5f57}.browser-chrome span:nth-child(2){background:#ffbd2e}.browser-chrome span:nth-child(3){background:#28c840}.browser-chrome img{width:28px;height:28px;border-radius:7px}.address{margin:0 14px 14px;min-height:76px;padding:14px;color:var(--muted);background:#f8fafc}.phone-preview>div,.android-preview>div{display:grid;place-items:center;min-height:250px;color:#fff;background:linear-gradient(145deg,#0b2339,#04a98c)}.phone-preview>div{background:linear-gradient(145deg,#243b80,#ff5c78)}.phone-preview img,.android-preview img{width:86px;height:86px;border-radius:20px}.phone-preview span,.android-preview span{margin-top:8px;font-weight:850}.mask-preview{grid-column:1 / -1}.mask-preview>div{position:relative;display:grid;place-items:center;min-height:230px;background:linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f8fafc 75%),linear-gradient(-45deg,transparent 75%,#f8fafc 75%),#fff;background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.mask-preview img{width:150px;height:150px;border-radius:32px}.safe-ring{position:absolute;width:188px;height:188px;border:2px dashed var(--teal);border-radius:40px}.file-list{display:grid;gap:8px}.file-list article{display:grid;grid-template-columns:22px minmax(0,1fr) auto 18px;gap:8px;align-items:center;min-height:38px;padding:8px;border:1px solid var(--line);border-radius:8px}.file-list span{color:var(--muted);font-size:12px}.file-list svg:last-child{color:var(--green)}.code-card{display:grid;gap:8px;margin-top:12px}.code-card div{justify-content:space-between;gap:8px}.code-card button{min-height:30px;padding:0 8px}.code-card pre{max-height:230px;margin:0;overflow:auto;padding:12px;border-radius:8px;color:#e9fbff;background:var(--dark);font:12px/1.55 var(--mono);white-space:pre-wrap}.download-button{justify-content:center;min-height:46px;margin-top:12px}.seo-panel{justify-content:space-between;gap:18px;margin-top:12px;padding:16px}.seo-panel h2,.seo-panel p{margin:0}.seo-panel p{color:var(--muted)}.seo-points{gap:8px;flex-wrap:wrap}.seo-points span{display:inline-flex;gap:6px;align-items:center;min-height:32px;padding:0 9px;border-radius:999px;color:#057669;background:var(--teal-soft);font-weight:850}footer{justify-content:space-between;gap:14px;padding:20px 4px 0;color:var(--muted);font-size:13px}footer nav{gap:14px}footer a{color:inherit;font-weight:850}@media(max-width:1180px){.workspace{grid-template-columns:1fr}}@media(max-width:760px){.app-shell{padding:8px}.topbar{grid-template-columns:1fr;gap:8px;padding:10px}.topbar nav{justify-content:flex-start;overflow-x:auto}.export-button{width:100%;justify-content:center}.brand small{display:none}.panel,.output-panel{padding:12px}.preview-grid,.color-field{grid-template-columns:1fr}.browser-preview,.mask-preview{grid-column:auto}.phone-preview>div,.android-preview>div{min-height:210px}.file-list article{grid-template-columns:22px minmax(0,1fr)}.file-list span,.file-list svg:last-child{grid-column:2}.seo-panel,footer{align-items:flex-start;flex-direction:column}}