:root {
  --font-tiny-caps: "Arial Narrow", "Aptos Narrow", "Segoe UI", Arial, sans-serif;
  --font-form: "Segoe UI", Roboto, Arial, sans-serif;
  --ink: #0b1f33;
  --ink-2: #102a43;
  --panel: #123a5a;
  --panel-2: #163b5a;
  --line: #335b79;
  --paper: #f8fbff;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-text: #ffffff;
  --tech: #5eead4;
  --muted: #9eb7cc;
  --text: #f8fbff;
  --success: #2f9e77;
  --danger: #d95d67;
  --d: var(--ink);
  --card: var(--panel);
  --card2: var(--panel-2);
  --l: var(--text);
  --x: var(--accent);
  --acid: var(--accent);
}

/*
 * PiliApp Tiny Capital is a Unicode text converter, not an embeddable font.
 * Use real CSS small caps instead so Czech diacritics, copying, searching and
 * screen readers keep the original text while the whole product shares the
 * same compact capital-letter character.
 */
html,
body,
button {
  font-family: var(--font-tiny-caps) !important;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
}

body {
  letter-spacing: .018em;
}

button {
  letter-spacing: .025em;
}

/* Form controls stay in the original, highly readable font. */
input,
select,
textarea {
  font-family: var(--font-form) !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* The reservation/login forms use the original readable interface font. */
.panel,
.panel *,
form,
form * {
  font-family: var(--font-form) !important;
  font-variant-caps: normal !important;
  font-feature-settings: normal !important;
  font-style: normal !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.logo,
.tag,
.kicker,
.eyebrow,
.cta,
.btn-primary,
.btn-ghost {
  font-family: var(--font-tiny-caps) !important;
  font-style: normal !important;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
}

body { background-color: var(--ink); color: var(--text); }
.top, nav { background-color: var(--ink) !important; border-color: var(--line) !important; }
.hero { background: radial-gradient(circle at 80% 30%, #185b78, var(--ink) 52%) !important; }
.booking { background: radial-gradient(circle at 15% 20%, var(--panel) 0, #0d2c45 42%, var(--ink) 100%) !important; }
.panel { background: linear-gradient(145deg, var(--panel-2), var(--ink-2)) !important; border-color: var(--line) !important; box-shadow: 0 28px 80px #000a !important; }
.choice.on { background: linear-gradient(100deg, #174b66, #102f4a) !important; border-color: var(--tech) !important; box-shadow: inset 4px 0 0 var(--tech), 0 12px 30px #0004 !important; }
.choice:hover, .day:hover, .time:hover { border-color: var(--tech) !important; }
.day.on, .time.on { background: linear-gradient(90deg, #60a5fa, var(--tech)) !important; color: #081b2c !important; border-color: transparent !important; box-shadow: 0 8px 24px #0003 !important; }
.primary, .btn-primary, .adminHead button, .adminTabs button.on, #cancel {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 12px 30px #0004 !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.primary:hover, .btn-primary:hover, .adminHead button:hover, .adminTabs button.on:hover, #cancel:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--accent-text) !important;
  transform: translateY(-2px);
}
.primary:active, .btn-primary:active, .adminHead button:active, .adminTabs button.on:active, #cancel:active { transform: translateY(0); }
.cta { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--accent) !important; box-shadow: none !important; font-weight: 800 !important; }
.cta:hover { background: var(--accent) !important; color: var(--accent-text) !important; border-color: var(--accent) !important; }
.cta:active { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.navlinks a.cta, .mobile-menu .mobile-menu-panel a:last-child { background: transparent !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.navlinks a.cta:hover, .mobile-menu .mobile-menu-panel a:last-child:hover { background: var(--accent) !important; color: var(--accent-text) !important; border-color: var(--accent) !important; }
.navlinks a.cta:focus-visible, .mobile-menu .mobile-menu-panel a:last-child:focus-visible { background: transparent !important; color: var(--accent) !important; border-color: var(--accent-hover) !important; outline: 2px solid var(--accent) !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important; }
.navlinks a.cta:active, .mobile-menu .mobile-menu-panel a:last-child:active { background: var(--accent-hover) !important; color: var(--accent-text) !important; border-color: var(--accent-hover) !important; outline: none !important; box-shadow: none !important; }
.btn-ghost { border: 1px solid var(--line) !important; background: transparent !important; color: var(--text) !important; box-shadow: none !important; }
.btn-ghost:hover { border-color: var(--tech) !important; background: var(--panel-2) !important; }
.final { position: relative; overflow: hidden; padding-inline: 24px !important; background: radial-gradient(circle at 50% 0%, #185b78 0, var(--panel) 48%, var(--ink) 100%) !important; color: var(--text) !important; border-top: 1px solid var(--line); }
.final::before { content: ""; position: absolute; width: 420px; height: 420px; left: 50%; top: -310px; transform: translateX(-50%); border-radius: 50%; background: var(--tech); filter: blur(100px); opacity: .10; pointer-events: none; }
.final h2 { position: relative; color: var(--text) !important; width: min(100%, 980px); font-size: clamp(38px, 6vw, 78px) !important; line-height: .98 !important; overflow-wrap: normal; }
.final .btn-primary { position: relative; display: inline-flex !important; min-width: 230px; justify-content: center; background: var(--accent) !important; color: var(--accent-text) !important; border: 1px solid var(--accent) !important; box-shadow: 0 14px 34px #0004 !important; }
.tag, .shop, .admin th, .intro h1 em, .intro h2 em { color: var(--tech) !important; }
.kicker, .eyebrow { color: var(--accent) !important; }
.avatar { background: var(--ink-2) !important; color: var(--tech) !important; }
.summary { border-left-color: var(--tech) !important; }
.check, .statusBadge { background: var(--success) !important; color: #0d1a11 !important; }
.statusBadge.completed { background: #bcebdc !important; color: #124b3d !important; }
.statusBadge.no_show, .error { border-color: var(--danger) !important; }
.admin, .authShell { background: var(--ink) !important; }
.settingsCard, .calendarWorkspace, .barberCard, .statsCard, .clientCard { background-color: var(--panel-2) !important; border-color: var(--line) !important; }
.adminTabs button, .settingsCard button, .adminTools button, .bookingActions button { border-color: var(--line) !important; }
.card { background: var(--paper); }
.brand { color: var(--text) !important; }
.brand i { color: var(--accent) !important; }
.empty { background-color: var(--panel-2); color: var(--muted); }
.ok { color: #edf8ef !important; background: #233a29 !important; border-left: 4px solid var(--success); }
.back { color: var(--muted) !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* Booking, calendar and admin surfaces share the same navy/cobalt system. */
.choice, .day, .time, .customer input, .customer select,
.settingsCard input, .settingsCard textarea, .adminTools select,
.adminTools button, .bookingActions button, .adminTabs button,
.settingsCard button {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.field > label, .customer label, .calDay h4 { color: #dce9f5 !important; }
.choice strong { color: #ffffff !important; }
.calendarWorkspace { background: #0d2940 !important; border-color: var(--line) !important; }
.calendarToolbar { background: var(--panel) !important; border-left-color: var(--tech) !important; }
.calendarScroll, .calEntries { scrollbar-color: var(--tech) var(--ink-2) !important; }
.calDay, .barberCard { background: var(--ink-2) !important; border-color: var(--line) !important; }
.calDay.today, .barberCard { border-top-color: var(--tech) !important; }
.calEntry, .barberSlot { border-color: #27445f !important; }
.calEntry b, .barberSlot b, .calMore { color: var(--tech) !important; }
.calMore, .calModalCard, .calModalClose { background: var(--panel) !important; border-color: var(--line) !important; color: var(--text) !important; }
.statusBadge { background: var(--success) !important; color: #071f19 !important; }
.statusBadge.no_show { background: #6f2932 !important; color: #ffe5e8 !important; }
.settingsDay, .settingsTime { background: var(--panel-2) !important; color: var(--text) !important; border-color: var(--line) !important; }
.settingsDay.on, .settingsTime.on { background: linear-gradient(90deg, #60a5fa, var(--tech)) !important; color: #081b2c !important; border-color: transparent !important; }

@media (max-width: 760px) {
  .hero { background: radial-gradient(circle at 88% 18%, #185b78, var(--ink) 55%) !important; }
  .final { padding-inline: 18px !important; }
  .final h2 { font-size: clamp(34px, 11vw, 54px) !important; line-height: 1 !important; }
  .final .btn-primary { width: min(100%, 340px) !important; }
}