:root {
    --bg:#f4f5f7; --card:#fff; --ink:#1d2129; --muted:#6b7280;
    --line:#e3e5e9; --accent:#2f6fd0; --on-accent:#fff; --ok:#15803d; --warn:#b45309; --danger:#dc2626;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#14161a; --card:#1c1f25; --ink:#e8eaee; --muted:#9aa1ad;
            --line:#2b2f37; --accent:#6ea8fe; --on-accent:#0b1220; --ok:#4ade80; --warn:#fbbf24; --danger:#f87171; }
  }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  body { margin:0; background:var(--bg); color:var(--ink);
         font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
  a { color:var(--accent); }
  .wrap { max-width:1100px; margin:0 auto; padding:8px 16px 64px; }
  .login-card { max-width:360px; margin:12vh auto 0; padding:28px 24px; background:var(--card);
                border:1px solid var(--line); border-radius:16px; display:flex; flex-direction:column; gap:14px; }
  .login-card[hidden] { display:none; }
  .login-logo { display:block; width:min(300px, 80%); margin:9vh auto 0; }
  .login-logo ~ .login-card { margin-top:24px; }
  .login-card h1 { margin:0 0 4px; font-size:22px; }
  .login-card label { display:flex; flex-direction:column; gap:6px; }
  .login-card input { width:100%; box-sizing:border-box; font-size:16px !important; padding:10px 12px !important; }
  .login-card .hint { margin:0; color:var(--muted); font-size:13px; }
  .login-card label.remember { flex-direction:row; align-items:center; gap:8px; font-size:14px; }
  .login-card label.remember input { width:auto; margin:0; }
  .login-error { margin:0; min-height:1em; color:var(--danger); font-size:14px; }
  .user-bar { display:flex; align-items:center; gap:10px; margin:4px 0 0;
              color:var(--muted); font-size:13px; }
  .user-bar-logo { height:22px; width:auto; margin-right:auto; }
  .user-bar a { color:var(--muted); }
  /* Käyttäjien ylläpito (users.html). */
  #invite-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
  #invite-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
  #invite-email { min-width:min(260px, 100%); }
  .invite-result { margin-top:12px; }
  .invite-link { display:flex; gap:8px; }
  .invite-link input { flex:1; min-width:0; }
  .users-table { width:100%; border-collapse:collapse; font-size:14px; }
  .users-table th, .users-table td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
  .users-table th { color:var(--muted); font-weight:500; }
  .users-table td:first-child { overflow-wrap:anywhere; }
  .users-table .user-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .users-table .user-actions button { font-size:13px; padding:4px 8px; }
  /* Omat tiedot (account.html). */
  .account-facts { display:grid; grid-template-columns:max-content 1fr; gap:8px 16px; margin:0 0 12px; font-size:14px; }
  .account-facts[hidden] { display:none; }
  .account-facts dt { color:var(--muted); }
  .account-facts dd { margin:0; overflow-wrap:anywhere; }
  h1 { font-size:22px; margin:0 0 4px; }
  .sub { color:var(--muted); margin:0 0 24px; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

  /* Yläpalkki: sama kaikilla sivuilla paitsi 3D-näkymässä. */
  .topbar { max-width:1100px; margin:0 auto; padding:14px 16px 6px;
            display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .brand { font-weight:600; font-size:17px; color:var(--ink); text-decoration:none; }
  .topbar .back { margin:0; }

  /* Napit: yksi pääpainike näkymää kohden, muut hillittyjä. */
  button, a.button, a.primary { font:inherit; font-size:14px; border-radius:8px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
  button, a.button { padding:7px 12px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
  button:hover, a.button:hover { border-color:var(--muted); }
  .primary, a.primary { padding:10px 18px; border:0; background:var(--accent); color:var(--on-accent);
                        font-weight:600; white-space:nowrap; }
  .primary:hover { filter:brightness(1.08); }
  .primary.big { padding:13px 22px; font-size:16px; }
  button.quiet { border-color:transparent; background:transparent; color:var(--muted); }
  button.quiet:hover { color:var(--ink); border-color:var(--line); }
  button:disabled, select:disabled { opacity:.6; cursor:wait; }
  select { padding:6px 10px; border:1px solid var(--line); border-radius:8px;
           background:var(--card); color:var(--ink); font-size:14px; }
  label { color:var(--muted); font-size:14px; }
  input[type=file] { display:none; }

  /* Aloitusnäkymä ennen ensimmäistä rataa. */
  .intro { margin-top:24px; padding:48px 20px 40px; text-align:center; background:var(--card);
           border:2px dashed var(--line); border-radius:16px; transition:border-color .15s, background .15s; }
  .intro h1 { font-size:26px; margin:0 0 8px; }
  .intro > p { color:var(--muted); max-width:460px; margin:0 auto 24px; }
  .intro .hint { font-size:13px; margin:12px auto 0; }
  .steps { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; margin:32px 0 0; padding:0;
           list-style:none; counter-reset:step; font-size:14px; color:var(--muted); }
  .steps li { counter-increment:step; }
  .steps li::before { content:counter(step); color:var(--accent); font-weight:600; margin-right:6px; }
  .hall-row { margin:12px 0 0; text-align:center; }
  body.dragging .intro { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
  body.dragging .wrap { outline:2px dashed var(--accent); outline-offset:4px; border-radius:16px; }

  /* Ratakarttojen lataus: pikkukuva ja kerrottavat tiedot kartta kerrallaan. */
  input:not([type=checkbox]):not([type=file]) { padding:6px 10px; border:1px solid var(--line); border-radius:8px;
    background:var(--card); color:var(--ink); font:inherit; font-size:14px; max-width:100%; }
  input:disabled { opacity:.6; }
  .uploads h2 { font-size:18px; margin:0; }
  .uploads-head { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
  .uploads-head h2 { margin-right:auto; }
  .batch-place { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px;
                 padding:10px 12px; border-radius:8px; background:var(--bg); }
  .batch-place .check { display:inline-flex; align-items:center; gap:4px; }
  .batch-place select, .batch-place input:not([type=radio]) { min-height:36px; }
  .batch-place input:not([type=radio]) { flex:1 1 160px; max-width:280px; }
  .batch-place [hidden] { display:none; }
  .upload-item .more-fields { flex-basis:100%; }
  .upload-item .more-fields summary { cursor:pointer; color:var(--muted); font-size:14px; }
  .upload-item .more-fields[open] { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
  .upload-item .more-fields[open] summary { flex-basis:100%; }
  .upload-items { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px; }
  .upload-item { display:grid; grid-template-columns:120px 1fr auto; gap:14px; align-items:start;
                 padding:12px; border:1px solid var(--line); border-radius:10px; }
  .upload-item .thumb { padding:0; border:1px solid var(--line); background:#fff; overflow:hidden; cursor:zoom-in; }
  .upload-item .thumb img { display:block; width:118px; height:90px; object-fit:contain; }
  .upload-item .fields { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; min-width:0; }
  .upload-item .fields label { display:inline-flex; align-items:center; gap:6px; }
  .upload-item .fields .wide { flex-basis:100%; }
  .upload-item .fields .wide input { flex:1; }
  .upload-item .file { flex-basis:100%; margin:0; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
  .upload-item .state { flex-basis:100%; margin:0; font-size:14px; color:var(--muted); }
  .upload-item[data-state=done] .state { color:var(--ok); }
  .upload-item[data-state=running] .state { color:var(--ink); display:flex; align-items:center; gap:8px; }
  .upload-item[data-state=running] .state::before { content:""; flex:none; width:14px; height:14px; border-radius:50%;
    border:2px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .upload-item[data-state=running] .state::before { animation-duration:3s; } }
  .upload-item[data-state=error] .state, .upload-item[data-state=conflict] .state { color:var(--warn); }
  .upload-item .remove { font-size:20px; line-height:1; padding:4px 10px; }
  .uploads-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
  @media (max-width:560px) {
    .upload-item { grid-template-columns:1fr auto; }
    .upload-item .thumb { grid-column:1; grid-row:1; }
    .upload-item .remove { grid-column:2; grid-row:1; }
    .upload-item .fields { grid-column:1 / -1; }
    .upload-item .fields label { flex-wrap:wrap; }
  }

  /* Ratalista: välilehdet Viikot ja Kansiot, kummassakin samankokoiset kortit. Näkyvää otsikkoa ei
     ole, koska välilehdet ja latausnappi kertovat jo mistä on kyse; lista alkaa heti. */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
             clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .segmented-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
                    gap:10px 16px; margin:0; }
  .walk-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
               stroke-linecap:round; stroke-linejoin:round; }
  .segmented { display:inline-flex; gap:2px; margin:0; padding:3px; border:1px solid var(--line);
               border-radius:10px; background:var(--bg); }
  .segmented button { border:0; background:transparent; color:var(--muted); padding:6px 18px; font-weight:600; }
  .segmented button:hover { color:var(--ink); }
  .segmented button[aria-pressed=true] { background:var(--card); color:var(--ink); box-shadow:0 0 0 1px var(--line); }
  @media (max-width:480px) {
    .wide-only { display:none; }
    .segmented-row { column-gap:10px; }
    .segmented button { padding:6px 14px; }
  }
  .library .group { margin-top:14px; padding-top:16px; border-top:1px solid var(--line); }
  .library #library-groups > .group:first-child { margin-top:6px; }
  .group-head { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin:0 0 12px; }
  .group-head h3 { font-size:17px; margin:0; }
  .group-head .note { margin-left:6px; font-size:13px; font-weight:400; color:var(--muted); }
  .group-head .actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
  .library .pin { padding:1px 8px; font-size:18px; line-height:1.3; color:var(--muted); }
  .library .pin.on { color:var(--accent); }
  .library .toggle, .library .add { padding:3px 10px; font-size:13px; color:var(--muted); }
  .library .more { margin:14px 0 4px; }
  .library .empty { margin:10px 0 4px; color:var(--muted); font-size:14px; }
  .new-folder { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 4px; }
  .new-folder input[type=text] { flex:1 1 220px; max-width:320px; padding:7px 10px; font:inherit; color:var(--ink);
                      background:var(--card); border:1px solid var(--line); border-radius:8px; }
  .form-error { flex-basis:100%; margin:0; font-size:14px; color:var(--warn); }
  .placement { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
  .placement .check { display:inline-flex; align-items:center; gap:4px; }
  /* Viikon värit ovat aina samoissa sarakkeissa, jotta viikkoja voi verrata allekkain. */
  .week-grid, .card-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:start; }
  .week-grid .cell { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .week-grid + .card-grid { margin-top:14px; }
  .course-card { position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .course-card .thumb { aspect-ratio:3 / 2; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .course-card .thumb img { display:block; width:100%; height:100%; object-fit:contain; }
  .course-card:hover .thumb { border-color:var(--muted); }
  .course-card .head { display:flex; align-items:center; gap:8px; }
  /* Otsikon linkki peittää koko kortin; ⋯-valikko on sen päällä. */
  .course-card .title { flex:1; min-width:0; font-weight:600; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
  .course-card .title::after { content:""; position:absolute; inset:0; }
  .course-card:hover .title { text-decoration:underline; }
  .course-card .title:focus-visible { outline:none; }
  .course-card:has(.title:focus-visible) { outline:3px solid var(--accent); outline-offset:3px; border-radius:8px; }
  .course-card .info { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--muted); }
  .course-card .status { flex:none; }
  .course-card .status.ok { color:var(--ok); font-weight:700; }
  .course-card .status.warn { position:relative; z-index:1; color:var(--warn); font-weight:600; }
  .course-card .detail { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .card-menu { position:relative; z-index:1; flex:none; }
  .card-menu[open] { z-index:5; }
  .card-menu summary { list-style:none; cursor:pointer; width:32px; height:28px; display:grid; place-items:center;
                       border-radius:8px; color:var(--muted); font-size:18px; line-height:1; user-select:none; }
  .card-menu summary::-webkit-details-marker { display:none; }
  .card-menu summary:hover, .card-menu[open] summary { background:var(--bg); color:var(--ink); }
  .card-menu .menu { position:absolute; right:0; top:100%; min-width:170px; padding:4px; display:grid; gap:2px;
                     background:var(--card); border:1px solid var(--line); border-radius:10px;
                     box-shadow:0 8px 24px rgba(0,0,0,.16); }
  .card-menu .menu a, .card-menu .menu button { display:flex; width:100%; justify-content:flex-start; padding:7px 10px;
    border:0; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:14px;
    text-align:left; text-decoration:none; cursor:pointer; }
  .card-menu .menu a:hover, .card-menu .menu button:hover { background:var(--bg); }
  .card-menu .menu .menu-field { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:14px; white-space:nowrap; }
  .card-menu .menu .danger { color:var(--danger); }
  .group-head .card-menu .menu { min-width:230px; }
  .reread-dialog { width:min(440px, calc(100vw - 32px)); padding:20px; border:1px solid var(--line); border-radius:12px;
                   background:var(--card); color:var(--ink); }
  .reread-dialog::backdrop { background:rgba(0,0,0,.45); }
  .reread-dialog h2 { margin:0 0 10px; font-size:18px; }
  .reread-dialog p { margin:0 0 10px; }
  .reread-dialog .hint { font-size:13px; color:var(--muted); }
  .reread-dialog .check { display:flex; align-items:flex-start; gap:6px; margin:0 0 10px; }
  .reread-dialog progress { width:100%; margin:0 0 8px; }
  .reread-count { font-weight:600; }
  .reread-failed { margin:0 0 10px; padding-left:20px; font-size:14px; }
  .reread-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:16px; }
  @media (max-width:640px) {
    .week-grid, .card-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .week-grid .cell:empty { display:none; }
  }

  #status { margin-top:18px; padding:12px 14px; border-radius:10px; background:var(--card);
            border:1px solid var(--line); display:none; }
  #status.on { display:block; }
  #status.err { border-color:var(--danger); color:var(--danger); }

  /* Radan yhteenveto. */
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:14px; }
  .course-head p { margin:0; }
  .kind { font-size:13px; color:var(--muted); }
  .course-head .back { margin-right:10px; color:var(--accent); text-decoration:none; }
  .course-head .back:hover { text-decoration:underline; }
  .course-head .title-row { display:flex; align-items:flex-start; gap:8px; }
  .course-head h1 { flex:1; min-width:0; font-size:26px; line-height:1.25; margin:2px 0 6px; }
  .facts { font-size:17px; }
  /* Estejakauma yhdellä rivillä; koko teksti näkyy vihjeenä. */
  .breakdown { font-size:14px; color:var(--muted); margin-top:2px !important;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* 3D-näkymä ja radan valinnat otsikon alla samalla rivillä, kapealla allekkain. */
  .head-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .head-actions > a { min-height:42px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; }
  .head-actions select { min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:8px;
    background:var(--card); color:var(--ink); font:inherit; font-size:15px; }
  .head-actions .label-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  @media (max-width:560px) {
    .head-actions > a, .head-actions label, .head-actions select { flex:1 1 100%; width:100%; }
  }
  .label-text { color:var(--muted); }

  /* Tunnistuksen tila: vain hallintapuolella (latauskortti ja hallintasivu). */
  .check-result p.check-title { margin:0; font-size:15px; color:var(--ink); }
  .check-result p.check-title::before { margin-right:8px; font-weight:700; }
  .check-result.ok p.check-title::before { content:"✓"; color:var(--ok); }
  .check-result.warn p.check-title::before { content:"!"; color:var(--warn); }
  .check-result ul { margin:6px 0 0; padding-left:20px; font-size:14px; }
  .check-result ul.issues { color:var(--warn); }
  .check-result details { margin-top:6px; font-size:13px; color:var(--muted); }
  .check-result summary { cursor:pointer; }
  .upload-item .check-result { flex-basis:100%; }

  /* Radan hallintasivu: tunnistus, tiedot ja sijoitus sekä harvemmin tarvittava "Lisää". */
  .page-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px 16px; margin-top:6px; }
  .page-head .kind { margin:0; }
  .page-head h1 { margin:2px 0 0; font-size:26px; line-height:1.25; }
  .manage { display:grid; gap:14px; margin-top:14px; }
  .manage .card { margin-top:0; }
  .manage h2 { font-size:18px; margin:0 0 10px; }
  .manage h3 { font-size:15px; margin:20px 0 4px; }
  .manage p { margin:4px 0 8px; }
  .manage .hint { margin:0 0 10px; font-size:13px; color:var(--muted); }
  .manage-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
  .manage-more > summary { cursor:pointer; font-size:18px; font-weight:600; }
  .manage-more[open] > summary { margin-bottom:2px; }
  .manage dl { margin:8px 0; display:grid; grid-template-columns:max-content auto; gap:2px 14px; font-size:14px; }
  .manage dt { color:var(--muted); }
  .manage dd { margin:0; }
  .manage .views > summary { cursor:pointer; font-size:14px; color:var(--accent); }
  .manage .views .grid { margin-top:12px; }
  .manage .danger-zone { margin-top:22px; border-top:1px solid var(--line); }
  .manage .danger-zone h3 { color:var(--danger); }
  button.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }
  button.danger:hover { border-color:var(--danger); }
  .meta-fields { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:10px 0; }
  .meta-fields label { display:inline-flex; align-items:center; gap:6px; }
  .meta-fields .wide { flex-basis:100%; }
  .meta-fields .wide input { flex:1; }

  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px; margin-top:14px; }
  figure { margin:0; background:var(--card); border:1px solid var(--line);
           border-radius:12px; overflow:hidden; }
  figure button { display:block; width:100%; padding:0; border:0; border-radius:0; background:transparent; }
  figure img { display:block; width:100%; height:auto; background:#fff; cursor:zoom-in; }
  figcaption { padding:9px 12px; font-size:13px; color:var(--muted); border-top:1px solid var(--line); }

  .page-foot { margin-top:28px; font-size:13px; color:var(--muted);
               display:flex; flex-direction:column; gap:4px; }

  #lightbox { border:0; padding:16px; width:95vw; height:95vh; max-width:none; max-height:none; background:transparent; }
  #lightbox::backdrop { background:rgba(0,0,0,.82); }
  #lightbox img { width:100%; height:100%; object-fit:contain; }
  #lbclose { position:absolute; top:12px; right:12px; width:44px; height:44px; padding:0;
             border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff;
             font-size:26px; line-height:44px; cursor:pointer;
             -webkit-tap-highlight-color:transparent; }

  /* Devlog: ratkotut ongelmat esimerkkeinä, ennen/jälkeen-kuvapareina. */
  .back { display:inline-block; margin-bottom:12px; font-size:14px; color:var(--accent); }
  .log { background:var(--card); border:1px solid var(--line); border-radius:12px;
         padding:16px 18px; margin-bottom:18px; }
  .log header { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
  .log h2 { font-size:17px; margin:0; }
  .log time { color:var(--muted); font-size:13px; }
  .log dl { margin:12px 0 0; display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; }
  .log dt { color:var(--muted); font-size:13px; }
  .log dd { margin:0; }
  .pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
          gap:12px; margin-top:14px; }
  .missing { margin:0; padding:24px 14px; color:var(--muted); font-size:13px; text-align:center; }
  .source { margin:12px 0 0; color:var(--muted); font-size:13px; }