/* Quality News — design system (§6) */
:root, [data-theme="light"] {
  --color-bg:            #FFFFFF;
  --color-bg-subtle:     #F4F4F5;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #FAFAFA;
  --color-border:        #E4E4E7;
  --color-text:          #27272A;
  --color-text-muted:    #71717A;
  --color-primary:       #F97316;
  --color-primary-hover: #EA580C;
  --color-primary-soft:  #FFF1E6;
  --color-on-primary:    #FFFFFF;
  --color-success:       #16A34A;
  --color-warning:       #D97706;
  --color-danger:        #DC2626;
  --color-info:          #2563EB;
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
[data-theme="dark"] {
  --color-bg:            #18181B;
  --color-bg-subtle:     #1F1F23;
  --color-surface:       #26262B;
  --color-surface-2:     #2E2E33;
  --color-border:        #3F3F46;
  --color-text:          #FAFAFA;
  --color-text-muted:    #A1A1AA;
  --color-primary:       #F97316;
  --color-primary-hover: #FB923C;
  --color-primary-soft:  #2A1E12;
  --color-on-primary:    #18181B;
  --color-success:       #22C55E;
  --color-warning:       #F59E0B;
  --color-danger:        #F87171;
  --color-info:          #60A5FA;
  --shadow-card: 0 1px 3px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 650; line-height: 1.25; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
code, pre, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---- Layout shell ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--color-surface);
  border-right: 1px solid var(--color-border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; font-weight: 700; font-size: 1.05rem; }
.sidebar__logo { width: 28px; height: 28px; border-radius: 8px; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; font-weight: 800; }
.sidebar__nav { padding: .5rem; display: flex; flex-direction: column; gap: 2px; }
.sidebar__section { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); padding: .9rem .85rem .35rem; }
.nav-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .85rem; border-radius: 8px; color: var(--color-text); font-weight: 500; }
.nav-item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.nav-item.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.5rem; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 1.05rem; font-weight: 650; }
.topbar__right { display: flex; align-items: center; gap: .75rem; }
.content { padding: 1.5rem; max-width: 1400px; width: 100%; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-header p { color: var(--color-text-muted); margin: .15rem 0 0; }

/* ---- Cards ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-card); }
.card__body { padding: 1.1rem 1.25rem; }
.card__header { padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__title { font-weight: 650; font-size: .98rem; }
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* ---- KPI ---- */
.kpi { display: flex; flex-direction: column; gap: .25rem; }
.kpi__label { color: var(--color-text-muted); font-size: .8rem; }
.kpi__value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.kpi__sub { font-size: .78rem; color: var(--color-text-muted); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .12s, border-color .12s, color .12s; background: transparent; color: var(--color-text); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-bg-subtle); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { filter: brightness(.94); }
.btn-sm { padding: .32rem .6rem; font-size: .78rem; border-radius: 7px; }
.btn-icon { padding: .4rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .73rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge-error   { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.badge-warning { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.badge-info    { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }
.badge-success { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.badge-muted   { background: var(--color-bg-subtle); color: var(--color-text-muted); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table th, .table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table th { color: var(--color-text-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.table tbody tr:hover { background: var(--color-surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .sortable { cursor: pointer; user-select: none; }
.table .sortable:hover { color: var(--color-text); }

/* ---- Forms ---- */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: .3rem; }
.form-group .hint { color: var(--color-text-muted); font-size: .76rem; margin-top: .25rem; }
.input, .select, .textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-surface); color: var(--color-text); font-size: .88rem; font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.textarea { resize: vertical; min-height: 120px; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 180px; }
.field-error { color: var(--color-danger); font-size: .78rem; margin-top: .25rem; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-border); border-radius: 999px; transition: .2s; }
.switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.25rem; flex-wrap: wrap; }
.tab { padding: .6rem .9rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ---- Health dots ---- */
.health-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted); }
.health-dot.up { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent); }
.health-dot.down { background: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent); }
.health-dot.disabled { background: var(--color-text-muted); }
.health-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.health-row:last-child { border-bottom: none; }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--color-surface); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }
.modal__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.modal__body { padding: 1.25rem; }
.modal__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: .6rem; }

/* ---- Toasts ---- */
.toasts { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 200; }
.toast { padding: .7rem 1rem; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); min-width: 240px; border-left: 4px solid var(--color-info); animation: slidein .2s ease; }
.toast.success { border-left-color: var(--color-success); }
.toast.error { border-left-color: var(--color-danger); }
.toast.warning { border-left-color: var(--color-warning); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Empty / skeleton ---- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-muted); }
.empty-state svg { width: 42px; height: 42px; opacity: .5; margin-bottom: .5rem; }
.skeleton { background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-surface-2) 50%, var(--color-bg-subtle) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; height: 1rem; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Misc ---- */
.muted { color: var(--color-text-muted); }
.flex { display: flex; } .items-center { align-items: center; } .gap { gap: .6rem; } .gap-sm { gap: .35rem; }
.between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.mt { margin-top: 1rem; } .mt-sm { margin-top: .5rem; } .mb { margin-bottom: 1rem; }
.text-right { text-align: right; } .text-center { text-align: center; }
.pill { background: var(--color-bg-subtle); padding: .1rem .45rem; border-radius: 6px; font-size: .78rem; }
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 150px; }
.divider { height: 1px; background: var(--color-border); margin: 1rem 0; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: .35rem; border-radius: 7px; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }
details.raw { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 9px; padding: .6rem .85rem; }
details.raw pre { white-space: pre-wrap; word-break: break-word; margin: .5rem 0 0; font-size: .8rem; }
/* <mark> has a UA default color:black/background:yellow — neutralize it so our
   highlight classes control the colours and stay readable in both themes. */
mark { background: transparent; color: inherit; }
.highlight-spell { background: color-mix(in srgb, var(--color-danger) 22%, transparent); color: var(--color-text); border-bottom: 2px wavy var(--color-danger); border-radius: 2px; padding: 0 1px; cursor: help; }
.highlight-entity { background: var(--color-primary-soft); color: var(--color-primary); border-radius: 4px; padding: 0 .15rem; font-weight: 600; }
.timing-bar { height: 10px; border-radius: 5px; background: var(--color-primary); }
.pagination { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; margin-top: 1rem; }
.pagination a, .pagination span { padding: .35rem .6rem; border-radius: 7px; border: 1px solid var(--color-border); color: var(--color-text); font-size: .82rem; }
.pagination .current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pagination .disabled { opacity: .45; pointer-events: none; }

/* ---- Auth ---- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .sidebar__logo { width: 40px; height: 40px; font-size: 1.1rem; margin: 0 auto .75rem; }

/* ---- Mobile ---- */
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .menu-toggle { display: inline-grid; }
  .content { padding: 1rem; }
}