:root {
  --navy: #0e1b33; --navy-2: #172a4d; --ink: #1c2434; --muted: #64748b; --line: #e2e8f0;
  --bg: #f5f7fa; --card: #ffffff; --accent: #e8962e; --accent-2: #c9781a; --ok: #16a34a; --warn: #d97706; --danger: #dc2626;
  --radius: 12px; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05);
  --text-on-dark: #dbe3f0; --hero-text: #334155; --form-label: #334155; --news-summary: #475569; --th-bg: #f8fafc;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  --navy: #0b1526; --navy-2: #9fb4d8; --ink: #e5e9f0; --muted: #94a3b8; --line: #263247;
  --bg: #0f172a; --card: #17213a; --hero-text: #cbd5e1; --form-label: #cbd5e1; --news-summary: #b6c2d3; --th-bg: #1c2740;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --navy: #0b1526; --navy-2: #9fb4d8; --ink: #e5e9f0; --muted: #94a3b8; --line: #263247;
  --bg: #0f172a; --card: #17213a; --hero-text: #cbd5e1; --form-label: #cbd5e1; --news-summary: #b6c2d3; --th-bg: #1c2740;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  color-scheme: dark;
} }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; }
a { color: var(--navy-2); text-decoration: none; } a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
h1 { font-size: 2rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; } h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
p { margin: 0 0 .8em; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page { padding: 28px 20px 60px; min-height: 60vh; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .mono { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.lead { font-size: 1.15rem; color: var(--hero-text); max-width: 60ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--accent); font-weight: 700; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; }

/* ---------- top bar ---------- */
.topbar { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.1rem; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 38px; width: 38px; border-radius: 8px; background: var(--card); padding: 3px; object-fit: contain; }
.brand-text strong { color: var(--accent); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav > a, .dropbtn { color: #dbe3f0; padding: 8px 11px; border-radius: 8px; font-weight: 500; font-size: .93rem; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav > a:hover, .dropbtn:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
.nav > a.active { color: #fff; background: rgba(255,255,255,.14); }
.nav .btn { margin-left: 8px; color: #fff; }
.dropdown { position: relative; }
.dropmenu { display: none; position: absolute; right: 0; top: 100%; background: var(--card); color: var(--ink); min-width: 220px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px; z-index: 60; }
.dropdown:hover .dropmenu, .dropdown:focus-within .dropmenu { display: block; }
.dropmenu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: .92rem; }
.dropmenu a:hover, .dropmenu a.active { background: var(--bg); text-decoration: none; }
.mini-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 62px; left: 0; right: 0; background: var(--navy); flex-direction: column; align-items: stretch; padding: 10px 16px 16px; }
  body.nav-open .nav { display: flex; }
  .dropmenu { position: static; box-shadow: none; background: rgba(255,255,255,.06); }
  .dropmenu a { color: #dbe3f0; }
  .brand-text { display: none; }
}

/* ---------- buttons, badges, forms ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 9px; font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: .95rem; transition: .15s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff !important; } .btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--navy-2); } .btn-ghost:hover { background: var(--card); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-ms { background: var(--card); color: #222 !important; border-color: #8c8c8c; } .btn-apple { background: #000; color: #fff !important; }
.btn.disabled { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-ok { background: #dcfce7; color: #166534; } .badge-warn { background: #fef3c7; color: #92400e; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.form label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 12px; color: var(--form-label); }
.form input, .form textarea, .form select, .inline-form input, .city-search input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; margin-top: 4px; background: var(--card); }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid rgba(232,150,46,.45); border-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.form-actions { display: flex; gap: 10px; margin-top: 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.inline-form input { width: auto; flex: 1; min-width: 200px; margin: 0; }
.flashes { padding-top: 14px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-weight: 500; }
.flash-success { background: #dcfce7; color: #166534; } .flash-error { background: #fee2e2; color: #991b1b; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); align-items: center; }
.seg a { padding: 6px 12px; font-weight: 600; } .seg a.active { background: var(--navy); color: #fff; }
.seg .btn { border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-size: .9rem; margin: 3px; user-select: none; }
.chip:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip input { accent-color: var(--accent); }
.chip-x { margin-left: 4px; opacity: .6; font-weight: 700; } .chip-x:hover { opacity: 1; color: var(--danger); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 40px 0 30px; }
.hero h1 { font-size: 2.6rem; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-logos { display: grid; gap: 12px; }
.hero-logo-card { display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--card); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); color: var(--ink); transition: .15s; }
.hero-logo-card:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.hero-logo-card img { grid-row: span 2; width: 70px; height: 54px; object-fit: contain; }
.hero-logo-card span { font-weight: 700; } .hero-logo-card small { color: var(--muted); }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } }
.page-hero { text-align: center; padding: 20px 0 10px; }
.page-hero-logo { height: 90px; margin-bottom: 8px; }

/* ---------- sections ---------- */
.section { padding: 30px 0; border-top: 1px solid var(--line); }
.section-sm { margin-bottom: 26px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.section-head h1, .section-head h2 { margin-bottom: 0; }
.announce-strip { display: grid; gap: 8px; margin-bottom: 10px; }
.announce { padding: 10px 14px; border-radius: 8px; background: #eef2ff; border-left: 4px solid #6366f1; margin-bottom: 8px; }
.announce-warning { background: #fffbeb; border-color: var(--warn); } .announce-urgent { background: #fef2f2; border-color: var(--danger); }
.announce p { margin: 4px 0; }

/* ---------- weather ---------- */
.wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.wx-grid-compact, .wx-strip { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wx-strip { display: grid; gap: 10px; }
.wx-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; color: var(--ink); }
.wx-compact { padding: 12px 14px; }
.wx-head { display: flex; justify-content: space-between; align-items: flex-start; }
.wx-head .wicon { flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(15,23,42,.12)); }
.demo-dot { color: var(--warn); font-size: .6rem; vertical-align: middle; }
.wx-city { font-weight: 700; font-size: 1.02rem; } .wx-country { color: var(--muted); font-size: .8rem; }
.wx-main { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.wx-temp { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; } .wx-compact .wx-temp { font-size: 1.7rem; }
.wx-cond { color: var(--muted); font-weight: 500; }
.wx-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .78rem; }
.wx-day-name { color: var(--muted); font-weight: 600; } .wx-day-temp { font-weight: 600; } .wx-day-temp small { color: var(--muted); font-weight: 400; }
.local-wx { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#geo-result .wx-card { min-width: 260px; }

/* ---------- news ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: var(--navy-2); }
.tab.active { background: var(--navy); color: #fff; border-color: var(--navy); } .tab:hover { text-decoration: none; border-color: var(--navy); }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.news-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; background: var(--card); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); }
.news-item:has(> div:only-child) { grid-template-columns: 1fr; }
.news-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.news-title { font-weight: 600; color: var(--navy); display: block; }
.news-summary { font-size: .88rem; color: var(--news-summary); margin: 4px 0; }
.news-meta { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.news-source { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px 2px 4px; color: var(--ink); }
.news-source strong { font-weight: 600; } .news-domain { color: var(--muted); }
.favicon { width: 16px; height: 16px; border-radius: 4px; background: var(--card); }

/* ---------- companies / about / contact ---------- */
.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.company-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; }
.company-card img { height: 64px; object-fit: contain; object-position: left; margin-bottom: 12px; }
.company-card .btn { margin-top: auto; align-self: flex-start; }
.company-list { display: grid; gap: 14px; }
.company-row { display: grid; grid-template-columns: 160px 1fr; gap: 20px; background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); align-items: start; }
.company-row img { width: 100%; height: 90px; object-fit: contain; }
@media (max-width: 640px) { .company-row { grid-template-columns: 1fr; } }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.value-card { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .value-icon { font-size: 1.8rem; }
.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; } @media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.contact-cards { display: grid; gap: 12px; }
.contact-card { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; }
.contact-card img { width: 90px; height: 60px; object-fit: contain; }
.prose { max-width: 75ch; } .prose h1 { margin-top: 0; }

/* ---------- login ---------- */
.login-wrap { display: flex; justify-content: center; padding: 30px 0; }
.login-card { max-width: 440px; width: 100%; text-align: center; padding: 32px; }
.login-logo { height: 80px; margin-bottom: 10px; }
.login-buttons { display: grid; gap: 10px; margin: 20px 0; }
.login-buttons .btn { justify-content: center; padding: 12px; }
.demo-login { text-align: left; border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 10px; }
.demo-login summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin-bottom: 8px; }

/* ---------- portal shell ---------- */
.portal-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 62px); }
.sidebar { background: var(--card); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 62px; height: calc(100vh - 62px); overflow: auto; }
.sidebar-user { display: flex; gap: 10px; align-items: center; padding: 6px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.sidebar-name { font-weight: 700; font-size: .95rem; } .sidebar-email { font-size: .75rem; color: var(--muted); word-break: break-all; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a { padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 500; font-size: .93rem; }
.sidenav a:hover { background: var(--bg); text-decoration: none; } .sidenav a.active { background: var(--navy); color: #fff; }
.sidebar-ms { margin-top: auto; font-size: .85rem; }
.portal-main { padding: 26px 28px 60px; min-width: 0; }
@media (max-width: 860px) { .portal-shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .sidenav { flex-direction: row; flex-wrap: wrap; } .sidebar-ms { margin-left: auto; } .portal-main { padding: 18px 16px 40px; } }
.dash-head { margin-bottom: 16px; }
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-side { display: grid; gap: 16px; }
.dash-side .card h2 { font-size: 1.05rem; }

/* ---------- tiles ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--card); border-radius: 10px; padding: 16px 10px 12px; box-shadow: var(--shadow); color: var(--ink); transition: .15s; border: 1px solid transparent; }
.tile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.tile-disabled { opacity: .5; }
.tile-logo { width: 56px; height: 44px; object-fit: contain; }
.tile .msicon { width: 48px; height: 48px; filter: drop-shadow(0 2px 4px rgba(15,23,42,.18)); }
.tile-emoji { font-size: 2rem; line-height: 44px; }
.tile-title { font-weight: 600; font-size: .9rem; } .tile-desc { font-size: .74rem; color: var(--muted); }

/* ---------- ask bar ---------- */
.ask-bar { margin-bottom: 22px; padding: 14px 16px; }
.ask-form { display: flex; gap: 8px; align-items: center; }
.ask-icon { font-size: 1.3rem; }
.ask-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; }
.ask-form select { padding: 10px; border-radius: 8px; border: 1px solid var(--line); font: inherit; background: var(--card); }
.ask-answer { margin-top: 12px; padding: 14px 16px; background: var(--bg); border-radius: 10px; white-space: pre-wrap; line-height: 1.55; }
.ask-answer .ask-meta { display: block; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.chat-log { display: grid; gap: 10px; margin-bottom: 12px; }
.chat-msg { padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; max-width: 90%; }
.chat-user { background: var(--navy); color: #fff; justify-self: end; } .chat-ai { background: var(--bg); }
@media (max-width: 600px) { .ask-form { flex-wrap: wrap; } .ask-form input { min-width: 100%; } }
.q-card { margin-bottom: 8px; padding: 12px 16px; }
.q-card summary { cursor: pointer; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 500; }
.q-answer { margin-top: 10px; white-space: pre-wrap; background: var(--bg); padding: 12px; border-radius: 8px; }
.q-list, .mail-list, .event-list, .file-list { list-style: none; padding: 0; margin: 0; }
.q-list li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.mail-list li a { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mail-list li a:hover { text-decoration: none; background: var(--bg); }
.mail-from { font-weight: 600; font-size: .88rem; } .mail-subject { grid-column: 1 / -1; font-size: .9rem; } .mail-time { font-size: .75rem; color: var(--muted); }
.mail-preview { grid-column: 1 / -1; font-size: .8rem; }
.mail-list li.unread .mail-subject { font-weight: 700; }
.event-list li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); }
.event-time { font-size: .78rem; color: var(--accent-2); font-weight: 700; }
.file-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------- wizard ---------- */
.wizard { max-width: 860px; margin: 10px auto; padding: 28px; scroll-margin-top: 80px; }
.steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; counter-reset: s; }
.steps li { flex: 1; padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: .85rem; font-weight: 600; color: var(--muted); }
.steps li::before { counter-increment: s; content: counter(s) " · "; }
.steps li.active { background: var(--navy); color: #fff; } .steps li.done { background: #dcfce7; color: #166534; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 20px; }
.lang-opt { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--card); }
.lang-opt:has(input:checked) { border-color: var(--accent); background: #fff7ed; }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 22px; gap: 10px; }
.wizard-nav #wz-next, .wizard-nav #wz-finish { margin-left: auto; }
.summary li { margin-bottom: 4px; }
.city-picker { margin-top: 10px; }
.city-search { position: relative; margin-bottom: 14px; }
.city-results { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 20; max-height: 260px; overflow: auto; }
.city-results button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font: inherit; cursor: pointer; }
.city-results button:hover { background: var(--bg); }
.city-region { margin-bottom: 10px; }
.city-chips { display: flex; flex-wrap: wrap; }
.settings .card { margin-bottom: 16px; }

/* ---------- admin ---------- */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.admin-tabs a { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: .88rem; }
.admin-tabs a.active { background: var(--navy); color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; color: var(--ink); }
.stat:hover { text-decoration: none; border: 1px solid var(--accent); }
.stat-n { font-size: 2rem; font-weight: 800; color: var(--navy); }
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--th-bg); }
.table.small td, .table.small th { padding: 6px 8px; font-size: .84rem; }
.trunc { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.form-admin { max-width: 760px; }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: #cbd5e1; padding: 30px 0; margin-top: 30px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer-brands { display: flex; gap: 12px; }
.footer-brands img { height: 40px; width: 90px; object-fit: contain; background: var(--card); border-radius: 8px; padding: 5px; }
.footer-meta { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; text-align: right; }
.footer a { color: #fff; }
@media (max-width: 700px) { .footer-meta { text-align: left; } }

/* ---------- dark-mode tweaks ---------- */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] .news-title, :root[data-theme="dark"] .stat-n { color: #f1f5f9; }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .footer { background: #060b16; }
:root[data-theme="dark"] .sidenav a.active, :root[data-theme="dark"] .tab.active, :root[data-theme="dark"] .chip:has(input:checked), :root[data-theme="dark"] .steps li.active, :root[data-theme="dark"] .admin-tabs a.active, :root[data-theme="dark"] .seg a.active, :root[data-theme="dark"] .chat-user, :root[data-theme="dark"] .avatar { background: var(--accent); color: #fff; border-color: var(--accent); }
:root[data-theme="dark"] .announce { background: #1e2a4a; } :root[data-theme="dark"] .announce-warning { background: #3a2a10; } :root[data-theme="dark"] .announce-urgent { background: #3a1616; }
:root[data-theme="dark"] .flash-success { background: #14532d; color: #bbf7d0; } :root[data-theme="dark"] .flash-error { background: #7f1d1d; color: #fecaca; }
:root[data-theme="dark"] .badge-ok { background: #14532d; color: #bbf7d0; } :root[data-theme="dark"] .badge-warn { background: #713f12; color: #fde68a; }
:root[data-theme="dark"] .lang-opt:has(input:checked) { background: #3a2a10; }
:root[data-theme="dark"] .favicon { background: #fff; }
:root[data-theme="dark"] .ask-answer, :root[data-theme="dark"] .q-answer, :root[data-theme="dark"] .chat-ai, :root[data-theme="dark"] .steps li, :root[data-theme="dark"] .news-source { background: #0f172a; }
:root[data-theme="dark"] .btn-ms { background: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) .news-title, :root:not([data-theme="light"]) .stat-n { color: #f1f5f9; }
  :root:not([data-theme="light"]) .topbar, :root:not([data-theme="light"]) .footer { background: #060b16; }
  :root:not([data-theme="light"]) .sidenav a.active, :root:not([data-theme="light"]) .tab.active, :root:not([data-theme="light"]) .chip:has(input:checked), :root:not([data-theme="light"]) .steps li.active, :root:not([data-theme="light"]) .admin-tabs a.active, :root:not([data-theme="light"]) .seg a.active, :root:not([data-theme="light"]) .chat-user, :root:not([data-theme="light"]) .avatar { background: var(--accent); color: #fff; border-color: var(--accent); }
  :root:not([data-theme="light"]) .announce { background: #1e2a4a; } :root:not([data-theme="light"]) .announce-warning { background: #3a2a10; } :root:not([data-theme="light"]) .announce-urgent { background: #3a1616; }
  :root:not([data-theme="light"]) .flash-success { background: #14532d; color: #bbf7d0; } :root:not([data-theme="light"]) .flash-error { background: #7f1d1d; color: #fecaca; }
  :root:not([data-theme="light"]) .badge-ok { background: #14532d; color: #bbf7d0; } :root:not([data-theme="light"]) .badge-warn { background: #713f12; color: #fde68a; }
  :root:not([data-theme="light"]) .lang-opt:has(input:checked) { background: #3a2a10; }
  :root:not([data-theme="light"]) .favicon { background: #fff; }
  :root:not([data-theme="light"]) .ask-answer, :root:not([data-theme="light"]) .q-answer, :root:not([data-theme="light"]) .chat-ai, :root:not([data-theme="light"]) .steps li, :root:not([data-theme="light"]) .news-source { background: #0f172a; }
  :root:not([data-theme="light"]) .btn-ms { background: #fff; }
}

/* ---------- theme toggle ---------- */
.theme-btn { font-size: 1rem; line-height: 1; padding: 8px 10px; }
.theme-ico::before { content: "🖥"; } [data-theme="light"] .theme-ico::before { content: "☀️"; } [data-theme="dark"] .theme-ico::before { content: "🌙"; }

/* ---------- flights ---------- */
.flight-search { display: flex; gap: 10px; margin-bottom: 18px; }
.flight-search input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1.05rem; text-transform: uppercase; background: var(--card); color: var(--ink); }
.flight-card { display: grid; gap: 18px; }
.flight-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.flight-no { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
[data-theme="dark"] .flight-no { color: #f1f5f9; }
.flight-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.flight-iata { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.flight-airport-name { font-weight: 600; }
.flight-times { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; margin: 6px 0 2px; }
.delay { color: var(--danger); font-weight: 700; }
.flight-arrow { text-align: center; }
.flight-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat-mini { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.stat-mini span { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat-mini strong { font-size: 1.05rem; }
.flight-map iframe { width: 100%; height: 320px; border: 0; border-radius: 10px; }
@media (max-width: 700px) { .flight-route { grid-template-columns: 1fr; } .flight-arrow { display: none; } }

/* ---------- email assistant ---------- */
.mail-list-lg li { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.mail-list-lg li a { border-bottom: 0; }
.mail-ai { font-size: .85rem; padding: 6px 10px; margin: 2px 0 6px; background: var(--bg); border-radius: 8px; }
.pri { font-weight: 700; text-transform: capitalize; } .pri-urgent { color: var(--danger); } .pri-high { color: var(--warn); }
.mail-actions { margin: 2px 0 4px; }
.draft-box { margin: 6px 0 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.draft-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.draft-controls input { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--card); color: var(--ink); }
.draft-controls select { padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--card); color: var(--ink); }
.draft-text { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--card); color: var(--ink); margin-bottom: 8px; }
.draft-save { align-items: center; }
/* ---------- admin agent ---------- */
.agent-grid { grid-template-columns: 1.3fr 1fr; }
.agent-chat .chat-log { min-height: 260px; max-height: 60vh; overflow: auto; }
.proposal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.proposal-list li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.proposal-summary { font-weight: 600; margin-bottom: 4px; } .proposal-summary code { background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: .8rem; }
.proposal-list pre { white-space: pre-wrap; word-break: break-all; background: var(--bg); padding: 6px; border-radius: 6px; max-height: 160px; overflow: auto; }
.cal-flights { margin-bottom: 18px; }

/* ---------- world clocks ---------- */
.clock-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.clock { flex: 0 0 auto; min-width: 128px; background: var(--card); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 3px solid var(--accent); }
.clock-city { font-size: .8rem; font-weight: 600; color: var(--muted); }
.clock-time { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.clock-date { font-size: .75rem; }
.clock-night { border-top-color: #6366f1; } .clock-night .clock-time::after { content: " 🌙"; font-size: .8rem; }
.wx-time { font-variant-numeric: tabular-nums; }
/* ---------- highlights ---------- */
.wx-highlight { margin-bottom: 12px; } .wx-highlight .wx-card { border-left: 5px solid var(--accent); }
.wx-highlight .wx-temp { font-size: 3rem; }
.news-featured { grid-template-columns: 1fr !important; border-left: 5px solid var(--accent); }
.news-featured .news-thumb { width: 100%; height: 220px; margin-bottom: 8px; }
.news-featured .news-title { font-size: 1.25rem; }
.news-list-featured { grid-template-columns: 1fr 1fr; } .news-list-featured .news-featured { grid-column: 1 / -1; }
@media (max-width: 760px) { .news-list-featured { grid-template-columns: 1fr; } }
/* ---------- visitor cities ---------- */
.wx-card { position: relative; }
.wx-remove { position: absolute; top: 6px; right: 8px; z-index: 3; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.wx-remove:hover { background: var(--bg); color: var(--danger); }
.my-cities { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line); }
.city-search-inline { min-width: 280px; position: relative; } .city-search-inline input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--card); color: var(--ink); }
.wx-days-3 { grid-template-columns: repeat(3, 1fr); }
.geo-result { margin-bottom: 10px; } .wx-geo { display: inline-block; min-width: 260px; border-left: 5px solid #3b82f6; }
.staff-link { opacity: .7; }
/* ---------- admin: security & branding ---------- */
.code-input { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .backup-codes code { background: var(--bg); padding: 8px 10px; border-radius: 6px; text-align: center; font-size: 1rem; }
.qr-wrap svg { width: 200px; height: 200px; background: #fff; padding: 6px; border-radius: 8px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.logo-slot { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.logo-slot img { height: 60px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }
.logo-slot input[type=file] { font-size: .8rem; }
.color-grid { display: grid; gap: 8px; } .color-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.color-row input[type=color] { width: 44px; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: var(--card); }
.preview-strip { display: flex; gap: 6px; } .swatch { width: 32px; height: 32px; border-radius: 8px; display: inline-block; }
.service-list { columns: 2; column-gap: 24px; margin: 4px 0 10px; padding-left: 18px; } @media (max-width: 640px) { .service-list { columns: 1; } }
.company-meta { line-height: 1.9; }

/* ---------- password requirements ---------- */
.pw-rules { list-style: none; padding: 10px 12px; margin: 0 0 12px; background: var(--bg); border-radius: 8px; font-size: .84rem; text-align: left; display: grid; gap: 3px; }
.pw-rules li::before { content: "○"; display: inline-block; width: 1.3em; color: var(--muted); font-weight: 700; }
.pw-rules li.bad { color: var(--danger); } .pw-rules li.bad::before { content: "✗"; color: var(--danger); }
.pw-rules li.ok { color: var(--ok); } .pw-rules li.ok::before { content: "✓"; color: var(--ok); }
.pw-rules.pw-touched li:not(.ok) { color: var(--danger); } .pw-rules.pw-touched li:not(.ok)::before { content: "✗"; color: var(--danger); }
.form input[name="password"].invalid, .form input[name="password2"].invalid { border-color: var(--danger); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- developer console ---------- */
.ask-vs-ship { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.ask-vs-ship h4 { margin-bottom: 4px; }
.diff { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; overflow: auto; max-height: 520px; font-size: .8rem; line-height: 1.4; white-space: pre; }
.code-req .q-answer { max-height: 260px; overflow: auto; }

.wizard-steps { padding-left: 22px; line-height: 1.7; font-size: .93rem; } .wizard-steps li { margin-bottom: 6px; } .wizard-steps code { background: var(--bg); padding: 1px 6px; border-radius: 4px; word-break: break-all; }



/* =====================================================================================================
   GROZDANIC GROUP BRAND THEME — near-black & gold, serif typography (overrides the base component styles)
   ===================================================================================================== */
:root {
  --font: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --gold: var(--accent); --gold-soft: color-mix(in srgb, var(--accent) 55%, transparent); --gold-faint: color-mix(in srgb, var(--accent) 18%, transparent);
  --line: color-mix(in srgb, var(--accent) 22%, transparent);
  --hero-text: #3b352e; --form-label: #3b352e; --news-summary: #4d463d; --th-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --shadow: none; --radius: 6px; --navy-2: var(--accent);
}
:root[data-theme="dark"] { --hero-text: #cfc6b5; --form-label: #cfc6b5; --news-summary: #b8ae9c; --th-bg: rgba(255,255,255,.03); --line: color-mix(in srgb, var(--accent) 28%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-text: #cfc6b5; --form-label: #cfc6b5; --news-summary: #b8ae9c; --th-bg: rgba(255,255,255,.03); --line: color-mix(in srgb, var(--accent) 28%, transparent); } }
body { font-family: var(--font); font-size: 17px; letter-spacing: .005em; }
h1, h2, h3, .flight-no, .flight-iata, .stat-n, .wx-city, .wx-temp, .clock-time, .brand-name { font-family: var(--font-display); font-weight: 500; color: var(--ink); letter-spacing: 0; }
h1 { font-size: 3rem; line-height: 1.05; } h2 { font-size: 1.7rem; } h3 { font-size: 1.25rem; }
h4, .eyebrow, .eyebrow-sm, .wx-day-name, .stat-mini span, .table th, .clock-city, .steps li, .admin-tabs a, .tab { font-family: var(--font); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 500; }
.eyebrow { color: var(--gold); } .eyebrow-sm { color: var(--muted); font-size: .68rem; margin-bottom: 4px; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.card, .wx-card, .tile, .news-item, .company-card, .company-row, .value-card, .stat, .table-wrap, .clock, .hero-logo-card, .contact-card, .login-card, .proposal-list li, .logo-slot, .draft-box, .stat-mini { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.tile:hover, .stat:hover, .hero-logo-card:hover { transform: none; border-color: var(--gold); }
.btn { border-radius: 4px; font-family: var(--font); font-weight: 500; letter-spacing: .02em; }
.btn-primary { background: transparent; color: var(--gold) !important; border: 1px solid var(--gold); } .btn-primary:hover { background: var(--gold); color: var(--bg) !important; transform: none; }
.btn-ghost, .btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover, .btn-outline:hover { border-color: var(--gold); background: transparent; transform: none; }
.btn-outline.active { border-color: var(--gold); color: var(--gold); }
.btn-danger { background: transparent; color: #c0392b; border: 1px solid #c0392b; }
.badge { border-radius: 3px; letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; font-family: var(--font); background: var(--gold-faint); color: var(--gold); }
.badge-ok { background: rgba(22,163,74,.15); color: #3f9d5c; } .badge-warn { background: var(--gold-faint); color: var(--gold); }
.flash { border-radius: 4px; border: 1px solid; background: transparent; } .flash-success { color: #3f9d5c; border-color: rgba(63,157,92,.5); } .flash-error { color: #d0553f; border-color: rgba(208,85,63,.5); }
.form input, .form textarea, .form select, .inline-form input, .city-search input, .ask-form input, .ask-form select, .flight-search input, .draft-controls input, .draft-controls select, .draft-text, .city-search-inline input { background: transparent; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-family: var(--font); }
.form input:focus, .form textarea:focus, .form select:focus, .ask-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-faint); }
.chip { border-radius: 4px; background: transparent; border: 1px solid var(--line); } .chip:has(input:checked) { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.tab { border-radius: 4px; background: transparent; border: 1px solid var(--line); color: var(--ink); } .tab.active { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.seg { border-radius: 4px; border: 1px solid var(--line); background: transparent; } .seg a.active { background: var(--gold); color: var(--bg); }
.section { border-top: 1px solid var(--line); }
.announce { background: transparent; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 4px; }
.page-hero-logo, .login-logo { height: 84px; }

/* ---- masthead ---- */
.masthead { background: var(--bg); color: var(--ink); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 16px; color: var(--ink); }
.brand-logo { width: 62px; height: 62px; border-radius: 4px; background: transparent; padding: 0; object-fit: contain; }
.brand-name { display: block; font-size: 2.1rem; line-height: 1; }
.brand-tag { display: block; margin-top: 8px; color: var(--gold); text-transform: uppercase; letter-spacing: .28em; font-size: .68rem; }
.masthead-controls { display: flex; align-items: center; gap: 12px; }
.lang-select { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; color: var(--ink); background: transparent; }
.lang-select select { background: transparent; border: 0; color: var(--ink); font-family: var(--font); font-size: 1rem; cursor: pointer; }
.lang-select select option { color: #222; background: #fff; }
.theme-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.theme-seg button { background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--ink); padding: 10px 14px; cursor: pointer; display: grid; place-items: center; }
.theme-seg button:last-child { border-right: 0; } .theme-seg button.active { background: var(--gold-faint); color: var(--gold); }
.user-card { border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left; }
.user-card .avatar-ring { grid-row: 1 / span 3; }
.avatar-ring { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; position: relative; }
.avatar-ms { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gold); background: var(--bg); font-size: .6rem; display: grid; place-items: center; }
.user-name { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; } .user-email { color: var(--muted); font-size: .8rem; } .user-signout { color: var(--gold); text-decoration: underline; font-size: .85rem; }
.mainnav { border-top: 1px solid var(--line); }
.mainnav-inner { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.mainnav a, .mainnav .dropbtn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 11px; color: var(--ink); font-family: var(--font); font-size: 1rem; border-bottom: 2px solid transparent; white-space: nowrap; background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.mainnav a:hover, .mainnav .dropbtn:hover { text-decoration: none; color: var(--gold); }
.mainnav a.active { background: var(--gold-faint); border-bottom-color: var(--gold); color: var(--ink); }
.mainnav .ui-icon { color: var(--gold); opacity: .9; }
.mainnav .dropdown { position: relative; } .mainnav .dropmenu { background: var(--card); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mainnav .dropmenu a { padding: 10px 14px; border: 0; font-size: 1rem; } .mainnav .dropmenu a:hover { background: var(--gold-faint); }
.nav-toggle { display: none; }
@media (max-width: 980px) {
  .masthead-inner { flex-wrap: wrap; } .masthead-controls { order: 3; width: 100%; justify-content: space-between; flex-wrap: wrap; } .user-card { min-width: 0; width: 100%; justify-items: start; text-align: left; }
  .brand-name { font-size: 1.6rem; }
}
.link-ms-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px dashed var(--line); border-radius: 4px; padding: 10px 14px; margin-bottom: 18px; font-size: .95rem; flex-wrap: wrap; }
.link-ms-strip .btn { border: 1px solid var(--line); }

/* ---- weather cards (reference layout) ---- */
.wx-grid, .wx-grid-compact, .wx-strip { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.wx-card { padding: 26px 26px 22px; color: var(--ink); }
.wx-card .wx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.wx-city { font-size: 2.2rem; line-height: 1.05; } .wx-compact .wx-city { font-size: 1.9rem; }
.wx-time-row { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.wx-now { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.wx-temp { font-size: 3.4rem; line-height: 1; color: var(--ink); } .wx-temp sup { font-size: 1.4rem; vertical-align: top; color: var(--ink); }
.wx-compact .wx-temp { font-size: 2.8rem; }
.wx-rule { border-top: 1px solid var(--line); margin: 18px 0 14px; }
.wx-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.05rem; }
.wx-hl { display: inline-flex; gap: 14px; color: var(--muted); }
.wx-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin-top: 8px; }
.wx-days { grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.wx-day .wicon { color: var(--gold); }
.wx-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.wx-remove { position: static; background: transparent; border: 0; color: var(--muted); font-family: var(--font); font-size: 1rem; cursor: pointer; padding: 6px 2px; }
.wx-remove:hover { color: var(--gold); background: transparent; }
.wx-highlight .wx-card { border-left: 1px solid var(--line); } .wx-highlight .wx-temp { font-size: 3.4rem; }
.wx-head .wicon { filter: none; }
.demo-dot { color: var(--gold); }
.clock { border-top: 1px solid var(--line); border-left: 2px solid var(--gold); } .clock-night { border-left-color: #6f6a8f; }
.clock-time { font-size: 1.7rem; }

/* ---- news / tiles / misc ---- */
.news-featured { border-left: 2px solid var(--gold); }
.news-title { color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.news-source { background: transparent; border: 1px solid var(--line); border-radius: 3px; }
.tile-title { font-family: var(--font-display); font-size: 1.05rem; }
.hero { padding: 40px 0 34px; } .hero h1 { font-size: 3.6rem; }
.hero-logo-card img { background: #fff; border-radius: 3px; padding: 4px; }
.company-card img, .company-row img, .contact-card img, .mini-logo, .tile-logo, .logo-slot img { background: #fff; border-radius: 3px; padding: 4px; }
.footer { background: var(--bg); color: var(--muted); border-top: 1px solid var(--line); }
.footer a { color: var(--gold); }
.footer-brands { align-items: center; gap: 16px; } .footer-mark { width: 44px; height: 44px; } .footer-companies { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; }
.footer-brands img { background: transparent; padding: 0; }
.steps li { background: transparent; border: 1px solid var(--line); } .steps li.active { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.admin-tabs { border-bottom: 1px solid var(--line); } .admin-tabs a.active { background: var(--gold); color: var(--bg); }
.sidenav a.active { background: var(--gold); color: var(--bg); }
.stat-n { color: var(--gold); }
.ask-bar { padding: 18px 20px; } .ask-icon { color: var(--gold); }
.chat-user { background: var(--gold); color: var(--bg); } .chat-ai, .ask-answer, .q-answer { background: transparent; border: 1px solid var(--line); }
.diff { background: #0f0d0b; border: 1px solid var(--line); }
.pri { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.code-input { font-family: var(--font-display); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] .news-title, :root[data-theme="dark"] .flight-no { color: var(--ink); }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .footer { background: var(--bg); }
:root[data-theme="dark"] .sidenav a.active, :root[data-theme="dark"] .tab.active, :root[data-theme="dark"] .chip:has(input:checked), :root[data-theme="dark"] .steps li.active, :root[data-theme="dark"] .admin-tabs a.active, :root[data-theme="dark"] .seg a.active, :root[data-theme="dark"] .chat-user { background: var(--gold); color: var(--bg); border-color: var(--gold); }
:root[data-theme="dark"] .ask-answer, :root[data-theme="dark"] .q-answer, :root[data-theme="dark"] .chat-ai, :root[data-theme="dark"] .steps li, :root[data-theme="dark"] .news-source { background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) .news-title { color: var(--ink); }
  :root:not([data-theme="light"]) .topbar, :root:not([data-theme="light"]) .footer { background: var(--bg); }
  :root:not([data-theme="light"]) .tab.active, :root:not([data-theme="light"]) .chip:has(input:checked), :root:not([data-theme="light"]) .steps li.active, :root:not([data-theme="light"]) .admin-tabs a.active, :root:not([data-theme="light"]) .seg a.active, :root:not([data-theme="light"]) .chat-user { background: var(--gold); color: var(--bg); border-color: var(--gold); }
  :root:not([data-theme="light"]) .ask-answer, :root:not([data-theme="light"]) .q-answer, :root:not([data-theme="light"]) .chat-ai, :root:not([data-theme="light"]) .steps li, :root:not([data-theme="light"]) .news-source { background: transparent; }
}

/* branding admin extras */
.font-preview { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; margin-top: 10px; }
.font-preview .fp-h { font-size: 1.8rem; line-height: 1.1; } .font-preview .fp-b { color: var(--muted); }
.bg-slot img { max-height: 90px; border-radius: 4px; border: 1px solid var(--line); display: block; margin-bottom: 6px; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

/* ---- travel ---- */
.travel-tabs { margin-bottom: 16px; flex-wrap: wrap; }
.travel-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.travel-action { display: grid; gap: 6px; color: var(--ink); text-decoration: none; } .travel-action:hover { border-color: var(--gold); text-decoration: none; }
.ta-icon { color: var(--gold); font-size: 1.4rem; line-height: 1; }
.trip-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); margin-bottom: 8px; } .trip-row:hover { border-color: var(--gold); text-decoration: none; }
.mini-row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); } .mini-row:last-of-type { border-bottom: 0; }
.day-card { margin-bottom: 12px; } .itin { list-style: none; padding: 0; margin: 0; } .itin li { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.itin-time { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold); }
.rest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .rest { display: grid; gap: 6px; align-content: start; color: var(--ink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
ul.plain { padding-left: 18px; margin: 6px 0; }
.offer { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.offer-main { flex: 1; min-width: 260px; display: grid; gap: 10px; } .offer-times { font-size: 1.1rem; }
.offer-side { text-align: right; display: grid; gap: 6px; justify-items: end; } .offer-side form { display: grid; gap: 6px; justify-items: end; } .offer-side input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); font-family: var(--font); }
.offer-price { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--ink); } .offer-price small { font-size: .9rem; color: var(--muted); }
.res-msg { white-space: pre-wrap; border: 1px solid var(--line); border-radius: 4px; padding: 10px; margin-top: 8px; font-family: var(--font); font-size: .9rem; }
.btn-ghost.active { border-color: var(--gold); color: var(--gold); }
.rest .badge { justify-self: start; } .rest .section-head { margin: 0; }

.admin-tabs .claude-here { margin-left: auto; color: var(--gold); }

/* theme-aware logo swap */
.logo-dark { display: none; } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: inline-block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: inline-block; } }
.brand-logo { width: auto; height: 54px; border: 0; } .footer-mark { height: 40px; width: auto; }
.login-logo, .page-hero-logo { height: 120px; width: auto; }
.logo-slot img { background: #888; }

/* ---- background styles (Admin → Branding) ---- */
body.bg-glow { background-image: radial-gradient(1200px 520px at 50% -120px, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); background-repeat: no-repeat; }
body.bg-gradient { background-image: linear-gradient(180deg, var(--bg) 0%, var(--card) 100%); background-attachment: fixed; }
body.bg-grain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
body.bg-lines { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent) 0 1px, transparent 1px 18px); }
body.bg-dots { background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preset { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; color: var(--ink); cursor: pointer; font-family: var(--font); text-align: left; }
.preset.active, .preset:hover { border-color: var(--gold); } .preset.active { background: var(--gold-faint); }
.preset-sw { width: 40px; height: 26px; border-radius: 3px; border: 1px solid; display: flex; align-items: flex-end; gap: 3px; padding: 3px; flex: none; } .preset-sw i { flex: 1; height: 9px; border-radius: 2px; display: block; }

/* ---- intro ---- */
.intro { position: fixed; inset: 0; z-index: 1000; background: var(--intro-bg, #1e1e1e); display: grid; place-items: center; color: var(--intro-ink, #e8e8e8); animation: intro-out .7s ease 2.6s forwards; }
html.intro-on { overflow: hidden; } html:not(.intro-on) .intro { display: none; }
.intro-inner { display: grid; justify-items: center; gap: 18px; text-align: center; animation: intro-in 1.1s ease both; }
.intro-logo { width: min(46vw, 320px); height: auto; }
.intro-line { width: 0; height: 1px; background: var(--intro-accent, #d9d9d9); animation: intro-line 1.2s ease .6s forwards; }
.intro-text { font-family: var(--font); text-transform: uppercase; letter-spacing: .32em; font-size: .78rem; color: var(--intro-accent, #d9d9d9); opacity: 0; animation: intro-fade .8s ease 1s forwards; }
.intro-skip { position: absolute; right: 24px; bottom: 24px; background: transparent; border: 1px solid var(--intro-accent, #d9d9d9); color: var(--intro-accent, #d9d9d9); border-radius: 4px; padding: 6px 14px; cursor: pointer; font-family: var(--font); opacity: .8; }
@keyframes intro-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes intro-line { to { width: 160px; } } @keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { animation-delay: .8s; } .intro-inner, .intro-line, .intro-text { animation-duration: .01s; animation-delay: 0s; } }

/* ---- cookie banner ---- */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; background: var(--card); border: 1px solid var(--gold); border-radius: 6px; padding: 14px 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 16px 40px rgba(0,0,0,.35); max-width: 1100px; margin: 0 auto; }
.cookie-text { flex: 1; min-width: 260px; font-size: .95rem; } .cookie-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- SMS / 10DLC notice ---- */
.sms-notice { border-top: 1px solid var(--line); margin-top: 18px; padding: 14px 20px 6px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.sms-notice strong { color: var(--ink); }
.sms-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; } .sms-consent input { margin-top: 4px; }
.contact-logo { height: 80px; width: auto; }
.form .sms-consent input[type="checkbox"] { width: auto; flex: none; margin: 4px 0 0; } .sms-consent span { font-weight: 400; }
img.contact-logo { background: transparent !important; padding: 0; }

/* ---- logo-matched typography: geometric sans, letterspaced caps like the wordmark ---- */
.brand-name { text-transform: uppercase; letter-spacing: .28em; font-size: 1.25rem; font-weight: 400; line-height: 1.1; padding-top: 4px; }
.brand-tag { letter-spacing: .22em; font-size: .62rem; margin-top: 6px; color: var(--muted); }
h1, h2, h3 { font-weight: 400; letter-spacing: .01em; } .hero h1 { letter-spacing: -.005em; }
.mainnav a, .mainnav .dropbtn { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.btn { letter-spacing: .06em; } .btn-primary { text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; }
.eyebrow, .eyebrow-sm, .wx-day-name, .clock-city, .admin-tabs a, .tab { letter-spacing: .18em; }
.wx-temp, .clock-time, .offer-price, .stat-n { font-weight: 300; }
.intro-text { letter-spacing: .36em; }
.footer-companies a { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.mainnav a, .mainnav .dropbtn { font-size: .72rem; padding: 15px 10px; gap: 6px; } .hero h1 { font-size: 3rem; }

/* =====================================================================================================
   BRAND GUIDELINES · Edition 01 · 2026 — Graphite / Ink / Paper / Stone / Brass
   Cormorant Garamond (display), Lora (reading), Jost Light (wordmark & tracked labels). Brass = hairlines,
   numerals and links only, never a filled block. Bold avoided; size and italics carry emphasis.
   ===================================================================================================== */
:root { --brass-text: #7d5411; --paper: #f3f2f2; --stone: #d7d3d3; }
:root[data-theme="dark"] { --brass-text: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brass-text: var(--accent); } }
body { font-size: calc(16px * var(--font-scale)); line-height: 1.6; letter-spacing: 0; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { color: var(--graphite); }
h1 { font-size: 2.875rem; font-weight: 400; line-height: 1.08; letter-spacing: 0; } .hero h1 { font-size: 4rem; font-weight: 400; }
h2 { font-size: 1.75rem; font-weight: 400; letter-spacing: 0; } h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
strong, b { font-weight: 500; } em, .lead em { font-style: italic; }
/* tracked labels in the wordmark's sans */
.brand-name, .brand-tag, .eyebrow, .eyebrow-sm, .wx-day-name, .clock-city, .admin-tabs a, .tab, .mainnav a, .mainnav .dropbtn, .btn, .badge, .intro-text-hr, .footer-companies, .cookie-actions label, .seg a, .chip, th, .stat-mini span, .steps li, .travel-tabs a { font-family: var(--font-label); font-weight: 400; }
.brand-name { font-weight: 300; letter-spacing: .28em; font-size: 1.15rem; color: var(--graphite); }
.brand-tag { letter-spacing: .14em; font-size: .68rem; color: var(--muted); text-transform: uppercase; }
.eyebrow, .eyebrow-sm, .wx-day-name, .clock-city, th, .stat-mini span { letter-spacing: .14em; font-size: .7rem; text-transform: uppercase; }
.eyebrow { color: var(--brass-text); }
.mainnav a, .mainnav .dropbtn { letter-spacing: .14em; font-size: .72rem; }
.mainnav a.active { background: transparent; border-bottom: 1px solid var(--accent); color: var(--graphite); }
.mainnav a:hover, .mainnav .dropbtn:hover { color: var(--graphite); } .mainnav .ui-icon { color: var(--graphite); opacity: .75; }
/* buttons: outlined graphite; hover fills graphite; brass never a block */
.btn { border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; padding: 10px 18px; }
.btn-primary { color: var(--graphite) !important; border-color: var(--graphite); } .btn-primary:hover { background: var(--graphite); color: var(--paper) !important; }
.btn-ghost, .btn-outline { border-color: var(--line); color: var(--ink); } .btn-ghost:hover, .btn-outline:hover { border-color: var(--graphite); }
.btn-outline.active, .seg a.active, .tab.active, .chip:has(input:checked), .steps li.active, .admin-tabs a.active, .sidenav a.active, .chat-user,
:root[data-theme="dark"] .seg a.active, :root[data-theme="dark"] .tab.active, :root[data-theme="dark"] .chip:has(input:checked), :root[data-theme="dark"] .steps li.active, :root[data-theme="dark"] .admin-tabs a.active, :root[data-theme="dark"] .chat-user { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }
.theme-seg button.active { background: transparent; color: var(--graphite); box-shadow: inset 0 -1px 0 var(--accent); }
/* links, rules, cards */
a { color: var(--brass-text); } a:hover { color: var(--graphite); }
.card, .tile, .stat, .hero-logo-card, .wx-card, .clock, .news-item, .q-card, .offer, .rest, .trip-row, .travel-action, .cookie-banner, .user-card, .lang-select, .theme-seg { border-color: var(--line); border-radius: 2px; box-shadow: none; }
.wx-rule, hr { border-color: var(--line); } .wx-now .wicon, .wx-days .wicon { color: var(--graphite); }
.wx-temp, .clock-time, .offer-price, .stat-n { color: var(--graphite); font-weight: 400; } .wx-temp sup { color: var(--brass-text); }
.clock-time { color: var(--brass-text); }
.badge { border-radius: 2px; background: transparent; border: 1px solid var(--line); color: var(--muted); letter-spacing: .14em; font-size: .62rem; }
.badge-ok { border-color: #3f9d5c; color: #3f9d5c; background: transparent; } .badge-warn { border-color: var(--accent); color: var(--brass-text); background: transparent; }
:root[data-theme="dark"] .badge-ok { background: transparent; border-color: #6fbf85; color: #6fbf85; } :root[data-theme="dark"] .badge-warn { background: transparent; border-color: var(--accent); color: var(--accent); }
.flash { border-radius: 2px; } .announce { border-left: 1px solid var(--accent); }
/* logo mats: 6px paper border, hairline stone edge */
.tile img, .hero-logo-card img, .contact-card img, .mini-logo, .logo-slot img { background: var(--paper); border: 1px solid var(--stone); padding: 6px; border-radius: 0; }
img.contact-logo, .brand-logo, .footer-mark, .login-logo, .page-hero-logo, .intro-logo { background: transparent !important; border: 0 !important; padding: 0 !important; }
/* masthead / footer */
.masthead { border-bottom: 1px solid var(--line); } .mainnav { border-top: 1px solid var(--line); }
.brand-logo { height: 46px; }
.footer { border-top: 0; padding-top: 0; }
.footer-rule { border-top: 1px solid var(--accent); margin-top: 24px; }
.footer-inner { padding-top: 22px; }
.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--graphite); margin-bottom: 6px; }
.footer-companies { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; gap: 6px 14px; } .footer-companies span { color: var(--muted); } .footer-companies a { color: var(--brass-text); }
.footer-meta { font-size: .78rem; color: var(--muted); } .sms-notice { border-top-color: var(--line); }
/* intro: Paper on Ink, brass hairline, tagline in Cormorant italic */
.intro { background: var(--intro-bg); } .intro-line { background: var(--intro-accent); }
.intro-text { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.6rem; color: var(--intro-ink); }
.intro-text-hr { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--intro-accent); opacity: 0; animation: intro-fade .8s ease 1.3s forwards; }
.intro-skip { border-color: var(--intro-accent); color: var(--intro-accent); border-radius: 2px; font-family: var(--font-label); letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; }
/* login / hero */
.tagline { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--graphite); margin: 6px 0 14px; }
.lead { font-family: var(--font); font-size: 1.05rem; line-height: 1.6; }
.section-head h1, .section-head h2 { color: var(--graphite); }
.cookie-banner { border-color: var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
body.bg-glow { background-image: none; }
.hero-logo-card strong, .tile strong, .news-item h3, .card strong { font-weight: 500; letter-spacing: 0; word-spacing: 0; }

/* ---- palette picker ---- */
.palette-menu { position: relative; }
.palette-btn { border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--ink); padding: 10px 14px; cursor: pointer; display: grid; place-items: center; height: 100%; }
.palette-btn:hover { border-color: var(--graphite); }
.palette-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 6px; min-width: 240px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.15); display: grid; gap: 2px; }
.palette-head { font-family: var(--font-label); letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; color: var(--muted); padding: 6px 8px 4px; }
.palette-list button { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: 2px; padding: 6px 8px; color: var(--ink); cursor: pointer; font-family: var(--font); font-size: .9rem; text-align: left; width: 100%; }
.palette-list button:hover { border-color: var(--line); } .palette-list button.active { border-color: var(--accent); }
.pal-sw { width: 34px; height: 22px; border-radius: 2px; border: 1px solid; display: flex; align-items: flex-end; gap: 2px; padding: 3px; flex: none; } .pal-sw i { flex: 1; height: 8px; display: block; border-radius: 1px; }
.qr-wrap .qr-img { width: 220px; height: 220px; image-rendering: pixelated; image-rendering: crisp-edges; background: #fff; border: 8px solid #fff; border-radius: 4px; display: block; }
.form label.remember { display: flex; gap: 8px; align-items: center; font-weight: 400; } .form label.remember input { width: auto; }

/* fares & expenses */
.fare-box { display: grid; gap: 6px; align-content: start; } .fare-box .offer-price { font-size: 2.2rem; }
.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
.day-cell { display: grid; gap: 2px; text-align: center; border: 1px solid var(--line); border-radius: 2px; padding: 8px 4px; color: var(--ink); font-size: .8rem; } .day-cell strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.day-cell.best { border-color: var(--accent); } .day-cell.best strong { color: var(--brass-text); } .day-cell.query { background: var(--card); } .day-cell:hover { border-color: var(--graphite); text-decoration: none; }
.offer-best { border-color: var(--accent); }
.exp-table td.num, .exp-table th.num { text-align: right; white-space: nowrap; } .exp-table td { vertical-align: top; }
.attach summary { cursor: pointer; color: var(--brass-text); } .attach form { display: grid; gap: 4px; margin-top: 4px; } .attach input[type=file] { font-size: .75rem; }
.doc-form { margin-top: 8px; align-items: center; } .doc-form input[type=file] { font-size: .8rem; }
td.ok { color: #3f9d5c; }
@media (max-width: 800px) { .day-grid { grid-template-columns: repeat(4, 1fr); } }
.offer-main .badge { justify-self: start; }

/* travellers */
.pick-travellers { margin: 6px 0; } .pick-travellers summary { cursor: pointer; color: var(--brass-text); } .pick-list { display: grid; gap: 4px; padding: 6px 0; max-height: 180px; overflow: auto; } .pick-list label { display: flex; gap: 8px; align-items: center; font-weight: 400; } .pick-list input { width: auto; }
.copy-grid { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; margin: 10px 0 0; } .copy-grid dt { color: var(--muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-label); padding-top: 6px; } .copy-grid dd { margin: 0; }
.copy { background: transparent; border: 1px dashed var(--line); border-radius: 2px; padding: 4px 10px; font-family: var(--font); font-size: 1rem; color: var(--ink); cursor: pointer; } .copy:hover { border-color: var(--graphite); } .copy.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.member-row .btn-sm { padding: 2px 6px; }
.steps-log { padding-left: 18px; margin: 6px 0; font-size: .85rem; } .steps-log li { padding: 2px 0; } .steps-log .muted { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; margin-right: 6px; }


/* OpenTable-style finder */
.ot-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ot-brand { display: flex; align-items: center; gap: 6px; font-size: 1.4rem; font-family: var(--font-display); } .ot-brand strong { font-weight: 500; }
.ot-dot { width: 8px; height: 8px; border-radius: 50%; background: #da3743; display: inline-block; } .ot-dot.big { width: 22px; height: 22px; border: 6px solid #da3743; background: #fff; box-sizing: border-box; }
.ot-bar { display: grid; grid-template-columns: 170px 150px 150px 1fr 140px; gap: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--card); overflow: hidden; align-items: stretch; }
.ot-seg, .ot-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-right: 1px solid var(--line); min-height: 56px; } .ot-search { border-right: 0; }
.ot-seg input, .ot-seg select, .ot-search input { border: 0; background: transparent; font-family: var(--font); font-size: 1.05rem; color: var(--ink); width: 100%; outline: none; }
.ot-ico { color: var(--muted); display: grid; }
.ot-go { background: #da3743; color: #fff; border: 0; font-family: var(--font-label); letter-spacing: .06em; font-size: 1rem; cursor: pointer; } .ot-go:hover { background: #c22f3a; }
.ot-loc { margin: 10px 0 18px; } .ot-loc a { color: #da3743; }
@media (max-width: 900px) { .ot-bar { grid-template-columns: 1fr 1fr; } .ot-search { grid-column: 1 / -1; border-top: 1px solid var(--line); } .ot-go { grid-column: 1 / -1; min-height: 48px; } }