@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500&display=swap');:root{--bg:#101118;--surface:#191b24;--surface2:#22242e;--line:#30313d;--text:#f3f0f7;--muted:#94919f;--accent:#d0b1d9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:not-allowed}#app{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{height:100vh;position:sticky;top:0;background:#15161e;border-right:1px solid var(--line);padding:29px 17px;display:flex;flex-direction:column}.logo{display:flex;align-items:center;gap:12px;padding:0 12px 46px}.logo-mark{width:38px;height:38px;border:1px solid #af9abb;background:linear-gradient(135deg,#fff,#aa91bb 60%,#4b475c);color:#18151e;display:grid;place-items:center;font:25px Georgia;border-radius:8px}.logo strong{display:block;letter-spacing:.19em;font-size:12px}.logo small{display:block;font-size:9px;letter-spacing:.19em;color:#b8aec0;margin-top:5px}.navlabel,.eyebrow{font-size:10px;letter-spacing:.19em;color:var(--accent);font-weight:700}.navlabel{margin:0 12px 15px;color:#7e7c8a}.navitem{width:100%;border:0;background:none;color:#a9a8b4;text-align:left;padding:14px 13px;border-radius:8px;display:flex;justify-content:space-between;margin-bottom:4px}.navitem.active{color:white;background:#2c2935}.navitem span{color:#bca7c7}.sidebar-end{margin-top:auto;border-top:1px solid var(--line);padding:20px 12px 0;color:#85828f;font-size:11px;line-height:1.7}.sidebar-note{font-size:10px;letter-spacing:.1em;color:#dad6df}.sidebar-note small{font-size:10px;color:#898592}.dot{width:6px;height:6px;border-radius:50%;background:#7bb997;display:inline-block;margin-right:8px}.sidebar-end p{font-size:10px}.main{min-width:0}.topbar{height:81px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 37px;background:#15161d}.topbar small{display:block;font-size:9px;letter-spacing:.19em;color:#9c93a4}.topbar strong{font-weight:500;display:block;font-size:15px;margin-top:5px}.topactions,.inline,.buttons{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.pill{border:1px solid #51465a;color:#c8b5cb;font-size:9px;letter-spacing:.13em;border-radius:40px;padding:8px 12px}.btn{padding:10px 15px;border:1px solid #3d3a45;border-radius:6px;background:transparent;color:#eae6ed;font-size:12px;white-space:nowrap}.btn.primary{background:linear-gradient(120deg,#d6c4df,#a793be);border-color:#bfa6cc;color:#211c28;font-weight:700}.btn.outline{background:#22242e}.btn.square{padding:10px 12px}.btn.danger{color:#eca7ad}.content{max-width:1430px;margin:auto;padding:43px clamp(20px,4vw,63px)}.intro{display:flex;justify-content:space-between;gap:25px;align-items:center}.intro h1{font:400 clamp(32px,4vw,52px) 'Playfair Display',Georgia,serif;letter-spacing:-.045em;margin:13px 0}.intro p{color:var(--muted);line-height:1.65}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:35px 0 43px}.metric{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:24px}.metric small{color:var(--muted);font-size:10px;letter-spacing:.14em}.metric strong{display:block;font-size:34px;font-weight:400;margin-top:10px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px}.section-head h2{font-size:20px;font-weight:500}.section-head input{width:260px}.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}.project{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}.project-visual{height:192px;background:radial-gradient(ellipse at 70% 20%,#a896ae99,transparent 35%),linear-gradient(125deg,#24232b 15%,#726079 65%,#b99e9e);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.mini-arch{position:absolute;right:12%;top:19%;width:35%;height:140%;border:16px solid #d5c0bd66;border-radius:150px 150px 0 0;box-shadow:0 0 75px #d6c3c459}.mini-logo{font:28px Georgia,serif;color:white;letter-spacing:-.02em;z-index:1;text-shadow:0 2px 12px #1e1127}.project-stamp{position:absolute;bottom:15px;left:17px;color:#f4edf1bf;font-size:9px;letter-spacing:.17em;text-transform:uppercase}.project-info{padding:22px}.status{color:#c8b1cf;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.project h3{font:25px Georgia;margin:10px 0 3px}.project p{color:var(--muted);font-size:12px;min-height:20px}.project-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;border-top:1px solid var(--line);padding-top:15px}.project-foot small{font-size:9px;color:#92909a;letter-spacing:.14em}.project-foot button{background:transparent;border:0;color:#d9c3e1}.empty{grid-column:1/-1;text-align:center;background:var(--surface);border:1px dashed #474151;padding:75px 20px;border-radius:12px}.empty h3{font:30px Georgia}.empty p{color:var(--muted)}.editor-layout{display:grid;grid-template-columns:365px minmax(0,1fr);height:calc(100vh - 81px)}.editing{overflow-y:auto;border-right:1px solid var(--line);padding:24px;background:#171820}.editor-header h2{font:31px Georgia;margin:8px 0}.editor-meta{color:var(--muted);font-size:12px}.editor-meta span{margin:0 6px}.tabs{display:flex;border-bottom:1px solid var(--line);margin:24px -24px 23px}.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:12px 23px;font-size:12px}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.field{margin-bottom:22px}.field label,.panel-title{font-size:10px;letter-spacing:.14em;font-weight:700;color:#aaa2b1;display:block;margin-bottom:10px}.field .subtle{font-size:9px;float:right;color:#6e6c78}.field input:not([type=color]),.field textarea,.field select,.section-head input,#page-select{width:100%;background:#24252e;border:1px solid #3c3c48;color:var(--text);border-radius:6px;padding:12px;outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:#b9a3c4}.field textarea{resize:vertical}.field input[type=color]{width:100%;height:44px;background:#24252e;border:1px solid #3c3c48}.field .inline select{flex:1;min-width:0}.sections{display:grid;gap:6px;margin-bottom:11px}.section-row{width:100%;display:flex;align-items:center;gap:12px;padding:12px;background:#22232b;border:1px solid #373743;color:white;text-align:left;border-radius:6px;font-size:11px;letter-spacing:.08em}.section-row.selected{border-color:#ab8bb8;background:#302a39}.section-row small{display:block;font-size:11px;color:#a8a1ad;margin-top:5px;letter-spacing:0}.count{color:#ad95b6}.panel-title{margin-top:26px;font-size:11px}.help{color:#8a8792;font-size:11px;line-height:1.6;padding:15px 0}.workspace{background:#21212a;display:flex;flex-direction:column;min-width:0}.workspace-toolbar,.preview-toolbar{padding:13px 22px;background:#171821;border-bottom:1px solid #343441;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.workspace-toolbar>span{font-size:10px;letter-spacing:.15em;color:#aaa3b2}.devices{display:flex;gap:3px;background:#292b35;padding:4px;border-radius:7px}.devices button{border:0;background:none;color:#9994a1;padding:8px 13px;border-radius:4px}.devices button.chosen{background:#50445a;color:white}.frame-wrap{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px;min-height:0}.frame-wrap iframe{display:block;width:100%;height:100%;min-height:550px;border:0;background:white;box-shadow:0 15px 65px #0005;transition:width .2s}.frame-wrap iframe.mobile{width:390px;max-width:100%;flex-shrink:0;min-height:760px;height:95%}.workspace-foot{padding:13px 22px;background:#171821;color:#8f8b97;font-size:11px;display:flex;justify-content:space-between}.preview-page{padding:28px 35px;max-width:1600px;margin:auto}.preview-info{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:22px}.preview-info h2{font:35px Georgia;margin:10px 0}.preview-info p{color:var(--muted);line-height:1.6;max-width:660px}.preview-toolbar{border:1px solid var(--line);border-radius:10px 10px 0 0}.preview-toolbar label{font-size:11px;color:var(--muted)}.preview-toolbar select{margin-left:8px;width:160px}.preview-wrap{background:#252530;min-height:650px;height:70vh;border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px}.preview-wrap iframe{max-width:1100px;height:100%}#toast{position:fixed;bottom:23px;right:25px;background:#eadcef;color:#25202b;padding:14px 19px;border-radius:8px;opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translateY(0)}[hidden]{display:none!important}@media(max-width:1050px){#app{grid-template-columns:80px 1fr}.sidebar{padding:23px 9px}.logo{padding:0 8px 35px}.logo strong,.logo small,.navlabel,.navitem span,.sidebar-end{display:none}.navitem{font-size:10px;padding:13px 8px}.editor-layout{grid-template-columns:310px 1fr}}@media(max-width:720px){#app{display:block}.sidebar{height:auto;position:static;flex-direction:row;gap:5px;padding:10px;align-items:center}.logo{padding:0 8px 0 0}.logo-mark{width:31px;height:31px}.navitem{width:auto;margin:0;padding:12px;font-size:10px}.topbar{height:auto;min-height:65px;padding:14px 16px;gap:10px}.topactions .pill{display:none}.content{padding:30px 17px}.intro,.preview-info{align-items:flex-start;flex-direction:column}.metrics{gap:8px}.metric{padding:13px}.metric strong{font-size:25px}.metric small{font-size:8px}.section-head{flex-direction:column;align-items:stretch}.section-head input{width:100%}.editor-layout{display:flex;flex-direction:column;height:auto}.editing{height:auto;max-height:none;padding:20px}.workspace{height:700px}.frame-wrap{padding:12px}.preview-page{padding:16px}.preview-wrap{height:650px}.workspace-toolbar{padding:11px;gap:8px}.workspace-toolbar>span{display:none}}
/* v0.2 generator workflow */
.generator-page{max-width:1050px}.generator-headline{font:400 clamp(35px,4.8vw,58px) 'Playfair Display',Georgia,serif;letter-spacing:-.04em;margin:14px 0}.generator-sub{color:#aaa2b1;max-width:700px;line-height:1.7;font-size:14px;margin:0 0 26px}.generator-card{background:linear-gradient(125deg,#1c1c26,#1b1c25);border:1px solid #42404c;border-radius:16px;padding:clamp(20px,4vw,34px)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.generator-card .field input:not([type=color]),.generator-card .field textarea,.generator-card .field select{width:100%;background:#25252f;border:1px solid #43404e;color:white;border-radius:7px;padding:14px;outline:none}.generator-card .field input:focus,.generator-card .field select:focus,.generator-card .field textarea:focus{border-color:#bca3cd}.generator-card .field{margin:0 0 14px}.generator-bottom{border-top:1px solid #33323d;margin-top:10px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:15px}.generator-bottom p{font-size:11px;color:#948e9d;line-height:1.6;margin:0}.generator-info{display:flex;gap:18px 32px;flex-wrap:wrap;margin:30px 2px;color:#b2a7ba;font-size:11px}.generator-info strong{color:#e7d9ed;letter-spacing:.13em}.project-search{display:flex;align-items:center;gap:8px}.project-search .btn{flex:none}@media(max-width:700px){.form-grid{grid-template-columns:1fr}.generator-bottom{align-items:stretch;flex-direction:column}.project-search{width:100%}.project-search #search{min-width:0;flex:1}}

.logout-form {display:inline-flex; margin:0} .logout-form button{white-space:nowrap} @media(max-width:750px){.logout-form .btn{padding:8px 10px;font-size:11px}}

/* SILQ v0.4 */
.studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:36px}.studio-card{padding:34px;border:1px solid #4a4351;border-radius:16px;background:linear-gradient(145deg,#24222e,#191a23);min-height:340px}.studio-symbol{font-size:46px;color:#d7b9e0;margin-bottom:24px}.studio-card small{font-size:10px;letter-spacing:.16em;color:#c1b0c8}.studio-card h2{font:36px Georgia,serif;font-weight:400;margin:14px 0}.studio-card p{color:#aaa4b2;line-height:1.7;font-size:14px;max-width:430px}.studio-actions{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.studio-note{border-top:1px solid #49414e;padding-top:18px;color:#a69aaf;font-size:11px}.inspector-page{max-width:1100px}.inspector-panel{border:1px solid #4b4554;background:#1d1d27;border-radius:16px;padding:24px}.drop-zone{border:1px dashed #8c7799;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:38px 15px;cursor:pointer;text-align:center;background:#292431}.drop-zone strong{font-size:19px;font-weight:500}.drop-zone span:last-of-type{font-size:11px;color:#a9a0b2}.drop-icon{font-size:42px;color:#dfc4e6}.drop-zone input{width:min(100%,320px);font-size:12px;color:#c6b9d0;margin-top:10px}.inspection-empty{padding:26px 10px;text-align:center;color:#9b93a5;font-size:13px}.inspection-result{padding:26px 0}.inspection-result h2{font:28px Georgia,serif;overflow-wrap:anywhere}.inspection-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.inspection-stats>div{background:#292833;border:1px solid #484351;border-radius:8px;padding:15px;overflow-wrap:anywhere}.inspection-stats small{display:block;color:#a89db0;font-size:9px;letter-spacing:.1em;margin-bottom:8px}.inspection-stats strong{font-size:13px;font-weight:500}.inspection-result h3{font-size:12px;font-weight:500}.hex-view{overflow:auto;max-height:430px;background:#111219;border:1px solid #44404c;border-radius:8px;padding:18px;color:#d6c4dd;font-size:11px;line-height:1.8}.inspection-hint,.inspector-disclaimer{color:#a8a0af;font-size:12px;line-height:1.7;margin-top:20px}@media(max-width:720px){.studio-grid{grid-template-columns:1fr}.studio-card{min-height:0;padding:24px}.inspection-stats{grid-template-columns:1fr}.inspector-panel{padding:13px}.hex-view{font-size:9px}}
