:root {
    color-scheme: light;
    --bg: #f5f7ff;
    --surface: #ffffff;
    --surface-muted: rgba(255, 255, 255, 0.7);
    --border: #e2e8f0;
    --text: #0f172a;
    --muted: #64748b;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #10b981;
    --danger: #ef4444;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.12);
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1221;
    --surface: #141c2c;
    --surface-muted: rgba(20, 28, 44, 0.85);
    --border: #233147;
    --text: #f8fafc;
    --muted: #cbd5f5;
    --primary: #60a5fa;
    --primary-dark: #3b82f6;
    --accent: #34d399;
    --shadow-soft: 0 20px 50px rgba(2, 8, 23, 0.7);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: linear-gradient(180deg, var(--bg) 0%, rgba(255, 255, 255, 0.85) 100%);
    color: var(--text);
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

a { color: var(--primary); text-decoration: none; }

a:hover, a:focus-visible { text-decoration: underline; }

.container { width: min(1200px, 94vw); margin: 0 auto; }

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
}

.brand { display: flex; flex-direction: column; }
.brand__name { font-size: 1.7rem; font-weight: 700; }
.brand__tagline { font-size: 0.85rem; color: var(--muted); }

.site-nav { display: flex; align-items: center; gap: 0.75rem; }
.site-nav__link { padding: 0.45rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; }
.site-nav__link:hover, .site-nav__link:focus-visible { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.25); }
.site-nav__link--active { font-weight: 600; background: rgba(37, 99, 235, 0.18); border-color: rgba(37, 99, 235, 0.32); }

.theme-toggle { border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.9rem; background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.theme-toggle__icon { font-size: 1.1rem; }

.site-main { padding: 3rem 0 4.5rem; }

.hero {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.8rem, 4vw, 2.8rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 2.5rem;
}
.hero__label { margin: 0; color: var(--muted); font-size: 0.9rem; }
.hero__time { margin: 0.2rem 0; font-size: clamp(2.4rem, 6vw, 3.5rem); font-weight: 700; letter-spacing: 0.06em; }
.hero__zone { margin: 0; font-weight: 600; color: var(--primary); }
.hero__version { margin: 0; color: var(--muted); font-size: 0.8rem; }
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.toolbar__left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.toolbar__date { margin: 0; font-weight: 600; }
.toolbar__right { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.toolbar__add { display: flex; align-items: center; gap: 0.5rem; }
.toolbar__add input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font: inherit; min-width: 220px; background: var(--surface-muted); color: inherit; }
.toolbar__nav { min-width: 3rem; }

.chips { margin-bottom: 1rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { border: 1px solid rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.12); color: var(--primary); padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.9rem; cursor: pointer; }
.chip:hover, .chip:focus-visible { background: rgba(37, 99, 235, 0.22); }

.timeline-wrapper { overflow-x: auto; padding-bottom: 1.5rem; }
.timeline { display: flex; gap: 1.2rem; min-width: 640px; }

.timezone-column { background: var(--surface); border: 1px solid rgba(255,255,255,0.04); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); min-width: 220px; display: flex; flex-direction: column; }
.timezone-column[draggable="true"] { cursor: grab; }

.timezone-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: grid; gap: 0.35rem; position: sticky; top: 0; background: var(--surface); z-index: 2; }
.timezone-header__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.timezone-header__city { margin: 0; font-size: 1.1rem; font-weight: 600; }
.timezone-header__meta { margin: 0; font-size: 0.85rem; color: var(--muted); }
.timezone-header button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.timezone-header button:hover, .timezone-header button:focus-visible { color: var(--danger); }

.timeline-grid { display: grid; grid-template-rows: repeat(24, minmax(48px, 1fr)); position: relative; flex: 1; }
.timeline-cell { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; cursor: pointer; position: relative; transition: background 0.2s ease, color 0.2s ease; }
.timeline-cell__info { display: flex; flex-direction: column; gap: 0.2rem; }
.timeline-cell__date { font-size: 0.75rem; color: var(--muted); }
.timeline-cell:last-child { border-bottom: none; }

.timeline-cell__time { font-weight: 600; }
.timeline-cell__offset { font-size: 0.8rem; color: var(--muted); }

.timeline-cell.is-business { background: rgba(16, 185, 129, 0.08); }
.timeline-cell.is-current { border-left: 3px solid var(--primary); }
.timeline-cell.is-selected { background: rgba(37, 99, 235, 0.15); color: var(--primary-dark); }
.timeline-cell.is-highlight { background: rgba(37, 99, 235, 0.08); }

.meetings { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,0.04); padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1rem; }
.meetings__header h2 { margin: 0; }
.meetings__header p { margin: 0.3rem 0 0; color: var(--muted); }
.meetings__summary { display: grid; gap: 0.6rem; }
.meetings__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; background: rgba(37, 99, 235, 0.04); border-radius: var(--radius-sm); padding: 0.8rem 1rem; }
.meetings__form { display: grid; gap: 0.6rem; }
.meetings__label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.meetings__form input,
.meetings__form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font: inherit; background: var(--surface-muted); color: inherit; box-shadow: none; }
.meetings__form textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.meetings__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.site-footer { background: rgba(15, 23, 42, 0.92); color: rgba(255, 255, 255, 0.9); padding: 2.2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-footer__contact { color: #cbd5f5; }
.site-footer__version { font-size: 0.75rem; opacity: 0.7; }

@media (max-width: 768px) {
    .hero { flex-direction: column; align-items: flex-start; }
    .toolbar__add input { min-width: 180px; }
    .timeline { min-width: 540px; }
    .timezone-column { min-width: 200px; }
    .meetings__item { flex-direction: column; align-items: flex-start; }
}