/* Generated from flask-templates.zip for the Rust/Axum Tera port. */
/* Source templates: _system_theme.html, _navbar.html, _audio_player.html. */
:root {
  color-scheme: dark light;
  --bg: #101112;
  --bg-soft: #171a22;
  --card: rgba(20, 24, 34, .88);
  --card-strong: rgba(24, 29, 42, .96);
  --text: #f5f7fb;
  --muted: #b6c0cf;
  --border: rgba(255,255,255,.13);
  --accent: #8ecbff;
  --accent-strong: #5db8ff;
  --danger: #ff6b7a;
  --ok: #54d6a1;
  --warn: #facc15;
  --shadow-soft: 0 18px 45px rgba(0,0,0,.24);
  --radius-xl: 24px;
  --radius-lg: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="light"], html[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-soft: #e9eef7;
  --card: rgba(255,255,255,.90);
  --card-strong: rgba(255,255,255,.98);
  --text: #101827;
  --muted: #526173;
  --border: rgba(15,23,42,.13);
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --shadow-soft: 0 18px 45px rgba(15,23,42,.10);
}
:root[data-theme="trans_pride"], html[data-theme="trans_pride"] {
  --bg: linear-gradient(135deg, #5bcffa 0%, #f5abb9 38%, #ffffff 50%, #f5abb9 62%, #5bcffa 100%);
  --bg-soft: rgba(255,255,255,.52);
  --card: rgba(255,255,255,.74);
  --card-strong: rgba(255,255,255,.88);
  --text: #102033;
  --muted: #45556b;
  --border: rgba(16,32,51,.16);
  --accent: #5bcffa;
  --accent-strong: #f5abb9;
  --shadow-soft: 0 18px 40px rgba(91,207,250,.20);
}
:root[data-theme="blue_bird"], html[data-theme="blue_bird"], :root[data-theme="blue_bird_dark"], html[data-theme="blue_bird_dark"] {
  --accent: #1d9bf0;
  --accent-strong: #1a8cd8;
}
:root[data-theme="dracula"], html[data-theme="dracula"] {
  --bg: #282a36;
  --bg-soft: #343746;
  --card: rgba(68,71,90,.88);
  --card-strong: rgba(68,71,90,.98);
  --text: #f8f8f2;
  --muted: #c7c7d2;
  --border: rgba(248,248,242,.16);
  --accent: #bd93f9;
  --accent-strong: #ff79c6;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px)); }
body.pc-shell-body, body { min-height: 100dvh; margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, .btn, input[type="submit"] { border: 0; border-radius: 999px; padding: 10px 15px; font-weight: 800; background: var(--accent); color: #06111f; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
button:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
input, textarea, select { border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card), #000 12%); color: var(--text); padding: 11px 12px; font: inherit; }
textarea { min-height: 120px; resize: vertical; }
.card, .feed-card, .panel, .settings-card, .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.muted, .info, .subtle { color: var(--muted); }
.todo, .migration-note { border-left: 4px solid var(--warn); padding-left: 12px; }
.pill, .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; background: color-mix(in srgb, var(--accent), transparent 84%); color: var(--text); font-weight: 750; }
.app-shell-main { width: min(1180px, calc(100vw - 28px)); margin: 0 auto; padding: 24px 0 56px; }
.app-nav { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px clamp(12px, 3vw, 22px); background: color-mix(in srgb, var(--card-strong), transparent 4%); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px) saturate(1.25); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.app-nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 900; text-decoration: none; }
.app-nav__logo { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #06111f; }
.app-nav__links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.app-nav__link { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 11px; color: var(--text); text-decoration: none; background: transparent; }
.app-nav__link:hover, .app-nav__link.is-active { background: color-mix(in srgb, var(--accent), transparent 84%); }
.app-nav__user { display: inline-flex; align-items: center; gap: 8px; border-left: 1px solid var(--border); padding-left: 10px; margin-left: 4px; color: var(--muted); }
.app-nav__avatar { width: 30px; height: 30px; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent), transparent 68%); color: var(--text); font-weight: 900; }
.platform-audio-player { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 12000; display: none; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 12px; border: 1px solid var(--border); border-radius: 24px; background: var(--card-strong); box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.platform-audio-player.is-visible { display: grid; }
.platform-audio-player audio { width: 100%; }
@media (max-width: 760px) { .app-nav { align-items: flex-start; flex-direction: column; } .app-nav__links { margin-left: 0; } .app-shell-main { width: min(100vw - 18px, 1180px); padding-top: 14px; } }