.st-app{--st-ink:#213448;--st-primary:#4f6783;--st-accent:#90c2e7;--st-border:#dce4ec;--st-muted:#5c6b7c;color:var(--st-ink);font-family:Ubuntu,system-ui,sans-serif;max-width:1280px;margin:0 auto;padding:clamp(16px,3vw,40px);box-sizing:border-box}.st-app *{box-sizing:border-box}.st-hero{background:linear-gradient(120deg,#263f5c,#4f6783);color:#fff;border-radius:24px;padding:clamp(28px,6vw,76px)}.st-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:#c5e6ff}.st-hero h1{font-size:clamp(32px,5vw,60px);line-height:1.1;margin:16px 0}.st-hero p{font-size:clamp(15px,2vw,19px);max-width:640px;color:#e7f0fa;margin-bottom:28px}.st-search-label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}.st-hero input{display:block;width:100%;max-width:680px;background:#fff;color:#172b3e;border:2px solid transparent;border-radius:12px;padding:16px;font-size:16px;min-height:54px}.st-hero input:focus-visible,.st-app button:focus-visible,.st-app a:focus-visible{outline:3px solid var(--st-accent);outline-offset:3px}.st-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:28px 0}.st-filters{display:flex;flex-wrap:wrap;gap:8px}.st-filters button{border:1px solid var(--st-border);background:#fff;color:var(--st-ink);padding:9px 15px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px}.st-filters button.is-active{background:var(--st-primary);color:#fff;border-color:var(--st-primary)}.st-count{color:var(--st-muted);font-size:14px}.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:18px}.st-card{border:1px solid var(--st-border);border-radius:18px;background:#fff;padding:24px;min-height:228px;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(27,50,76,.04)}.st-card[hidden]{display:none}.st-card-top{display:flex;justify-content:space-between;align-items:center}.st-category{font-size:12px;color:var(--st-primary);font-weight:700}.st-favorite{font-size:24px;line-height:1;background:transparent;border:0;cursor:pointer;color:var(--st-primary);padding:5px}.st-card h2{font-size:21px;line-height:1.25;margin:20px 0 9px}.st-card p{color:var(--st-muted);font-size:14px;line-height:1.6;margin:0 0 20px}.st-launch{margin-top:auto;font-weight:700;color:var(--st-primary);text-decoration:none}.st-launch:hover{text-decoration:underline}.st-empty,.st-onboarding{padding:24px;border:1px dashed var(--st-border);border-radius:16px;color:var(--st-muted)}@media(prefers-reduced-motion:no-preference){.st-card{transition:transform .2s,box-shadow .2s}.st-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(27,50,76,.1)}}
.st-native{max-width:900px}.st-native h1{font-size:clamp(26px,4vw,40px);margin:24px 0}.st-native label{display:block;font-weight:650;margin:14px 0 6px}.st-native textarea,.st-native input:not([type=color]):not([type=range]){width:100%;max-width:100%;padding:12px;border:1px solid #bdcad8;border-radius:10px;font:inherit;color:#213448;background:white}.st-native textarea{font-family:ui-monospace,monospace}.st-native button{background:#4f6783;color:white;border:0;border-radius:9px;padding:11px 17px;margin:12px 8px 8px 0;cursor:pointer}.st-native button:hover{background:#30465f}.st-native .st-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px}.st-gradient-preview{height:220px;border-radius:16px;margin:24px 0;background:linear-gradient(120deg,#4f6783,#90c2e7)}.st-status{min-height:24px;color:#30465f;overflow-wrap:anywhere}
.st-workspace{margin-top:36px;padding:clamp(18px,3vw,30px);border:1px solid var(--st-border);border-radius:18px;background:#f7fafd}.st-workspace h2{font-size:23px;margin:0 0 10px}.st-workspace-note{color:var(--st-muted)}.st-workspace .st-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.st-workspace .st-actions button{margin:0}.st-workspace .st-actions a{color:var(--st-primary);font-weight:700}.st-workspace-status{min-height:20px;color:var(--st-ink)}.st-project-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--st-border);padding:9px 0}.st-project-row span{flex:1;min-width:120px}.st-project-row button{margin:0;padding:7px 12px}
/* v0.5 dashboard */
.st-dashboard{margin:28px 0;padding:24px;border:1px solid #dce5ed;border-radius:18px;background:#f7fafc;color:#24364a}.st-dashboard h2{margin:0 0 8px}.st-dashboard p{margin:0 0 16px}.st-dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.st-dashboard-tile{background:white;border:1px solid #e1e7ed;border-radius:12px;padding:16px}.st-dashboard-tile strong{display:block;font-size:26px}.st-dashboard-list{display:grid;gap:10px;margin-top:14px}.st-dashboard-item{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:white;padding:12px;border-radius:10px;border:1px solid #e1e7ed}.st-dashboard-item button{border:1px solid #aebdcb;background:white;border-radius:8px;padding:7px 12px;cursor:pointer}.st-dashboard-message{min-height:1.5em}.st-dashboard button:focus-visible,.st-dashboard a:focus-visible{outline:3px solid #4f6783;outline-offset:3px}@media(max-width:600px){.st-dashboard{padding:16px}.st-dashboard-item{align-items:flex-start}}

/* v0.6 tool editor */
.st-editor-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:#f3f7fa;border:1px solid #dae5ee;border-radius:12px;padding:12px 16px;margin:18px 0 24px}
.st-editor-label{font-size:.85rem;color:#4f6783;font-weight:600}
.st-editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.st-editor-actions button{padding:8px 12px;font-size:.85rem}
.st-visual-preview{border:1px solid #dae5ee;border-radius:14px;overflow:hidden;background:#fff;margin:20px 0;min-height:180px}
.st-visual-preview svg{width:100%;height:220px;display:block}
.st-shadow-stage{min-height:250px;display:grid;place-items:center;background:#f5f8fb;border-radius:14px;margin:20px 0;padding:35px}
#st-shadow-preview{display:grid;place-items:center;background:white;border-radius:16px;width:min(230px,80%);height:130px;color:#4f6783;font-weight:700}
@media(max-width:600px){.st-editor-bar{align-items:stretch}.st-editor-actions{width:100%}.st-editor-actions button{flex:1}}

/* v0.7 plugin integrations */
.st-integration{max-width:none}
.st-integrated-content{margin-top:22px}
.st-icons-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.st-icons-controls input{flex:1;min-width:190px}
.st-icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.st-icon-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;border:1px solid #dae5ee;border-radius:12px;text-align:center}
.st-icon-card[hidden]{display:none}
.st-icon-card img{width:40px;height:40px;object-fit:contain}
.st-icon-card span{font-size:.85rem;overflow-wrap:anywhere}
.st-icon-card a{font-size:.8rem}
/* v0.9 shared SVG Asset Composer */
.st-composer-intro,.st-composer-warning{color:#52697e;line-height:1.55}
.st-composer-warning{border:1px solid #f0d9aa;background:#fffaf0;border-radius:10px;padding:12px}
.st-composer-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
.st-composer-sidebar,.st-composer-stage{border:1px solid #d9e4ed;border-radius:16px;background:#fff;padding:16px;min-width:0}
.st-composer-sidebar select{display:block;width:100%;padding:11px;border:1px solid #becdd9;border-radius:9px}
.st-composer-sidebar>button{display:block;width:100%}
.st-composer-layer-list{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.st-composer-layer-list .st-composer-layer{background:#f5f9fc;color:#36526a;display:block;text-align:left;width:100%;margin:0;padding:10px;border:1px solid #dce7ee}
.st-composer-layer-list .st-composer-layer.is-selected{border-color:#4f6783;background:#eaf2fb}
.st-composer-sidebar input[type=number]{width:100%;padding:9px;border-radius:8px;border:1px solid #cbd8e2}
.st-composer-sidebar h3{font-size:16px;margin:12px 0}
.st-composer-layer-actions{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.st-composer-layer-actions button{margin:0;padding:9px 11px;font-size:12px}
.st-composer-hint{font-size:13px;color:#597185;line-height:1.55}
.st-composer-viewport{aspect-ratio:1200/675;border:1px solid #d4e0eb;background:repeating-conic-gradient(#f2f6fa 0% 25%,#fff 0% 50%) 0 0/20px 20px;overflow:hidden;border-radius:10px}
.st-composer-viewport img{display:block;width:100%;height:100%;object-fit:contain}
.st-composer-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.st-composer-actions button{margin:0}
[data-composer-status]{font-size:13px;color:#36526a;overflow-wrap:anywhere}
@media(max-width:780px){.st-composer-layout{grid-template-columns:1fr}.st-composer-sidebar{order:2}.st-composer-stage{order:1}}

/* 1.2 — denser directory, scalable category filters and practical tools */
.st-hero{padding:clamp(26px,4vw,48px)}
.st-hero h1{font-size:clamp(30px,4.1vw,48px);max-width:760px;margin:12px 0}
.st-hero p{margin:0 0 22px;max-width:680px}
.st-hero input{min-height:50px;padding:13px 16px}
.st-search-tip{display:block;margin-top:9px;color:#d9eafa;font-size:12px}
.st-controls{gap:14px;margin:20px 0}
.st-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;max-width:100%;padding:4px 4px 9px;scrollbar-width:thin;scrollbar-color:#c8d6e3 transparent}
.st-filters button{flex:0 0 auto;white-space:nowrap;padding:8px 13px}
.st-recent{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-recent[hidden]{display:none}
.st-recent>strong{font-size:13px;color:var(--st-muted)}
.st-recent-links{display:flex;gap:8px;flex-wrap:wrap}
.st-recent-links a{font-size:13px;color:var(--st-primary);background:#eff4f9;border:1px solid #dae5ef;border-radius:9px;padding:7px 11px;text-decoration:none}
.st-grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr))}
.st-card{padding:20px;min-height:202px;border-radius:14px}
.st-card h2{font-size:18px;margin:12px 0 8px}
.st-card p{line-height:1.5;margin-bottom:16px}
.st-practical{margin-top:18px}
.st-practical .st-fields{gap:14px 20px}
.st-practical label{display:block;line-height:1.4;margin:12px 0 16px}
.st-practical select,.st-practical input[type="date"],.st-practical input[type="number"],.st-practical input[type="url"]{display:block;width:100%;padding:12px;border:1px solid #bdcad8;border-radius:10px;background:#fff;color:#213448;font:inherit;margin-top:6px;min-height:46px}
.st-practical textarea,.st-practical input:not([type="checkbox"]){margin-top:6px}
.st-practical textarea[readonly],.st-practical input[readonly]{background:#f5f8fb;border-color:#d2dfe9;color:#243951}
.st-practical button{margin:0 8px 8px 0}
.st-practical .st-actions{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0}
.st-practical .st-actions button{margin:0}
.st-p-hint{font-size:13px;line-height:1.6;color:var(--st-muted)}
.st-p-warning{font-size:14px;line-height:1.6;color:#6d4922;background:#fff8ec;border-left:3px solid #d19b4a;padding:12px 15px;border-radius:6px}
.st-p-result{line-height:1.6;background:#f4f8fc;border:1px solid #dce7ef;border-radius:10px;padding:12px 14px;overflow-wrap:anywhere}
.st-p-options{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;align-items:center}
.st-p-options label{display:flex;align-items:center;gap:6px;margin:0;background:#f3f7fb;border:1px solid #dce6ed;padding:9px 12px;border-radius:9px;font-size:14px}
.st-p-options input[type="checkbox"]{width:18px;height:18px;accent-color:var(--st-primary)}
.st-p-options button{margin:0}
.st-p-serp{border:1px solid #e1e6ef;background:#fff;border-radius:12px;padding:18px 20px;margin:15px 0;max-width:650px;overflow-wrap:anywhere}
.st-p-serp span{display:block;color:#346048;font-size:13px;margin-bottom:5px}
.st-p-serp strong{display:block;color:#2057a0;font-size:20px;font-weight:500}
.st-p-serp p{font-size:14px;line-height:1.5;margin:5px 0 0;color:#485766}
.st-p-heading-list{border:1px solid #dce7ef;border-radius:10px;padding:15px 15px 15px 38px;max-height:400px;overflow-y:auto}
.st-p-heading-list li{padding:6px 0;overflow-wrap:anywhere}
.st-p-data{border:1px solid #dce7ef;border-radius:10px;max-height:390px;overflow:auto;margin:12px 0}
.st-p-data-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:20px;border-bottom:1px solid #e6edf3}
.st-p-data-row:last-child{border-bottom:0}
.st-p-scale{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px;margin:18px 0;border:1px solid #dae5ed;border-radius:13px;background:#f3f7fb}
.st-p-scale span[data-p-clamp-preview]{font-weight:700;line-height:1.2}
.st-p-scale>span:not([data-p-clamp-preview]){font-size:12px;color:var(--st-muted)}
.st-p-ratio-preview{margin:20px auto;background:linear-gradient(130deg,#4f6783,#90c2e7);max-width:100%;width:420px;display:grid;place-items:center;color:white;border-radius:12px;text-align:center}
.st-p-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:16px 0}
.st-p-metrics>div{border:1px solid #dbe7ef;background:#f6f9fc;border-radius:12px;padding:18px}
.st-p-metrics span{font-size:13px;color:var(--st-muted);display:block;line-height:1.4;margin-bottom:8px}
.st-p-metrics strong{font-size:clamp(21px,3vw,26px);color:var(--st-ink);overflow-wrap:anywhere}
@media(max-width:680px){.st-app{padding:15px}.st-hero{border-radius:16px}.st-controls{display:block}.st-count{display:block;padding:3px}.st-card{min-height:initial}.st-practical .st-fields{grid-template-columns:1fr}.st-p-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.st-native-save-form{margin:14px 0;padding:14px;border:1px solid #cbdde9;background:white;border-radius:12px}
.st-native-save-form[hidden],.st-workspace [hidden]{display:none!important}
.st-native-save-form label{display:block;font-weight:600;margin:0 0 10px}
.st-native-save-form input{max-width:400px}
.st-native-save-form .st-actions{gap:8px}