/* Minimal reset + shared vars — imported by all templates */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Accessible palette and focus (UI-11, 2026-10-05) ──────────────────────
   Light accent fills (#60a5fa, #34d399, #f87171, #fbbf24) carry dark text:
   white on them measured 1.7–2.8:1, dark navy gives 6.4–10.7:1 (WCAG AA ≥ 4.5).
   Pages define their own --ta-* colours inline; these names are new. */
:root {
  --ta-on-accent: #0f172a;        /* text on the light accent fills */
  --ta-accent-hover: #93c5fd;     /* blue fill on hover: 9.9:1 with the dark text */
  --ta-hint: #94a3b8;             /* secondary text: 5.7:1 on the #1e293b panel */
  --ta-focus: #93c5fd;            /* focus ring: 8.1:1 on the panel */
}
/* A visible keyboard focus ring everywhere. The browser default measured
   rgb(16,16,16) on the dark theme, i.e. invisible. */
:focus-visible { outline: 2px solid var(--ta-focus); outline-offset: 2px; }

/* App switcher: the templates used Tailwind-like class names, but this site does not load Tailwind.
   Keep the component self-contained so it renders consistently on every page. */
/* App switcher visibility — controlled via JS style.display, not class */
#app-switcher-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  width: 320px;
  max-height: min(72vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 0;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  -webkit-overflow-scrolling: touch;
}

#app-switcher-menu > .app-switcher-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--ta-line-soft);
}

#app-switcher-menu > .app-switcher-row:hover { background: rgba(148,163,184,.10); }
#app-switcher-menu > .app-switcher-row.current { background: rgba(16,185,129,.24); }
#app-switcher-menu > .app-switcher-row.current:hover { background: rgba(16,185,129,.32); }
#app-switcher-menu > .app-switcher-row.current .app-switcher-title,
#app-switcher-menu > .app-switcher-row.current .app-switcher-url { color: #fff !important; }

.app-switcher-select-form { flex: 1; display: flex; min-width: 0; }
.app-switcher-select-btn {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.app-switcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 8px !important;
  overflow: hidden;
  background-color: rgba(96,165,250,.16);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(96,165,250,.22);
  font-size: 16px;
}

.app-switcher-text { display: flex; min-width: 0; flex-direction: column; }
.app-switcher-title {
  color: var(--ta-text);
  font-size: 14px;
  font-weight: 600;
  max-width: 205px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-key-count {
  color: #8b95a7;
  font-size: 0.75em;
  font-weight: 400;
  vertical-align: baseline;
}
.app-switcher-url {
  max-width: 205px !important;
  overflow: hidden;
  color: var(--ta-muted) !important;
  font-size: 11px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-switcher-action {
  width: 34px;
  border: 0;
  background: transparent;
  color: #cbd5e1 !important;
  cursor: pointer;
}
.app-switcher-delete { color: #fca5a5 !important; }
.app-switcher-action:hover { background: rgba(59,130,246,.75); color: #fff !important; }

#app-add-btn {
  width: calc(100% - 16px) !important;
  margin: 8px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--ta-blue) !important;
  color: var(--ta-on-accent) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center !important;
  cursor: pointer;
}
#app-add-btn:hover { background: #3b82f6 !important; }

#app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#app-modal.hidden { display: none !important; }
.app-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.app-modal-card {
  position: relative;
  width: min(440px, 100%);
  border: 1px solid var(--ta-line);
  border-radius: 14px;
  background: var(--ta-panel);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.app-modal-head, .app-modal-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--ta-line); }
.app-modal-actions { justify-content:flex-end; border-bottom:0; border-top:1px solid var(--ta-line); }
.app-modal-head h3 { font-size:16px; font-weight:800; margin:0; }
.app-modal-head button { border:0; border-radius:8px; background:var(--ta-blue); color:var(--ta-on-accent); font-size:20px; line-height:1; width:34px; height:34px; cursor:pointer; }
.app-modal-body { display:flex; flex-direction:column; gap:14px; padding:18px; }
.app-modal-body label { display:flex; flex-direction:column; gap:6px; color:var(--ta-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.app-modal-body input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--ta-line); background:var(--ta-bg); color:var(--ta-text); font:inherit; font-size:14px; text-transform:none; letter-spacing:0; font-weight:400; }
#app-error.hidden { display:none !important; }
#app-error { padding:0; min-height:0; background:transparent; border:0; color:#fca5a5; font-size:13px; }

@media (max-width: 700px) {
  #app-switcher-btn > span:nth-child(2) > span:first-child { max-width: 130px !important; }
  #app-switcher-menu { width: min(320px, calc(100vw - 28px)); }
}

/* ── Standalone card pages: login and error pages (body.card-page) ────────── */
body.card-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #0f172a;
  color: #f1f5f9;
  font-family: system-ui, -apple-system, sans-serif;
}
.card-page .card { width: 100%; max-width: 400px; padding: 36px; background: #1e293b; border: 1px solid #334155; border-radius: 16px; }
.card-page .card-logo { margin-bottom: 8px; font-size: 32px; text-align: center; }
.card-page h1 { margin-bottom: 4px; font-size: 22px; font-weight: 800; text-align: center; }
.card-page .card-code { margin-bottom: 6px; color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.card-page .card-sub { margin-bottom: 28px; color: #94a3b8; font-size: 13px; line-height: 1.45; text-align: center; }
.card-page .form-group { margin-bottom: 16px; }
.card-page label { display: block; margin-bottom: 6px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.card-page input {
  width: 100%;
  padding: 11px 13px;
  background: #0f172a;
  color: #f1f5f9;
  border: 1px solid #334155;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.card-page input:focus { border-color: #60a5fa; }
.card-page .card-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: #60a5fa;
  color: var(--ta-on-accent);
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.card-page .card-btn:hover { background: var(--ta-accent-hover); }
.card-page .card-error { margin-bottom: 16px; padding: 10px 13px; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.35); border-radius: 8px; color: #fca5a5; font-size: 13px; }
.card-page .card-hint { margin-top: 20px; color: var(--ta-hint); font-size: 12px; text-align: center; }