/* Condor Virtual - shared design (light, warm, sunshine yellow + the five Condor stripes).
   Simulation project, not affiliated with Condor Flugdienst GmbH. No external fonts (privacy). */
:root {
  --sun: #FFC20E; --sun-dark: #E6A800; --sun-soft: #FFF4CC; --sun-text: #8a6100;
  --ink: #1D1D1F; --ink-2: #3C3C40; --muted: #6E6A63; --faint: #9a948a;
  --line: #E8E2D6; --line-2: #F0EBE1; --bg: #F7F4EE; --card: #FFFFFF; --card-2: #FBF9F5;
  --red: #E2382C; --red-soft: #FDECEA; --green: #2F9E5B; --green-soft: #E6F5EC;
  --blue: #1F7DC1; --blue-soft: #E7F1FA; --beige: #E9D8B8; --amber: #C77700; --amber-soft: #FFF1DC;
  --side: #1D1D1F; --side-2: #2A2A2D; --side-text: #CFCAC0;
  --radius: 16px; --shadow: 0 1px 2px rgba(29,29,31,.04), 0 6px 24px rgba(29,29,31,.06);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}
html { -webkit-text-size-adjust: 100%; }
/* display rules with zero specificity, so Tailwind's hidden / sm:flex etc. always win */
:where(.cv-btn, .cv-badge, .cv-mark) { display: inline-flex; }
:where(.cv-alert, .cv-modal, .cv-avatar) { display: flex; }
body.cv { background: var(--bg); color: var(--ink); font-family: var(--font); }
.cv-mono { font-family: var(--mono); }

/* stripes */
.cv-stripes { display: flex; height: 6px; width: 100%; }
.cv-stripes > span { flex: 1; }
.cv-stripes > span:nth-child(1) { background: var(--sun); }
.cv-stripes > span:nth-child(2) { background: var(--red); }
.cv-stripes > span:nth-child(3) { background: var(--green); }
.cv-stripes > span:nth-child(4) { background: var(--blue); }
.cv-stripes > span:nth-child(5) { background: var(--beige); }
.cv-stripes.thick { height: 10px; }
.cv-stripes.round { border-radius: 999px; overflow: hidden; }

/* brand */
.cv-brand { font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1; white-space: nowrap; }
.cv-brand em { font-style: normal; font-weight: 500; color: var(--sun-dark); }
.cv-brand.on-dark { color: #fff; }
.cv-brand.on-dark em { color: var(--sun); }
.cv-mark { align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sun); color: var(--ink); }

