@import url("louhos-selection.css?v=1");
@import url("louhos-interaction.css?v=1");

:root {
  --louhos-width-site: 1180px;
  --louhos-width-app: 1180px;
  --louhos-width-reading: 760px;
  --louhos-gutter: 40px;
  --louhos-gutter-mobile: 24px;
}
.contact-form{display:grid;gap:14px;max-width:620px;margin-top:18px}
#tilityypit .contact-open{display:inline-block;width:auto;padding:0;color:var(--accent-soft,#d9898f);font-size:.8rem;text-decoration:none;align-self:flex-start}
#tilityypit .contact-open:hover{text-decoration:underline;text-underline-offset:3px}
#tilityypit .contact-open:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.contact-form label{display:grid;gap:6px;font-size:.85rem;color:var(--muted,#aaa)}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--border,#333);border-radius:5px;padding:12px;background:var(--raised,#242424);color:var(--text,#eee);font:inherit}
.contact-form button{justify-self:start}.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent-soft,#d9898f);outline-offset:2px}
.contact-message{border:1px solid var(--border,#333);border-left:3px solid var(--accent-soft,#d9898f);border-radius:5px;margin:12px 0;padding:16px;background:var(--surface,#1d1d1d);overflow-wrap:anywhere}
.contact-message p{white-space:pre-wrap}.contact-message small{color:var(--muted,#aaa)}
.contact-message a,.contact-message button{display:inline-block;margin:8px 12px 0 0;color:var(--text,#eee);border:1px solid var(--border,#333);border-radius:5px;padding:8px 12px;background:var(--raised,#242424);font:inherit;cursor:pointer;text-decoration:none}
.contact-notice{width:min(760px,calc(100% - 32px));max-height:85vh;overflow:auto;border:1px solid var(--border,#333);border-radius:8px;padding:24px;background:var(--surface,#1d1d1d);color:var(--text,#eee)}
.contact-notice::backdrop{background:#000a}.contact-notice>button{border:1px solid var(--border,#333);border-radius:5px;padding:10px 16px;background:var(--raised,#242424);color:inherit;font:inherit;cursor:pointer}
.contact-notice .contact-close{float:right;padding:5px 12px;font-size:1.4rem}.contact-notice .contact-form{max-width:none}.contact-notice h2{margin:0 0 18px}
#contact{width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 40px);margin:auto;padding:0;border:1px solid var(--border,#3a3a3a);border-radius:8px;background:var(--surface,#1d1d1d);box-shadow:0 28px 90px #000b;font:15px/1.5 Arial,Helvetica,sans-serif}
#contact::backdrop{background:#050505c7;backdrop-filter:blur(5px)}
#contact h2{margin:0;padding:22px 62px 20px 24px;border-bottom:1px solid var(--border,#333);font-size:1.15rem;font-weight:600;line-height:1.3}
#contact .contact-close{position:absolute;right:16px;top:14px;float:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border,#333);background:var(--raised,#242424);color:var(--muted,#aaa);font-size:1.4rem;line-height:1}
#contact .contact-close:hover{color:var(--text,#eee);border-color:var(--accent-soft,#d9898f)}
#contact .contact-form{margin:0;padding:24px;gap:18px}
#contact .contact-form label{font-size:.78rem;color:var(--text,#eee);gap:7px}
#contact .contact-form input,#contact .contact-form textarea{box-sizing:border-box;min-height:44px;padding:10px 12px;background:var(--bg,#101010);font:400 .88rem/1.5 Arial,Helvetica,sans-serif;border-radius:4px}
#contact .contact-form textarea{min-height:130px;resize:vertical}
#contact .contact-form .contact-status:empty{display:none}
#contact .contact-status{margin:0;font-size:.8rem;line-height:1.5}
#contact .contact-form>p:last-child{margin:0;color:var(--muted,#aaa);font-size:.7rem;line-height:1.6}
#contact .contact-form>p:last-child a{color:inherit;text-underline-offset:3px}
#contact .contact-form button[type="submit"]{justify-self:end;min-height:44px;padding:0 20px;font-size:.82rem}
#contact h2{background:var(--raised,#242424);padding-top:24px;padding-bottom:24px}
#contact .contact-form{grid-template-columns:1fr 1fr;gap:18px 14px}
#contact .contact-form>label:nth-of-type(n+3),#contact .contact-form>p{grid-column:1/-1}
#contact .contact-form>button{grid-column:2;grid-row:6}
#contact .contact-form>p:last-child{grid-column:1;grid-row:6;align-self:center}
#contact .contact-form label{color:var(--muted,#aaa);font-weight:500}
#contact .contact-form input:hover,#contact .contact-form textarea:hover{border-color:var(--muted,#666)}
#contact .contact-form textarea{min-height:150px;max-height:300px}
#contact .contact-form>p:last-child{max-width:250px}
@media(max-width:580px){#contact .contact-form{grid-template-columns:1fr}#contact .contact-form>label,#contact .contact-form>button,#contact .contact-form>p:last-child{grid-column:1;grid-row:auto}#contact .contact-form>p:last-child{max-width:none}}
@media(max-width:580px){#contact .contact-form{padding:18px}#contact h2{padding-left:18px}#contact .contact-form button[type="submit"]{width:100%}}

.louhos-header.louhos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border, var(--line, #303030));
}

.louhos-site-notice {
  width: min(1180px, calc(100% - var(--louhos-gutter, 40px)));
  margin: 0 auto 14px;
  border: 1px solid var(--border, #303030);
  border-left: 3px solid var(--header-accent, var(--accent-soft, #d9898f));
  border-radius: 5px;
  padding: 10px 14px;
  background: var(--surface, #191919);
  color: var(--text, #f4f4f2);
  font-size: .86rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 700px) {
  .louhos-site-notice { width: calc(100% - var(--louhos-gutter-mobile, 24px)); margin-bottom: 10px; padding: 9px 11px; }
}

.louhos-app-topbar {
  width: min(var(--louhos-width-site, 1180px), calc(100% - var(--louhos-gutter, 40px)));
  margin-right: auto;
  margin-left: auto;
}

.louhos-header.louhos-header--full {
  padding: 12px clamp(18px, 5vw, 64px);
}

.louhos-header__brand.louhos-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--text, #f4f4f2);
  text-decoration: none;
}

.louhos-header__mark.louhos-header__mark {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--header-accent, var(--soft, var(--accent-soft, var(--accent, #d9898f))));
  border-radius: 5px;
  background: var(--header-mark-background, transparent);
  color: var(--header-accent, var(--soft, var(--accent-soft, var(--accent, #d9898f))));
  font: 700 .9rem/1 Arial, Helvetica, sans-serif;
}

.louhos-header__mark.louhos-header__mark--multi { border-color: transparent; }

.louhos-header--home .louhos-header__mark,
.louhos-header__mark.louhos-header__mark--logo {
  border: 0;
  border-radius: 0;
  background: url("../icon.svg") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}

.louhos-header__copy strong,
.louhos-header__copy small {
  display: block;
}

.louhos-header__copy strong {
  color: var(--text, #f4f4f2);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.louhos-header__copy small {
  margin-top: 3px;
  color: var(--muted, #9b9b98);
  font-size: .7rem;
  line-height: 1.2;
}

.louhos-header__actions.louhos-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.louhos-language {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  color: var(--muted, #9b9b98);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.louhos-language button {
  min-width: 25px;
  border: 0;
  padding: 5px 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.louhos-language button[aria-pressed="true"] { color: var(--text, #f4f4f2); }
.louhos-language button:hover, .louhos-language button:focus-visible { color: var(--header-accent, var(--accent-soft, #d9898f)); outline: none; }

/* Sama yläpalkin mitoitus esittelyissä, dokumentaatiossa ja sovelluksissa. */
.louhos-header.louhos-header { box-sizing: border-box; }
.louhos-header__copy.louhos-header__copy strong,
.louhos-header__copy.louhos-header__copy small { display: block; }
.louhos-header__copy.louhos-header__copy strong { font-size: 1rem; font-weight: 600; line-height: 1.2; }
.louhos-header__copy.louhos-header__copy small { margin-top: 3px; font-size: .7rem; line-height: 1.2; }
.louhos-header__actions.louhos-header__actions > a:not(.louhos-header__action) {
  color: var(--muted, #9b9b98);
  font-size: .82rem;
  text-decoration: none;
}
.louhos-header__actions.louhos-header__actions > a:not(.louhos-header__action):hover { color: var(--text, #f4f4f2); }
.louhos-header__qr.louhos-header__qr {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--border, #303030);
  border-radius: 5px;
  background: var(--raised, #202020);
  color: var(--text, #f4f4f2);
}
.louhos-header__qr svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.louhos-header__qr[aria-disabled="true"] { opacity: .5; cursor: default; }
.louhos-header__qr[aria-disabled="true"]:hover { border-color: var(--border, #303030); }

/* Leveys sidotaan viewportiin, ei vanhaan sisältösäiliöön: esimerkiksi Cue
   käyttää .app-säiliötä ja Stage app-shelliä, joiden leveydet ovat erilaiset. */
body .louhos-header.louhos-header:not(.louhos-header--full) {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  width: min(var(--louhos-width-site, 1180px), calc(100vw - var(--louhos-gutter, 40px))) !important;
  max-width: 1180px !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 0 18px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background: transparent !important;
}
/* Stage- ja Equipment-sovellukset eivät lisää headerin yläpuolelle paddingia
   kuten Cue ja Interval. Tuo niiden topbar samaan lähtölinjaan. */
body > .app-shell > .louhos-header.louhos-header:not(.louhos-header--full) { margin-top: 20px !important; }
body > .louhos-header.louhos-header:not(.louhos-header--full) { margin-top: 20px !important; }
body .louhos-header .louhos-header__brand { gap: 11px !important; flex: 0 1 auto; }
body .louhos-header__brand .louhos-header__mark {
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
}
body .louhos-header .louhos-header__copy strong { font-size: 16px !important; line-height: 1.2 !important; }
body .louhos-header .louhos-header__copy small { margin-top: 3px !important; font-size: 11.2px !important; line-height: 1.2 !important; }
body .louhos-header .louhos-header__actions { gap: 10px !important; align-items: center !important; }
@media (max-width: 700px) {
  body .louhos-header.louhos-header:not(.louhos-header--full) {
    width: min(var(--louhos-width-site, 1180px), calc(100vw - var(--louhos-gutter-mobile, 24px))) !important;
    min-height: 58px !important;
    padding-bottom: 14px !important;
    gap: 12px !important;
  }
  body > .app-shell > .louhos-header.louhos-header:not(.louhos-header--full) { margin-top: 10px !important; }
  body .louhos-header .louhos-header__copy small { display: none !important; }
}
.screen-header .louhos-header__brand { gap: 11px !important; }
.screen-header .louhos-header__mark { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }
.screen-header .louhos-header__copy strong { font-size: 16px !important; line-height: 1.2 !important; }
.screen-header .louhos-header__copy small { margin-top: 3px !important; font-size: 11.2px !important; line-height: 1.2 !important; }

.louhos-app-topbar .account-button,
.louhos-app-topbar .profile-button {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid var(--border, #303030) !important;
  border-radius: 5px !important;
  padding: 4px 10px 4px 5px !important;
  background: var(--raised, #202020) !important;
  color: var(--text, #f4f4f2) !important;
  font: inherit;
  cursor: pointer;
}

.louhos-app-topbar .account-button:hover,
.louhos-app-topbar .profile-button:hover,
.louhos-app-topbar .account-button:focus-visible,
.louhos-app-topbar .profile-button:focus-visible {
  border-color: var(--accent, #d9898f) !important;
  outline: none;
}

.louhos-app-topbar .avatar {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 4px !important;
  background-position: center !important;
  background-size: cover !important;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

/* Account/session renderers may update the initial independently of the photo.
   A photo avatar must never display fallback text over its background image. */
.louhos-app-topbar .avatar[style*="background-image:"][style*="url("],
#header-avatar[style*="background-image:"][style*="url("],
#landing-account-avatar[style*="background-image:"][style*="url("] {
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

.louhos-app-topbar .account-menu { position: relative; }
.louhos-app-topbar .account-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  border: 1px solid var(--border, #303030);
  border-radius: 6px;
  padding: 10px;
  background: var(--surface, #191919);
  box-shadow: 0 18px 45px #000b;
}
.louhos-app-topbar .account-popover[hidden] { display: none; }
.louhos-app-topbar .account-popover .account-detail { border-bottom: 1px solid var(--border, #303030); padding: 7px 8px 12px; }
.louhos-app-topbar .account-popover .account-detail strong,
.louhos-app-topbar .account-popover .account-detail small { display: block; }
.louhos-app-topbar .account-popover .account-detail strong { font-size: .86rem; font-weight: 600; }
.louhos-app-topbar .account-popover .account-detail small { margin-top: 2px; overflow: hidden; color: var(--muted, #9b9b98); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.louhos-app-topbar .account-popover a,
.louhos-app-topbar .account-popover button { display: block; width: 100%; border: 0; padding: 10px 8px; background: transparent; color: var(--text, #f4f4f2); font: inherit; font-size: .8rem; text-align: left; text-decoration: none; cursor: pointer; }
.louhos-app-topbar .account-popover a:hover,
.louhos-app-topbar .account-popover button:hover { background: var(--raised, #202020); }

#louhos-access-denied {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: clamp(28px, 8vw, 100px);
  background: var(--bg, #111);
  color: var(--text, #f4f4f2);
}
#louhos-access-denied h1 { max-width: 620px; margin: 0; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.08; }
#louhos-access-denied p:not(.louhos-access-denied-kicker) { max-width: 520px; margin: 0; color: var(--muted, #9b9b98); }
.louhos-access-denied-kicker { margin: 0; color: var(--accent-soft, #d9898f); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
#louhos-access-denied a { margin-top: 8px; border: 1px solid var(--accent, #77161d); border-radius: 5px; padding: 10px 14px; color: #fff; background: var(--accent, #77161d); text-decoration: none; }

.louhos-header__actions > a:not(.louhos-header__action),
.louhos-header__actions > button:not(.louhos-header__action) {
  color: var(--muted, #9b9b98);
}

.louhos-header__action.louhos-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--header-accent, var(--accent, #77161d));
  border-radius: 5px;
  padding: 0 14px;
  background: var(--header-accent, var(--accent, #77161d));
  color: #fff;
  font: 400 .82rem/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.louhos-header__action:hover,
.louhos-header__action:focus-visible {
  outline: 2px solid var(--header-accent, var(--soft, var(--accent-soft, #d9898f)));
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .louhos-header.louhos-header { min-height: 58px; padding-bottom: 14px; }
  .louhos-header__copy small { display: none; }
  .louhos-header__action.louhos-header__action { min-height: 38px; padding: 0 11px; font-size: .76rem; }
  .louhos-header__actions > a:not(.louhos-header__action):not(.back) { display: none; }
}

.louhos-product-menu[hidden] { display: none !important; }
.louhos-product-menu {
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid var(--border, #303030);
  border-radius: 7px;
  background: var(--surface, #191919);
  color: var(--text, #f4f4f2);
  box-shadow: 0 22px 64px #000c;
  font: 400 14px/1.35 Arial, Helvetica, sans-serif;
}
.louhos-product-menu:not([hidden]) {
  transform-origin: top left;
  animation: louhos-product-menu-open 200ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes louhos-product-menu-open {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .louhos-product-menu:not([hidden]) { animation: none; }
}
html.louhos-accessibility .louhos-product-menu { animation: none; }
.louhos-product-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border, #303030);
}
.louhos-product-menu__head strong,
.louhos-product-menu__head small { display: block; }
.louhos-product-menu__head strong { font-size: .86rem; font-weight: 600; }
.louhos-product-menu__head small { margin-top: 3px; color: var(--muted, #9b9b98); font-size: .68rem; }
.louhos-product-menu__head button {
  width: 30px;
  height: 30px;
  min-height: 0;
  border: 1px solid var(--border, #303030);
  border-radius: 5px;
  padding: 0;
  background: var(--raised, #202020);
  color: var(--muted, #9b9b98);
  font: 1.1rem/1 Arial, sans-serif;
  cursor: pointer;
}
.louhos-product-menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 5px; padding: 8px; }
.louhos-product-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border-radius: 5px;
}
.louhos-product-menu__item[hidden] { display: none !important; }
.louhos-product-menu__grid a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 4px 8px 8px;
  color: var(--text, #f4f4f2);
  text-decoration: none;
}
.louhos-product-menu__grid a:hover {
  border-color: var(--border, #303030);
  background: var(--raised, #202020);
  outline: none;
}
.louhos-product-menu__grid a:focus-visible {
  border-color: var(--soft, #9b9b98);
  background: var(--raised, #202020);
  outline: 2px solid var(--soft, #9b9b98);
  outline-offset: 1px;
}
.louhos-product-menu__grid a.is-current {
  border-color: color-mix(in srgb, var(--product-color) 70%, var(--border, #303030));
  background: var(--raised, #202020);
  outline: none;
}
.louhos-product-menu__grid a > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--product-color);
  border-radius: 4px;
  color: var(--product-color);
  font-size: .7rem;
  font-weight: 700;
}
.louhos-product-menu__grid .is-coming {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 4px 8px 8px;
  color: var(--muted, #9b9b98);
  cursor: default;
}
.louhos-product-menu__grid .is-coming > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--product-color);
  border-radius: 4px;
  color: var(--product-color);
  font-size: .7rem;
  font-weight: 700;
  opacity: .58;
}
.louhos-product-menu__grid .is-coming strong { color: var(--muted, #9b9b98); }
#louhos-account-settings,
#louhos-account-delete-dialog { max-width:none !important; margin:auto; border:0 !important; outline:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; color:var(--text,#f4f4f2); color-scheme:dark; appearance:none; }
#louhos-account-settings::backdrop,
#louhos-account-delete-dialog::backdrop { background:#000b; }
.louhos-account-settings-card { position:relative; display:grid; gap:18px; width:min(620px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--border,#303030); border-radius:7px; padding:30px; background:var(--surface,#191919); box-shadow:0 24px 70px #000; }
.louhos-account-settings-card h2 { margin:0 0 5px; font-size:1.35rem; font-weight:600; }.louhos-account-settings-kicker { margin:0; color:var(--accent,#d9898f); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.louhos-account-settings-section { display:grid; gap:12px; border-top:1px solid var(--border,#303030); padding-top:16px; }.louhos-account-settings-section>strong { color:var(--text,#f4f4f2); font-size:.92rem; font-weight:600; }
.louhos-account-tier { display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid var(--border,#303030); border-left:3px solid var(--accent,#d9898f); border-radius:5px; padding:12px; background:var(--raised,#202020); color:var(--muted,#9b9b98); font-size:.76rem; }.louhos-account-tier b { color:var(--text,#f4f4f2); font-size:.85rem; font-weight:600; }
.louhos-password-section summary { cursor:pointer; color:var(--text,#f4f4f2); font-size:.92rem; font-weight:600; }.louhos-password-section summary::marker { color:var(--accent,#d9898f); }
.louhos-companion-section summary { cursor:pointer; color:var(--text,#f4f4f2); font-size:.92rem; font-weight:600; }.louhos-companion-section summary::marker { color:var(--accent,#d9898f); }.louhos-companion-section>p { margin:0; color:var(--muted,#9b9b98); font-size:.8rem; line-height:1.45; }.louhos-companion-connections { display:grid; gap:7px; color:var(--muted,#9b9b98); font-size:.8rem; }.louhos-companion-connection { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border,#303030); border-left:3px solid var(--accent,#d9898f); border-radius:5px; padding:10px; background:var(--raised,#202020); }.louhos-companion-connection span { min-width:0; display:grid; gap:2px; }.louhos-companion-connection strong { overflow:hidden; color:var(--text,#f4f4f2); text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }.louhos-companion-connection small { color:var(--muted,#9b9b98); font-size:.72rem; }.louhos-companion-connection button { border:1px solid #754044; border-radius:4px; padding:5px 8px; background:transparent; color:#e09a9e; font:inherit; font-size:.72rem; cursor:pointer; }.louhos-account-inline-link { color:var(--accent,#d9898f); font-size:.8rem; text-decoration:none; }.louhos-account-inline-link:hover { text-decoration:underline; }
.louhos-danger-section { border-top-color:#593333; }.louhos-danger-section button { width:max-content; min-height:36px; border:1px solid #b34e55; border-radius:4px; padding:0 12px; background:transparent; color:#ee9497; cursor:pointer; }.louhos-danger-section button:hover { background:#3a2020; }
.louhos-account-settings-card label { display:grid; gap:5px; color:var(--muted,#9b9b98); font-size:.76rem; }.louhos-account-settings-card input { min-height:40px; border:1px solid var(--border,#303030); border-radius:4px; padding:8px; background:var(--raised,#202020); color:var(--text,#f4f4f2); font:inherit; }.louhos-account-settings-card input[type=color] { width:58px; padding:3px; }
#louhos-account-delete-confirm { border-color:#b34e55 !important; background:#8f343c !important; color:#fff !important; }
.louhos-account-settings-close { position:absolute; top:9px; right:9px; width:30px; height:30px; border:1px solid var(--border,#303030); border-radius:4px; background:var(--raised,#202020); color:var(--muted,#9b9b98); font-size:1.1rem; }.louhos-account-settings-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:5px; }.louhos-account-settings-actions button { min-height:36px; border:1px solid var(--border,#303030); border-radius:4px; padding:0 12px; background:var(--raised,#202020); color:var(--text,#f4f4f2); cursor:pointer; }.louhos-account-settings-actions button:last-child { border-color:var(--accent,#d9898f); background:var(--accent,#d9898f); color:#fff; }.louhos-account-settings-message { min-height:18px; margin:0; color:var(--muted,#9b9b98); font-size:.75rem; }
.louhos-product-menu__grid i { min-width: 0; font-style: normal; }
.louhos-product-menu__grid strong,
.louhos-product-menu__grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.louhos-product-menu__grid strong { font-size: .72rem; font-weight: 600; }
.louhos-product-menu__grid small { margin-top: 2px; color: var(--muted, #9b9b98); font-size: .59rem; }
.louhos-product-menu__theme,
.louhos-product-menu__accessibility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  border-top: 1px solid var(--border, #303030);
  border-bottom: 1px solid var(--border, #303030);
}
.louhos-product-menu__accessibility[hidden] { display: none !important; }
.louhos-product-menu__theme { border-bottom: 0; }
.louhos-product-menu__theme > span strong,
.louhos-product-menu__theme > span small,
.louhos-product-menu__accessibility span strong,
.louhos-product-menu__accessibility span small { display: block; }
.louhos-product-menu__theme > span strong,
.louhos-product-menu__accessibility span strong { font-size: .76rem; font-weight: 600; }
.louhos-product-menu__theme > span small,
.louhos-product-menu__accessibility span small { max-width: 230px; margin-top: 3px; color: var(--muted, #9b9b98); font-size: .62rem; }
.louhos-theme-options { display: flex; flex: 0 0 auto; gap: 3px; padding: 3px; border-radius: 5px; background: var(--raised, #202020); }
.louhos-theme-options button {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 8px;
  background: transparent;
  color: var(--muted, #9b9b98);
  font: 400 .64rem/1 Arial, sans-serif;
  cursor: pointer;
}
.louhos-theme-options button[aria-pressed="true"] {
  border-color: var(--border, #454545);
  background: var(--surface, #191919);
  color: var(--text, #f4f4f2);
}
.louhos-accessibility-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  min-height: 0;
  border: 1px solid var(--border, #454545);
  border-radius: 999px;
  padding: 0;
  background: var(--raised, #202020);
  cursor: pointer;
}
.louhos-accessibility-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted, #9b9b98);
  transition: transform .16s ease, background .16s ease;
}
.louhos-accessibility-toggle[aria-checked="true"] { border-color: var(--header-accent, var(--accent, #73ac56)); }
.louhos-accessibility-toggle[aria-checked="true"] i { background: var(--header-accent, var(--accent, #73ac56)); transform: translateX(18px); }
.louhos-product-menu__connect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-top: 1px solid var(--border, #303030);
  color: var(--text, #f4f4f2);
  font-size: .7rem;
  text-decoration: none;
}
.louhos-product-menu__resume { border-top:1px solid var(--border,#303030); padding:14px 15px 8px; }
.louhos-product-menu__resume>[data-resume-heading] { display:block; margin:0 0 8px; color:var(--muted,#a8a8a8); font-size:.72rem; font-weight:500; }
.louhos-product-menu .louhos-resume-item { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:52px; padding:8px; margin:0 -8px; border-radius:4px; color:var(--text,#f2f2f2); text-decoration:none; }
.louhos-resume-mark { display:grid; place-items:center; width:26px; height:26px; box-sizing:border-box; border:1px solid var(--product-color); border-radius:4px; color:var(--product-color); font-size:.72rem; font-weight:600; }
.louhos-resume-item strong,.louhos-resume-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.louhos-resume-item strong { font-size:.76rem; font-weight:600; }
.louhos-resume-item small { margin-top:3px; color:var(--muted,#a8a8a8); font-size:.68rem; }
.louhos-product-menu .louhos-resume-item > span[aria-hidden="true"]:last-child,
.louhos-product-menu__connect > span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  color: var(--muted, #a8a8a8);
  font: 400 18px/1 Arial, Helvetica, sans-serif;
}
.louhos-product-menu .louhos-resume-item:hover { background:var(--raised,#242424); }
.louhos-product-menu .louhos-resume-item:focus-visible { outline:2px solid var(--product-color); outline-offset:0; }
.louhos-product-menu__connect > span:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; }
.louhos-product-menu__connect strong { font-weight: 600; }
.louhos-product-menu__connect small { color: var(--muted, #9b9b98); font-size: .65rem; }
.louhos-product-menu__connect:hover { background: var(--bg, #141414); }
.louhos-product-menu__connect:focus-visible { outline: 2px solid var(--header-accent, var(--accent, #73ac56)); outline-offset: -3px; }
.louhos-product-menu__home {
  display: block;
  padding: 11px 15px;
  color: var(--muted, #9b9b98);
  font-size: .7rem;
  text-decoration: none;
}
.louhos-product-menu__home:hover { color: var(--text, #f4f4f2); }

.louhos-skip-link {
  position: fixed;
  z-index: 100000;
  top: 8px;
  left: 8px;
  translate: 0 -150%;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 11px 15px;
  background: #fff;
  color: #111;
  font: 600 16px/1.2 Arial, sans-serif;
}
.louhos-skip-link:focus { translate: 0; }

html.louhos-accessibility {
  scroll-behavior: auto !important;
  font-size: 112.5% !important;
}
html.louhos-accessibility body {
  --bg: #090909;
  --surface: #151515;
  --raised: #242424;
  --text: #ffffff;
  --muted: #e2e2df;
  --border: #a7a7a2;
  --line: #a7a7a2;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  letter-spacing: .012em;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
  -webkit-user-select: text;
  user-select: text;
}
html.louhos-accessibility *,
html.louhos-accessibility *::before,
html.louhos-accessibility *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}
html.louhos-accessibility :focus-visible {
  outline: 4px solid #ffdd32 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #111 !important;
}
html.louhos-accessibility .louhos-product-menu { font-size: 16px; }
html.louhos-accessibility .louhos-product-menu__item { grid-template-columns: minmax(0, 1fr); }
html.louhos-accessibility a:not([class]),
html.louhos-accessibility main a,
html.louhos-accessibility footer a {
  text-decoration: underline !important;
  text-decoration-thickness: .12em !important;
  text-underline-offset: .18em !important;
}
html.louhos-accessibility button,
html.louhos-accessibility input,
html.louhos-accessibility select,
html.louhos-accessibility textarea,
html.louhos-accessibility [role="button"],
html.louhos-accessibility [role="switch"] {
  min-width: 44px;
  min-height: 44px;
  border-width: 2px !important;
  font-size: max(1rem, 16px) !important;
}
html.louhos-accessibility button,
html.louhos-accessibility .btn,
html.louhos-accessibility .button,
html.louhos-accessibility [role="button"] {
  border-color: #b8b8b3 !important;
  background: #242424 !important;
  color: #fff !important;
  white-space: normal;
  -webkit-user-select: none;
  user-select: none;
}
html.louhos-accessibility input,
html.louhos-accessibility select,
html.louhos-accessibility textarea {
  border-color: #b8b8b3 !important;
}
html.louhos-accessibility input::placeholder,
html.louhos-accessibility textarea::placeholder { color: #c9c9c4 !important; opacity: 1; }
html.louhos-accessibility img,
html.louhos-accessibility svg,
html.louhos-accessibility video,
html.louhos-accessibility canvas { max-width: 100%; }
html.louhos-accessibility body,
html.louhos-accessibility body * { touch-action: auto; }
html.louhos-accessibility .louhos-accessibility-toggle {
  width: 78px;
  border-radius: 4px;
  background: #242424;
  color: #fff;
}
html.louhos-accessibility .louhos-accessibility-toggle i { display: none; }
html.louhos-accessibility .louhos-accessibility-toggle::after { content: "Pois"; }
html.louhos-accessibility .louhos-accessibility-toggle[aria-checked="true"] {
  border-color: #ffdd32 !important;
  background: #ffdd32 !important;
  color: #111 !important;
}
html.louhos-accessibility .louhos-accessibility-toggle[aria-checked="true"]::after { content: "Päällä"; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

html.louhos-light { color-scheme: light; }
html.louhos-light body {
  --bg: #f2f1ed;
  --surface: #ffffff;
  --raised: #e9e8e3;
  --border: #c4c3bd;
  --line: #c4c3bd;
  --text: #181917;
  --muted: #62635f;
  background: var(--bg) !important;
  color: var(--text) !important;
}
html.louhos-light body::before,
html.louhos-light main::before,
html.louhos-light .page::before { opacity: .07 !important; }
html.louhos-light input,
html.louhos-light textarea,
html.louhos-light select {
  border-color: var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
}
html.louhos-light .louhos-header:not(.louhos-header--home) .louhos-header__mark:not(.louhos-header__mark--logo) { background: transparent !important; }
html.louhos-light .louhos-product-menu { box-shadow: 0 22px 64px #35353033; }
html.louhos-light .modal,
html.louhos-light dialog::backdrop { --overlay: #30302d66; }
html.louhos-light code { background: var(--raised) !important; }

html.louhos-light.louhos-accessibility body {
  --bg: #ffffff;
  --surface: #ffffff;
  --raised: #e6e6e2;
  --text: #111111;
  --muted: #343431;
  --border: #555550;
  --line: #555550;
}

html.louhos-light.louhos-accessibility :focus-visible {
  outline-color: #005fcc !important;
  box-shadow: 0 0 0 2px #fff !important;
}

html.louhos-light.louhos-accessibility .louhos-accessibility-toggle {
  background: #fff;
  color: #111;
}

html.louhos-light.louhos-accessibility button,
html.louhos-light.louhos-accessibility .btn,
html.louhos-light.louhos-accessibility .button,
html.louhos-light.louhos-accessibility [role="button"] {
  border-color: #555550 !important;
  background: #fff !important;
  color: #111 !important;
}

html.louhos-light.louhos-accessibility .louhos-accessibility-toggle[aria-checked="true"] {
  border-color: #005fcc !important;
  background: #005fcc !important;
  color: #fff !important;
}

@media (max-width: 420px) {
  .louhos-product-menu__grid { max-height: min(430px, 56vh); overflow: auto; }
}
/* Louhos file controls: replace browser-default grey chooser with a consistent dark surface. */
input[type="file"]{width:100%;min-height:42px;padding:6px 8px;border:1px solid var(--border,#333);border-radius:6px;background:var(--surface,#1d1d1d);color:var(--muted,#a8a8a8);font:inherit;cursor:pointer}
input[type="file"]::file-selector-button{margin-right:10px;padding:8px 13px;border:1px solid var(--accent,#4f8ff7);border-radius:5px;background:var(--raised,#242424);color:var(--text,#f2f2f2);font:inherit;cursor:pointer}
input[type="file"]::file-selector-button:hover{background:var(--accent,#4f8ff7);color:#fff}
input[type="file"]:focus-visible{outline:2px solid var(--accent,#4f8ff7);outline-offset:2px}

/* Native hidden attributes must always win over component display rules.
   This keeps registration-only fields (such as password confirmation) out of
   the login view on every Louhos platform. */
[hidden]{display:none !important}

/* Shared popup treatment for landing-page authentication. */
#auth-modal.modal{backdrop-filter:blur(10px);background:radial-gradient(ellipse at 50% 0%,#77161d36,transparent 58%),#050505cf !important}
#auth-modal.modal .modal-card,#auth-modal.modal .auth-card{border-radius:14px !important;box-shadow:0 30px 90px #000c,0 0 0 1px #77161d22 !important;animation:louhos-auth-card-in .42s cubic-bezier(.2,.8,.25,1) both}
#auth-modal.modal input{border-radius:8px !important}
@keyframes louhos-auth-card-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#auth-modal.modal .modal-card,#auth-modal.modal .auth-card{animation:none}}
.louhos-companion-section > button { padding:10px 14px; border:1px solid var(--border,#383838); border-radius:6px; background:var(--raised,#242424); color:var(--text,#f4f4f2); font:inherit; cursor:pointer; }
.louhos-companion-section > button:disabled { opacity:.5; cursor:default; }
.louhos-companion-section label[hidden] { display:none; }
.louhos-companion-section > button[hidden] { display:none; }
.louhos-companion-section[open] { display:flex; flex-direction:column; align-items:stretch; gap:14px; }
.louhos-companion-copy-row { display:flex; align-items:stretch; gap:8px; min-width:0; }
.louhos-companion-copy-row input { flex:1; min-width:0; font-size:.78rem; }
.louhos-companion-copy-row button { flex:none; padding:8px 12px; border:1px solid var(--border,#383838); border-radius:6px; background:var(--raised,#242424); color:var(--text,#f4f4f2); font:inherit; font-size:.78rem; cursor:pointer; }
.louhos-companion-section > button { align-self:flex-start; border-color:#754044; }
.louhos-companion-list-heading { margin-top:8px; font-size:.8rem; }
.louhos-companion-list-heading[hidden] { display:none; }
.louhos-companion-section[open] { gap:12px; padding-block:18px; }
.louhos-companion-section > .louhos-connect-open { padding:8px 12px; border:1px solid var(--border,#383838); border-radius:6px; background:var(--raised,#242424); color:var(--text,#f4f4f2); font-size:.8rem; line-height:1.3; }
.louhos-companion-section > .louhos-connect-open:hover { border-color:var(--accent,#d9898f); }
.louhos-account-settings-modal { width:min(540px,calc(100vw - 32px)); padding:0; border:0; outline:0; border-radius:8px; background:transparent; color:var(--text,#f2f2f2); }
.louhos-account-settings-modal .louhos-account-settings-card { box-sizing:border-box; width:100%; }
.louhos-account-settings-modal::backdrop { background:#0009; }
.louhos-connect-app-choice { display:block; padding:14px; border:1px solid var(--border,#333); border-radius:5px; background:var(--raised,#242424); color:var(--text,#f2f2f2); text-decoration:none; }
.louhos-connect-app-choice:hover { border-color:var(--accent,#77161d); }
.louhos-connect-app-choice:focus-visible { outline:2px solid var(--soft,#d9898f); outline-offset:2px; }
.louhos-companion-section > #louhos-companion-guide { align-self:flex-start; color:var(--muted,#9b9b98); font-size:.76rem; text-decoration:none; }
.louhos-companion-section > #louhos-companion-guide:hover { color:var(--text,#f4f4f2); text-decoration:underline; }
.louhos-companion-connections:empty { display:none; }
.louhos-companion-section > label { gap:7px; font-size:.8rem; }
.louhos-account-settings-card .louhos-companion-section { display:grid; gap:10px; }
.louhos-account-settings-card .louhos-companion-section > strong { font-size:.85rem; font-weight:600; }
.louhos-account-settings-card .louhos-companion-section > .louhos-connect-open { justify-self:start; min-height:36px; border:1px solid var(--border,#303030); border-radius:4px; padding:0 12px; background:var(--raised,#202020); color:var(--text,#f4f4f2); font:inherit; font-size:.76rem; }
.louhos-account-settings-card .louhos-companion-section > p { font-size:.76rem; line-height:1.5; }
.louhos-account-settings-card select { width:100%; min-height:40px; border:1px solid var(--border,#303030); border-radius:4px; padding:8px; background:var(--raised,#202020); color:var(--text,#f4f4f2); font:inherit; }
.louhos-account-settings-section small { color:var(--muted,#9b9b98); line-height:1.5; }