/* Silta Studio: asiakkaan näkymä digisilta.fi:n ilmeellä (DigiSilta X -teeman tokenit). */
:root{
  /* CRM:n design system (DigiSilta Myyntijärjestelmä / digisilta-tokens.css) */
  --paper:#f4f3f7;--paper-2:#ebe9f1;--card:#fff;--ink:#1d1326;--muted:#5f6672;--faint:#626975;
  --line:#e5e7eb;--line-strong:#d5d8dc;--pink:#fa2176;--pink-hover:#b8104f;
  /* Kontrasti (raportti 04 L13 ja L15): --pink vain koristeisiin ja isoihin otsikoihin, --pink-ink tekstiin (4,5:1 kaikilla pinnoilla),
     --pink-fill täyttöön valkoisen tekstin alla (5,0:1). Tilavärit tekstinä --ok-ink, --err-ink, --warn-ink. */
  --pink-ink:#c8104f;--pink-fill:#d9135c;--ok-ink:#047857;--err-ink:#b42318;--warn-ink:#a14a06;--pink-soft:rgba(250,33,118,.08);
  --violet:#fa2176;--peach:#ff7ab0;--grad:#fa2176;--dark:#1d1326;--dark-2:#2a1d36;--on-dark:#f5f3f8;--on-dark-muted:#b8b0c4;
  --font-display:'Outfit','Inter',system-ui,sans-serif;--font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --r-sm:10px;--r-md:14px;--r-lg:18px;
  --ok-soft:#ecfdf5;--warn-soft:#fffbeb;--tint-pink:#fff4f8;--err-soft:#fef2f2;--kupla-oma:#ebe9f1;--valittu:#1d1326;--valittu-teksti:#fff;--merkki:#1d1326;--merkki-teksti:#fff;--shadow-card:0 1px 3px rgba(0,0,0,.04);--shadow-pop:0 12px 30px rgba(29,19,38,.12);--ease:cubic-bezier(.2,0,0,1)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.grad-text{color:var(--pink-ink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
/* Piilotetun valintakentän (chip, segmentti, kytkin) fokus näkyy sen kuvassa (raportti 04 L5). */
.chip input:focus-visible+span,.chip-radio input:focus-visible+span,.seg input:focus-visible+span,.toggle input:focus-visible+span,label.chip:has(>input:focus-visible){outline:3px solid var(--pink);outline-offset:2px}

/* Ylätunniste */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:30px;width:auto}
.brand span{font:700 15px/1 var(--font-display);padding:5px 10px;border-radius:999px;background:var(--pink-fill);color:#fff;letter-spacing:.01em}
.top-actions{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}

/* Napit */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:10px;border:0;font:600 14px/1 var(--font-body);text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background-color .15s;white-space:nowrap}
.btn-primary{background:var(--pink-fill);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--pink-hover)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
.link{color:var(--pink-ink);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

/* Etusivu */
.hero{padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,88px)}
.hero h1{font-size:clamp(40px,6.4vw,78px);max-width:16ch}
.hero .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:56ch;margin:22px 0 32px}
.hero-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vw,72px)}
.hero-step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;box-shadow:var(--shadow-card)}
.hero-step b{display:block;font:700 15px/1 var(--font-display);background:var(--grad);-webkit-background-clip:text;color:transparent;margin-bottom:12px}
.hero-step h3{font-size:19px;margin-bottom:6px}
.hero-step p{color:var(--muted);font-size:15px;margin:0}
@media (max-width:860px){.hero-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hero-steps{grid-template-columns:minmax(0,1fr)}}

/* Polun runko */
.flow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,48px);padding:clamp(28px,4vw,48px) 0 80px}
.steps{position:sticky;top:92px;align-self:start;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s}
.steps a,.steps span{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;text-decoration:none;color:var(--faint);font-weight:500;font-size:15px}
.steps a::before,.steps span::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;font-size:12.5px;font-weight:700;flex-shrink:0}
.steps a{color:var(--ink)}
.steps a:hover{background:var(--paper-2)}
.steps .done a::before{background:var(--merkki);border-color:var(--merkki);color:var(--merkki-teksti)}
.steps .current a{background:var(--card);box-shadow:var(--shadow-card);color:var(--ink)}
.steps .current a::before{background:var(--pink-fill);border-color:transparent;color:#fff}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}.steps{position:static;display:flex;overflow-x:auto;gap:4px;padding-bottom:6px}.steps a,.steps span{white-space:nowrap}}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:clamp(20px,3vw,32px)}
.panel+.panel{margin-top:20px}
.step-eyebrow{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:10px}
.panel h1{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px}
.panel .intro{color:var(--muted);font-size:15.5px;max-width:62ch;margin-bottom:28px}
.panel h2{font-size:21px;margin:30px 0 12px}

/* Lomakkeet */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.grid2{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label,.label{font-weight:600;font-size:15px}
.field .hint{font-size:14px;color:var(--muted);margin-top:-2px}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]),textarea,select{width:100%;font:15px/1.5 var(--font-body);color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
textarea{min-height:110px;resize:vertical}
.inline{display:flex;gap:10px;align-items:stretch}
.inline input{flex:1}
.err{color:#b4123f;font-size:14.5px;font-weight:600}
.ok-note{color:#11734b;font-size:14.5px;font-weight:600}
.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}

/* Valintakortit */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.choices{grid-template-columns:minmax(0,1fr)}}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .c{display:block;height:100%;border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:20px;background:var(--card);transition:border-color .15s,box-shadow .15s}
.choice .c b{display:block;font:700 19px/1.2 var(--font-display);margin-bottom:6px}
.choice .c small{display:block;color:var(--muted);font-size:14.5px;line-height:1.5}
.choice input:checked+.c{border-color:transparent;box-shadow:0 0 0 2px var(--pink),var(--shadow-pop)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0}
.chip span{display:inline-flex;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:500;background:var(--card)}
.chip input:checked+span{background:var(--valittu);color:var(--valittu-teksti);border-color:var(--valittu)}

/* Löydökset ja kuvat */
.found{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.found{grid-template-columns:minmax(0,1fr)}}
.stat{background:var(--paper);border-radius:var(--r-md);padding:18px}
.stat b{display:block;font:700 28px/1 var(--font-display)}
.stat span{color:var(--muted);font-size:14.5px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:12px;border:1px solid var(--line)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.thumb{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb input{position:absolute;top:8px;left:8px;width:20px;height:20px;accent-color:var(--pink)}
.thumb .src{position:absolute;right:6px;bottom:6px;font-size:11px;background:rgba(14,18,48,.75);color:#fff;padding:2px 7px;border-radius:999px}
.drop{border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:26px;text-align:center;color:var(--muted);background:var(--paper)}
.drop.is-over{border-color:var(--pink);background:var(--tint-pink)}
.phone-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:var(--paper);border-radius:var(--r-md);padding:20px}
.phone-box img{width:150px;height:150px;border-radius:10px;background:var(--card);padding:6px}
@media (max-width:560px){.phone-box{grid-template-columns:minmax(0,1fr)}}

/* Demot */
.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.demos{grid-template-columns:minmax(0,1fr)}}
.demo{border:1.5px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.demo .frame{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.demo iframe{position:absolute;top:0;left:0;width:1440px;height:1920px;border:0;transform:scale(var(--s,.25));transform-origin:0 0;pointer-events:none}
.demo .meta{padding:16px 18px;display:grid;gap:10px}
.demo .meta b{font:700 18px/1.2 var(--font-display)}
.demo .meta small{color:var(--muted)}
.demo.is-chosen{border-color:transparent;box-shadow:0 0 0 2px var(--pink),var(--shadow-pop)}
.waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;color:var(--muted);text-align:center;padding:20px}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--pink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Rakenne */
.pages-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pages-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.pages-list .n{font:700 14px/1.6 var(--font-display);color:var(--pink-ink)}
.pages-list b{display:block}
.pages-list small{color:var(--muted)}

/* Paketit */
.packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.packages{grid-template-columns:minmax(0,1fr)}}
.price{font:800 34px/1 var(--font-display);margin:10px 0 4px}

/* Rakennus ja loki */
.progress{height:10px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad);width:var(--p,0%);transition:width .6s var(--ease)}
.log{font:13.5px/1.6 ui-monospace,Menlo,monospace;background:var(--dark);color:var(--on-dark-muted);border-radius:var(--r-md);padding:16px 18px;max-height:340px;overflow:auto;white-space:pre-wrap}

/* Muokkaus */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:stretch}
@media (max-width:1100px){.editor{grid-template-columns:minmax(0,1fr)}}
.site-frame{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card);min-height:70vh}
.site-frame iframe{width:100%;height:100%;min-height:70vh;border:0}
.chat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);min-height:70vh}
.chat-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:92%;padding:10px 14px;border-radius:16px;font-size:15px}
.msg.asiakas{align-self:flex-end;background:var(--ink);color:var(--card);border-bottom-right-radius:4px}
.msg.studio{align-self:flex-start;background:var(--paper-2);border-bottom-left-radius:4px}
.msg.digisilta{align-self:flex-start;background:var(--tint-pink);border:1px solid #ffd0e2}
.chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat textarea{min-height:52px;height:52px}

/* Julkaisu */
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.check i{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:#fff;background:#1e9e5a}
.check.warn i{background:#d18a00}
.check.fail i{background:#c62850}

.note{background:var(--paper-2);border-radius:14px;padding:14px 16px;color:var(--muted);font-size:15px}
.footer{padding:40px 0;color:var(--faint);font-size:14px;text-align:center}

.credit-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-weight:600;font-size:13px;text-decoration:none}
.credit-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px 6px}
.tbl td{border-top:1px solid var(--line);padding:9px 6px;vertical-align:top}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.plus{color:var(--ok-ink)}.minus{color:var(--err-ink)}
@media (max-width:760px){.top-actions .link{display:none}}

input[type=color]{width:100%;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--paper);cursor:pointer}

/* ---------- Tarinallinen aloitus ---------- */
.story{min-height:calc(100vh - 69px);display:flex;flex-direction:column;background:radial-gradient(70% 60% at 85% 0%,rgba(255,15,111,.08),transparent 70%),radial-gradient(60% 60% at 0% 100%,rgba(75,42,168,.08),transparent 70%),var(--paper)}
.story-top{position:sticky;top:69px;z-index:5;display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,32px);max-width:1000px;width:100%;margin:0 auto}
.story-progress{flex:1;height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden;order:2}
.story-progress i{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .5s var(--ease)}
.story-back{order:1;background:none;border:0;font:600 15px var(--font-body);color:var(--muted);cursor:pointer;padding:8px 0}
.story-back:hover{color:var(--ink)}
.story-found{order:3;font-size:13.5px;font-weight:600;color:var(--pink-ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.story-found.is-busy::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--pink);margin-right:8px;vertical-align:-1px;animation:spin 1s linear infinite}
.story-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px) clamp(16px,4vw,32px) 80px}
.scene{width:100%;max-width:780px;animation:sceneIn .45s var(--ease) both}
.scene.leaving{animation:sceneOut .22s ease both}
@keyframes sceneIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sceneOut{to{opacity:0;transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.scene,.scene.leaving{animation:none}}
.scene .kicker{font:700 13px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:16px}
.scene h1{font-size:clamp(32px,5vw,54px);margin-bottom:14px}
.scene .lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch;margin-bottom:30px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.tile{position:relative;text-align:left;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--card);cursor:pointer;font:inherit;color:inherit;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--ink)}
.tile .emoji{font-size:30px;line-height:1}
.tile b{font:700 20px/1.2 var(--font-display)}
.tile small{color:var(--muted);font-size:15px;line-height:1.45}
.tile.is-on{border-color:transparent;box-shadow:0 0 0 2px var(--pink),var(--shadow-pop)}
.tile.is-on::after{content:"✓";position:absolute;top:14px;right:16px;width:26px;height:26px;border-radius:50%;background:var(--pink-fill);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.big-input{width:100%;font:600 clamp(20px,2.6vw,26px)/1.3 var(--font-body)!important;padding:18px 20px!important;border-radius:16px!important;background:var(--card)!important}
.big-area{min-height:150px;font-size:18px!important;background:var(--card)!important}
.results{display:grid;gap:10px;margin-top:14px}
.result{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,transform .15s}
.result:hover{border-color:var(--ink);transform:translateX(3px)}
.result b{font-size:17px}
.result small{color:var(--muted)}
.chips.big .chip span{padding:12px 18px;font-size:16px}
/* Valintachip (label > input + span): yleinen .chip-tieto-pilleri ei saa kehystää sitä toiseen kertaan (tavoitteet, aloitustarina). */
.chips.big .chip{padding:0;background:none;border:0;white-space:normal;max-width:100%}
.chip-add{display:flex;gap:8px;margin-top:14px;max-width:420px}
.scene-actions{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.skip{background:none;border:0;color:var(--muted);font:600 15px var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mood{padding:0;overflow:hidden}
.mood .sw{height:74px;display:flex}
.mood .sw i{flex:1}
.mood .tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.mood .tx b{font-size:19px}
.reveal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 6px}
@media (max-width:640px){.reveal{grid-template-columns:minmax(0,1fr)}}
.reveal .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;animation:sceneIn .5s var(--ease) both}
.reveal .card:nth-child(2){animation-delay:.12s}.reveal .card:nth-child(3){animation-delay:.24s}
.reveal .card b{display:block;font:800 30px/1 var(--font-display)}
.reveal .card span{color:var(--muted);font-size:14.5px}
.reveal-imgs{display:flex;gap:8px;margin-top:12px}
.reveal-imgs img{width:72px;height:56px;object-fit:cover;border-radius:10px}
.typing::after{content:"▍";animation:blink 1s steps(1) infinite;color:var(--pink-ink);margin-left:2px}
@keyframes blink{50%{opacity:0}}


/* ---------- Sovelluskuori (CRM / Lovable): sivupalkki + työalue ---------- */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:14px 12px;background:var(--card);border-right:1px solid var(--line)}
.side .brand{display:flex;align-items:center;gap:8px;padding:6px 8px 14px;text-decoration:none}
.side .brand img{height:22px}
.side .brand span{font:700 9px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;background:var(--pink-fill);color:#fff;padding:3px 7px;border-radius:999px}
.side .new{width:100%;justify-content:flex-start}
.side-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:14px 10px 4px}
.side-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px}
.side-item{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:13.5px}
.side-item small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item span{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-item:hover{background:var(--paper)}
.side-item.is-active{background:var(--pink-soft)}
.side-item.is-active span{color:var(--pink-ink)}
.side-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.side-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:13.5px;font-weight:500;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left}
.side-link:hover{background:var(--paper);color:var(--ink)}
.work{min-width:0;display:flex;flex-direction:column;overflow-x:clip} /* hehkut ja leveät rivit eivät levitä sivua vaakasuunnassa */
.work-top{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:12px;padding:0 20px;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.work-top h1,.work-top .work-top-otsikko{font-size:15px;font-weight:600;font-family:var(--font-body);line-height:1.15;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.work-top .grow{flex:1}
.work-body{flex:1;padding:24px;max-width:1240px;width:100%;margin:0 auto}
/* Pääsisältö maamerkkinä (Sisaltoalue::kaari): kääre käyttäytyy kuten .work, jotta näkymien flex:1 toimii ennallaan. */
.work-main{flex:1;display:flex;flex-direction:column;min-width:0}
.embed-body > .work-main{display:block}
#sisalto:focus{outline:none}
/* Ohituslinkki "Siirry sisältöön": näkyy vain näppäimistöllä fokusoituna. */
.skip-link{position:fixed;left:12px;top:-100px;z-index:1100;padding:10px 16px;border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-weight:600;text-decoration:none;box-shadow:var(--shadow-pop)}
.skip-link:focus{top:12px}
.side-toggle{display:none}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* Suljettuna piilossa myös Tabilta ja ruudunlukijalta: visibility vaihtuu vasta liukuman jälkeen. */
  .side{position:fixed;inset:0 auto 0 0;width:280px;z-index:60;transform:translateX(-100%);visibility:hidden;transition:transform .2s var(--ease),visibility 0s linear .2s;box-shadow:var(--shadow-pop)}
  .side-open .side{transform:none;visibility:visible;transition:transform .2s var(--ease),visibility 0s}
  .side-toggle{display:inline-flex}
}
/* Matala näkymä (puhelin, 44 px:n kosketusrivit): kiinteät rivit vievät koko korkeuden, ja oma vieritys kutisti
   projektilistan 0 px:iin (QA 13.10.2026). Silloin koko sivupalkki vierii ja lista näyttää kaikki rivinsä. */
@media (max-width:900px),(max-height:600px){
  .side{overflow-y:auto;overscroll-behavior:contain}
  .side-list{flex:1 0 auto;overflow-y:visible}
}
/* Vaiheet ohuena palkkina työalueen yläreunassa */
.flow{display:block;padding:0}
.steps{position:static;display:flex;gap:4px;overflow-x:auto;padding:0 0 14px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.steps a,.steps span{white-space:nowrap;padding:6px 10px;font-size:13px}
.steps a::before,.steps span::before{width:20px;height:20px;font-size:11px}
.steps .current a{box-shadow:none;background:var(--pink-soft);color:var(--pink-ink)}
.steps .current a::before{background:var(--pink)}

/* Muokkaus: chat vasemmalla, esikatselu oikealla (Lovable) */
.studio-edit{display:grid;grid-template-columns:400px minmax(0,1fr);height:calc(100vh - 56px)}
.studio-edit .chat{border:0;border-right:1px solid var(--line);border-radius:0;min-height:0;height:100%}
.preview-pane{display:flex;flex-direction:column;min-width:0;background:var(--paper-2)}
.preview-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.preview-url{flex:1;font-size:12.5px;color:var(--muted);background:var(--paper);border-radius:8px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-flex;background:var(--paper);border-radius:9px;padding:3px}
.seg button{border:0;background:none;padding:5px 10px;border-radius:7px;font:500 12.5px var(--font-body);color:var(--muted);cursor:pointer}
.seg button.is-on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-card)}
.preview-stage{flex:1;display:flex;justify-content:center;overflow:auto;padding:16px}
.preview-stage iframe{width:100%;height:100%;border:0;background:var(--card);border-radius:10px;box-shadow:var(--shadow-card);transition:width .25s var(--ease)}
.preview-stage.is-mobile iframe{width:390px}
.msg.asiakas{background:var(--ink)}
.msg.studio{background:var(--paper)}
.chat-log{padding:18px}
.chat form{flex-direction:column}
.chat textarea{min-height:72px;height:auto;resize:none}
.chat .send-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.thinking{align-self:flex-start;color:var(--muted);font-size:13.5px}
.thinking::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--pink);margin-right:8px;vertical-align:-1px;animation:spin 1s linear infinite}
@media (max-width:1000px){.studio-edit{grid-template-columns:minmax(0,1fr);height:auto}.studio-edit .chat{height:60vh;border-right:0;border-bottom:1px solid var(--line)}.preview-stage{min-height:70vh}}

/* Tarina CRM-ilmeellä */
.story{min-height:calc(100vh - 56px);background:var(--paper)}
.story-top{top:56px}
.scene h1{font-weight:600}
.tile{border:1px solid var(--line-strong);border-radius:14px}
.tile.is-on{box-shadow:0 0 0 2px var(--pink)}
.tile.is-on::after{background:var(--pink)}
.story-progress i{background:var(--pink)}

/* Etusivu: kehote (Lovable) ja projektikortit */
.hero-prompt{max-width:760px;margin:clamp(24px,7vh,80px) auto 0;text-align:center}
.hero-prompt h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:8px}
.prompt-box{display:flex;gap:8px;margin-top:20px;padding:8px;background:var(--card);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow-pop)}
.prompt-box input{border:0!important;box-shadow:none!important;font-size:17px!important;padding:12px 14px!important;background:transparent!important}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s}
.pcard:hover{box-shadow:var(--shadow-pop);transform:translateY(-2px)}
.pcard-thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--pink-soft),var(--paper-2));overflow:hidden;display:flex;align-items:center;justify-content:center}
.pcard-thumb span{font:600 44px/1 var(--font-display);color:var(--pink-ink)}
.pcard-thumb iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform:scale(.205);transform-origin:0 0;pointer-events:none}
.pcard-body{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pcard-body small{color:var(--muted);font-size:12.5px}
/* Tasokortit */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.plan.is-featured{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.plan.is-current{background:var(--paper)}
.plan h3{font-size:18px}
.plan-price{font:600 32px/1 var(--font-display);margin:4px 0}
.plan-price small{font:500 13px var(--font-body);color:var(--muted)}
.plan ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px;font-size:14px;flex:1}
.plan li::before{content:"✓";color:var(--pink-ink);font-weight:700;margin-right:8px}
.plan-badge{position:absolute;top:-10px;right:16px;background:var(--pink-fill);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.stat b{font-size:22px}

.ai-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}

.byok-toggle{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--card);font-size:14px;cursor:pointer}
.byok-toggle input{margin-top:3px;accent-color:var(--pink)}

.demo .frame iframe{transition:opacity .35s}
.demo .waiting.is-drawing{position:absolute;inset:auto 10px 10px auto;height:auto;flex-direction:row;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(29,19,38,.82);color:#fff;font-size:13px;z-index:2}
.demo .waiting.is-drawing .spinner{width:14px;height:14px;border-width:2px}
.demo .waiting.is-drawing p{margin:0}

/* Ikonit ja profiilivalikko */
.ikoni{flex:none;vertical-align:-3px}
.btn .ikoni{margin:0 -2px}
.side .new{gap:8px}
.side-ico{display:inline-flex;align-items:center;gap:8px}
.side-foot{gap:6px}
.me-menu{position:relative}
.me-menu summary{list-style:none}
.me-menu summary::-webkit-details-marker{display:none}
/* .me rajattu käyttäjävalikkoon: chatin omat viestit ovat myös .me (.cmsg.me) ja perivät muuten user-select:none:n ja hover-taustan. */
.me-menu .me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;cursor:pointer;user-select:none}
.me-menu .me:hover,.me-menu[open] .me{background:var(--paper)}
.avatar{width:34px;height:34px;flex:none;border-radius:50%;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--pink),#7b2ff7);color:#fff;font:700 13px/1 var(--font-display);letter-spacing:.02em;object-fit:cover}
.me-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.me-txt b{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-txt small{font-size:12px;color:var(--muted)}
.me-chev{color:var(--faint)}
.me-pop{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:1px;z-index:70}
.me-pop a,.me-pop button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font:500 13.5px/1.2 var(--font-body);background:none;border:0;cursor:pointer;width:100%;text-align:left}
.me-pop a:hover,.me-pop button:hover{background:var(--paper)}
.me-pop .ikoni{color:var(--muted)}
.me-pop hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.me-pop button:hover,.me-pop button:hover .ikoni{color:var(--pink-ink)}
.me-mail{margin:0;padding:6px 10px 8px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Rakennusvaihe */
.build-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;margin-top:22px;align-items:start}
@media (max-width:900px){.build-grid{grid-template-columns:minmax(0,1fr)}}
.build-now{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);margin-bottom:14px}
.build-now b{font-weight:600}
.build-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;white-space:nowrap}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--pink);flex:none;position:relative}
.build-now.is-busy .pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pink);animation:ping 1.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.flash{animation:flash .6s var(--ease)}
@keyframes flash{0%{opacity:.2;transform:translateY(4px)}100%{opacity:1;transform:none}}
.progress-live{height:12px;position:relative}
.progress-live i{transition:width 1.2s var(--ease)}
.progress-live.is-busy i{background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%),var(--grad);background-size:22px 22px,100% 100%;animation:stripes .9s linear infinite}
@keyframes stripes{to{background-position:22px 0,0 0}}
.build-pct{margin:8px 0 18px;color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.stages,.page-ticks{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.stages li,.page-ticks li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--faint);transition:color .3s,background .3s}
.stages .dot,.page-ticks .dot{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--line-strong);color:transparent;transition:all .3s var(--ease)}
.stages li.is-done,.page-ticks li.is-done{color:var(--ink)}
.stages li.is-done .dot,.page-ticks li.is-done .dot{background:var(--pink-fill);border-color:var(--pink);color:#fff}
.stages li.is-now{color:var(--ink);font-weight:600;background:var(--pink-soft)}
.stages li.is-now .dot{border-color:var(--pink);border-top-color:transparent;animation:spin .9s linear infinite}
.page-ticks{margin-top:14px;font-size:14px}
.page-ticks li{padding:6px 8px}
.page-ticks li.pop .dot{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.mock{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-pop)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.mock-bar span{margin-left:8px;font-size:11.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-body{padding:14px;display:grid;gap:10px}
.mk{border-radius:8px;background:var(--paper-2)}
.mk.hero{height:86px;background:linear-gradient(120deg,var(--pink-soft),var(--paper-2))}
.mk.row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:none}
.mk.row.two{grid-template-columns:1.4fr 1fr}
.mk.row b{height:48px;border-radius:8px;background:var(--paper-2)}
.mk.line{height:10px;width:80%}.mk.line.s{width:55%}
.mk.foot{height:26px;background:var(--dark);opacity:.85}
.mock.is-busy .mk,.mock.is-busy .mk.row b{position:relative;overflow:hidden;animation:build-in 6s var(--ease) infinite both}
.mock.is-busy .mk:nth-child(2){animation-delay:.6s}.mock.is-busy .mk:nth-child(3){animation-delay:1.2s}.mock.is-busy .mk:nth-child(4){animation-delay:1.6s}.mock.is-busy .mk:nth-child(5){animation-delay:2.2s}.mock.is-busy .mk:nth-child(6){animation-delay:2.8s}
.mock.is-busy .mk.row b:nth-child(2){animation-delay:.9s}.mock.is-busy .mk.row b:nth-child(3){animation-delay:1.1s}
@keyframes build-in{0%{opacity:0;transform:translateY(8px) scale(.98)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
.mock.is-busy .mk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:shimmer 1.8s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.mock.is-busy .mk,.mock.is-busy .mk::after,.progress-live.is-busy i,.build-now.is-busy .pulse::after,.stages li.is-now .dot{animation:none}}

/* Lomakkeiden elävyys */
.panel{animation:panel-in .45s var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel > *{animation:rise .5s var(--ease) both}
.panel > :nth-child(2){animation-delay:.04s}.panel > :nth-child(3){animation-delay:.08s}.panel > :nth-child(4){animation-delay:.12s}.panel > :nth-child(5){animation-delay:.16s}.panel > :nth-child(6){animation-delay:.2s}.panel > :nth-child(7){animation-delay:.24s}.panel > :nth-child(n+8){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.field input,.field textarea,.field select{transition:border-color .2s,box-shadow .2s,background-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 4px var(--pink-soft)}
.field:focus-within > label{color:var(--pink-ink)}
.btn-primary .ikoni:last-child{transition:transform .2s var(--ease)}
.btn-primary:hover .ikoni:last-child{transform:translateX(3px)}
.pages-list li{transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.pages-list li:hover{transform:translateX(4px);border-color:var(--pink)}
.swatch{cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s}
.swatch:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 4px 12px rgba(0,0,0,.15)}
@media (prefers-reduced-motion:reduce){.panel,.panel > *{animation:none}}
.swatch{padding:0}
.swatch.pop{animation:pop .45s var(--ease)}
/* Kuvat ja värit: värikoodi laatan vieressä (QA 22.10. E-17). */
.vari-rivi{display:flex;align-items:center;gap:12px}
.vari-rivi input[type=color]{flex:0 0 96px;width:96px;min-width:0;cursor:pointer}
.vari-koodi{font:600 15px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.02em}
.color-preview{--cp1:#0F62E6;--cp2:#FF8A1F;margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.cp-top{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}
.cp-top b{color:var(--cp1);transition:color .3s;margin-right:auto}
.cp-top span{width:44px;height:7px;border-radius:4px;background:var(--paper-2)}
.cp-top i{font-style:normal;font-weight:600;color:#fff;background:var(--cp2);padding:6px 12px;border-radius:8px;transition:background .3s}
.cp-hero{padding:26px 22px;background:var(--cp1);color:#fff;display:grid;gap:6px;justify-items:start;transition:background .3s}
.cp-hero strong{font:700 20px/1.2 var(--font-display)}
.cp-hero span{opacity:.85;font-size:14px}
.cp-hero em{font-style:normal;font-weight:600;margin-top:10px;background:var(--cp2);padding:9px 16px;border-radius:9px;transition:background .3s}

.build-time{display:inline-flex;align-items:center;gap:10px}
.build-left{color:var(--ink);font-weight:600;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
@media (max-width:600px){.build-now{flex-wrap:wrap}.build-now .grow{display:none}.build-time{width:100%;padding-left:22px}}

.uses{margin-top:30px}
.uses h2{font-size:20px;margin:0 0 4px}
.uses > .hint{margin:0 0 14px}
.use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:800px){.use-grid{grid-template-columns:minmax(0,1fr)}}
.use{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.use:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:transparent}
.use-ico{grid-row:1 / 3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--pink-soft);color:var(--pink-ink)}
.use b{font-weight:600;font-size:15px}
.use-cost{font:700 16px/1 var(--font-display);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.use small{grid-column:2 / 4;color:var(--muted);font-size:13px}

/* Vaihepalkki: nimi vain nykyiselle vaiheelle, muut palloina (nimi vihjeenä); kaikki nimet vain hyvin leveällä. */
.steps{align-items:center;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.steps li{display:flex;align-items:center}
.steps li + li::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--line-strong);margin-right:4px;flex:none}
.steps li.done + li::before,.steps li.done + li.current::before{background:var(--ink)}
.steps .done a::before{content:"✓"}
.steps .lbl{white-space:nowrap}
.steps li:not(.current) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.steps li:not(.current) a,.steps li:not(.current) > span{padding:6px 4px;gap:0}
@media (min-width:1700px){.steps li:not(.current) .lbl{position:static;width:auto;height:auto;clip:auto}.steps li:not(.current) a,.steps li:not(.current) > span{padding:6px 10px;gap:12px}}

/* Sivupalkin krediittimittari */
.side-credits{display:grid;gap:7px;padding:10px;border-radius:12px;text-decoration:none;color:var(--muted);font-size:13.5px;font-weight:500}
.side-credits:hover{background:var(--paper)}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-top b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-top small{color:var(--faint);font-weight:500}
.meter{display:block;height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--grad);transition:width .8s var(--ease)}
.side-credits.is-low .meter i,.meter.is-low i{background:#f59e0b}
.side-credits.is-low .sc-top b{color:var(--warn-ink)}
.side-upgrade{width:100%;margin:0 0 4px}

/* Asetukset */
.settings{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 57px)}
.set-nav{border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px;background:var(--card);position:sticky;top:57px;align-self:start;height:calc(100vh - 57px);overflow:auto}
.set-nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500}
.set-nav a .ikoni{color:var(--muted)}
.set-nav a:hover{background:var(--paper)}
.set-nav a.is-active{background:var(--pink-soft);color:var(--pink-ink)}
.set-nav a.is-active .ikoni{color:var(--pink-ink)}
.set-nav .side-label{padding:16px 12px 6px}
.set-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:10px;padding:0 10px;color:var(--muted);margin-bottom:6px}
.set-search input{border:0;outline:0;padding:9px 0;font:inherit;font-size:14px;width:100%;background:none}
.set-body{padding:28px clamp(18px,4vw,56px) 60px;max-width:980px}
.set-title{font-size:26px;margin:0 0 18px}
.set-group{margin-bottom:26px}
/* Laskutus tässä kuussa (R15, partials/laskutuskooste): yhteenvedon luvut ruudukkona, rivit set-row-muodossa. */
.lk-yhteenveto{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0 6px}
.lk-luku{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);min-width:0}
.lk-luku small,.lk-luku span{color:var(--muted);font-size:13px}
.lk-luku b{font-family:var(--font-display);font-size:20px;font-weight:600}
.set-group h2{font-size:17px;margin:26px 0 4px}
.set-lead{color:var(--muted);margin:0 0 10px;max-width:70ch}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,auto);gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.set-row > div:first-child b{font-weight:600;font-size:15px}
.set-row > div:first-child p{margin:3px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.set-row > input,.set-row > textarea,.set-row .inline input{width:100%;min-width:260px;max-width:380px;justify-self:end}
.set-row .inline{display:flex;gap:8px;align-items:center;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
.set-row > .chip,.set-row > .seg,.set-row > .toggle,.set-row > form,.set-row > .meter-wrap{justify-self:end}
.set-row-wide{grid-template-columns:minmax(0,1fr);gap:8px}
.set-row-wide textarea{max-width:none;justify-self:stretch;min-height:84px}
.kuvaus-ai{display:flex;flex-direction:column;gap:10px;min-width:0}
.kuvaus-ai textarea{width:100%}
.kuvaus-ai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kuvaus-ai-tila{font-size:12.5px;color:var(--muted)}
.kuvaus-ai-tila.is-err{color:#c2410c}
.kuvaus-ideat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kuvaus-idea{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.kuvaus-idea:hover,.kuvaus-idea:focus-visible{border-color:rgba(250,33,118,.45);box-shadow:0 0 0 3px var(--pink-soft)}
.kuvaus-idea b{font:600 12px/1.2 var(--font-body);color:var(--pink-ink);text-transform:uppercase;letter-spacing:.04em}
.kuvaus-idea span{font-size:13.5px;line-height:1.5}
.kuvaus-idea small{font-size:12px;color:var(--muted)}
.set-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding-top:16px}
.set-status{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:opacity .3s}
.set-status.is-ok{color:var(--ok-ink)}
.set-status.is-err{color:var(--err-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:500;white-space:nowrap}
.chip-ok{background:var(--ok-soft);border-color:#a7f3d0;color:var(--ok-ink)}
.toggle{position:relative;display:inline-block;width:44px;height:26px;cursor:pointer}
.toggle input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.toggle span{position:absolute;inset:0;border-radius:999px;background:var(--line-strong);transition:background .2s}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.toggle input:checked + span{background:var(--pink)}
.toggle input:checked + span::after{transform:translateX(18px)}
.toggle input:focus-visible + span{box-shadow:0 0 0 4px var(--pink-soft)}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--paper);border:1px solid var(--line);gap:2px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span,.seg a{display:block;padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.seg input:checked + span,.seg a.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(29,19,38,.12)}
.seg input:focus-visible + span{box-shadow:0 0 0 3px var(--pink-soft)}
.seg-wrap{flex-wrap:wrap}
.meter-wrap{display:grid;gap:6px;min-width:240px;font-size:13px;color:var(--muted);text-align:right}
.meter-wrap .meter{height:8px}
@media (max-width:900px){.settings{grid-template-columns:minmax(0,1fr)}.set-nav{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px}.set-nav .side-label,.set-search{display:none}.set-nav a{white-space:nowrap}.set-row{grid-template-columns:minmax(0,1fr);gap:10px}.set-row > *{justify-self:stretch!important}.set-row > input,.set-row .inline input{max-width:none;min-width:0}}

/* Käyttö */
.usage-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.usage-head-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kaytto-osto{margin-top:22px;scroll-margin-top:80px}
.usage-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.usage-kpis > div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card);display:grid;gap:4px}
.usage-kpis span{font-size:12.5px;color:var(--muted)}
.usage-kpis b{font:700 22px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.usage-kpis small{font-size:12px;color:var(--muted)}
@media (max-width:800px){.usage-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bars{display:flex;align-items:flex-end;gap:3px;height:150px;padding:10px 0 22px;border-bottom:1px solid var(--line);position:relative}
.bar{flex:1;height:100%;display:flex;align-items:flex-end;position:relative;border-radius:5px 5px 0 0}
.bar:hover{background:var(--paper)}
.bar i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:var(--grad);min-height:0;transition:height .6s var(--ease)}
.bar small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;font-size:11px;color:var(--faint);white-space:nowrap}
.bars-hours{height:110px}
.usage-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media (max-width:800px){.usage-cols{grid-template-columns:minmax(0,1fr)}}
.share{display:grid;gap:6px;padding:10px 0}
.share-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.share-top span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.share small{color:var(--faint);font-size:12px}

/* Pyydä apua */
.help-dialog{border:0;border-radius:18px;padding:22px 24px;width:min(560px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(29,19,38,.35);color:var(--ink)}
.help-dialog::backdrop{background:rgba(29,19,38,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.help-dialog[open]{animation:panel-in .25s var(--ease)}
.hd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.hd-head h2{margin:0;font-size:20px}
.icon-x{border:0;background:none;cursor:pointer;color:var(--muted);padding:6px;border-radius:8px;display:grid;place-items:center}
.icon-x:hover{background:var(--paper);color:var(--ink)}
.help-form .field{margin-bottom:14px}
.help-form textarea{width:100%}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--pink-ink);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.link-btn:hover{text-decoration:underline}
.steps .lbl{display:inline;padding:0;border-radius:0;color:inherit;font:inherit;background:none}
.steps .lbl::before{content:none!important;display:none}
.set-search input,.set-search input:focus{border:0!important;box-shadow:none!important;padding:9px 0;min-height:0;background:none}

/* "Juuri nyt" kuten tekoälychateissa: hohtava teksti ja lyhyt työvirta */
.shimmer{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 40%,var(--pink) 50%,var(--ink) 60%,var(--ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer-text 2.4s linear infinite}
@keyframes shimmer-text{from{background-position:100% 0}to{background-position:-150% 0}}
.feed{list-style:none;margin:-4px 0 16px;padding:0 0 0 22px;display:grid;gap:2px;border-left:2px solid var(--line);margin-left:20px}
.feed li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted);padding:3px 0}
.feed li:nth-child(n+3){opacity:.65}
.feed li time{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}
.feed li.in{animation:feed-in .45s var(--ease) both}
@keyframes feed-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.shimmer{animation:none;color:var(--ink);background:none}}
.build-cost{display:flex;align-items:center;gap:8px;margin:-8px 0 16px;font-size:13px}

.preview-stage.is-tablet iframe{width:820px;max-width:100%}
.seg-icons button{display:inline-grid;place-items:center;padding:6px 10px}
.btn-icon{padding:0;width:34px;justify-content:center}
.icon-btn-sm{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--muted);cursor:pointer}
.icon-btn-sm:hover{background:var(--paper);color:var(--ink)}
.chat .send-row .grow{flex:1}
.chat form{position:relative}
.chat-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.chat-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line);animation:pop .3s var(--ease)}
.chat-thumb img{width:100%;height:100%;object-fit:cover}
.chat-thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(29,19,38,.75);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.chat-drop{position:absolute;inset:6px;border:2px dashed var(--pink);border-radius:14px;background:rgba(255,240,246,.92);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--pink-ink);font-weight:600;z-index:3}
.chat-drop[hidden]{display:none}
.msg-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.msg-imgs img{width:120px;height:90px;object-fit:cover;border-radius:10px;display:block}

/* Chat Clauden/ChatGPT:n tapaan */
.chat-log{gap:22px;padding:22px 20px}
.cmsg{display:flex;gap:12px;max-width:100%;font-size:15px;line-height:1.6}
.cmsg p{margin:0}
.cmsg.ai{align-self:stretch}
.cmsg.me{align-self:flex-end;max-width:85%}
/* Oma viesti erottuu tummassakin teemassa (QA 22.10. E-15: --paper-2 oli lähes sivun värinen). */
.cmsg.me .cbody{background:var(--kupla-oma);padding:10px 16px;border-radius:18px 18px 4px 18px}
.cav{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--pink-fill);color:#fff;font:700 13px/1 var(--font-display);margin-top:1px}
.cav.is-busy{animation:cav-pulse 1.4s var(--ease) infinite}
@keyframes cav-pulse{0%,100%{box-shadow:0 0 0 0 rgba(250,33,118,.45)}50%{box-shadow:0 0 0 7px rgba(250,33,118,0)}}
.cmsg.is-err .cbody p{color:var(--err-ink)}
.cbody{min-width:0}
.cmeta{display:block;margin-top:4px;color:var(--faint);font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-btn{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:7px 12px;font:500 13px var(--font-body);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .15s var(--ease)}
.chip-btn:hover{border-color:var(--pink);transform:translateY(-1px)}
.composer{padding:10px 14px 12px;border-top:0}
.chat form.composer{display:block;border-top:0}
.composer-box{position:relative;border:1px solid var(--line-strong);border-radius:22px;background:var(--card);padding:10px 10px 8px 16px;box-shadow:0 4px 18px rgba(29,19,38,.06);transition:border-color .2s,box-shadow .2s}
.composer-box:focus-within{border-color:var(--ink);box-shadow:0 6px 24px rgba(29,19,38,.1)}
.composer textarea{display:block;width:100%;border:0!important;box-shadow:none!important;outline:0;resize:none;padding:4px 0;min-height:26px!important;height:auto;max-height:220px;font:inherit;font-size:15px;background:none}
.composer-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.composer-row .grow{flex:1}
.send-btn{width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:var(--card);display:grid;place-items:center;cursor:pointer;transition:transform .15s var(--ease),background .2s}
.send-btn:hover{transform:scale(1.06);background:var(--pink)}
.send-btn[disabled]{background:var(--line-strong);cursor:default;transform:none}
.composer-hint{margin:6px 4px 0;font-size:11.5px;color:var(--faint);text-align:center}
/* Tekoälymaininta kirjoituskentän alla (partials/tekoalymaininta): pieni ja himmeä, aina näkyvissä. */
.ai-maininta{margin:6px 4px 0;font-size:11px;line-height:1.4;color:var(--faint);text-align:center}
.ai-maininta + .composer-hint{margin-top:2px}
.composer .chat-thumbs{margin-bottom:8px}
.skill-upload{display:flex;align-items:center;gap:12px;margin:4px 0 8px}
.skill-upload label{cursor:pointer}
.skill{border-bottom:1px solid var(--line)}
.skill .set-row{border-bottom:0;padding-bottom:6px}
.skill-edit{padding:0 0 14px}
.skill-edit summary,.skill-new summary{cursor:pointer;list-style:none}
.skill-edit summary{color:var(--pink-ink);font-weight:600;font-size:13.5px}
.skill-edit summary::-webkit-details-marker,.skill-new summary::-webkit-details-marker{display:none}
.skill-edit form,.skill-new form{margin-top:12px}
.skill-edit textarea{font:13px/1.55 ui-monospace,Menlo,monospace}
.skill-new{margin-top:18px}
.skill-new[open] summary{margin-bottom:6px}

.cav{background:none;width:30px;height:30px}
.cav img{width:26px;height:26px;display:block}
.cav.is-busy{animation:none}
.cav.is-busy img{animation:vuori 1.6s var(--ease) infinite}
@keyframes vuori{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(250,33,118,0))}50%{transform:translateY(-2px);filter:drop-shadow(0 3px 6px rgba(250,33,118,.45))}}

.portal-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:8px;box-shadow:0 4px 18px rgba(29,19,38,.05)}
.portal-card b{font-size:16px}
.portal-card p{margin:3px 0 0;color:var(--muted);font-size:13.5px}
.portal-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#635bff,#8f7cff);color:#fff}
@media (max-width:700px){.portal-card{grid-template-columns:auto minmax(0,1fr)}.portal-card form{grid-column:1 / -1}}

/* Julkaisu */
.pub-steps{list-style:none;margin:22px 0 10px;padding:0;display:grid;gap:0}
.pub-steps > li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;position:relative;padding-bottom:26px}
.pub-steps > li::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--line)}
.pub-steps > li:last-child::before{display:none}
.pub-steps .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-strong);color:transparent;background:var(--card);position:relative;z-index:1}
.pub-steps li.is-done .dot{background:var(--pink-fill);border-color:var(--pink);color:#fff}
.pub-steps li.is-done::before{background:var(--pink)}
.pub-steps li.is-now .dot{border-color:var(--pink);box-shadow:0 0 0 5px var(--pink-soft)}
.pub-steps li.is-todo .pub-body{opacity:.55}
.pub-body h2{margin:3px 0 8px;font-size:18px;display:flex;align-items:center;gap:8px}
.pub-result{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.pub-result p{margin:0}
.pub-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
@media (max-width:800px){.pub-methods{grid-template-columns:minmax(0,1fr)}}
.pub-methods form{display:contents}
/* Domain Connect: yhdistäminen asiakkaan omassa DNS-palvelussa ensisijaisena, muut tavat avattavan alla. */
.pj-dc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:6px 0 4px}
.pj-dc p{margin:0;max-width:72ch}
.pj-dc-muut .pub-methods{margin-top:10px}
.pj-dc-uudelleen{margin-top:10px}
.pub-method{text-align:left;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--card);padding:14px 16px;cursor:pointer;display:grid;gap:4px;font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.pub-method:hover{border-color:var(--ink)}
.pub-method.is-on{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.pub-method small{color:var(--muted);font-size:13px;line-height:1.45}
.copy-list{display:grid;gap:6px;margin:10px 0}
.copy-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px 8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
code{font:13.5px ui-monospace,Menlo,monospace;background:var(--paper);padding:2px 6px;border-radius:6px}
.dns-check{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--paper)}
.dns-check .dc-head{display:flex;align-items:center;gap:10px}
.dns-check .pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pink);animation:ping 1.6s var(--ease) infinite}
.dns-check.is-ok .pulse{background:#10b981}.dns-check.is-ok .pulse::after{display:none}
.dc-list{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:6px;font-size:14px}
.dc-list li{display:flex;align-items:center;gap:10px}
.dc-ico{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;background:var(--line);color:var(--muted);flex:none}
.dc-list li.ok .dc-ico{background:#10b981;color:#fff}
.dc-list li.run::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--pink);animation:spin .9s linear infinite;flex:none}
.ssl-run{margin:10px 0 14px}
.pub-done{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:var(--ok-soft);border:1px solid #a7f3d0;color:#065f46}
.pub-done p{margin:2px 0 0}
.dns{margin-top:10px}
.dns-tbl td{vertical-align:middle}
.dns-val{word-break:break-all;font:13px ui-monospace,Menlo,monospace}
.dns-tbl tr{transition:opacity .25s}
.dns-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.dns-add input,.dns-add select{max-width:200px;min-height:36px;padding:6px 10px}
.domain{border-bottom:1px solid var(--line)}
.domain summary{list-style:none;cursor:pointer;border-bottom:0}
.domain summary::-webkit-details-marker{display:none}
.domain-body{padding:0 0 18px}
.pal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 10px}
.pal-head h2{margin:0;font-size:18px}
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ai-pals{margin:10px 0 12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.palette{display:grid;gap:8px;text-align:left;padding:10px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,transform .15s var(--ease),box-shadow .2s}
.palette:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.palette.is-on{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.palette .sw{display:grid;grid-template-columns:2fr 1fr;height:42px;border-radius:9px;overflow:hidden}
.palette b{font-size:13px;font-weight:600}
.palette small{color:var(--muted);font-size:12px;line-height:1.4}
.palette.is-ai{animation:pop .4s var(--ease) both;border-style:dashed}
.palette.is-ai.is-on{border-style:solid}
.cbody p + p,.cbody p + ul,.cbody ul + p{margin-top:10px}
.cbody ul{margin:6px 0 0;padding-left:20px}
.cbody li{margin:2px 0}
.img-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px}
.img-tabs button{border:0;background:none;padding:9px 14px;font:600 14px var(--font-body);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:6px;align-items:center}
.img-tabs button.is-on{color:var(--ink);border-bottom-color:var(--pink)}
.thumbs-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.thumbs-bar .grow{flex:1}
.thumb{user-select:none;transition:outline-color .15s;outline:2px solid transparent;outline-offset:-2px}
.thumb:has(input:checked){outline-color:var(--pink)}
.thumb:has(input:not(:checked)) img{opacity:.55;filter:grayscale(.3)}
.found-use{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.found-use .btn.is-on{border-color:var(--pink);color:var(--pink-ink)}
.wp-pop{position:relative}
.wp-pop summary{list-style:none}
.wp-pop summary::-webkit-details-marker{display:none}
.wp-card{position:absolute;right:0;top:calc(100% + 8px);width:340px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:14px;z-index:40;display:grid;gap:10px}
.wp-card [data-wp-rows]{display:grid;gap:8px}
.wp-card .copy-row span small{display:block;color:var(--muted);font-size:11.5px}
.wp-card .copy-row code{word-break:break-all}
.addons-title{margin:22px 0 10px;font-size:16px}
.addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:800px){.addons{grid-template-columns:minmax(0,1fr)}}
.addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.addon p{margin:2px 0 0;color:var(--muted);font-size:13px}
.addon .use-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pink-soft);color:var(--pink-ink)}
.addon-ok{grid-column:1 / -1;margin:4px 0 0;color:var(--ok-ink);font-size:13px}
/* K1 (arvio 7.10.2026): kapealla näytöllä ikoni ja teksti rinnakkain, nappi omalle rivilleen (tekstisarake ei saa kutistua 0 px:iin). */
@media (max-width:560px){.addon{grid-template-columns:auto minmax(0,1fr)}.addon > .btn,.addon > form,.addon > a.btn{grid-column:1 / -1;justify-self:start}}

/* Sivupalkin projektilista: värilaatta, nimi ja tila pisteellä */
.side-item{flex-direction:row;align-items:center;gap:10px;padding:7px 8px}
.ptile{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--c);color:#fff;font:700 13px/1 var(--font-display);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ptext{display:flex;flex-direction:column;min-width:0;gap:1px}
.pname{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.side-item small{display:flex;align-items:center;gap:6px}
.pdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line-strong)}
.pdot.is-valmis{background:#10b981}
.pdot.is-kaynnissa{background:var(--pink);animation:cav-pulse 1.4s var(--ease) infinite}
.side-item.is-active{background:var(--paper)}
.side-item.is-active .pname{color:var(--ink);font-weight:600}
.side-item.is-active .ptile{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}

/* Pienennettävä sivupalkki */
.side-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.side-top .brand{padding-bottom:6px}
.side-collapse{border:0;background:none;color:var(--muted);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;cursor:pointer;flex:none}
.side-collapse:hover{background:var(--paper);color:var(--ink)}
.side-collapse .sc-puhelin{display:none}
@media (max-width:900px){.side-collapse .sc-tyopoyta{display:none}.side-collapse .sc-puhelin{display:revert}}
.brand-mini{display:none;width:26px;height:26px}
.app{transition:grid-template-columns .2s var(--ease)}
@media (min-width:1001px){
  .side-mini .app{grid-template-columns:68px minmax(0,1fr)}
  .side-mini .side{padding:14px 10px;align-items:center}
  .side-mini .side-top{flex-direction:column}
  .side-mini .brand-full,.side-mini .brand span,.side-mini .side-label,.side-mini .side-txt,.side-mini .ptext,.side-mini .me-txt,.side-mini .me-chev,.side-mini .sc-top b,.side-mini .side-upgrade .side-txt{display:none}
  .side-mini .brand-mini{display:block}
  .side-mini .side .new{width:44px;height:44px;padding:0;justify-content:center}
  .side-mini .side-list{width:100%;align-items:center}
  .side-mini .side-item{justify-content:center;padding:6px;width:46px}
  .side-mini .side-credits{width:46px;padding:8px 6px}
  .side-mini .side-credits .sc-top{justify-content:center}
  .side-mini .side-upgrade{width:44px;padding:0;justify-content:center}
  .side-mini .side-foot{align-items:center;width:100%}
  .side-mini .me-menu .me{justify-content:center;padding:6px}
  .side-mini .me-pop{left:0;right:auto;width:240px}
  .side-mini .side-collapse svg{transform:scaleX(-1)}
}
.side-item.is-active .ptile,.side-item .ptile{color:#fff}
.sc-day{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-top:2px}
.sc-day.is-full{color:var(--warn-ink);font-weight:600}
.meter-day{height:3px}
.meter-day i{background:var(--ink);opacity:.35}
.side-mini .sc-day,.side-mini .meter-day{display:none}
/* Asetukset › Verkkotunnukset (QA k2 N1): lisäyksen tulos ja omat osoitteet mg-card-listana, valittu korostettuna. */
.vt-tulos{margin:12px 0 0}
.vt-tulos p,.vt-lista .mg-card p{margin:0}
.vt-lista-otsikko{margin:20px 0 8px}
.vt-lista{list-style:none;padding:0;margin:0 0 16px}
.vt-lista .mg-card{align-content:start}
.vt-lista .mg-card.is-on{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
/* QA k3: kentän virhe omalla rivillään kentän alla (A-34), kenttä täysleveä; sivuston valinta ja napit tuloksessa omille
   riveilleen; puhelimella valittu osoite vain tiedoissa, ei kahdesti peräkkäin (A-40). */
.vt-haku .inline input{flex:1 1 auto;min-width:0}
.vt-tulos .vt-osta,.vt-tulos .vt-oma,.vt-liita form{display:grid;gap:10px;justify-items:start}
.vt-tulos:focus{outline:none}.vt-tulos:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.vt-liita{margin:0 0 14px}
[data-verkkotunnukset] .domain-wiz{margin-top:16px}
@media (max-width:640px){.vt-omat.is-yksi,.vt-lista > li.is-on{display:none}}
.domain-wiz{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px 22px}
.dw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.dw-head h2{margin:0}.dw-head .hint{margin:2px 0 0}
.plan-switches{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.plan-switches .byok-toggle{margin:0;flex:1;min-width:280px}
.seg .save{font-style:normal;font-weight:700;color:var(--ok-ink);margin-left:4px;font-size:12px}
.plan-billed{margin:-4px 0 6px;font-size:12.5px;color:var(--muted)}
.topup{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:16px 18px;display:grid;gap:12px}
.topup-head{display:flex;gap:12px;align-items:center}
.topup-head .use-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pink-soft);color:var(--pink-ink);flex:none}
.topup-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topup-row .grow{flex:1}
.topup-own{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.topup-own input{width:90px;min-height:36px;padding:6px 10px}
.topup-sum{display:grid;text-align:right;line-height:1.2}
.topup-sum b{font:700 18px/1.2 var(--font-display)}
.topup-sum small{color:var(--muted);font-size:11.5px}
.topup-toiminnot{display:flex;justify-content:flex-end}
@media (max-width:620px){.topup-toiminnot .btn{width:100%;justify-content:center}}
.sc-bought{color:var(--ok-ink)!important;font-weight:600}
/* Sivupalkin pienennysnappi saa saman näkyvän kohdistuksen kuin muut napit (QA 22.10. k3 E-37: ennen 2 px:n --pink-soft,
   noin 8 % pinkki). Reunus napin sisään, ettei sivupalkin reuna leikkaa sitä. */
.side-collapse:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
@media (min-width:1001px){
  /* Ylivuoto piilotetaan vain listasta: koko sivupalkin overflow:hidden leikkasi käyttäjävalikon palkin levyiseksi. */
  .side-mini .side{overflow:visible;z-index:40}
  .side-mini .side-list{overflow-x:hidden}
  .side-mini .me-pop{width:260px}
  .side-mini .side-foot{gap:8px}
  .side-mini .side-credits{width:44px;padding:8px 0;justify-items:center;gap:6px}
  .side-mini .side-credits .sc-top{width:100%;justify-content:center}
  .side-mini .side-credits .meter{width:28px}
  .side-mini .side-top{gap:8px}
}
.me-label{margin:4px 10px 2px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.me-pop button.is-on{font-weight:600}
.ws-check{margin-left:auto;color:var(--pink-ink)!important}
.member .mem{display:flex;gap:12px;align-items:center}
.member .avatar{width:32px;height:32px;font-size:12px}
.seats{display:inline-flex;align-items:center;gap:6px}
.seats input{width:70px;min-height:30px;padding:4px 8px}
.plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plan-team-cta{border-style:dashed}
.side-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;margin-top:4px}
.side-nav .ikoni{color:var(--muted)}
.side-nav:hover,.side-nav.is-active{background:var(--paper)}
.side-mini .side-nav{justify-content:center;width:44px;padding:10px 0}
.media-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.storage-meter{min-width:280px;display:grid;gap:6px;font-size:13px}
.sm-top{display:flex;justify-content:space-between;color:var(--muted)}
.sm-top b{color:var(--ink)}
.media-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.media-item{transition:opacity .25s}
.media-meta{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11px;color:#fff;background:linear-gradient(transparent,rgba(14,18,48,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-item .src{bottom:auto;top:6px}
.logo-found{display:flex;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:repeating-conic-gradient(var(--paper) 0 25%,#fff 0 50%) 0 0/16px 16px;margin-bottom:12px}
.logo-found img{max-height:56px;max-width:200px;object-fit:contain}
.logo-found p{margin:0;background:var(--card);padding:4px 8px;border-radius:8px}
.addon-inline{margin-top:4px}
.connectors{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.connector{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:16px;display:grid;gap:10px;align-content:start}
.connector.is-on{border-color:#a7f3d0}
.cn-top{display:flex;gap:12px;align-items:center}
.cn-top .use-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--pink-soft);color:var(--pink-ink);flex:none}
.cn-top b{display:block}
.connector p{margin:0;color:var(--muted);font-size:13.5px}
.connector ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink)}
.connector .btn,.connector form{justify-self:start}
.pricing-page{padding-top:28px;padding-bottom:60px}
.pricing-head{text-align:center;margin-bottom:22px}
.pricing-head h1{font-size:clamp(30px,4vw,42px);margin:0 0 6px}
.pricing-head .intro{margin:0 auto 16px}
.ptable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card);margin-bottom:12px}
.ptable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
.ptable th,.ptable td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ptable thead th{font:700 17px/1.2 var(--font-display);position:relative;padding-top:20px}
.ptable thead .plan-badge{position:static;margin-left:8px;vertical-align:2px}
.ptable tbody th{font-weight:500;color:var(--muted);width:24%}
.ptable td.is-featured,.ptable th.is-featured{background:var(--tint-pink)}
.ptable tbody tr:first-child td{font:700 18px/1.2 var(--font-display)}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
.pricing-cta{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.team-price{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr);gap:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:18px 20px;margin-bottom:8px}
@media (max-width:800px){.team-price{grid-template-columns:minmax(0,1fr)}}
.tp-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px;font-size:14px}
.tp-list li{display:flex;gap:8px;align-items:center}
.tp-list .ikoni{color:var(--pink-ink)}
.tp-calc{background:var(--paper);border-radius:12px;padding:14px 16px;display:grid;gap:8px;align-content:start}
.tp-calc label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}
.tp-calc input{width:90px}
.tp-sum b{display:block;font:700 24px/1.1 var(--font-display)}
.tp-sum small{color:var(--muted)}
.brand-tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);flex:none;box-shadow:0 1px 3px rgba(29,19,38,.06)}
.brand-logo{display:block}
.pub-optional .dot{border-style:dashed}
.transfer-form{display:grid;gap:10px;max-width:520px;margin-top:8px}
.check-line{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check-line input{margin-top:3px;accent-color:var(--pink)}
.transfer-form .btn{justify-self:start}
.transfer-form .hint{color:var(--muted);font-size:13px;margin:0}
.transfer-form .field{margin:0}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;background:var(--card);transition:background .15s,border-color .15s,color .15s}
.pill input:checked+span{background:var(--valittu);border-color:var(--valittu);color:var(--valittu-teksti)}
.pill input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}
.pill input:disabled+span{opacity:.5}
.composer-hint.is-err{color:var(--err-ink)}
.pub-method[disabled]{opacity:.45;cursor:not-allowed}
.drive-connect{grid-column:1/-1;padding:24px;border:1px dashed var(--line);border-radius:14px;text-align:center}
.drive-connect p{margin:0 0 12px}
[data-drive] .thumbs-bar input[type=search]{max-width:280px}
.img-tabs svg{vertical-align:-2px;margin-right:4px}
.analytics{display:block;max-width:1180px}
.an-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.an-head h1{margin:0}
.analytics .seg a{padding:6px 12px;border-radius:999px;text-decoration:none;color:inherit;font-size:14px}
.analytics .seg a.is-on{background:var(--valittu);color:var(--valittu-teksti)}
.an-connect{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0 20px}
.an-sources{margin:8px 0 18px;font-size:14px}
.an-sources summary{cursor:pointer;color:var(--muted)}
.an-sources form{margin-top:10px;align-items:end}
.an-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0 6px}
.an-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:2px}
.an-kpi small{color:var(--muted);font-size:13px}
.an-kpi b{font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.an-kpi .up{color:var(--ok-ink);font-size:13px;font-weight:600}.an-kpi .down{color:var(--err-ink);font-size:13px;font-weight:600}
.an-kpi .muted{color:var(--muted);font-size:12px}
.an-kpi.hero{grid-column:span 2;background:linear-gradient(135deg,#1d1326,#3a1f4b);color:#fff;border:0}
.an-kpi.hero small,.an-kpi.hero .muted{color:#e9dff2}
.an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 18px}
.an-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0;overflow-x:auto}
.an-card.wide{grid-column:1/-1}
.an-card h2{font-size:15px;margin:0 0 12px}
.an-h{margin:26px 0 4px}
.an-bars{width:100%;display:block}
.an-bars rect{fill:var(--pink,#fa2176);opacity:.85}
.an-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:4px}
.an-row{display:grid;grid-template-columns:minmax(90px,140px) 1fr auto;gap:10px;align-items:center;font-size:14px;padding:4px 0}
.an-row i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--pink,#fa2176) var(--w),var(--paper-2) var(--w))}
.an-row.plain{grid-template-columns:1fr auto}
.an-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-row b{font-variant-numeric:tabular-nums}
.an-tbl td:first-child{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-tbl .num{white-space:nowrap}
@media (max-width:760px){.an-grid{grid-template-columns:1fr}.an-kpi.hero{grid-column:auto}}
.conn-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.conn-chips .chip-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.conn-chips .link-btn{font-size:12.5px}
a.side-label{display:block;text-decoration:none}
a.side-label:hover{color:var(--ink,#1c1726)}
.publish-dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:18px;box-shadow:0 30px 80px rgba(20,10,30,.28);overflow:auto}
.publish-dialog::backdrop{background:rgba(20,12,28,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.publish-dialog .panel{margin:0;border:0;box-shadow:none}
.dlg-close{position:sticky;top:12px;float:right;margin:12px 12px 0 0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;z-index:2}
.count-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-left:6px;border-radius:10px;background:var(--card);color:var(--pink-ink);font-size:12px;font-weight:700}
.live-box{border:1px solid var(--line);border-radius:14px;padding:16px;margin:8px 0 16px;display:grid;gap:10px}
.live-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.live-box h3{margin:4px 0 0;font-size:15px}
.pend-list{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
.versions{margin:10px 0}
.versions summary{cursor:pointer;font-weight:600;padding:6px 0}
.chat-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.studio-edit.chat-wide{grid-template-columns:minmax(0,1fr) minmax(0,0fr)}
.studio-edit.chat-wide .preview-pane{display:none}
.studio-edit.chat-wide .chat-log,.studio-edit.chat-wide .composer{width:100%;max-width:820px;margin-inline:auto}
.studio-edit{transition:grid-template-columns .2s ease}
.plus-wrap{position:relative}
.plus-btn{border-radius:50%;border:1px solid var(--line)}
.plus-menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:270px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(20,10,30,.16);padding:6px;z-index:20;display:grid}
.pm-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;cursor:pointer;background:none;border:0;text-align:left;color:inherit;text-decoration:none}
.pm-item:hover{background:var(--paper)}
.pm-muted{color:var(--muted)}
.pm-label{margin:6px 10px 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.mode-seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:3px;margin-left:6px}
.mode-seg label{padding:4px 11px;border-radius:999px;font-size:13px;cursor:pointer;color:var(--muted)}
.mode-seg input{position:absolute;opacity:0;pointer-events:none}
.mode-seg label:has(input:checked){background:var(--card);color:var(--ink,#1c1726);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.composer.is-plan .composer-box{border-color:#7c5cff}
.send-btn:disabled{opacity:.35;cursor:default}
.plan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.chat form.retry-form{display:flex;flex-direction:row;justify-content:flex-start;padding:0;border-top:0;margin-top:10px}
.onboard-chat{max-width:780px;margin:0 auto;padding:28px 16px 0;min-height:calc(100vh - 56px);display:flex;flex-direction:column}
.oc-log{flex:1;display:flex;flex-direction:column;gap:22px;padding-bottom:20px}
.oc-composer{position:sticky;bottom:0;background:linear-gradient(transparent,var(--paper) 22%);padding:16px 0 18px}
.plus-menu[hidden]{display:none}
.an-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.an-h small{font-weight:500}
.composer-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.composer-tools .mode-seg{margin-left:0}
.composer-tools .composer-hint{margin:0;flex:1;min-width:180px}
.oc-files{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.chat-thumb.is-file{display:grid;place-items:center;padding:6px;font-size:11px;text-align:center;background:var(--paper);overflow:hidden;word-break:break-all}
.drive-dialog{width:min(900px,calc(100vw - 32px));max-height:calc(100vh - 48px);border:0;border-radius:18px;padding:18px;box-shadow:0 30px 80px rgba(20,10,30,.28)}
.drive-dialog::backdrop{background:rgba(20,12,28,.45)}
.dd-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.dd-head .dlg-close{position:static;margin:0;float:none}
[data-drive-more][hidden],.link-btn[hidden]{display:none}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 8px;border-radius:9px;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.dd-btn:hover{background:var(--paper-2);color:var(--ink,#1c1726)}
.dd-right .dd-btn{color:var(--ink,#1c1726);font-weight:600}
.dd-sub{color:var(--muted);font-weight:400}
.dd-menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:280px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(20,10,30,.16);padding:6px;z-index:25;display:grid}
.dd-menu[hidden]{display:none}
.dd-right .dd-menu{left:auto;right:0}
.dd-label{margin:6px 10px 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.dd-opt{display:grid;gap:2px;text-align:left;border:0;background:none;padding:8px 30px 8px 10px;border-radius:9px;cursor:pointer;position:relative;color:inherit}
.dd-opt:hover{background:var(--paper)}
.dd-opt b{font-size:14px;display:flex;align-items:center;gap:6px}
.dd-opt small{color:var(--muted);font-size:12.5px;line-height:1.35}
.dd-opt.is-on::after{content:"";position:absolute;right:10px;top:12px;width:12px;height:7px;border-left:2px solid var(--pink,#fa2176);border-bottom:2px solid var(--pink,#fa2176);transform:rotate(-45deg)}
.dd-warn{color:#d97706}
.composer.is-heavy .dd-right .dd-sub{color:#d97706}
.composer-row{gap:4px}
.ctx-menu{min-width:300px;max-height:420px;overflow:auto;padding:0 6px 6px}
.ctx-search{display:flex;align-items:center;gap:6px;padding:8px 4px;border-bottom:1px solid var(--line);margin-bottom:4px;position:sticky;top:0;background:var(--card)}
.ctx-search input{border:0;outline:0;flex:1;font-size:14px;padding:4px 2px;background:none}
.ctx-back{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.pm-arrow{margin-left:auto;color:var(--muted);font-size:16px}
.pm-sub{margin-left:auto;color:var(--muted);font-size:12px}
.pm-indent{padding-left:28px}
.pm-empty{margin:4px 10px 8px;font-size:13px;color:var(--muted)}
.ctx-url{display:flex;gap:6px;padding:4px 6px}
.ctx-url input{flex:1;min-width:0}
.ctx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ctx-chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;font-size:12.5px;max-width:100%}
.ctx-chip b{font-weight:600;color:var(--muted)}
.ctx-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.ctx-chip button{border:0;background:var(--card);border-radius:50%;width:18px;height:18px;line-height:16px;cursor:pointer;padding:0}
.me-menu .me{position:relative}
.me-dot{position:absolute;left:30px;top:6px;width:9px;height:9px;border-radius:50%;background:#e11d48;border:2px solid #fff;z-index:1}
.me-count{margin-left:auto;background:#e11d48;color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:1px 7px}
/* Lukemattomat ilmoitukset näkyvät puhelimella jo Valikko-napissa, ei vasta sivupalkin alareunan avatarissa
   (QA 22.10. E-05). Merkki tulee samasta .me-dot-tiedosta, joten se toimii myös muokkausnäkymän omassa napissa. */
.side-toggle{position:relative}
body:has(.me-dot) .side-toggle::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:#e11d48;border:2px solid var(--card);pointer-events:none}
.me-kbd{margin-left:auto;font:inherit;font-size:11px;color:var(--faint);border:0;background:none}
.ws-row{display:flex;align-items:center;gap:10px;width:100%}
.ws-row small{display:block;color:var(--muted);font-size:11.5px;font-weight:400}
.ws-av{width:26px;height:26px;border-radius:50%;background:#efe9f3;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink,#1c1726);flex:none}
.ws-row .ws-check{margin-left:auto}
.me-sub summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
.me-sub summary::-webkit-details-marker{display:none}
.me-sub[open] summary .pm-arrow{transform:rotate(90deg)}
.me-sub > a{padding-left:38px !important;font-size:13.5px}
.inbox{max-width:860px}
.inbox-item{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;background:var(--card)}
.inbox-item:first-of-type{border-top-left-radius:12px;border-top-right-radius:12px}
.inbox-item:hover{background:var(--paper)}
.ib-dot{width:8px;height:8px;border-radius:50%;margin-top:7px}
.inbox-item.is-new .ib-dot{background:#e11d48}
.inbox-item.is-new b{font-weight:700}
.ib-body{display:grid;gap:3px}.ib-body b{font-weight:500}.ib-body small{color:var(--muted)}
.ib-time{color:var(--faint);font-size:12px;white-space:nowrap}
/* Mitä uutta: aikajana, päivä vasemmalla, muutokset kortteina ikoneineen. */
.changelog{max-width:980px}
.cl-hero{position:relative;isolation:isolate;margin:clamp(16px,5vh,56px) 0 clamp(28px,4vh,44px);text-align:center}
.cl-hero .home-glow{inset:-70px -120px -30px}
@media (max-width:700px){.cl-hero{overflow-x:clip}} /* hehku ei saa levittää sivua vaakasuunnassa */
.cl-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-size:12.5px;font-weight:700}
.cl-hero h1{margin:12px 0 8px;font:700 clamp(30px,4vw,44px)/1.1 var(--font-display);letter-spacing:-.02em}
.cl-hero p{margin:0;color:var(--muted);font-size:16px}
.cl-timeline{list-style:none;margin:0;padding:0}
.cl-day{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;position:relative;padding-bottom:34px}
.cl-day::before{content:"";position:absolute;left:7px;top:22px;bottom:0;width:2px;background:var(--line)}
.cl-day:last-child::before{display:none}
.cl-date{position:sticky;top:76px;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:2px}
.cl-date i{width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--line-strong);flex:none}
.cl-day.is-latest .cl-date i{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.cl-date time{font:700 15px var(--font-display);color:var(--ink)}
.cl-new{margin-left:26px;padding:2px 8px;border-radius:999px;background:var(--pink-fill);color:#fff;font-size:11px;font-weight:700}
.cl-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cl-item{display:flex;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:border-color .15s,box-shadow .15s}
.cl-item:hover{border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.cl-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--pink-soft);color:var(--pink-ink)}
.cl-day:not(.is-latest) .cl-ico{background:var(--paper);color:var(--muted)}
.cl-item h2{margin:0 0 4px;font-size:14.5px;font-weight:700;line-height:1.35}
.cl-item p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){.cl-day{grid-template-columns:minmax(0,1fr);gap:12px}.cl-day::before{display:none}.cl-date{position:static}}
.me-sub summary{padding:9px 10px;border-radius:9px;font:500 13.5px/1.2 var(--font-body);color:var(--ink)}.me-sub summary:hover{background:var(--paper)}
.inline-form{display:inline}.int-add summary{list-style:none;display:inline-flex}.int-add summary::-webkit-details-marker{display:none}.int-form{margin-top:12px;display:grid;gap:10px;max-width:720px}
.models-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f8f3fb 60%,#fdf0f5 100%);border:1px solid var(--line);border-radius:16px;padding:20px}
.mc-logos{display:flex;margin-bottom:10px}
.mc-logo{width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;margin-right:-8px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.mc-list{display:flex;flex-wrap:wrap;gap:16px;margin:6px 0 14px;font-size:14px}
.mc-list div{display:flex;align-items:center;gap:6px}
[data-int-mail][hidden],[data-int-mailgun][hidden]{display:none}
.import-box{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--paper);margin:4px 0 8px}
.import-box > div{flex:1}.import-box p{margin:2px 0 0;color:var(--muted);font-size:13px}
.import-dialog{width:min(720px,calc(100vw - 32px));border:0;border-radius:18px;padding:20px;box-shadow:0 30px 80px rgba(20,10,30,.28)}
.import-dialog::backdrop{background:rgba(20,12,28,.45)}
.imp-steps{padding-left:20px;display:grid;gap:14px;margin:6px 0 14px}
.imp-steps textarea{width:100%;margin:8px 0;font-size:13px}
.imp-steps textarea[readonly]{background:var(--paper);color:var(--ink,#1c1726)}
.cx{max-width:980px}
.cx-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.cx-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--card);min-width:220px;flex:0 1 280px}
.cx-search input{border:0;outline:0;padding:8px 0;flex:1;background:none;font-size:14px}
.cx-tabs{display:flex;gap:2px;background:var(--paper-2);border-radius:10px;padding:3px;flex-wrap:wrap}
.cx-tabs button{border:0;background:none;padding:6px 11px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer}
.cx-tabs button.is-on{background:var(--card);color:var(--ink,#1c1726);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cx-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:18px 0 8px}
.cx-list{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cx-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:inherit}
.cx-row:last-child{border-bottom:0}
.cx-row:hover{background:var(--paper)}
.cx-row[hidden],.cx-tile[hidden],[data-cx-section][hidden]{display:none}
.cx-logo{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;flex:none}
.cx-logo-lg{width:52px;height:52px;border-radius:12px}
.cx-name{display:grid;gap:2px;min-width:0;flex:1}
.cx-name b{font-size:14px;font-weight:600}
.cx-name small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-dot{width:8px;height:8px;border-radius:50%;background:#10b981;flex:none}
.cx-dot.is-off{background:#d1d5db}
.cx-manage{font-size:13px;color:var(--muted);padding:5px 10px;border:1px solid var(--line);border-radius:8px}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.cx-tile{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left;cursor:pointer;color:inherit;min-height:74px;transition:border-color .15s,box-shadow .15s}
.cx-tile:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(28,23,38,.06)}
.cx-state{font-size:12px;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none}
.cx-state.is-saatavilla{background:var(--merkki);color:var(--merkki-teksti)}
.cx-state.is-yhdistetty,.cx-state.is-sisaltyy{background:var(--ok-soft);color:var(--ok-ink)}
.cx-state.is-tulossa{background:var(--paper-2);color:var(--muted)}
.cx-tile-add{border-style:dashed}
.cx-drawer{margin:0 0 0 auto;height:100vh;max-height:100vh;width:min(480px,100vw);border:0;border-left:1px solid var(--line);padding:0;border-radius:0;box-shadow:-20px 0 60px rgba(20,10,30,.18)}
.cx-drawer[open]{animation:cxIn .22s var(--ease,ease)}
@keyframes cxIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.cx-drawer::backdrop{background:rgba(20,12,28,.3)}
.cxd-head{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.cxd-head > div{flex:1;min-width:0}
.cxd-head h2{margin:0;font-size:18px}
.cxd-head small{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxd-body{padding:18px 22px 28px;display:grid;gap:12px}
.cxd-body p{margin:0}
.cxd-body h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:10px 0 0}
.cxd-tools{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cxd-tools li{display:flex;gap:8px;align-items:center;font-size:14px}
.cxd-tools .ikoni{color:var(--ok-ink)}
.cxd-perm{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);background:#f8f6fa;padding:10px 12px;border-radius:10px}
.cxd-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.cxd-site{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.cxd-site small{color:var(--muted)}
.cxd-form{display:grid;gap:10px}
.cxd-form .field{display:grid;gap:4px;margin:0}
.cxd-form .field > span{font-size:13px;font-weight:600}
@media (max-width:640px){.cx-grid{grid-template-columns:1fr}.cx-drawer{width:100vw}}
/* Chatin ja sivun jakaja (vedettävä, painike keskellä) */
.studio-edit{grid-template-columns:var(--chat-w,460px) 0 minmax(0,1fr)}
.studio-edit.chat-wide{grid-template-columns:minmax(0,1fr) 0 0}
.studio-edit.is-resizing{transition:none;user-select:none}
.studio-edit.is-resizing iframe{pointer-events:none}
.edit-divider{position:relative;z-index:5;width:0;cursor:col-resize}
.edit-divider::before{content:"";position:absolute;inset:0 -5px;}
.edit-divider::after{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:transparent;transition:background .15s}
.edit-divider:hover::after,.is-resizing .edit-divider::after{background:var(--pink,#fa2176)}
.divider-btn{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:26px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--muted);box-shadow:0 2px 8px rgba(28,23,38,.08);z-index:2}
.divider-btn:hover{color:var(--ink,#1c1726);border-color:var(--line-strong)}
.studio-edit.chat-wide .edit-divider{position:fixed;right:22px;top:50%;width:auto;cursor:default;transform:translateY(-50%)}
.studio-edit.chat-wide .edit-divider::before,.studio-edit.chat-wide .edit-divider::after{display:none}
.studio-edit.chat-wide .divider-btn{position:static;transform:none}
@media (max-width:1000px){.edit-divider{display:none}}
/* Projektivalikko otsikossa */
.proj-menu{position:relative}
.proj-menu summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;margin-left:-8px;border-radius:8px}
.proj-menu summary::-webkit-details-marker{display:none}
.proj-menu summary:hover{background:var(--paper-2)}
.proj-menu summary h1{margin:0}
.proj-pop{position:absolute;top:calc(100% + 6px);left:-8px;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(20,10,30,.16);padding:6px;z-index:30;display:grid}
.proj-pop a,.proj-pop button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font:500 13.5px/1.2 var(--font-body);background:none;border:0;cursor:pointer;width:100%;text-align:left}
.proj-pop a:hover,.proj-pop button:hover{background:var(--paper)}
.proj-pop .danger{color:var(--err-ink)}
.proj-pop hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.small-dialog{width:min(460px,calc(100vw - 32px));border:0;border-radius:16px;padding:22px;box-shadow:0 30px 80px rgba(20,10,30,.28)}
.small-dialog::backdrop{background:rgba(20,12,28,.45)}
.small-dialog h2{margin:0 0 10px;font-size:18px}
.small-dialog .field{display:grid;gap:6px;margin:12px 0}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btn-danger{background:#b42318;color:#fff;border:0}
.btn-danger:disabled{opacity:.4}
.studio-edit.chat-wide .divider-btn{width:auto;height:36px;padding:0 14px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink,#1c1726)}
.side-row{position:relative}
.side-row .side-item{padding-right:34px}
.side-more{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s,background .12s}
.side-row:hover .side-more,.side-more:focus-visible,.side-more.is-open{opacity:1}
.side-more:hover,.side-more.is-open{background:var(--paper-2);color:var(--ink,#1c1726)}
.side-pop{position:fixed;z-index:60;min-width:220px}
.side-pop[hidden]{display:none}
.side-pop [hidden]{display:none}
@media (hover:none){.side-more{opacity:1}}
@media (min-width:1001px){.side-mini .side-more{display:none}}
.cx{max-width:1100px}
.cx-bar{flex-wrap:nowrap}
.cx-search{flex:0 1 240px;min-width:160px;height:38px}
.cx-search input,.cx-search input:focus{border:0 !important;box-shadow:none !important;outline:0;background:transparent !important;padding:0 !important;height:100%;min-width:0;border-radius:0}
.cx-search:focus-within{border-color:var(--pink,#fa2176)}
.cx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cx-tabs button{white-space:nowrap}
.cx-add{margin-left:auto;flex:none;white-space:nowrap}
@media (max-width:900px){.cx-bar{flex-wrap:wrap}.cx-tabs{order:3;width:100%}}
.cxd-sites{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:2px;max-height:220px;overflow:auto;margin:0}
.cxd-sites legend{font-size:13px;font-weight:600;padding:0 4px}
.cxd-check{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;cursor:pointer;font-size:14px}
.cxd-check:hover{background:var(--paper)}
.cxd-check input{accent-color:var(--pink,#fa2176)}
.cxd-check small{margin-left:auto;color:var(--muted);font-size:12px}
.cxd-more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);padding:4px 0}.cxd-more[open]{display:grid;gap:10px}[data-mcp-show][hidden]{display:none}.cx-logo img{border-radius:6px;object-fit:contain}
.chat-thumbs[hidden],.ctx-chips[hidden]{display:none}.composer-box{padding-top:12px}.composer textarea{padding-top:2px}.ctx-chips:not([hidden]),.chat-thumbs:not([hidden]){margin-bottom:8px}
.cx-add{margin-left:auto;display:flex;gap:6px;flex:none}
.cx-drawer-wide{width:min(620px,100vw)}
.reg-bar{display:flex;gap:8px;flex-wrap:wrap}
.reg-bar select{flex:0 1 220px}
.reg-bar .cx-search{flex:1 1 220px}
.reg-list{display:grid;gap:8px}
.reg-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.reg-item .cx-name small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reg-item .reg-meta{color:var(--faint);font-size:11.5px;-webkit-line-clamp:1}
.reg-item .cx-logo b{font-size:15px}
.cx-bar{flex-wrap:wrap;row-gap:12px}.cx-bar .cx-tabs{order:3;flex-basis:100%;width:max-content;max-width:100%;flex:0 0 auto}.cx-bar .cx-search{flex:1 1 260px;max-width:360px}
.msg-actions{display:flex;align-items:center;gap:2px;margin-top:6px;opacity:.55;transition:opacity .15s}
.cmsg:hover .msg-actions,.msg-actions:focus-within,.cmsg:last-child .msg-actions{opacity:1}
.ma-btn{width:28px;height:28px;border:0;background:none;border-radius:7px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.ma-btn:hover{background:var(--paper-2);color:var(--ink,#1c1726)}
.ma-btn.is-on{color:var(--pink,#fa2176)}
.ma-btn.is-done{color:var(--ok-ink)}
.ma-more{position:relative}
.ma-pop{position:absolute;left:0;top:calc(100% + 4px);min-width:250px;z-index:40}
.ma-pop[hidden]{display:none}
.ma-stat{display:flex;justify-content:space-between;gap:12px;margin:0;padding:7px 10px;font-size:13px;color:var(--muted)}
.ma-stat b{color:var(--ink,#1c1726);font-weight:600;font-variant-numeric:tabular-nums}
.cmsg.flash{animation:msgFlash 1.6s ease}
@keyframes msgFlash{0%,40%{background:var(--tint-pink)}100%{background:transparent}}
/* Kirjoituslaatikon työkalurivi: lähetysnappi pysyy aina näkyvissä, kapeassa chatissa lupavalinnasta jää ikoni */
.composer-box{container-type:inline-size}
.composer-row .send-btn{flex-shrink:0}
.composer-row .dd{min-width:0}
.composer-row .dd-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@container (max-width:400px){.composer-row [data-dd-show="lupa"]{display:none}}
/* Oikean reunan työkalurivi Lovablen tapaan: välilehdet | laite + osoiterivi | Julkaise */
.preview-bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;padding:8px 12px}
.pb-icon{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;text-decoration:none;flex-shrink:0}
.pb-icon:hover{background:var(--paper);color:var(--ink)}
.pane-tabs{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--paper)}
.pane-tabs button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 13px/1 var(--font-body);cursor:pointer}
.pane-tabs button span{display:none}
.pane-tabs button.is-on{background:var(--card);color:var(--pink-ink);box-shadow:0 1px 3px rgba(29,19,38,.1)}
.pane-tabs button.is-on span{display:inline}
.pane-tabs button:hover:not(.is-on){color:var(--ink)}
.pb-center{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.addr{display:flex;align-items:center;gap:2px;flex:0 1 420px;min-width:0;height:34px;padding:0 2px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.addr select{flex:1;min-width:0;height:30px;border:0;background:none;font:500 13px/1 var(--font-body);color:var(--ink);text-align:center;text-align-last:center;cursor:pointer;appearance:none;-webkit-appearance:none;padding:0 6px}
.addr select:focus-visible{outline:2px solid var(--pink);border-radius:6px}
.pb-publish{justify-self:end}
.pane-panel{flex:1;display:flex;min-height:0}
.pane-panel iframe{flex:1;width:100%;border:0;background:var(--card)}
.preview-pane{container-type:inline-size;container-name:pane}
@container pane (max-width:640px){.pane-tabs button.is-on span{display:none}.pb-publish .count-badge{display:none}}
@container pane (max-width:520px){.pb-publish{padding:0 10px;font-size:0;gap:0}.pb-publish svg{width:16px;height:16px}}
@media (max-width:1000px){.preview-bar{grid-template-columns:auto 1fr auto}.pb-center{grid-column:1/-1;order:3}}

/* Upotettu näkymä (välilehdet) */
body.is-embed{background:var(--card)}
.embed-body{min-height:100vh}

/* Hallinta */
.mg{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:100vh}
.mg-nav{display:flex;flex-direction:column;gap:2px;padding:16px 10px;border-right:1px solid var(--line);background:var(--paper)}
.mg-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font:500 13.5px/1.2 var(--font-body)}
.mg-link:hover{background:var(--paper-2)}
.mg-link.is-on{background:var(--card);box-shadow:0 1px 3px rgba(29,19,38,.08);font-weight:600}
.mg-main{padding:22px clamp(16px,3vw,32px) 40px;max-width:820px;display:grid;gap:14px;align-content:start}
.mg-main h2{font-size:20px}
.mg-alaotsikko{font-size:16px;margin:14px 0 0;scroll-margin-top:16px}
.mg-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mg-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card);display:grid;gap:10px}
.mg-card .hint{margin:0}
.mg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mg-sub{margin:0;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mg-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.mg-row .field{flex:1;min-width:200px;margin:0}
.mg-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Sivuston kuvake (Hallinta › Yleiset): esikatselu välilehden koossa (32 px) ja kotinäytön koossa (180 px). */
.sk-esikatselu{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin:2px 0}
.sk-esikatselu figure{margin:0;display:grid;gap:6px;justify-items:center}
.sk-esikatselu figcaption{font-size:12px;color:var(--muted)}
.sk-esikatselu img{display:block;object-fit:contain;background:var(--paper-2);border:1px solid var(--line)}
.sk-esikatselu .sk-32{width:32px;height:32px;border-radius:6px}
.sk-esikatselu .sk-180{width:180px;height:180px;max-width:100%;border-radius:22%}
[data-sivustokuvake].is-busy .sk-esikatselu{opacity:.55}
[data-sivustokuvake] .btn input[type=file]{display:none}
.mg-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:12px;font-weight:600}
.mg-tag.is-on{background:var(--ok-soft);color:var(--ok-ink)}
.mg-flash{margin:0;padding:10px 14px;border-radius:10px;background:var(--ok-soft);color:var(--ok-ink);font-size:14px}
.mg-flash.is-err{background:var(--err-soft);color:var(--err-ink)}
.mg-meter-label{display:flex;justify-content:space-between;margin:0;font-size:13.5px}
.mg-meter{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.mg-meter i{display:block;height:100%;background:var(--ink);border-radius:99px}
.mg-meter.is-warn i{background:#d97706}.mg-meter.is-full i{background:#b42318}
.mg-danger{border-color:#f5c2c0}
.mg-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--merkki);color:var(--merkki-teksti);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.msg-item{border:1px solid var(--line);border-radius:12px;background:var(--card)}
.msg-item summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.msg-item summary::-webkit-details-marker{display:none}
.msg-dot{flex:0 0 8px;height:8px;border-radius:50%;background:transparent}
.msg-item.is-new .msg-dot{background:#2563eb}
.msg-item.is-new .msg-who b{font-weight:800}
.msg-item.is-done{opacity:.7}
.msg-who{flex:1;min-width:0;display:grid;gap:2px}
.msg-ex{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item time{flex:0 0 auto;color:var(--muted);font-size:12.5px}
.msg-body{padding:0 14px 14px 32px;display:grid;gap:10px}
.msg-text{margin:0;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.msg-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13.5px}
.msg-meta dt{color:var(--muted)}.msg-meta dd{margin:0;overflow-wrap:anywhere}
.msg-warn{display:flex;align-items:center;gap:6px;color:var(--warn-ink)}
.msg-body form{margin:0}
@media (max-width:520px){.msg-body{padding-left:14px}}
.mod-set summary{display:grid;gap:4px;cursor:pointer;list-style:none}
.mod-set summary::-webkit-details-marker{display:none}
.mod-set summary b{display:flex;align-items:center;gap:8px}
.mod-set .mod-set-nuoli{margin-left:auto;transition:transform .2s}
.mod-set[open]>summary .mod-set-nuoli{transform:rotate(180deg)}
.mod-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.mod-form .field{margin:0;display:grid;gap:4px}
.mod-form .field.is-wide,.mod-form .mod-check,.mod-form .mg-actions{grid-column:1/-1}
.mod-form .field small{font-size:12.5px}
.mod-check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.mod-check span{display:grid;gap:2px}.mod-check small{color:var(--muted);font-size:12.5px}
@media (max-width:620px){.mod-form{grid-template-columns:1fr}}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mod{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card);display:grid;gap:6px;align-content:start}
.mod.is-on{border-color:#a7f3d0}
.mod b{font-size:15px}
.mod p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.mod-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mod-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--paper)}
.mod-act{margin-top:6px}.mod-act form{margin:0}
.mod-act .hint{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.mod-offer{display:grid;gap:8px;margin-top:10px}
.mod-offer-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.mod-offer-text{flex:1;min-width:0;display:grid;gap:2px}
.mod-offer-text small{color:var(--muted);font-size:12.5px;line-height:1.4}
.mod-offer-act form{margin:0}
@media (max-width:520px){.mod-offer-row{flex-wrap:wrap}.mod-offer-act{width:100%}}
.mg-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mg-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 12px 9px 34px;border-radius:10px;background:var(--paper);font-size:13.5px;position:relative}
.mg-list li::before{content:"";position:absolute;left:12px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--faint)}
.mg-list li.is-virhe::before{background:#e11d48}.mg-list li.is-huom::before{background:#d97706}.mg-list li.is-ok::before{background:#10b981}.mg-list li.is-info::before{background:#94a3b8}
.mg-list form{margin:0}
.link-btn.danger{color:var(--err-ink)}
.serp{display:grid;gap:3px;padding:14px;border-radius:10px;background:var(--paper);font-family:Arial,sans-serif}
.serp>small{color:#4d5156;font-size:12.5px}
.serp>b{color:#1a0dab;font-size:19px;font-weight:400;line-height:1.3}
.serp>p{margin:0;color:#4d5156;font-size:14px;line-height:1.5}
.mg-table-wrap{overflow-x:auto}
.mg-table{width:100%;border-collapse:collapse;font-size:13px}
.mg-table th,.mg-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.mg-table th{color:var(--muted);font-weight:600}
.mg-secret{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.mg-secret .field{margin:0}
.wp-inline{display:grid;gap:10px}
.wp-inline [data-wp-rows]{display:grid;gap:8px}
.wp-inline .copy-row span small,.mg-card .copy-row span small{display:block;color:var(--muted);font-size:11.5px}
.mg-card .copy-row code,[data-suosittelu] .copy-row code{word-break:break-all;font-size:12.5px;min-width:0}
@media (max-width:700px){.mg{grid-template-columns:1fr}.mg-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.mg-link{white-space:nowrap}.mg-secret{grid-template-columns:1fr}}

/* Koodi */
.code-view{display:grid;grid-template-columns:230px minmax(0,1fr);height:100vh}
.code-tree{border-right:1px solid var(--line);background:var(--paper);overflow:auto;padding:10px 8px;display:flex;flex-direction:column;gap:1px}
.code-search{margin:0 2px 8px;height:32px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:13px var(--font-body);background:var(--card)}
.code-folder{display:flex;align-items:center;gap:6px;margin:8px 6px 2px;font-size:12px;font-weight:600;color:var(--muted)}
.code-file{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;color:var(--ink);text-decoration:none;font:13px/1.3 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.code-file.is-nested{padding-left:22px}
.code-file:hover{background:var(--paper-2)}
.code-file.is-on{background:var(--card);box-shadow:0 1px 3px rgba(29,19,38,.08);font-weight:600}
.code-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.code-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.code-path{font:600 13px/1.2 ui-monospace,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-main .mg-flash{margin:10px 12px 0}
.code-edit{display:flex;flex-direction:column;flex:1;min-height:0}
.code-area{flex:1;display:flex;min-height:0;background:#1c1726;color:#ece7f2}
.code-lines{margin:0;padding:14px 10px 14px 14px;min-width:46px;text-align:right;color:#7d7389;font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace;overflow:hidden;user-select:none;background:#17121f}
.code-area textarea,.code-pre{flex:1;margin:0;padding:14px;border:0;background:none;color:inherit;font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace;resize:none;outline:none;white-space:pre;overflow:auto;tab-size:4}
.code-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}
.code-foot .hint{margin:0;font-size:12.5px}
.code-view .waiting{flex:1}
@media (max-width:700px){.code-view{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.code-tree{max-height:180px}}
/* Kaksivaiheinen tunnistautuminen */
.tfa-choose{display:grid;gap:8px;max-width:520px;margin-top:12px}
.tfa-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card)}
.tfa-opt:has(input:checked){border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.tfa-opt input{margin-top:3px;accent-color:var(--pink)}
.tfa-opt span{display:grid;gap:2px}
.tfa-opt b{display:flex;align-items:center;gap:6px;font-size:14px}
.tfa-opt small{color:var(--muted);font-size:13px}
.tfa-choose .btn{justify-self:start;margin-top:4px}
.tfa-setup{display:grid;gap:10px;max-width:520px;margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tfa-setup p{margin:0}
.tfa-qr{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card)}
.tfa-codes{margin:12px 0;padding:16px;border-radius:14px;background:var(--warn-soft);border:1px solid #fde68a;display:grid;gap:8px;max-width:520px}
.tfa-codes ol{margin:0;padding-left:22px;columns:2;font-size:14px}
.tfa-codes p{margin:0}
.chip.is-on{background:var(--ok-soft);color:var(--ok-ink);display:inline-flex;align-items:center;gap:5px}
/* Sivuvalitsin osoiterivillä: oma pudotusvalikko hakukentällä */
.page-dd{position:relative;flex:1;min-width:0;display:flex}
.page-dd-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 8px;border:0;border-radius:7px;background:none;font:500 13px/1 var(--font-body);color:var(--ink);cursor:pointer}
.page-dd-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-dd-btn svg{flex-shrink:0;color:var(--muted)}
.page-dd-btn:hover,.page-dd-btn[aria-expanded="true"]{background:var(--card)}
.page-dd-pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(320px,90vw);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(20,10,30,.16);padding:6px;z-index:40}
.page-dd-search{display:flex;align-items:center;gap:8px;padding:0 10px;margin-bottom:4px;border-bottom:1px solid var(--line);color:var(--muted)}
.page-dd-search input{flex:1;height:38px;border:0;outline:none;background:none;font:14px var(--font-body);color:var(--ink)}
.page-dd-list{display:grid;gap:1px;max-height:320px;overflow:auto}
.page-dd-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:0;border-radius:9px;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.page-dd-opt span{display:grid;gap:1px;min-width:0}
.page-dd-opt b{font:500 13.5px/1.3 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-dd-opt small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-dd-opt svg{flex-shrink:0;color:var(--pink-ink);visibility:hidden}
.page-dd-opt.is-on svg{visibility:visible}
.page-dd-opt:hover,.page-dd-opt.is-active{background:var(--paper)}
.page-dd-empty{margin:0;padding:12px;color:var(--muted);font-size:13px;text-align:center}
/* Koodin syntaksiväritys (highlight.js), tumma pohja */
.code-stack{position:relative;flex:1;min-width:0}
.code-stack .code-hl,.code-stack textarea{position:absolute;inset:0;margin:0;padding:14px;border:0;font:12.5px/1.6 ui-monospace,Menlo,Consolas,monospace;white-space:pre;tab-size:4;overflow:auto;letter-spacing:0}
.code-stack .code-hl{pointer-events:none;color:#ece7f2;overflow:hidden}
.code-stack .code-hl code{font:inherit;display:block}
.code-stack textarea{color:transparent;background:transparent;caret-color:#fff;resize:none;outline:none;-webkit-text-fill-color:transparent}
.code-stack textarea::selection{background:rgba(250,33,118,.35);-webkit-text-fill-color:transparent}
.code-pre code{font:inherit}
.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-selector-tag,.hljs-built_in{color:#ff7ab0}
.hljs-string,.hljs-template-tag,.hljs-addition{color:#a6e3a1}
.hljs-number,.hljs-literal,.hljs-symbol{color:#fab387}
.hljs-variable,.hljs-template-variable,.hljs-params{color:#f5e0dc}
.hljs-title,.hljs-title.function_,.hljs-section{color:#89b4fa}
.hljs-title.class_,.hljs-type{color:#f9e2af}
.hljs-attr,.hljs-attribute,.hljs-property{color:#94e2d5}
.hljs-comment,.hljs-quote{color:#7d7389;font-style:italic}
.hljs-tag,.hljs-name{color:#cba6f7}
.hljs-meta,.hljs-doctag{color:#b8b0c4}
.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:#89dceb}
.hljs-deletion{color:#f38ba8}
/* Muokkausnäkymä ilman yläpalkkia: projektivalikko chatin sarakkeessa */
.studio-edit{height:100vh}
.chat-top{display:flex;align-items:center;gap:6px;height:52px;flex-shrink:0;padding:0 10px 0 6px;border-bottom:1px solid var(--line)}
.chat-top .grow{flex:1}
.chat-top .proj-menu{flex:0 1 auto;min-width:0;display:flex}
.chat-top .proj-menu summary{width:max-content;max-width:100%;min-width:0;margin-left:0}
.chat-top .proj-menu summary h1{font-size:15px;font-weight:600;font-family:var(--font-body);white-space:nowrap;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-top .side-toggle{display:none}
.preview-bar{min-height:52px}
@media (max-width:900px){.chat-top .side-toggle{display:inline-grid}}
@media (max-width:1000px){.studio-edit{height:auto}}
.seg-mini{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.seg-mini a{padding:4px 10px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none}
.seg-mini a.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(29,19,38,.08)}
.md-view{flex:1;overflow:auto;padding:22px clamp(16px,3vw,36px);max-width:820px;font-size:15px;line-height:1.65}
.md-view h1{font-size:24px;margin:0 0 14px}.md-view h2{font-size:19px;margin:24px 0 8px}.md-view h3{font-size:16px;margin:18px 0 6px}
.md-view pre{background:#1c1726;color:#ece7f2;padding:12px 14px;border-radius:10px;overflow:auto;font-size:13px}
.md-view code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--paper);padding:1px 5px;border-radius:5px}
.md-view pre code{background:none;padding:0}
.md-view table{border-collapse:collapse;width:100%;font-size:14px}.md-view th,.md-view td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.md-view a{color:var(--pink-ink)}
.code-pre code,.code-hl code{background:none!important;padding:0!important;border:0!important;border-radius:0!important;color:#ece7f2;font:inherit!important;display:block}
.an-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}.an-back:hover{color:var(--ink)}
/* Oma kävijäanalytiikka */
.oa{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:10px;margin:14px 0 22px;display:grid;gap:10px}
.oa-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.oa-metrics button{display:grid;gap:4px;text-align:left;padding:12px 14px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;color:var(--muted)}
.oa-metrics button small{font-size:13px}
.oa-metrics button b{font:600 22px/1.1 var(--font-display);color:var(--ink)}
.oa-metrics button.is-on{border-color:var(--line);background:var(--paper)}
.oa-metrics button.is-on small{color:var(--ink);font-weight:600}
.oa-chart{min-height:220px;border:1px solid var(--line);border-radius:12px;padding:18px 16px 10px;display:flex;flex-direction:column;justify-content:center}
.oa-svg{width:100%;height:180px;overflow:visible}
.oa-svg path{fill:none;stroke:var(--pink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.oa-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.oa-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:30px 16px}
.oa-empty p{margin:0;color:var(--muted);max-width:44ch;font-size:14px}
.oa-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--muted)}
.oa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.oa-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:6px;align-content:start}
.oa-card .hint{margin:4px 0 0}
.oa-card-head{display:flex;justify-content:space-between;font-size:14px;margin-bottom:2px}
.oa-card-head span{color:var(--muted)}
.oa-row{position:relative;display:flex;justify-content:space-between;gap:10px;padding:6px 8px;font-size:13.5px;border-radius:7px;overflow:hidden}
.oa-row i{position:absolute;inset:0 auto 0 0;background:var(--pink-soft);border-radius:7px}
.oa-row span,.oa-row b{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oa-row b{font-weight:600}
@media (max-width:760px){.oa-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.oa-grid{grid-template-columns:1fr}}
.cap-form{display:grid;gap:8px}
.cap-form .tfa-opt b{gap:8px}
.tfa-opt.is-locked{opacity:.55;cursor:not-allowed}
.cap-keys{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--paper)}
.cap-keys .field{margin:0}
.cap-form > .btn{justify-self:start}
.mg-title h3{font-size:16px;margin:6px 0 0}
/* Projektikortin ⋮-valikko (hover) */
.pcard-wrap{position:relative;display:flex}
.pcard-wrap .pcard{flex:1}
.pcard-more{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .12s;box-shadow:0 2px 8px rgba(28,23,38,.1)}
.pcard-wrap:hover .pcard-more,.pcard-more:focus-visible,.pcard-more.is-open{opacity:1}
@media (hover:none){.pcard-more{opacity:1}}
/* Agentin kysymyskortti chatissa */
.ask-card{margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:12px;background:var(--card)}
.ask-card.is-done{opacity:.6}
.ask-q{display:grid;gap:6px}
.ask-q > b{font-size:14px}
.ask-q .hint{margin:0;font-size:12px}
.ask-opts{display:flex;flex-wrap:wrap;gap:6px}
.ask-opt{padding:7px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);font:500 13.5px/1.2 var(--font-body);color:var(--ink);cursor:pointer;text-align:left}
.ask-opt:hover:not(:disabled){border-color:var(--ink)}
.ask-opt.is-on{border-color:var(--pink);background:var(--pink-soft);color:var(--ink)}
.ask-opt.is-other{color:var(--muted)}
.ask-opt:disabled{cursor:default}
.ask-other-input{height:36px;border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;font:14px var(--font-body)}
.ask-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code-tree-top{display:flex;gap:4px;align-items:center;margin-bottom:6px}
.code-tree-top .code-search{flex:1;margin:0 2px}
.code-dir{margin-top:4px}
.code-dir summary{list-style:none;display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.code-dir summary::-webkit-details-marker{display:none}
.code-dir summary:hover{background:var(--paper-2);color:var(--ink)}
.code-dir summary > svg:first-child{transition:transform .15s}
.code-dir:not([open]) summary > svg:first-child{transform:rotate(-90deg)}

.code-tree > *,.code-dir > *{flex-shrink:0}
.code-dir{display:flex;flex-direction:column;gap:1px}
/* Yhteydenotot analytiikassa */
.oa-contacts{display:grid;gap:10px;margin:0 0 22px}
.oa-sec-head h2{font-size:18px;margin:0}
.oa-sec-head .hint{margin:2px 0 0}
.oa-cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px}
.oa-big{align-content:center;gap:4px}
.oa-num{font:600 40px/1 var(--font-display);color:var(--pink-ink);margin:0}
.oa-big > span{font-size:14px;font-weight:600}
.oa-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.oa-mini span{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--paper);color:var(--muted)}
.oa-mini b{color:var(--ink)}
.oa-donut-card{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.oa-donut{width:120px;height:120px;border-radius:50%;display:grid;place-items:center}
.oa-donut span{width:84px;height:84px;border-radius:50%;background:var(--card);display:grid;place-content:center;text-align:center}
.oa-donut b{font:600 22px/1 var(--font-display)}
.oa-donut small{font-size:11px;color:var(--muted)}
.oa-legend{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.oa-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 42px;align-items:center;gap:8px;font-size:13.5px}
.oa-legend i{width:10px;height:10px;border-radius:3px}
.oa-legend small{color:var(--muted);text-align:right}
.oa-value{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
.oa-value .oa-num{font-size:30px;margin:6px 0 4px}
.oa-value-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.oa-value-form .field{margin:0}
@media (max-width:760px){.oa-cgrid,.oa-value{grid-template-columns:1fr}.oa-donut-card{grid-template-columns:1fr;justify-items:center}}
.sa-card .mg-head b{display:flex;align-items:center;gap:6px}
.sa-form{display:grid;gap:10px}
.sa-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sa-geo{display:flex;gap:8px;align-items:center;font-size:14px}
.sa-geo input{accent-color:var(--pink)}
.sa-form > .btn{justify-self:start}
@media (max-width:700px){.sa-plans{grid-template-columns:1fr}}
.pub-upsell{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:12px;margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,var(--pink-soft),transparent 60%)}
.pub-upsell .pu-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--card);color:var(--pink-ink)}
.pub-upsell p{margin:2px 0 0;font-size:13px}
.pub-upsell select{height:34px;border:1px solid var(--line-strong);border-radius:9px;padding:0 8px;font:13px var(--font-body);background:var(--card)}
@media (max-width:760px){.pub-upsell{grid-template-columns:auto minmax(0,1fr)}.pub-upsell select,.pub-upsell .sa-geo,.pub-upsell .btn{grid-column:1/-1}}
.sub-claim{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.sub-claim .hint{margin:0}
.sub-input{display:flex;align-items:center;max-width:460px;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--card)}
.sub-input input{flex:1;min-width:0;height:40px;border:0;padding:0 12px;font:500 15px var(--font-body);outline:none}
.sub-input span{padding:0 12px;color:var(--muted);font-size:14px;background:var(--paper);height:40px;display:grid;place-items:center;border-left:1px solid var(--line)}
.sub-claim .btn{justify-self:start}

/* ---------- Tumma teema: järjestelmän asetus tai oma valinta (profiilivalikko, data-theme) ---------- */
:root[data-theme="dark"]{color-scheme:dark;--paper:#141016;--paper-2:#1c1720;--card:#1e1922;--ink:#efeaf4;--muted:#a59db0;--faint:#9a92a6;--line:#2d2634;--line-strong:#3c3445;--pink-ink:#ff4f93;--ok-ink:#6ee7b7;--err-ink:#fca5a5;--warn-ink:#fcd34d;
  --pink-soft:rgba(250,33,118,.16);--ok-soft:#0f2a20;--warn-soft:#2b2410;--tint-pink:#2a1520;--err-soft:#2c1416;--kupla-oma:#2e2636;--valittu:#d9135c;--valittu-teksti:#fff;--merkki:#3c3445;--merkki-teksti:#efeaf4;--shadow-card:0 1px 3px rgba(0,0,0,.4);--shadow-pop:0 14px 34px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--paper:#141016;--paper-2:#1c1720;--card:#1e1922;--ink:#efeaf4;--muted:#a59db0;--faint:#9a92a6;--line:#2d2634;--line-strong:#3c3445;--pink-ink:#ff4f93;--ok-ink:#6ee7b7;--err-ink:#fca5a5;--warn-ink:#fcd34d;
  --pink-soft:rgba(250,33,118,.16);--ok-soft:#0f2a20;--warn-soft:#2b2410;--tint-pink:#2a1520;--err-soft:#2c1416;--kupla-oma:#2e2636;--valittu:#d9135c;--valittu-teksti:#fff;--merkki:#3c3445;--merkki-teksti:#efeaf4;--shadow-card:0 1px 3px rgba(0,0,0,.4);--shadow-pop:0 14px 34px rgba(0,0,0,.5)}}
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}:root[data-theme="dark"] .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none}:root:not([data-theme="light"]) .logo-dark{display:block}}
input,select,textarea{background:var(--card);color:var(--ink)}
.tfa-qr{background:#fff!important}
.serp{color-scheme:light}
.theme-seg{display:flex;gap:2px;padding:3px;margin:4px 8px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.theme-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:28px;border:0;border-radius:7px;background:none;color:var(--muted);font:500 12.5px var(--font-body);cursor:pointer}
.theme-seg button.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.me-foot{display:flex;align-items:center;gap:8px}
.me-foot form{flex:1;min-width:0;margin:0}
.theme-seg.theme-mini{margin:0;flex:0 0 auto}
.theme-seg.theme-mini button{flex:0 0 30px;width:30px;padding:0}
.me-sub > button{padding-left:38px !important;font-size:13.5px}
.serp{background:#fff!important}
/* WXR-tuonnin ikkuna */
.wxr-dialog{width:min(560px,calc(100vw - 32px))}
.wxr-dialog .hd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wxr-dialog .hd-head h2{margin:0}
.drop-zone{display:grid;justify-items:center;gap:6px;padding:26px 18px;border:2px dashed var(--line-strong);border-radius:14px;text-align:center;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}
.drop-zone b{color:var(--ink);font-size:14.5px}
.drop-zone small{font-size:12.5px}
.drop-zone:hover,.drop-zone.is-over{border-color:var(--pink);background:var(--pink-soft)}
.wxr-opts{border:0;margin:14px 0 0;padding:0;display:grid;gap:7px}
.wxr-opts legend{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.wxr-opts label{display:flex;gap:8px;align-items:center;font-size:14px}
.wxr-opts input{accent-color:var(--pink)}
.wxr-dialog .hint{margin:12px 0 0}
/* Viestien kellonajat */
.cmsg.me .msg-time{display:block;margin-top:4px;text-align:right;font-size:12px;color:var(--faint)}
.ma-time{order:3;padding:0 6px;font-size:12px;color:var(--faint);white-space:nowrap}
.ma-more{order:2}
.msg-actions{display:flex;align-items:center;flex-wrap:wrap;row-gap:2px} /* Tiedot rivittyvät kokonaisina, eivät "0,4 / krediittiä" (QA 22.10. E-16, B-20). */
.oc-time{display:block;margin-top:6px;padding:0}
/* Ajatteluilmaisin: pyörivä tähti (kuten Claudessa) ja vaihtuvat verbit */
.think{display:flex;align-items:center;gap:8px;margin:0}
.think-spin{display:inline-block;color:var(--pink-ink);font-size:17px;line-height:1;animation:think-spin 2.4s cubic-bezier(.6,0,.4,1) infinite;transform-origin:50% 52%}
@keyframes think-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}
[data-think-words]{transition:opacity .18s,transform .18s}
[data-think-words].is-swap{opacity:0;transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.think-spin{animation:none}[data-think-words]{transition:none}}
.demos.is-1{grid-template-columns:minmax(0,860px)}
.demos.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.demos.is-1,.demos.is-2{grid-template-columns:minmax(0,1fr)}}
/* Suunnitteluvaiheet: keskustelu vasemmalla, vaiheen sisältö oikealla */
.flow-split{display:grid;grid-template-columns:380px minmax(0,1fr);align-items:start}
.onboard-chat.is-side{position:sticky;top:56px;height:calc(100vh - 56px);min-height:0;max-width:none;margin:0;padding:0;border-right:1px solid var(--line);background:var(--card)}
.onboard-chat.is-side .oc-log{overflow:auto;padding:18px 16px 12px;gap:18px}
.onboard-chat.is-side .oc-composer{position:static;padding:8px 12px 12px;background:var(--card)}
.onboard-chat.is-side .cmsg.me{max-width:88%}
/* Ilmeiden valmiit palautenapit kirjoituskentän yläpuolella. Kosketuslaitteella yksi sormella vieritettävä rivi,
   ettei keskustelu kutistu; hiirellä rivitetty, koska vaakavieritys ei hiirellä löydy. */
.oc-ehdotukset{margin:0 0 8px;gap:6px}
@media (pointer:coarse){.oc-ehdotukset{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.oc-ehdotukset::-webkit-scrollbar{display:none}.oc-ehdotukset .chip-btn{flex:none;white-space:nowrap}}
.oc-busy{display:flex;align-items:center;gap:8px;margin:0 12px;padding:8px 12px;border-radius:10px;background:var(--pink-soft);font-size:13px;color:var(--ink)}
.oc-comment{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
/* Studion muisti: ilmoitus keskustelun vastauksen alla (partials/muisti-ilmoitus) ja Asetukset › Muisti. */
.muisti-ilmoitus{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);color:var(--muted);font-size:13.5px;line-height:1.5}
.muisti-ilmoitus p{margin:0;min-width:0;overflow-wrap:anywhere}
.muisti-ilmoitus b{color:var(--ink);font-weight:500}
.muisti-ilmoitus svg{flex:none;margin-top:3px;color:var(--ok-ink)}
.muisti-ilmoitus .link{white-space:nowrap}
.muisti-aihe{margin:18px 0 0}
.muisti-rivi .set-row b{font-weight:500;overflow-wrap:anywhere}
@media (max-width:1000px){.flow-split{grid-template-columns:minmax(0,1fr)}.onboard-chat.is-side{position:static;height:auto;max-height:70vh;border-right:0;border-bottom:1px solid var(--line);order:2}}
/* Chatin rinnalla vaiheen sisältö täyttää tilan (ei keskitettyä maksimileveyttä). */
.flow-split .work-body{max-width:none;margin:0;padding:14px clamp(14px,1.6vw,24px) 28px}
.flow-split .steps{margin-bottom:12px;padding-bottom:10px}
.flow-split .panel{padding:clamp(18px,2vw,28px);max-width:none}
.flow-split .panel .intro{max-width:72ch}
.flow-split .demos{gap:14px}
.demo .meta .inline{flex-wrap:wrap;gap:8px}.demo .meta .inline form{margin:0}
/* Työkalurivi: julkaistun sivuston tila ja linkki */
.pb-right{display:flex;align-items:center;gap:8px;justify-self:end;min-width:0}
.pb-live{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;color:var(--muted);text-decoration:none;font-size:12.5px;min-width:0;white-space:nowrap}
.pb-live i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);flex-shrink:0}
.pb-live span{color:var(--ok-ink);font-weight:600}
.pb-live b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;max-width:200px}
.pb-live:hover{border-color:var(--line-strong);background:var(--paper)}
@container pane (max-width:760px){.pb-live b{display:none}}
@container pane (max-width:560px){.pb-live span{display:none}}
.dns-more{margin-top:10px}
.dns-more summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted)}
.pub-progress{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--pink-soft)}
.pub-progress p{margin:2px 0 0}
.sa-trial{display:flex;align-items:center;gap:6px;margin:0;padding:8px 12px;border-radius:10px;background:var(--pink-soft);font-size:13.5px;font-weight:600;color:var(--ink)}
.bk-scope{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:7px}
.bk-scope li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.bk-scope li.is-on{color:var(--ink)}
.bk-scope li.is-on svg{color:var(--ok-ink)}
.bk-table td{vertical-align:middle}
.bk-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.bk-actions form{margin:0}
.bk-st{font-size:12.5px;font-weight:600}
.bk-st.is-run{color:var(--muted)}
.bk-st.is-ok{color:var(--ok-ink)}
.bk-st.is-err{color:var(--err-ink)}
.bk-confirm{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;font-size:14px}
.wxr-opts label.is-locked{opacity:.55}
.chat-queue{margin:0 12px 8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.cq-head{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cq-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cq-list li{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:13.5px;color:var(--ink)}
.cq-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Sivusto piilossa (keskustelu suurennettu): julkaisutila ja julkaisunappi chatin yläpalkkiin. */
.chat-top-pub{display:none;align-items:center;gap:8px;min-width:0}
.studio-edit.chat-wide .chat-top-pub{display:flex}
.chat-top-pub .pb-live{max-width:320px}
@media (max-width:1000px){.studio-edit.chat-wide .chat-top-pub{display:none}}
/* Sivupalkki tiiviisti: projekti yhdellä rivillä tilapalluralla, avoimen projektin keskustelut sen alla. */
.side-list .side-item{flex-direction:row;align-items:center;gap:9px;padding:6px 8px;min-height:32px}
.side-list .side-item .ptile{display:none}
.side-list .side-item .pname{flex:1;min-width:0;font-size:13.5px}
.pdot.is-hiljaa{background:var(--line-strong)}
.pdot.is-vastaa{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.pdot.is-valmis{background:#10b981}
.side-convs{display:flex;flex-direction:column;gap:1px;margin:0 0 6px 14px;padding-left:9px;border-left:1px solid var(--line)}
.side-convs form{margin:0}
.side-conv{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border-radius:8px;border:0;background:none;font:inherit;font-size:12.5px;color:var(--muted);text-decoration:none;text-align:left;cursor:pointer}
.side-conv span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.side-conv:hover{background:var(--paper);color:var(--ink)}
.side-conv.is-active{background:var(--paper);color:var(--ink);font-weight:600}
.side-conv-new svg{flex:none;color:var(--muted)}
@media (min-width:1001px){.side-mini .side-list .side-item .ptile{display:grid}.side-mini .side-list .side-item .pdot,.side-mini .side-list .side-item .pname,.side-mini .side-convs{display:none}}
.conv-menu summary{gap:6px;padding:4px 8px;margin-left:0}
.conv-menu .conv-ikoni{display:none;flex:none}
.conv-menu .conv-name{font-size:13.5px;font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-pop{min-width:280px}
.conv-item{display:flex;align-items:center;gap:8px}
.conv-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-item small{font-size:11.5px;color:var(--muted)}
.conv-item.is-on{font-weight:600}
.conv-busy{display:flex;align-items:center;gap:8px;margin:8px 0;padding:9px 12px;border-radius:10px;background:var(--paper);font-size:13px;color:var(--muted)}
/* Sivupalkin toiminnot hillitysti: uusi projekti reunuksellisena rivinä, navigointi pienempänä, haku pikanäppäimellä. */
.side-new{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;margin:2px 0 6px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:600 13.5px/1 var(--font-body);cursor:pointer;transition:background .15s,border-color .15s}
.side-new svg{color:var(--pink-ink)}
.side-new:hover{background:var(--paper);border-color:var(--line-strong)}
.side .side-nav{gap:9px;padding:7px 10px;margin-top:1px;font-size:13.5px;color:var(--ink)}
.side .side-nav svg{color:var(--muted)}
.side-search{width:100%;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
.side-search kbd{margin-left:auto;padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:500 11px/1.5 var(--font-body);color:var(--muted)}
@media (min-width:1001px){.side-mini .side-new{width:44px;height:40px;padding:0;justify-content:center}.side-mini .side-search kbd{display:none}}
/* cmd+K */
.cmdk{width:min(640px,calc(100vw - 32px));max-width:none;margin:12vh auto auto;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:0 24px 64px rgba(20,10,30,.22)}
.cmdk::backdrop{background:rgba(20,10,30,.28)}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.cmdk-input input,.cmdk-input input:focus{flex:1;min-width:0;height:auto;padding:4px 0;border:0!important;outline:0;box-shadow:none!important;background:none!important;font:500 16px var(--font-body);color:var(--ink)}
.cmdk-input input::-webkit-search-cancel-button{display:none}
.cmdk kbd{padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:500 11px/1.5 var(--font-body);color:var(--muted)}
.cmdk-list{max-height:min(420px,56vh);overflow:auto;padding:6px}
.cmdk-group{padding:10px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cmdk-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.cmdk-item.is-on{background:var(--paper)}
.cmdk-item .ci-ico{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--paper);color:var(--muted)}
.cmdk-item.is-on .ci-ico{background:var(--pink-soft);color:var(--pink-ink)}
.cmdk-item .ci-txt{display:flex;flex-direction:column;min-width:0}
.cmdk-item b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:14px}
.cmdk-foot{display:flex;gap:16px;margin:0;padding:9px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.cmdk-foot span{display:flex;align-items:center;gap:4px}
@media (max-width:620px){.cmdk{margin-top:8px}.cmdk-foot{display:none}}
/* Haun sulkunappi puhelimella (QA 13.10.2026: puhelimessa ei ole Esc-näppäintä); työpöydällä Esc-vihje. */
.cmdk-yla{display:flex;align-items:center;gap:4px;padding-right:8px;border-bottom:1px solid var(--line)}
.cmdk-yla .cmdk-input{flex:1;min-width:0;border-bottom:0}
.cmdk-sulje{display:none;flex:none}
@media (pointer:coarse),(max-width:620px){.cmdk-sulje{display:grid}.cmdk-esc{display:none}}
.side-all{margin:4px 0 2px;padding-left:10px}
@media (min-width:1001px){.side-mini .side-all{display:none}}
p.side-label{margin:0}
/* Etusivu: leveä näkymä, tervehdys ja chat-kenttä hehkun päällä, projektit paneelissa haulla ja suodattimilla. */
.work-body.home{max-width:1480px;padding:clamp(16px,2.4vw,32px)}
.home-hero{position:relative;max-width:820px;margin:clamp(24px,8vh,96px) auto clamp(36px,6vh,64px);text-align:center;isolation:isolate}
.home-glow{position:absolute;inset:-90px -160px -40px;z-index:-1;background:radial-gradient(45% 55% at 30% 45%,rgba(250,33,118,.20),transparent 70%),radial-gradient(40% 55% at 72% 40%,rgba(168,85,247,.18),transparent 70%),radial-gradient(35% 45% at 50% 85%,rgba(255,138,76,.14),transparent 70%);filter:blur(22px);pointer-events:none}
.home-hero h1{margin:0 0 10px;font:700 clamp(30px,4.2vw,48px)/1.12 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.home-sub{margin:0 auto 26px;max-width:560px;color:var(--muted);font-size:16px;line-height:1.55}
.home-prompt{display:flex;flex-direction:column;gap:6px;padding:16px 16px 12px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 50px rgba(40,10,60,.12),0 2px 6px rgba(40,10,60,.05);transition:border-color .15s,box-shadow .15s}
.home-prompt:focus-within{border-color:color-mix(in srgb,var(--pink) 45%,var(--line));box-shadow:0 20px 56px rgba(250,33,118,.14),0 2px 6px rgba(40,10,60,.05)}
.home-prompt textarea,.home-prompt textarea:focus{width:100%;min-height:56px;resize:none;border:0!important;outline:0;box-shadow:none!important;background:none!important;padding:4px 6px!important;font:500 17px/1.5 var(--font-body);color:var(--ink)}
.home-prompt-row{display:flex;align-items:center;gap:10px}
.home-hint{flex:1;font-size:12px;color:var(--faint)}
.home-hint kbd{padding:0 5px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font:500 11px/1.6 var(--font-body);color:var(--muted)}
.home-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
/* Pikanapit (Somejulkaisut, Mainosvideo, Uusi sivusto): ikoni ja teksti erillään, linkki näyttää napilta. */
.home-chips .chip-btn{display:inline-flex;align-items:center;gap:6px}
.home-chips a.chip-btn{text-decoration:none}
.home-panel{padding:clamp(14px,1.6vw,22px);background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card);scroll-margin-top:80px}
.home-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.home-search{display:flex;align-items:center;gap:8px;flex:0 1 300px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--muted)}
.home-search input,.home-search input:focus{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:none!important;padding:0!important;font:500 14px var(--font-body);color:var(--ink);outline:0}
/* Kenttä on reunaton, joten kohdistus näkyy kääreessä samoin kuin muilla kentillä (QA 22.10. E-03). */
.home-search:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.home-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:12px;background:var(--paper)}
.home-tab{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--muted);font:600 13px var(--font-body);cursor:pointer}
.home-tab small{font-size:11.5px;color:var(--faint);font-weight:600}
.home-tab:hover:not(:disabled){color:var(--ink)}
.home-tab.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,10,30,.08)}
.home-tab:disabled{opacity:.45;cursor:default}
.home-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.home-cards .pcard{border-radius:16px}
.pcard-uusi-lomake{display:flex;margin:0}
.home-cards .pcard.pcard-uusi{flex:1;align-items:center;justify-content:center;gap:6px;min-height:180px;padding:24px;text-align:center;border-style:dashed;background:transparent;font:inherit;cursor:pointer}
.pcard-uusi:hover{border-color:var(--pink)}
.pcard-uusi-ikoni{display:grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:16px;background:var(--pink-soft);color:var(--pink-ink)}
.pcard-uusi b{font-size:15px}
.pcard-uusi small{max-width:28ch;color:var(--muted);font-size:13px;line-height:1.45}
.home-cards .pcard-thumb{aspect-ratio:16/10;container-type:inline-size}
.home-cards .pcard-thumb iframe{width:400%;height:400%;transform:scale(.25)}
.pcard-thumb .pcard-tile{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--c);color:#fff!important;font:700 28px/1 var(--font-display)!important;box-shadow:0 10px 24px color-mix(in srgb,var(--c) 35%,transparent)}
.pcard-step{position:absolute;left:12px;bottom:10px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--card) 85%,transparent);font-size:11.5px;font-weight:600;color:var(--muted)}
.pcard-thumb .pcard-badge{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:700 11.5px/1.4 var(--font-body);color:#059669}
.pcard-badge i{width:7px;height:7px;border-radius:50%;background:#10b981}
.home-cards .pcard-body{padding:12px 14px 14px;gap:3px}
.home-cards .pcard-body b{display:flex;align-items:center;gap:8px;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-empty{padding:28px;text-align:center;color:var(--muted)}
@media (max-width:620px){.home-hero{margin-top:12px}.home-hint{display:none}.home-search{flex:1 1 100%}}
/* Pienennetty sivupalkki: täysi logo piiloon myös tummassa teemassa (teeman .logo-dark-sääntö on tarkempi). */
@media (min-width:1001px){.side-mini .brand .brand-full{display:none!important}}
.inspire .home-panel{margin-top:4px}
.insp-tabs{margin-bottom:16px;width:max-content;max-width:100%}
.insp-card{cursor:default}
.insp-card:hover{transform:none}
.insp-card .pcard-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.insp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.insp-actions form{margin:0}
.modlib .mg-flash{margin:0 0 14px}
.modlib-slots{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 18px;margin-bottom:14px}
.modlib-slots .hint{margin:4px 0 0}
.modlib-slots .mg-meter{grid-column:1/-1;grid-row:2}
@media (max-width:620px){.modlib-slots{grid-template-columns:1fr}.modlib-slots .btn{justify-self:start}}
.modlib-grid .mod{min-height:190px}
.modlib-grid .mod-act{margin-top:auto;padding-top:6px}
.modlib-where{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px!important;color:var(--ok-ink)!important}
.modlib-where a{color:inherit;font-weight:600}
.modlib-form{display:flex;flex-wrap:wrap;gap:8px}
.modlib-form select{min-width:0;flex:1 1 140px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:13.5px}
.pcard-thumb .insp-new{color:var(--pink-ink)}
.insp-peek{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(18,12,24,0);color:#fff;text-decoration:none;transition:background .2s var(--ease)}
.insp-peek span{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:rgba(18,12,24,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 13.5px/1 var(--font-body);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.insp-peek:hover,.insp-peek:focus-visible{background:rgba(18,12,24,.5)}
.insp-peek:hover span,.insp-peek:focus-visible span{opacity:1;transform:none}
.insp-peek:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
.insp-card .pcard-thumb .pcard-step,.insp-card .pcard-thumb .pcard-badge{z-index:3;pointer-events:none}
@media (hover:none){.insp-peek span{opacity:1;transform:none;padding:7px 12px;font-size:12.5px}.insp-peek{place-items:end;padding:10px}}
/* Aloituspohjan esikatselu omalla sivullaan */
.ip-body{margin:0;height:100dvh;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}
.ip-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:56px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.ip-left{display:flex;align-items:center;gap:12px;min-width:0}
.ip-back{flex-shrink:0}
.ip-title{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ip-title b{font:600 14.5px/1.3 var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-title small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-center{display:flex;align-items:center;gap:10px}
.ip-devices,.ip-nav{display:flex;align-items:center;gap:2px;height:36px;padding:2px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.ip-devices .pb-icon.is-on{background:var(--card);color:var(--pink-ink);box-shadow:0 1px 3px rgba(29,19,38,.1)}
.ip-nav span{min-width:52px;text-align:center;font:500 12.5px/1 var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}
.ip-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.ip-right form{margin:0}
.ip-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:14px;overflow:auto}
.ip-stage iframe{width:100%;height:100%;border:0;border-radius:10px;background:#fff;box-shadow:var(--shadow-card);transition:width .25s var(--ease)}
.ip-stage.is-tablet iframe{width:820px;max-width:100%}
.ip-stage.is-mobile iframe{width:390px;max-width:100%}
@media (max-width:820px){.ip-bar{grid-template-columns:minmax(0,1fr) auto}.ip-center{grid-column:1/-1;order:3;justify-content:center}.ip-devices{display:none}.ip-back span,.ip-title small{display:none}.ip-stage{padding:0}.ip-stage iframe{border-radius:0}}
.home-prompt.is-drop{border-color:var(--pink);background:color-mix(in srgb,var(--pink-soft) 40%,var(--card))}
.home-prompt.is-new{border-color:color-mix(in srgb,var(--pink) 45%,var(--line))}
.home-files{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.home-files .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:12.5px}
.home-files .chip button{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.home-prompt-row .plus-btn{flex:none}
.side-new,.side-new:hover{text-decoration:none}
.home-prompt .send-btn{width:38px;height:38px}
.home-prompt .send-btn:not(:disabled){background:var(--pink)}
/* Käyttörajan ilmoitus chatin yläpuolella. */
.usage-banner{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 10px 9px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 1px 2px rgba(20,10,30,.04)}
.usage-banner>svg{flex:none;color:var(--warn-ink)}
.usage-banner.is-virhe>svg{color:var(--err-ink)}
.usage-banner .ub-txt{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px}
.usage-banner .ub-txt b{font-weight:600;color:var(--ink)}
.usage-banner .ub-txt small{color:var(--muted);font-size:12.5px}
.usage-banner .btn{flex:none}
.ub-x{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.ub-x:hover{background:var(--paper);color:var(--ink)}
.oc-composer + .ub-kehys .usage-banner,.onboard-chat .usage-banner{margin-left:0;margin-right:0}
.plan-switches .alv-toggle{flex:0 1 auto;min-width:0}

/* Kirjautuminen ja tilin luonti (studio/auth/frame): lomake vasemmalla, DigiSillan aalto ja pohjat oikealla. Aina vaalea. */
.auth-body{margin:0;background:#f7f8fc;color:#121633;font-family:Figtree,system-ui,sans-serif;color-scheme:light}
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
.auth-vasen{display:flex;flex-direction:column;align-items:center;padding:28px 24px 22px}
.auth-logo{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.auth-logo img{height:26px;width:auto}
.auth-logo span{font:700 11.5px/1 Figtree,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(100deg,#ff0f6f,#b3179b 52%,#4b2aa8);padding:5px 9px;border-radius:999px}
.auth-kortti{width:100%;max-width:420px;margin:auto 0;padding:40px 0}
.auth-kortti h1{font:800 clamp(30px,4vw,40px)/1.05 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.025em;margin:0 0 10px;color:#121633}
.auth-intro,.auth-kortti .intro{margin:0 0 24px;color:#5d6180;font-size:16px;line-height:1.5}
.auth-kortti .field{margin-bottom:16px}
.auth-kortti .field label{display:block;margin-bottom:6px;font:600 14px/1.3 Figtree,sans-serif;color:#2b2f52}
.auth .auth-kortti input:not([type=checkbox]):not([type=radio]):not([type=hidden]){width:100%;height:50px;padding:0 16px;border:1.5px solid #e1e4ef;border-radius:14px;background:#fff;font:400 16px Figtree,sans-serif;color:#121633;transition:border-color .15s,box-shadow .15s}
.auth .auth-kortti input:not([type=checkbox]):not([type=radio]):focus{outline:none;border-color:#b3179b;box-shadow:0 0 0 4px rgba(179,23,155,.12)}
.auth-kortti input::placeholder{color:#6b6f8a}
.auth-kortti .hint{display:block;margin-top:6px;font-size:13px;color:#5d6180}
.auth-kortti .err{margin:4px 0 14px;padding:10px 14px;border-radius:12px;background:#fff0f4;color:#b0124f;font-size:14.5px}
.auth-kortti .link{color:#b3179b;font-weight:600;text-decoration:none}
.auth-kortti .link:hover{text-decoration:underline}
.auth-pw{position:relative}
.auth-pw input{padding-right:84px !important}
.auth-pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:34px;padding:0 12px;border:0;border-radius:10px;background:#f1f2f8;color:#2b2f52;font:600 13px Figtree,sans-serif;cursor:pointer}
.auth-pw button:hover{background:#e7e9f3}
.auth-google{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px #e1e4ef;color:#121633;font:600 16px Figtree,sans-serif;text-decoration:none;transition:box-shadow .15s,transform .15s}
.auth-google:hover{box-shadow:inset 0 0 0 1.5px #c9cde0,0 6px 16px -8px rgba(18,22,51,.25);transform:translateY(-1px)}
.auth-tai{display:flex;align-items:center;gap:12px;margin:22px 0;color:#5d6180;font-size:13.5px}
.auth-tai::before,.auth-tai::after{content:"";flex:1;height:1px;background:#e4e6f0}
.auth-laheta,.auth-kortti .btn-primary{width:100%;height:52px;border:0;border-radius:14px;background:linear-gradient(100deg,#ff0f6f,#b3179b 52%,#4b2aa8);color:#fff;font:700 16px Figtree,sans-serif;box-shadow:0 10px 26px -12px rgba(179,23,155,.75);cursor:pointer;justify-content:center}
.auth-laheta:hover{filter:brightness(1.05)}
.auth-laheta:disabled{opacity:.75;cursor:progress}
.auth-muista{display:flex;gap:9px;align-items:center;margin:2px 0 18px;font-size:14.5px;color:#2b2f52}
.auth-muista input{width:18px;height:18px;accent-color:#b3179b}
/* Ehto- ja lupateksti kertoo, mitä hyväksytään: sama 5,7:1 harmaa kuin kirjautumissivun muut ohjeet (QA 22.10. k3 E-38:
   ennen #7a7e98 13 px, 3,8:1). Kirjautumissivut ovat aina vaaleat (color-scheme:light), joten väri on kiinteä. */
.auth-ehdot{margin:14px 0 0;font-size:14px;line-height:1.5;color:#5d6180;text-align:center}
.auth-tarjoukset{margin-bottom:12px;font-size:14px}
.auth-vaihda{margin:26px 0 0;text-align:center;font-size:15px;color:#5d6180}
.auth-ok{margin:0 0 18px;padding:10px 14px;border-radius:12px;background:#ecfdf5;color:var(--ok-ink);font-size:14.5px}
.auth-odottaa{margin:0 0 20px;padding:14px 16px;border-radius:16px;background:linear-gradient(100deg,rgba(255,15,111,.08),rgba(75,42,168,.08));font-size:14.5px;line-height:1.5;color:#121633}
.auth-odottaa b{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:14px}
.auth-odottaa q{display:block;font-style:normal;color:#2b2f52}
.auth-odottaa small{display:block;margin-top:6px;color:#5d6180;font-size:13.5px}
.auth-ala{font-size:13px;color:#5d6180;text-align:center}
.auth-ala a{color:inherit}
.auth-oikea{position:relative;overflow:hidden;margin:12px;border-radius:28px;background:#fbfaff;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(32px,5vw,64px)}
.auth-aalto{position:absolute;inset:0;z-index:-1}
.auth-aalto i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.9;animation:auth-liu 18s ease-in-out infinite alternate}
.auth-aalto i:nth-child(1){width:70%;height:55%;left:-20%;bottom:-18%;background:#ff5fb2}
.auth-aalto i:nth-child(2){width:65%;height:50%;right:-20%;bottom:-10%;background:#ff3c95;animation-duration:22s}
.auth-aalto i:nth-child(3){width:80%;height:40%;left:10%;bottom:8%;background:#5c86ff;animation-duration:20s;animation-direction:alternate-reverse}
.auth-aalto i:nth-child(4){width:50%;height:35%;left:30%;bottom:-8%;background:#9b6bff;animation-duration:24s}
@keyframes auth-liu{to{transform:translate(6%,-6%) scale(1.1)}}
.auth-viesti{position:relative}
.auth-kicker{margin:0 0 14px;font:700 12.5px/1 Figtree,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff0f6f}
.auth-otsikko{margin:0;font:800 clamp(34px,3.6vw,54px)/1.04 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.03em;color:#121633}
.auth-otsikko span{background:linear-gradient(100deg,#ff0f6f,#b3179b 52%,#4b2aa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-viesti ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;font-size:16px;font-weight:600;color:#2b2f52}
.auth-viesti li{display:flex;gap:10px;align-items:center}
.auth-viesti li::before{content:"";width:20px;height:20px;flex-shrink:0;border-radius:50%;background:#14a37f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.auth-kuvat{position:relative;height:clamp(220px,32vh,340px);margin-top:32px}
.auth-kuvat img{position:absolute;width:58%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:16px;box-shadow:0 30px 60px -24px rgba(40,20,90,.55)}
.auth-kuvat img:nth-child(1){left:0;bottom:6%;transform:rotate(-5deg)}
.auth-kuvat img:nth-child(2){left:22%;bottom:22%;z-index:2}
.auth-kuvat img:nth-child(3){right:0;bottom:2%;transform:rotate(5deg)}
@media (max-width:960px){.auth{grid-template-columns:1fr}.auth-oikea{display:none}.auth-vasen{background:radial-gradient(90% 40% at 50% 0%,rgba(255,95,178,.18),rgba(247,248,252,0) 70%)}}
@media (prefers-reduced-motion:reduce){.auth-aalto i{animation:none}}

/* Mediakirjasto: välilehdet, latausalue, suodattimet, video- ja PDF-kortit sekä kuvapankki */
.mk-tabs{display:flex;gap:4px;margin:6px 0 18px;border-bottom:1px solid var(--line)}
.mk-tabs button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);font:600 14px var(--font-body);cursor:pointer}
.mk-tabs button small{font-weight:500;color:var(--muted)}
.mk-tabs button.is-on{color:var(--ink);border-bottom-color:var(--pink)}
.mk-drop{position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px;margin-bottom:18px;border:2px dashed var(--line-strong);border-radius:16px;background:var(--card);transition:border-color .15s,background .15s}
.mk-drop.is-over{border-color:var(--pink);background:var(--pink-soft)}
.mk-drop b{font-weight:600}
.mk-drop .hint{margin:4px 0 0}
.mk-drop-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--pink-soft);color:var(--pink-ink);flex-shrink:0}
.mk-progress{position:absolute;left:24px;right:24px;bottom:10px;height:4px;border-radius:4px;background:var(--paper);overflow:hidden}
.mk-progress i{display:block;height:100%;width:0;background:var(--pink);transition:width .2s}
.mk-tyokalut{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.mk-tyokalut .grow{flex:1}
.mk-tyokalut .seg button small{opacity:.7;margin-left:3px}
.mk-valinta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Puhelimella valinnan napit alareunan palkkiin, kun jotain on valittu (QA k3 E-33). */
@media (max-width:640px){
  .mk-valinta.is-valittu{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;justify-content:flex-end;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop)}
  .mk-valinta.is-valittu .btn{min-height:44px}
  [data-media]:has(.mk-valinta.is-valittu) .media-grid{padding-bottom:88px}
}
.mk-haku{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--muted)}
.mk-haku input{border:0 !important;outline:0;background:none !important;box-shadow:none !important;padding:0 !important;height:auto !important;min-width:160px;font-size:14px}
.mk-haku-iso{flex:1;height:46px;border-radius:12px}
.mk-haku-iso input{font-size:16px}
.media-item video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.mk-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;padding:12px;text-align:center;background:var(--paper);color:var(--muted)}
.mk-pdf b{font-size:12.5px;color:var(--ink);font-weight:600;word-break:break-word}
.mk-tyyppi{position:absolute;left:6px;bottom:30px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 11px var(--font-body)}
.mk-kopioi{position:absolute;right:6px;bottom:30px;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.92);color:#333;opacity:0;cursor:pointer;transition:opacity .15s}
.media-item:hover .mk-kopioi,.mk-kopioi:focus-visible{opacity:1}
.mk-kopioi.is-ok{background:#10b981;color:#fff;opacity:1}
.mk-tyhja{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;text-align:center;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.mk-tyhja p{max-width:520px;margin:0}
.mk-tyhja b{color:var(--ink)}
.mk-pankki-haku{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.mk-pankki-haku .btn{height:46px}
.mk-ehdotukset{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mk-tulokset{columns:4 220px;column-gap:12px;margin-top:14px}
.mk-pankki-kuva{margin:0 0 14px;break-inside:avoid}
.mk-pankki-kehys{position:relative;border-radius:12px;overflow:hidden}
.mk-pankki-kuva img{display:block;width:100%;height:100%;object-fit:cover}
.mk-pankki-kuva figcaption{padding:6px 2px 0;font-size:12px;line-height:1.4;color:var(--muted)}
.mk-pankki-lisaa{position:absolute;top:8px;right:8px;height:32px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:#111;font:600 12.5px var(--font-body);box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:0;cursor:pointer;transition:opacity .15s}
.mk-pankki-kuva:hover .mk-pankki-lisaa,.mk-pankki-lisaa:focus-visible,.mk-pankki-kuva.is-lisatty .mk-pankki-lisaa{opacity:1}
.mk-pankki-kuva.is-lisatty .mk-pankki-lisaa{background:#10b981;color:#fff}
@media (hover:none){.mk-pankki-lisaa,.mk-kopioi{opacity:1}}

/* Hallinta → Yhteydet: projektikohtainen käyttö ja rajaus */
.mg-yhteydet{display:grid;gap:10px}
.mg-yhteys{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.mg-yhteys-rivi{display:flex;align-items:center;gap:12px;cursor:pointer}
.mg-yhteys-rivi > span{flex:1;display:flex;flex-direction:column}
.mg-yhteys-rivi small{font-size:12.5px}
.mg-yhteys-rajaus{margin:10px 0 0 38px}
.mg-kytkin{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.mg-kytkin::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.mg-kytkin:checked{background:var(--pink)}
.mg-kytkin:checked::after{transform:translateX(16px)}
.mk-lisatyt{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:8px;margin:10px 0;padding:10px 14px;border-radius:12px;background:#ecfdf5;color:var(--ok-ink);font-size:14px;font-weight:500;box-shadow:0 4px 14px -6px rgba(4,120,87,.35)}
.mk-lisatyt .link-btn{margin-left:auto;font-weight:600}
.mk-puhelin-nappi{margin-left:auto;flex-shrink:0}
.mk-puhelin{display:flex;gap:20px;align-items:flex-start;margin:-6px 0 18px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.mk-qr{width:150px;height:150px;flex-shrink:0;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.mk-qr svg{display:block;width:100%;height:100%}
.mk-puhelin-teksti{display:flex;flex-direction:column;gap:8px;min-width:0}
.mk-puhelin-teksti .hint{margin:0}
.mk-sms input{max-width:220px}
@media (max-width:640px){.mk-drop{flex-wrap:wrap}.mk-puhelin-nappi{margin-left:0}.mk-puhelin{flex-direction:column}}
.mk-kiintio{margin:0 0 8px;font-size:13.5px;color:var(--muted)}
.mk-kiintio b{color:var(--ink)}

/* Projektit-näkymän Inspiroidu-pohjat */
.home-panel+.home-panel{margin-top:18px}
.home-pohjat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.home-pohjat-head h2{margin:0 0 4px;font:600 18px/1.3 var(--font-display)}
.home-pohjat-head .hint{margin:0}
.home-pohjat-rivi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.home-pohja{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.home-pohja-kuva{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:6px;background:var(--paper)}
.home-pohja-kuva img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s var(--ease)}
.home-pohja:hover .home-pohja-kuva img{transform:scale(1.03)}
.home-pohja:hover .insp-peek{background:rgba(18,12,24,.45)}
.home-pohja:hover .insp-peek span{opacity:1;transform:none}
.home-pohja b{font-size:13.5px;font-weight:600}
.home-pohja small{font-size:12px;color:var(--muted)}
@media (max-width:1100px){.home-pohjat-rivi{grid-template-columns:repeat(3,minmax(0,1fr))}.home-pohja:nth-child(n+4){display:none}}
@media (max-width:600px){.home-pohjat-rivi{grid-template-columns:repeat(2,minmax(0,1fr))}.home-pohja:nth-child(n+3){display:none}}

/* Korotusikkuna: yksi ratkaisu, kun tilaus ei riitä */
.korotus{width:min(440px,calc(100vw - 32px));border:0;border-radius:22px;padding:30px 28px 22px;box-shadow:0 40px 100px rgba(20,10,30,.35);text-align:center;background:var(--card);color:var(--ink)}
.korotus::backdrop{background:rgba(18,12,30,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.korotus-x{position:absolute;top:12px;right:12px}
.korotus-ikoni{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(100deg,#ff0f6f,#b3179b 52%,#4b2aa8);color:#fff;margin-bottom:14px}
.korotus h2{margin:0 0 8px;font:600 22px/1.25 var(--font-display)}
.korotus-teksti{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.5}
.korotus-hyodyt{list-style:none;margin:0 0 18px;padding:14px 16px;border-radius:14px;background:var(--paper);text-align:left;display:grid;gap:8px;font-size:14px}
.korotus-hyodyt:empty{display:none}
.korotus-ehdot{display:grid;gap:8px;margin:0 0 14px;text-align:left;font-size:14px}
.korotus-hyodyt li{display:flex;gap:8px}
.korotus-hyodyt li::before{content:"✓";color:#14a37f;font-weight:700}
.korotus-hinta{margin:0 0 10px;font:600 15px var(--font-body)}
.korotus-nappi{width:100%;justify-content:center;height:46px;font-size:15.5px}
.korotus form{margin:0}
.korotus-ei{margin-top:12px;color:var(--muted)}

/* Tilauksen kassa */
.kassa-sivu{max-width:1120px}
.kassa-takaisin{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;margin-bottom:10px}
.kassa-otsikko{font:700 clamp(26px,3.4vw,34px)/1.15 var(--font-display);margin:0 0 22px}
.kassa{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media (max-width:1100px){.kassa{grid-template-columns:minmax(0,1fr)}.kassa-yhteenveto{position:static}}
.kassa-vaiheet{display:grid;gap:18px}
.kassa-osa{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,26px);box-shadow:var(--shadow-card)}
.kassa-osa h2{display:flex;align-items:center;gap:10px;font:700 18px/1.3 var(--font-display);margin:0 0 16px}
.kassa-nro{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink);font:700 14px/1 var(--font-body);flex:none}
.kassa-valinnat{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.kassa-valinnat{grid-template-columns:minmax(0,1fr)}}
.kassa-valinnat .c{padding:18px}
.kassa-valinnat .c svg{color:var(--pink-ink);margin-bottom:8px}
.kassa-osoite{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr);gap:12px}
.kassa-osoite-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.kassa-osoite,.kassa-osoite-2{grid-template-columns:minmax(0,1fr);gap:0}}
.kassa-osa .field .inline{display:flex;gap:8px}
.kassa-osa .field .inline input{flex:1}
.kassa-lasku{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.kassa-lasku>.seg{margin-bottom:16px}
.kassa-vl-ehdotukset{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.kassa-vl-ehdotukset .hint{flex-basis:100%;margin:0}
.kassa-vl-ehdotukset .is-on{border-color:var(--pink);color:var(--pink-ink)}
.kassa-ehdot{display:grid;gap:12px}
.kassa-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.kassa-check input{margin-top:4px;width:18px;height:18px;accent-color:var(--pink);flex:none}
.kassa-ehdot .hint{margin:0 0 0 28px}
.kassa-yhteenveto{position:sticky;top:84px}
.kassa-kortti{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card)}
.kassa-pieni{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.kassa-kortti h2{font:700 22px/1.2 var(--font-display);margin:0 0 6px}
.kassa-hyodyt{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px;font-size:14.5px}
.kassa-hyodyt li{display:flex;gap:8px;align-items:flex-start}
.kassa-hyodyt svg{color:var(--pink-ink);flex:none;margin-top:3px}
.kassa-hinnat{margin:0;padding:14px 0 4px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14.5px}
.kassa-hinnat div{display:flex;justify-content:space-between;gap:12px}
.kassa-hinnat dt{color:var(--muted)}
.kassa-hinnat dd{margin:0;font-variant-numeric:tabular-nums}
.kassa-hinnat .kassa-yht{padding-top:10px;border-top:1px solid var(--line);font-weight:700;font-size:16px}
.kassa-hinnat .kassa-yht dt{color:var(--ink)}
.kassa-vaihto{margin-top:10px}.kassa-vaihto .kassa-hinnat{padding-top:10px}.kassa-vaihto .hint{margin:6px 0 0}
.kassa-nappi{width:100%;justify-content:center;margin-top:18px}
.kassa-nappi[disabled]{opacity:.5;cursor:not-allowed}
.kassa-huom{font-size:13.5px;margin:10px 0 0}
/* Mobiili (puhelin ja tabletti, myös Safari). Tiedoston lopussa, jotta myöhemmät yleissäännöt eivät kumoa näitä. */
.side-scrim{display:none}
/* Vaihepalkin piilotetut otsikot pysyvät oman rivinsä sisällä (muuten ne levittävät sivua vierityksen ohi). */
.steps li{position:relative}
@media (max-width:900px){
  /* Sivupalkki laatikkona: korkeus inset-arvoista (Safarin 100vh jää alapalkin alle), tausta sulkee. */
  .side{height:auto;overscroll-behavior:contain;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .side-open .side-scrim{display:block;position:fixed;inset:0;z-index:59;background:rgba(20,10,30,.45);-webkit-tap-highlight-color:transparent}
  body.side-open{overflow:hidden}
  .side-pop{z-index:61}
  .me-pop{max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto}
  /* Mikään näkymä ei saa levittää sivua vaakasuunnassa (hehkut, leveät rivit). */
  .work{overflow-x:clip}
}
@media (max-width:1000px){
  /* Muokkaus: chat ja sivusto allekkain. Jakajan sarakesääntö (var(--chat-w)) ei koske kapeaa näyttöä. */
  .studio-edit,.studio-edit.chat-wide{grid-template-columns:minmax(0,1fr)}
  .studio-edit .chat{height:60vh;height:60dvh}
  .studio-edit.chat-wide .chat{height:100vh;height:100dvh;border-bottom:0}
  .studio-edit.chat-wide .preview-pane{display:none}
  /* Tiedostot, Koodi ja Hallinta saavat saman korkeuden kuin esikatselu (QA 5.10.2026: Hallinta 150 px puhelimella). */
  .preview-pane .pane-panel:not([hidden]){display:flex;flex-direction:column;min-height:85vh;min-height:85dvh}
  .preview-pane .pane-panel iframe{flex:1;min-height:85vh;min-height:85dvh}
}
@media (max-width:640px){
  /* Yläpalkin napit pelkkinä ikoneina, jotta otsikko ja napit mahtuvat riville. */
  .work-top{padding:0 12px;gap:8px}
  .work-top > .btn,.work-top > a.btn,.work-top > form .btn{font-size:0;gap:0;padding:0 9px}
  /* Ikoninapit vähintään 44 × 44 px, ja päätoiminto pitää lyhyen tekstinsä ("+ Uusi"), jotta aloittelija tietää,
     mitä nappi tekee (QA 22.10. E-06). Napin koko nimi on aria-labelissa. */
  .work-top > .btn,.work-top > a.btn,.work-top > form .btn{min-width:44px;min-height:44px;justify-content:center}
  .work-top > .btn-primary,.work-top > a.btn-primary,.work-top > form .btn-primary{font-size:13px;gap:6px;padding:0 12px}
  .work-top .ylapalkki-lisa{display:none}
  /* Toissijainen nappi, jonka pelkkä ikoni jäisi arvoitukseksi (Saapuneiden ✓, QA 22.10. k2 E-29), pitää lyhyen tekstin. */
  .work-top > .btn.ylapalkki-teksti,.work-top > form .btn.ylapalkki-teksti{font-size:13px;gap:6px;padding:0 12px}
  .work-top .ylapalkki-lyhyt{display:inline}
}
.ylapalkki-lyhyt{display:none}
/* Saapuneet sivupalkin päätasolla vain puhelimella, kun lukemattomia on (QA 22.10. k2 E-26). */
.side .side-saapuneet{display:none}
@media (max-width:900px){.side .side-saapuneet{display:flex}}
/* iOS zoomaa kenttään, jonka fontti on alle 16 px; kosketusnäytöllä kentät 16 px:iin. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}}
/* Sama puhelimen levyisellä näytöllä, vaikka laite ei ilmoittaisi kosketusta (QA 13.10.2026: Hae projekteja
   mitattiin 15 px:ksi). Artikkelin muokkain (.sa-teksti, contenteditable) on jo 16 px. */
@media (max-width:640px){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}}
@supports (height:100dvh){
  .publish-dialog,.drive-dialog{max-height:calc(100dvh - 48px)}
  .cx-drawer{height:100dvh;max-height:100dvh}
}

/* Tilauksen peruminen */
.peru-sivu{max-width:760px}
.peru-polku{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.peru-polku li{display:flex;align-items:center;gap:6px}
.peru-polku li:not(:last-child)::after{content:"";width:22px;height:1px;background:var(--line-strong);margin-left:4px}
.peru-polku span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font-weight:600;font-size:13px}
.peru-polku .is-nyt{color:var(--ink);font-weight:600}
.peru-polku .is-nyt span{background:var(--merkki);color:var(--merkki-teksti);border-color:var(--merkki)}
.peru-polku .is-tehty span{background:var(--pink-soft);color:var(--pink-ink);border-color:transparent}
.peru-osa{margin-bottom:18px}
.peru-osa>.hint{margin:-8px 0 16px}
.peru-syyt{display:grid;gap:10px;margin-bottom:18px}
.peru-vaihtoehto{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px;border-radius:var(--r-md);background:var(--tint-pink);margin-bottom:6px}
.peru-vaihtoehto>svg{color:var(--pink-ink);flex:none}
.peru-vaihtoehto>div{flex:1;min-width:200px}
.peru-vaihtoehto p{margin:2px 0 0}
.peru-seuraukset{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.peru-seuraukset li{display:flex;gap:12px;align-items:flex-start}
.peru-seuraukset svg{color:var(--pink-ink);flex:none;margin-top:2px}
.peru-seuraukset p{margin:2px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.peru-napit{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.btn-vaara{color:var(--err-ink);border-color:color-mix(in srgb,#b42318 40%,var(--line-strong))}
.btn-vaara:hover{background:var(--err-soft)}
.peru-linkki{margin-top:28px;font-size:14px}

/* Julkaisu: muutokset, versiohistoria ja ohjattu verkkotunnusvalinta */
.pj-head h1,.pj-head .julkaisu-otsikko{margin:0 0 6px}
.panel h2.julkaisu-otsikko{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px}
.pj-live{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;font-size:14.5px;font-weight:600}
.pj-live .link{display:inline-flex;align-items:center;gap:4px}
.pj-live .hint{font-weight:400}
.pj-pallo{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.pj-kortti{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:var(--card);display:grid;gap:14px}
.pj-kortti-otsikko{display:flex;gap:14px;align-items:flex-start}
.pj-kortti-otsikko p{margin:2px 0 0}
.pj-maara{flex:none;display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:12px;background:var(--pink-soft);color:var(--pink-ink);font:700 17px/1 var(--font-display)}
.pj-muutokset{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pj-muutokset li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--paper);font-size:14.5px;line-height:1.45}
.pj-muutokset svg{flex:none;margin-top:3px;color:var(--muted)}
.pj-lisaa summary{cursor:pointer;font-size:14px;color:var(--pink-ink);font-weight:600;padding:2px 0 8px}
.pj-julkaise{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pj-julkaise .btn{min-width:220px;justify-content:center}
.pj-tyhja{display:flex;gap:14px;align-items:center}
.pj-tyhja>span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ok-soft);color:#059669}
.pj-tyhja p{margin:2px 0 0}
.pj-osio{border:1px solid var(--line);border-radius:var(--r-md);margin-top:12px;background:var(--card)}
.pj-osio>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:600;list-style:none}
.pj-osio>summary::-webkit-details-marker{display:none}
.pj-osio>summary small{color:var(--muted);font-weight:400;font-size:13.5px}
.pj-osio>summary>svg:last-child{margin-left:auto;color:var(--muted);transition:transform .2s var(--ease)}
.pj-osio[open]>summary>svg:last-child{transform:rotate(180deg)}
.pj-osio>summary>svg:first-child{color:var(--pink-ink)}
.pj-osio>:not(summary){margin-left:16px;margin-right:16px}
.pj-osio>:last-child{margin-bottom:16px}
.pj-versiot{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pj-versiot li{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.pj-versiot li:last-child{border-bottom:0}
.pj-v-tiedot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.pj-v-tiedot p{flex-basis:100%;margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
.pj-versiot .is-live b{color:var(--ink)}
.pj-tilaus{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin:6px 0 18px}
.pj-kysymys{margin-top:8px}
.pj-kysymys h2{font:700 clamp(19px,2.4vw,23px)/1.3 var(--font-display);margin:0 0 16px}
.pj-polku{margin-top:18px;padding:18px;border-radius:var(--r-md);background:var(--paper)}
.pj-polku h3{margin:0 0 10px;font-size:16px}
.pj-haku label{display:block;font-weight:600;margin-bottom:8px}
.pj-haku .inline{max-width:520px}
.pj-ehdotukset{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
.pj-tai{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.pj-tai::before,.pj-tai::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.pj-ilmainen{border-top:0;margin-top:8px;padding-top:0}
.pj-lisat{margin-top:22px}
.pj-lisat h2{font-size:17px;margin:0 0 12px}
.pj-lisat-kortit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pj-lisa{display:grid;gap:6px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--tint-pink)}
.pj-lisa .pu-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--card);color:var(--pink-ink)}
.pj-lisa p{margin:0;font-size:14px}
.pj-lisa-napit{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px;font-size:14px}
@media (max-width:560px){.pj-versiot li{flex-direction:column;align-items:flex-start}.pj-julkaise .btn{width:100%}}
/* ---------- Näkyvyys: tavoitteet, suunnitelma ja lisäpalvelujen ostopolku (NakyvyysController) ---------- */
.tv-skip{cursor:pointer;color:var(--muted)}
.tv-skip:hover{color:var(--ink)}
.tv-own{margin-top:22px;max-width:620px}
.tv-own summary{cursor:pointer;color:var(--muted);font-weight:500}
.tv-own textarea{margin-top:10px;min-height:80px}
.tv-proposal{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tv-proposal p{margin:0 0 8px}
.tv-err:empty{display:none}
.tv-words .chip span{gap:8px;align-items:baseline}
.tv-n{font-size:12.5px;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
.tv-words-ai{margin-top:14px}
.nk{max-width:880px}
.nk-big{font-size:18px;margin:4px 0 12px}
.nk-words{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.nk-words li{display:inline-flex;gap:8px;align-items:baseline;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px}
.nk-words small{color:var(--muted);font-variant-numeric:tabular-nums}
.nk-src{font-size:12.5px}
.nk-arvio{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--paper)}
.nk-arvio p{margin:6px 0 0}
.nk-arvio .hint{font-size:12.5px}
.nk-list{margin:22px 0 40px}
.nk-list h2{font-size:16px;margin:0 0 8px}
.nk-list ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.nk-list li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.nk-list li.is-done{color:var(--ok-ink)}
.nk-after{display:grid;gap:10px}
.nk-after h3{margin:0;font-size:16px}
.nk-after-rows{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.nk-after-rows li{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px}
.nk-after-rows li b{min-width:150px}
.nk-after-rows li span{color:var(--muted)}
.nk-chip{flex:none;display:flex;align-items:center;gap:6px;min-width:0;margin-top:8px;padding:7px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.nk-chip small{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:400;color:var(--muted)}
.nk-chip small::before{content:"·";margin-right:6px}
/* Kortin kehys pinoaa projektikortin ja näkyvyysrivin päällekkäin (rivinä rivi venyi kortin viereen). */
.pcard-wrap:has(> .nk-chip){flex-direction:column}
.nk-chip:hover{border-color:var(--pink)}
.nk-chip.is-done{color:var(--ok-ink)}
.np-rows{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.np-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.np-row.is-suositus{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.np-num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--pink-soft);color:var(--pink-ink);font-weight:700;font-size:14px}
.np-body h3{margin:2px 0 10px;font-size:16px;display:flex;align-items:center;gap:8px}
.np-suos{background:var(--pink-soft);border-color:transparent;color:var(--pink-ink)}
.np-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;cursor:pointer}
.np-item.is-done{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.np-item.np-sub{padding-left:26px}
.np-item[data-np-korostus]{outline:2px solid var(--pink);outline-offset:4px;border-radius:8px}
.np-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--pink)}
.np-name{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-weight:600}
.np-name small{font-weight:400;color:var(--muted)}
.np-name select{width:auto;padding:4px 8px;font-size:14px}
.np-price{font-size:14px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.np-detail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 0 8px 28px}
.np-detail input[type=text]{max-width:280px}
.np-detail .note{flex-basis:100%;margin:0}
.np-vt-tila{font-size:13px;color:var(--muted)}
.np-vt-tila.is-ok{color:var(--ok-ink)}
.np-vt-tila.is-err{color:var(--err-ink)}
.np-sugg{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.np-desc{margin:0 0 6px 28px;color:var(--muted);font-size:13.5px}
.np-budget{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.np-budget input[type=number]{width:150px;max-width:180px}
.np-opt{position:relative;cursor:pointer}
.np-opt input{position:absolute;opacity:0}
.np-opt span{display:inline-flex;padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);font-size:14px;font-weight:500}
.np-opt input:checked+span{background:var(--valittu);border-color:var(--valittu);color:var(--valittu-teksti)}
.np-opt input:focus-visible+span{box-shadow:0 0 0 3px var(--pink-soft)}
.np-arvio{flex-basis:100%;margin:0;font-size:13.5px}
.np-arvio:empty{display:none}
/* Budjettivalinnat arvioineen: kortteina, suositus merkillä (Lisapalvelut::adsSuositus). */
.np-budget.has-arvio{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));align-items:stretch;flex-basis:100%;min-width:0}
.np-budget.has-arvio .np-opt span{width:100%}
.np-budget.has-arvio input[type=number]{align-self:center}
.np-bud span{flex-direction:column;align-items:flex-start;gap:2px}
.np-budget.has-arvio .np-bud span{border-radius:var(--r-sm);padding:9px 14px;height:100%;box-sizing:border-box}
.np-bud b{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.np-bud small{font-size:12.5px;font-weight:400;color:var(--muted)}
.np-opt input:checked+span small{color:inherit}
.np-bud .np-suos{font-style:normal;font-size:12px;padding:1px 8px}
.np-opt input:checked+span .np-suos{background:var(--card);color:var(--pink-ink)}
.np-ads-suositus{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0 0 14px;border-radius:var(--r-md);background:var(--tint-pink);border:1px solid var(--pink-soft)}
.np-ads-suositus>svg{flex:none;color:var(--pink-ink);margin-top:2px}
.np-ads-suositus p{margin:0 0 6px;max-width:72ch}
.np-ads-suositus p:last-child{margin-bottom:0}
.np-ads-suositus .hint{color:var(--muted);font-size:13.5px}
/* Yhteenvedon "Mitä saat": hyöty valittua palvelua kohden. */
.np-saat{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.np-saat h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px}
.np-saat h4 svg{color:var(--pink-ink)}
.np-saat ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.np-saat li{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:4px 14px}
.np-saat li b{font-weight:600}
.np-saat .hint{margin:10px 0 0;color:var(--muted);font-size:13.5px}
.np-saat[hidden]{display:none}
@media (max-width:520px){.np-saat li{grid-template-columns:minmax(0,1fr)}}
.np-more{margin-left:28px;font-size:13.5px}
.np-more summary{cursor:pointer;color:var(--muted)}
.np-total{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:flex-end;margin:20px 0 6px;padding:16px;border-radius:14px;background:var(--paper)}
.np-sum{display:grid;gap:2px}
.np-sum small{color:var(--muted);font-size:12.5px}
.np-sum b{font-size:24px;font-variant-numeric:tabular-nums}
.np-note{flex-basis:100%;margin:0;font-size:12.5px}
.np-pay{display:flex;gap:8px;margin:12px 0 0}
.np-actions{display:flex;align-items:center;gap:16px;margin-top:16px}
@media (max-width:640px){.np-item{grid-template-columns:auto minmax(0,1fr)}.np-price{grid-column:2;text-align:left}.np-detail,.np-desc,.np-more{padding-left:0;margin-left:0}}

/* Julkaisun eteneminen ja valmistuminen */
.je-dialog{width:min(460px,calc(100vw - 32px));padding:34px 28px 24px;border:0;border-radius:22px;box-shadow:0 30px 80px rgba(20,10,30,.3);text-align:center;background:var(--card);color:var(--ink);overflow:visible}
.je-dialog::backdrop{background:rgba(20,12,28,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.je-dialog h2{font:700 24px/1.25 var(--font-display);margin:14px 0 6px}
.je-dialog .hint{margin:0 0 6px}
.je-pyora,.je-merkki{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink)}
.je-pyora{position:relative}
.je-pyora::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:var(--pink);animation:spin 1.1s linear infinite}
.je-merkki{background:var(--ok-soft);color:#059669;animation:je-pomppu .5s var(--ease)}
.je-merkki.is-virhe{background:var(--err-soft);color:var(--err-ink)}
@keyframes je-pomppu{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.je-vaiheet{list-style:none;margin:20px 0 14px;padding:0;display:grid;gap:10px;text-align:left}
.je-vaiheet li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--paper);color:var(--muted);font-size:14.5px}
.je-vaiheet li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong)}
.je-vaiheet li.is-nyt{color:var(--ink);font-weight:600}
.je-vaiheet li.is-nyt::before{border-color:var(--pink);border-top-color:transparent;animation:spin 1s linear infinite}
.je-vaiheet li.is-tehty{color:var(--ink)}
.je-vaiheet li.is-tehty::before{border-color:#10b981;background:#10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.je-huom{font-size:13.5px}
.je-vieraile{margin:16px auto 8px;min-width:220px;justify-content:center}
.je-dialog .link-btn{display:block;margin:8px auto 0}
.je-konfetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.je-konfetti i{position:absolute;top:-20px;border-radius:2px;opacity:.95;animation:je-putoaa linear forwards}
@keyframes je-putoaa{to{transform:translate3d(var(--x),105vh,0) rotate(var(--r));opacity:.9}}
@media (prefers-reduced-motion:reduce){.je-pyora::after,.je-vaiheet li.is-nyt::before,.je-merkki{animation:none}}

/* Valittu aloituspohja aloituksessa (partials/pohja-kortti) */
.pohja-kortti{display:flex;align-items:center;gap:12px;max-width:360px;margin:10px 0;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pohja-kortti:hover{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.pohja-kortti img{width:84px;height:52px;object-fit:cover;object-position:top;border-radius:9px;flex:none;border:1px solid var(--line)}
.pohja-kortti span{display:grid;gap:1px;min-width:0;flex:1}
.pohja-kortti small{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pink-ink)}
.pohja-kortti b{font-size:15px;line-height:1.3}
.pohja-kortti em{font-style:normal;font-size:13px;color:var(--muted)}
.pohja-kortti>svg{color:var(--muted);flex:none}
.story-pohja{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:1000px;width:100%;margin:4px auto 0;padding:0 clamp(16px,4vw,32px)}
.story-pohja .pohja-kortti{margin:0}
.story-pohja .hint{margin:0}
.chip-pohja{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-bottom:6px;padding:3px 10px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-size:12.5px;font-weight:600}
.pohja-note{display:flex;align-items:center;gap:8px;margin:-6px 0 16px}
.pohja-note svg{color:var(--pink-ink);flex:none}

/* Salasanan alustus (partials/salasana-dialogi) */
.sd-dialog{position:relative;padding:28px 26px 22px}
.sd-sulje{position:absolute;top:12px;right:12px}
.sd-ikoni{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink);margin-bottom:10px}
.sd-ikoni.is-ok{background:var(--ok-soft);color:#059669}
.sd-dialog h2{font:700 20px/1.3 var(--font-display);margin:0 0 6px}
.sd-dialog .field{margin:14px 0 0}
.sd-koodi{font:600 22px/1 var(--font-body);letter-spacing:.3em;text-align:center}
.sd-salasana{position:relative;display:block}
.sd-salasana input{padding-right:70px}
.sd-salasana .link-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px}
.sd-mittari{display:block;height:5px;border-radius:3px;background:var(--paper-2);margin-top:8px;overflow:hidden}
.sd-mittari i{display:block;height:100%;width:0;background:#ef4444;transition:width .2s,background .2s}
.sd-mittari i[data-taso="1"]{background:#f59e0b}.sd-mittari i[data-taso="2"]{background:#10b981}.sd-mittari i[data-taso="3"]{background:#059669}
.sd-dialog .dlg-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}
.sd-dialog section[data-sd-vaihe="1"] .dlg-actions,.sd-dialog section[data-sd-vaihe="3"] .dlg-actions{justify-content:flex-end}

/* Automaattinen tallennus: ei Tallenna-nappeja, tallennusilmoitus alalaidassa */
form[data-autosave] .set-actions .btn{display:none}
form[data-autosave] .set-actions:has(.set-status:empty){display:none}
.tallennettu-ilmoitus{position:fixed;left:50%;bottom:22px;z-index:200;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--card);font:500 14px/1.2 var(--font-body);box-shadow:var(--shadow-pop);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.tallennettu-ilmoitus span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#10b981;color:#fff;font-size:12px}
.tallennettu-ilmoitus.is-nakyy{opacity:1;transform:translate(-50%,0)}
.tallennettu-ilmoitus.is-pois{opacity:0;transform:translate(-50%,10px)}
/* Istunnon ilmoitus yläreunaan: alhaalla se peitti kirjoituskentän napit (QA k2 B-24). */
.tallennettu-ilmoitus.is-istunto{top:68px;bottom:auto;pointer-events:auto}
.tallennettu-ilmoitus.is-istunto a{color:inherit;font-weight:600;text-decoration:underline}
/* Studiossa istunnon ilmoitus omana rivinään yläpalkin alla: ei peitä viestejä eikä Julkaise-riviä (QA k3 B-35, E-32). */
.istunto-palkki{position:sticky;top:0;z-index:19;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:10px 16px 0;padding:6px 6px 6px 14px;border-radius:12px;background:#7f1d1d;color:#fff;font:500 14px/1.35 var(--font-body);box-shadow:var(--shadow-pop)}
.work-top + .istunto-palkki{top:62px}
.istunto-palkki > span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;font-size:12px}
.istunto-palkki b{font-weight:600;margin-right:auto}
.istunto-palkki a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;color:#7f1d1d;font-weight:600;text-decoration:none}
.istunto-palkki a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Laskutustiedot (Asetukset › Laskutus) */
.lt-lomake h2{margin-bottom:12px}
.lt-maksutavat{margin-bottom:22px}
.lt-maksutavat .c svg{color:var(--pink-ink);margin-bottom:8px}
.lt-maksutavat .is-pois .c{border-style:dashed;background:var(--paper);cursor:default}
.lt-maksutavat .is-pois .c svg{color:var(--muted)}
.lt-maksutavat .lt-hae{margin-top:12px}
.lt-maksutavat .lt-vaihda .c{border-style:dashed;cursor:default}.lt-maksutavat .lt-vaihda .btn{margin-top:12px}
.lt-ytunnus{display:flex;gap:8px;width:100%}
.lt-ytunnus input{flex:1;min-width:0}
.lt-hakutila{margin:-4px 0 12px}
.lt-ehdotukset{margin:4px 0 8px}
.lt-muistutus{margin-top:12px}

/* Mediakirjasto: kuvapankin tekijämaininta (Unsplash), kuvan muodon valinta ja Käytä sivustolla -ikkuna */
.kp-maininta a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.kp-maininta a:hover{text-decoration-color:currentColor}
.mk-pankki-kuva .kp-maininta a{color:var(--ink)}
.media-meta .kp-maininta a{color:#fff}
.media-meta:has(.kp-maininta){white-space:normal;line-height:1.35}
.media-item:has(.kp-maininta) .mk-kopioi{bottom:auto;top:68px}
.mk-pankki-haku .mk-haku-iso{flex:1 1 70%}
.mk-pankki-haku .mk-suunta{order:3;height:42px;align-items:center;border-radius:12px}
.mk-suunta button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;font-size:13px}
.mk-muoto{display:inline-block;flex-shrink:0;border:1.6px solid currentColor;border-radius:3px;opacity:.8}
.mk-muoto-kaikki{width:14px;height:14px;border-style:dashed}
.mk-muoto-landscape{width:17px;height:11px}
.mk-muoto-portrait{width:11px;height:16px}
.mk-muoto-squarish{width:14px;height:14px}
.mk-suunta button.is-on .mk-muoto{opacity:1;color:var(--pink-ink)}
.mk-kayta{position:absolute;right:6px;top:34px;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--pink-fill);color:#fff;font:600 12px var(--font-body);box-shadow:0 4px 12px rgba(0,0,0,.18);opacity:0;cursor:pointer;transition:opacity .15s}
.media-item:hover .mk-kayta,.mk-kayta:focus-visible{opacity:1}
@media (hover:none){.mk-kayta{opacity:1}}
.mk-sivustolle .hint{margin:0 0 12px}
.mk-sv-haku{margin-bottom:10px}
.mk-sv-lista{display:grid;gap:6px;max-height:min(360px,55vh);overflow:auto;margin:0 -4px;padding:0 4px}
.mk-sv{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.mk-sv:hover,.mk-sv:focus-visible{border-color:var(--pink);background:var(--pink-soft)}
.mk-sv[disabled]{opacity:.6;cursor:wait}
.mk-sv.is-ladataan{opacity:1;border-color:var(--pink)}
.mk-sv-ikoni{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--paper);color:var(--pink-ink);flex-shrink:0}
.mk-sv-teksti{flex:1;min-width:0;display:flex;flex-direction:column}
.mk-sv-teksti b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-sv-teksti small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-sv-valmis{display:grid;justify-items:center;gap:6px;text-align:center;padding:6px 0 4px}
.mk-sv-valmis p{margin:0}
.mk-sv-ok{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#d1fae5;color:var(--ok-ink)}
.mk-sv-virhe{margin:10px 0 0;color:var(--err-ink);font-size:13.5px}
@media (max-width:640px){.mk-pankki-haku .mk-suunta{order:3;width:100%;overflow-x:auto}.mk-suunta button{flex:1;justify-content:center;padding:0 8px}}
/* ---------- Google-mittaus (Analytiikka): ohjattu polku ja hakuvalitsin ---------- */
/* top/left: ilman sijoitettua esivanhempaa piilotettu teksti jäisi vierityssäiliön sisäiseen paikkaansa ja pidentäisi
   koko sivua (8.10.2026: agentin julkaisukortin Julkaisuteksti-otsikko). */
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gm{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:clamp(18px,3vw,28px);margin:8px 0 24px;scroll-margin-top:90px}
.gm-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;align-items:flex-start;margin-bottom:18px}
.gm-head h2{font-size:clamp(20px,2.4vw,24px);margin-bottom:6px}
.gm-head .hint{margin:0;max-width:58ch;color:var(--muted)}
.gm-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gm-steps li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:13.5px;font-weight:500}
.gm-steps li.is-current{background:var(--pink-soft);color:var(--ink);font-weight:600}
.gm-steps li.is-done{color:var(--ink)}
.gm-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;font-weight:700;flex:none}
.gm-steps li.is-current .gm-num{border-color:var(--pink);color:var(--pink-ink)}
.gm-steps li.is-done .gm-num{background:var(--merkki);border-color:var(--merkki);color:var(--merkki-teksti)}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.gm-card{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--card);display:grid;gap:12px;align-content:start;min-width:0}
.gm-card > p{margin:0;color:var(--ink)}
.gm-card form{margin:0}
.gm-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.gm-card > .btn,.gm-card > form > .btn{justify-self:start;max-width:100%;white-space:normal;text-align:left;line-height:1.25}
.gm-card-head h3{font-size:17px}
.gm-card-head small{color:var(--muted);font-size:12.5px}
.gm-card-head > div{flex:1 1 140px;min-width:0}
.gm-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;flex:none}
.gm-pill.is-ok{background:var(--ok-soft);color:color-mix(in srgb,#0f9d6a 75%,var(--ink))}
.gm-pill.is-wait{background:var(--warn-soft);color:color-mix(in srgb,#b7791f 75%,var(--ink))}
.gm-pill.is-warn{background:var(--err-soft);color:color-mix(in srgb,#dc2626 75%,var(--ink))}
.gm-pill.is-next{background:var(--pink-soft);color:var(--pink-ink)}
.gm-alku{grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;background:var(--paper);border-color:transparent}
.gm-alku p{margin:0}
.gm-alku-teksti{display:grid;gap:10px;justify-items:start}
.gm-alku-teksti h3{font-size:19px}
.gm-alku-teksti .hint{margin:0;color:var(--muted);font-size:13.5px}
.gm-brandit{display:flex;gap:8px}
.gm-luvat{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px}
.gm-luvat li{display:flex;gap:8px;align-items:flex-start}
.gm-luvat svg{color:#0f9d6a;flex:none;margin-top:3px}
.gm-tiedot{display:grid;gap:6px;margin:0;padding:12px 14px;border-radius:12px;background:var(--paper)}
.gm-tiedot div{display:flex;gap:12px;justify-content:space-between;font-size:14px;min-width:0}
.gm-tiedot dt{color:var(--muted)}
.gm-tiedot dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.gm-viesti{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45}
.gm-viesti svg{flex:none;margin-top:2px}
.gm-viesti.is-ok{background:var(--ok-soft)}
.gm-viesti.is-wait{background:var(--warn-soft)}
.gm-viesti.is-warn,.gm-viesti.is-err{background:var(--err-soft)}
.gm > .gm-viesti{margin-bottom:14px}
.gm-ehdotus{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--card)}
.gm-ehdotus > div{display:grid;gap:2px;min-width:0;flex:1 1 200px}
.gm-ehdotus small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.gm-ehdotus:hover{border-color:var(--ink)}
.gm-valinnat{display:grid;gap:8px}
.gm-kysymys{font-weight:600}
.gm-napit{display:flex;flex-wrap:wrap;gap:8px}
.gm-lisaa{border-top:1px solid var(--line);padding-top:10px}
.gm-lisaa summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--muted)}
.gm-lisaa summary:hover{color:var(--ink)}
.gm-lisaa[open] summary{margin-bottom:10px}
.gm-lisaa .hint{margin:0 0 8px;font-size:13.5px}
.gm-odotus{display:flex;gap:12px;align-items:flex-start}
.gm-odotus p{margin:0}
.gm-paivita{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.gm-paivita p{margin:0;font-size:13.5px}
.gm-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--pink);animation:spin 1s linear infinite;flex:none;margin-top:2px}
.an-ads-tili{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:0 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.an-ads-tili p{margin:2px 0 0}
.an-ads-tili .hv{flex:0 1 360px}
.mg-google{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between}
.mg-google p{margin:2px 0 0}
@media (max-width:560px){.gm-alku{grid-template-columns:minmax(0,1fr)}.gm-steps{width:100%}}
@media (prefers-reduced-motion:reduce){.gm-spin{animation:none}}

/* Hakuvalitsin (x-hakuvalitsin): painike + ponnahdus, jossa hakukenttä ja lista. */
.hv{position:relative;min-width:0;width:100%;max-width:520px}
.hv-nappi{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);font:500 15px/1.3 var(--font-body);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.hv-nappi:hover{border-color:var(--ink)}
.hv-nappi[aria-expanded="true"]{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.hv-nappi.is-busy{opacity:.6;pointer-events:none}
.hv-teksti{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hv-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;min-width:min(320px,90vw);background:var(--card);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-pop);padding:8px}
.hv-haku{display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;color:var(--muted)}
.hv-haku:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
/* Yleinen input-tyyli on tarkempi (:not-ketju), joten kentän oma kehys pois !importantilla: kehys on .hv-haku:ssa. */
.hv-haku input[data-hv-haku]{border:0!important;box-shadow:none!important;padding:9px 0!important;background:transparent!important;border-radius:0!important;outline:none}
.hv-lista{list-style:none;margin:6px 0 0;padding:0;max-height:min(320px,50vh);overflow:auto;overscroll-behavior:contain}
.hv-valinta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer}
.hv-valinta span{display:grid;gap:1px;min-width:0}
.hv-valinta b{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.hv-valinta small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.hv-valinta svg{color:var(--pink-ink);flex:none}
.hv-valinta:hover,.hv-valinta.is-active{background:var(--paper)}
.hv-valinta.is-active{box-shadow:inset 0 0 0 1.5px var(--pink)}
.hv-tyhja{margin:8px 4px 4px;color:var(--muted);font-size:14px}
/* ---------- Tietosuoja: Asetukset › Tietosi, tietosuojapyynnön lomake (tp-*) ja Hallinta › Tietopyynnöt ---------- */
.tietosi-lataus{align-items:start}
.tietosi-sisalto{list-style:none;margin:10px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tietosi-sisalto li{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px}
.tietosi-sisalto li svg{color:var(--ok-ink)}
.tietosi-lataus .hint{margin:0}
@media (max-width:640px){.tietosi-lataus{grid-template-columns:auto minmax(0,1fr)}.tietosi-lataus>.btn{grid-column:1/-1;justify-self:stretch}}
.tietosi-polku{list-style:none;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tietosi-polku li{padding:12px 14px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line)}
.tietosi-polku b{display:block;font-size:14.5px}
.tietosi-polku span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
@media (max-width:640px){.tietosi-polku{grid-template-columns:minmax(0,1fr)}}
.tp-lomake{display:grid;gap:18px}
.tp-osa{border:0;margin:0;padding:0;min-width:0}
.tp-osa legend{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 12px;font:600 17px/1.2 var(--font-display)}
.tp-nro{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink);font:700 14px/1 var(--font-body)}
.tp-tyypit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.tp-tyypit{grid-template-columns:minmax(0,1fr)}}
.tp-tyyppi{position:relative;display:block;cursor:pointer}
.tp-tyyppi input{position:absolute;opacity:0;pointer-events:none}
.tp-kortti{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;height:100%;padding:16px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--card);transition:border-color .15s,box-shadow .15s}
.tp-kortti b{font:600 16px/1.25 var(--font-display);align-self:center}
.tp-kortti small{grid-column:2;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:2px}
.tp-ikoni{grid-row:span 2;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--paper);color:var(--ink)}
.tp-tyyppi:hover .tp-kortti{border-color:var(--pink)}
.tp-tyyppi input:checked+.tp-kortti{border-color:transparent;box-shadow:0 0 0 2px var(--pink),var(--shadow-pop)}
.tp-tyyppi input:checked+.tp-kortti .tp-ikoni{background:var(--pink-fill);color:#fff}
.tp-tyyppi input:focus-visible+.tp-kortti{outline:3px solid var(--pink);outline-offset:3px}
.tp-poisto{display:none;padding:18px;border-radius:var(--r-lg);background:var(--err-soft);border:1px solid rgba(185,28,28,.22)}
.tp-lomake:has(input[name="tyyppi"][value="poisto"]:checked) .tp-poisto{display:block}
.tp-poisto h3{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 12px;color:var(--err-ink)}
.tp-askeleet{margin:0;padding:0 0 0 22px;display:grid;gap:14px}
.tp-askeleet>li>b{display:block;margin-bottom:3px}
.tp-askeleet>li>span{display:block;font-size:14px}
.tp-askeleet li.is-valmis>span{color:var(--ok-ink);display:flex;gap:6px;align-items:flex-start}
.tp-askeleet li.is-kesken>b{color:var(--err-ink)}
.tp-peru{margin-top:8px}
.tp-seuraukset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 8px}
@media (max-width:640px){.tp-seuraukset{grid-template-columns:minmax(0,1fr)}}
.tp-seuraukset>div{padding:10px 12px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line)}
.tp-seuraukset ul{margin:0;padding-left:18px;font-size:13.5px}
.tp-pieni{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tp-check{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.tp-check input{margin-top:3px}
.tp-kentta{display:grid;gap:6px;font-size:14px;font-weight:500}
.tp-kentta small{color:var(--muted);font-weight:400}
.tp-kentta textarea,.tp-kentta input{width:100%}
.tp-rivi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.tp-rivi{grid-template-columns:minmax(0,1fr)}}
/* Roskapostiansa: pois näkyvistä ja kosketuksesta (visibility), mutta lomakkeessa boteille. */
.tp-piilo{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;visibility:hidden}
.tp-laheta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tp-ohje{margin:0;color:var(--muted);font-size:13.5px}
.tp-esto{display:none;align-items:center;gap:6px;margin:0;font-size:13.5px;font-weight:600;color:var(--err-ink)}
.tp-lomake.is-estetty:has(input[name="tyyppi"][value="poisto"]:checked) .tp-esto{display:flex}
.tp-lomake.is-estetty:has(input[name="tyyppi"][value="poisto"]:checked) .tp-laheta .btn{opacity:.45;pointer-events:none}
.tp-lomake.is-estetty:has(input[name="tyyppi"][value="poisto"]:checked) .tp-laheta .tp-ohje{display:none}
.tp-adm-otsake{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.tp-adm-tyyppi{display:inline-flex;align-items:center;gap:6px;font:600 16px/1.2 var(--font-display)}
.tp-adm-maara{margin-left:auto;font-size:13.5px;color:var(--muted)}
.tp-adm.is-myohassa{border-color:#fca5a5}
.tp-adm.is-myohassa .tp-adm-maara{color:var(--err-ink);font-weight:600}
.tp-adm-tiedot{display:grid;gap:6px;margin:0 0 12px}
.tp-adm-tiedot>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;font-size:14px}
.tp-adm-tiedot dt{color:var(--muted)}
.tp-adm-tiedot dd{margin:0;overflow-wrap:anywhere}
@media (max-width:640px){.tp-adm-tiedot>div{grid-template-columns:minmax(0,1fr);gap:0}}
.tp-adm-ohje{padding:12px 14px;border-radius:var(--r-md);background:var(--warn-soft);font-size:14px;margin-bottom:12px}
.tp-adm-ohje ol{margin:6px 0 0;padding-left:20px}
.tp-adm-lomake{display:grid;gap:10px}
.tp-adm-lomake textarea{width:100%}
.tp-adm-napit{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
:root[data-theme="dark"] .tp-poisto h3,:root[data-theme="dark"] .tp-askeleet li.is-kesken>b,:root[data-theme="dark"] .tp-adm.is-myohassa .tp-adm-maara,:root[data-theme="dark"] .tp-esto{color:#fca5a5}
:root[data-theme="dark"] .tp-askeleet li.is-valmis>span,:root[data-theme="dark"] .tietosi-sisalto li svg{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tp-poisto h3,:root:not([data-theme="light"]) .tp-askeleet li.is-kesken>b,:root:not([data-theme="light"]) .tp-adm.is-myohassa .tp-adm-maara,:root:not([data-theme="light"]) .tp-esto{color:#fca5a5}:root:not([data-theme="light"]) .tp-askeleet li.is-valmis>span,:root:not([data-theme="light"]) .tietosi-sisalto li svg{color:#6ee7b7}}
/* Hallinnan Asiakaspolku (studio/admin/polku): jakso, osiot, myyjän lista, suppilo ja palkit */
.pk-paa{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin:-8px 0 14px}
.pk-paa .hint{margin:0;max-width:62ch}
.pk-osiot{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pk-osiot a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;transition:border-color .15s}
.pk-osiot a:hover{border-color:var(--pink)}
.pk-osiot svg{color:var(--muted)}
.pk-luvut{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.pk-osio{margin-top:20px;scroll-margin-top:80px}
.pk-osio h2{margin:0 0 6px}
.pk-osio > .hint{margin:0 0 16px}
.pk-otsikko{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pk-otsikko .hint{margin:0}
.pk-ala{font-size:16px;margin:22px 0 10px}
.pk-ruudukko{align-items:start;gap:8px 28px}
.pk-suodattimet{display:grid;gap:12px;margin:18px 0;padding:14px 16px;border-radius:var(--r-md);background:var(--paper)}
.pk-suodatin{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.pk-suodatin-nimi{font-size:13px;font-weight:600;color:var(--muted);min-width:150px}
.pk-chipit{display:flex;flex-wrap:wrap;gap:6px}
.pk-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s}
.pk-chip span{font-size:12px;font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:999px;background:var(--paper);color:var(--muted)}
.pk-chip:hover{border-color:var(--pink)}
.pk-chip.is-on{background:var(--valittu);border-color:var(--valittu);color:var(--valittu-teksti)}
.pk-chip.is-on span{background:rgba(0,0,0,.2);color:var(--valittu-teksti)}
.pk-tyhja{display:flex;align-items:center;gap:12px;padding:18px;border-radius:var(--r-md);background:var(--ok-soft);color:var(--ok-ink)}
.pk-tyhja p{margin:0}
.pk-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pk-asiakas{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,250px);gap:10px 22px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.pk-kuka{display:grid;gap:3px;justify-items:start;min-width:0}
.pk-kuka b{font-size:15.5px;overflow-wrap:anywhere}
.pk-kuka small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.pk-kuka .chip{margin-bottom:4px}
.pk-mita{min-width:0}
.pk-mita p{margin:0}
.pk-tilanne{font-weight:600}
.pk-toimenpide{display:flex;gap:6px;align-items:flex-start;color:var(--muted);font-size:14px;margin-top:3px !important}
.pk-toimenpide svg{color:var(--pink-ink);flex:none;margin-top:3px}
.pk-mita small{display:block;margin-top:4px;font-size:12.5px}
.pk-yhteys{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.pk-yhteys .btn{justify-content:flex-start;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-yhteys .link{display:inline-flex;align-items:center;gap:4px;font-size:14px;align-self:flex-end}
.pk-suppilo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pk-suppilo li{display:grid;grid-template-columns:190px minmax(0,1fr) 56px 220px;gap:12px;align-items:center}
.pk-vaihe{font-size:14.5px;font-weight:500}
.pk-palkki{display:block;height:26px;border-radius:7px;background:var(--paper);overflow:hidden}
.pk-palkki i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--pink),#ff7ab0);transition:width .4s var(--ease)}
.pk-palkki.is-virhe i{background:#e11d48}
.pk-maara{font:600 18px/1 var(--font-display);text-align:right;font-variant-numeric:tabular-nums}
.pk-konversio{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:13px;color:var(--muted)}
.pk-konversio small{padding:1px 8px;border-radius:999px;background:var(--paper);font-size:12px}
.pk-konversio em{font-style:normal;font-weight:600;color:var(--ink)}
.pk-konversio em.is-heikko{color:var(--err-ink)}
.pk-palkit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pk-palkit li{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) auto 64px;gap:10px;align-items:center;font-size:14px}
.pk-palkit .pk-palkki{height:14px}
.pk-palkit b{font-variant-numeric:tabular-nums;text-align:right}
.pk-palkit small{color:var(--muted);font-size:12.5px}
.pk-lainaus{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--line-strong);color:var(--muted);font-size:14px;font-style:italic}
@media (max-width:900px){
  .pk-asiakas{grid-template-columns:minmax(0,1fr)}
  .pk-yhteys{flex-direction:row;flex-wrap:wrap;align-items:center}
  .pk-yhteys .link{align-self:center}
}
@media (max-width:640px){
  .pk-suppilo li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .pk-suppilo .pk-palkki{grid-column:1 / -1;grid-row:2}
  .pk-suppilo .pk-konversio{grid-column:1 / -1;grid-row:3;display:flex;gap:10px}
  .pk-palkit li{grid-template-columns:minmax(0,1fr) auto auto}
  .pk-palkit .pk-palkki{grid-column:1 / -1;grid-row:2}
  .pk-suodatin-nimi{min-width:0;width:100%}
  .pk-paa .seg{overflow-x:auto;max-width:100%}
}
/* ---------- Silta AI (Hallinta > Silta AI): raportti ja asetukset ---------- */
/* Silta AI: välilehdet (silta-ai.blade.php, studio.js vaihtaa ilman latausta) ja raportin kortit (6.10.2026) */
.sa-valilehdet{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.sa-valilehdet::-webkit-scrollbar{display:none}
.sa-valilehdet.is-oikealla{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.sa-valilehdet.is-vasemmalla{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.sa-valilehdet.is-oikealla.is-vasemmalla{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.sa-valilehdet a{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;padding:10px 9px 12px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;border-radius:10px 10px 0 0;transition:color .15s,background-color .15s}
.sa-valilehdet a:hover{color:var(--ink);background:var(--paper)}
.sa-valilehdet a::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:transparent;transition:background-color .15s}
.sa-valilehdet a.is-on{color:var(--ink);text-shadow:.35px 0 0 currentColor}
.sa-valilehdet a.is-on::after{background:var(--pink)}
.sa-valilehdet a.is-on > svg{color:var(--pink-ink)}
.sa-valilehdet a:focus-visible{outline:2px solid var(--pink);outline-offset:-3px}
.sa-merkki{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--paper-2);color:var(--muted);font-size:11.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.sa-merkki.is-huomio{background:var(--pink-fill);color:#fff}
.sa-merkki.is-ok{background:var(--ok-soft);color:var(--ok-ink)}
.sa-paneeli{display:grid;gap:14px;min-width:0}
.sa-paneeli[hidden]{display:none}
.sa-paneeli .mg-card{padding:18px;gap:12px}
.sa-otsikko{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.sa-otsikko > svg{flex:none;color:var(--pink-ink)}
.sa-otsikko .mg-tag{margin-left:2px}
.sa-otsikko-logo{flex:none;display:block}
.sa-pikku{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.sa-pikku > svg{vertical-align:-2px;margin-right:4px}
.sa-stat-ikoni{display:grid;place-items:center;width:34px;height:34px;margin-bottom:8px;border-radius:10px;background:var(--pink-soft);color:var(--pink-ink)}
.sa-stats.is-small .sa-stat-ikoni{width:30px;height:30px;margin-bottom:6px;border-radius:9px}
a.sa-stat{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.sa-stat:hover{border-color:var(--line-strong);box-shadow:var(--shadow-card)}
a.sa-stat:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.sa-rivi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.sa-kuu-luku{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sa-kuu-luku b{font:600 30px/1 var(--font-display);letter-spacing:-.02em}
.sa-kuu-luku span{font-size:13px;color:var(--muted)}
.sa-mittari{height:10px}
.sa-mittari i{background:linear-gradient(90deg,#fa2176,#a22bd5)}
.sa-faktat{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sa-faktat li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45}
.sa-faktat li > svg{flex:none;margin-top:1px;color:var(--muted)}
.sa-nosto{border-color:color-mix(in srgb,var(--pink) 35%,var(--line));background:linear-gradient(160deg,var(--tint-pink),var(--card) 70%)}
.sa-nosto-art{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:inherit;text-decoration:none}
.sa-nosto-art b{font-weight:600;overflow-wrap:anywhere}
.sa-nosto-art:hover b{text-decoration:underline}
.sa-nosto-art small{font-size:12.5px;color:var(--muted)}
.sa-tyhja{display:grid;justify-items:center;align-content:center;gap:6px;padding:26px 18px;text-align:center}
.sa-tyhja.is-sisalla{padding:20px 14px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--paper)}
.sa-tyhja b{font-size:15px}
.sa-tyhja p{margin:0;max-width:46ch;font-size:13.5px;line-height:1.5;color:var(--muted)}
.sa-tyhja-ikoni{display:grid;place-items:center;width:48px;height:48px;margin-bottom:4px;border-radius:50%;background:var(--pink-soft);color:var(--pink-ink)}
.sa-tyhja-ikoni.is-ok{background:var(--ok-soft);color:var(--ok-ink)}
.sa-item-main small > svg{vertical-align:-2px;margin-right:2px}
.sa-art-nuoli{color:var(--muted);transition:transform .2s var(--ease)}
.sa-art[open] .sa-art-nuoli{transform:rotate(180deg)}
.sa-palvelut{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sa-palvelut li{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px 9px 9px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:13.5px;font-weight:600;line-height:1.25}
.sa-palvelu-logo{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(29,19,38,.08)}
.sa-palvelu-logo img{display:block;width:24px;height:24px}
.sa-geo-myynti{background:linear-gradient(160deg,var(--tint-pink),var(--card) 60%)}
.sa-geo-hinta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sa-geo-hinta > div{display:grid;gap:2px}
.sa-geo-hinta b{font:600 22px/1.1 var(--font-display);letter-spacing:-.01em}
.sa-geo-hinta small{font-size:12.5px;color:var(--muted)}
.sa-chip img{display:block;flex:none}
.sa-q-kysymys{flex:1;min-width:200px;font-weight:500}
:root[data-theme="dark"] .sa-merkki.is-ok,:root[data-theme="dark"] .sa-tyhja-ikoni.is-ok,:root[data-theme="dark"] .sa-topics li.is-nyt .sa-topic-nro{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sa-merkki.is-ok,:root:not([data-theme="light"]) .sa-tyhja-ikoni.is-ok,:root:not([data-theme="light"]) .sa-topics li.is-nyt .sa-topic-nro{color:#6ee7b7}}
@media (max-width:760px){.sa-rivi{grid-template-columns:1fr}}
@media (max-width:560px){
  .sa-palvelut{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-paneeli .mg-card{padding:16px}
}
.sa-hero{background:linear-gradient(180deg,var(--tint-pink),var(--card) 70%)}
.sa-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sa-stat{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.sa-stat b{font:600 28px/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sa-stat span{font-size:13px;color:var(--muted);line-height:1.35}
.sa-stats.is-small .sa-stat b{font-size:22px}
.sa-num{font-variant-numeric:tabular-nums}
.sa-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--paper);font-size:13.5px}
.sa-note > svg{flex:none;color:var(--pink-ink)}
.sa-note > span{flex:1;min-width:200px}
.sa-note.is-warn{background:var(--warn-soft)}
.sa-note.is-warn > svg{color:var(--warn-ink)}
.sa-note form{margin:0}
.sa-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sa-item{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.sa-item-main{flex:1;min-width:220px;display:grid;gap:4px}
.sa-item-main p{margin:0;font-size:13.5px;color:var(--muted)}
.sa-item-main small{font-size:12.5px;color:var(--muted)}
.sa-item-act{display:flex;align-items:center;gap:12px}
.sa-item-act form{margin:0}
.sa-art{border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sa-art > summary{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:11px 14px;cursor:pointer;list-style:none}
.sa-art > summary::-webkit-details-marker{display:none}
.sa-art > summary:hover{background:var(--paper);border-radius:12px}
.sa-art[open] > summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.sa-art-title{display:grid;gap:1px;min-width:0;flex:1}
.sa-art-title b{font-size:14px;font-weight:600}
.sa-art-title small{font-size:12.5px;color:var(--muted)}
.sa-chips{display:flex;flex-wrap:wrap;gap:6px}
.sa-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.sa-chip svg{color:var(--muted)}
.sa-chip.is-ok{background:var(--ok-soft);color:var(--ok-ink)}
.sa-art-body{display:grid;gap:10px;padding:12px 14px 14px}
.sa-art-body > p{margin:0;font-size:13.5px;color:var(--muted)}
.sa-art-body > .btn{justify-self:start}
.sa-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0}
.sa-dl div{padding:8px 10px;border-radius:10px;background:var(--paper)}
.sa-dl dt{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.sa-dl dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.sa-kw{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sa-kw li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 10px;border-radius:8px;background:var(--paper);font-size:13.5px}
.sa-kw small{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.sa-more > summary{cursor:pointer;color:var(--pink-ink);font-weight:600;font-size:13.5px;padding:6px 0}
.sa-more[open] > summary{margin-bottom:8px}
.sa-topics{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sa-topics li{display:flex;align-items:center;gap:12px;padding:9px 8px 9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;min-height:48px}
.sa-topics li.is-nyt{border-color:color-mix(in srgb,#10b981 40%,var(--line))}
.sa-topic-nro{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--muted);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.sa-topics li.is-nyt .sa-topic-nro{background:var(--ok-soft);color:var(--ok-ink)}
.sa-topic-teksti{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sa-topic-teksti b{font-weight:600;overflow-wrap:anywhere}
.sa-topics li form{margin:0 0 0 auto}
.sa-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.sa-add .field{flex:1;min-width:220px;margin:0}
.sa-steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--muted);display:grid;gap:2px}
.sa-trend{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sa-trend li{display:grid;grid-template-columns:130px 1fr 56px;align-items:center;gap:10px;font-size:13px}
.sa-trend b{text-align:right;font-variant-numeric:tabular-nums}
.sa-bar{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.sa-bar i{display:block;height:100%;background:var(--pink);border-radius:99px}
.sa-q{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--paper);font-size:13.5px}
/* Silta AI: asetukset, jotka tallentuvat valittaessa */
.sa-settings{display:grid;gap:14px}
.sa-saved{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:5px;min-height:20px;transition:opacity .3s}
.sa-saved.is-ok{color:var(--ok-ink)}
.sa-saved.is-err{color:var(--err-ink)}
.sa-saved:empty{opacity:0}
.sa-switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.sa-switch > span:last-child{display:grid;gap:2px}
.sa-switch small{color:var(--muted);font-size:13px}
.sa-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sa-opts.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sa-opt{position:relative;display:block;cursor:pointer}
.sa-opt input{position:absolute;opacity:0;pointer-events:none}
.sa-opt > span{display:grid;gap:3px;height:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);transition:border-color .15s,box-shadow .15s}
.sa-opt b{font-size:14px}
.sa-opt small{font-size:12.5px;color:var(--muted);line-height:1.4}
.sa-opt:hover > span{border-color:var(--line-strong)}
.sa-opt input:checked + span{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.sa-opt input:checked + span b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:var(--pink);vertical-align:middle}
.sa-opt input:focus-visible + span{outline:3px solid var(--pink);outline-offset:2px}
.sa-opt input:disabled + span{cursor:default;opacity:.7}
.sa-delay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.sa-ohjeet{margin:0}
.sa-ohjeet span{font-weight:600;font-size:14px}
.sa-row-end{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.sa-row-end small{margin-right:auto}
.sa-chiplist{display:grid;gap:10px}
.sa-chiprow{display:flex;flex-wrap:wrap;gap:6px}
.sa-chiprow:empty{display:none}
.sa-tchip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 4px 0 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13.5px;font-weight:500;max-width:100%}
.sa-tchip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-tchip.is-used{background:var(--ok-soft);border-color:#a7f3d0}
.sa-tchip.is-used svg{color:var(--ok-ink);flex:none}
.sa-tchip button{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;padding:0;flex:none}
.sa-tchip button:hover{background:var(--card);color:var(--err-ink)}
.sa-tchip.is-new{animation:sa-pop .3s var(--ease)}
@keyframes sa-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.sa-empty{margin:0;font-size:13.5px;color:var(--warn-ink)}
.sa-add-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sa-add-inline input{flex:1 1 220px;min-width:0}
.sa-suggest{display:flex;flex-wrap:wrap;gap:6px}
.sa-suggest .chip-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:5px 10px}
.sa-suggest .chip-btn[disabled]{opacity:.45;cursor:default;transform:none}
.sa-ideas{display:grid;gap:8px;padding-top:10px;border-top:1px dashed var(--line)}
.sa-combo{position:relative}
.sa-combo-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop)}
.sa-combo-list li{padding:8px 10px;border-radius:8px;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.sa-combo-list li small{color:var(--muted)}
.sa-combo-list li.is-active,.sa-combo-list li:hover{background:var(--pink-soft)}
.sa-combo-list li[aria-disabled=true]{opacity:.5;cursor:default}
.sa-settings[data-sa-lukittu] .sa-tchip button{display:none}
@media (max-width:640px){
  .sa-opts,.sa-opts.is-2{grid-template-columns:1fr}
  .sa-trend li{grid-template-columns:96px 1fr 48px}
  .sa-stat b{font-size:24px}
}
/* Hallinta: kunto-pisteet (SEO ja Turvallisuus, manage/kunto) ja SEO-editori (manage/seo) */
.kunto{--kunto:#94a3b8;--kunto-soft:var(--paper);gap:14px}
.kunto.is-hyva{--kunto:#10b981;--kunto-soft:var(--ok-soft)}
.kunto.is-kohtalainen{--kunto:#d97706;--kunto-soft:var(--warn-soft)}
.kunto.is-heikko{--kunto:#e11d48;--kunto-soft:var(--err-soft)}
.kunto-yla{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kunto-rengas{position:relative;flex:none;width:112px;height:112px}
.kunto-rengas svg{width:100%;height:100%;transform:rotate(-90deg)}
.kunto-rengas circle{fill:none;stroke-width:10}
.kunto-pohja{stroke:var(--paper-2)}
.kunto-kaari{stroke:var(--kunto);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--kaari,100);animation:kunto-kasvaa .9s var(--ease) both}
@keyframes kunto-kasvaa{from{stroke-dashoffset:100}}
.kunto-luku{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.kunto-luku b{font:700 34px/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kunto-luku b.is-tyhja{color:var(--faint)}
.kunto-luku small{margin-top:4px;font-size:12px;color:var(--muted)}
.kunto-teksti{flex:1;min-width:200px;display:grid;gap:3px}
.kunto-teksti p{margin:0}
.kunto-taso{font:700 20px/1.2 var(--font-display);color:var(--kunto)}
.kunto.is-tuntematon .kunto-taso{color:var(--ink)}
.kunto-arvio{font-size:14.5px;color:var(--ink);line-height:1.45}
.kunto-aika{display:flex;align-items:center;gap:5px;margin-top:2px !important;font-size:12.5px;color:var(--muted)}
.kunto-tarkista{margin:0;align-self:flex-start}
.kunto-suositus{display:flex;gap:12px;padding:14px;border-radius:12px;background:var(--kunto-soft);border:1px solid color-mix(in srgb,var(--kunto) 22%,transparent)}
.kunto-suositus-ikoni{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--card);color:var(--kunto)}
.kunto-suositus>div{display:grid;gap:6px;min-width:0}
.kunto-suositus b{font-size:14px}
.kunto-suositus p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.kunto-suositus .mg-actions{margin-top:4px}
.kunto-seuraava{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--ok-soft);color:var(--ok-ink);font-weight:600;font-size:14px;text-decoration:none;transition:background-color .15s}
.kunto-seuraava span{flex:1}
.kunto-seuraava:hover{background:color-mix(in srgb,#10b981 16%,var(--card))}
.kunto-lista{border-top:1px solid var(--line);padding-top:4px}
.kunto-lista>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;cursor:pointer;list-style:none;font-weight:600;font-size:14px;color:var(--ink);border-radius:8px}
.kunto-lista>summary::-webkit-details-marker{display:none}
.kunto-lista>summary:hover{color:var(--pink-ink)}
.kunto-lista>summary svg{color:var(--muted);transition:transform .2s var(--ease)}
.kunto-lista[open]>summary svg{transform:rotate(180deg)}
.kunto-lista[open]{display:grid;gap:10px;padding-bottom:4px}
.kunto-havainnot li>span:first-child{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.kunto-havainnot li small{color:var(--muted);font-size:12.5px;white-space:pre-line}
.kunto-toimet{display:flex;align-items:center;gap:12px;flex:none}
.kunto-hoitaa{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.kunto-ok-otsikko{margin-top:4px !important}
.kunto-digisilta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--paper);font-size:13.5px}
.kunto-digisilta>svg{color:var(--muted);flex:none}
.kunto-digisilta p{flex:1;min-width:180px;margin:0;color:var(--ink);line-height:1.45}

.seo-ed{gap:14px;scroll-margin-top:16px}
.seo-ed .mg-head{align-items:flex-start}
.seo-ed-otsikko{font-size:15px}
.seo-ed .mg-head .hint{margin-top:2px}
.seo-ok,.seo-virhe{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:10px;font-size:14px}
.seo-ok{background:var(--ok-soft);color:var(--ok-ink)}
.seo-virhe{background:var(--err-soft);color:var(--err-ink)}
.seo-kentta .seo-virhe{padding:6px 10px;font-size:13px}
.seo-val{position:relative}
.seo-val-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);cursor:pointer;list-style:none;transition:border-color .15s,box-shadow .15s}
.seo-val-btn::-webkit-details-marker{display:none}
.seo-val-btn:hover,.seo-val[open] .seo-val-btn{border-color:var(--ink)}
.seo-val-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pink-soft);border-color:var(--pink)}
.seo-val-btn>svg{flex:none;color:var(--muted);transition:transform .2s var(--ease)}
.seo-val[open] .seo-val-btn>svg{transform:rotate(180deg)}
.seo-val-nimi{flex:1;min-width:0;display:grid;gap:1px}
.seo-val-nimi b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-val-nimi small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-piste{flex:none;width:10px;height:10px;border-radius:50%;background:var(--faint)}
.seo-piste.is-ok{background:#10b981}.seo-piste.is-huom{background:#d97706}.seo-piste.is-virhe{background:#e11d48}
.seo-tila{flex:none;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--paper);color:var(--muted);white-space:nowrap}
.seo-tila.is-ok{background:var(--ok-soft);color:var(--ok-ink)}.seo-tila.is-huom{background:var(--warn-soft);color:var(--warn-ink)}.seo-tila.is-virhe{background:var(--err-soft);color:var(--err-ink)}
.seo-val-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow-pop)}
.seo-val-haku{display:flex;align-items:center;gap:8px;padding:0 10px;margin-bottom:4px;border-bottom:1px solid var(--line);color:var(--muted)}
.seo-val-haku input{flex:1;min-width:0;height:40px;border:0;outline:none;background:none;font:14px var(--font-body);color:var(--ink)}
.seo-val-lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;max-height:320px;overflow:auto;overscroll-behavior:contain}
.seo-val-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink);text-decoration:none}
.seo-val-opt:hover,.seo-val-opt:focus-visible,.seo-val-opt.is-aktiivinen{background:var(--paper);outline:none}
.seo-val-opt.is-on{background:var(--pink-soft)}
.seo-val-tyhja{padding:10px;margin:0}
.seo-form{display:grid;gap:16px}
.seo-kentta{display:grid;gap:6px}
.seo-kentta-yla{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.seo-kentta-yla label{font-weight:600;font-size:14px}
.seo-kentta input,.seo-kentta textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);font:15px/1.45 var(--font-body);transition:border-color .15s,box-shadow .15s}
.seo-kentta textarea{resize:vertical;min-height:84px}
.seo-kentta input:focus,.seo-kentta textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.seo-ehdota.is-busy{opacity:.75;pointer-events:none}
.seo-ehdota.is-busy svg{animation:spin 1s linear infinite}
.seo-mittari{height:4px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.seo-mittari i{display:block;height:100%;width:0;border-radius:inherit;background:var(--faint);transition:width .2s var(--ease),background-color .2s}
.seo-kentta.is-ok .seo-mittari i{background:#10b981}.seo-kentta.is-huom .seo-mittari i{background:#d97706}.seo-kentta.is-virhe .seo-mittari i{background:#e11d48}
.seo-laskuri{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:12.5px;color:var(--muted)}
.seo-laskuri [data-seo-luku]{font-variant-numeric:tabular-nums;white-space:nowrap}
.seo-kentta.is-ok [data-seo-tila]{color:var(--ok-ink)}.seo-kentta.is-huom [data-seo-tila]{color:var(--warn-ink)}.seo-kentta.is-virhe [data-seo-tila]{color:var(--err-ink)}
.seo-ehdotukset{display:grid;gap:8px;padding-top:4px}
.seo-ehdotukset>p{margin:0;font-size:12.5px;color:var(--muted)}
.seo-vaihtoehto{display:grid;gap:4px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-align:left;font:14px/1.45 var(--font-body);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s var(--ease)}
.seo-vaihtoehto:hover{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.seo-vaihtoehto:active{transform:scale(.99)}
.seo-vaihtoehto small{font-size:12px;color:var(--muted)}
.seo-vaihtoehto.is-valittu{border-color:var(--pink);background:var(--pink-soft)}
.seo-ehdota-virhe{margin:-6px 0 0;font-size:13.5px;color:var(--err-ink)}
.seo-serp{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--paper)}
.seo-serp-yla{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.seo-laite{display:inline-flex;padding:3px;border-radius:10px;background:var(--paper-2)}
.seo-laite button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 12.5px var(--font-body);cursor:pointer}
.seo-laite button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-card)}
.seo-serp-tulos{display:grid;gap:4px;max-width:600px;padding:16px;border-radius:12px;background:#fff;color:#202124;font-family:Arial,Helvetica,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.seo-serp[data-laite="mobiili"] .seo-serp-tulos{max-width:360px;border-radius:16px}
.seo-serp-sivusto{display:flex;align-items:center;gap:10px;margin-bottom:2px;min-width:0}
.seo-serp-ikoni{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f1f3f4;border:1px solid #e3e5e8;color:#1a0dab;font-size:13px;font-weight:700;overflow:hidden}
.seo-serp-ikoni img{display:block;width:18px;height:18px;object-fit:contain}
.serp .seo-serp-sivusto{margin-bottom:4px}
.seo-serp-nimi{display:grid;min-width:0;line-height:1.3}
.seo-serp-nimi b{font-size:14px;font-weight:400;color:#202124;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-serp-nimi small{font-size:12px;color:#4d5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-serp-otsikko{font-size:20px;line-height:1.3;color:#1a0dab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-serp[data-laite="mobiili"] .seo-serp-otsikko{font-size:18px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.seo-serp-kuvaus{margin:0;font-size:14px;line-height:1.58;color:#4d5156;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seo-serp-kuvaus.is-tyhja{font-style:italic;color:#80868b}
.seo-serp[data-laite="mobiili"] .seo-serp-kuvaus{-webkit-line-clamp:3}
.seo-serp>.hint{margin:0;font-size:12.5px}
.seo-tallenna{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seo-tallenna .hint{flex:1;min-width:200px;margin:0;font-size:13px}

.seo-lisa{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px;background:linear-gradient(135deg,var(--tint-pink),var(--card) 70%);border-color:color-mix(in srgb,var(--pink) 22%,var(--line));scroll-margin-top:16px}
.seo-lisa-ikoni{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--pink-fill);color:#fff}
.seo-lisa-sisalto{display:grid;gap:8px;min-width:0}
.seo-lisa h3{margin:0;font:700 17px/1.3 var(--font-display)}
.seo-lisa p{margin:0;font-size:14px;line-height:1.5}
.seo-lisa .hint{font-size:12.5px}
.seo-lisa-hyodyt{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}
.seo-lisa-hyodyt li{display:inline-flex;align-items:center;gap:6px}
.seo-lisa-hyodyt svg{color:var(--ok-ink)}
@media (max-width:520px){
  .kunto-yla{gap:14px}.kunto-rengas{width:92px;height:92px}.kunto-luku b{font-size:28px}
  .kunto-tarkista{width:100%}.kunto-tarkista .btn{width:100%}
  .seo-val-btn .seo-tila{display:none}
  .seo-lisa{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.kunto-kaari{animation:none}.seo-ehdota.is-busy svg{animation:none}}

/* Mediakirjasto: kuvat täysin näkyvinä. Himmennys kuuluu vain sivuston kuvavaiheeseen, jossa valitsematon kuva ei mene sivustolle. */
.media-grid .thumb:has(input:not(:checked)) img{opacity:1;filter:none}
/* ---------- Silta AI: logo, myyntinäkymä, artikkelin esikatselu ja peruminen ---------- */
.sa-logo{display:inline-flex;align-items:center;gap:.55em;font:700 20px/1 var(--font-display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.sa-logo-merkki{height:26px;width:auto;display:block}
.sa-logo-ai{background:linear-gradient(96deg,#fa2176 10%,#a22bd5 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sa-logo.is-iso{font-size:24px}.sa-logo.is-iso .sa-logo-merkki{height:30px}
.sa-logo.is-pieni{font-size:16px}.sa-logo.is-pieni .sa-logo-merkki{height:20px}
.sa-title h2{display:flex;align-items:center;margin:0}
.kassa-otsikko .sa-logo{font-size:inherit;vertical-align:middle}
.sa-myynti{background:linear-gradient(160deg,var(--tint-pink),var(--card) 60%);gap:12px}
.sa-myynti-kicker{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-ink)}
.sa-myynti-otsikko{margin:0;font:600 24px/1.2 var(--font-display);text-wrap:balance}
.sa-myynti-ingressi{margin:0;font-size:15px;color:var(--muted);max-width:60ch}
.sa-myynti-luvut{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sa-myynti-luvut .sa-stat b{color:var(--pink-ink)}
.sa-lahde{margin:0;font-size:12px;color:var(--faint)}
.sa-hyodyt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sa-hyodyt li{display:flex;gap:12px;align-items:flex-start}
.sa-hyodyt p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.sa-hyoty-ikoni{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--pink-soft);color:var(--pink-ink)}
.sa-askeleet{margin:0;padding:0;list-style:none;counter-reset:sa;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sa-askeleet li{counter-increment:sa;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.sa-askeleet li::before{content:counter(sa);display:grid;place-items:center;width:26px;height:26px;margin-bottom:8px;border-radius:50%;background:var(--merkki);color:var(--merkki-teksti);font-weight:700;font-size:13px}
.sa-askeleet p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.sa-caset{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sa-caset li{display:grid;grid-template-columns:150px 1fr;gap:2px 12px;padding:10px 12px;border-radius:10px;background:var(--paper)}
.sa-caset small{grid-column:1;color:var(--muted);font-size:12.5px}
.sa-caset span{grid-column:2;grid-row:1/span 2;align-self:center;font-weight:600;font-size:14px}
.sa-tilaa .mg-actions{margin-top:4px}
.sa-peru-linkki{margin:0;text-align:right}
.sa-peru-linkki .link-btn{color:var(--muted);font-weight:500;font-size:13px}
.sa-takaisin{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.sa-art-otsikko{margin:0;font:600 22px/1.25 var(--font-display);text-wrap:balance}
.sa-art-hakusana{margin:0;font-size:13.5px;color:var(--muted)}
.sa-art-hakusana svg{vertical-align:-2px;margin-right:4px}
.sa-art-hakusana b{color:var(--ink)}
.sa-hyvaksy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-radius:12px;background:var(--paper)}
.sa-hyvaksy form{margin:0}
.sa-hyvaksy .link-btn{margin-left:auto}
.sa-ajasta{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px}
.sa-ajasta .field{margin:0;max-width:280px}
.sa-lukija{gap:12px}
.sa-lukija-kuva{width:100%;max-height:360px;object-fit:cover;border-radius:12px}
.sa-lukija-ingressi{margin:0;font-size:16px;font-weight:500;line-height:1.6}
.sa-lukija-sisalto{width:100%;min-height:200px;border:0;border-radius:8px;background:#fff}
/* Artikkelin muokkaus esikatselussa (Muokkaa): kortti vaihtuu lomakkeeksi, teksti omassa muokkaimessa. */
.sa-lukija-napit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.sa-lukija-napit .sa-saved{margin-left:0}
.sa-lukutila{display:grid;gap:12px}
.sa-lukutila[hidden],.sa-muokkain[hidden]{display:none}
.sa-muokkain{display:grid;gap:4px;margin:0}
.sa-kentta{margin-bottom:12px;min-width:0}
.sa-kentta > span{font-weight:600;font-size:14.5px}
.sa-kentta > span small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.sa-kentta textarea{min-height:0}
.sa-kentta [aria-invalid="true"]{border-color:#dc2626}
.sa-laskuri{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sa-laskuri.is-huom{color:var(--warn-ink)}
.sa-laskuri.is-virhe{color:var(--err-ink)}
.sa-kentta .seo-kentta-yla label{flex:1 1 160px;min-width:0;font-size:14.5px}
.sa-kentta .seo-kentta-yla label small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.sa-kentta .seo-ehdota-virhe{margin:0}
.sa-editori{border:1px solid var(--line-strong);border-radius:12px;background:var(--card);transition:border-color .15s,box-shadow .15s}
.sa-editori:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.sa-editori:has(.sa-teksti[aria-invalid="true"]){border-color:#dc2626}
.sa-editori-yla{position:sticky;top:0;z-index:15;background:var(--card);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
body:has(.work-top) .sa-editori-yla{top:56px}
.sa-tyokalut{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px}
.sa-tk{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--ink);font:600 13px/1 var(--font-body);cursor:pointer;transition:background-color .12s}
.sa-tk:hover{background:var(--paper)}
.sa-tk[aria-pressed="true"]{background:var(--pink-soft);color:var(--pink-ink)}
.sa-tk b{font-weight:700;letter-spacing:.01em}
.sa-tk-vali{width:1px;height:22px;margin:0 4px;background:var(--line)}
.sa-linkki{display:grid;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--paper)}
.sa-linkki[hidden]{display:none}
.sa-linkki-kentta{display:block;margin:0}
.sa-linkki-napit{display:flex;flex-wrap:wrap;gap:6px}
.sa-linkki-virhe{margin:0;font-size:13px;color:var(--err-ink)}
.sa-teksti{min-height:320px;padding:14px 18px 22px;font:16px/1.7 var(--font-body);color:var(--ink);outline:none;overflow-wrap:anywhere;caret-color:var(--pink)}
.sa-teksti > :first-child{margin-top:0}
.sa-teksti h2,.sa-teksti h3,.sa-teksti h4{font-family:var(--font-display);line-height:1.25;margin:1.4em 0 .5em}
.sa-teksti h2{font-size:22px}
.sa-teksti h3{font-size:18px}
.sa-teksti p,.sa-teksti ul,.sa-teksti ol{margin:0 0 1em}
.sa-teksti ul,.sa-teksti ol{padding-left:1.4em}
.sa-teksti a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
.sa-teksti blockquote{margin:1em 0;padding:.4em 1em;border-left:3px solid var(--pink);color:var(--muted)}
.sa-teksti blockquote p{margin:0}
.sa-teksti img{max-width:100%;height:auto;border-radius:10px}
.sa-teksti figure{margin:1em 0}
.sa-teksti table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.sa-teksti td,.sa-teksti th{border:1px solid var(--line);padding:6px 8px;text-align:left}
.sa-muokkain-palkki{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0 -16px -16px;padding:12px 16px;border-top:1px solid var(--line);background:var(--card);border-radius:0 0 14px 14px}
.sa-muokkain-tila{margin-right:auto;font-size:13.5px;color:var(--muted)}
.sa-muokkain-tila.is-virhe{color:var(--err-ink);font-weight:600}
.sa-muokkain-palkki .btn.is-busy{opacity:.7;cursor:progress}
:root[data-theme="dark"] .sa-muokkain-tila.is-virhe,:root[data-theme="dark"] .sa-laskuri.is-virhe,:root[data-theme="dark"] .sa-linkki-virhe,:root[data-theme="dark"] .seo-ehdota-virhe{color:#fca5a5}
:root[data-theme="dark"] .sa-laskuri.is-huom{color:#fcd34d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sa-muokkain-tila.is-virhe,:root:not([data-theme="light"]) .sa-laskuri.is-virhe,:root:not([data-theme="light"]) .sa-linkki-virhe,:root:not([data-theme="light"]) .seo-ehdota-virhe{color:#fca5a5}:root:not([data-theme="light"]) .sa-laskuri.is-huom{color:#fcd34d}}
@media (max-width:640px){
  .sa-lukija .mg-head{align-items:flex-start}
  .sa-teksti{padding:12px 12px 18px;min-height:260px}
  .sa-tk{min-width:40px;height:40px}
  .sa-tk-vali{display:none}
  .sa-muokkain-palkki .btn{flex:1 1 auto}
  .sa-muokkain-tila{flex-basis:100%}
  .sa-muokkain-tila:empty{display:none}
}
.sa-item-otsikko{text-decoration:none;color:inherit}
.sa-item-otsikko:hover b{text-decoration:underline}
.sa-peru .kassa-otsikko{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sa-tarjous{display:grid;gap:12px;border:1.5px solid var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.sa-tarjous h2,.sa-tarjous p{margin:0}
.sa-tarjous-merkki{display:inline-flex;align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--pink-fill);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sa-tarjous-lainaus{margin:0;padding:10px 14px;border-left:3px solid var(--pink);background:var(--paper);border-radius:0 10px 10px 0;font-size:14px}
.sa-tarjous-lainaus small{display:block;margin-top:6px;color:var(--faint);font-size:12px}
.sa-tarjous-hinta{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end}
.sa-tarjous-hinta div{display:grid;gap:2px}
.sa-tarjous-hinta small{font-size:12.5px;color:var(--muted)}
.sa-tarjous-hinta s{font-size:18px;color:var(--muted)}
.sa-tarjous-hinta b{font:700 28px/1.1 var(--font-display);color:var(--pink-ink);font-variant-numeric:tabular-nums}
.sa-peru form{margin:0}
@media (max-width:640px){
  .sa-hyodyt,.sa-askeleet{grid-template-columns:1fr}
  .sa-caset li{grid-template-columns:1fr}
  .sa-caset span{grid-column:1;grid-row:auto}
  .sa-hyvaksy .btn{flex:1 1 auto}
  .sa-hyvaksy > form:first-child,.sa-hyvaksy > form:first-child .btn{width:100%}
  .sa-hyvaksy .link-btn{margin-left:0}
  .sa-myynti-otsikko{font-size:20px}
}
.seo-lisa.is-logo{grid-template-columns:minmax(0,1fr)}
.seo-lisa .sa-logo{justify-self:start}
/* Värit ja kuvat -vaihe: kuvat ja logo lisätään suoraan tässä (steps/kuvat). */
.kv-kuvat .hint{margin:0 0 10px}
.kv-kuvarivi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.kv-kuvarivi img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--paper)}
.kv-lisaa{display:grid;place-items:center;width:72px;height:72px;border-radius:10px;background:var(--paper);color:var(--muted);font-weight:600;font-size:14px}
.kv-napit{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.kv-napit .btn{cursor:pointer}
.kv-maksuton{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--ok-ink)}

/* Tilauskortit: oma tekoälyavain Lisäasetusten takana (plan-cards). */
.plan-lisa{margin-top:14px;font-size:14px}
.plan-lisa summary{cursor:pointer;color:var(--muted);font-weight:600;width:max-content;max-width:100%;padding:4px 0}
.plan-lisa summary:hover{color:var(--ink)}
.plan-lisa .byok-toggle{margin:10px 0 0}

/* Käyttörajan ilmoitus kirjoituskentän yhteydessä: kapealla näytöllä teksti omalle rivilleen, sulkunappi ylänurkkaan. */
.oc-composer > .ub-kehys > .usage-banner{margin:0 0 8px}
/* Kapea keskustelusarake myös työpöydällä (aloitusvaiheiden sivuchat 355 px, kavennettu muokkauschat): teksti omalle
   rivilleen ja nappi sen alle. Ennen teksti rivittyi sanan levyisiksi riveiksi ja nappi peitti sen (QA 22.10. k2 A-23).
   Kokokysely kohdistuu bannerin kehykseen (.ub-kehys), ei ikkunaan. */
.ub-kehys{container-type:inline-size}
@container (max-width:460px){
  .usage-banner{flex-wrap:wrap;row-gap:8px}
  .usage-banner .ub-txt{flex:1 1 calc(100% - 70px)}
  .usage-banner .ub-x{order:2}
  .usage-banner .btn{order:3;margin-left:26px}
}
@media (max-width:600px){
  .usage-banner{flex-wrap:wrap;row-gap:8px}
  .usage-banner .ub-txt{flex:1 1 calc(100% - 70px)}
  .usage-banner .ub-x{order:2}
  .usage-banner .btn{order:3;margin-left:26px}
}
/* K2 (arvio 7.10.2026): vahvistusilmoitus puhelimella yhtenä rivinä; lisäteksti näkyy vasta lähetyksen tuloksena. */
.usage-banner .ub-lyhyt{display:none}
@media (max-width:600px){
  .usage-banner.is-vahvista{flex-wrap:nowrap;padding:6px 6px 6px 12px;gap:8px}
  .usage-banner.is-vahvista .ub-pitka{display:none}
  .usage-banner.is-vahvista .ub-lyhyt{display:inline}
  .usage-banner.is-vahvista .ub-txt{flex:1 1 auto;font-size:13px}
  .usage-banner.is-vahvista .ub-txt small:not(.is-tulos){display:none}
  .usage-banner.is-vahvista .btn{order:0;margin-left:0}
  .usage-banner.is-vahvista .ub-x{order:0}
}
.side-vahvista small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.4}

/* Julkaisuikkunan hinnat (QA 5.10.2026): hinta näkyy ennen kuin asiakas siirtyy kassalle. */
.pj-lisa-hinta{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink)}
.pj-hinta{margin:4px 0 10px}
.pj-vaihda{margin:10px 0 0}

/* Automaattitallennuksen kenttävirheet ja virheilmoitus alalaidassa (QA 5.10.2026). */
.kentta-virhe{margin:6px 0 0;font-size:13px;font-weight:500;color:var(--err-ink)}
[aria-invalid="true"]{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}
.tallennettu-ilmoitus.is-virhe{background:#7f1d1d}
.tallennettu-ilmoitus.is-virhe span{background:#ef4444}

/* Pieni segmenttivalinta (tiimin roolit). */
.seg-sm label span{padding:5px 10px;font-size:13px}
.ma-pop.is-ylos{top:auto;bottom:calc(100% + 4px)}
@media (max-width:640px){
  /* Puhelimella viestin lisätoiminnot alareunan paneelina: lokissa ei ole tilaa avata valikkoa kumpaankaan suuntaan. */
  .ma-pop,.ma-pop.is-ylos{position:fixed;left:12px;right:12px;top:auto;bottom:max(12px,env(safe-area-inset-bottom));min-width:0;z-index:120}
}

/* Virhe- ja onnistumistiedote erottuvat toisistaan (QA 5.10.2026: virhe näkyi harmaana kuten onnistuminen). */
.note.err{background:var(--err-soft);color:var(--err-ink);border:1px solid color-mix(in srgb,var(--err-ink) 30%,transparent);font-weight:500}
.note.ok-note{background:var(--ok-soft);color:var(--ok-ink);border:1px solid color-mix(in srgb,var(--ok-ink) 30%,transparent)}

/* Kosketuslaitteella ohjeet puhelimen kuville, ei raahausta, vaihto+klikkausta eikä QR-koodia (QA 5.10.2026). */
.vain-kosketus{display:none}
@media (pointer:coarse){.vain-tietokone{display:none!important}.vain-kosketus{display:revert}p.vain-kosketus{display:block}}
.ma-hinta{font-size:12px;white-space:nowrap;color:var(--muted);padding:2px 7px;border-radius:999px;background:var(--paper-2)}
.preview-stage.is-skaalattu{justify-content:flex-start;overflow:hidden}
.preview-stage.is-skaalattu iframe{transform-origin:top left;flex:none;max-width:none;transition:none}
/* Hallinnan osiot puhelimella yhtenä vaakasuunnassa vieritettävänä rivinä kuten Asetuksissa (QA 22.10. E-07: 13 osiota
   rivittyi seitsemälle riville ja vei koko ensimmäisen ruudun). Ennen (QA 5.10.) osiot jäivät huomaamatta sivusuunnassa:
   nyt oikean reunan häivytys ja puoliksi näkyvä seuraava osio kertovat jatkosta, ja valittu osio vieritetään näkyviin
   (studio.js) ja erottuu pinkkinä. Osiorivi pitää oman korkeutensa: ruudun korkuinen .mg jakoi lyhyissä osioissa
   ylimääräisen korkeuden myös osioriville, ja napit venyivät 96–240 px:n soikioiksi (QA 22.10. k2 E-20). */
@media (max-width:700px){
  .mg{grid-template-rows:auto 1fr}
  .mg-nav{align-items:center}
  .mg-nav{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:10px 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .mg-nav::-webkit-scrollbar{display:none}
  .mg-nav .mg-nav-ryhma{display:none}
  .mg-nav .mg-link{flex:none;padding:6px 12px;font-size:13.5px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
  .mg-nav .mg-link:last-child{margin-right:24px}
  .mg-nav .mg-link.is-on{border-color:transparent;background:var(--pink-soft);color:var(--pink-ink);box-shadow:none}
}
.dns-ohje{margin:6px 0 10px;padding-left:20px;display:grid;gap:4px}
.seg-nappi{border:0;background:none;padding:5px 10px;border-radius:9px;font:500 13px/1.2 var(--font-body);color:var(--muted);cursor:pointer}
.seg-nappi.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(29,19,38,.12)}
.np-siirto{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.np-siirto p{margin:0 0 10px;font-size:14px;color:var(--ink)}

/* Ostopolku vaiheittain (nakyvyys.js wizard). */
.np.is-wizard .np-rows{display:block;margin:0}
.np.is-wizard [data-vaihe][hidden]{display:none!important}
.np.is-wizard .np-row,.np.is-wizard .np-yhteenveto{animation:np-sisaan .28s var(--ease) both}
@keyframes np-sisaan{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.np.is-wizard .np-row{grid-template-columns:minmax(0,1fr);padding:24px;border-radius:18px}
.np.is-wizard .np-row .np-num{display:none}
.np.is-wizard .np-row h3{font-size:22px;margin:0 0 4px}
.np-vaihe-intro{margin:0 0 16px;color:var(--muted);font-size:15px}
.np:not(.is-wizard) .np-vaihe-intro,.np:not(.is-wizard) .np-yv-otsikko{display:none}
.np-askeleet{list-style:none;display:flex;gap:6px;margin:4px 0 18px;padding:0;counter-reset:ask;overflow-x:auto;scrollbar-width:none}
.np-askeleet li{flex:1 1 0;min-width:0}
.np-askeleet button{width:100%;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--muted);font:500 14px/1.2 var(--font-body);cursor:pointer;text-align:left;transition:border-color .2s,background .2s,color .2s}
.np-askeleet .np-ask-nro{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);font-size:13px;font-weight:700}
.np-askeleet .np-ask-nimi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-askeleet li.is-nyt button{border-color:var(--pink);color:var(--ink);box-shadow:0 0 0 3px var(--pink-soft)}
.np-askeleet li.is-nyt .np-ask-nro{background:var(--pink-fill);color:#fff}
.np-askeleet li.is-tehty .np-ask-nro{background:var(--pink-soft);color:var(--pink-ink)}
.np-nav{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.np-yhteenveto{margin-top:0}
.np.is-wizard .np-yhteenveto{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.np-yv-otsikko{font-size:22px;margin:0 0 12px}
.np-valitut{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.np-valitut li{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:12px;background:var(--paper)}
.np-yv-nimi{font-weight:600}
.np-yv-hinta{color:var(--muted);text-align:right}
@media (max-width:640px){.np-askeleet .np-ask-nimi{display:none}.np-askeleet li.is-nyt .np-ask-nimi{display:inline}.np-askeleet li.is-nyt{flex:3 1 0}.np.is-wizard .np-row,.np.is-wizard .np-yhteenveto{padding:18px}}
.np-nav .grow{flex:1}

/* Ostopolun Silta AI -esittely. */
.np-sa-hyodyt{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.np-sa-hyodyt li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.np-sa-hyodyt svg{color:var(--pink-ink);flex:none}
.np-sa-lisaa{justify-self:start;font-size:14px}
.np-esittely{display:grid;gap:8px;margin:0 0 18px;padding:16px 20px;border-radius:16px;background:linear-gradient(135deg,var(--pink-soft),var(--paper) 70%)}
.np-esittely-otsikko{display:flex;align-items:center;gap:10px;margin:0;font:700 17px/1.3 var(--font-head, var(--font-body));color:var(--ink)}
.np-esittely-otsikko svg{color:var(--pink-ink);flex:none}
.np-sa-hyodyt li svg{color:var(--pink-ink)}
/* Lisäpalvelutilauksen kuittaus (P5). */
.nk-kuittaus{position:relative}
.nk-kuittaus-merkki{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ok-soft);color:var(--ok-ink);margin-bottom:10px}
.nk-kuittaus-rivit{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.nk-kuittaus-rivit li{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);display:grid;gap:4px}
.nk-kuittaus-rivit p{margin:0}
.nk-kuittaus-rivit [data-kuittaus-ads]{justify-self:start;margin:4px 0}
.nk-kr-ylä{display:flex;justify-content:space-between;gap:12px;align-items:center}
.nk-kuittaus-napit{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
/* Julkaisematon sivusto (QA k2 N2): yksi iso päänappi julkaisuun tai julkaisun tila, ei lisämyyntiä. */
.nk-kuittaus-julkaisu{display:grid;gap:10px;justify-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--tint-pink)}
.nk-kuittaus-julkaisu p{margin:0}
.nk-kuittaus-julkaisu .btn{min-height:52px;padding:0 26px;font-size:16px}

/* Lisäpalvelukassan sopimusosa: ostaja, haltija ja ehdot. */
.np-sopimus{display:grid;gap:12px;margin:16px 0}
.np-haltija{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0;display:grid;gap:8px}
.np-haltija legend{font-weight:700;padding:0 6px}
.np-haltija-kentat{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.np:has(input[name=verkkotunnus]:not(:checked)) [data-np-haltija],.np:not(:has(input[name=verkkotunnus])) [data-np-haltija]{display:none}
.np:has(input[name=ostaja][value=yritys]:checked) [data-np-kuluttaja]{display:none}
.np:has(input[name=ostaja][value=kuluttaja]:checked) [data-np-yritys]{display:none}

/* ---------- Lisäpalvelujen ostopolku: tilaaja, alv-näkymä ja sopimusosa (alue D, 5.10.2026) ---------- */
.np-ostaja{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.np-ostaja-otsikko{font-weight:600;font-size:14px;color:var(--ink)}
.np-ostaja-valinnat{display:flex;flex-wrap:wrap;gap:6px}
.np-ostaja .np-opt span{align-items:center;gap:6px;padding:6px 12px}
.np-opt input:checked+span{color:var(--valittu-teksti)}
.np-opt[hidden]{display:none}
.np-ostaja-alv{margin-left:auto;color:var(--muted);font-size:13px}
.np-price[data-ads-hinta]{white-space:normal}
.np-huom{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--warn-soft);border:1px solid #fde68a;color:var(--ink);font-size:14px;line-height:1.5}
.np-huom svg{flex:none;margin-top:2px;color:var(--warn-ink)}
.np-huom[hidden]{display:none}
.np.is-kuluttaja [data-np-haltija],.np:has(input[name=ostaja][value=kuluttaja]:checked) [data-np-haltija]{display:none}
.np-sopimus{gap:14px;margin:20px 0 16px;padding-top:18px;border-top:1px solid var(--line)}
.np-sopimus-otsikko{margin:0;font-size:16px}
.np-sopimus .np-huom{margin:0}
.np-haltija{gap:10px;padding:16px 18px;background:var(--paper)}
.np-haltija legend{display:inline-flex;align-items:center;gap:6px}
.np-haltija legend svg{color:var(--pink-ink)}
.np-haltija .hint{margin:0}
.np-haltija-kentat{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
.np-haltija-kentat .field{margin:0;gap:5px}
.np-haltija-kentat .field>span{font-weight:600;font-size:13.5px}
.np-haltija-kentat .field:has([name=haltija_nimi]){grid-column:span 3}
.np-haltija-kentat .field:has([name=haltija_katu]){grid-column:span 2}
.np-ehdot{display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:var(--paper)}
.np-ehdot .kassa-check{font-size:14.5px}
.nk-kuittaus-ehdot{margin:0 0 16px}
@media (max-width:640px){.np-ostaja-alv{margin-left:0;flex-basis:100%}.np-haltija-kentat{grid-template-columns:repeat(2,minmax(0,1fr))}.np-haltija-kentat .field:has([name=haltija_nimi]),.np-haltija-kentat .field:has([name=haltija_katu]){grid-column:1/-1}}
/* ---------- Julkaisuikkunan putki (alue B, 5.10.2026): vaiheet, sisältövastuu, osoitehaku ja odotuksen aikajana ---------- */
.pj-askeleet{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;padding:0;font-size:13.5px;color:var(--muted)}
.pj-askeleet li{display:flex;align-items:center;gap:8px}
.pj-askeleet li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);font-size:12px;font-weight:700;background:var(--card)}
.pj-askeleet li.is-nyt{color:var(--ink);font-weight:600}
.pj-askeleet li.is-nyt span{border-color:var(--pink);color:var(--pink-ink);box-shadow:0 0 0 3px var(--pink-soft)}
.pj-askeleet li.is-tehty span{background:var(--pink-fill);border-color:var(--pink);color:#fff}
.pj-vastuu{display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.pj-vastuu h2{margin:0;font:700 clamp(19px,2.4vw,23px)/1.3 var(--font-display)}
.pj-vastuu .hint{margin:0}
.pj-vastuu-lomake{display:grid;gap:12px}
.pj-vastuu-rasti{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--paper);font-size:14.5px;line-height:1.5;cursor:pointer}
.pj-vastuu-rasti input{margin-top:4px;flex:none}
.pj-vastuu-lomake .btn{justify-self:start}
.pj-arvaus{margin:8px 0 0}
.pj-tulos:empty{display:none}
.pj-tulos[aria-busy=true]{opacity:.55}
.pj-tulos-kortti{align-items:flex-start}
.pj-tulos-teksti{display:grid;gap:4px;flex:1 1 280px;min-width:0}
.pj-tulos-teksti p{margin:0}
.pj-tulos-napit{display:grid;gap:6px;justify-items:start}
.pj-tulos-napit .pj-hinta{margin:0}
.pub-method .pj-suositus{justify-self:start;margin-bottom:2px}
.pj-seuraava{margin:8px 0 0}
.pj-tarkistus .dc-head b{font-weight:600}
.pj-maksu-odottaa{margin:0 0 14px}
.pj-nakyvyys{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--tint-pink, var(--paper))}
@media (max-width:560px){.pj-vastuu-lomake .btn,.pj-tulos-napit .btn{width:100%;justify-content:center}.pj-tulos-napit{justify-items:stretch}}

/* Onboardaus: P5 (tekstit, saavutettavuus ja puhelinkäyttö aloitusvaiheissa) */
.tile .tile-ico{display:inline-flex;color:var(--pink-ink);line-height:0}
.story-back:not([hidden]){display:inline-flex;align-items:center;gap:6px}
.skip{display:inline-flex;align-items:center;gap:6px}
.scene h1:focus{outline:none}
.scene h1:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:6px}
.story-err{margin:14px 0 0;color:var(--err-ink);font-weight:600;font-size:15px}
.ai-err{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 0;font-size:14px;color:var(--err-ink)}
.ai-err p{margin:0}
.ai-err .btn{color:var(--ink)}
.build-hint{margin:14px 0 0}
.chat-thumb button{display:grid;place-items:center;padding:0}
.oc-jump{display:none}
@media (max-width:1000px){.oc-jump{display:inline-flex;margin:0 0 12px}}
/* Kosketusnäytöllä vähintään 44 px:n kosketuskohteet. */
@media (pointer:coarse){
  .send-btn,.home-prompt .send-btn{width:44px;height:44px}
  .icon-btn-sm{width:44px;height:44px}
  .chat-thumb button{top:0;right:0;width:44px;height:44px;border-radius:0;background:none;place-items:start end;padding:3px}
  .chat-thumb button svg{width:22px;height:22px;padding:5px;border-radius:50%;background:rgba(29,19,38,.75)}
  .story-back{min-height:44px}
  .ai-row .btn-sm,.pal-head .btn-sm,.kuvaus-ai-bar .btn-sm,.seo-kentta-yla .btn-sm{min-height:44px}
}

/* Onboardaus: P1 (tasokorttien verollinen hinta) */
.plan .plan-verollinen{margin-top:-4px}

/* Onboardaus: P2 (ilmeiden ja nykyisen sivun virhetilat) */
.demos-virhe{display:grid;gap:10px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--paper)}
.demos-virhe p{margin:0}
.demos-virhe .inline{display:flex;flex-wrap:wrap;gap:8px}.demos-virhe .inline form{margin:0}
.demo.is-failed .frame{background:var(--paper)}
.demo-failed p{margin:0;color:var(--ink);font-weight:600}
.demo-failed form{margin:0}
.demo-failed .hint{max-width:30ch}
.crawl-virhe{display:grid;gap:12px;justify-items:start}
.crawl-virhe form{margin:0}

/* YTJ-esitäyttö ([data-ytj-lomake], studio.js): nimihaun ehdotuslista ja tilarivi */
.ytj-ankkuri{position:relative}
.ytj-ehdotukset{position:absolute;z-index:60;display:block;box-sizing:border-box;min-width:220px;max-height:280px;overflow-y:auto;margin:0;padding:4px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-sm);box-shadow:var(--shadow-pop);text-align:left}
.ytj-ehdotukset[hidden]{display:none}
.ytj-ehdotukset [role="option"]{display:block;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.35;color:var(--ink)}
.ytj-ehdotukset [role="option"] b{display:block;font-weight:600}
.ytj-ehdotukset [role="option"] small{display:block;color:var(--muted);font-size:13px}
.ytj-ehdotukset [role="option"]:hover,.ytj-ehdotukset [aria-selected="true"]{background:var(--pink-soft)}
[data-ytj-tila].ytj-virhe{color:var(--err-ink)}
[data-ytj-tila].ytj-ok{color:var(--ok-ink)}
[data-ytj-lomake][aria-busy="true"] [data-ytj-tila]{color:var(--muted)}
.np-ytj-tila{margin:8px 0 0}

/* Sivupalkin "Live"-merkki julkaistulle sivustolle. */
.side-item .plive,.side-item.is-active .plive{flex:none;margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--ok-soft);color:var(--ok-ink);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.6;overflow:visible}
@media (min-width:1001px){.side-mini .side-item .plive{display:none}}
:root[data-theme="dark"] .side-item .plive,:root[data-theme="dark"] .side-item.is-active .plive{background:rgba(16,185,129,.16);color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .side-item .plive,:root:not([data-theme="light"]) .side-item.is-active .plive{background:rgba(16,185,129,.16);color:#6ee7b7}}

/* Ostopolun tuotebannerit (x-tuotebanneri): logo vasemmalla, lyhyt otsikko ja hyödyt. Sävy tuotteen mukaan;
   Googlen logot valkoisella laatalla, jotta värit pysyvät oikeina myös tummassa teemassa. Tyhjän yhteenvedon tila. */
.np-tuote{--tuote-tausta:linear-gradient(135deg,var(--pink-soft),var(--paper) 72%);--tuote-korostus:var(--pink);--tuote-reuna:rgba(250,33,118,.18);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;align-items:start;margin:0 0 16px;padding:16px 18px;border:1px solid var(--tuote-reuna);border-radius:16px;background:var(--tuote-tausta)}
.np-tuote.is-workspace{--tuote-tausta:linear-gradient(135deg,#e8f0fe,var(--paper) 75%);--tuote-korostus:#1a73e8;--tuote-reuna:rgba(26,115,232,.18)}
.np-tuote.is-ads{--tuote-tausta:linear-gradient(135deg,#fef7e0,#eef7f0 55%,var(--paper));--tuote-korostus:#188038;--tuote-reuna:rgba(24,128,56,.18)}
.np-tuote-logo{display:flex;align-items:center;min-height:40px}
.np-tuote.is-workspace .np-tuote-logo,.np-tuote.is-ads .np-tuote-logo{padding:9px 12px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.np-tuote-logo img{display:block;height:22px;width:auto}
.np-tuote-merkki{display:inline-flex;align-items:center;gap:8px;font:500 17px/1 var(--font-body);color:#5f6368;white-space:nowrap}
.np-tuote-merkki img{height:22px}
.np-tuote-sisalto{display:grid;gap:8px;min-width:0}
.np-tuote-otsikko{margin:0;font:700 17px/1.3 var(--font-head, var(--font-body));color:var(--ink);text-wrap:balance}
.np-tuote-hyodyt{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.np-tuote-hyodyt li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.45;color:var(--ink)}
.np-tuote-hyodyt li svg{flex:none;margin-top:2px;color:var(--tuote-korostus)}
.np-tuote .np-sa-lisaa{margin-top:2px}
.np-tuote-osoite{white-space:nowrap}
.np-detail + .np-tuote{margin-top:8px}
.np-tuote-kevyt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-2px 0 12px;font-size:13px;color:var(--muted)}
.np-tuote-kevyt img{height:14px;width:auto}
.np-rivi-logo{height:18px;width:auto;flex:none}
.np-name .sa-logo.np-rivi-sa{font-size:16px}
.np-name .sa-logo.np-rivi-sa .sa-logo-merkki{height:19px}
.np-ei-valintoja{display:grid;gap:4px;margin:4px 0 8px;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:14px;background:var(--paper-2)}
.np-ei-valintoja p{margin:0}
.np-ei-valintoja[hidden],.np-tilausosa[hidden],.np-valitut[hidden],[data-np-tilaa][hidden]{display:none}
@media (max-width:640px){
  .np-tuote{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px}
  .np-tuote-logo{justify-self:start;min-height:0}
  .np-tuote-otsikko{font-size:16px}
}
:root[data-theme="dark"] .np-tuote.is-workspace{--tuote-tausta:linear-gradient(135deg,rgba(66,133,244,.16),var(--paper) 75%);--tuote-korostus:#8ab4f8;--tuote-reuna:rgba(138,180,248,.22)}
:root[data-theme="dark"] .np-tuote.is-ads{--tuote-tausta:linear-gradient(135deg,rgba(251,188,4,.12),rgba(52,168,83,.10) 55%,var(--paper));--tuote-korostus:#81c995;--tuote-reuna:rgba(129,201,149,.22)}
:root[data-theme="dark"] .np-tuote.is-workspace .np-tuote-logo,:root[data-theme="dark"] .np-tuote.is-ads .np-tuote-logo{box-shadow:none}
:root[data-theme="dark"] .np-tuote-kevyt img{padding:2px 5px;border-radius:5px;background:#fff;height:18px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .np-tuote.is-workspace{--tuote-tausta:linear-gradient(135deg,rgba(66,133,244,.16),var(--paper) 75%);--tuote-korostus:#8ab4f8;--tuote-reuna:rgba(138,180,248,.22)}
  :root:not([data-theme="light"]) .np-tuote.is-ads{--tuote-tausta:linear-gradient(135deg,rgba(251,188,4,.12),rgba(52,168,83,.10) 55%,var(--paper));--tuote-korostus:#81c995;--tuote-reuna:rgba(129,201,149,.22)}
  :root:not([data-theme="light"]) .np-tuote.is-workspace .np-tuote-logo,:root:not([data-theme="light"]) .np-tuote.is-ads .np-tuote-logo{box-shadow:none}
  :root:not([data-theme="light"]) .np-tuote-kevyt img{padding:2px 5px;border-radius:5px;background:#fff;height:18px}
}

/* Ostopolku: sähköpostiosoitteet rivi kerrallaan (alkuosa + verkkotunnus perässä). */
.np-osoitteet{display:grid;gap:8px}
.np-osoiterivi{display:flex;align-items:center;gap:8px;max-width:520px}
.np-osoiterivi input{flex:1 1 140px;min-width:0}
.np-osoite-paate{flex:none;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.np-osoite-pois{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--muted);cursor:pointer}
.np-osoite-pois:hover{color:var(--ink);border-color:var(--ink)}
.np-osoite-lisaa{justify-self:start}

/* Silta AI -bannerin kokeilutarjous. */
.np-sa-kokeilu{margin:10px 0 6px;padding:8px 12px;border-radius:10px;background:var(--pink-soft);color:var(--ink);font-size:13.5px}
.np-sa-kokeilu b{color:var(--pink-ink)}

/* Sivupalkin ⋮ ei peitä Live-merkkiä (6.10.2026: "LIV⋮"). .side-list .side-item kumosi .side-row .side-itemin
   oikean täytteen, joten merkki ja nimi jäivät napin alle. Kun nappi näkyy, rivin viimeinen osa siirtyy sen vasemmalle
   puolelle; nimi lyhenee kolmella pisteellä. */
.side-row:focus-within .side-more{opacity:1}
.side-row:is(:hover,:focus-within) .side-item > :last-child,.side-row:has(.side-more.is-open) .side-item > :last-child{margin-right:28px}
@media (hover:none){.side-row .side-item > :last-child{margin-right:28px}}

/* Chatin omat viestit: teksti valittavissa ja kopiointinappi kuplan alla (hiiren ollessa päällä, kosketuslaitteella aina). */
.cmsg.me{flex-direction:column;align-items:flex-end;gap:0}
.cmsg .cbody{-webkit-user-select:text;user-select:text}
.cmsg.me .me-actions{margin-top:2px;opacity:0}
.cmsg.me:hover .me-actions,.cmsg.me .me-actions:focus-within{opacity:1}
@media (hover:none){.cmsg.me .me-actions{opacity:.7}}

/* Viestin ⋮-valikko (6.10.2026): rivin .55-läpinäkyvyys teki avoimesta valikosta läpikuultavan ja oman pinokontekstin,
   jolloin myöhemmät viestit ja tilarivi piirtyivät sen päälle. Auki ollessa rivi on täysin näkyvä ja viesti nousee
   seuraavien yläpuolelle. Puhelimella valikko on alareunan paneeli ja nousee myös kirjoituskentän yläpuolelle. */
.cmsg.is-menu{position:relative;z-index:30}
.cmsg.is-menu .msg-actions{opacity:1}
.ma-pop{box-shadow:var(--shadow-pop,0 14px 40px rgba(20,10,30,.16))}
@media (max-width:640px){.cmsg.is-menu{z-index:120}.ma-pop,.ma-pop.is-ylos{max-height:calc(100dvh - 24px);overflow:auto}}

/* ---------- Vedoksen jako (partials/jaa-vedos): Jaa-nappi ja ponnahdus ----------
   Ponnahdus siirretään JS:llä bodyyn (esikatselupaneeli on CSS-säiliö): työpöydällä kiinteä sijainti napin alla,
   puhelimella alapaneeli taustan päällä. */
.jaa{display:flex;flex-shrink:0}
.jaa-btn{gap:6px}
.jaa-btn[aria-expanded="true"]{background:var(--paper);color:var(--ink)}
@container pane (max-width:640px){.jaa-btn{padding:0 10px}.jaa-btn span{display:none}}
.jaa-pop{position:fixed;z-index:90;width:min(360px,calc(100vw - 16px));max-height:min(620px,calc(100vh - 80px));overflow:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(20,10,30,.18);padding:14px;display:grid;gap:12px;text-align:left}
.jaa-pop[hidden],.jaa-tausta[hidden]{display:none}
.jaa-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.jaa-head b{font-size:15px;color:var(--ink)}
.jaa-head .icon-x{margin:-6px -6px -6px 0}
.jaa-ohje{margin:-6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.jaa-linkki{display:flex;gap:8px;align-items:center}
.jaa-linkki input{flex:1;min-width:0;padding:7px 10px;font-size:13px;color:var(--muted);background:var(--paper)}
.jaa-linkki .btn{flex-shrink:0;gap:6px;white-space:nowrap}
.jaa-linkki .btn.is-ok{background:#047857;border-color:#047857}
.jaa-osiot{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.jaa-rivi{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.jaa-rivi:first-child{border-top:0}
.jaa-rivi:hover,.jaa-rivi[aria-expanded="true"]{background:var(--paper)}
.jaa-rivi > svg:first-child{color:var(--muted);flex-shrink:0}
.jaa-rivi span{display:grid;gap:1px;flex:1;min-width:0}
.jaa-rivi b{font-size:14px;font-weight:600}
.jaa-rivi small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jaa-nuoli{color:var(--muted);flex-shrink:0;transition:transform .15s}
.jaa-rivi[aria-expanded="true"] .jaa-nuoli{transform:rotate(180deg)}
.jaa-osio{display:grid;gap:10px;padding:4px 12px 12px;background:var(--paper)}
.jaa-osio[hidden]{display:none}
.jaa-kentta{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--ink)}
.jaa-kentta small{font-weight:400;color:var(--muted)}
.jaa-kentta input,.jaa-kentta textarea{font-size:14px;padding:8px 10px}
.jaa-kentta textarea{min-height:64px}
.jaa-pieni{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.jaa-pieni b{color:var(--ink);font-weight:600}
.jaa-toiminnot{display:flex;justify-content:flex-end}
.jaa-toiminnot .btn{gap:6px}
.jaa-tila{margin:0;font-size:13px;color:var(--muted)}
.jaa-tila:empty{display:none}
.jaa-tila.is-ok{color:var(--ok-ink)}
.jaa-tila.is-err{color:var(--err-ink)}
.jaa-tausta{position:fixed;inset:0;z-index:89;background:rgba(20,10,30,.36)}
@media (max-width:640px){
  .jaa-pop{left:0;right:0!important;top:auto!important;bottom:0;width:auto;max-height:85vh;border-radius:18px 18px 0 0;border-bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .jaa-pop::before{content:"";justify-self:center;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:-6px 0 -4px}
  .jaa-rivi{padding:13px 12px}
  html.jaa-lukko,html.jaa-lukko body{overflow:hidden}
}
/* ---------- /Vedoksen jako ---------- */
/* Hallinnan yleiskuvan luvut (admin/overview.blade.php): ryhmät, kortit ja huomiota vaativat. */
.adm-kpi-ryhma+.adm-kpi-ryhma{margin-top:26px}
.adm-kpi-ryhma-otsikko{margin:0 0 10px;font:600 13px/1.2 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.adm-kpi-ryhma{container-type:inline-size}
.adm-kpi-rivi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (min-width:760px){.adm-kpi-rivi{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:600px){.adm-kpi-rivi.is-kolme{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:380px){.adm-kpi-rivi{grid-template-columns:minmax(0,1fr)}}
.adm-kpi-rivi.is-raha{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.adm-kpi{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:border-color .15s var(--ease),transform .15s var(--ease)}
a.adm-kpi:hover{border-color:var(--pink);transform:translateY(-1px)}
a.adm-kpi:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.adm-kpi-otsake{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.adm-kpi-otsake svg{flex:none;color:var(--faint)}
.adm-kpi-otsake em{margin-left:auto;font-style:normal;font-size:11.5px;padding:2px 7px;border-radius:999px;background:var(--paper);color:var(--muted)}
.adm-kpi-arvo{font:700 30px/1.05 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.adm-kpi-osa{font:500 16px var(--font-body);color:var(--faint)}
.adm-kpi small{font-size:13px;line-height:1.4;color:var(--muted)}
.adm-kpi-linkki{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:4px;font-size:13px;font-weight:600;color:var(--pink-ink)}
.adm-kpi.is-paa{background:linear-gradient(135deg,var(--tint-pink),var(--card) 70%)}
.adm-kpi.is-paa .adm-kpi-arvo{font-size:38px}
.adm-kpi-erittely{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;font-variant-numeric:tabular-nums}
.adm-kpi-erittely i{font-style:normal;color:var(--muted);margin-right:4px}
.adm-kpi-erittely .is-varoitus{color:var(--warn-ink)}
.adm-kpi.is-kunnossa{box-shadow:none;background:transparent}
.adm-kpi.is-kunnossa .adm-kpi-otsake svg{color:#059669}
.adm-kpi.is-kunnossa .adm-kpi-arvo{color:var(--faint)}
.adm-kpi.is-auki{border-color:rgba(217,119,6,.45);background:var(--warn-soft)}
.adm-kpi.is-auki .adm-kpi-otsake svg{color:#d97706}
:root[data-theme="dark"] .adm-kpi.is-auki .adm-kpi-otsake svg,:root[data-theme="dark"] .adm-kpi-erittely .is-varoitus{color:#fbbf24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .adm-kpi.is-auki .adm-kpi-otsake svg,:root:not([data-theme="light"]) .adm-kpi-erittely .is-varoitus{color:#fbbf24}}
@container (max-width:600px){.adm-kpi-rivi.is-raha{grid-template-columns:minmax(0,1fr)}.adm-kpi.is-paa .adm-kpi-arvo{font-size:32px}}

/* Donitsikaavio (admin/partials/donitsi.blade.php) ja Tekoälykulujen vaihejako. */
.adm-kulujako{display:grid;gap:24px}
.adm-kulujako-kaavio{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.adm-kulujako-kaavio .adm-donitsi-selite{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:10px}
.adm-donitsi{position:relative;width:min(220px,100%);aspect-ratio:1}
.adm-donitsi-kuva{display:block;width:100%;height:100%;transform:rotate(0deg)}
.adm-donitsi-kuva circle{transition:opacity .15s var(--ease)}
.adm-donitsi-kuva:hover circle:not(:first-child){opacity:.55}
.adm-donitsi-kuva circle:not(:first-child):hover{opacity:1}
.adm-donitsi-keski{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.adm-donitsi-keski b{font:700 22px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.adm-donitsi-keski small{font-size:12.5px;color:var(--muted)}
.adm-donitsi-selite{list-style:none;margin:0;padding:0;display:grid;gap:7px;width:100%;font-size:13.5px}
.adm-donitsi-selite li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;column-gap:8px;align-items:center}
.adm-donitsi-selite i{width:10px;height:10px;border-radius:3px}
.adm-donitsi-selite span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-donitsi-selite b{font-variant-numeric:tabular-nums}
.adm-donitsi-selite small{grid-column:2/4;color:var(--muted);font-size:12px;margin-top:-3px}
.adm-kulutaulu{width:100%}
.adm-kulutaulu td.num,.adm-kulutaulu th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.adm-kulutaulu td.num small{margin-left:4px}
@media (max-width:860px){.adm-kulujako-kaavio{grid-template-columns:minmax(0,1fr);justify-items:center}.adm-kulujako-kaavio .adm-donitsi-selite{grid-template-columns:minmax(0,1fr)}.adm-donitsi{width:min(200px,70%)}}

/* Asiakaskortti (admin/customer.blade.php): osiot tasavälein, parit samankorkuisina, pitkät listat rajattuun korkeuteen. */
.adm-kortti{display:grid;gap:20px;margin-top:16px}
.adm-kortti .panel{margin:0;min-width:0}
.adm-kortti-pari{gap:20px;align-items:stretch}
.adm-kortti-pari>.panel{display:flex;flex-direction:column}
.adm-pitka{max-height:440px;overflow:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.adm-pitka .tbl th{position:sticky;top:0;background:var(--card);z-index:1}
/* ---------- Hallinta: Myynti (admin/myynti.blade.php, 6.10.2026) ---------- */
.myy-jakso{margin:-4px 0 16px}
.myy-kpit{--myy-hyva:#047857;--myy-huono:#b4123f;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:0 0 6px}
:root[data-theme="dark"] .myy-kpit{--myy-hyva:#6ee7b7;--myy-huono:#fca5a5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .myy-kpit{--myy-hyva:#6ee7b7;--myy-huono:#fca5a5}}
.myy-kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-card)}
.myy-kpi-otsake{font-size:13px;font-weight:600;color:var(--muted)}
.myy-kpi-arvo{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.myy-kpi-arvo.is-miinus{color:var(--myy-huono)}
.myy-kpi small{color:var(--muted);font-size:12.5px;line-height:1.4}
.myy-muutos{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;padding:2px 8px;border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.myy-muutos small{font-weight:500;color:var(--muted)}
.myy-muutos.is-hyva{color:var(--myy-hyva)}
.myy-muutos.is-huono{color:var(--myy-huono)}
.myy-muutos.is-alas svg{transform:rotate(180deg)}
.myy-kaavio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;margin:8px 0 4px}
.myy-kaavio-y{position:relative;width:76px;height:200px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.myy-kaavio-y span{position:absolute;right:0;transform:translateY(-50%)}
.myy-svg{display:block;width:100%;height:200px;overflow:visible}
.myy-nolla{stroke:var(--line-strong);stroke-width:1}
.myy-osuma{fill:transparent}
.myy-pylvas:hover .myy-osuma{fill:var(--pink-soft)}
.myy-uusi{fill:var(--pink)}
.myy-pois{fill:var(--faint)}
.myy-kaavio-x{grid-column:2;display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)}
.myy-selite{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.myy-selite span{display:inline-flex;align-items:center;gap:6px}
.myy-selite i{display:inline-block;width:10px;height:10px;border-radius:2px}
.myy-v-uusi{background:var(--pink)}
.myy-v-pois{background:var(--faint)}
.myy-yht td{font-weight:600}
.myy-lapikulku{display:flex;align-items:flex-start;gap:6px;margin:14px 0 0;font-size:14px;color:var(--muted)}
.myy-lapikulku svg{flex:none;margin-top:3px}
.myy-kaupat td small{color:var(--muted)}
@media (max-width:520px){.myy-kpit{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.myy-kpi{padding:12px}.myy-kpi-arvo{font-size:21px}.myy-kaavio-y{width:60px;font-size:10.5px}}

/* Hallinta › Google Ads (studio/manage/mainonta.blade.php): vaiheet, tilakortti, mainosten esikatselu ja budjetti. */
.mn-intro{max-width:72ch}
.mn-otsikko{display:flex;align-items:center;gap:8px}
.mn-steps{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:4px 0 2px;font-size:14px;color:var(--muted)}
.mn-steps li{display:flex;align-items:center;gap:8px}
.mn-steps li span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;border:1.5px solid var(--line-strong);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.mn-steps li.is-done{color:var(--ink)}
.mn-steps li.is-done span{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok-ink)}
.mn-steps li.is-now{color:var(--ink);font-weight:600}
.mn-steps li.is-now span{background:var(--merkki);border-color:var(--merkki);color:var(--merkki-teksti)}
.mn-tila.mn-kaynnissa,.mn-tila.mn-valmis{border-color:var(--ok-ink)}
.mn-tila.mn-virhe{border-color:var(--err-ink)}
.mn-tila .note{margin:0}
.mn-ohje{margin:0;padding-left:20px;display:grid;gap:6px;max-width:72ch}
.mn-loydetty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.mn-loydetty span{display:grid;gap:2px}
.mn-loydetty small{color:var(--muted);font-variant-numeric:tabular-nums}
.mn-loydetty form{margin:0}
.mn-loydetty-iso{padding:18px 20px;border-color:var(--line-strong);background:var(--card)}
.mn-loydetty-iso b{font:600 20px/1.25 var(--font-display)}
.mn-loydetty .mg-tag{display:inline-flex;justify-self:start}
.mn-loydetty .mn-kicker{display:inline-flex;align-items:center;gap:6px;color:var(--ok-ink);font-weight:600;font-size:13px}
.mn-tililuvut{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.mn-tilit{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mn-tilikortti .c{display:grid;gap:4px;align-content:start;padding:16px}
.mn-tilikortti .c b{margin:0;font-size:17px;overflow-wrap:anywhere}
.mn-tilikortti .c small{font-size:13.5px;font-variant-numeric:tabular-nums}
.choice.mn-tilikortti .c .mn-tililuvut{color:var(--ink)}
.mn-merkit,.mn-loydetty .mn-merkit{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.mn-suositus{display:inline-flex;align-items:center;gap:4px;background:var(--tint-pink);color:var(--pink-ink);border-color:transparent}
.mn-loydetty .mn-syy,.choice .c .mn-syy{color:var(--pink-ink);font-weight:500}
.mn-tilivalinta{display:grid;gap:12px}
.mn-olemassa{display:grid;gap:12px}
.mn-olemassa form{margin:0}
.mn-kampanjat{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.mn-kampanja{display:grid;gap:4px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.mn-kampanja-yla{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mn-kampanja-yla b{overflow-wrap:anywhere}
.mn-kampanja small{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.mn-kampanja-esim{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.mn-olemassa-valinta{display:grid;gap:10px}
.mn-paallekkain{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-md);background:var(--warn-soft)}
.mn-paallekkain .hint{margin:0;color:var(--ink);max-width:72ch}
.mn-uusi,.mn-kooste{display:grid;gap:10px}
.mn-uusi summary,.mn-kooste summary{cursor:pointer;font-weight:600}
.mn-uusi summary,.mn-kooste summary{list-style:none;display:inline-flex;align-items:center;gap:6px;color:var(--pink-ink);font-size:14px}
.mn-uusi summary::-webkit-details-marker,.mn-kooste summary::-webkit-details-marker{display:none}
.mn-uusi summary .ikoni,.mn-kooste summary .ikoni{transition:transform .2s var(--ease)}
.mn-uusi[open] summary .ikoni,.mn-kooste[open] summary .ikoni{transform:rotate(180deg)}
.mn-luo{display:grid;gap:14px}
.mn-luo .mg-actions{margin-top:2px}
.mg-actions form{margin:0}
.mn-portit{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.mn-portti{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:12px;font-size:14px}
.mn-portti svg{flex:none;margin-top:2px}
.mn-ok{background:var(--ok-soft);color:var(--ok-ink)}
.mn-huomio{background:var(--warn-soft);color:var(--warn-ink)}
.mn-este{background:var(--err-soft);color:var(--err-ink)}
.mn-luonnos{display:grid;gap:12px}
.mn-tiedot{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;font-size:14.5px}
.mn-tiedot dt{color:var(--muted)}
.mn-tiedot dd{margin:0}
.mn-esikatselu{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:3px;max-width:640px;background:#fff;color:#202124;font-family:Arial,var(--font-body),sans-serif}
.mn-esikatselu small{font-weight:700;font-size:12px}
.mn-esikatselu .mn-url{font-size:13px;color:#4d5156}
.mn-esikatselu b{color:#1a0dab;font-size:18px;font-weight:400;line-height:1.3}
.mn-esikatselu p{margin:0;font-size:14px;color:#4d5156}
.mn-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
/* Google Ads -editori (manage/mainonta/editori.blade.php, js/mainoseditori.js): tekstit kenttinä laskureineen,
   hakusanat chippeinä, esikatselu sivussa leveällä näytöllä ja tekstiehdotusten paneeli. */
.mn-cols>div{display:grid;gap:6px;align-content:start;min-width:0}
.mn-cols .mg-sub{margin:0}
.mn-ryhma{gap:12px;container-type:inline-size}
.mn-ryhma-yla{flex-wrap:wrap;gap:8px}
.mn-ohje-rivi{margin:0;font-size:14px;color:var(--muted)}
.mn-editori{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px;align-items:start}
.mn-esikatselu-alue{display:grid;gap:8px;align-content:start;justify-items:start;min-width:0;order:-1}
.mn-ryhma-kooste .mn-esikatselu-alue{order:0}
@container (min-width:1100px){.mn-editori{grid-template-columns:minmax(0,1fr) minmax(360px,520px)}.mn-esikatselu-alue{order:0;position:sticky;top:16px}}
.mn-esikatselu-alue .mg-sub{margin:0}
.mn-esikatselu-alue .mn-esikatselu{width:100%;box-sizing:border-box}
.mn-esikatselu b,.mn-esikatselu p{overflow-wrap:anywhere}
.mn-listat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px 28px;align-items:start;min-width:0}
.mn-listat .mn-sanat{grid-column:1/-1}
.mn-lista{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.mn-lista legend{display:flex;align-items:center;gap:8px;padding:0;margin-bottom:6px;font-weight:600}
.mn-maara{padding:2px 8px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.mn-rivit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mn-rivi{display:grid;gap:4px;justify-items:start}
.mn-kentta{display:flex;gap:4px;align-items:flex-start;width:100%}
.mn-syote{position:relative;flex:1;min-width:0}
.mn-syote input,.mn-syote textarea{display:block;width:100%;padding:8px 66px 8px 11px;font-size:14.5px;line-height:1.45}
.mn-syote textarea{min-height:0;resize:none}
.mn-syote [aria-invalid="true"]{border-color:var(--err-ink)}
.mn-laskuri{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.mn-syote textarea + .mn-laskuri{top:auto;bottom:9px;transform:none}
.mn-laskuri.is-yli{color:var(--err-ink);font-weight:600}
.mn-poista{flex:none;margin-top:4px}
.mn-lahde{padding:1px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);white-space:nowrap}
.mn-lisaa{justify-self:start;display:inline-flex;align-items:center;gap:6px}
.mn-lisaa:disabled{opacity:.5;cursor:default}
/* Mainoseditorin tilarivi (p.mn-tila). Rajattu p-elementtiin: sama luokka on Google Ads -kortissa (div.mg-card.mn-tila),
   joka muuten perisi oranssin värin ja pienen koon (Niklas 14.10.2026). */
p.mn-tila{margin:0;font-size:13.5px;color:var(--warn-ink)}
p.mn-tila.is-ok{color:var(--muted)}
.mn-chipit{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mn-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 3px 3px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);font-size:13.5px}
.mn-chip>span:first-child{overflow-wrap:anywhere}
.mn-chip small{margin-left:4px;font-size:12px;color:var(--muted)}
.mn-chip .mn-lahde{margin:0 0 0 4px}
.mn-chip button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.mn-chip button:hover{background:var(--paper-2);color:var(--ink)}
.mn-ryhma-kooste .mn-chip{padding:4px 12px}
.mn-sana-lisays{display:flex;gap:8px;max-width:520px}
.mn-sana-lisays input{flex:1;min-width:0;padding:8px 11px;font-size:14.5px}
.mn-sanat .hint,.mn-ehdota .hint{margin:0;font-size:13px;color:var(--muted)}
.mn-ehdota{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--tint-pink)}
.mn-ehdota>label{font-weight:600;font-size:14px}
.mn-ehdota>label small{font-weight:400;color:var(--muted)}
.mn-ehdota-rivi{display:flex;gap:8px;max-width:640px}
.mn-ehdota-rivi input{flex:1;min-width:0;padding:8px 11px;font-size:14.5px}
.mn-virhe{margin:0;font-size:14px;color:var(--err-ink)}
.mn-ehdotukset{display:grid;gap:12px;padding-top:4px}
.mn-ehdotus-osio{display:grid;gap:6px}
.mn-ehdotus-osio .mg-sub{margin:0}
.mn-ehdotus-chipit{display:flex;flex-wrap:wrap;gap:8px}
.mn-ehdotus{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:2px 6px;max-width:100%;padding:7px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font:500 13.5px/1.35 var(--font-body);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
.mn-ehdotus:hover{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.mn-ehdotus>span:last-of-type{overflow-wrap:anywhere}
.mn-ehdotus-ikoni{display:inline-grid;padding-top:1px;color:var(--pink-ink)}
.mn-ehdotus.is-tarkista,.mn-ehdotus[data-lista="kuvaukset"]{border-radius:var(--r-sm)}
.mn-ehdotus small{grid-column:2;font-size:12px;font-weight:400;color:var(--warn-ink)}
.mn-ehdotus.is-lisatty{border-color:transparent;background:var(--ok-soft);color:var(--ok-ink);box-shadow:none;cursor:default}
.mn-ehdotus.is-lisatty .mn-ehdotus-ikoni{color:var(--ok-ink)}
.mn-ehdotus-toiminnot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mn-ehdotus-tila{margin:0;font-size:13.5px;color:var(--muted)}
.mn-huomiot{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mn-huomiot li{display:flex;gap:8px;align-items:flex-start;padding:8px 12px;border-radius:10px;font-size:14px}
.mn-huomiot svg{flex:none;margin-top:2px}
.mn-syy{margin:0;font-size:14px;color:var(--muted)}
.mn-kooste-lista{margin:0;padding-left:18px;display:grid;gap:3px;font-size:14.5px}
@media (max-width:640px){.mn-ehdota-rivi{flex-wrap:wrap}.mn-ehdota-rivi input{flex:1 1 100%}.mn-ehdota-rivi .btn{flex:1 1 auto}.mn-sana-lisays .btn{flex:none}}
@media (pointer:coarse){.mn-chip button,.mn-poista{min-width:44px;min-height:44px;margin-top:0}}
.mn-kpis{margin:0}
/* Vaiheen yksi lause, numeroidut askeleet, iso pääpainike, odotustila ja uudelleenaktivointi (14.10.2026). */
.mn-lause{margin:0;max-width:72ch;color:var(--muted);font-size:14.5px}
.mn-tila .hint,.mn-budjetti .hint,.mn-lopetus .hint{color:var(--muted);font-size:13.5px;max-width:72ch}
.mn-odotus-iso [data-mn-takaisin]{font-size:13.5px}
.mn-tila > .mg-head b{font-family:var(--font-display);font-size:18px;font-weight:600}
.mn-steps li.is-err span{background:var(--err-soft);border-color:var(--err-ink);color:var(--err-ink)}
.mn-askeleet{list-style:none;counter-reset:mn;margin:2px 0 0;padding:0;display:grid;gap:8px;max-width:72ch}
.mn-askeleet li{counter-increment:mn;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.mn-askeleet li::before{content:counter(mn);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;margin-top:-2px}
.mn-askeleet li[data-mn-vahvistamaton]::before{content:"!";background:var(--warn-soft);color:var(--warn-ink)}
.btn.mn-iso{min-height:48px;padding:0 22px;font-size:15px}
.mn-tunnus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;color:var(--muted)}
.mn-tunnus span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.mn-tunnus b{color:var(--ink);font-weight:600}
.mn-tunnus form{margin:0}
.mn-odotus{display:flex;align-items:center;gap:12px}
.mn-odotus[hidden],.mn-vahvistus[hidden]{display:none}
.mn-odotus-iso{display:grid;gap:12px;justify-items:start;padding:16px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line)}
.mn-odotus-rivi{display:flex;align-items:center;gap:12px}
.mn-odotus-rivi p{margin:0;max-width:72ch}
.mn-odotus .hint:empty{display:none}
.mn-pyora{flex:none;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-strong);border-top-color:var(--pink);animation:spin 1s linear infinite}
.mn-luvut{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.mn-luvut b{font-weight:600}
.mn-luvut span{color:var(--muted)}
.mn-luvut span.is-huom{color:var(--warn-ink)}
.mn-vahvistus{display:grid;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--tint-pink);border:1px solid var(--pink-soft)}
.mn-vahvistus p{margin:0;font-weight:600}
.mn-budjetti .mg-head .set-status:empty{display:none}
.mn-loppu{padding-top:2px}
.mn-tila.mn-lopetettu{padding:22px;gap:14px;border-color:var(--pink-soft);background:var(--tint-pink)}
.mn-aktivoi-lause{margin:0;max-width:72ch;font-size:15.5px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.mn-pyora{animation:none}}
@media (max-width:640px){.mn-tiedot{grid-template-columns:1fr}.mn-tiedot dt{margin-top:6px}.mn-loydetty{align-items:stretch}
  .mn-tila .mg-actions > .btn,.mn-tila .mg-actions > form,.mn-tila .mg-actions > form > .btn,.mn-loppu > .btn,.mn-odotus-iso form,.mn-odotus-iso form .btn{width:100%}
  .mn-odotus-iso{justify-items:stretch}}
/* ---------- Lisäkrediitit joka kuukausi (studio/krediittiosto, studio/lisakrediitit-kk) ---------- */
.lk-osto{display:grid;gap:12px}
.lk-tilat{justify-self:start}
.lk-nyt{margin:0;font-size:14px;color:var(--muted)}
.lk-nyt b{color:var(--ink)}
.lk-tuleva{display:block;margin-top:2px;color:var(--ink)}
.lk-muutos{margin:0;min-height:1.4em}
.lk-este{margin:0}
.lk-toiminnot{display:flex;justify-content:flex-end}
.lk-ehdot{display:grid;gap:6px}
.lk-ehdot[hidden],.korotus-toinen[hidden]{display:none}
.korotus-toinen{display:grid;gap:6px;justify-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:center}
/* Tason noston vertailu korotusikkunassa ja Tilaus-sivulla (Tasosuositus::vertailu). */
.korotus-vertailu[hidden]{display:none}
.korotus-vertailu{margin:0 0 16px;text-align:left}
.korotus-vertailu .hint{margin:0 0 8px}
.korotus-vertailu ul,.tasovertailu-rivit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.korotus-vertailu li,.tasovertailu-rivit li{display:grid;gap:4px;justify-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);font-size:14px}
.korotus-vertailu li.is-edullisin,.tasovertailu-rivit li.is-edullisin{border-color:var(--pink);background:var(--tint-pink)}
.korotus-vertailu small,.tasovertailu-rivit small{color:var(--muted);font-size:13.5px}
.korotus-vertailu-hinta{font-weight:600}
.tasovertailu-rivit{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tasovertailu{margin-bottom:18px;scroll-margin-top:80px}
.tasovertailu > .hint{margin:0;max-width:72ch}
.plan-syy{display:flex;gap:6px;align-items:flex-start;color:var(--ink)}
.korotus-toinen .hint{margin:0}
.lk .topup-own{white-space:nowrap}
@media (max-width:620px){.lk .topup-row{align-items:stretch}.lk .topup-row .grow{display:none}.lk .topup-sum{text-align:left;width:100%}.lk-toiminnot .btn{width:100%;justify-content:center}}

/* Somejulkaisun ehdotuskortti (agentin paneeli) */
.kk-some-kuva{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:10px;margin:0 0 10px}
video.kk-some-kuva{object-fit:contain;background:#000}
.kk-some-kanavat{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}
.kk-some-kanavat li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kk-kampanja{display:grid;gap:6px;margin:0 0 10px}
.kk-kampanja div{display:grid;grid-template-columns:90px 1fr;gap:8px}
.kk-kampanja dt{color:var(--muted)}.kk-kampanja dd{margin:0}
.kk-mainos{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 10px}
.kk-mainos img{display:block;width:100%;max-height:240px;object-fit:cover}
.kk-mainos p{margin:10px 12px;white-space:pre-line}
.kk-mainos-ala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.kk-mainos-ala span:first-child{display:grid;min-width:0}.kk-mainos-ala small{color:var(--muted)}
.an-tila-btn{margin-left:6px}
.kk-budjetti{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.kk-kampanja .kk-budjetti label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.kk-kampanja .kk-budjetti input[type=number]{width:84px;flex:none}
.kk-budjetti small{flex-basis:100%}
.kk-mainos-cta{border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:13px;white-space:nowrap}
.kk-vahvistus{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px}
.an-katto{margin:12px 0 4px}
.oa-value-form .inline{align-items:center}
.oa-value-form .inline input{flex:none}
.an-tila-btn{display:inline;margin-left:8px}
/* Agentin avatar (components/agentti-avatar): yhteinen, koska se näkyy sivupalkin Äskeisissä kaikilla sivuilla. */
.ag-av{--koko:32px;width:var(--koko);height:var(--koko);flex:none;border-radius:50%;display:inline-grid;place-items:center;overflow:hidden;background:var(--av,#1f6f8b);color:#fff;font:700 calc(var(--koko) * .42)/1 var(--font-display)}
.ag-av img{width:100%;height:100%;object-fit:cover;display:block}
.ag-av.is-hahmo img{width:92%;height:92%;margin-top:8%}
.ptile-av{margin:0}

/* Sivujen taustahehku (Niklas 7.10.2026): etusivun pinkki-violetti-oranssi liukuväri kaikkien näkymien taakse, hennosti
   liikkuva. Kiinteä kerros z-index -1 heti bodyn alla: se ei luo pinokontekstia työalueelle, joten ikkunat ja ponnahdukset
   nousevat edelleen sivupalkin päälle. Liike on pelkkää transformia (näytönohjain), ei uudelleenpiirtoa. Etusivulla on oma,
   voimakkaampi .home-glow, joten siellä tämä jää pois. Vähennetty liike: paikallaan. */
.tausta-hehku{position:fixed;z-index:-1;inset:-12vh -8vw auto -8vw;height:86vh;pointer-events:none;overflow:hidden}
.tausta-hehku::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(34% 46% at 30% 40%,rgba(250,33,118,.13),transparent 70%),
    radial-gradient(30% 46% at 70% 34%,rgba(168,85,247,.12),transparent 70%),
    radial-gradient(28% 38% at 52% 78%,rgba(255,138,76,.09),transparent 70%);
  filter:blur(24px);will-change:transform;animation:tausta-hehku 26s ease-in-out infinite alternate}
@keyframes tausta-hehku{
  0%{transform:translate3d(-3%,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(2%,3%,0) scale(1.06) rotate(4deg)}
  100%{transform:translate3d(4%,-2%,0) scale(1.02) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.tausta-hehku::before{animation:none}}
body:has(.home-glow) .tausta-hehku{display:none}
/* Muokkausnäkymän chat-sarakkeella on kortin tausta: hieman läpikuultava, jotta hehku näkyy sen läpi. */
.studio-edit .chat{background:color-mix(in srgb,var(--card) 80%,transparent)}

/* Koko leveys (Niklas 8.10.2026): sovelluksen sivut käyttävät koko käytettävissä olevan leveyden, sisältö ei jää kapeaksi
   palstaksi keskelle. Rajattuina pysyvät vain tarkoituksella kapeat: julkinen sivusto (.wrap), vaiheittaiset kyselyt
   (.scene, .story-*, .onboard-chat), etusivun kirjoituskenttä (.home-hero, .hero-prompt), chatin viestipalsta, Googlen
   hakutuloksen jäljitelmä (.seo-serp-tulos) ja luettava pitkä teksti (noin 80 merkkiä riville). */
.work-body,.work-body.home,.set-body,.analytics,.inbox,.changelog,.cx,.mg-main,.md-view,.kassa-sivu,.peru-sivu,.nk{max-width:none}
.md-view>p,.md-view>ul,.md-view>ol,.md-view>blockquote,.md-view>h1,.md-view>h2,.md-view>h3{max-width:80ch}

/* Pakollisen kentän merkki (K3, arvio 7.10.2026). */
.pakollinen{color:var(--pink-ink);margin-left:2px;font-weight:700}

/* K6 (arvio 7.10.2026): valmiin rakennuksen esikatselu kortissa. Etusivu piirretään työpöydän levyisenä ja
   pienennetään kortin levyiseksi; napautus avaa muokkausnäkymän. */
a.mock-live{display:block;color:inherit;text-decoration:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
a.mock-live:hover{transform:translateY(-2px)}
.mock-frame{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--paper-2)}
.mock-frame iframe{position:absolute;top:0;left:0;width:250%;height:250%;border:0;transform:scale(.4);transform-origin:0 0;pointer-events:none}
.btn-avaa-sivusto{min-height:48px;padding-inline:22px;font-size:16px}
/* Valmis-näkymän päätoiminto otsikon alla, ei vaiheiden alla (QA 22.10. A-09). */
.actions.actions-ylos{justify-content:flex-start;flex-wrap:wrap;margin:18px 0 6px;padding-top:0;border-top:0}
.actions-ylos > span{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){a.mock-live{transition:none}a.mock-live:hover{transform:none}}

/* K7 (arvio 7.10.2026): rakennus kestää tavallista pidempään. */
.build-kauemmin{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0}
.build-kauemmin > svg{flex:none;margin-top:2px}

/* K18 (arvio 7.10.2026): puhelimella muokkausnäkymä on oletuksena pelkkä keskustelu (Julkaise ja "Näytä sivu"
   yläpalkissa), ja sivu avautuu koko ruudulle omaksi näkymäkseen. Ennen chat ja esikatselu jakoivat ruudun
   noin 230 ja 170 px:n osiin. Sama näkymien vaihto koskee tablettia pystyasennossa ja kaikkia leveyksiä, joilla
   keskustelu ja sivu ovat allekkain (≤ 1000 px): ennen sivusta näkyi tabletilla vain ruudun alin 300 px
   (QA 22.10. k2 E-21). Myös tabletin vaaka-asento (kosketus, alle 1200 px): sivupalkin ja keskustelun vieressä sivu
   jäi 304 px:n kaistaksi puhelinasettelussa ja Julkaise pelkäksi ikoniksi (QA 22.10. k3 E-35). */
.pb-nayta-sivu,.pb-nayta-chat{display:none}
@media (pointer:coarse) and (min-width:1001px) and (max-width:1199px){
  .studio-edit.puhelin-nakymat,.studio-edit.puhelin-nakymat.chat-wide{grid-template-columns:minmax(0,1fr)}
  .studio-edit.puhelin-nakymat .edit-divider{display:none}
}
@media (max-width:1000px),(pointer:coarse) and (max-width:1199px){
  .studio-edit.puhelin-nakymat .pb-nayta-sivu,.studio-edit.puhelin-nakymat .pb-nayta-chat{display:inline-flex;flex:none}
  .studio-edit.puhelin-nakymat [data-show-preview],.studio-edit.puhelin-nakymat [data-hide-preview]{display:none}
  .studio-edit.puhelin-nakymat:not(.nayta-sivu) .preview-pane{display:none}
  .studio-edit.puhelin-nakymat:not(.nayta-sivu) .chat{height:100vh;height:100dvh;border-bottom:0}
  .studio-edit.puhelin-nakymat:not(.nayta-sivu) .chat-top-pub{display:flex}
  .studio-edit.puhelin-nakymat .chat-top-pub .pb-live{display:none}
  .studio-edit.puhelin-nakymat .chat-top-pub{flex:none}
  /* Näytä sivu: keskustelu pois ja sivu koko ruudulle kaikilla puhelimilla (QA 22.10. A-01, B-01, E-01: säännöt
     olivat vain 380 px:n lohkossa, joten 390–430 px:n puhelimilla sivu jäi keskustelun alle). */
  .studio-edit.puhelin-nakymat.nayta-sivu .chat{display:none}
  .studio-edit.puhelin-nakymat.nayta-sivu .preview-pane{display:flex;min-height:100vh;min-height:100dvh}
  .studio-edit.puhelin-nakymat.nayta-sivu .preview-stage{flex:1;min-height:calc(100dvh - 120px)}
  .studio-edit.puhelin-nakymat.nayta-sivu .edit-divider{display:none}
}
@media (max-width:700px){
  /* Yläpalkki kahdella rivillä (QA 13.10.2026: nimet katkesivat "T…" ja "K", Julkaise oli pelkkä raketti):
     1. valikko, projektin nimi luettavana ja Pyydä apua; 2. keskustelu, Julkaise tekstillä ja Näytä sivu. */
  .studio-edit.puhelin-nakymat .chat-top{flex-wrap:wrap;height:auto;gap:4px;padding:4px 8px 6px 6px}
  .studio-edit.puhelin-nakymat .chat-top > *{order:2}
  .studio-edit.puhelin-nakymat .chat-top > .side-toggle,.studio-edit.puhelin-nakymat .chat-top > .proj-menu:not(.conv-menu),.studio-edit.puhelin-nakymat .chat-top > [data-help]{order:1}
  .studio-edit.puhelin-nakymat .chat-top > .proj-menu:not(.conv-menu){flex:1 1 calc(100% - 104px)}
  .studio-edit.puhelin-nakymat .chat-top .grow{display:none}
  .studio-edit.puhelin-nakymat .chat-top > .conv-menu{flex:1 1 64px;min-width:0}
  .studio-edit.puhelin-nakymat .conv-menu summary{max-width:100%;min-width:0}
  .studio-edit.puhelin-nakymat .conv-menu .conv-name{max-width:none;min-width:0}
  .studio-edit.puhelin-nakymat .pb-publish{font-size:13px;gap:6px;padding:0 12px}
  .studio-edit.puhelin-nakymat .pb-publish .pb-pub-lisa{display:none}
  .studio-edit.puhelin-nakymat .chat-top-pub .pb-publish .count-badge{font-size:12px;margin-left:2px}
  .studio-edit.puhelin-nakymat .pb-nayta-sivu{padding:0 10px}
  /* Sivunäkymä: 1. Keskustelu ja oikealla Jaa ja Julkaise; 2. välilehdet, laite ja sivuvalitsin. */
  .studio-edit.puhelin-nakymat .preview-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"takaisin . oikea" "valilehdet keski keski"}
  .studio-edit.puhelin-nakymat .pb-nayta-chat{grid-area:takaisin}
  .studio-edit.puhelin-nakymat .pane-tabs{grid-area:valilehdet}
  .studio-edit.puhelin-nakymat .pb-center{grid-area:keski;order:0}
  .studio-edit.puhelin-nakymat .pb-right{grid-area:oikea}
}
/* Kapein puhelin (320 px): Julkaistu-merkki ja laitevalinta pois, jotta Julkaise ja sivun nimi mahtuvat. */
@media (max-width:380px){
  .studio-edit.puhelin-nakymat .pb-right .pb-live,.studio-edit.puhelin-nakymat [data-device-cycle]{display:none}
  /* Keskusteluvalitsin puheikonina, kun nimi katkeaisi muotoon "Kesk…"; nimi pysyy ruudunlukijalle (QA 22.10. k2 E-27). */
  .studio-edit.puhelin-nakymat .chat-top > .conv-menu{flex:none}
  .studio-edit.puhelin-nakymat .conv-menu .conv-ikoni{display:block}
  .studio-edit.puhelin-nakymat .conv-menu .conv-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* Julkaistun sivuston työkalurivi (arvio 7.10. K11): oikea ryhmä ei kutistu päällekkäin keskiosan kanssa,
   Julkaistu-tieto on tiivis merkki Julkaise-napin vieressä ja sivuvalitsin muuttuu kapeana ikoniksi. */
.pb-right{min-width:max-content}
.pb-right .pb-live{flex-shrink:0}
.page-dd,.page-dd-btn{min-width:36px}
.page-dd-btn > svg:first-child{display:none}
@container pane (max-width:900px){.pb-right .pb-live-tiivis span{display:none}.pb-right .pb-live-tiivis{padding:0 9px}}
@container pane (max-width:780px){.pb-pub-lisa{display:none}.jaa-btn{padding:0 10px}.jaa-btn span{display:none}}
@container pane (max-width:700px){.page-dd-btn > svg:first-child{display:block;color:var(--ink)}.page-dd-btn span,.page-dd-btn > svg:last-child{display:none}.addr{flex:0 0 auto}}

@container pane (max-width:620px){.preview-bar{grid-template-columns:auto auto 1fr}.pb-center{grid-column:1/-1;order:3}.addr{flex:0 1 420px}.page-dd-btn span,.page-dd-btn > svg:last-child{display:inline;display:revert}.page-dd-btn > svg:first-child{display:none}}

/* Hallinta › Tulokset (arvio 7.10. K15) */
.tulokset-ruudukko{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tulos-luku{margin:0;font:600 26px/1.1 var(--font-display);color:var(--ink)}
.tulos-luku small{font:500 13.5px var(--font-body);color:var(--muted)}

/* Hallinnan Lisäasetukset-ryhmä (arvio 7.10. K17) */
.mg-nav-ryhma{margin:14px 10px 4px}
@media (max-width:700px){.mg-nav-ryhma{flex-basis:100%;margin:6px 4px 0}}

/* Jaa somessa (arvio 7.10. K19) */
.jaa-some-napit{flex-wrap:wrap;justify-content:flex-start;gap:8px}

/* Tukipyynnön ketju (arvio 7.10. S1) */
.tuki-pyynto{margin-bottom:10px}
.tuki-pyynto > summary{cursor:pointer;list-style:none}
.tuki-pyynto > summary::-webkit-details-marker{display:none}
.tuki-ketju{display:grid;gap:8px}
.tuki-ketju-viesti{margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--paper-2)}
.tuki-ketju-viesti.is-digisilta{background:var(--tint-pink)}
.tuki-teksti{white-space:pre-line;max-width:72ch;display:inline-block}
.tuki-vastaa{display:grid;gap:8px;margin-top:8px}

/* Kosketusalueet vähintään 44 px puhelimella (raportti 04 L18 ja L20, WCAG 2.5.8). Tiedoston lopussa, jotta
   komponenttien omat koot eivät kumoa näitä. Tekstimäiset napit saavat osuma-alueen paddingilla ja vastakkaisella
   marginilla: näkyvä asettelu pysyy ennallaan. */
@media (pointer:coarse){
  .btn-sm{min-height:44px}
  .icon-x,.pb-icon,.ma-btn,.side-toggle,.side-collapse,.side-more,.pcard-more{min-width:44px;min-height:44px}
  .mg-link,.dd-btn,.side-nav,.side-new,.side-item,.side-conv,.proj-menu summary,summary.me,.me-pop a,.me-pop button,.me-pop summary,.proj-pop a,.proj-pop button,.cx-tabs button,.sa-valilehdet a{min-height:44px}
  .mg-link,.dd-btn,.side-conv,.proj-menu summary,.cx-tabs button{display:flex;align-items:center}
  .dd-btn,.cx-tabs button{display:inline-flex}
  label.chip,.chip-btn,.seg span,.seg a,.pill span{min-height:44px;display:inline-flex;align-items:center}
  .link-btn,.link-arrow,.link{padding-block:12px;margin-block:-12px}
  .sa-tchip button{width:44px;height:44px;margin:-7px -4px -7px -10px}
  .theme-seg button{min-width:44px;min-height:44px}
}
/* Loput alle 44 px:n kohteet (QA 22.10. E-11): suodatinvälilehdet, jakson ja laitteen valinnat, kirjoituskentän
   valikot, vaihepalkki, Koodi-näkymän tiedostolista ja tavalliset napit. Myös kapealla näytöllä, vaikka laite ei
   ilmoittaisi kosketusta. min-height voittaa komponentin oman height-arvon. */
@media (pointer:coarse),(max-width:640px){
  .btn,.btn-sm,.dd-btn,.home-tab,.seg-mini a,.seo-laite button,.code-file,.code-search,.steps a{min-height:44px}
  .seg-mini a{display:inline-flex;align-items:center}
  .steps a{min-width:44px;justify-content:center}
  .sa-item-otsikko{display:inline-block;padding-block:10px;margin-block:-10px}
  /* Kierroksen 2 mittauksessa jäljelle jääneet (QA 22.10. k2 E-23): Asetusten ja ylläpidon osiorivi, Verkkosivujen
     näkyvyysrivi, Mediakirjaston välilehdet ja suodattimet, valittavat chipit, kansiot ja avattavat kokoelmat,
     muokkausnäkymän välilehdet ja sivuvalitsin, ikkunan sulkunappi sekä salasanan Näytä-nappi. */
  .set-nav a,.pk-osiot a,.nk-chip,.mk-tabs button,.seg button,a.chip,.pk-chip,.code-dir summary,.mn-kooste summary,.mn-uusi summary,.pane-tabs button,.page-dd-btn,.auth-pw button{min-height:44px}
  .seg button,a.chip{display:inline-flex;align-items:center}
  .dlg-close{min-width:44px;min-height:44px}
  .link,.modlib-where a{padding-block:14px;margin-block:-14px}
  /* Kierroksen 3 mittauksessa jäljelle jääneet (QA 22.10. k3 E-34): Mediakirjaston kuvakortin napit (28 px kuvan
     päällä, ohi osuva napautus vaihtoi valinnan), hakukentät koko korkeudeltaan napautettaviksi, Asetusten ja
     ylläpidon avattavat otsikot sekä Sivurakenne-vaiheen kentät. */
  .mk-kayta{height:44px;padding:0 14px;font-size:13px}
  .mk-kopioi{width:44px;height:44px}
  .media-item:has(.kp-maininta) .mk-kopioi{top:84px}
  .mk-haku,.cx-search,.home-search{height:44px}
  .mk-haku input,.home-search input{align-self:stretch;height:auto!important}
  .plan-lisa summary{padding-block:12px}
  .tpl-row>summary{padding-block:11px}
  .pages-edit .pages-edit-kentat input{height:44px}
}
/* Mediakirjaston haku koko rivin levyiseksi puhelimella: paikkamerkki katkesi muotoon "Hae nimellä tai sivustol". */
@media (max-width:640px){.mk-tyokalut .mk-haku{flex:1 1 100%}.mk-tyokalut .mk-haku input{min-width:0;width:100%}}

/* Kirjautumissivun "En pääse kirjautumaan" -ohje (arvio 7.10. S4) */
.kirjautumisapu{margin-top:18px}

/* Etusivu 8.10.2026: kortit täyttävät rivin (ei tyhjää saraketta oikealla), kun näkyviä kortteja on vähintään neljä.
   Poistetut sivun lopussa kokoontaitettuna. */
.home-cards:has(> [data-name]:not([hidden]) ~ [data-name]:not([hidden]) ~ [data-name]:not([hidden]) ~ [data-name]:not([hidden])){grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.home-poistetut>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:16px}
.home-poistetut>summary::-webkit-details-marker{display:none}
.home-poistetut>summary small{margin-left:6px;color:var(--faint);font-weight:600;font-size:13px}
.home-poistetut>summary svg{color:var(--muted);transition:transform .2s var(--ease)}
.home-poistetut[open]>summary svg{transform:rotate(180deg)}
.home-poistetut[open]>summary{margin-bottom:6px}

/* Sivurakenne muokattavana (13.10.2026): nimi ja sisältö suoraan listassa, järjestys ja poisto ikoninapeilla. */
.pages-edit li{align-items:center}
.pages-edit li:hover{transform:none}
.pages-edit-kentat{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2fr);gap:8px}
.pages-edit-kentat input{width:100%;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:500 14px var(--font-body)}
.pages-edit-kentat input[data-k=nimi]{font-weight:600}
.pages-edit-kentat input:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.pages-edit-napit{display:flex;align-items:center;gap:2px}
.pages-edit-napit .icon-btn-sm{border:0;background:none;padding:0}
.pages-edit-napit .icon-btn-sm:hover{background:var(--card)}
.pages-edit-etusivu{color:var(--muted);font-size:12.5px;padding:0 8px}
.pages-edit-lisaa{margin:10px 0 4px}
/* Puhelimella kentät koko rivin levyisiksi ja siirto- ja poistonapit niiden alle omalle rivilleen (QA 22.10. A-07:
   kentät jäivät noin 100 px:n levyisiksi nappien viereen ja sivun nimi katkesi). */
@media (max-width:620px){.pages-edit-kentat{grid-template-columns:1fr}.pages-edit li{align-items:start;grid-template-columns:20px minmax(0,1fr);gap:8px 10px;padding:12px}.pages-edit-napit{grid-column:2;justify-content:flex-end;gap:6px}.pages-edit-napit:has(.pages-edit-etusivu){justify-content:flex-start}}
/* Poiston kumoaminen: sama alareunan ilmoitus kuin tallennuksessa, mutta napautettava Kumoa-nappi. */
.kumoa-ilmoitus{gap:4px;padding:4px 6px 4px 16px;width:max-content;max-width:calc(100vw - 32px)}
.kumoa-ilmoitus.is-nakyy{pointer-events:auto}
.kumoa-teksti{margin:0;min-width:0}
.kumoa-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:inherit;font:600 14px/1 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;flex:none}
.kumoa-btn:hover{background:color-mix(in srgb,var(--card) 14%,transparent)}

/* Kuvien lisäys -ikkuna (partials/kuvat-dialogi, 13.10.2026): omat kuvat tai kuvapankin kuvat suoraan sivustolle. Taustan
   napautus sulkee, joten sisätila on sisäkääreessä (.kd-sisus) eikä dialogissa. Puhelimella koko ruutu. */
.kuvat-dialog{width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:var(--r-lg);background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(20,10,30,.28);overflow:hidden}
.kuvat-dialog::backdrop{background:rgba(20,12,28,.45)}
.kd-sisus{display:flex;flex-direction:column;max-height:calc(100dvh - 48px)}
.kd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 0 20px}
.kd-head h2{margin:0;font-size:20px}
.kd-tabs{margin:8px 20px 0}
.kd-paneeli{flex:1;min-height:0;overflow:auto;padding:16px 20px}
.kd-paneeli .mk-drop{margin:0}
.kd-haku{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.kd-haku .mk-haku{min-width:0}
.kd-haku .mk-haku input{min-width:0;width:100%}
.kd-haku .btn{height:46px;flex-shrink:0}
.kd-tila{margin:0 0 4px}
.kd-tila:empty{display:none}
.kd-tulokset{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-top:8px}
.kd-tulokset .thumb:has(input:not(:checked)) img{opacity:1;filter:none}
.kd-tulokset .thumb:has(input:checked){outline-width:3px}
.kd-tulokset .thumb input{width:24px;height:24px}
.kd-tulokset .thumb .src{left:6px;right:auto;max-width:calc(100% - 12px);font-size:12px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;border-radius:8px}
.kd-tulokset .kp-maininta a{color:#fff}
.kd-lisaa-tuloksia{text-align:center;margin:14px 0 0}
.kd-lisaa-tuloksia:has([hidden]){display:none}
.kd-lahde{margin:12px 0 0}
.kd-ala{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line);background:var(--card)}
.kd-ala .grow{flex:1}
.kd-ala:has([data-kd-tila]:empty):not(:has(.btn:not([hidden]))){display:none}
html.kd-lukko{overflow:hidden}
@media (max-width:640px){
  .kuvat-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .kuvat-dialog[open]{display:flex;flex-direction:column}
  .kd-sisus{flex:1;max-height:100dvh;min-height:0}
  .kd-tabs button{flex:1;justify-content:center;padding:0 8px}
  .kd-tulokset{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kd-ala .btn{flex:1;justify-content:center}
}

/* Verkkotunnuksen suojapaketti (partials/suojapaketti.blade.php, js/suojapaketti.js): sama osio julkaisuikkunassa,
   ostopolussa ja Asetukset › Verkkotunnukset -kortissa. Rivit ovat ostopolun .np-item-rivejä. */
.suoja{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);min-width:0}
.suoja[hidden]{display:none}
.suoja-otsikko{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
.suoja-otsikko svg{color:var(--pink-ink);flex:none}
.suoja-selite{margin:0;max-width:72ch;color:var(--muted)}
.suoja-selite b{overflow-wrap:anywhere}
.suoja-lista .hint{margin:0}
.suoja-rivit{display:grid}
.suoja-item{border-top:1px solid var(--line)}
.suoja-item:first-child{border-top:0}
.suoja-item .np-name{overflow-wrap:anywhere}
.suoja-hinta{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 8px;text-align:right}
.suoja-hinta s,.kassa-norm{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.suoja-hinta s[hidden]{display:none}
.suoja-yht{margin:0;font-weight:600;color:var(--ok-ink)}
.suoja-yht[hidden]{display:none}
.suoja-portaat{margin:0;font-size:13.5px;color:var(--muted);max-width:72ch}
.np-detail .np-suoja{flex-basis:100%;min-width:0}
.pj-tulos-kortti .suoja{margin-top:12px}
.kassa-hinnat .kassa-saasto dt,.kassa-hinnat .kassa-saasto dd{color:var(--ok-ink)}
.suoja-kortti{margin:18px 0 0}
.suoja-kortti h3{margin:0 0 8px}
.suoja-kortti .mg-actions{margin-top:10px}
/* Haltija tarvitaan myös pelkille lisäosoitteille; suojapaketin ehto näkyy vain, kun lisäosoite on valittuna. */
.np:has(input[data-suoja-valinta]:checked) [data-np-haltija]{display:grid}
.np:not(:has(input[data-suoja-valinta]:checked)) [data-np-suoja-ehto]{display:none}
@media (max-width:640px){.suoja{padding:12px}.suoja-item .suoja-hinta{grid-column:2;justify-content:flex-start;text-align:left}}
/* Seuraavaksi ja Mistä seuraat tuloksia (partials/seuraavat-askeleet, App\Services\SeuraavatAskeleet, 13.10.2026). */
.seuraavaksi .step-eyebrow + h2{margin-top:0}
.seuraavaksi .intro{margin-bottom:18px}
.seuraavaksi-kortit{list-style:none;margin:0;padding:0}
.seuraavaksi-kortit .mg-card{align-content:start}
.seuraavaksi-kortit .mg-head b{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.seuraavaksi-kortit .mg-head b .ag-av,.seuraavaksi-kortit .mg-head b svg{flex:none}
.seuraavaksi .seuraavaksi-h3{font-size:17px;margin:28px 0 12px}
.seuraavaksi > .seuraavaksi-h3:first-child{margin-top:0}

/* Markkinointi (kasvupolut E1; uudistus 13.10.2026): tilannekuva, käytössä olevat, suositeltu askel ja tiilet, joissa
   esikatselu asiakkaan omalla aineistolla (partials/markkinointi-esikatselu). Googlen jäljitelmät ovat aina vaaleita kuten
   .seo-serp-tulos; muut esikatselut noudattavat teemaa. Liike: tiilien porrastettu nousu, hover-nosto ja suositellun
   esikatselun hidas leijunta; vähennetty liike poistaa kaiken. */
.mkt{display:grid;gap:20px;align-content:start}
.mkt h2,.mkt h3{text-wrap:balance}
.mkt p{text-wrap:pretty}
.mkt a.link-btn{text-decoration:none;font-size:13.5px}
.mkt a.link-btn:hover{text-decoration:underline}
.mkt .btn:active{transform:scale(.96)}
.mkt-yla{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.mkt-intro{margin:0;color:var(--muted);max-width:72ch;flex:1 1 360px}
.mkt-sivusto{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkt-sivusto > span{font-weight:600;font-size:14px}
.mkt-osio-yla{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:12px}
.mkt-osio-yla h2{font-size:18px;min-width:0;overflow-wrap:anywhere}
.mkt-osio-yla h2 small{font:500 13px var(--font-body);color:var(--muted);margin-left:6px;white-space:nowrap}
.mkt-huom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;grid-column:1 / -1}
.mkt-huom > span{flex:1 1 320px;min-width:0}

/* Runko: suositus ja huomautukset; käytössä olevat lopuksi (mahdollisuuksien jälkeen). */
.mkt-runko{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mkt-kaytossa{min-width:0;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}


/* Käytössä */
.mkt-kaytossa ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mkt-kaytossa{container-type:inline-size}
.mkt-kaytossa li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
/* Kapeassa sarakkeessa nappi tekstin alle, jotta tunnusluku mahtuu riville. */
@container (max-width:480px){.mkt-kaytossa li{grid-template-columns:auto minmax(0,1fr);align-items:start}.mkt-kaytossa li .btn{grid-column:2;justify-self:start}}
.mkt-kaytossa li:first-child{border-top:0;padding-top:2px}
.mkt-kaytossa-ikoni{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--ok-soft);color:var(--ok-ink)}
.mkt-kaytossa-ikoni:has(.ag-av){background:none}
.mkt-kaytossa-teksti{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.mkt-kaytossa-teksti b{font-size:14px;overflow-wrap:anywhere}
.mkt-kaytossa-teksti small{flex-basis:100%;font-size:12.5px;color:var(--muted)}

/* Suositeltu seuraava askel */
.mkt-suositus{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:clamp(20px,2.4vw,30px);border-radius:22px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 90% at 0% 0%,var(--pink-soft),transparent 70%),var(--card);border:1px solid color-mix(in srgb,var(--pink) 26%,var(--line));box-shadow:var(--shadow-pop)}
@media (min-width:860px){.mkt-suositus{grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);align-items:center;gap:clamp(20px,3vw,40px)}}
.mkt-suositus-teksti{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.mkt-kicker{display:block;font-size:12.5px;line-height:1.45;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pink-ink)}
.mkt-kicker svg{display:inline-block;vertical-align:-2px;margin-right:4px}
.mkt-kicker span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600}
.mkt-suositus h2{font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em}
.mkt-suositus-teksti > p{margin:0;font-size:16px;color:var(--muted);max-width:56ch}
.mkt-arvio{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px 0;width:100%;max-width:560px;margin-top:4px}
.mkt-arvio div{display:grid;gap:2px;align-content:start;padding:0 16px;border-left:1px solid var(--line)}
.mkt-arvio div:first-child{padding-left:0;border-left:0}
.mkt-arvio b{font:600 24px/1.15 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em}
.mkt-arvio small{font-size:12.5px;line-height:1.35;color:var(--muted)}
.mkt-arvio-huom{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12.5px;color:var(--muted);max-width:64ch}
.mkt-arvio-huom .mg-tag{flex:none}
.mkt-faktat{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mkt-faktat li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:500}
.mkt-faktat li svg{color:var(--ok-ink)}
.mkt-suositus-napit{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:6px}
.mkt-suositus-napit .btn-primary{min-height:48px;padding-inline:22px;font-size:15px}
/* Kapein puhelin: nappi ei jatku kortin reunan yli, vaan teksti rivittyy (QA 22.10. E-09, 320 px). */
.mkt-suositus-napit{min-width:0;max-width:100%}
.mkt-suositus-napit .btn{max-width:100%;white-space:normal;text-align:left;line-height:1.25;padding-block:10px}
.mkt-suositus-kuva{position:relative;display:grid;place-items:center;min-height:280px;padding:28px 20px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 0) 0 0 / 18px 18px,var(--paper)}
.mkt-suositus-kuva::before{content:"";position:absolute;inset:10% 8%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(250,33,118,.18),rgba(168,85,247,.10) 55%,transparent);filter:blur(18px)}
.mkt-suositus-kuva .mkt-esi{position:relative;z-index:1;animation:mkt-leiju 7s ease-in-out infinite alternate}
@keyframes mkt-leiju{from{transform:translateY(3px)}to{transform:translateY(-5px)}}

/* Mahdollisuudet tiilinä */
.mkt-mahdollisuudet{container-type:inline-size}
.mkt-tiilet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:620px){.mkt-tiilet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:960px){.mkt-tiilet{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:1500px){.mkt-tiilet{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Rivin ainoa viimeinen tiili leveänä: esikatselu vasemmalla, teksti oikealla. */
@container (min-width:620px) and (max-width:959.98px){.mkt-tiili:last-child:nth-child(2n+1){grid-column:1 / -1;flex-direction:row}.mkt-tiili:last-child:nth-child(2n+1) .mkt-tiili-kuva{flex:0 0 min(46%,520px);height:auto;min-height:180px;border-bottom:0;border-right:1px solid var(--line);align-items:center;padding:20px}.mkt-tiili:last-child:nth-child(2n+1) .mkt-tiili-teksti{justify-content:center;padding:20px 24px}.mkt-tiili:last-child:nth-child(2n+1) .mkt-tiili-teksti .btn{margin-top:6px}}
@container (min-width:960px) and (max-width:1499.98px){.mkt-tiili:last-child:nth-child(3n+1){grid-column:1 / -1;flex-direction:row}.mkt-tiili:last-child:nth-child(3n+1) .mkt-tiili-kuva{flex:0 0 min(46%,520px);height:auto;min-height:180px;border-bottom:0;border-right:1px solid var(--line);align-items:center;padding:20px}.mkt-tiili:last-child:nth-child(3n+1) .mkt-tiili-teksti{justify-content:center;padding:20px 24px}.mkt-tiili:last-child:nth-child(3n+1) .mkt-tiili-teksti .btn{margin-top:6px}}
@container (min-width:1500px){.mkt-tiili:last-child:nth-child(4n+1){grid-column:1 / -1;flex-direction:row}.mkt-tiili:last-child:nth-child(4n+1) .mkt-tiili-kuva{flex:0 0 min(46%,520px);height:auto;min-height:180px;border-bottom:0;border-right:1px solid var(--line);align-items:center;padding:20px}.mkt-tiili:last-child:nth-child(4n+1) .mkt-tiili-teksti{justify-content:center;padding:20px 24px}.mkt-tiili:last-child:nth-child(4n+1) .mkt-tiili-teksti .btn{margin-top:6px}}

.mkt-tiili{display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);animation:mkt-nousu .45s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
.mkt-tiili:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);border-color:color-mix(in srgb,var(--pink) 30%,var(--line))}
@keyframes mkt-nousu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mkt-tiili-kuva{position:relative;display:flex;justify-content:center;align-items:flex-start;height:180px;padding:20px 16px 0;overflow:hidden;text-decoration:none;color:inherit;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 0) 0 0 / 16px 16px,var(--paper);border-bottom:1px solid var(--line)}
.mkt-tiili-kuva .mkt-esi{transition:transform .35s var(--ease)}
.mkt-tiili:hover .mkt-tiili-kuva .mkt-esi{transform:translateY(-4px)}
.mkt-tiili-kuva .mkt-esi-google,.mkt-tiili-kuva .mkt-esi-seo{align-self:center}
.mkt-tiili-teksti{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;padding:14px 16px 16px}
.mkt-tiili-teksti h3{font-size:17px;line-height:1.25}
.mkt-tiili-teksti p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--muted)}
.mkt-tiili-teksti .btn{margin-top:auto;max-width:100%}
.mkt-ryhma{display:block;font-size:12px;line-height:1.4;font-weight:700;color:var(--pink-ink)}
.mkt-ryhma svg{display:inline-block;vertical-align:-2px;margin-right:3px}
.mkt-ryhma span{color:var(--muted);font-weight:600}

/* Esikatselut: yhteiset palat */
.mkt-esi{width:100%;display:flex;justify-content:center;min-width:0}
.mkt-kuva{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,var(--c,#6D28D9),color-mix(in srgb,var(--c,#6D28D9) 55%,#000))}
.mkt-kuva img{width:100%;height:100%;object-fit:cover;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
.mkt-kuva.is-tyhja{background:radial-gradient(70% 60% at 85% 0%,rgba(255,255,255,.30),transparent 70%),radial-gradient(60% 70% at 0% 100%,rgba(250,33,118,.38),transparent 70%),linear-gradient(135deg,var(--c,#6D28D9),color-mix(in srgb,var(--c,#6D28D9) 50%,#000))}
.mkt-kuva-grafiikka{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3em;padding:10px;text-align:center;color:#fff}
.mkt-kuva-grafiikka b{font:600 1em/1.1 var(--font-display);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.mkt-kuva-grafiikka small{font-size:.62em;font-weight:600;opacity:.85;text-transform:uppercase;letter-spacing:.08em}
.mkt-profiili{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--c,#6D28D9) 80%,#000);color:#fff;font:700 11px/1 var(--font-display)}
.mkt-esi i{display:block;height:6px;border-radius:3px;background:var(--line);width:100%}
.mkt-esi i.lyhyt{width:62%}

/* Google (aina vaalea) */
.mkt-google{display:grid;gap:10px;width:100%;max-width:330px;color-scheme:light}
.mkt-esi.is-iso .mkt-google{max-width:470px}
.mkt-hakukentta{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;color:#202124;border:1px solid #dfe1e5;box-shadow:0 1px 6px rgba(32,33,36,.12);font:14px/1.3 Arial,Helvetica,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color-scheme:light}
.mkt-hakukentta svg{flex:none;color:#5f6368}
.mkt-google-tulos{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:#fff;color:#202124;font-family:Arial,Helvetica,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(29,19,38,.10);min-width:0}
.mkt-google-merkki{font-size:12px;font-weight:700;color:#202124}
.mkt-google-sivu{display:flex;align-items:center;gap:8px;min-width:0}
.mkt-google-sivu > span{display:grid;min-width:0;line-height:1.25}
.mkt-google-sivu b{font-size:12.5px;font-weight:400;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-google-sivu small{font-size:11.5px;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-google-otsikko{font-size:16px;line-height:1.3;color:#1a0dab;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkt-esi.is-iso .mkt-google-otsikko{font-size:19px}
.mkt-google-kuvaus{font-size:12.5px;line-height:1.5;color:#4d5156;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkt-esi.is-iso .mkt-google-kuvaus{font-size:13.5px}
.mkt-google-kuvaus.is-luonnos{display:grid;gap:5px;padding-top:3px}
.mkt-google-kuvaus.is-luonnos i,.mkt-google-tulos.is-haalea i{background:#e8eaed}
.mkt-google-linkit{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:4px;font-size:13px;color:#1a0dab}
.mkt-google-tulos.is-haalea{gap:7px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mkt-google-tulos.is-haalea i{background:#f1f3f4}
.mkt-google-tulos.is-haalea i:first-child{width:40%;height:7px}
.mkt-google-tulos.is-orgaaninen{max-width:320px}

/* Artikkeli (Silta AI) */
.mkt-artikkeli{display:grid;gap:10px;width:100%;max-width:310px;justify-items:start}
.mkt-esi.is-iso .mkt-artikkeli{max-width:420px}
.mkt-artikkeli .mkt-hakukentta{width:100%}
.mkt-artikkeli-kortti{display:flex;gap:10px;width:100%;padding:8px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 24px rgba(29,19,38,.08)}
.mkt-artikkeli-kortti .mkt-kuva{flex:none;width:64px;height:64px;border-radius:8px;font-size:24px}
.mkt-esi.is-iso .mkt-artikkeli-kortti .mkt-kuva{width:96px;height:96px}
.mkt-artikkeli-teksti{display:grid;gap:4px;align-content:start;min-width:0;flex:1}
.mkt-artikkeli-teksti small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-artikkeli-teksti b{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkt-viikko{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-size:12px;font-weight:700}

/* Some ja Meta */
.mkt-some{width:200px;border-radius:12px;background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:0 8px 24px rgba(29,19,38,.10)}
.mkt-esi.is-iso .mkt-some{width:300px}
.mkt-some-yla{display:flex;align-items:center;gap:8px;padding:8px 10px}
.mkt-some-yla > span{display:grid;line-height:1.2;min-width:0}
.mkt-some-yla b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-some-yla small{font-size:10.5px;color:var(--muted)}
.mkt-some-kuva{position:relative}
.mkt-some-kuva .mkt-kuva{aspect-ratio:4 / 3;width:100%;font-size:19px}
.mkt-esi.is-iso .mkt-some-kuva .mkt-kuva{font-size:28px}
.mkt-some-kuva:has(img)::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.mkt-some-teksti{position:absolute;left:10px;right:10px;bottom:8px;z-index:1;color:#fff;font-size:12px;font-weight:700;line-height:1.25}
.mkt-esi.is-iso .mkt-some-teksti{font-size:15px}
.mkt-tekija{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 3px;border-radius:999px;background:rgba(255,255,255,.94);color:#1d1326;font-size:11px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.mkt-some-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--paper)}
.mkt-some-cta span{font-size:10.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-some-cta b{flex:none;font-size:11px;padding:5px 9px;border-radius:6px;background:var(--paper-2)}
.mkt-some-ala{display:flex;gap:16px;padding:8px 12px;color:var(--muted)}

/* Mainosvideo */
.mkt-video{display:flex;align-items:flex-end;gap:12px}
.mkt-video-ruutu{position:relative;width:96px;aspect-ratio:9 / 16;border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(29,19,38,.18);flex:none}
.mkt-video-ruutu.is-vaaka{width:150px;aspect-ratio:16 / 9}
.mkt-esi.is-iso .mkt-video-ruutu{width:150px}
.mkt-esi.is-iso .mkt-video-ruutu.is-vaaka{width:230px}
.mkt-video-ruutu .mkt-kuva{position:absolute;inset:0;font-size:22px}
.mkt-video-varjo{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.6))}
.mkt-video-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;padding-left:2px;border-radius:50%;background:rgba(255,255,255,.92);color:#1d1326;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.is-vaaka .mkt-video-play{width:30px;height:30px;margin:-15px 0 0 -15px}
.mkt-tiili:hover .mkt-video-play{transform:scale(1.08)}
.mkt-video-teksti{position:absolute;left:8px;right:8px;bottom:14px;display:grid;color:#fff;line-height:1.2}
.mkt-video-teksti b{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-video-teksti small{font-size:9.5px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-esi.is-iso .mkt-video-teksti b{font-size:13px}.mkt-esi.is-iso .mkt-video-teksti small{font-size:11.5px}
.mkt-video-palkki{position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.mkt-esi .mkt-video-palkki i{height:100%;width:38%;border-radius:2px;background:#fff}

/* Muutos sivuille */
.mkt-muutos{display:grid;gap:10px;width:100%;max-width:290px}
.mkt-kupla{justify-self:end;max-width:92%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--pink-fill);color:#fff;font-size:12.5px;font-weight:500;line-height:1.35;box-shadow:0 6px 16px rgba(217,19,92,.25)}
.mkt-selain{display:grid;border-radius:10px;background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:0 8px 24px rgba(29,19,38,.08)}
.mkt-selain-yla{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--paper-2)}
.mkt-esi .mkt-selain-yla i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.mkt-selain-yla span{margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--card);font-size:10px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.mkt-selain-yla span:empty{display:none}
.mkt-selain-nav{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:10.5px;color:var(--muted);min-width:0;white-space:nowrap}
.mkt-selain-nav b{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--ink);color:var(--card);font-size:10px}
.mkt-selain-nav .is-uusi{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;background:var(--pink-soft);color:var(--pink-ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mkt-selain-sisalto{display:grid;gap:6px;padding:4px 10px 12px}

/* SEO-mittari ja nopeus */
.mkt-seo{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.mkt-mittari{--tc:var(--ok-ink);position:relative;display:grid;place-content:center;justify-items:center;width:96px;height:96px;border-radius:50%;flex:none;
  background:conic-gradient(var(--tc) calc(var(--p) * 1%),var(--line) 0)}
.mkt-mittari::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--card)}
.mkt-mittari b,.mkt-mittari small{position:relative}
.mkt-mittari b{font:600 28px/1 var(--font-display);font-variant-numeric:tabular-nums}
.mkt-mittari small{font-size:11px;color:var(--muted)}
.mkt-mittari.is-kohtalainen{--tc:var(--warn-ink)}.mkt-mittari.is-heikko{--tc:var(--err-ink)}
.mkt-seo-teksti{display:grid;gap:2px}
.mkt-seo-teksti b{font-size:15px}.mkt-seo-teksti small{font-size:12px;color:var(--muted)}
.mkt-puhelin{display:block;width:104px;height:180px;padding:7px;border-radius:20px;background:var(--ink);box-shadow:0 10px 26px rgba(29,19,38,.18)}
.mkt-puhelin-ruutu{display:grid;gap:7px;align-content:start;height:100%;padding:16px 10px;border-radius:14px;background:var(--card)}
.mkt-nopeus-kaari{position:relative;display:block;width:64px;height:32px;margin:0 auto 6px;overflow:hidden}
.mkt-nopeus-kaari::before{content:"";position:absolute;inset:0 0 -32px;border-radius:50%;background:conic-gradient(from -90deg,var(--err-ink) 0 40deg,var(--warn-ink) 40deg 90deg,var(--ok-ink) 90deg 180deg,transparent 180deg);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%)}
.mkt-esi .mkt-nopeus-kaari i{position:absolute;left:calc(50% - 1px);bottom:0;width:2px;height:26px;border-radius:2px;background:var(--ink);transform-origin:50% 100%;transform:rotate(-20deg);transition:transform .6s var(--ease)}
.mkt-tiili:hover .mkt-nopeus-kaari i{transform:rotate(62deg)}

/* Julkaisu: sivuston etusivu pienennettynä */
.mkt-sivu{width:100%;max-width:440px;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(29,19,38,.12)}
.mkt-sivu-kehys,.mkt-sivu > .mkt-kuva{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;font-size:34px}
.mkt-sivu-kehys iframe{position:absolute;top:0;left:0;width:400%;height:400%;border:0;transform:scale(.25);transform-origin:0 0;pointer-events:none}

/* Puhelin: yksi sarake, suositus ensin */
@media (max-width:700px){
  .mkt-suositus{order:-1}
  .mkt-kaytossa{padding:16px}
  .mkt-kaytossa li{grid-template-columns:auto minmax(0,1fr)}
  .mkt-kaytossa li .btn{grid-column:1 / -1;justify-self:start}
  .mkt-suositus-kuva{min-height:230px;padding:22px 14px}
  .mkt-arvio div{padding:0 14px}
  /* Päänappi lähemmäs yläreunaa: palvelun nimi ja lupaukset näkyvät jo esikatselussa ja tiilissä. */
  .mkt-kicker span,.mkt-faktat{display:none}
  .mkt-suositus-teksti > p{font-size:15px}
  .mkt-yla{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .mkt-tiili,.mkt-suositus-kuva .mkt-esi{animation:none}
  .mkt-tiili,.mkt-tiili-kuva .mkt-esi,.mkt-video-play,.mkt-esi .mkt-nopeus-kaari i{transition:none}
  .mkt-tiili:hover,.mkt-tiili:hover .mkt-tiili-kuva .mkt-esi{transform:none}
  .mkt .btn:active{transform:none}
}

/* Etusivun seuraava askel -kortti (kasvupolut E2) */

/* Lomakevirheen kohdalle vieritetty kenttä ei jää kiinteän yläpalkin alle (QA 13.10.2026, polku 1). */
:where(input,select,textarea){scroll-margin-top:96px}