:root{--color-primary:#1f4e79;--color-accent:#2e75b6;--color-accent-light:#6ba4dc;--color-background:#fff;--color-surface:#f5f7fa;--color-text-strong:#1f4e79;--color-text-body:#2a3340;--color-text-muted:#5a6b7b;--color-text-on-primary:#fff;--color-border:#d6dee7;--color-border-strong:#a9b8c7;--color-success:#2e7d5b;--color-warning:#b7791f;--color-error:#c0392b;--color-info:#2e75b6;--color-success-bg:#e7f2ec;--color-warning-bg:#fbf1e0;--color-error-bg:#f8e7e4;--color-info-bg:#e9f1f9;--font-sans:"Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;--fw-regular:400;--fw-medium:500;--fw-bold:700;--fs-heading:24px;--fs-body:16px;--fs-small:14px;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--radius-sm:2px;--radius-md:6px;--radius-lg:12px;--radius-full:9999px;--touch-min:44px;font-family:var(--font-sans);color:var(--color-text-body);font-size:var(--fs-body)}*{box-sizing:border-box}body{background:var(--color-surface);margin:0}button:not(:disabled){cursor:pointer}input[type=checkbox],input[type=radio]{accent-color:var(--color-primary)}.nav button,.picker button,.tyokalut button,.lataa-rivi button,.lataa-rivi input,.dia-rivi button,.oikea .napit button,.vaihe,.status-rivi,.klippi,.keskus input,.oikea select{min-height:var(--touch-min)}.shell{flex-direction:column;min-height:100vh;display:flex}.topbar{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);background:var(--color-background);border-bottom:1px solid var(--color-border);flex-wrap:wrap;display:flex}.topbar strong{color:var(--color-text-strong);font-weight:var(--fw-bold);font-size:var(--fs-body)}.muted{color:var(--color-text-muted);font-size:var(--fs-small)}.stage{align-items:center;gap:var(--space-lg);padding:var(--space-xl);flex-direction:column;flex:1;display:flex}.picker{gap:var(--space-sm);flex-wrap:wrap;max-width:960px;display:flex}.picker button{padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-border);background:var(--color-background);border-radius:var(--radius-full);font-size:var(--fs-small);color:var(--color-text-body)}.picker button.on{background:var(--color-primary);color:var(--color-text-on-primary);border-color:var(--color-accent)}.nav{gap:var(--space-sm);flex-wrap:wrap;margin-left:auto;display:flex}.nav button{padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-border);background:var(--color-background);border-radius:var(--radius-md);font-size:var(--fs-body);color:var(--color-text-body)}.nav button.on{background:var(--color-primary);color:var(--color-text-on-primary);border-color:var(--color-accent)}.uloskirjaus{padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text-body);border-radius:var(--radius-md);font-size:var(--fs-small);min-height:var(--touch-min)}.editori{padding:var(--space-xl);width:100%;max-width:900px;margin:0 auto}.lataa-rivi{gap:var(--space-sm);display:flex}.lataa-rivi input{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-body);color:var(--color-text-body)}.lataa-rivi button{padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-accent);background:var(--color-primary);color:var(--color-text-on-primary);border-radius:var(--radius-md);font-size:var(--fs-body)}.diat{margin-top:var(--space-lg);gap:var(--space-lg);flex-direction:column;display:flex}.dia-rivi{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.dia-otsikko{margin-bottom:var(--space-sm);color:var(--color-text-strong)}.dia-rivi textarea{width:100%;font:inherit;font-size:var(--fs-body);padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical}.dia-rivi button{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--color-accent);background:var(--color-background);color:var(--color-primary);border-radius:var(--radius-md)}.dia-rivi button:disabled{opacity:.5;cursor:default}.kirjautuminen{min-height:100vh;padding:var(--space-xl);background:var(--color-surface);justify-content:center;align-items:center;display:flex}.kirjautuminen-kortti{gap:var(--space-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:380px;padding:var(--space-xl);flex-direction:column;display:flex;box-shadow:0 8px 30px #1f4e791a}.kirjautuminen-otsikko{font-size:var(--fs-heading);font-weight:var(--fw-bold);color:var(--color-text-strong)}.kirjautuminen .kentta{gap:var(--space-xs);flex-direction:column;display:flex}.kirjautuminen .kentta input{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-body);color:var(--color-text-body);min-height:var(--touch-min)}.kirjautuminen .kentta input:focus{outline:2px solid var(--color-accent);border-color:var(--color-accent)}.kirjautuminen button[type=submit]{padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-accent);background:var(--color-primary);color:var(--color-text-on-primary);border-radius:var(--radius-md);font-size:var(--fs-body);min-height:var(--touch-min);margin-top:var(--space-xs)}.kirjautuminen button[type=submit]:disabled{opacity:.5;cursor:default}.studio{background:var(--color-border);flex:1;grid-template-columns:220px minmax(0,1fr) 340px;gap:1px;min-height:0;display:grid}.studio>*{background:var(--color-surface);min-width:0;overflow:auto}.vasen{padding:var(--space-lg)}.lohko{margin-bottom:var(--space-xl)}.lohko-otsikko{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:var(--space-sm)}.vaihe{text-align:left;width:100%;font:inherit;font-size:var(--fs-body);color:var(--color-text-body);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:0 0;border:none;display:block}.vaihe:hover{background:var(--color-info-bg)}.vaihe.on{background:var(--color-info-bg);color:var(--color-primary);font-weight:var(--fw-bold)}.status-rivi{align-items:center;gap:var(--space-sm);text-align:left;width:100%;font:inherit;color:inherit;padding:var(--space-sm);border-radius:var(--radius-md);font-size:var(--fs-small);background:0 0;border:none;display:flex}.status-rivi:hover,.status-rivi.valittu{background:var(--color-info-bg)}.merkki{flex:none;width:12px;height:12px}.merkki.ok{background:var(--color-success);border-radius:50%}.merkki.dirty{background:var(--color-accent);transform:rotate(45deg)}.merkki.varoitus{background:var(--color-warning);clip-path:polygon(50% 0,100% 100%,0 100%)}.merkki.virhe{background:var(--color-error)}.keskus{padding:var(--space-lg);gap:var(--space-md);flex-direction:column;display:flex}.keskus .lataa-rivi input{flex:1}.esikatselu{border-radius:var(--radius-md);background:#000}.tyhja{aspect-ratio:16/9;color:var(--color-text-on-primary);opacity:.5;justify-content:center;align-items:center;display:flex}.aikajana{gap:var(--space-xs);flex-wrap:wrap;display:flex}.klippi{border:1px solid var(--color-border);background:var(--color-background);border-radius:var(--radius-sm);width:44px;font-size:var(--fs-small);color:var(--color-text-body)}.klippi.t-dirty{border-color:var(--color-accent);background:var(--color-info-bg)}.klippi.t-varoitus{border-color:var(--color-warning);background:var(--color-warning-bg)}.klippi.t-virhe{border-color:var(--color-error);background:var(--color-error-bg)}.klippi.valittu{outline:2px solid var(--color-accent)}.oikea{padding:var(--space-lg)}.oikea textarea{width:100%;font:inherit;font-size:var(--fs-small);padding:var(--space-sm);margin-top:var(--space-xs);border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical}.oikea .napit{gap:var(--space-sm);margin-top:var(--space-sm);display:flex}.oikea .napit button{padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-accent);background:var(--color-primary);color:var(--color-text-on-primary);border-radius:var(--radius-md)}.oikea .napit button.toissij{background:var(--color-background);color:var(--color-primary)}.oikea .napit button:disabled{opacity:.5;cursor:default}.tyokalut{gap:var(--space-sm);flex-wrap:wrap;align-items:center;display:flex}.tyokalut button{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);background:var(--color-background);border-radius:var(--radius-md);font-size:var(--fs-small);color:var(--color-text-body)}.tyokalut button:disabled{opacity:.5;cursor:default}.kytkin{align-items:center;gap:var(--space-sm);font-size:var(--fs-small);cursor:pointer;min-height:var(--touch-min);display:flex}.opaste{background:var(--color-info-bg);border:1px solid var(--color-accent-light);border-radius:var(--radius-md);padding:var(--space-md);font-size:var(--fs-small);color:var(--color-primary)}.selite{gap:var(--space-lg);font-size:var(--fs-small);color:var(--color-text-muted);flex-wrap:wrap;align-items:center;display:flex}.selite>span{align-items:center;gap:var(--space-xs);display:flex}.lisa{margin-top:var(--space-lg);font-size:var(--fs-small);border-top:1px solid var(--color-border);padding-top:var(--space-md)}.lisa summary{cursor:pointer;color:var(--color-primary)}.lisa>div,.lisa>label{margin-top:var(--space-sm)}.paletti-tausta{z-index:50;background:#1f4e7959;justify-content:center;align-items:flex-start;padding-top:12vh;display:flex;position:fixed;inset:0}.paletti{background:var(--color-background);border-radius:var(--radius-lg);width:520px;max-width:90vw;overflow:hidden;box-shadow:0 12px 40px #1f4e7940}.paletti input{border:none;border-bottom:1px solid var(--color-border);width:100%;padding:var(--space-lg);font-size:var(--fs-body);outline:none}.paletti ul{padding:var(--space-xs);max-height:320px;margin:0;list-style:none;overflow:auto}.paletti li{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--fs-body);cursor:pointer}.paletti li:hover{background:var(--color-info-bg)}.render-linkki{color:var(--color-primary);font-size:var(--fs-small);font-weight:var(--fw-bold);text-decoration:none}.render-linkki:hover{text-decoration:underline}@media (width<=700px){.topbar{flex-wrap:wrap}.nav{flex-wrap:wrap;width:100%;margin-left:0}.studio{grid-template-columns:1fr}.tyokalut{flex-wrap:wrap}.stage{padding:var(--space-lg)}}