@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oxygen:wght@400;700&display=swap');

:root {
    --gold: #bb7831;
    --gold-dark: #965d25;
    --blue: #32586b;
    --blue-soft: #426c80;
    --blue-deep: #203f4f;
    --sand: #dabb95;
    --cream: #f7f2ea;
    --mist: #eef1f2;
    --white: #fff;
    --ink: #294b5b;
    --muted: #687a82;
    --line: rgba(50, 88, 107, .16);
    --danger: #9a3737;
    --success: #426f50;
    --shadow: 0 18px 48px rgba(32, 63, 79, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 15px/1.6 Manrope, sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3 { margin-top: 0; font-family: Oxygen, Manrope, sans-serif; font-weight: 700; letter-spacing: -1px; line-height: 1.08; }
h1 { margin-bottom: 8px; color: var(--blue); font-size: clamp(34px, 4vw, 55px); }
h2 { margin-bottom: 18px; color: var(--blue); font-size: 28px; }
h3 { margin-bottom: 12px; color: var(--blue); font-size: 21px; }
p { overflow-wrap: anywhere; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: grid;
    min-height: 92px;
    padding: 12px clamp(18px, 3vw, 48px);
    background: var(--blue);
    box-shadow: 0 12px 32px rgba(32, 63, 79, .16);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}
.brand { display: flex; min-width: 210px; align-items: center; gap: 14px; color: #fff; font-weight: 800; }
.brand:hover { color: var(--sand); }
.brand img { width: 145px; height: 56px; object-fit: contain; }
.brand span { max-width: 220px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px; }
.topbar nav a { padding: 8px 9px; border-radius: 8px; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 750; white-space: nowrap; }
.topbar nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.topbar nav a.active { background: var(--sand); color: var(--blue-deep); }
.menu-toggle { display: none; }
.demo-toolbar { display: flex; min-height: 74px; padding: 12px clamp(18px,3vw,48px); background: var(--sand); color: var(--blue-deep); align-items: center; justify-content: space-between; gap: 22px; }
.demo-toolbar > div:first-child { display: grid; gap: 2px; }
.demo-toolbar strong { font-size: 17px; }
.demo-toolbar span { font-size: 13px; }
.demo-toolbar .actions { align-items: center; }
.demo-toolbar form { margin: 0; }
.demo-toolbar .button.ghost { border-color: rgba(32,63,79,.2); background: rgba(255,255,255,.72); }

.content { width: min(1380px, calc(100% - 42px)); min-height: calc(100vh - 162px); margin: 0 auto; padding: 52px 0 90px; }
.page-head { display: flex; margin-bottom: 32px; align-items: flex-end; justify-content: space-between; gap: 32px; }
.page-head p { max-width: 800px; margin: 0; color: var(--muted); font-size: 17px; }
.panel { margin-bottom: 26px; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.panel.soft { background: var(--cream); box-shadow: none; }
.panel-head { display: flex; margin-bottom: 22px; align-items: center; justify-content: space-between; gap: 24px; }
.panel-head h2 { margin: 0; }
.grid { display: grid; gap: 24px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.quick-links { display: grid; margin-bottom: 28px; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.quick-links a { min-height: 105px; padding: 22px; border-radius: 8px; background: var(--cream); color: var(--blue); font-size: 18px; font-weight: 800; }
.quick-links a:hover { background: var(--sand); color: var(--blue-deep); transform: translateY(-2px); }
.quick-links small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }

.button { display: inline-flex; min-height: 46px; padding: 11px 18px; border: 1px solid transparent; border-radius: 8px; align-items: center; justify-content: center; color: #fff; font: 750 14px/1.15 Manrope,sans-serif; cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); color: #fff; }
.button.primary { background: var(--gold); }
.button.primary:hover { background: var(--gold-dark); }
.button.secondary { background: var(--blue); }
.button.secondary:hover { background: var(--blue-deep); }
.button.ghost { border-color: var(--line); background: #fff; color: var(--blue); }
.button.ghost:hover { background: var(--mist); color: var(--blue-deep); }
.button.danger { background: var(--danger); }
.button.small { min-height: 36px; padding: 7px 11px; font-size: 12px; }

.stack { display: grid; gap: 18px; }
.fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.fields.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
label { display: grid; align-content: start; color: var(--blue); font-weight: 750; gap: 7px; }
label small { color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(50,88,107,.25); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
textarea { min-height: 135px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: 3px solid rgba(187,120,49,.15); }
.checkline { display: flex; align-items: flex-start; color: var(--ink); font-weight: 600; gap: 10px; }
.checkline input { width: 19px; height: 19px; min-height: 19px; margin-top: 2px; accent-color: var(--gold); }
.role-options { display: grid; padding: 16px 18px; border-radius: 8px; background: var(--mist); gap: 9px; }
.role-options > strong { color: var(--blue); }
.role-options > small { color: var(--muted); }
.preset-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.preset-card { position: relative; display: grid; padding: 10px; border: 2px solid transparent; border-radius: 8px; background: var(--mist); cursor: pointer; gap: 9px; }
.preset-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(187,120,49,.13); }
.preset-card > input { position: absolute; top: 16px; right: 16px; z-index: 2; width: 19px; height: 19px; min-height: 19px; accent-color: var(--gold); }
.preset-card > strong { padding: 0 4px 3px; color: var(--blue); font-size: 13px; }
.preset-preview { display: grid; min-height: 118px; padding: 14px; border-radius: 6px; background: var(--preset-bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); grid-template-columns: 1fr 1fr; align-content: center; gap: 8px; }
.preset-preview i { height: 12px; border-radius: var(--preset-radius); background: var(--preset-primary); grid-column: 1/-1; }
.preset-preview b, .preset-preview em { display: block; height: 25px; border: 1px solid color-mix(in srgb,var(--preset-primary) 20%,transparent); border-radius: var(--preset-radius); background: var(--preset-panel); }
.preset-preview small { height: 25px; border-radius: var(--preset-radius); background: var(--preset-accent); grid-column: 1/-1; }
.custom-preview { --preset-bg: linear-gradient(135deg,#f6b3c8,#ecd983,#acd6bd,#9ecce2); --preset-panel: #fff; --preset-primary: #32586b; --preset-accent: #bb7831; --preset-radius: 8px; }
.preset-divider { display: flex; margin: 34px 0 22px; align-items: center; color: var(--blue); font-size: 18px; font-weight: 800; gap: 16px; }
.preset-divider::before, .preset-divider::after { height: 2px; background: var(--gold); content: ""; flex: 1; }
.preset-divider span { flex: 0 0 auto; }
.custom-preset-meta { margin-bottom: 24px; }
.styling-workbench { display: grid; grid-template-columns: minmax(460px,.9fr) minmax(520px,1.1fr); align-items: start; gap: 24px; }
.styling-workbench:has(.custom-style-settings[hidden]) { grid-template-columns: 1fr; }
.styling-workbench > .panel { margin-bottom: 0; }
.custom-style-settings[hidden] { display: none; }
.custom-style-settings .fields.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
.range-settings { display: grid; margin-top: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.range-settings output { color: var(--gold-dark); font-weight: 800; }
.range-settings input[type="range"] { padding: 0; accent-color: var(--gold); }
.styling-preview { position: sticky; top: 112px; margin-top: 0; }
.styling-preview .booking-preview { min-height: 900px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions form { margin: 0; }
.filters { display: grid; margin-bottom: 22px; grid-template-columns: repeat(4,minmax(0,1fr)) auto; align-items: end; gap: 12px; }
.filters.compact { grid-template-columns: minmax(220px, 360px) auto; justify-content: start; }
.hours-grid { display: grid; gap: 10px; }
.hour-row { display: grid; padding: 14px 16px; border-radius: 8px; background: var(--mist); grid-template-columns: minmax(120px,1fr) minmax(130px,.8fr) minmax(130px,.8fr) minmax(170px,1fr); align-items: center; gap: 14px; }
.hour-row label { font-size: 12px; }
.hour-row input { min-height: 42px; }
.color-input { display: grid; grid-template-columns: 72px 1fr; gap: 9px; }
.color-input input[type="color"] { padding: 3px; }
.copy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.booking-preview { display: block; width: 100%; min-height: 760px; border: 0; border-radius: 8px; background: var(--cream); }
.dashboard-summary { display: grid; margin-bottom: 34px; border-top: 1px solid var(--line); }
.dashboard-summary article { display: flex; min-height: 64px; padding: 15px 4px; border-bottom: 1px solid var(--line); align-items: baseline; gap: 10px; }
.dashboard-summary strong { color: var(--blue); font: 700 22px/1 Oxygen,Manrope,sans-serif; }
.dashboard-summary span { color: var(--ink); font-size: 16px; }
.summary-grid { display: grid; margin-bottom: 26px; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; }
.summary-grid article { padding: 22px; border-radius: 8px; background: var(--cream); }
.summary-grid strong { display: block; color: var(--blue); font: 700 32px Oxygen,Manrope,sans-serif; }
.summary-grid span { color: var(--muted); font-size: 13px; }
.message-list { display: grid; gap: 12px; }
.message-list article { display: grid; padding: 18px; border-radius: 8px; background: var(--mist); grid-template-columns: minmax(180px,.7fr) minmax(260px,1.5fr) auto; align-items: start; gap: 18px; }
.message-list article p { margin: 0; }
.message-list article small { display: block; color: var(--muted); }

.reservation-calendar-panel { overflow-x: auto; }
.reservation-calendar-head { display: grid; min-width: 920px; margin-bottom: 14px; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 14px; }
.reservation-calendar-head h2 { margin: 0; text-align: center; text-transform: capitalize; }
.calendar-arrow { display: grid; width: 44px; height: 44px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 30px; line-height: 1; place-items: center; }
.calendar-arrow:hover { background: var(--gold); color: #fff; }
.reservation-calendar { display: grid; min-width: 920px; grid-template-columns: repeat(7,minmax(120px,1fr)); gap: 7px; }
.reservation-calendar.weekdays { margin-bottom: 7px; }
.reservation-calendar.weekdays strong { padding: 9px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; text-align: center; }
.calendar-day { position: relative; display: flex; min-height: 145px; padding: 13px; border: 2px solid transparent; border-radius: 8px; flex-direction: column; background: #f7f9f9; color: var(--ink); gap: 5px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.calendar-day:hover { z-index: 2; color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(32,63,79,.16); }
.calendar-day.selected { border-color: var(--blue-deep); box-shadow: inset 0 0 0 2px #fff, 0 8px 22px rgba(32,63,79,.2); }
.calendar-day-number { display: grid; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.82); color: var(--blue-deep); font-weight: 850; place-items: center; }
.calendar-day-numbers { display: grid; margin-top: 3px; gap: 1px; font-size: 11px; }
.calendar-day-numbers b { font-size: 16px; }
.calendar-day small, .calendar-day em { display: block; color: inherit; font-size: 10px; font-style: normal; line-height: 1.25; opacity: .85; }
.calendar-day > strong { margin-top: auto; margin-bottom: auto; text-align: center; }
.calendar-day.calendar-blank { min-height: 0; border: 0; background: transparent; box-shadow: none; }
.calendar-day.empty-day { background: #f5f7f7; }
.calendar-day.booked { background: #fff3bd; }
.calendar-day.quarter { background: #e9b44c; }
.calendar-day.half { background: #a8cf75; }
.calendar-day.high { background: #8ed1e9; }
.calendar-day.full { background: #c49ad8; }
.calendar-day.blocked { background: #e68b8b; color: #fff; }
.calendar-day.closed { background: #d9dfe1; color: #687a82; }
.calendar-day.partly-blocked { background-image: linear-gradient(135deg,transparent 0 82%,rgba(154,55,55,.75) 82% 100%); }
.partial-note { margin-top: auto; font-weight: 750; }
.capacity-bar { height: 6px; margin-top: auto; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.58); }
.capacity-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue-deep); }
.calendar-legend { display: flex; min-width: 920px; margin-top: 18px; flex-wrap: wrap; gap: 10px 20px; }
.calendar-legend span { display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; font-weight: 650; gap: 7px; }
.calendar-legend i { width: 16px; height: 16px; border-radius: 4px; background: #f5f7f7; }
.calendar-legend .legend-booked { background: #fff3bd; }
.calendar-legend .legend-quarter { background: #e9b44c; }
.calendar-legend .legend-half { background: #a8cf75; }
.calendar-legend .legend-high { background: #8ed1e9; }
.calendar-legend .legend-full { background: #c49ad8; }
.calendar-legend .legend-blocked { background: #e68b8b; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--blue); font-size: 12px; letter-spacing: .03em; white-space: nowrap; }
td strong, td small { display: block; }
td small { margin-top: 3px; color: var(--muted); }
tbody tr:hover { background: rgba(238,241,242,.55); }
.badge { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 999px; background: var(--mist); color: var(--blue); font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.confirmed, .badge.completed, .badge.paid, .badge.active { background: #dcebdc; color: var(--success); }
.badge.pending, .badge.open { background: #fff0cc; color: #7a5600; }
.badge.cancelled, .badge.failed, .badge.no_show { background: #f4dddd; color: var(--danger); }

.notice { margin-bottom: 24px; padding: 15px 18px; border-radius: 8px; font-weight: 650; }
.notice.success { background: #dcebdc; color: var(--success); }
.notice.error { background: #f4dddd; color: var(--danger); }
.notice.warning { background: #fff0cc; color: #7a5600; }
.empty { padding: 35px; border: 1px dashed var(--line); border-radius: 8px; background: var(--mist); color: var(--muted); text-align: center; }
.meta-list { display: grid; margin: 0; grid-template-columns: 190px 1fr; gap: 10px 20px; }
.meta-list dt { color: var(--blue); font-weight: 800; }
.meta-list dd { margin: 0; }
.danger-zone { margin-top: 30px; padding: 24px; border: 1px solid rgba(154,55,55,.25); border-radius: 8px; background: #fff8f8; }
.danger-zone h3 { color: var(--danger); }

footer { padding: 25px; background: var(--blue-deep); color: rgba(255,255,255,.72); text-align: center; font-size: 13px; }
.auth-page { display: grid; min-height: 100vh; padding: 36px 18px; background: linear-gradient(135deg,var(--blue-deep),var(--blue-soft)); place-items: center; }
.auth-card { width: min(520px,100%); padding: 40px; border-radius: 8px; background: #fff; box-shadow: 0 28px 80px rgba(20,46,58,.32); }
.auth-card > img { display: block; width: 250px; height: auto; margin: 0 0 28px; }
.auth-card h1 { font-size: 44px; }
.auth-card > p { color: var(--muted); }

@media (max-width: 1180px) {
    .topbar { grid-template-columns: auto auto; }
    .menu-toggle { display: inline-flex; width: 48px; height: 48px; margin-left: auto; border: 0; border-radius: 8px; background: var(--sand); align-items: center; justify-content: center; color: var(--blue-deep); font-size: 24px; }
    .topbar nav { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: 18px; background: var(--blue-deep); box-shadow: 0 18px 35px rgba(0,0,0,.2); }
    .topbar nav.open { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .topbar nav a { padding: 12px; text-align: center; }
    .quick-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .preset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .styling-workbench { grid-template-columns: 1fr; }
    .styling-preview { position: static; }
}

@media (max-width: 760px) {
    .brand span { display: none; }
    .topbar nav.open { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .content { width: min(100% - 28px,1380px); padding-top: 34px; }
    .page-head { align-items: stretch; flex-direction: column; }
    .grid.two, .fields, .fields.three, .filters, .filters.compact, .hour-row, .copy-row, .message-list article, .range-settings { grid-template-columns: 1fr; }
    .quick-links { grid-template-columns: 1fr; }
    .preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .demo-toolbar { align-items: stretch; flex-direction: column; }
    .demo-toolbar .actions { display: grid; grid-template-columns: 1fr; }
    .demo-toolbar .actions > * { width: 100%; }
    .panel { padding: 22px; }
    .meta-list { grid-template-columns: 1fr; gap: 2px; }
    .meta-list dd { margin-bottom: 12px; }
    .auth-card { padding: 28px 22px; }
}

@media print {
    .topbar, footer, .no-print, .page-head .actions { display: none !important; }
    body { background: #fff; color: #000; }
    .content { width: 100%; padding: 0; }
    .panel { padding: 0; border: 0; box-shadow: none; }
    th, td { padding: 8px; color: #000; }
}