/* SkyVault brand: locally hosted official wordmark and Bai Jamjuree type. */
@font-face {
  font-family: "Bai Jamjuree";
  src: url("brand/bai-jamjuree-regular.04fc1cc7c132.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bai Jamjuree";
  src: url("brand/bai-jamjuree-bold.4ac9dcab91f1.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #100e18;
  --white: #fff;
  --ink: #f7f6fa;
  --muted: #aaa6b8;
  --green: #9255f5;
  --green-dark: #771deb;
  --line: #34303f;
  --soft: #262131;
  --dark: #14121b;
  --surface: #1a1723;
  --brand-purple: #5900cc;
  --radius: 12px;
  font-family: "Bai Jamjuree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { background: var(--paper); }
input, select, .button, .stat-card, .date-sidebar, .photo-card,
.table-card, .content-card, .filter-bar, .form-dialog {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
input:focus, select:focus { outline-color: #b48af7; border-color: #b48af7; }
input::placeholder { color: #8e899e; }
.button { border-radius: 8px; font-size: 12px; }
.button:hover:not(:disabled), .icon-button:hover { background: #30273f; }
.button.primary { background: var(--brand-purple); border-color: #792cda; }
.button.primary:hover:not(:disabled) { background: #771deb; border-color: #9c63ef; }
.button:disabled { opacity: .55; }
.muted, .subtle, .field-label, .filter-bar label, .page-heading p,
.role-guide, .sync-details dt, .form-dialog form>label,
.login-form label, .login-help, .login-bottom { color: var(--muted); }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.green, .heading-dot { color: #b583ff; }
.icon-button { color: #c3b8d8; }
.tag { color: #d8bfff; background: #2c1c43; border-color: #5c338a; }
.tag.secondary { color: #b8b2c6; background: #26222f; border-color: #443b51; }
.status-dot { background: #b987ff; }
.sidebar { border-right: 1px solid #302b39; }
.brand { display: flex; align-items: flex-start; flex-direction: column; gap: 11px; }
.brand-logo-wrap { display: block; width: 176px; overflow: hidden; }
.brand-logo { display: block; width: 176px; height: auto; max-width: none; }
.brand .brand-caption { color: #b1a8c2; font-size: 8px; font-weight: 400; letter-spacing: 2px; line-height: 1.5; }
.sidebar-label { margin-top: 39px; color: #8d859e; letter-spacing: 1.6px; text-transform: uppercase; font-size: 9px; }
.sidebar .brand .brand-caption { font-size: 8px; letter-spacing: 1.1px; color: #b1a8c2; }
.nav-link { color: #bab4c9; border: 1px solid transparent; }
.nav-link:hover { background: #251d32; color: #fff; }
.nav-link.active { background: #322046; border-color: #614080; color: #fff; }
.nav-arrow { color: #ceabff; }
.nav-icon svg { width: 20px; height: 20px; display: block; }
.sidebar-note { border-color: #35303e; margin-top: 40px; }
.sidebar-note p { font-family: inherit; color: #d4cde0; font-size: 17px; line-height: 1.5; }
.note-symbol { color: #a970fa; }
.sidebar-note>span { color: #8b819c; }
.source-health { color: #aaa0ba; border-color: #37313f; }
.account-button { color: #eee8f8; }
.account-button small, .account-edit, .logout-button { color: #a89cb9; }
.avatar { background: #382448; border-color: #70518b; color: #e2c9ff; }
.topbar { background: #15121d; border-color: #332c3f; }
.breadcrumb, .topbar-right { color: #ada5bb; }
.breadcrumb strong { color: #e4ddeb; }
.breadcrumb span { color: #756b85; }
.page-heading { margin-bottom: 30px; }
.page-heading h1 { font-weight: 700; font-size: clamp(28px, 2.7vw, 38px); letter-spacing: -.9px; }
.page-heading p { max-width: 680px; }
.stat-card { position: relative; background: linear-gradient(135deg, #21192e, #18151f 75%); }
.stat-card>span { color: #b8b0c7; }
.stat-card>strong { font-weight: 700; letter-spacing: -.8px; }
.stat-card small, .stat-card small span { color: #aaa0ba; }
.stat-range>strong { font-weight: 400; }
.calendar-weekdays, .calendar-legend { color: #aaa0ba; }
.calendar-day { color: #c6bed2; }
.calendar-day:hover { background: #342547; }
.calendar-day.selected { background: #6e22d6; color: #fff; }
.calendar-day.available:after, .calendar-dot { background: #bd8eff; }
.calendar-day.selected:after { background: #fff; }
.calendar-day.today:not(.selected) { box-shadow: inset 0 0 0 1px #8d61b8; }
#gallery-date { background: #211a2c; color: #f3ecff; }
.date-tip { color: #a99cba; border-color: #393140; }
.gallery-toolbar select { background: #201a2b; }
.photo-card { border-radius: 9px; }
.photo-card:hover { border-color: #72518f; box-shadow: 0 8px 25px #0004; }
.photo-image-wrap { background: #262131; }
.photo-time { background: #100e18c9; }
.photo-index { background: #191022b8; }
.photo-meta>span, .photo-failed { color: #aaa0ba; }
.empty-state { background: #1b1624; border-color: #574466; }
.empty-state .empty-icon { color: #b28ad4; }
.empty-state p { color: #b3a6c2; }
.skeleton-card { background-image: linear-gradient(100deg, #231c2f 30%, #362843 50%, #231c2f 70%); }
.workspace-footer, .footer-slash { color: #94889f; border-color: #302938; }
.filter-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 20px; padding: 22px; margin-bottom: 0; border-radius: 12px 12px 0 0; }
.filter-bar .grow { min-width: 0; }
.filter-bar label { font-size: 11px; }
.filter-bar input, .filter-bar select { background: #241d30; font-size: 12px; height: 42px; }
.timelapse-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; min-height: 49px; margin-bottom: 22px; color: #bfb2d1; font-size: 12px; line-height: 1.6; background: #21192e; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.timelapse-feedback[data-state="loading"] { color: #dcc1ff; }
.timelapse-feedback[data-state="error"] { color: #ffbaaf; background: #341f2c; }
.timelapse-feedback .button { flex-shrink: 0; }
.timelapse-range-help { padding: 12px 22px; line-height: 1.65; font-size: 11px; background: var(--surface); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.sequence-status { display: flex; align-items: center; gap: 15px; padding: 12px 22px; margin-bottom: 22px; background: #21192e; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; }
.sequence-status .timelapse-feedback { flex: 1; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.sequence-status .button { flex-shrink: 0; }
.player-container { background: #18131f; color: #d1c5df; border: 1px solid #41324f; box-shadow: 0 16px 45px #0003; }
.player-top { border-color: #403148; }
.player-stage, .lightbox-stage { background: #09070e; }
.play-outline { border-color: #76528d; color: #c599f0; }
.player-empty h2 { color: #eee4fb; font-family: inherit; font-weight: 400; }
.player-empty p { color: #b3a4c5; }
.player-loading { display: flex; align-items: center; gap: 10px; background: #201529ef; color: #fff; border: 1px solid #8054a4; padding: 13px 19px; z-index: 3; white-space: nowrap; box-shadow: 0 8px 30px #0006; }
.player-loading::before { content: ""; width: 15px; height: 15px; flex: none; border: 2px solid #72518b; border-top-color: #d6b0ff; border-radius: 50%; animation: buffer-spin .8s linear infinite; }
@keyframes buffer-spin { to { transform: rotate(360deg); } }
.player-timestamp { background: #140c20c9; }
.player-seek { background: #5a3f70; accent-color: #bb83ff; }
.play-button { background: #a465f5; color: #11041d; }
.player-action, .fps-label, .loop-label { color: #c6b4da; }
.fps-label select { background: #30203e; color: #eadcf7; border-color: #614478; }
.player-footnote, .player-footnote>span:last-child { color: #b0a1bf; }
th { background: #251c31; color: #c6b8d8; }
td, .sync-details>div { border-color: #34283f; }
.user-email, .inactive-status { color: #a99db9; }
.active-status { color: #d0a6ff; }
.text-button { color: #c995ff; }
.source-icon { color: #c393f5; background: #322041; }
.info-note { background: #251b32; border-color: #9562bb; color: #c4b4d4; }
.toast { background: #42225d; border: 1px solid #8557a7; }
.toast.error { background: #6a2937; border-color: #ad6973; }
.form-error { color: #ffc2b3; background: #36202b; border-color: #734351; }
.form-dialog::backdrop, .photo-dialog::backdrop { background: #090511c9; }
.photo-dialog { background: #1c1527; color: #e6d9f1; border-color: #79568f; }
.lightbox-top .icon-button { color: #d9bfe8; }
.lightbox-arrow { background: #32203fbf; }
.lightbox-bottom .button { background: #3b2451; color: #efdcff; border-color: #7e579e; }
.login-story { background: #100e18; border-right: 1px solid #3c2e4d; }
.login-main { background: #191420; }
.login-story .brand { gap: 15px; }
.login-story .brand-logo-wrap, .login-story .brand-logo { width: 220px; }
.login-story .brand-caption { font-size: 10px; }
.story-art { background: radial-gradient(ellipse at center, #6a20b72e, transparent 65%); }
.orbit { border-color: #7c4fa95e; }
.art-cross, .art-label { color: #b18bd0; }
.art-center { color: #c48bff; }
.story-copy .eyebrow { color: #bf89ff; }
.story-copy h1 { font-family: inherit; font-size: clamp(30px, 3vw, 48px); font-weight: 700; color: #fff; letter-spacing: -1.2px; }
.story-copy p { color: #bdb0cf; }
.story-footer { border-color: #4c365f; color: #a48ab9; }
.login-form input { background: #271d32; color: #fff; border-color: #4c3a5d; }
.login-form input::placeholder { color: #a491b5; }
.login-submit { font-size: 14px; height: 50px; }
.login-box h2 { font-weight: 700; }
.mobile-password { color: #c68fff; }
@media(max-width:1200px) {
  .sidebar .brand-logo-wrap, .sidebar .brand-logo { width: 151px; }
  .sidebar .brand-caption { font-size: 7px; letter-spacing: 1.6px; }
}
@media(min-width:681px) and (max-width:900px) {
  .sidebar .brand-logo-wrap { width: 39px; }
  .sidebar .brand-logo { width: 176px; }
  .sidebar .brand-caption { display: none; }
  .sidebar .brand { align-items: center; }
  .filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .sidebar { height: 66px; gap: 10px; }
  .sidebar .brand { align-items: flex-start; flex-shrink: 1; gap: 0; min-width: 70px; }
  .sidebar .brand-logo-wrap, .sidebar .brand-logo { width: 108px; max-width: 100%; }
  .sidebar .brand-caption { display: none; }
  .filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; gap: 14px 12px; }
  .filter-bar .grow { min-width: 0; }
  .filter-bar input, .filter-bar select { font-size: 12px; padding-left: 9px; padding-right: 8px; }
  .timelapse-feedback { padding: 12px 16px; font-size: 11px; align-items: flex-start; }
  .timelapse-range-help { padding: 10px 16px; font-size: 10px; }
  .sequence-status { padding: 12px 16px; gap: 10px; }
  .player-top { min-height: 44px; height: auto; padding: 10px 12px; gap: 12px; }
  .player-top>span:first-child { flex-shrink: 0; }
  .player-top>span:last-child { max-width: 65%; font-size: 9px; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .page-heading h1 { font-size: 30px; }
  .login-story .brand-logo-wrap, .login-story .brand-logo { width: 160px; }
  .login-story .brand-caption { display: none; }
  .story-copy h1 { font-size: 32px; max-width: 300px; }
  .story-copy { padding-top: 45px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}