/* =====================================================================
   VideoHub – ulkoasu
   Värit: lumi (tausta), kuusi (muste ja tumma pinta), järvi (toiminnot),
          puolukka (toisto ja tykkäys), lakka (korostus).
   Kirjasimet: Schibsted Grotesk (käyttöliittymä, otsikot) ja
               Newsreader (blogin luettava teksti). Molemmat SIL OFL 1.1.
   ===================================================================== */

@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 1. Arvot ---------- */
:root{
  --lumi:#F1F5F7; --paper:#FFFFFF; --wash:#F6F9FA;
  --kuusi:#0E3341; --kuusi-deep:#0A2833; --kuusi-soft:#16475A;
  --text:#2C4856; --muted:#52687A; --faint:#8AA0AD;
  --line:#D9E3E8; --line-soft:#E7EEF1;
  --ink:#0E3341; --chip:#E9F0F3; --hov:#EEF4F6; --hov2:#EAF2F5; --stripe:#F9FBFC; --line-strong:#A9BFC9; --line-mid:#CFDBE1; --line-btn:#BFD0D8; --tint-line:#9CCAD6; --ph:#668092;
  --jarvi:#0A6E84; --jarvi-deep:#085A6C; --jarvi-tint:#E2F1F5; --jarvi-rgb:10,110,132;
  --puolukka:#D9254F; --puolukka-deep:#B81C41; --puolukka-tint:#FCE8ED;
  --lakka:#F2A52E; --lakka-tint:#FEF3DC; --lakka-ink:#7A4B03;
  --ok:#1E8A5B; --danger:#B42318;
  --r-ctl:10px; --r-media:14px; --r-panel:18px; --r-stage:24px;
  --ff-ui:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-read:"Newsreader",Georgia,"Times New Roman",serif;
  --nav-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Bootstrapin värit ja pyöristykset omiksi */
:root,[data-bs-theme=light]{
  --bs-body-font-family:var(--ff-ui); --bs-body-line-height:1.55;
  --bs-body-color:var(--text); --bs-body-color-rgb:44,72,86;
  --bs-body-bg:var(--lumi); --bs-body-bg-rgb:241,245,247;
  --bs-emphasis-color:var(--kuusi); --bs-emphasis-color-rgb:14,51,65; --bs-heading-color:var(--kuusi);
  --bs-secondary-color:var(--muted); --bs-secondary-color-rgb:82,104,122; --bs-tertiary-color:var(--faint);
  --bs-secondary-bg:var(--chip); --bs-secondary-bg-rgb:233,240,243;
  --bs-tertiary-bg:var(--wash); --bs-tertiary-bg-rgb:246,249,250;
  --bs-light-rgb:233,240,243;
  --bs-border-color:var(--line); --bs-border-color-translucent:rgba(14,51,65,.12);
  --bs-border-radius:var(--r-ctl); --bs-border-radius-sm:8px; --bs-border-radius-lg:var(--r-media);
  --bs-border-radius-xl:var(--r-panel); --bs-border-radius-xxl:var(--r-stage);
  --bs-link-color:var(--jarvi); --bs-link-color-rgb:10,110,132;
  --bs-link-hover-color:var(--jarvi-deep); --bs-link-hover-color-rgb:8,90,108;
  --bs-primary:#0A6E84; --bs-primary-rgb:10,110,132;
  --bs-primary-text-emphasis:#064A5A; --bs-primary-bg-subtle:#E2F1F5; --bs-primary-border-subtle:#B5DCE6;
  --bs-secondary:#52687A; --bs-secondary-rgb:82,104,122;
  --bs-secondary-text-emphasis:#33495A; --bs-secondary-bg-subtle:#EAF0F3; --bs-secondary-border-subtle:#D3DEE4;
  --bs-success:#1E8A5B; --bs-success-rgb:30,138,91;
  --bs-success-text-emphasis:#165C3F; --bs-success-bg-subtle:#E3F4EC; --bs-success-border-subtle:#B6E0CD;
  --bs-warning:#F2A52E; --bs-warning-rgb:242,165,46;
  --bs-warning-text-emphasis:#7A4B03; --bs-warning-bg-subtle:#FEF3DC; --bs-warning-border-subtle:#F9DDA0;
  --bs-danger:#B42318; --bs-danger-rgb:180,35,24;
  --bs-danger-text-emphasis:#8A1A10; --bs-danger-bg-subtle:#FCE6E3; --bs-danger-border-subtle:#F4BDB7;
  --bs-info:#2678B2; --bs-info-rgb:38,120,178;
  --bs-info-text-emphasis:#174B73; --bs-info-bg-subtle:#E4F0F9; --bs-info-border-subtle:#B7D6EC;
  --bs-dark:#0E3341; --bs-dark-rgb:14,51,65;
  --bs-focus-ring-color:rgba(10,110,132,.28);
}

/* ---------- 2. Perusta ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body{font-family:var(--ff-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto;padding:30px 0 72px}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--ff-ui);color:var(--ink);font-weight:800;letter-spacing:-.022em;line-height:1.15;text-wrap:balance}
h1,.h1{font-size:clamp(2rem,1.45rem + 2vw,3rem);letter-spacing:-.035em;line-height:1.05}
h2,.h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);letter-spacing:-.03em}
h3,.h3{font-size:1.35rem}
h4,.h4{font-size:1.2rem}
h5,.h5{font-size:1.05rem;font-weight:750;letter-spacing:-.01em}
h6,.h6{font-size:.95rem;font-weight:750;letter-spacing:0}
a{color:var(--jarvi);text-decoration:none}
a:hover{color:var(--jarvi-deep)}
::selection{background:var(--lakka);color:var(--kuusi)}
:focus-visible{outline:3px solid rgba(var(--jarvi-rgb),.5);outline-offset:2px}
hr{border-color:var(--line);opacity:1}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}
.text-accent{color:var(--puolukka)!important}
.text-ink{color:var(--ink)!important}
.container-xxl{--bs-gutter-x:1.5rem}
@media(min-width:768px){.container-xxl{--bs-gutter-x:2.5rem}}

/* ---------- 3. Painikkeet, lomakkeet, paneelit ---------- */
.btn{--bs-btn-padding-x:1.1rem;--bs-btn-padding-y:.55rem;--bs-btn-font-weight:650;--bs-btn-border-radius:var(--r-ctl);--bs-btn-font-size:.95rem;letter-spacing:-.005em;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn-sm{--bs-btn-padding-x:.8rem;--bs-btn-padding-y:.32rem;--bs-btn-font-size:.86rem}
.btn-lg{--bs-btn-padding-x:1.5rem;--bs-btn-padding-y:.8rem;--bs-btn-font-size:1.05rem}
.btn.rounded-pill{--bs-btn-border-radius:999px}
.btn-primary{--bs-btn-bg:var(--jarvi);--bs-btn-border-color:var(--jarvi);--bs-btn-hover-bg:var(--jarvi-deep);--bs-btn-hover-border-color:var(--jarvi-deep);--bs-btn-active-bg:#064B5B;--bs-btn-active-border-color:#064B5B;--bs-btn-disabled-bg:var(--jarvi);--bs-btn-disabled-border-color:var(--jarvi);--bs-btn-focus-shadow-rgb:10,110,132}
.btn-outline-primary{--bs-btn-color:var(--jarvi);--bs-btn-border-color:var(--tint-line);--bs-btn-hover-bg:var(--jarvi);--bs-btn-hover-border-color:var(--jarvi);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--jarvi-deep);--bs-btn-active-border-color:var(--jarvi-deep);--bs-btn-disabled-color:var(--jarvi);--bs-btn-disabled-border-color:var(--tint-line);--bs-btn-focus-shadow-rgb:10,110,132}
.btn-secondary{--bs-btn-bg:var(--kuusi);--bs-btn-border-color:var(--kuusi);--bs-btn-hover-bg:var(--kuusi-deep);--bs-btn-hover-border-color:var(--kuusi-deep);--bs-btn-active-bg:#06202a;--bs-btn-active-border-color:#06202a;--bs-btn-focus-shadow-rgb:14,51,65}
.btn-dark{--bs-btn-bg:var(--kuusi);--bs-btn-border-color:var(--kuusi);--bs-btn-hover-bg:var(--kuusi-deep);--bs-btn-hover-border-color:var(--kuusi-deep);--bs-btn-active-bg:#06202a;--bs-btn-active-border-color:#06202a}
.btn-outline-secondary{--bs-btn-color:var(--text);--bs-btn-border-color:var(--line);--bs-btn-bg:var(--paper);--bs-btn-hover-bg:var(--hov);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--line-btn);--bs-btn-active-bg:#E3EBEF;--bs-btn-active-color:var(--ink);--bs-btn-active-border-color:var(--line-btn);--bs-btn-disabled-color:var(--faint);--bs-btn-disabled-border-color:var(--line);--bs-btn-focus-shadow-rgb:82,104,122}
.btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-color:var(--kuusi);--bs-btn-hover-bg:var(--hov2);--bs-btn-hover-border-color:var(--hov2);--bs-btn-hover-color:var(--kuusi)}
.btn-danger{--bs-btn-bg:var(--danger);--bs-btn-border-color:var(--danger);--bs-btn-hover-bg:#8F1D12;--bs-btn-hover-border-color:#8F1D12;--bs-btn-active-bg:#7a170e;--bs-btn-active-border-color:#7a170e}
.btn-outline-danger{--bs-btn-color:var(--danger);--bs-btn-border-color:#EDB4AE;--bs-btn-hover-bg:var(--danger);--bs-btn-hover-border-color:var(--danger);--bs-btn-hover-color:#fff;--bs-btn-active-bg:#8F1D12;--bs-btn-active-border-color:#8F1D12;--bs-btn-focus-shadow-rgb:180,35,24}
.btn-success{--bs-btn-bg:var(--ok);--bs-btn-border-color:var(--ok);--bs-btn-hover-bg:#17704a;--bs-btn-hover-border-color:#17704a;--bs-btn-active-bg:#125c3d;--bs-btn-active-border-color:#125c3d}
.btn-outline-success{--bs-btn-color:#17704a;--bs-btn-border-color:#9ED3BA;--bs-btn-hover-bg:var(--ok);--bs-btn-hover-border-color:var(--ok);--bs-btn-hover-color:#fff;--bs-btn-active-bg:#17704a;--bs-btn-active-border-color:#17704a}
.btn-warning{--bs-btn-bg:var(--lakka);--bs-btn-border-color:var(--lakka);--bs-btn-color:var(--kuusi);--bs-btn-hover-bg:#E39A22;--bs-btn-hover-border-color:#E39A22;--bs-btn-hover-color:var(--kuusi);--bs-btn-active-bg:#D58E1A;--bs-btn-active-border-color:#D58E1A;--bs-btn-active-color:var(--kuusi)}
.btn-outline-warning{--bs-btn-color:#8A5606;--bs-btn-border-color:#F1CD85;--bs-btn-hover-bg:var(--lakka);--bs-btn-hover-border-color:var(--lakka);--bs-btn-hover-color:var(--kuusi);--bs-btn-active-bg:#E39A22;--bs-btn-active-border-color:#E39A22;--bs-btn-active-color:var(--kuusi)}
.btn-outline-info{--bs-btn-color:#1d6397;--bs-btn-border-color:#A9CCE6;--bs-btn-hover-bg:var(--bs-info);--bs-btn-hover-border-color:var(--bs-info);--bs-btn-hover-color:#fff}
.btn-link{--bs-btn-color:var(--jarvi);--bs-btn-hover-color:var(--jarvi-deep);--bs-btn-font-weight:650;text-decoration:none}
.btn-close:focus{box-shadow:0 0 0 .2rem rgba(var(--jarvi-rgb),.25)}

.form-label{font-weight:650;font-size:.88rem;color:var(--ink);margin-bottom:.35rem}
.form-control,.form-select{border-color:var(--line-mid);border-radius:var(--r-ctl);padding:.62rem .85rem;background-color:var(--paper);color:var(--ink);font-size:.97rem}
.form-control-lg{padding:.8rem 1rem;font-size:1.05rem}
.form-control-sm,.form-select-sm{padding:.35rem .65rem;font-size:.88rem;border-radius:8px}
.form-control::placeholder{color:#7C93A0}
.form-control:focus,.form-select:focus{border-color:var(--jarvi);box-shadow:0 0 0 4px rgba(var(--jarvi-rgb),.14);background-color:var(--paper);color:var(--ink)}
.form-control:disabled,.form-control[readonly]{background:var(--wash)}
.form-check-input{border-color:#9FB4BF}
.form-check-input:checked{background-color:var(--jarvi);border-color:var(--jarvi)}
.form-check-input:focus{border-color:var(--jarvi);box-shadow:0 0 0 .22rem rgba(var(--jarvi-rgb),.2)}
.form-switch{display:flex;align-items:flex-start;gap:.7rem;padding-left:0;min-height:0}
.form-switch .form-check-input{float:none;flex:none;margin:.1rem 0 0;width:2.4em;height:1.3em}
.input-group>.form-control:focus,.input-group>.form-select:focus{z-index:3}
.input-group-text{background:var(--wash);border-color:var(--line-mid);color:var(--muted)}

.card{--bs-card-border-color:var(--line);--bs-card-border-radius:var(--r-panel);--bs-card-inner-border-radius:calc(var(--r-panel) - 1px);--bs-card-cap-bg:var(--paper);--bs-card-cap-padding-x:1.2rem;--bs-card-cap-padding-y:.95rem;--bs-card-spacer-x:1.2rem;--bs-card-spacer-y:1.1rem;background:var(--paper);box-shadow:none}
.card-header{font-weight:750;color:var(--ink);border-bottom-color:var(--line-soft)}
.card-header:first-child{border-radius:calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px) 0 0}
.list-group{--bs-list-group-border-color:var(--line-soft);--bs-list-group-border-radius:var(--r-panel);--bs-list-group-action-hover-bg:var(--wash);--bs-list-group-action-hover-color:var(--kuusi);--bs-list-group-item-padding-x:1.2rem;--bs-list-group-item-padding-y:.8rem}
.list-group-flush>.list-group-item{border-color:var(--line-soft)}
.badge{font-weight:650;border-radius:999px;padding:.38em .7em;letter-spacing:0}
.alert{--bs-alert-border-radius:var(--r-media);--bs-alert-padding-y:.8rem;border-width:0 0 0 4px;border-left-style:solid;font-size:.95rem}
.alert-success{border-left-color:var(--ok)}
.alert-warning{border-left-color:var(--lakka)}
.alert-danger{border-left-color:var(--danger)}
.alert-info{border-left-color:var(--bs-info)}
.dropdown-menu{--bs-dropdown-border-color:var(--line);--bs-dropdown-border-radius:14px;--bs-dropdown-padding-x:.4rem;--bs-dropdown-padding-y:.4rem;--bs-dropdown-item-border-radius:9px;--bs-dropdown-item-padding-y:.5rem;--bs-dropdown-link-active-bg:var(--jarvi);--bs-dropdown-link-hover-bg:var(--hov);--bs-dropdown-link-color:var(--text);--bs-dropdown-link-hover-color:var(--kuusi);--bs-dropdown-box-shadow:0 18px 40px -12px rgba(14,51,65,.28);font-size:.95rem}
.dropdown-item{font-weight:550}
.modal-content{border:0;border-radius:var(--r-stage);box-shadow:0 30px 80px -20px rgba(14,51,65,.45)}
.modal-header,.modal-footer{border-color:var(--line-soft)}
.table{--bs-table-color:var(--text);--bs-table-border-color:var(--line-soft);--bs-table-hover-bg:#F6F9FA;--bs-table-hover-color:var(--text);--bs-table-striped-bg:var(--stripe)}
.table>thead>tr>th,.table>thead th{font-size:.82rem;font-weight:650;color:var(--muted);background:var(--wash);border-bottom:1px solid var(--line);white-space:nowrap}
.table>:not(caption)>*>*{padding:.8rem 1rem}
.progress{border-radius:999px;background:var(--line-soft)}
.pagination{--bs-pagination-border-radius:var(--r-ctl);--bs-pagination-active-bg:var(--jarvi);--bs-pagination-active-border-color:var(--jarvi);--bs-pagination-color:var(--jarvi)}
.nav-pills{--bs-nav-pills-link-active-bg:var(--kuusi);--bs-nav-pills-border-radius:999px}

/* ---------- 4. Yläpalkki ---------- */
.site-nav{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);padding:0}
.site-nav>.container-xxl{min-height:var(--nav-h);gap:.5rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:800;font-size:1.28rem;letter-spacing:-.04em;line-height:1}
.brand:hover{color:var(--ink)}
.brand-mark{width:36px;height:36px;flex:none;border-radius:11px;background:var(--puolukka);color:#fff;display:grid;place-items:center;font-size:1.45rem}
.brand-mark i{margin-left:2px;line-height:1}
.site-nav .navbar-toggler{border:1px solid var(--line);border-radius:10px;padding:.35rem .55rem;color:var(--ink)}
.site-nav .navbar-toggler:focus{box-shadow:0 0 0 .22rem rgba(var(--jarvi-rgb),.2)}
.site-nav .nav-link{position:relative;display:flex;align-items:center;height:var(--nav-h);padding:0 .95rem;font-weight:650;font-size:.97rem;color:var(--text)}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--ink)}
.site-nav .nav-link.active::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--puolukka)}
.nav-search{position:relative;flex:1 1 260px;max-width:380px;margin-inline:auto}
.nav-search input{width:100%;height:42px;border:1px solid transparent;border-radius:999px;background:var(--chip);padding:0 1rem 0 2.7rem;font-size:.95rem;color:var(--ink);transition:background-color .15s,border-color .15s,box-shadow .15s}
.nav-search input::placeholder{color:var(--ph)}
.nav-search input:focus{outline:0;background:var(--paper);border-color:var(--jarvi);box-shadow:0 0 0 4px rgba(var(--jarvi-rgb),.14)}
.nav-search>i{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);color:var(--ph);pointer-events:none}
.nav-auth{display:flex;align-items:center;gap:.5rem}
.user-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.25rem .8rem .25rem .3rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:650;font-size:.92rem}
.user-btn:hover,.user-btn.show{border-color:#B9CBD3;color:var(--ink)}
.user-btn::after{margin-left:.15rem;color:var(--muted)}
.dropdown-menu .dd-head{padding:.5rem .75rem .6rem;border-bottom:1px solid var(--line-soft);margin-bottom:.35rem}
.dropdown-menu .dd-head b{display:block;color:var(--ink)}
.dropdown-menu .dd-head span{font-size:.85rem;color:var(--muted)}
@media(max-width:991.98px){
  .site-nav .navbar-collapse{padding:.4rem 0 1.1rem}
  .site-nav .nav-link{height:auto;padding:.7rem .25rem}
  .site-nav .nav-link.active::after{left:-.9rem;right:auto;top:.65rem;bottom:.65rem;width:3px;height:auto;border-radius:3px}
  .nav-search{max-width:none;margin:.5rem 0 1rem;flex-basis:auto}
  .nav-auth{padding-top:.2rem}
}

/* Avatar */
.avatar{--av:var(--kuusi);display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--av);color:#fff;font-weight:750;font-size:.88rem;line-height:1;letter-spacing:0}
.avatar-sm{width:28px;height:28px;font-size:.75rem}
.avatar-lg{width:46px;height:46px;font-size:1.1rem}

/* ---------- 5. Alatunniste ---------- */
.site-foot{flex:none;background:var(--kuusi-deep);color:#9FB9C4;padding:52px 0 26px;font-size:.95rem}
.site-foot a{color:#D3E3E9}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-foot .brand{color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(0,1fr));gap:32px}
.foot-grid p{max-width:34ch;margin:.9rem 0 0}
.foot-title{color:#fff;font-weight:750;font-size:.95rem;margin:0 0 .8rem}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem;color:#7F9DAA}
@media(max-width:767.98px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}}

/* ---------- 6. Yleiset osat ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.6rem}
.page-head h1{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);margin:0}
.page-sub{margin:.4rem 0 0;color:var(--muted);font-size:1.02rem}
.sec-head{display:flex;align-items:baseline;gap:1rem;margin:3.4rem 0 1.25rem}
.sec-head h2{margin:0}
.sec-link{margin-left:auto;font-weight:650;white-space:nowrap}
.sec-link:hover{text-decoration:underline;text-underline-offset:4px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--text);font-weight:650;font-size:.9rem;line-height:1.3}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip.on{background:var(--kuusi);border-color:var(--kuusi);color:#fff}
.chip-hot{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:999px;background:var(--lakka);color:var(--kuusi);font-weight:750;font-size:.82rem}
/* Järjestysvalitsin: linkit vierekkäin yhden kehyksen sisällä */
.seg{display:inline-flex;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.seg a{padding:.5rem .95rem;color:var(--text);font-weight:650;font-size:.9rem;line-height:1.3;white-space:nowrap;border-left:1px solid var(--line)}
.seg a:first-child{border-left:0}
.seg a:hover{background:var(--wash);color:var(--ink)}
.seg a.on{background:var(--kuusi);color:#fff}
@media(max-width:575.98px){.seg{display:flex;width:100%}.seg a{flex:1;text-align:center;padding:.5rem .4rem;white-space:normal}}
.meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.86rem;color:var(--muted)}
.meta i{margin-right:.3rem;opacity:.85}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel)}
.panel-pad{padding:1.2rem 1.35rem}
.empty{display:grid;justify-items:center;gap:.4rem;text-align:center;padding:3.2rem 1.25rem;border:1.5px dashed #C3D3DB;border-radius:var(--r-panel);color:var(--muted)}
.empty i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--jarvi-tint);color:var(--jarvi);font-size:1.5rem;margin-bottom:.4rem}
.empty h3{font-size:1.1rem;margin:0}
.empty p{margin:0 0 .6rem;max-width:42ch}
.board{padding:0;overflow:hidden}
.board h3{font-size:1rem;margin:0;padding:1rem 1.2rem;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:.55rem}
.board ol{list-style:none;margin:0;padding:.35rem 0}
.board li a{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.7rem;align-items:center;padding:.55rem 1.2rem;color:var(--text)}
.board li a:hover{background:var(--wash);color:var(--ink)}
.board .no{font-weight:800;color:#B3C5CE;font-variant-numeric:tabular-nums;text-align:center}
.board li:first-child .no{color:var(--puolukka)}
.board .t{font-weight:650;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.board .n{font-size:.84rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.board .thumb-s{width:44px;height:44px;border-radius:9px;object-fit:cover;background:var(--kuusi-soft)}
.board li.has-img a{grid-template-columns:1.5rem 44px 1fr auto}
.board.plain li a{grid-template-columns:1fr auto}
.board.plain li.has-img a{grid-template-columns:44px 1fr auto}
.board .thumb-s{display:block;flex:none}

/* ---------- 7. Video ---------- */
.vgrid{display:grid;gap:30px 22px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:576px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:992px){.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vcard{display:block;color:inherit}
.vcard:hover{color:inherit}
.vthumb{position:relative;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--kuusi-soft);isolation:isolate}
.vthumb>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.vthumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,51,65,.12);pointer-events:none}
.vcard:hover .vthumb>img{transform:scale(1.045)}
.vthumb .vplay,.mat-img .vplay{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--puolukka);color:#fff;display:grid;place-items:center;font-size:1.9rem;opacity:0;transform:scale(.82);transition:opacity .2s,transform .25s var(--ease)}
.vthumb .vplay i,.mat-img .vplay i{margin-left:3px;line-height:1}
.vcard:hover .vplay,.vcard:focus-visible .vplay,.mat:hover .vplay,.mat:focus-visible .vplay{opacity:1;transform:none}
.vchip,.vviews{position:absolute;bottom:10px;padding:.2rem .6rem;border-radius:999px;background:rgba(10,40,51,.8);color:#fff;font-size:.76rem;font-weight:650;line-height:1.4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vchip{left:10px}
.vviews{right:10px}
.vviews i{margin-right:.3rem}
.vthumb.noimg{display:grid;place-items:center;background:linear-gradient(135deg,var(--kuusi-soft),var(--kuusi))}
.vthumb.noimg>i{font-size:2.6rem;color:rgba(255,255,255,.35)}
.vbody{padding:.75rem .1rem 0}
.vtitle{margin:0;font-size:1.04rem;font-weight:700;line-height:1.28;letter-spacing:-.012em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard:hover .vtitle{color:var(--jarvi)}
.vcard .meta{margin-top:.35rem}
.vstrip{display:flex;gap:16px;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
.vstrip .vcard{flex:0 0 190px}
.vstrip .vtitle{font-size:.92rem}

/* Etusivun näyttämö */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:stretch}
@media(max-width:1199.98px){.stage{grid-template-columns:minmax(0,1fr) 330px;gap:20px}}
@media(max-width:991.98px){.stage{grid-template-columns:1fr}}
.stage-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-stage);overflow:hidden;background:var(--kuusi);color:#fff;isolation:isolate}
.stage-frame:hover{color:#fff}
.stage-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.stage-frame:hover>img{transform:scale(1.03)}
.stage-frame.noimg{background:linear-gradient(135deg,var(--kuusi-soft),var(--kuusi))}
.stage-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,26,34,.92) 0%,rgba(7,26,34,.55) 36%,rgba(7,26,34,0) 66%)}
.stage-cap{position:absolute;inset:auto 0 0 0;padding:clamp(1.1rem,3vw,2.2rem);display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.stage-title{margin:0;color:#fff;font-size:clamp(1.5rem,.85rem + 2.5vw,2.9rem);font-weight:800;line-height:1.03;letter-spacing:-.038em;max-width:19ch;text-wrap:balance}
.stage-meta{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.95rem;color:#CFE0E6}
.stage-meta i{margin-right:.35rem}
.stage-go{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1.2rem .4rem .45rem;border-radius:999px;background:#fff;color:var(--kuusi);font-weight:750;font-size:.97rem;transition:background-color .15s}
.stage-go i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--puolukka);color:#fff;font-size:1.3rem}
.stage-go i::before{margin-left:2px}
.stage-frame:hover .stage-go{background:var(--lakka)}
.rank{display:flex;flex-direction:column;padding:1.25rem 1.35rem 1rem;border-radius:var(--r-stage)}
.rank h2{font-size:1.2rem;margin:0 0 .35rem}
.rank-list{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.rank-item{display:grid;grid-template-columns:1.6rem 96px minmax(0,1fr);gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line-soft);color:inherit}
.rank-list li:first-child .rank-item{border-top:0}
.rank-item:hover{color:inherit}
.rank-no{text-align:center;font-size:1.55rem;font-weight:800;letter-spacing:-.05em;color:#B3C5CE;font-variant-numeric:tabular-nums}
.rank-list li:first-child .rank-no{color:var(--puolukka)}
.rank-thumb{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--kuusi-soft)}
.rank-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rank-title{font-weight:700;font-size:.95rem;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank-item:hover .rank-title{color:var(--jarvi)}
.rank-sub{margin-top:.2rem;font-size:.82rem;color:var(--muted)}
.rank-sub i{margin-right:.3rem}
@media(max-width:991.98px){.rank-list{gap:0}.rank-item{grid-template-columns:1.4rem 110px minmax(0,1fr)}}

/* ---------- 8. Kuvat ---------- */
.mosaic{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;grid-auto-flow:dense}
@media(min-width:768px){.mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px}}
@media(min-width:1200px){.mosaic{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:196px}}
.tile{position:relative;display:block;border-radius:var(--r-media);overflow:hidden;background:var(--kuusi-soft);isolation:isolate;color:#fff}
.tile:hover{color:#fff}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover>img{transform:scale(1.05)}
.tile-cap{position:absolute;inset:auto 0 0 0;padding:2.4rem .95rem .8rem;background:linear-gradient(to top,rgba(7,26,34,.82),rgba(7,26,34,0));opacity:0;transform:translateY(6px);transition:opacity .22s,transform .25s var(--ease)}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap,.tile.big .tile-cap{opacity:1;transform:none}
@media(hover:none){.tile-cap{opacity:1;transform:none}}
.tile-cap b{display:block;font-size:.95rem;line-height:1.25;font-weight:700}
.tile.big .tile-cap b{font-size:1.25rem;letter-spacing:-.02em}
.tile-cap span{font-size:.8rem;color:#CFE0E6}
.tile-cap span i{margin-right:.25rem}
.mat{display:flex;flex-direction:column;height:100%;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-media);color:inherit}
.mat:hover{color:inherit;border-color:var(--line-strong)}
.mat-img{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--kuusi-soft)}
.mat-img.vid{aspect-ratio:16/9}
.mat-img.noimg{display:grid;place-items:center;background:linear-gradient(135deg,var(--kuusi-soft),var(--kuusi))}
.mat-img.noimg>i:first-child{font-size:2.4rem;color:rgba(255,255,255,.35)}
.mat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)}
.mat:hover .mat-img img{transform:scale(1.04)}
.mat-body{display:flex;flex-direction:column;gap:.35rem;flex:1;padding:.75rem .45rem .45rem}
.mat-title{margin:0;font-size:1rem;font-weight:700;line-height:1.28;color:var(--ink)}
.mat .btn{margin-top:auto;align-self:flex-start}
.mgrid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.mgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mgrid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.mgrid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.viewer{position:relative;display:inline-block;max-width:100%;border-radius:var(--r-panel);overflow:hidden;background:var(--kuusi-deep);line-height:0}
.viewer img{pointer-events:none;max-width:100%;max-height:78vh;object-fit:contain;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.viewer .shield{position:absolute;inset:0}
.viewer-wrap{text-align:center;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--r-panel) + 6px)}

/* ---------- 9. Blogi ---------- */
.editorial{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px}
@media(max-width:991.98px){.editorial{grid-template-columns:1fr;gap:28px}}
.cover{container-type:inline-size;position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-panel);overflow:hidden;background:var(--kuusi-soft);isolation:isolate}
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cover:hover>img,.lead:hover .cover>img{transform:scale(1.03)}
.cover .vchip{left:14px;bottom:auto;top:14px}
.cover.noimg{display:grid;place-items:end start;padding:1.4rem;background:var(--jarvi);color:#fff}
.cover.noimg .big-q{font-family:var(--ff-read);font-weight:700;font-size:8rem;font-size:min(13rem,38cqw);line-height:.72;color:rgba(255,255,255,.2);margin:0 0 -.35rem -.5rem;user-select:none}
.lead .serif-title{font-family:var(--ff-read);font-weight:700;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);line-height:1.1;letter-spacing:-.02em;margin:1rem 0 .6rem}
.serif-title a{color:var(--ink)}
.serif-title a:hover{color:var(--jarvi)}
.lead .lede{font-family:var(--ff-read);font-size:1.2rem;line-height:1.55;color:var(--text);margin:0 0 .9rem}
.post-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:1.1rem 0;border-top:1px solid var(--line)}
.post-row:first-child{border-top:0;padding-top:0}
.post-row .cover{aspect-ratio:4/3;border-radius:12px}
.post-row .cover .vchip{display:none}
.post-row h3{font-family:var(--ff-read);font-weight:700;font-size:1.22rem;line-height:1.18;letter-spacing:-.01em;margin:0 0 .4rem}
.post-row h3 a{color:var(--ink)}
.post-row h3 a:hover{color:var(--jarvi)}
.pgrid{display:grid;gap:34px 28px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:768px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.pgrid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard .serif-title{font-family:var(--ff-read);font-weight:700;font-size:1.4rem;line-height:1.14;letter-spacing:-.015em;margin:.85rem 0 .45rem}
.pcard .lede{font-family:var(--ff-read);font-size:1.05rem;line-height:1.5;color:var(--text);margin:0 0 .7rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-block;padding:.15rem .65rem;border-radius:999px;background:var(--chip);color:var(--text);font-size:.82rem;font-weight:600}
a.tag:hover{background:#DCE7EC;color:var(--ink)}
.article{max-width:46rem;margin-inline:auto}
.article-title{font-family:var(--ff-read);font-weight:700;font-size:clamp(2.1rem,1.5rem + 2.6vw,3.3rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin:.4rem 0 1rem}
.byline{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.byline .who{line-height:1.25}
.byline .who b{display:block;color:var(--ink)}
.byline .who span{font-size:.88rem;color:var(--muted)}
.article-cover{margin:1.8rem 0 2rem;border-radius:var(--r-panel);overflow:hidden;aspect-ratio:16/9;background:var(--kuusi-soft)}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{font-family:var(--ff-read);font-size:1.22rem;line-height:1.72;color:#22404F;overflow-wrap:anywhere}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 1.3rem}
.post-body h1,.post-body h2,.post-body h3{margin:2.3rem 0 .8rem}
.post-body h2{font-size:1.65rem}
.post-body h3{font-size:1.3rem}
.post-body a{color:var(--jarvi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-body ul,.post-body ol{padding-left:1.5rem;margin:0 0 1.3rem}
.post-body li{margin-bottom:.35rem}
.post-body li::marker{color:var(--puolukka)}
.post-body blockquote{margin:2rem 0;padding:.1rem 0 .1rem 1.3rem;border-left:4px solid var(--puolukka);font-style:italic;font-size:1.38rem;line-height:1.45;color:var(--ink)}
.post-body img{max-width:100%;height:auto;border-radius:var(--r-media);margin:1.5rem 0}
.post-body pre{background:var(--kuusi-deep);color:#D6E6EC;padding:1rem 1.15rem;border-radius:var(--r-media);font-size:.92rem;line-height:1.55;overflow:auto}
.post-body code{font-size:.9em;background:var(--chip);padding:.1em .35em;border-radius:5px}
.post-body pre code{background:none;padding:0}
.post-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}

/* ---------- 10. Katselusivu ja kommentit ---------- */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-panel);overflow:hidden;background:#000}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-title{font-size:clamp(1.35rem,1.05rem + 1vw,1.9rem);font-weight:800;letter-spacing:-.03em;margin:1.1rem 0 .8rem}
.watch-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1rem;margin-bottom:1rem}
.channel{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.channel b{display:block;color:var(--ink);line-height:1.2}
.channel div>span{font-size:.86rem;color:var(--muted)}
.act{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:650;font-size:.93rem;line-height:1.3;transition:background-color .15s,border-color .15s}
.act:hover{border-color:var(--line-strong);background:var(--wash);color:var(--ink)}
.act.on{background:var(--puolukka-tint);border-color:#F2B6C4;color:var(--puolukka-deep)}
.act.on:hover{background:#FADDE4}
.act:disabled{opacity:1;cursor:default}
.desc{padding:1rem 1.25rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel);margin-bottom:2rem}
.desc .meta{margin-bottom:.5rem;font-weight:650;color:var(--ink)}
.desc p{margin:0;white-space:normal}
.comments-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem}
.comments-head h2{font-size:1.25rem;margin:0}
.comments-head span{color:var(--muted);font-weight:650}
.composer{display:flex;gap:.85rem;margin-bottom:1.6rem}
.composer form{flex:1;min-width:0}
.composer textarea{resize:vertical;min-height:84px}
.cmt{display:flex;gap:.85rem;padding:1.05rem 0;border-top:1px solid var(--line-soft)}
.cmt-body{flex:1;min-width:0}
.cmt-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem}
.cmt-name{font-weight:700;color:var(--ink)}
.cmt-time{font-size:.84rem;color:var(--muted)}
.cmt-text{margin:.25rem 0 .55rem;overflow-wrap:anywhere}
.cmt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font-size:.88rem}
.cmt-replies{margin:0 0 0 1.4rem;padding-left:1.1rem;border-left:2px solid var(--line)}
.cmt-replies .cmt:first-child{border-top:0}
.rx{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .55rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:.88rem;line-height:1.5;color:var(--text)}
.rx:hover{border-color:var(--line-strong);background:var(--wash)}
.rx.on{background:var(--jarvi-tint);border-color:var(--tint-line);color:var(--jarvi-deep)}
.rx.empty-rx{border-color:transparent;background:transparent;opacity:.55;padding-inline:.35rem}
.rx.empty-rx:hover{opacity:1;background:var(--wash)}
.linkbtn{border:0;background:none;padding:.1rem .3rem;color:var(--jarvi);font-weight:650;font-size:.88rem}
.linkbtn:hover{color:var(--jarvi-deep);text-decoration:underline;text-underline-offset:3px}
.linkbtn.danger{color:var(--danger)}
.queue-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.queue-head h2{font-size:1.1rem;margin:0}
.queue-head .form-check{margin:0 0 0 auto;font-size:.88rem;color:var(--muted)}
.qitem{display:grid;grid-template-columns:148px minmax(0,1fr);gap:.8rem;padding:.55rem;margin:0 -.55rem;border-radius:14px;color:inherit}
.qitem:hover{background:var(--paper);color:inherit}
.qitem.now{background:var(--paper);box-shadow:inset 3px 0 0 var(--puolukka)}
.qitem .qthumb{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--kuusi-soft);position:relative}
.qitem .qthumb img{width:100%;height:100%;object-fit:cover;display:block}
.qitem .qthumb.noimg{display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:1.4rem;background:linear-gradient(135deg,var(--kuusi-soft),var(--kuusi))}
.qtitle{font-weight:700;font-size:.93rem;line-height:1.27;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.qitem:hover .qtitle{color:var(--jarvi)}
.qlabel{display:inline-block;margin-bottom:.25rem;padding:.08rem .55rem;border-radius:999px;font-size:.74rem;font-weight:700}
.qlabel.now{background:var(--puolukka);color:#fff}
.qlabel.next{background:var(--jarvi-tint);color:var(--jarvi-deep)}

/* ---------- 11. Kirjautuminen ja lomakesivut ---------- */
.auth{display:grid;place-items:center;min-height:calc(100vh - var(--nav-h) - 250px);padding:12px 0}
.auth-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);width:100%;max-width:960px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-stage);overflow:hidden}
.auth-card.narrow{grid-template-columns:1fr;max-width:520px}
.auth-side{position:relative;display:flex;flex-direction:column;gap:1.5rem;padding:2.6rem 2.4rem;background:var(--kuusi);color:#B9CFD8;overflow:hidden;isolation:isolate}
.auth-side h2{color:#fff;font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem);margin:0}
.auth-side::after{content:"\F4F5";font-family:"bootstrap-icons";position:absolute;right:-3.2rem;bottom:-5.5rem;font-size:19rem;line-height:1;color:rgba(255,255,255,.05);z-index:-1}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.perks li{display:flex;gap:.85rem;align-items:flex-start;line-height:1.4}
.perks i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:1.05rem}
.perks b{display:block;color:#fff}
.auth-form{padding:2.8rem 2.6rem}
.auth-form h1{font-size:1.75rem;margin:0 0 .35rem;letter-spacing:-.035em}
.auth-form .lead-sm{color:var(--muted);margin-bottom:1.5rem}
.auth-form .btn-primary{width:100%;padding:.75rem 1rem}
.auth-form .foot-link{margin:1.4rem 0 0;text-align:center;color:var(--muted);font-size:.95rem}
.auth-form .foot-link a{font-weight:650}
.form-error{margin:0 0 1rem;padding:.65rem .9rem;border-radius:12px;background:var(--bs-danger-bg-subtle);color:var(--bs-danger-text-emphasis);font-size:.93rem;border-left:4px solid var(--danger)}
.code-input{text-align:center;font-size:1.75rem;letter-spacing:.5em;font-weight:700;padding-left:.5em}
@media(max-width:767.98px){.auth-card{grid-template-columns:1fr}.auth-side{display:none}.auth-form{padding:2rem 1.4rem}}
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
@media(max-width:991.98px){.contact{grid-template-columns:1fr;gap:24px}}
.contact-info h1{margin:0 0 .8rem}
.contact-info p{color:var(--muted);max-width:40ch}
.contact-info li{display:flex;gap:.8rem;align-items:center;margin-top:1rem;color:var(--ink);font-weight:650}
.contact-info li i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--jarvi-tint);color:var(--jarvi)}
.contact-info ul{list-style:none;padding:0;margin:1.5rem 0 0}
.contact .panel{padding:1.8rem}

/* Haku */
.search-big{position:relative;max-width:46rem}
.search-big input{width:100%;height:58px;border:1px solid var(--line-mid);border-radius:999px;background:var(--paper);padding:0 8.5rem 0 3.4rem;font-size:1.1rem;color:var(--ink)}
.search-big input:focus{outline:0;border-color:var(--jarvi);box-shadow:0 0 0 4px rgba(var(--jarvi-rgb),.14)}
.search-big>i{position:absolute;left:1.4rem;top:50%;transform:translateY(-50%);font-size:1.15rem;color:var(--muted)}
.search-big .btn{position:absolute;right:7px;top:7px;height:44px;border-radius:999px;padding-inline:1.5rem}
.results{max-width:46rem;margin-top:1.6rem;display:grid;gap:.6rem}
.result{display:flex;align-items:center;gap:1rem;padding:.8rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-media);color:var(--ink);font-weight:650}
.result:hover{border-color:var(--line-strong);color:var(--ink);background:var(--wash)}
.result .ri{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;background:var(--jarvi-tint);color:var(--jarvi);font-size:1.1rem}
.result small{display:block;color:var(--muted);font-weight:500;font-size:.84rem}
.result>i.go{margin-left:auto;color:var(--faint)}

/* Kutsu vierailijalle */
.cta{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem;margin-top:3.6rem;padding:2.2rem clamp(1.25rem,4vw,3rem);border-radius:var(--r-stage);background:var(--kuusi);color:#B9CFD8;overflow:hidden;isolation:isolate}
.cta::after{content:"\F4F5";font-family:"bootstrap-icons";position:absolute;right:-1rem;bottom:-4rem;font-size:15rem;line-height:1;color:rgba(255,255,255,.05);z-index:-1}
.cta h2{margin:0;color:#fff;font-size:clamp(1.4rem,1rem + 1.2vw,1.9rem);max-width:24ch}
.cta p{margin:.4rem 0 0;max-width:46ch}
.cta .cta-actions{margin-left:auto;display:flex;gap:.6rem;flex-wrap:wrap}
.cta .btn-outline-light{--bs-btn-border-color:rgba(255,255,255,.35)}

/* Virhe- ja estosivut */
.notice-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--lumi);font-family:var(--ff-ui)}
.notice-page .panel{max-width:460px;padding:2.2rem;text-align:center}
.notice-page i{font-size:2.2rem;color:var(--puolukka)}
.maint-bar{padding:.5rem 1rem;border-bottom:1px solid #F9DDA0;background:var(--lakka-tint);color:var(--lakka-ink);font-size:.9rem;text-align:center}
.maint-bar a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Pieni apu: leikkaa pitkä teksti */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.rank-thumb.noimg{display:grid;place-items:center;color:rgba(255,255,255,.4);font-size:1.2rem;background:linear-gradient(135deg,var(--kuusi-soft),var(--kuusi))}
.cover .cover-ico{display:none}
.post-row .cover.noimg{padding:0;place-items:center}
.post-row .cover.noimg .big-q{display:none}
.post-row .cover.noimg .cover-ico{display:block;font-size:1.8rem;color:rgba(255,255,255,.55)}

.back{display:inline-flex;align-items:center;gap:.3rem;font-weight:650;color:var(--muted)}
.back:hover{color:var(--ink)}

/* Blogilistaus: nosto ja sivutus */
.feature{display:grid;gap:1.3rem 2.2rem;align-items:center;margin-bottom:2.6rem;padding-bottom:2.6rem;border-bottom:1px solid var(--line)}
@media(min-width:768px){.feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.feature .serif-title{margin-top:0}
.feature .lede{font-size:1.12rem}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin-top:2.8rem}
.pager .pg{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.pager a.pg:hover{border-color:var(--line-strong);background:var(--wash);color:var(--ink)}
.pager .pg.on{background:var(--kuusi);border-color:var(--kuusi);color:#fff}
.pager .pg.off{opacity:.4}
.pager .gap{color:var(--muted);padding:0 .15rem}

/* Postaus */
.article-lede{font-family:var(--ff-read);font-size:1.4rem;line-height:1.5;color:var(--muted);margin:0 0 1.6rem}
.byline .meta{margin-top:.1rem}
@media(min-width:1100px){.article-cover{width:min(64rem,calc(100vw - 2rem));position:relative;left:50%;transform:translateX(-50%);aspect-ratio:21/10}}
.tag.warn{background:#FFF1CF;color:#7A4A00}
.post-foot .act{margin-left:auto}
.post-foot .tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tag-link{display:inline-flex;align-items:center;gap:.1rem}

/* Katselusivun ruudukko: videon, jonon ja kommenttien järjestys vaihtuu leveyden mukaan */
.watch-grid{display:grid;gap:0 32px;grid-template-columns:minmax(0,1fr)}
.w-queue{margin:0 0 2rem}
@media(min-width:992px){
 .watch-grid{grid-template-columns:minmax(0,1fr) 392px;grid-template-areas:"main queue" "comments queue";grid-template-rows:auto 1fr}
 .w-main{grid-area:main}.w-queue{grid-area:queue;align-self:start;margin:0}.w-comments{grid-area:comments}
}
.queue-head .form-switch{display:flex;align-items:center;gap:.6rem;padding:0;min-height:0}
.queue-head .form-switch .form-check-input{float:none;margin:0;flex:none}
.queue-head .form-check-label{white-space:nowrap}
.q-toggle{display:none;margin-top:.6rem;width:100%}
@media(max-width:991.98px){
 .queue.has-more:not(.open) .q-more{display:none}
 .queue.has-more .q-toggle{display:block}
 .qitem{grid-template-columns:132px minmax(0,1fr)}
}
.dropdown-item i{color:var(--muted)}

/* Tilakuvake (vahvistus, suljettu rekisteröinti) */
.status-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;font-size:1.8rem}
.status-ico.ok{background:var(--jarvi-tint);color:var(--jarvi)}
.status-ico.warn{background:#FFF1CF;color:#7A4A00}
.form-text{color:var(--muted)}

/* ---------- Videon kesto ---------- */
.vdur{position:absolute;right:8px;bottom:8px;z-index:1;padding:.08rem .45rem;border-radius:6px;background:rgba(10,40,51,.86);color:#fff;font-size:.76rem;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
.vthumb .vdur{top:8px;bottom:auto}
.qitem .qthumb .vdur{right:4px;bottom:4px;font-size:.7rem;padding:0 .35rem}

/* ---------- Profiili ja asetukset ---------- */
.set-title{display:flex;align-items:center;gap:.55rem;margin:0 0 .3rem;font-size:1.12rem;font-weight:800;letter-spacing:-.015em}
.set-title i{color:var(--jarvi)}
.set-sub{margin:0 0 1.15rem;color:var(--muted);font-size:.95rem;max-width:62ch}
.set-stack{display:grid;gap:1.25rem}
.set-stack>.panel{scroll-margin-top:calc(var(--nav-h) + 16px)}
.tagx{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:999px;font-size:.82rem;font-weight:700;line-height:1.35;white-space:nowrap}
.tagx.ok{background:#DDF2E6;color:#1B5A39}
.tagx.wait{background:var(--lakka-tint);color:var(--lakka-ink)}
.tagx.off{background:var(--chip);color:var(--muted)}
.set-alert{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1rem;padding:.7rem .95rem;border-radius:12px;font-size:.93rem;line-height:1.45}
.set-alert i{margin-top:.12rem}
.set-alert.ok{background:#E3F4EA;color:#1B5A39}
.set-alert.warn{background:var(--lakka-tint);color:var(--lakka-ink)}
.opt{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 0;border-top:1px solid var(--line-soft);cursor:pointer}
.opt:first-of-type{border-top:0;padding-top:.2rem}
.opt .form-check-input{flex:none;margin:.2rem 0 0;width:1.15rem;height:1.15rem}
.opt b{display:block;color:var(--ink);font-weight:700}
.opt small{display:block;color:var(--muted);font-size:.9rem;line-height:1.4}
.kv{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:.45rem 1.2rem;margin:0 0 1.2rem;font-size:.97rem}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.who{display:flex;align-items:center;gap:.9rem}
.who .avatar{width:56px;height:56px;font-size:1.4rem}
.who b{display:block;font-size:1.1rem;color:var(--ink);line-height:1.25}
.who span{color:var(--muted);font-size:.92rem}
.side-links{list-style:none;margin:1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line-soft);display:grid;gap:.15rem}
.side-links a{display:flex;align-items:center;gap:.65rem;padding:.5rem .55rem;margin:0 -.55rem;border-radius:10px;color:var(--text);font-weight:600}
.side-links a:hover{background:var(--wash);color:var(--ink)}
.side-links i{color:var(--jarvi);width:1.2rem;text-align:center}
.mine{list-style:none;margin:0;padding:0}
.mine li{display:grid;gap:.15rem;padding:.9rem 0;border-top:1px solid var(--line-soft)}
.mine li:first-child{border-top:0;padding-top:.1rem}
.mine .m-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .65rem;font-size:.9rem;color:var(--muted)}
.mine .m-top a{font-weight:700;color:var(--ink)}
.mine .m-top a:hover{text-decoration:underline;text-underline-offset:3px}
.mine .m-kind{font-weight:700;color:var(--jarvi)}
.mine p{margin:0;color:var(--text);overflow-wrap:anywhere}
.danger-zone{border-color:#EBC5CB}
.danger-zone .set-title i{color:var(--danger)}
.btn-danger-quiet{--bs-btn-color:var(--danger);--bs-btn-border-color:#E3A8B0;--bs-btn-hover-bg:var(--danger);--bs-btn-hover-border-color:var(--danger);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--danger);--bs-btn-active-border-color:var(--danger);--bs-btn-active-color:#fff;--bs-btn-focus-shadow-rgb:180,35,24}
@media(max-width:575.98px){.kv{grid-template-columns:1fr;gap:.1rem}.kv dd{margin-bottom:.6rem}}
fieldset legend.form-label{float:none;width:auto;padding:0;margin-bottom:.35rem;font-size:1rem}
.auth-form fieldset .opt{padding:.5rem 0}
.auth-form fieldset .opt b{font-weight:600}

/* ---------- Katso myöhemmin, katselun jatko, jakaminen, aikaleimat ---------- */
.vprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.45);z-index:1}
.vprog i{display:block;height:100%;background:var(--puolukka)}
.resume-note{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;margin-top:.7rem;padding:.55rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:.93rem}
.resume-note[hidden]{display:none}
.resume-note>i{color:var(--jarvi);font-size:1.1rem}
.resume-note b{font-variant-numeric:tabular-nums}
.resume-note .linkbtn{margin-left:auto;font-size:.93rem}
.player{scroll-margin-top:calc(var(--nav-h) + 12px)}
a.ts{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.share-pop{width:min(23rem,calc(100vw - 2rem));padding:1rem 1.1rem}
.share-h{margin:0 0 .7rem;font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.share-pop .form-label{margin-bottom:.25rem;font-size:.88rem;font-weight:650;color:var(--ink)}
.share-at{display:flex;align-items:center;gap:.7rem;margin:0 0 .85rem}
.share-at .form-control{width:5.4rem;font-variant-numeric:tabular-nums}
.share-pop textarea{font:.74rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:none}
.share-msg{min-height:1.3rem;margin-top:.55rem;font-size:.86rem;color:var(--jarvi-deep)}
.queue-foot{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.4rem .1rem;color:var(--jarvi);font-weight:650;font-size:.92rem}
.queue-foot:hover{color:var(--jarvi-deep);text-decoration:underline;text-underline-offset:3px}
.wl-item .linkbtn{padding-left:0}
#resume-guest[hidden]{display:none}

/* ---------- Kommenttien muokkaus ja ilmoitukset ---------- */
.cmt{scroll-margin-top:calc(var(--nav-h) + 16px)}
.cmt:target{background:var(--jarvi-tint);box-shadow:-.85rem 0 0 var(--jarvi-tint),.85rem 0 0 var(--jarvi-tint);border-radius:6px}
.cmt-edited{font-size:.8rem;color:var(--muted);font-style:italic}
.linkbtn.muted{color:var(--muted);text-decoration:none}
.linkbtn.muted:hover{color:var(--ink);text-decoration:underline}
#cmFlash{margin-bottom:1rem}
.report-quote{margin:0 0 1.2rem;padding:.75rem 1rem;border-left:3px solid var(--line);background:var(--wash);border-radius:0 10px 10px 0;display:grid;gap:.15rem}
.report-quote b{color:var(--ink)}
.report-quote span{color:var(--text);overflow-wrap:anywhere}

.col-lg-9>.sec-head:first-child,#resume-guest>.sec-head:first-child{margin-top:0}
@media(max-width:479.98px){
 .watch-bar .act{padding:.5rem .85rem}
 .watch-bar .act-ico .lbl,.watch-bar .dropdown>.act .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- Kuvan selaus ---------- */
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.vpos{font-size:.9rem;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.viewer-wrap{position:relative}
.vnav{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgba(10,40,51,.72);color:#fff;font-size:1.15rem;line-height:1}
.vnav:hover,.vnav:focus-visible{background:var(--kuusi);color:#fff}
.vnav.prev{left:26px}
.vnav.next{right:26px}
@media(max-width:575.98px){.vnav{width:40px;height:40px;margin-top:-20px}.vnav.prev{left:20px}.vnav.next{right:20px}}

/* ---------- Evästeilmoitus ---------- */
.cookie-note{position:fixed;left:1rem;bottom:1rem;z-index:1040;display:flex;align-items:center;gap:.9rem 1.1rem;width:min(40rem,calc(100% - 2rem));padding:.8rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-media);font-size:.92rem;line-height:1.5}
.cookie-note[hidden]{display:none}
.cookie-note p{margin:0;flex:1 1 auto}
.cookie-note a{color:var(--jarvi);text-decoration:underline;text-underline-offset:3px}
.cookie-note .btn{flex:none}
@media(max-width:575.98px){.cookie-note{left:.6rem;right:.6rem;bottom:.6rem;width:auto;flex-direction:column;align-items:stretch;gap:.6rem}}

/* ---------- Tietosuoja ja muut pitkät tekstisivut ---------- */
.legal{max-width:48rem;margin-inline:auto}
.legal .lead-sm{font-size:1.1rem;color:var(--muted);margin:.4rem 0 0}
.legal h2{font-size:1.3rem;margin:2.6rem 0 .8rem}
.legal p{line-height:1.7;margin:0 0 1rem}
.legal ul{padding-left:1.25rem;margin:0 0 1rem;line-height:1.7}
.legal li{margin:.3rem 0}
.legal a{color:var(--jarvi);text-decoration:underline;text-underline-offset:3px}
.legal-list{border-top:1px solid var(--line);margin:0 0 1.4rem}
.legal-list>div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:.3rem 1.6rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.legal-list h3{font-size:1rem;margin:0;color:var(--ink)}
.legal-list p{margin:0 0 .5rem}
.legal-list p:last-child{margin:0}
.legal-list .why{font-size:.93rem;color:var(--muted)}
.legal-list code{font-size:.9em;padding:.05rem .35rem;border-radius:6px;background:var(--bs-secondary-bg);color:var(--ink)}
.legal-meta{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
@media(max-width:700px){.legal-list>div{grid-template-columns:1fr}}


/* ---------- Versio 11: tagit, seuranta, profiili ja tumma teema ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:.85rem 0 0}
a.tag{text-decoration:none}a.tag:hover{background:var(--hov2)}
.chips.tagrow{align-items:center}
.chips-lab{font-size:.82rem;font-weight:700;color:var(--muted);margin-right:.15rem}
.q-shared{color:var(--jarvi);font-weight:600}
.act-sm{padding:.22rem .7rem;font-size:.85rem;gap:.35rem}
.desc .meta .act-sm{margin-left:.5rem}
.act .lbl{white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prof-head{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.prof-head .grow{flex:1 1 14rem;min-width:0}
.prof-head h1{overflow-wrap:anywhere}
.chips-lab+.chip{margin-left:0}
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:1.05rem;padding:0}
.theme-btn:hover{border-color:var(--line-strong);background:var(--hov)}
.theme-btn .bi-sun-fill{display:none}
html[data-theme=dark] .theme-btn .bi-sun-fill{display:inline-block}
html[data-theme=dark] .theme-btn .bi-moon-stars{display:none}

/* Tumma teema. Valitaan sivun yläreunan painikkeella ja muistetaan selaimen muistissa (vh.theme). Vaalea teema on oletus. */
html[data-theme=dark]{
  color-scheme:dark;
  --lumi:#0B161C; --paper:#122229; --wash:#162A33;
  --kuusi:#0A2833; --kuusi-deep:#071C24; --kuusi-soft:#16475A;
  --ink:#E8F1F5; --text:#C5D5DD; --muted:#95AAB7; --faint:#70889A; --ph:#7C93A0;
  --line:#243B47; --line-soft:#1B303A; --line-strong:#3E5A6A; --line-mid:#2F4A59; --line-btn:#3E5A6A; --tint-line:#1D5566;
  --chip:#1E3541; --hov:#1A303A; --hov2:#213B48; --stripe:#0F1F26;
  --jarvi:#5CC0D5; --jarvi-deep:#8AD3E3; --jarvi-tint:#12333D; --jarvi-rgb:92,192,213;
  --puolukka:#FF6B8D; --puolukka-deep:#FF8FA8; --puolukka-tint:#3A1621;
  --lakka-tint:#38290E; --lakka-ink:#F2C26B;
  --ok:#41C48C; --danger:#FF7B6E;
  --bs-body-color:var(--text); --bs-body-color-rgb:197,213,221; --bs-body-bg:var(--lumi); --bs-body-bg-rgb:11,22,28;
  --bs-emphasis-color:var(--ink); --bs-emphasis-color-rgb:232,241,245; --bs-heading-color:var(--ink);
  --bs-secondary-color:var(--muted); --bs-secondary-color-rgb:149,170,183; --bs-tertiary-color:var(--faint);
  --bs-secondary-bg:var(--chip); --bs-secondary-bg-rgb:30,53,65; --bs-tertiary-bg:var(--wash); --bs-tertiary-bg-rgb:22,42,51;
  --bs-border-color:var(--line); --bs-border-color-translucent:rgba(255,255,255,.12);
  --bs-link-color:var(--jarvi); --bs-link-color-rgb:92,192,213; --bs-link-hover-color:var(--jarvi-deep); --bs-link-hover-color-rgb:138,211,227;
  --bs-primary-text-emphasis:#8AD3E3; --bs-primary-bg-subtle:#12333D; --bs-primary-border-subtle:#1D5566;
  --bs-secondary-text-emphasis:#B7C8D2; --bs-secondary-bg-subtle:#1B303A; --bs-secondary-border-subtle:#2F4A59;
  --bs-success-text-emphasis:#7FDDB3; --bs-success-bg-subtle:#11322A; --bs-success-border-subtle:#1D5C47;
  --bs-warning-text-emphasis:#F2C26B; --bs-warning-bg-subtle:#38290E; --bs-warning-border-subtle:#6A4C14;
  --bs-danger-text-emphasis:#FFA79D; --bs-danger-bg-subtle:#3A1713; --bs-danger-border-subtle:#6C2A22;
  --bs-info-text-emphasis:#8CC4EA; --bs-info-bg-subtle:#12293A; --bs-info-border-subtle:#1E4863;
  --bs-focus-ring-color:rgba(92,192,213,.35);
  --bs-table-bg:transparent; --bs-table-color:var(--text); --bs-table-striped-bg:var(--stripe); --bs-table-hover-bg:var(--hov);
}
html[data-theme=dark] body{background:var(--lumi);color:var(--text)}
html[data-theme=dark] .btn-primary{--bs-btn-bg:#0A6E84;--bs-btn-border-color:#0A6E84;--bs-btn-hover-bg:#0C86A0;--bs-btn-hover-border-color:#0C86A0;--bs-btn-active-bg:#0C86A0;--bs-btn-active-border-color:#0C86A0;--bs-btn-disabled-bg:#0A6E84;--bs-btn-disabled-border-color:#0A6E84}
html[data-theme=dark] .btn-outline-primary{--bs-btn-hover-bg:#0A6E84;--bs-btn-hover-border-color:#0A6E84;--bs-btn-active-bg:#0C86A0;--bs-btn-active-border-color:#0C86A0}
html[data-theme=dark] .btn-secondary,html[data-theme=dark] .btn-dark{--bs-btn-bg:#2A4B5B;--bs-btn-border-color:#2A4B5B;--bs-btn-hover-bg:#355E71;--bs-btn-hover-border-color:#355E71;--bs-btn-active-bg:#355E71}
html[data-theme=dark] .btn-outline-secondary{--bs-btn-color:var(--text);--bs-btn-active-bg:#213B48;--bs-btn-active-color:var(--ink)}
html[data-theme=dark] .btn-danger{--bs-btn-bg:#C23A2C;--bs-btn-border-color:#C23A2C}
html[data-theme=dark] .btn-outline-danger{--bs-btn-border-color:#6C2A22;--bs-btn-hover-bg:#C23A2C;--bs-btn-hover-border-color:#C23A2C}
html[data-theme=dark] .btn-outline-success{--bs-btn-color:#7FDDB3;--bs-btn-border-color:#1D5C47}
html[data-theme=dark] .btn-outline-warning{--bs-btn-color:#F2C26B;--bs-btn-border-color:#6A4C14}
html[data-theme=dark] .form-control::placeholder{color:#7C93A0}
html[data-theme=dark] .form-control,html[data-theme=dark] .form-select{background-color:var(--paper);color:var(--ink);border-color:var(--line-mid)}
html[data-theme=dark] .form-check-input{background-color:var(--paper);border-color:var(--line-strong)}
html[data-theme=dark] .form-check-input:checked{background-color:#0A6E84;border-color:#0A6E84}
html[data-theme=dark] .dropdown-menu{--bs-dropdown-bg:var(--paper);--bs-dropdown-color:var(--text);--bs-dropdown-border-color:var(--line);--bs-dropdown-link-color:var(--text);--bs-dropdown-link-hover-bg:var(--hov);--bs-dropdown-link-hover-color:var(--ink);--bs-dropdown-divider-bg:var(--line)}
html[data-theme=dark] .alert-success{--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-border-color:var(--bs-success-border-subtle)}
html[data-theme=dark] .alert-warning{--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-border-color:var(--bs-warning-border-subtle)}
html[data-theme=dark] .site-nav{background:rgba(11,22,28,.92);border-bottom-color:var(--line)}
html[data-theme=dark] .vthumb,html[data-theme=dark] .mat-img,html[data-theme=dark] .qthumb,html[data-theme=dark] .rank-thumb{background-color:#0E1D24}
html[data-theme=dark] img{opacity:.94}
html[data-theme=dark] .avatar img{opacity:1}

/* Hakuehdotukset */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1040;margin:0;padding:.35rem;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(7,26,34,.16)}
.sugg a{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;padding:.5rem .7rem;border-radius:9px;color:var(--ink);text-decoration:none;font-size:.95rem}
.sugg a:hover,.sugg a.on{background:var(--hov)}
.sugg small{color:var(--muted);font-size:.78rem;flex:none}
.search-big{position:relative}

.col-desc{margin:-.6rem 0 1.1rem;color:var(--muted);max-width:46rem}
.prof-bio{margin:.6rem 0 .3rem;max-width:42rem;color:var(--text)}.prof-link{margin:0 0 .6rem;font-size:.92rem}.prof-link i{margin-right:.25rem;color:var(--muted)}

/* Ilmoituskello */
.bell{position:relative;margin-right:.35rem}
.bell-btn{position:relative}
.bell-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--puolukka);color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center}
.bell-menu{width:min(22rem,92vw);padding:.4rem}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem}
.bell-item{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .6rem;border-radius:9px;color:var(--text);text-decoration:none;font-size:.92rem}
.bell-item:hover{background:var(--hov)}.bell-item small{color:var(--muted)}
.bell-item.new{background:var(--jarvi-tint);color:var(--ink)}
.bell-empty{padding:.7rem .6rem;margin:0;color:var(--muted);font-size:.9rem}
.bell-all{display:block;padding:.55rem .6rem;text-align:center;font-weight:600;text-decoration:none}
.result.new{border-color:var(--jarvi)}
.login-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}.login-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:.5rem 0;border-top:1px solid var(--line-soft);font-size:.92rem}.login-list li:first-child{border-top:0}
.kbd-hint{margin:.5rem 0 0;font-size:.82rem;color:var(--muted)}@media (hover:none){.kbd-hint{display:none}}

/* Lukutila ja tulostus (blogikirjoitus) */
.read-tools{display:flex;gap:.5rem;margin:0 0 1.2rem}
html.reader .site-nav,html.reader .site-foot,html.reader .cookie-note,html.reader .post-foot,html.reader #kommentit,html.reader .article .byline .ms-auto,html.reader .article>.mt-4,html.reader .back,html.reader .maint-bar,html.reader .pgrid,html.reader .sec-head{display:none!important}
html.reader .site-main .container-xxl{max-width:42rem}
html.reader .post-body{font-size:1.22rem;line-height:1.8}
html.reader .read-tools{position:fixed;top:.8rem;right:.8rem;z-index:1050;margin:0}
html.reader .read-tools [data-print]{display:none}
@media print{
 .site-nav,.site-foot,.cookie-note,.read-tools,.post-foot,#kommentit,.article .byline .ms-auto,.back,.maint-bar,.pgrid,.sec-head,.kbd-hint,.sugg{display:none!important}
 body{background:#fff!important;color:#000!important}
 .article-title,.post-body,.article-lede{color:#000!important}
 .post-body{font-size:12pt;line-height:1.6}
 .site-main .container-xxl{max-width:none;padding:0}
 a{color:#000;text-decoration:none}
 .post-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
 img{max-width:100%;page-break-inside:avoid}
}

/* Lisää kotivalikkoon */
.a2hs-link{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.a2hs{margin-top:1rem;padding:1rem 1.1rem;border-radius:14px;background:rgba(255,255,255,.07);color:#D5E3E9;font-size:.92rem}
.a2hs ol{margin:.6rem 0;padding-left:1.2rem}.a2hs p{margin:.6rem 0}.a2hs .btn-link{color:#fff;padding-left:0}
/* Videon lisätoiminnot: AirPlay, lähetys, pikkuikkuna ja äänitila */
.vtools{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 0}
.vtools .act[hidden]{display:none}
.player.audio-mode::after{content:"Ääni toistuu. Voit lukita näytön tai vaihtaa sovellusta.";position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;text-align:center;background:rgba(7,26,34,.78);color:#fff;font-weight:600;pointer-events:none;border-radius:inherit}
.player{position:relative}
@media (display-mode: standalone){body{padding-bottom:env(safe-area-inset-bottom)}.a2hs-link{display:none}}