/* Kuvapalvelut — julkisten sivujen vaalea ilme (§19.49). Värit ja fontti nykyiseltä kuvapalvelut.com-sivustolta:
   sininen #446084, korostus #C05530, Raleway. Photobooth-sivut (tummat) eivät lataa tätä. */
:root {
  --kp-primary: #446084;
  --kp-primary-dark: #37506f;
  --kp-accent: #C05530;
  --kp-text: #333333;
  --kp-muted: #6c757d;
  --kp-border: #e3e6ea;
  --kp-footer: #4d4d4d;
  --bs-primary: #446084;
  --bs-primary-rgb: 68, 96, 132;
  --bs-link-color: #446084;
  --bs-link-color-rgb: 68, 96, 132;
  --bs-link-hover-color: #37506f;
  --bs-body-font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #333333;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .kp-site * { transition: none !important; } }
body.kp-site { font-family: var(--bs-body-font-family); color: var(--kp-text); background: #fff; min-height: 100vh; display: flex; flex-direction: column; }
.kp-main { flex: 1 0 auto; }

/* Yläpalkki + kieli */
/* §19.55 (28.9.2026): yksi sininen palkki — logo, valikko, FI | EN. Yläpalkin teksti poistettu. */
/* §19.107: Profiili yläpalkin oikeassa yläkulmassa — pyöreä profiilikuva + teksti (kapealla pelkkä kuva) */
.kp-account { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .02em; white-space: nowrap; padding: .15rem .55rem .15rem .15rem; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
.kp-account:hover, .kp-account:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
.kp-account:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kp-account.active { color: #fff; }
.kp-account-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.6); color: #fff; }
.kp-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-account.active .kp-account-avatar { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 575.98px) { .kp-account { padding: .15rem; } }
/* §19.115: Profiili-alasvetovalikko (Profiili, Oma tili, Omat laitteet, Kirjaudu ulos) */
button.kp-account { border: 0; background: transparent; cursor: pointer; }
button.kp-account[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.12); }
.kp-account .kp-account-name { display: inline-block; max-width: 180px; text-transform: none; letter-spacing: 0; font-size: .82rem; } /* §19.120: nimi, ei isoja kirjaimia */
.kp-account.dropdown-toggle::after { margin-left: .1rem; vertical-align: .15em; border-top-width: .32em; opacity: .85; }
.kp-account-dropdown { min-width: 15rem; max-width: min(20rem, calc(100vw - 1.5rem)); padding: .35rem 0; border: 1px solid var(--kp-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 30, 55, .18); font-size: .9rem; margin-top: .5rem !important; }
.kp-account-who { display: flex; flex-direction: column; padding: .45rem 1rem .35rem; min-width: 0; }
.kp-account-who-name { font-weight: 600; color: var(--kp-text); }
.kp-account-who-mail { font-size: .8rem; color: var(--kp-muted); }
.kp-account-dropdown .dropdown-item { padding: .45rem 1rem; color: var(--kp-text); }
.kp-account-dropdown .dropdown-item:hover, .kp-account-dropdown .dropdown-item:focus-visible { background: #eef2f7; color: var(--kp-text); }
.kp-account-dropdown .dropdown-item.active, .kp-account-dropdown .dropdown-item:active { background: var(--kp-primary); color: #fff; }
.kp-account-dropdown .dropdown-item:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: -2px; }
/* Navbarin sisällä Bootstrap ei käytä Popperia (staattinen sijoittelu) → kapealla näytöllä valikko ankkuroidaan navbarin
   oikeaan reunaan (.navbar on position: relative), muuten se jatkuisi painikkeen oikeasta reunasta vasemmalle ruudun yli. */
@media (max-width: 575.98px) {
  .kp-account-menu { position: static; }
  .kp-account-dropdown { right: 0 !important; left: auto !important; top: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kp-account { transition: none; } }
/* §19.116: mobiilin hampurilaisvalikon Profiili-alavalikko (Oma tili, Omat laitteet) — sisennetty, sininen tausta */
.kp-header .kp-nav-submenu { position: static; float: none; border: 0; border-left: 2px solid rgba(255,255,255,.35); border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 .25rem; margin: 0 0 .25rem .75rem; }
.kp-header .kp-nav-submenu .dropdown-item { color: rgba(255,255,255,.85); padding: .45rem 1rem; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.kp-header .kp-nav-submenu .dropdown-item:hover, .kp-header .kp-nav-submenu .dropdown-item:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.kp-header .kp-nav-submenu .dropdown-item.active { background: rgba(255,255,255,.18); color: #fff; }
.kp-account-mobile { padding: .15rem; }
/* §19.117: Profiili-kohta jaettuna — linkki + erillinen nuolipainike (44×44 px kosketusalue), alavalikko omalle rivilleen */
.kp-header .kp-nav-split { display: flex; flex-wrap: wrap; align-items: center; }
.kp-header .kp-nav-split > .nav-link:first-child { flex: 0 1 auto; }
.kp-header .kp-nav-split-toggle { background: transparent; border: 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-left: .15rem; border-radius: 6px; }
.kp-header .kp-nav-split-toggle::after { margin-left: 0; vertical-align: 0; border-top-width: .42em; border-left-width: .36em; border-right-width: .36em; }
.kp-header .kp-nav-split-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.kp-header .kp-nav-split-toggle:hover, .kp-header .kp-nav-split-toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; }
.kp-header .kp-nav-split-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.kp-header .kp-nav-split > .kp-nav-submenu { flex-basis: 100%; }
@media (prefers-reduced-motion: no-preference) { .kp-header .kp-nav-split-toggle::after { transition: transform .15s ease; } }
/* §19.126: jaettu kohta myös leveällä näytöllä (Luo koodeja → QR-flyerit): alavalikko kelluu kohdan alla samassa vaaleassa
   tyylissä kuin profiilivalikko; nuoli kapeampi (hiiritarkkuus). Kapealla sama sisennetty alavalikko kuin Profiililla. */
@media (min-width: 1200px) {
  .kp-navgrid-xl .kp-nav-split-float { flex-wrap: nowrap; }
  .kp-navgrid-xl .kp-nav-split-float > .nav-link:first-child { padding-right: .1rem; }
  .kp-navgrid-xl .kp-nav-split-float > .kp-nav-split-toggle { min-width: 22px; min-height: 30px; margin-left: 0; padding: 0 .2rem; }
  .kp-navgrid-xl .kp-nav-split-float > .kp-nav-submenu { position: absolute; top: 100%; left: 0; min-width: 12rem; margin: .35rem 0 0; padding: .35rem 0; background: #fff; border: 1px solid var(--kp-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 30, 55, .18); }
  .kp-navgrid-xl .kp-nav-split-float > .kp-nav-submenu .dropdown-item { color: var(--kp-text); text-transform: none; font-size: .9rem; font-weight: 400; letter-spacing: normal; padding: .45rem 1rem; }
  .kp-navgrid-xl .kp-nav-split-float > .kp-nav-submenu .dropdown-item:hover, .kp-navgrid-xl .kp-nav-split-float > .kp-nav-submenu .dropdown-item:focus-visible { background: #eef2f7; color: var(--kp-text); }
  .kp-navgrid-xl .kp-nav-split-float > .kp-nav-submenu .dropdown-item.active { background: var(--kp-primary); color: #fff; }
  .kp-navgrid-xl .kp-nav-split-float > .kp-nav-submenu .dropdown-item:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: -2px; }
}
@media (min-width: 1400px) {
  .kp-navgrid-xxl .kp-nav-split-float { flex-wrap: nowrap; }
  .kp-navgrid-xxl .kp-nav-split-float > .nav-link:first-child { padding-right: .1rem; }
  .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-split-toggle { min-width: 22px; min-height: 30px; margin-left: 0; padding: 0 .2rem; }
  .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-submenu { position: absolute; top: 100%; left: 0; min-width: 12rem; margin: .35rem 0 0; padding: .35rem 0; background: #fff; border: 1px solid var(--kp-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 30, 55, .18); }
  .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-submenu .dropdown-item { color: var(--kp-text); text-transform: none; font-size: .9rem; font-weight: 400; letter-spacing: normal; padding: .45rem 1rem; }
  .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-submenu .dropdown-item:hover, .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-submenu .dropdown-item:focus-visible { background: #eef2f7; color: var(--kp-text); }
  .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-submenu .dropdown-item.active { background: var(--kp-primary); color: #fff; }
  .kp-navgrid-xxl .kp-nav-split-float > .kp-nav-submenu .dropdown-item:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: -2px; }
}
.kp-lang { font-size: .78rem; letter-spacing: .06em; white-space: nowrap; color: rgba(255,255,255,.5); }
.kp-lang a { color: rgba(255,255,255,.78); text-decoration: none; padding: 0 .3rem; font-weight: 600; transition: color .2s ease; }
.kp-lang a:hover, .kp-lang a.active { color: #fff; }
.kp-lang a.active { text-decoration: underline; text-underline-offset: 4px; }
.kp-header { background: var(--kp-primary); padding: .65rem 0; }
/* §19.138: desktopilla yläpalkki (valikko) aina näkyvissä kaikilla sivuilla. Sticky pysyy sivun virrassa → sisältö ei jää alle.
   WordPressin hallintapalkin alle, jos se näkyy. --kp-header-h (header.php) = palkin korkeus muiden sticky-elementtien ja
   ankkurihyppyjen käyttöön. Mobiilissa ennallaan (avattu valikko on korkea). */
@media (min-width: 992px) {
  .kp-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 1030; }
  html { scroll-padding-top: calc(var(--kp-header-h, 56px) + var(--wp-admin--admin-bar--height, 0px) + .75rem); }
}
.kp-header .kp-brand img { height: 26px; width: auto; display: block; }
.kp-header-inner { padding-left: .75rem; padding-right: .75rem; } /* §19.121: koko leveys, sama 12 px:n reunamarginaali kuin galleriasivulla */
/* §19.122: valikko sivun keskelle, logo ja kieli + profiili reunoille. 1fr-sarakkeet ovat yhtä leveät, joten keskimmäinen
   sarake on tarkalleen keskellä; minmax(max-content, …) estää päällekkäisyyden, jos tila loppuu (keskitys joustaa). */
@media (min-width: 1200px) {
  .kp-header .navbar.kp-navgrid-xl { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 1rem; }
  .kp-navgrid-xl > .kp-brand { grid-column: 1; grid-row: 1; justify-self: start; margin-right: 0; }
  .kp-navgrid-xl > #kpNav { grid-column: 2; grid-row: 1; }
  .kp-navgrid-xl > .kp-header-end { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0 !important; }
}
@media (min-width: 1400px) {
  .kp-header .navbar.kp-navgrid-xxl { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 1rem; }
  .kp-navgrid-xxl > .kp-brand { grid-column: 1; grid-row: 1; justify-self: start; margin-right: 0; }
  .kp-navgrid-xxl > #kpNav { grid-column: 2; grid-row: 1; }
  .kp-navgrid-xxl > .kp-header-end { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0 !important; }
}
.kp-header .nav-link { color: rgba(255,255,255,.82); font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .02em; padding: .5rem .45rem; white-space: nowrap; transition: color .2s ease; }
.kp-header .nav-link:hover, .kp-header .nav-link.active { color: #fff; }
.kp-header .nav-link.active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.kp-header .navbar-toggler { border-color: rgba(255,255,255,.45); padding: .25rem .5rem; }
.kp-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.35); }
.kp-header .btn-outline-light { font-weight: 600; }
.kp-site .kp-header a:focus-visible { outline-color: #fff; }

/* Napit ja lomakkeet (Bootstrap-ohitukset) */
.kp-site .btn-primary { --bs-btn-bg: var(--kp-primary); --bs-btn-border-color: var(--kp-primary); --bs-btn-hover-bg: var(--kp-primary-dark); --bs-btn-hover-border-color: var(--kp-primary-dark); --bs-btn-active-bg: var(--kp-primary-dark); --bs-btn-active-border-color: var(--kp-primary-dark); font-weight: 600; letter-spacing: .03em; transition: background-color .2s ease, border-color .2s ease; }
.kp-site .btn-outline-primary { --bs-btn-color: var(--kp-primary); --bs-btn-border-color: var(--kp-primary); --bs-btn-hover-bg: var(--kp-primary); --bs-btn-hover-border-color: var(--kp-primary); --bs-btn-active-bg: var(--kp-primary-dark); font-weight: 600; }
.kp-site .form-control:focus, .kp-site .form-check-input:focus { border-color: var(--kp-primary); box-shadow: 0 0 0 .25rem rgba(68,96,132,.25); }
.kp-site .form-check-input:checked { background-color: var(--kp-primary); border-color: var(--kp-primary); }
.kp-site a:focus-visible, .kp-site button:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }

/* Etusivu */
.kp-narrow { max-width: 1000px; }
.kp-hero { padding: 3.5rem 0 2rem; }
.kp-hero-title { font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--kp-text); margin-bottom: 1rem; }
.kp-hero-lead { font-size: 1.1rem; color: var(--kp-muted); max-width: 640px; margin: 0 auto; }
.kp-card { background: #fff; border: 1px solid var(--kp-border); border-radius: 12px; padding: 1.75rem; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.kp-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.kp-code-form .input-group .form-control { text-transform: uppercase; letter-spacing: .08em; }
.kp-code-form .input-group .form-control::placeholder { text-transform: none; letter-spacing: normal; }
.kp-features { padding: 3rem 0 4rem; }
.kp-features h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kp-primary); margin-bottom: .5rem; }
.kp-features p { color: var(--kp-muted); }

/* Kirjautumislomake (login-form.php vaalea variantti) */
.pbLoginForm.kp-light .form-label { color: var(--kp-muted) !important; }
.pbLoginForm.kp-light .form-control { background: #fff; color: var(--kp-text); border-color: #ced4da; }
.pbLoginForm.kp-light a { color: var(--kp-primary) !important; }
.pbLoginForm.kp-light .btn-primary { --bs-btn-bg: var(--kp-primary); --bs-btn-border-color: var(--kp-primary); --bs-btn-hover-bg: var(--kp-primary-dark); --bs-btn-hover-border-color: var(--kp-primary-dark); }

/* Tekstisivut ja WooCommerce */
/* §19.118: vain pystysuunta — lyhenne "padding: 2.5rem 0 4rem" nollasi .containerin vaakareunuksen, jolloin Oma tili-,
   tietosuoja- ym. sivujen tekstit olivat kiinni ruudun reunoissa mobiilissa. */
.kp-page { padding-top: 2.5rem; padding-bottom: 4rem; max-width: 1000px; }
@media (max-width: 575.98px) { .kp-page { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1.75rem; } }
.kp-page-title { font-weight: 300; font-size: 2rem; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-text); overflow-wrap: break-word; }
.kp-page-content h2, .kp-page-content h3 { font-weight: 600; margin-top: 1.5rem; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit { background: var(--kp-primary) !important; color: #fff !important; border-radius: .375rem; font-weight: 600; padding: .6rem 1.2rem; border: 0; transition: background-color .2s ease; }
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--kp-primary-dark) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-Input, .woocommerce .input-text { border: 1px solid #ced4da; border-radius: .375rem; padding: .55rem .75rem; width: 100%; font-family: inherit; }
.woocommerce form .form-row input.input-text:focus { border-color: var(--kp-primary); outline: 2px solid rgba(68,96,132,.25); }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password, .woocommerce-form-login, .woocommerce-form-register { border: 1px solid var(--kp-border) !important; border-radius: 12px !important; padding: 1.75rem !important; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 1.5rem; border: 1px solid var(--kp-border); border-radius: 12px; overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: .7rem 1rem; color: var(--kp-text); text-decoration: none; border-bottom: 1px solid var(--kp-border); }
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { padding: 0 !important; } /* §19.118: selaimen/lisäosan ul-sisennys (22 px) teki kehyksen sisään tyhjän vasemman kaistan */
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: #f4f6f9; color: var(--kp-primary); font-weight: 600; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--kp-primary); border-radius: .5rem; }
.woocommerce-error { border-top-color: #b02a37; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; font-weight: 600; }
.woocommerce ul.products li.product .price { color: var(--kp-primary); font-weight: 600; }
.woocommerce span.onsale { background: var(--kp-accent); }

/* Alatunniste — §19.81: linkit (Tietosuoja/Asiakasgalleria/Oma tili) poistettu, pelkkä keskitetty copyright */
.kp-footer { background: var(--kp-footer); color: #e6e6e6; padding: 1.5rem 0; font-size: .9rem; margin-top: auto; }
@media (max-width: 767.98px) { .kp-hero { padding: 2.25rem 0 1.25rem; } .kp-card { padding: 1.25rem; } }


/* §19.52 (28.9.2026): Profiilisivu vaalealla teemalla. script-account.js renderöi rivit galleries-sivun tummille
   luokille (btn-outline-light, bg-dark, text-white) → käännetään tässä vaalealle ilman JS-muutoksia. */
.kp-profile-main { max-width: 880px; }
.kp-profile .kp-card { padding: 1.5rem; margin-bottom: 1.5rem; }
.kp-profile .kp-profile-h2 { font-size: .9rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kp-primary); margin: 0; }
.kp-profile .kp-profile-name { color: var(--kp-text); }
.kp-profile .pbAvatar { width: 80px; height: 80px; border-radius: 50%; background: #eef1f5; display: flex; align-items: center; justify-content: center; color: var(--kp-primary); flex-shrink: 0; overflow: hidden; border: 1px solid #cfd6df; } /* §19.105: 64 → 80 px profiilikuvalle; §19.107: ohut reunaviiva */
.kp-profile .kp-profile-email { color: var(--kp-text); } /* §19.108 */
/* §19.109: kirjautumistiedot (käyttäjätunnus, sähköposti) */
.kp-profile .kp-ident-row { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; }
.kp-profile .kp-ident-label { flex: 0 0 9rem; font-size: .875rem; color: var(--kp-muted); }
.kp-profile .kp-ident-value { flex: 1 1 auto; min-width: 0; color: var(--kp-text); }
.kp-profile .kp-ident-row > .btn { flex: 0 0 auto; }
.kp-profile .kp-ident-form { max-width: 28rem; margin: .75rem 0 .25rem 9.75rem; }
.kp-profile .kp-ident-pending { margin: .35rem 0 0 9.75rem; padding: .5rem .75rem; border-left: 3px solid #d9822b; background: #fdf6ee; color: var(--kp-text); }
@media (max-width: 575.98px) {
  .kp-profile .kp-ident-row { flex-wrap: wrap; row-gap: .15rem; }
  .kp-profile .kp-ident-label { flex-basis: 100%; }
  .kp-profile .kp-ident-form, .kp-profile .kp-ident-pending { margin-left: 0; }
}
.kp-profile .pbAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-profile .pbAvatar img[hidden] { display: none; }
.kp-profile .pbRoleBadge, .kp-profile .userRoleBadge { font-size: .7rem; letter-spacing: .02em; text-transform: uppercase; }
.kp-profile #galleryDevicesList, .kp-profile #galleryUsersList { min-height: 48px; } /* tila asynkroniselle sisällölle */
.kp-profile .deviceRow, .kp-profile .userRow { border-bottom: 1px solid var(--kp-border); }
.kp-profile .deviceRow:last-child, .kp-profile .userRow:last-child { border-bottom: 0; }
.kp-profile .kp-urow-head > .deviceDot.deviceDot { margin-right: 0; }
/* §19.164: käyttäjäkortti (Tilaukset) — nimetyt kentät allekkain: nimike | arvo | toiminnot. */
.kp-profile .kp-urow-meta, .kp-profile .kp-urow-fields { padding-left: calc(10px + .5rem); }   /* tasattu nimen kanssa (pisteen ohi) */
.kp-profile .kp-urow-fields { padding-left: 0; }
/* §19.166: ryhmät — Kuvapalvelut-tilaus ja Photoshop-liitännäinen omina laatikoinaan */
.kp-profile .kp-urow-group { margin-left: calc(10px + .5rem); background: #f8f9fb; border-color: var(--kp-border) !important; }
.kp-profile .kp-urow-group-title { color: var(--kp-primary) !important; letter-spacing: .04em; font-size: .75rem; }
.kp-profile .kp-urow-plugin { background: #f6f4fb; }
.kp-profile .kp-urow-account { padding-left: calc(10px + .5rem); }
/* liitännäisrivi ryhmän sisällä: ryhmän otsikko korvaa rivin oman nimikkeen */
.kp-profile .kp-urow-plugin-slot > .pluginLicLine { padding-left: 0; font-size: inherit; color: var(--kp-text) !important; }
.kp-profile .kp-urow-plugin-slot > .pluginLicLine > span.text-secondary:first-child { display: none; }
.kp-profile .kp-urow-label { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--kp-muted) !important; }
.kp-profile .kp-urow-value { color: var(--kp-text); }
.kp-profile .kp-urow-actions .btn-link { font-size: .8125rem; }
/* Photoshop-liitännäisen rivi (script-plugin-license.js lisää sen .userRowStatus-elementin eteen): sama kenttäasettelu
   pelkällä CSS:llä — ensimmäinen span on nimike, loput riippuvalla sisennyksellä arvosarakkeessa. */
.kp-profile .kp-urow-fields > .pluginLicLine { font-size: inherit; display: flow-root; padding-left: calc(12rem + 1rem); color: var(--kp-text) !important; }
.kp-profile .kp-urow-fields > .pluginLicLine > span.text-secondary:first-child { float: left; width: 12rem; margin-left: calc(-12rem - 1rem); font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--kp-muted) !important; line-height: 1.6; }
.kp-profile .kp-urow-fields > .userRowStatus:empty { display: none; }
@media (max-width: 575.98px) {
  .kp-profile .kp-urow-field > .kp-urow-label { flex-basis: 100% !important; }
  .kp-profile .kp-urow-fields > .pluginLicLine { padding-left: 0; }
  .kp-profile .kp-urow-fields > .pluginLicLine > span.text-secondary:first-child { float: none; display: block; width: auto; margin-left: 0; }
  .kp-profile .kp-urow-buttons { width: 100%; padding-left: calc(10px + .5rem); }
  .kp-profile .kp-urow-group { margin-left: 0; }
}
.kp-profile .deviceDot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.kp-profile .deviceDot.online { background: #2e9e5b; }
.kp-profile .deviceDot.recent { background: #d9822b; }
.kp-profile .deviceDot.offline { background: #adb5bd; }
.kp-profile .fontNum { font-family: 'Arvo', Menlo, monospace; }
.kp-profile .btn-outline-light { --bs-btn-color: var(--kp-primary); --bs-btn-border-color: var(--kp-primary); --bs-btn-hover-bg: var(--kp-primary); --bs-btn-hover-border-color: var(--kp-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--kp-primary-dark); --bs-btn-active-border-color: var(--kp-primary-dark); --bs-btn-active-color: #fff; font-weight: 600; }
.kp-profile .form-control.bg-dark { background: #fff !important; color: var(--kp-text) !important; border-color: #ced4da !important; }
.kp-profile .text-white { color: var(--kp-text) !important; }
.kp-profile .text-warning { color: #8a5a00 !important; }   /* 4.5:1 valkoisella */
.kp-profile .text-success { color: #1e7e4a !important; }
.kp-profile .badge.bg-dark { background: #f4f6f9 !important; color: var(--kp-muted) !important; border: 1px solid var(--kp-border) !important; }
.kp-profile .btn-link { color: var(--kp-primary); }
.kp-profile .userRow .btn, .kp-profile .deviceRow .btn, .kp-profile .kp-card .btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
@media (prefers-reduced-motion: reduce) { .kp-profile .btn { transition: none; } }
@media (max-width: 767.98px) { .kp-profile .kp-card { padding: 1.1rem; } }
/* §19.52: kapealla näytöllä käyttäjä-/laiterivin napit omalle rivilleen tekstin alle (teksti ei purista 3 nappia väliin) */
@media (max-width: 767.98px) {
  .kp-profile .userRow, .kp-profile .deviceRow { flex-wrap: wrap; row-gap: .5rem; }
  .kp-profile .userRow > .flex-grow-1, .kp-profile .deviceRow > .flex-grow-1 { flex: 1 1 calc(100% - 18px); margin-right: 0 !important; }
  .kp-profile .userRow > .btn, .kp-profile .deviceRow > .btn { flex: 0 0 auto; }
  .kp-profile .userRow > .btn:first-of-type, .kp-profile .deviceRow > .btn:first-of-type { margin-left: 18px; }
  .kp-profile .userRow .text-truncate:first-child { white-space: normal; }
}


/* §19.54 (28.9.2026): työkalusivut (Tilastot, Omat laitteet, Ilmoitukset, Luo koodeja) + valikon ilmoitusmerkki */
.kp-nav-badge { display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .35rem; border-radius: 999px; background: var(--kp-accent); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.25rem; text-align: center; vertical-align: text-bottom; }
.kp-nav-badge[hidden] { display: none; }
/* §19.119: merkki ei saa kasvattaa valikon rivilaatikkoa — 20 px:n rivikorkeus + text-bottom painoi Ilmoitukset-tekstin
   3,5 px muita alemmas (mobiilissa rivi 5 px korkeampi). Sama korkeus kuin tekstirivillä, keskitys pystysuunnassa. */
.kp-header .nav-link .kp-nav-badge { line-height: 1.1rem; min-width: 1.1rem; padding: 0 .3rem; vertical-align: middle; margin-top: -.25rem; margin-bottom: -.1rem; }
/* §19.99: määrä sivun otsikon vieressä (Tukipyynnöt) — leipätekstin fontti, ei isoja kirjaimia, ei rivity */
.kp-title-count { display: inline-block; font-family: var(--bs-body-font-family); text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; line-height: 1.6; padding: .1rem .6rem; border-radius: 999px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); vertical-align: middle; white-space: nowrap; }
.kp-title-count.is-new { background: var(--kp-accent); color: #fff; }
.kp-title-count[hidden] { display: none; }
.kp-tools-main { max-width: 1100px; }
.kp-tools .kp-card { padding: 1.5rem; }
.kp-tools .kp-tools-h2 { font-size: .9rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kp-primary); margin: 0 0 .75rem; }
.kp-tools .table { --bs-table-color: var(--kp-text); font-size: .92rem; }
.kp-tools .table > :not(caption) > * > * { padding: .4rem .5rem; }
.kp-tools .kp-ellipsis { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.kp-tools .fontNum { font-family: 'Arvo', Menlo, monospace; }
.kp-tools #kpNotifications img { height: 3rem; border-radius: .25rem; }
.kp-tools #kpNotifications .btn-primary { --bs-btn-bg: var(--kp-primary); --bs-btn-border-color: var(--kp-primary); --bs-btn-hover-bg: var(--kp-primary-dark); --bs-btn-hover-border-color: var(--kp-primary-dark); }
.kp-tools .btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
@media (prefers-reduced-motion: reduce) { .kp-tools .btn { transition: none; } }
@media (max-width: 767.98px) { .kp-tools .kp-card { padding: 1.1rem; } .kp-tools .kp-ellipsis { max-width: 140px; } }
/* 4.10.2026: Tilastot-sivun välilehdet (Galleriat / Toimitusaika). Alaviivaosoitin (ei kansiovälilehteä), jotta
   kapealla näytöllä vaakavieritys ei leikkaa aktiivisen välilehden reunaa; fokusrengas sisäpuolella samasta syystä. */
.kp-tools .kp-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--kp-border); scrollbar-width: thin; }
.kp-tools .kp-tabs .nav-link { white-space: nowrap; min-height: 44px; padding: .6rem 1.1rem; color: var(--kp-muted); font-weight: 600; letter-spacing: .03em; border-radius: 8px 8px 0 0; cursor: pointer; transition: color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.kp-tools .kp-tabs .nav-link:hover { color: var(--kp-primary); background: #f4f6f9; }
.kp-tools .kp-tabs .nav-link.active { color: var(--kp-primary); box-shadow: inset 0 -3px 0 var(--kp-primary); }
.kp-tools .kp-tabs .nav-link:focus-visible { outline: 2px solid var(--kp-primary) !important; outline-offset: -2px; } /* !important: style.min.css (WP) asettaa button:focus { outline: 0 !important } */
.kp-tools [role="tabpanel"]:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .kp-tools .kp-tabs .nav-link { transition: none; } }
/* §19.80: Ilmoitukset-sivu ei mahtunut mobiiliruudulle — taulukko korvattu flex-riveillä samalla mallilla
   kuin Omat laitteet -sivun .deviceRow/.userRow (§19.52): napit kääntyvät omalle rivilleen kapealla näytöllä
   sen sijaan että pakottavat koko sivun vaakavieritykseen. */
.kp-tools .notifRow { border-bottom: 1px solid var(--kp-border); }
.kp-tools .notifRow:last-child { border-bottom: 0; }
.kp-tools .notifRowActions { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .kp-tools .notifRow { flex-wrap: wrap; row-gap: .5rem; }
  .kp-tools .notifRow > .flex-grow-1 { flex: 1 1 100%; margin-right: 0 !important; }
}
/* §19.55: 1200–1399 px — 10 kohtaa + FI | EN mahtuvat riville (1200 px:ssä EN vuoti 24 px yli) */
@media (min-width: 1200px) and (max-width: 1399.98px) { .kp-header .navbar-expand-xl .nav-link { font-size: .63rem; padding: .5rem .16rem; letter-spacing: 0; } .kp-header .navbar-expand-xl .kp-brand { margin-right: .25rem; } .kp-header .navbar-expand-xl .kp-brand img { height: 20px; } .kp-header .navbar-expand-xl .kp-lang { font-size: .68rem; } .kp-header .navbar-expand-xl .order-xl-last { margin-left: .5rem !important; } } /* §19.59/§19.62: 11–12 kohtaa; §19.99: vain vaakasuora xl-valikko — ylläpitäjän xxl-valikko on tällä leveydellä hampurilainen */
/* §19.99: ylläpitäjän 13 kohtaa vaakasuorana ≥ 1400 px (container 1320 px) — mitattu headless: .74rem vuoti 99–152 px, .66rem/.24rem mahtuu vaikka molemmissa merkeissä kaksi numeroa */
@media (min-width: 1400px) { .kp-header .navbar-expand-xxl .nav-link { font-size: .66rem; padding: .5rem .24rem; letter-spacing: 0; } .kp-header .navbar-expand-xxl .kp-brand { margin-right: .5rem; } }

/* §19.56: tekstisivut (tietosuojakäytäntö) — luettava leipäteksti */
.kp-page-content { max-width: 800px; font-size: 1.02rem; line-height: 1.75; }
.kp-page-content h2 { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--kp-primary); margin: 2rem 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--kp-border); }
.kp-page-content p, .kp-page-content ul { margin-bottom: 1rem; }
.kp-page-content ul { padding-left: 1.4rem; }
.kp-page-content li { margin-bottom: .3rem; }
.kp-page-content a { color: var(--kp-primary); }

/* §19.59 (29.9.2026): Tapahtumat-sivu */
.kp-event { border-bottom: 1px solid var(--kp-border); }
.kp-event:last-child { border-bottom: 0; }
.kp-event-id { font-size: 1rem; color: var(--kp-primary); background: #f4f6f9; padding: .1rem .4rem; border-radius: .3rem; letter-spacing: .06em; }
.kp-badge-primary { background: var(--kp-primary); color: #fff; }
.kp-event-edit { background: #f8f9fb; border: 1px solid var(--kp-border); border-radius: .5rem; padding: .75rem; margin: .25rem 0 .5rem; }
.kp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.kp-thumb { position: relative; margin: 0; aspect-ratio: 1; background: #eef1f5; border-radius: .4rem; overflow: hidden; }
.kp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-thumb-video { position: absolute; right: .35rem; bottom: .25rem; color: #fff; font-size: .8rem; text-shadow: 0 0 4px rgba(0,0,0,.7); }
.kp-thumb-missing { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 8px, #e3e6ea 8px, #e3e6ea 16px); }

/* §19.62: Karanteeni-sivu */
.kp-thumb-link { position: absolute; left: 0; right: 0; bottom: 0; font-size: .7rem; text-align: center; background: rgba(0,0,0,.55); color: #fff; padding: .15rem 0; text-decoration: none; }
.kp-thumb-link:hover { background: var(--kp-primary); color: #fff; }
#kpQuarantinePage .qaDetail td { padding: 0; }
#kpQuarantinePage .qaDetailBody { border-left: 3px solid var(--kp-primary); }

/* §19.125: QR-flyerit — esikatselukangas (CSS-skaalattu, täysikokoinen taustapuskuri) */
.kp-qr-preview { position: sticky; top: calc(var(--kp-header-h, 0px) + var(--wp-admin--admin-bar--height, 0px) + 12px); } /* §19.138: yläpalkin alle; §19.139: 12 px (= fitCardHeight gap) */
/* §19.130: esikatselualueen tausta #2c2c2c (Petrin valinta) — vain näytöllä, ei tulostu */
.kp-qr-stage { display: flex; background: #2c2c2c; border-radius: 8px; padding: .75rem; overflow: auto; max-height: calc(75vh + 1.5rem); overscroll-behavior: contain; }
/* §19.132: zoom — keskitys margin:auto:lla (justify-content: center leikkaisi vasemman reunan ylivuodossa) */
.kp-qr-stage .canvas-container { margin: auto; flex: 0 0 auto; }
.kp-qr-stage .canvas-container { box-shadow: 0 2px 14px rgba(0,0,0,.55); }
@media (max-width: 991.98px) { .kp-qr-preview { position: static; } }
/* §19.127: pohjakuvan vedä ja pudota — kortin pudotusalue ja esikatselukankaan päälle tuleva kerros. Kun tiedostoa vedetään
   sivun päällä (body.kp-qr-dragging), molemmat kohteet korostuvat; kohteen päällä (.kp-drop-over) vahvemmin. */
.kp-qr-drop { border: 2px dashed #c3ccd8; border-radius: 10px; padding: .85rem .9rem .9rem; text-align: center; background: #fafbfd; }
.kp-qr-drop-icon { color: var(--kp-primary); display: block; margin: 0 auto .35rem; }
.kp-qr-drop p { color: var(--kp-text); font-weight: 600; }
.kp-qr-drop .form-label { display: block; }
.kp-qr-drop .form-control { text-align: left; }
.kp-qr-dragging .kp-qr-drop { border-color: var(--kp-primary); background: #f1f5fa; }
.kp-qr-drop.kp-drop-over { background: #e3ebf5; border-style: solid; }
.kp-qr-stage { position: relative; }
.kp-qr-stage::after { content: attr(data-drop-label); position: absolute; inset: .5rem; display: flex; align-items: center; justify-content: center; border: 3px dashed #9db8dc; border-radius: 10px; background: rgba(20, 28, 40, .72); color: #ffffff; font-weight: 700; font-size: 1.1rem; pointer-events: none; opacity: 0; visibility: hidden; }
.kp-qr-dragging .kp-qr-stage::after { opacity: 1; visibility: visible; }
.kp-qr-stage.kp-drop-over::after { background: rgba(30, 50, 80, .82); border-style: solid; }
/* §19.129: leikkausreuna ja turva-alue kankaan päällä — HTML-kerros, ei tulostu. §19.151: ohuet yhtenäiset yksiväriset viivat. */
.kp-qr-guides { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kp-qr-trim, .kp-qr-safe { position: absolute; box-sizing: border-box; }
.kp-qr-trim { border: 1px solid #e53935; }
.kp-qr-safe { border: 1px solid #1e88e5; }
.kp-qr-guides[hidden], .kp-qr-trim[hidden], .kp-qr-safe[hidden] { display: none !important; }
.kp-qr-swatch { display: inline-block; width: 16px; height: 0; border-top: 2px solid #e53935; vertical-align: middle; margin: 0 .3rem 2px 0; }
.kp-qr-swatch-safe { border-top-color: #1e88e5; }
/* §19.151: Apuviivat-osio sivupaneelissa — otsikko + kaksi valintaruutua yhdellä rivillä */
.kp-qr-guidepanel { padding: .35rem .5rem .4rem; }
.kp-qr-guidepanel .kp-qr-layers-title { margin: .05rem .2rem .25rem; }
.kp-qr-guidechks { display: flex; flex-wrap: wrap; gap: .1rem .9rem; padding: 0 .2rem; font-size: .78rem; }
.kp-qr-guidechks .form-check { min-height: 0; }
.kp-qr-guidechks .form-check-input { margin-top: .2em; }
.kp-qr-guidechks .form-check.is-off { opacity: .5; }
/* §19.152: Zoom-osio — napit täyttävät paneelin leveyden, arvokenttä joustaa */
.kp-qr-zoomgrp { display: flex; width: 100%; }
.kp-qr-zoomgrp > .btn { padding: .15rem .45rem; font-size: .8rem; }
.kp-qr-zoomgrp > .kp-qr-zoomval { flex: 1 1 auto; min-width: 3.4rem; }
/* §19.132: esikatselun työkalurivi — zoom ja apuviivojen painikkeet; painettu tila = täytetty tausta (ei pelkkä värisävy) */
.kp-qr-zoomgrp .btn-outline-secondary[aria-pressed="true"] { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.kp-qr-zoomval { min-width: 4.4rem; font-variant-numeric: tabular-nums; opacity: 1 !important; color: var(--kp-text) !important; background: #fff; }
.kp-qr-bleed { max-width: 7rem; }
.kp-qr-zoomgrp .btn:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }
/* §19.134: info-ikoni apuviivanapin vieressä + ponnahdus selityksellä (korvaa esikatselun alla olleen listan) */
.kp-qr-guidepair { position: relative; display: inline-flex; align-items: center; gap: .15rem; }
.kp-qr-infobtn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--kp-primary); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.kp-qr-infobtn:hover, .kp-qr-infobtn[aria-expanded="true"] { background: #e3ebf5; }
.kp-qr-infobtn:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }
.kp-qr-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: min(21rem, calc(100vw - 2rem)); background: #fff; border: 1px solid var(--kp-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 30, 55, .18); padding: .75rem .85rem; font-size: .82rem; line-height: 1.45; color: var(--kp-text); text-align: left; }
.kp-qr-pop.kp-qr-pop-left { right: auto; left: 0; }
.kp-qr-panel-head .kp-qr-guidepair { position: static; } /* §19.148: Tasot-ohje sijoittuu paneelin oikeaan reunaan */
.kp-qr-pop.kp-qr-pop-side { top: 2.2rem; right: 0; width: min(18rem, calc(100vw - 2rem)); font-size: .8rem; }
.kp-qr-infobtn-sm { width: 24px; height: 24px; }
.kp-qr-pop strong { display: block; margin-bottom: .25rem; }
.kp-qr-pop [hidden], .kp-qr-pop[hidden] { display: none !important; }
.kp-qr-qrsize { font-size: .85rem; font-weight: 600; color: var(--kp-text); font-variant-numeric: tabular-nums; }
.kp-qr-qrsize.text-secondary { font-weight: 400; }
/* §19.136: QR-sivu leveämpi (esikatselu + Tasot), ohjelaatikko, esikatselu ruudun korkuiseksi desktopilla, Tasot-paneeli */
#kpQrPage .kp-tools-main { max-width: 1400px; }
.kp-qr-intro p { font-size: .9rem; color: #4a4a4a; line-height: 1.5; }
.kp-qr-intro .kp-qr-title { font-size: 1.6rem; margin-bottom: .6rem; } /* §19.137: otsikko ohjelaatikossa */
.kp-qr-work { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 992px) {
  #kpQrPage .kp-qr-preview { height: calc(100vh - 2rem); display: flex; flex-direction: column; }
  #kpQrPage .kp-tools-main { padding-bottom: .75rem !important; } /* §19.139: pienempi alamarginaali → vakiokorkea esikatselu isompi */
  #kpQrPage .kp-qr-preview > * { flex: 0 0 auto; }
  #kpQrPage .kp-qr-preview > .kp-qr-work { flex: 1 1 auto; min-height: 0; }
  #kpQrPage .kp-qr-work > .kp-qr-stage { flex: 1 1 auto; min-height: 0; min-width: 0; max-height: none; }
  #kpQrPage .kp-qr-work > .kp-qr-side { flex-direction: row; align-items: flex-start; max-height: 15rem; overflow: auto; } /* §19.148 */
  #kpQrPage .kp-qr-side > .kp-qr-panel { flex: 1 1 40%; min-width: 0; } /* §19.152: 2 paneelia riviä kohden */
  #kpQrPage .kp-qr-work > .kp-qr-side { flex-wrap: wrap; }
  #kpQrPage .kp-qr-side > #qrZoomPanel, #kpQrPage .kp-qr-side > #qrGuidesPanel { flex: 1 1 40%; } /* §19.151/§19.152: Zoom + Apuviivat omalle rivilleen */
}
@media (min-width: 1200px) {
  #kpQrPage .kp-qr-work { flex-direction: row; }
  /* §19.148: paneeleilla oma vieritys (otsikot pysyvät näkyvissä): Ominaisuudet joustaa, Tasot enintään puolet */
  #kpQrPage .kp-qr-work > .kp-qr-side { flex: 0 0 16.5rem; flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: none; min-height: 0; overflow: visible; }
  #kpQrPage .kp-qr-side > .kp-qr-panel { display: flex; flex-direction: column; min-height: 0; }
  #kpQrPage .kp-qr-side > .kp-qr-panel > .kp-qr-panel-body { min-height: 0; overflow: auto; }
  /* vieritysvarjo: näkyy vain, kun paneelissa on vieritettävää ylä- tai alapuolella */
  #kpQrPage .kp-qr-side .kp-qr-panel-body { background: linear-gradient(#f6f8fb 30%, rgba(246,248,251,0)) top / 100% 24px no-repeat local, linear-gradient(rgba(246,248,251,0), #f6f8fb 70%) bottom / 100% 24px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.14), transparent) top / 100% 8px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.14), transparent) bottom / 100% 8px no-repeat scroll; }
  #kpQrPage .kp-qr-side > #qrPropsPanel { flex: 0 1 auto; }
  #kpQrPage .kp-qr-side > #qrZoomPanel, #kpQrPage .kp-qr-side > #qrGuidesPanel { flex: 0 0 auto; }
  #kpQrPage .kp-qr-side > #qrLayersPanel { flex: 0 0 auto; max-height: 50%; }
}
.kp-qr-side { display: flex; flex-direction: column; gap: .6rem; }
.kp-qr-panel { position: relative; background: #f6f8fb; border: 1px solid var(--kp-border); border-radius: 8px; padding: .4rem .5rem .5rem; }
.kp-qr-panel-head { display: flex; align-items: center; gap: .3rem; }
.kp-qr-panel-head .kp-qr-layers-title { margin: .1rem .2rem; }
.kp-qr-panel-head .kp-card-toggle { width: 26px; height: 26px; }
.kp-qr-panel-body { margin-top: .3rem; }
.kp-qr-panel-body[hidden] { display: none; }
.kp-qr-layers-title { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--kp-primary); margin: .1rem .2rem .4rem; }
.kp-qr-layerlist { list-style: none; margin: 0; padding: 0; }
.kp-qr-layers-empty { font-size: .8rem; color: #666; padding: .3rem .2rem .5rem; }
.kp-qr-layer { display: flex; align-items: center; gap: .1rem; padding: .2rem .2rem; margin-bottom: 3px; background: #fff; border: 1px solid #dde3ea; border-radius: 6px; }
.kp-qr-layer.is-selected { background: #e3ebf5; border-color: var(--kp-primary); }
.kp-qr-layer.is-hidden .kp-qr-lyr-main { opacity: .5; }
.kp-qr-layer.is-dragging { opacity: .45; }
.kp-qr-layer.drop-above { box-shadow: inset 0 3px 0 var(--kp-primary); }
.kp-qr-layer.drop-below { box-shadow: inset 0 -3px 0 var(--kp-primary); }
.kp-qr-layer[draggable="true"] { cursor: grab; }
.kp-qr-lyr-btn { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: #3d4b5c; padding: 0; }
.kp-qr-lyr-btn:hover:not(:disabled) { background: #eef2f7; }
.kp-qr-lyr-btn[aria-pressed="false"] { color: #9aa5b3; }
.kp-qr-lyr-btn:disabled { opacity: .3; }
.kp-qr-lyr-btn:focus-visible, .kp-qr-lyr-main:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }
.kp-qr-lyr-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .4rem; border: 0; background: transparent; text-align: left; padding: .1rem .2rem; font-size: .8rem; color: var(--kp-text); border-radius: 4px; }
.kp-qr-lyr-main:disabled { cursor: default; }
.kp-qr-lyr-thumb { flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #d5dbe3; border-radius: 3px; background: #fff center / contain no-repeat; }
.kp-qr-lyr-text { display: inline-flex; align-items: center; justify-content: center; font: 700 .95rem Georgia, serif; color: #3d4b5c; }
.kp-qr-lyr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-qr-lyr-name small { display: block; font-size: .68rem; color: #667383; overflow: hidden; text-overflow: ellipsis; }
.kp-qr-layer-base { gap: .4rem; padding-left: .45rem; cursor: default; font-size: .8rem; color: #555; }
.kp-qr-lyr-white { flex-basis: 30px; }
.kp-qr-lyr-zbox { flex: 0 0 auto; display: inline-flex; flex-direction: column; }
.kp-qr-lyr-zbox .kp-qr-lyr-btn { width: 22px; height: 15px; }
.kp-qr-lyr-fixedlock { margin-left: auto; margin-right: .35rem; color: #9aa5b3; }
.kp-qr-prop-kind { display: flex; align-items: center; gap: .45rem; padding: .3rem .35rem; margin-bottom: .2rem; background: #fff; border: 1px solid #dde3ea; border-radius: 6px; font-size: .8rem; font-weight: 600; color: var(--kp-text); } /* §19.148: Ominaisuudet */
.kp-qr-prop-kind .kp-qr-lyr-thumb { flex-basis: 26px; width: 26px; height: 26px; }
.kp-qr-prop-kind .kp-qr-lyr-thumb.is-empty { border-style: dashed; background: transparent; }
.kp-qr-prop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-qr-prop-kind:has(.is-empty) .kp-qr-prop-name { font-weight: 400; color: #626e7c; }
.kp-qr-sub { border-top: 1px solid var(--kp-border); padding: .45rem 0 .15rem; margin-top: .4rem; }
.kp-qr-sub > summary { display: flex; align-items: center; gap: .3rem; list-style: none; cursor: pointer; font-size: .8rem; font-weight: 700; color: #3d4b5c; margin-bottom: .35rem; border-radius: 4px; }
.kp-qr-sub > summary::-webkit-details-marker { display: none; }
.kp-qr-sub > summary::before { content: ""; width: 7px; height: 7px; margin: 0 .25rem 0 .15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -1px); }
.kp-qr-sub:not([open]) > summary { margin-bottom: 0; }
.kp-qr-sub:not([open]) > summary::before { transform: rotate(-45deg); }
.kp-qr-sub > summary:hover { color: var(--kp-primary); }
.kp-qr-sub > summary:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .kp-qr-sub > summary::before { transition: transform .15s ease; } }
.kp-qr-sublbl { display: block; font-size: .72rem; color: #626e7c; margin: .35rem 0 .2rem; }
.kp-qr-xf-none { font-size: .75rem; color: #626e7c; margin: 0 .15rem; }
.kp-qr-xf-grid { display: grid; grid-template-columns: 28px auto 1fr auto 1fr; align-items: center; gap: .3rem .3rem; }
.kp-qr-xf-grid .kp-qr-xf-link { grid-row: span 2; align-self: center; }
.kp-qr-xf-grid label { font-size: .75rem; font-weight: 700; color: #3d4b5c; margin: 0; text-align: right; min-width: .7rem; }
.kp-qr-xf-grid .form-control, .kp-qr-xf-angle { padding: .15rem .35rem; min-width: 0; }
.kp-qr-xf-row { display: flex; align-items: center; gap: .3rem; margin-top: .45rem; }
.kp-qr-xf-anglbl { display: inline-flex; color: #3d4b5c; margin: 0; }
.kp-qr-xf-angle { width: 4rem; }
.kp-qr-xf-deg { font-size: .85rem; color: #626e7c; line-height: 1; }
.kp-qr-xf-icons { display: inline-flex; gap: .1rem; margin-left: auto; }
.kp-qr-xf-link { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c3ccd8; border-radius: 4px; background: #fff; color: #9aa5b3; padding: 0; }
.kp-qr-xf-link[aria-pressed="true"] { color: #fff; background: var(--kp-primary); border-color: var(--kp-primary); }
.kp-qr-xf-link:disabled { opacity: .6; }
.kp-qr-xf-top { display: flex; align-items: flex-end; gap: .5rem; margin-top: .5rem; }
.kp-qr-refgrid { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; padding: 4px; border: 1px solid #d5dbe3; border-radius: 4px; background: #fff; }
.kp-qr-ref { width: 12px; height: 12px; padding: 0; border: 1.5px solid #9aa5b3; border-radius: 2px; background: #fff; }
.kp-qr-ref[aria-checked="true"] { background: var(--kp-primary); border-color: var(--kp-primary); }
.kp-qr-ref:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }
.kp-qr-xf-unit { display: flex; flex-direction: column; width: 4.3rem; }
.kp-qr-xf-unit .kp-qr-sublbl { margin-top: 0; }
.kp-qr-xf-reset { margin-left: auto; padding: .15rem .5rem; font-size: .78rem; }
.kp-qr-xf-note { font-size: .7rem; color: #626e7c; margin: .45rem 0 0; line-height: 1.35; }
.kp-qr-xf-note[hidden] { display: none; }
/* §19.148: kuvakepainikkeet (Tasaa ja jaa, kierto ja peilaus) — Photoshopin tapaan kehyksettömät, hover/valittu-tila */
.kp-qr-iconrow { display: flex; flex-wrap: wrap; gap: .1rem; }
.kp-qr-ibtn { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #3d4b5c; cursor: pointer; }
.kp-qr-ibtn:hover:not(:disabled) { background: #e3ebf5; border-color: #c3ccd8; color: var(--kp-primary); }
.kp-qr-ibtn:active:not(:disabled) { background: #d5e0ee; }
.kp-qr-ibtn:disabled { opacity: .35; cursor: default; }
.kp-qr-ibtn:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) { .kp-qr-ibtn { transition: background-color .15s ease, color .15s ease; } }
.kp-qr-gap { margin-left: .55rem; }
.kp-qr-al-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .1rem; }
.kp-qr-alignto { width: 7.2rem; }
.kp-qr-alignto .form-select { font-size: .8rem; }
.kp-qr-safechk .form-check-input:disabled ~ .form-check-label { opacity: .5; }
/* §19.146: Link layers — painike listan alla ja ketju linkitetyllä rivillä */
.kp-qr-linkbtn { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .2rem .55rem; font-size: .75rem; border: 1px solid #c3ccd8; border-radius: 6px; background: #fff; color: var(--kp-text); }
.kp-qr-linkbtn:hover:not(:disabled) { border-color: var(--kp-primary); background: #f4f7fb; }
.kp-qr-linkbtn[aria-pressed="true"] { background: #e3ebf5; border-color: var(--kp-primary); }
.kp-qr-linkbtn:disabled { opacity: .5; }
.kp-qr-linkbtn:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }
.kp-qr-linkbtn.kp-qr-linkbtn-icon { width: 26px; height: 24px; margin: 0; padding: 0; justify-content: center; } /* §19.153: otsikossa, pelkkä ikoni */
.kp-qr-lyr-chain { flex: 0 0 auto; display: inline-flex; color: var(--kp-primary); margin: 0 .1rem; }
/* §19.143: tallennetut pohjakuvat (pikkukuvaruudukko; käytössä oleva korostettu) */
.kp-qr-libgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.kp-qr-libitem { position: relative; }
.kp-qr-libuse { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .35rem; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; font-size: .7rem; color: var(--kp-text); }
.kp-qr-libuse:hover { border-color: var(--kp-primary); background: #f4f7fb; }
.kp-qr-libuse:focus-visible, .kp-qr-libdel:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }
.kp-qr-libuse img { width: 64px; height: 64px; object-fit: contain; background: #f1f3f6; border-radius: 4px; }
.kp-qr-libname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-qr-libitem.is-current .kp-qr-libuse { border-color: #2f8a4a; box-shadow: 0 0 0 1px #2f8a4a; }
.kp-qr-libdel { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #d5dbe3; background: #fff; color: #9b2c2c; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.kp-qr-libdel:hover { background: #fdecec; border-color: #d98282; }
.kp-qr-libempty { grid-column: 1 / -1; font-size: .8rem; color: #666; }
/* §19.140: vasemman sarakkeen korttien pienennys/suurennus — nuoli otsikon oikeassa reunassa (disclosure-painike) */
#kpQrPage .kp-card-head { display: flex; align-items: center; gap: .4rem; }
.kp-card-toggle { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--kp-primary); padding: 0; }
.kp-card-toggle:hover { background: #e3ebf5; }
.kp-card-toggle:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }
.kp-card-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) { .kp-card-toggle svg { transition: transform .15s ease; } }
#kpQrPage section.kp-card.is-collapsed .kp-card-head { margin-bottom: 0; }
#kpQrPage section.kp-card.is-collapsed { padding-top: 1rem; padding-bottom: 1rem; }
.kp-card-warnbadge { display: inline-flex; align-items: center; padding: .05rem .45rem; border-radius: 999px; background: #fff6e0; color: #7a4a00; border: 1px solid #f0cf85; font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.kp-card-warnbadge[hidden] { display: none; }
/* §19.131: kortti on kunnossa → vihreä kehys (reunaväri + 1 px varjo, ei asettelun hyppäystä) ja otsikkoon OK-merkki */
.kp-tools .kp-card.kp-card-ok { border-color: #2f8a4a; box-shadow: 0 0 0 1px #2f8a4a, 0 6px 20px rgba(0,0,0,.05); }
.kp-qr-okbadge { display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: #ecf6ee; color: #1d5e30; font-size: .7rem; letter-spacing: .04em; vertical-align: .1em; }
.kp-qr-okbadge[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .kp-tools .kp-card { transition: border-color .2s ease, box-shadow .2s ease; } }
/* Ilmoitusrivit: ikoni + sanallinen tyyppi (Huom / OK), ei pelkkä väri; kontrasti ≥ 4.5:1 */
.kp-qr-alerts:empty { display: none; }
.kp-qr-alert { display: flex; gap: .4rem; align-items: flex-start; font-size: .82rem; line-height: 1.35; padding: .35rem .55rem; border-radius: 6px; border-left: 3px solid; margin-top: .3rem; }
.kp-qr-alert svg { flex: 0 0 auto; margin-top: .12rem; }
.kp-qr-alert-warn { color: #7a4a00; background: #fff6e0; border-left-color: #d98e04; }
.kp-qr-alert-ok { color: #1d5e30; background: #ecf6ee; border-left-color: #2f8a4a; }
@media (prefers-reduced-motion: no-preference) { .kp-qr-drop, .kp-qr-stage::after { transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; } }
/* §19.158: Photo booth designer (page-photo-booth-designer.php) — kerroslista, ruudukkotaustainen esikatselu, suuri esikatselu */
.kp-pbd-intro { max-width: 46rem; color: #4a4a4a; }
.kp-pbd-panel { height: 100%; }
.kp-pbd-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kp-pbd-layer { display: grid; grid-template-columns: 64px 1fr; gap: .4rem .75rem; align-items: center; padding: .6rem; border: 1px solid var(--kp-border); border-radius: 10px; background: #fafbfc; }
.kp-pbd-thumb { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--kp-border); border-radius: 6px; grid-row: span 2;
  background: #fff linear-gradient(45deg, #e9ecef 25%, transparent 25%, transparent 75%, #e9ecef 75%), linear-gradient(45deg, #e9ecef 25%, transparent 25%, transparent 75%, #e9ecef 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px; }
.kp-pbd-thumb[hidden] { display: none; }
.kp-pbd-thumb-empty { display: block; }
.kp-pbd-layer-body { min-width: 0; }
.kp-pbd-layer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.kp-pbd-warn { color: #8a5300; background: #fff4e0; border-radius: 6px; padding: .2rem .45rem; margin-top: .3rem; }
.kp-pbd-warn[hidden] { display: none; }
.kp-pbd-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: min(62vh, 640px); min-height: 280px; padding: 1rem; border: 0; border-radius: 10px; background: #2c2c2c; cursor: zoom-in; }
.kp-pbd-stage:focus-visible { outline: 3px solid var(--kp-primary); outline-offset: 2px; }
.kp-pbd-stage canvas, .kp-pbd-lightbox canvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain;
  background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.kp-pbd-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3.5rem 1rem 1.5rem; background: rgba(0,0,0,.92); }
.kp-pbd-lightbox[hidden] { display: none; }
.kp-pbd-lightbox canvas { max-height: calc(100vh - 8rem); }
@media (max-width: 991.98px) { .kp-pbd-stage { height: 52vh; } }
/* §19.160: Tapahtumat-sivun suunnitelmat (suunnittelulinkit) */
.kp-designs { border-top: 1px dashed var(--kp-border); padding-top: .75rem; }
.kp-designs-title { font-size: .95rem; font-weight: 700; margin: 0 0 .25rem; }
.kp-design { display: grid; grid-template-columns: 88px 1fr; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--kp-border); }
.kp-design-thumb { width: 88px; height: 88px; border-radius: .4rem; overflow: hidden; background: #eef1f5; display: block; }
.kp-design-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.kp-design-thumb-empty { background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 8px, #e3e6ea 8px, #e3e6ea 16px); }
.kp-design-body { min-width: 0; }
.kp-design-url { flex: 1 1 16rem; min-width: 0; font-size: .8rem; }
/* §19.161: verkkopohjat (Tapahtumat-sivu) ja pohjan huomautus suunnittelutyökalussa */
.kp-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.kp-tpl { margin: 0; border: 1px solid var(--kp-border); border-radius: .5rem; overflow: hidden; background: #fff; }
.kp-tpl img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #eef1f5; }
.kp-tpl figcaption { display: flex; flex-direction: column; gap: .1rem; padding: .4rem .5rem; font-size: .8rem; }
.kp-pbd-tplnote { background: #eef4fb; border-radius: 6px; padding: .45rem .6rem; margin: .25rem 0 .5rem; color: #2f4a6b; }
.kp-pbd-tplnote[hidden] { display: none; }

/* §19.167: Kilpailijat-sivu — ominaisuusmatriisi (vaakavieritys, kiinteä ensimmäinen sarake ja otsikkorivi) */
.kp-competitors .kp-tools-main { max-width: none; }
.kp-competitors .kp-card { min-width: 0; }
.kpc-scroll { position: relative; overflow: auto; max-width: 100%; max-height: 75vh; border: 1px solid var(--kp-border); border-radius: .5rem; }
.kpc-scroll:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }
.kpc-table { border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.kpc-table th, .kpc-table td { border-bottom: 1px solid var(--kp-border); vertical-align: middle; }
.kpc-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; vertical-align: bottom; min-width: 7.5rem; font-weight: 600; }
.kpc-table .kpc-feat { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 14rem; max-width: 16rem; font-weight: 500; white-space: normal; box-shadow: 1px 0 0 var(--kp-border); }
.kpc-table thead .kpc-feat { z-index: 3; }
.kpc-table .kpc-group th { background: #f3f5f8; color: var(--kp-primary); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; position: sticky; left: 0; }
.kpc-table .kpc-cell { text-align: center; }
.kpc-table .kpc-us { background: #eef3fa; }
.kpc-table thead .kpc-us { background: #e4ecf7; }
.kpc-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; margin-top: .25rem; font-weight: 400; }
.kpc-meta .badge { font-weight: 500; }
.kpc-cat { color: var(--kp-muted); font-size: .75rem; }
.kpc-mark { display: inline-block; min-width: 1.1em; font-weight: 700; }
.kpc-y { color: #1e7b3c; } .kpc-p { color: #a06300; } .kpc-n { color: #9aa3ad; } .kpc-u { color: #6c757d; } .kpc-s { color: var(--kp-primary); }
.kpc-note { color: var(--kp-muted); margin-left: 1px; }
.kpc-prices { font-size: .8125rem; }
.kpc-prices th, .kpc-prices td { vertical-align: top; }
.kpc-prices tr.kpc-us > * { background: #eef3fa; }
.kpc-src a { white-space: nowrap; }
/* §19.168: Kilpailijat — työkalurivi, järjestettävä hintataulu, hinnaston rivit */
.kpc-tools .form-select, .kpc-tools .form-control { min-width: 12rem; }
.kpc-score { font-size: .72rem; color: var(--kp-primary); font-weight: 600; }
.kpc-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap; }
.kpc-sort::after { content: " ↕"; color: var(--kp-muted); font-weight: 400; }
th[aria-sort="ascending"] .kpc-sort::after { content: " ↑"; color: var(--kp-primary); }
th[aria-sort="descending"] .kpc-sort::after { content: " ↓"; color: var(--kp-primary); }
.kpc-sort:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; border-radius: 2px; }
.kpc-prices th, .kpc-prices td { padding: .6rem .6rem; }
.kpc-prices tbody tr > th { min-width: 11rem; }
.kpc-price-main { font-size: 1.05rem; font-weight: 700; color: var(--kp-text); }
.kpc-unit { color: var(--kp-muted); font-size: .75rem; }
.kpc-model { font-weight: 500; white-space: normal; text-align: left; }
.kpc-plist { min-width: 18rem; }
.kpc-plist li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; padding: .1rem 0; border-bottom: 1px dashed #edf0f3; }
.kpc-plist li:last-child { border-bottom: 0; }
.kpc-pl { flex: 1 1 10rem; color: var(--kp-muted); }
.kpc-pv { font-weight: 600; color: var(--kp-text); }
.kpc-pnote { margin-top: .3rem; font-size: .72rem; color: var(--kp-muted); font-style: italic; }

/* §19.169: kokonaan värilliset solut — ✓ vihreä, ◐ vaalean oranssi; oma sarake erottuu sinisellä reunuksella */
.kpc-table td[data-v="y"] { background: #cfeedb; }
.kpc-table td[data-v="y"] .kpc-mark { color: #14532d; }
.kpc-table td[data-v="p"] { background: #fbe8c3; }
.kpc-table td[data-v="p"] .kpc-mark { color: #7a4a00; }
.kpc-table td[data-v="s"] { background: #e3ebf7; }
.kpc-table td.kpc-us:not([data-v="y"]):not([data-v="p"]):not([data-v="s"]) { background: #fff; }
.kpc-table td.kpc-us, .kpc-table th.kpc-us { box-shadow: inset 2px 0 0 var(--kp-primary), inset -2px 0 0 var(--kp-primary); }
.kpc-table td { border-right: 1px solid #fff; }
.kpc-legend .kpc-mark { display: inline-block; min-width: 1.6em; text-align: center; border-radius: .25rem; padding: 0 .2rem; }
.kpc-legend .kpc-y { background: #cfeedb; color: #14532d; } .kpc-legend .kpc-p { background: #fbe8c3; color: #7a4a00; } .kpc-legend .kpc-s { background: #e3ebf7; }
/* puuttuvat-lista */
.kpc-gaps { padding-left: 1.4rem; }
.kpc-gap { padding: .45rem 0; border-bottom: 1px solid var(--kp-border); }
.kpc-gap:last-child { border-bottom: 0; }
.kpc-gap-n { color: var(--kp-primary); font-weight: 600; }
.kpc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.kpc-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .1rem .5rem; border-radius: 1rem; text-decoration: none; border: 1px solid transparent; }
.kpc-chip-y { background: #cfeedb; color: #14532d; border-color: #a9dcbc; }
.kpc-chip-p { background: #fbe8c3; color: #7a4a00; border-color: #f0d08f; }
.kpc-chip:hover { filter: brightness(.96); text-decoration: underline; }
.kpc-chip:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 1px; }

/* §19.170: Kilpailijat mobiilissa — vertailutila, kapeammat sarakkeet, hintataulu korteiksi, täysleveät ohjaimet */
.kpc-table.kpc-compare thead th:not(.kpc-feat) { min-width: 9rem; }
@media (max-width: 767.98px) {
  .kp-competitors .kp-card { padding: 1rem; }
  .kp-competitors .kp-page-title { font-size: 1.75rem; }
  .kpc-tools > div { flex: 1 1 100%; }
  .kpc-tools .form-select, .kpc-tools .form-control { min-width: 0; width: 100%; min-height: 2.5rem; }
  .kpc-count { margin-left: 0; }
  .kp-competitors .btn-group { width: 100%; } .kp-competitors .btn-group .btn { flex: 1 1 0; min-height: 2.5rem; }
  .kp-competitors fieldset .form-check { min-height: 1.75rem; }
  .kpc-scroll { max-height: 70vh; }
  .kpc-table { font-size: .75rem; }
  .kpc-table .kpc-feat { min-width: 8.5rem; max-width: 9.5rem; }
  .kpc-table thead th { min-width: 5.5rem; }
  .kpc-table thead .kpc-cat { display: none; }
  .kpc-table .kpc-meta .badge { font-size: .62rem; }
  /* vertailutila: kiinteä asettelu, jotta kaksi saraketta mahtuu ilman vieritystä; pitkä nimi (kuvapalvelut.com) saa katketa */
  .kpc-table.kpc-compare { table-layout: fixed; width: 100%; }
  .kpc-table.kpc-compare thead th:not(.kpc-feat) { min-width: 0; width: 33%; overflow-wrap: anywhere; }
  .kpc-table.kpc-compare .kpc-feat { min-width: 0; max-width: none; width: 34%; overflow-wrap: anywhere; hyphens: auto; }
  /* hintataulu korteiksi */
  .kpc-scroll-prices { max-height: none; overflow: visible; border: 0; }
  .kpc-prices thead { display: none; }
  .kpc-prices, .kpc-prices tbody, .kpc-prices tr, .kpc-prices tbody th, .kpc-prices tbody td { display: block; width: 100%; }
  .kpc-prices tr { border: 1px solid var(--kp-border); border-radius: .5rem; margin-bottom: .75rem; padding: .25rem .25rem .5rem; background: #fff; }
  .kpc-prices tr[hidden] { display: none; }
  .kpc-prices tbody th, .kpc-prices tbody td { border: 0; padding: .35rem .6rem; text-align: left !important; white-space: normal !important; }
  .kpc-prices td::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kp-muted); margin-bottom: .1rem; }
  .kpc-prices tbody tr > th { min-width: 0; font-size: 1rem; }
  .kpc-plist { min-width: 0; }
  .kpc-src a { white-space: normal; word-break: break-all; }
  /* puuttuvat-lista: isommat kosketuskohteet */
  .kpc-chip { padding: .3rem .65rem; font-size: .8rem; }
  .kpc-gaps { padding-left: 1.1rem; }
}

/* §19.171: Hinnasto (luonnos, vain admin) — hintakortit (vuosi korostettuna), sisältö, portaat, säännöt */
.kp-pricing .kp-card { min-width: 0; }
.kpp-draft { border: 1px solid #e9c46a; background: #fdf6e3; color: #5c4a12; border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.kpp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.kpp-plan { position: relative; border: 1px solid var(--kp-border); border-radius: .75rem; padding: 1.25rem; background: #fff; }
.kpp-plan-best { border: 2px solid var(--kp-primary); background: #f3f6fa; }
.kpp-badge { position: absolute; top: -.75rem; right: 1rem; background: var(--kp-primary); color: #fff; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .2rem .7rem; }
.kpp-plan-name { font-size: 1.1rem; font-weight: 600; color: var(--kp-primary-dark); margin: 0 0 .25rem; }
.kpp-price { margin: 0 0 .25rem; color: var(--kp-text); }
.kpp-amount { font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--kp-text); }
.kpp-amount-sm { font-size: 1.6rem; }
.kpp-per { color: var(--kp-muted); }
.kpp-sub { color: var(--kp-muted); font-size: .9rem; }
.kpp-h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.kpp-incl { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.kpp-incl li { position: relative; padding-left: 1.6rem; }
.kpp-incl li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #14532d; background: #cfeedb; border-radius: 50%; width: 1.2rem; height: 1.2rem; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; margin-top: .15rem; }
.kpp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.5rem; }
.kpp-scroll { max-height: none; }
.kpp-tiers th, .kpp-tiers td { vertical-align: middle; padding: .5rem .75rem; }
.kpp-tiers thead th { background: #f3f6fa; color: var(--kp-primary-dark); font-weight: 600; }
.kpp-off { display: inline-block; background: #cfeedb; color: #14532d; border-radius: .35rem; padding: .05rem .45rem; font-weight: 600; }
.kpp-note { display: block; color: var(--kp-muted); font-size: .8rem; }
.kpp-rules { padding-left: 1.4rem; margin: 0; display: grid; gap: .4rem; }
.kpp-warn { border-left: 4px solid var(--kp-accent); background: #fbeee9; padding: .5rem .75rem; border-radius: .25rem; color: #6b2a14; }
@media (max-width: 767.98px) {
  .kp-pricing .kp-card { padding: 1rem; }
  .kp-pricing .kp-page-title { font-size: 1.75rem; }
  .kpp-amount { font-size: 2rem; }
  /* portaat korteiksi kuten Kilpailijat-sivun hintataulu (§19.170) */
  .kpp-tiers thead { display: none; }
  .kpp-tiers, .kpp-tiers tbody, .kpp-tiers tr, .kpp-tiers th, .kpp-tiers td { display: block; width: 100%; }
  .kpp-tiers tr { border: 1px solid var(--kp-border); border-radius: .5rem; margin-bottom: .5rem; padding: .25rem .5rem; }
  .kpp-tiers tbody th { font-size: 1rem; border: 0; padding: .35rem .25rem; }
  .kpp-tiers td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; border: 0; padding: .2rem .25rem; }
  .kpp-tiers td::before { content: attr(data-label); color: var(--kp-muted); text-align: left; }
  .kpp-tiers td .kpp-val { text-align: right; }
  .kpp-tiers td .kpp-note { margin-top: .1rem; }
}

/* §19.172: Tuotteet ja palvelut (vain admin) — kanban Käytössä | Työn alla | Suunnitteilla, mobiilissa allekkain */
.kp-roadmap .kpr-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.kp-roadmap .kpr-filter .btn { border-radius: 999px; }
.kpr-n { opacity: .75; margin-left: .15rem; }
.kpr-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.kpr-col { background: #f6f8fa; border: 1px solid var(--kp-border); border-top: 4px solid var(--kpr-c); border-radius: .75rem; padding: .75rem; min-width: 0; }
.kpr-col-live { --kpr-c: #2f9e5b; --kpr-bg: #cfeedb; }
.kpr-col-wip  { --kpr-c: #d98a1c; --kpr-bg: #fbe8c3; }
.kpr-col-plan { --kpr-c: var(--kp-primary); --kpr-bg: #e3ebf7; }
.kpr-col-head { padding: .25rem .25rem .5rem; }
.kpr-col-title { font-size: 1.05rem; font-weight: 600; color: var(--kp-text); margin: 0; display: flex; align-items: center; gap: .5rem; }
.kpr-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--kpr-c); flex: none; }
.kpr-count { margin-left: auto; background: var(--kpr-bg); color: var(--kp-text); border-radius: 999px; padding: 0 .55rem; font-size: .85rem; }
.kpr-col-sub { margin: .2rem 0 0; color: var(--kp-muted); font-size: .8rem; }
.kpr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kpr-card { background: #fff; border: 1px solid var(--kp-border); border-radius: .5rem; padding: .75rem .85rem; transition: box-shadow .15s ease, border-color .15s ease; }
.kpr-card:hover { border-color: #c9d2dc; box-shadow: 0 2px 8px rgba(30, 50, 80, .08); }
.kpr-card[hidden] { display: none; }
.kpr-name { font-size: .98rem; font-weight: 600; margin: 0 0 .35rem; color: var(--kp-text); }
.kpr-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.kpr-tag { font-size: .72rem; border: 1px solid var(--kp-border); color: var(--kp-muted); border-radius: 999px; padding: .05rem .5rem; background: #fff; }
.kpr-tag-area { border-color: transparent; background: #eef1f5; color: var(--kp-primary-dark); }
.kpr-tag-price { border-color: transparent; background: var(--kpr-bg); color: var(--kp-text); }
.kpr-desc { font-size: .85rem; color: var(--kp-text); margin: 0 0 .35rem; }
.kpr-meta { font-size: .8rem; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.kpr-refs { color: var(--kp-muted); }
.kpr-empty { color: var(--kp-muted); font-size: .85rem; margin: .5rem .25rem 0; }
@media (max-width: 991.98px) { .kpr-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .kp-roadmap .kp-page-title { font-size: 1.75rem; }
  .kp-roadmap .kpr-filter .btn { min-height: 2.5rem; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .kpr-card { transition: none; } }
/* §19.185: Kirjasto-sivu (työnkulut ja projektit) */
#kpLibraryPage .wl-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--kp-border); }
#kpLibraryPage .wl-row:last-child { border-bottom: 0; }
#kpLibraryPage .wl-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; object-fit: contain; background: var(--bs-tertiary-bg, #f4f5f7); border: 1px solid var(--kp-border); }
#kpLibraryPage .wl-thumb-ph { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--kp-primary); font-size: .95rem; letter-spacing: .04em; }
#kpLibraryPage .wl-body { flex: 1 1 auto; min-width: 0; }
#kpLibraryPage .wl-name { font-weight: 600; overflow-wrap: anywhere; }
#kpLibraryPage .wl-message { white-space: pre-wrap; border-left: 3px solid var(--kp-border); padding-left: .5rem; }
#kpLibraryPage .wl-actions { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767.98px) {
  #kpLibraryPage .wl-row { flex-wrap: wrap; }
  #kpLibraryPage .wl-thumb { flex-basis: 56px; width: 56px; height: 56px; }
  #kpLibraryPage .wl-body { flex-basis: calc(100% - 56px - 1rem); }
  #kpLibraryPage .wl-actions { flex-basis: 100%; white-space: normal; }
  #kpLibraryPage .wl-actions .btn { min-height: 2.5rem; }
  #kpLibraryPage #wlSearch { width: 100% !important; }
}
/* §19.188: Asiakkaat ja projektit -sivu */
#kpCrmPage .kp-crm-main { max-width: 1440px; }
#kpCrmPage .crm-list { max-height: 70vh; overflow-y: auto; margin: 0 -.5rem; }
#kpCrmPage .crm-row { border-radius: 8px; border: 0; margin-bottom: 2px; transition: background-color .15s ease; }
#kpCrmPage .crm-row.active { background: var(--kp-primary); color: #fff; }
#kpCrmPage .crm-row.active .text-secondary { color: rgba(255,255,255,.8) !important; }
#kpCrmPage .crm-row:focus-visible { outline: 2px solid var(--kp-primary); outline-offset: 2px; }
#kpCrmPage .crm-tile { background: #fff; border: 1px solid var(--kp-border); border-radius: 10px; padding: .6rem .8rem; height: 100%; }
#kpCrmPage .crm-tile-value { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kpCrmPage .crm-section { border-top: 1px solid var(--kp-border); padding: 1rem 0 .75rem; }
#kpCrmPage .crm-section:first-of-type { border-top: 0; }
#kpCrmPage .crm-contact { border-bottom: 1px dashed var(--kp-border); padding-bottom: .5rem; }
#kpCrmPage .crm-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--bs-warning); vertical-align: middle; }
#kpCrmPage .crm-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; background: var(--bs-tertiary-bg, #f4f5f7); border: 1px solid var(--kp-border); flex: 0 0 36px; }
#kpCrmPage .crm-thumb-ph { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--kp-primary); }
#kpCrmPage .crm-detail-head h2 { overflow-wrap: anywhere; }
@media (max-width: 991.98px) { #kpCrmPage .crm-list { max-height: 40vh; } }
@media (prefers-reduced-motion: reduce) { #kpCrmPage .crm-row { transition: none; } }