/* surfaces */
.cv-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cv-card-flat { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; }
.cv-divider { border-top: 1px solid var(--line); }
.cv-muted { color: var(--muted); }
.cv-faint { color: var(--faint); }
.cv-h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cv-h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.cv-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* buttons */
.cv-btn { align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  padding: .62rem 1.3rem; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .05s; white-space: nowrap; text-decoration: none; }
.cv-btn:active { transform: translateY(1px); }
.cv-btn:disabled, .cv-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cv-btn:focus-visible, .cv-input:focus-visible, .cv-side a:focus-visible { outline: 3px solid rgba(255,194,14,.55); outline-offset: 2px; }
.cv-btn-primary { background: var(--sun); color: var(--ink); }
.cv-btn-primary:hover:not(:disabled) { background: var(--sun-dark); }
.cv-btn-dark { background: var(--ink); color: #fff; }
.cv-btn-dark:hover:not(:disabled) { background: #000; }
.cv-btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.cv-btn-ghost:hover:not(:disabled) { border-color: var(--ink-2); }
.cv-btn-danger { background: var(--red); color: #fff; }
.cv-btn-danger:hover:not(:disabled) { background: #c42d22; }
.cv-btn-warn { background: var(--amber); color: #fff; }
.cv-btn-warn:hover:not(:disabled) { background: #a86400; }
.cv-btn-sm { padding: .38rem .85rem; font-size: .8rem; }
.cv-btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }
.cv-btn-icon { padding: .45rem; width: 2.1rem; height: 2.1rem; }
.cv-link { color: var(--sun-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* forms */
.cv-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.cv-input { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; font-size: .95rem; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.cv-input:focus { outline: none; border-color: var(--sun-dark); box-shadow: 0 0 0 3px rgba(255,194,14,.25); }
.cv-input::placeholder { color: var(--faint); }
textarea.cv-input { resize: vertical; line-height: 1.5; }
.cv-input.upper { text-transform: uppercase; font-family: var(--mono); }
.cv-check { accent-color: var(--sun-dark); }
.cv-seg { display: inline-flex; background: var(--line-2); border-radius: 999px; padding: 3px; gap: 3px; }
.cv-seg button { border-radius: 999px; padding: .42rem .95rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.cv-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* alerts + badges */
.cv-alert { border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; gap: .6rem; align-items: flex-start; }
.cv-alert-error { background: var(--red-soft); color: #9b2219; }
.cv-alert-ok { background: var(--green-soft); color: #1f6b3d; }
.cv-alert-warn { background: var(--amber-soft); color: #7a4800; }
.cv-alert-info { background: var(--sun-soft); color: #6b4c00; }
.cv-badge { align-items: center; gap: .3rem; border-radius: 999px; padding: .18rem .6rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.cv-badge-sun { background: var(--sun-soft); color: var(--sun-text); }
.cv-badge-green { background: var(--green-soft); color: #1f6b3d; }
.cv-badge-red { background: var(--red-soft); color: #9b2219; }
.cv-badge-amber { background: var(--amber-soft); color: #7a4800; }
.cv-badge-blue { background: var(--blue-soft); color: #165a8c; }
.cv-badge-grey { background: var(--line-2); color: var(--muted); }
.cv-callsign { font-family: var(--mono); font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.cv-icao { font-family: var(--mono); font-weight: 700; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: .15rem .5rem; }
.cv-dot { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; }

/* tables */
.cv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cv-table th { text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--card-2); position: sticky; top: 0; z-index: 1; }
.cv-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.cv-table tbody tr:hover { background: #FFFBEF; }
.cv-table tr.is-active { background: var(--sun-soft); }
.cv-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* sidebar (app pages) */
.cv-side { background: var(--side); color: var(--side-text); }
.cv-side a.cv-nav { display: flex; align-items: center; gap: .75rem; white-space: nowrap; padding: .62rem .8rem; border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--side-text); transition: background .15s, color .15s; }
.cv-side a.cv-nav:hover { background: var(--side-2); color: #fff; }
.cv-side a.cv-nav.active { background: var(--sun); color: var(--ink); }
.cv-side a.cv-nav i { width: 1.1rem; text-align: center; }
.cv-side .cv-nav-count { margin-left: auto; background: var(--red); color: #fff; font-size: .68rem; border-radius: 999px; padding: .05rem .45rem; }
.cv-avatar { width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--sun); color: var(--ink); align-items: center; justify-content: center; font-weight: 800; }

/* modal */
.cv-modal { position: fixed; inset: 0; background: rgba(29,29,31,.45); backdrop-filter: blur(3px); z-index: 2000; align-items: center; justify-content: center; padding: 1rem; }
.cv-modal > .cv-card { width: 100%; max-width: 30rem; max-height: calc(100vh - 2rem); overflow: auto; }

/* map */
.cv-map { background: #EAE6DE; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
.leaflet-container { font-family: var(--font); }
.cv-plane { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--ink); filter: drop-shadow(0 1px 1px rgba(255,255,255,.9)) drop-shadow(0 0 2px rgba(255,255,255,.9)); }
.cv-plane.sel { color: var(--sun-dark); font-size: 23px; }
.cv-plane.div { color: var(--amber); }
.cv-plane.stale { color: var(--faint); }
.cv-maplabel { background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; font: 700 10px var(--mono); color: var(--ink); white-space: nowrap; box-shadow: none; }
.cv-maplabel::before { display: none; }
.leaflet-popup-content-wrapper { border-radius: 12px; }

label.cv-card-flat:has(input:checked) { border-color: var(--sun-dark); background: #FFFBEF; box-shadow: 0 0 0 1px var(--sun-dark) inset; }

/* public pages */
.cv-hl { background: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%); padding: 0 .08em; }
.cv-topnav a.cv-toplink { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.cv-topnav a.cv-toplink:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sun); text-decoration-thickness: 3px; }
.cv-hero-img { background-size: cover; background-position: center; border-radius: 28px; }
.cv-feature i { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sun-soft); color: var(--sun-text); }

/* misc */
.cv-skeleton { background: linear-gradient(90deg, var(--line-2), #fff, var(--line-2)); background-size: 200% 100%; animation: cvsk 1.2s infinite; border-radius: 8px; }
@keyframes cvsk { to { background-position: -200% 0; } }
.cv-pulse { animation: cvpulse 1.6s infinite; }
@keyframes cvpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cv-pulse, .cv-skeleton { animation: none; } }
.cv-scroll { overflow-y: auto; }
.cv-mail-frame { width: 100%; border: 0; background: #fff; border-radius: 12px; min-height: 260px; }