/* Shared design tokens for the catalog, sign-in and owner pages.
   html[data-theme] is set by theme.js: "light" or "dark"; absent = follow the device. */
:root{
  --font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  --font-display:"Inter Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --radius-s:8px;--radius:12px;--radius-l:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bg:#f6f4f0;--bg-elev:#ffffff;--surface:#ffffff;--surface-2:#f1eee8;--surface-3:#e9e5dd;
  --line:#e6e1d8;--line-strong:#d4cdc1;
  --text:#15171b;--text-2:#3c424b;--muted:#6c727c;
  --accent:#a46f12;--accent-strong:#8a5c0c;--accent-ink:#ffffff;--accent-soft:rgba(164,111,18,.11);
  --good:#2f7d4a;--warn:#a2561b;--danger:#b4372b;
  --shadow-s:0 1px 2px rgba(20,18,14,.06),0 2px 8px rgba(20,18,14,.05);
  --shadow:0 10px 30px rgba(20,18,14,.10),0 2px 6px rgba(20,18,14,.06);
  --shadow-l:0 30px 80px rgba(20,18,14,.18);
  --scrim:rgba(246,244,240,.78);--backdrop:rgba(20,18,14,.45);
  --poster-bg:linear-gradient(145deg,#e7e2d9,#d9d2c6);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0a0b0e;--bg-elev:#101217;--surface:#13161c;--surface-2:#1a1e26;--surface-3:#222731;
    --line:#232831;--line-strong:#323946;
    --text:#f3f1ec;--text-2:#c3c8d0;--muted:#8b919c;
    --accent:#e7b65c;--accent-strong:#f2c878;--accent-ink:#17120a;--accent-soft:rgba(231,182,92,.13);
    --good:#86d29b;--warn:#f0b07a;--danger:#ff8f80;
    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 12px 32px rgba(0,0,0,.45);
    --shadow-l:0 40px 100px rgba(0,0,0,.65);
    --scrim:rgba(10,11,14,.72);--backdrop:rgba(3,4,6,.72);
    --poster-bg:linear-gradient(145deg,#1d222b,#14171d);
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --bg:#0a0b0e;--bg-elev:#101217;--surface:#13161c;--surface-2:#1a1e26;--surface-3:#222731;
  --line:#232831;--line-strong:#323946;
  --text:#f3f1ec;--text-2:#c3c8d0;--muted:#8b919c;
  --accent:#e7b65c;--accent-strong:#f2c878;--accent-ink:#17120a;--accent-soft:rgba(231,182,92,.13);
  --good:#86d29b;--warn:#f0b07a;--danger:#ff8f80;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --shadow-l:0 40px 100px rgba(0,0,0,.65);
  --scrim:rgba(10,11,14,.72);--backdrop:rgba(3,4,6,.72);
  --poster-bg:linear-gradient(145deg,#1d222b,#14171d);
  color-scheme:dark;
}
/* Language selector (built by i18n.js into [data-lang-toggle]) */
.lang-select{position:relative;display:inline-flex;align-items:center;margin:0;padding:0;font-size:13px;font-weight:500;color:var(--text)}
.lang-select svg{position:absolute;left:10px;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;pointer-events:none}
.lang-select select{appearance:none;-webkit-appearance:none;min-height:38px;width:auto;padding:0 28px 0 31px;border:1px solid var(--line);border-radius:999px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--text);font:inherit;font-size:13px;cursor:pointer;box-shadow:none}
.lang-select select:hover{border-color:var(--line-strong)}
.top-tools{display:flex;align-items:center;gap:8px}
.lang-select.compact{gap:6px;height:38px;padding:0 10px 0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.lang-select.compact:hover{border-color:var(--line-strong);background:var(--surface-2)}
.lang-select.compact svg{position:static;width:16px;height:16px;stroke:var(--text-2)}
.lang-select.compact .lang-chev{width:13px;height:13px;stroke:var(--muted);stroke-width:2.4;fill:none;stroke-linecap:round}
.lang-code{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--text)}
.lang-select.compact select{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer;border:0}
.lang-select.compact:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:620px){.top-tools .lang-select select{width:44px;padding:0;color:transparent;background-image:none}.top-tools .lang-select svg{left:14px;stroke:var(--text-2)}.top-tools .lang-select select option{color:var(--text)}}
/* Theme switcher (built by theme.js into [data-theme-toggle]) */
.theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.theme-switch button{display:grid;place-items:center;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;box-shadow:none;transition:background .15s,color .15s}
.theme-switch button:hover{color:var(--text);background:transparent}
.theme-switch button:active{transform:none}
.theme-switch button[aria-pressed=true]{background:var(--surface-3);color:var(--text);box-shadow:var(--shadow-s)}
.theme-switch svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Language switch cover: spinner, then a Reload button if the page takes too long. */
.lang-switching{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lang-switching-box{display:grid;justify-items:center;gap:10px;min-width:220px;padding:26px 28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.lang-switching-box p{margin:0;font-size:15px}.lang-switching-box .lang-slow{color:var(--muted);font-size:13px}
.lang-switching-box [data-reload]{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 22px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}
.lang-switching-box [hidden]{display:none}
.lang-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--accent);animation:lang-spin .8s linear infinite}
@keyframes lang-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lang-spinner{animation-duration:2.4s}}
.loading-note{grid-column:1/-1;margin:24px 0;color:var(--muted);text-align:center}