.tile { border-radius: .5rem; background: #fff; border: 1px solid rgba(0,0,0,.08); padding: 1rem; }
.tile-hero { background: linear-gradient(135deg, #fff 0%, #eef4fc 100%); }
.tile-label { font-size: .75rem; color: rgba(0,0,0,.55); text-transform: uppercase; letter-spacing: .04em; }
.tile-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.tile-foot { font-size: .75rem; margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.card { border-radius: .5rem; background: #fff; border: 1px solid rgba(0,0,0,.08); padding: 1rem; }
.card-title { font-weight: 600; margin-bottom: .6rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.hint { font-weight: 400; font-size: .75rem; color: rgba(0,0,0,.5); }
.chip { display: inline-block; white-space: nowrap; padding: 0 .4rem; border-radius: 999px; font-size: .7rem; font-weight: 500; line-height: 1.3rem; }
.chip-good { background: rgba(12,163,12,.12); color: #0a6f0a; }
.chip-bad { background: rgba(208,59,59,.12); color: #a52b2b; }
.chip-muted { background: rgba(0,0,0,.06); color: rgba(0,0,0,.6); }
.badge { display: inline-block; padding: 0 .5rem; border-radius: .25rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.4rem; }
.badge-send { background: rgba(12,163,12,.14); color: #0a6f0a; }
.badge-test { background: rgba(42,120,214,.14); color: #1c5cab; }
.badge-hold { background: rgba(250,178,25,.2); color: #7a5200; }
.badge-stop { background: rgba(208,59,59,.14); color: #a52b2b; }
.outcome-hit { background: rgba(12,163,12,.14); color: #0a6f0a; } .outcome-miss { background: rgba(208,59,59,.14); color: #a52b2b; } .outcome-not_sent { background: rgba(0,0,0,.06); color: #555; } .outcome-hold_confirmed { background: rgba(42,120,214,.12); color: #1c5cab; } .outcome-hold_wrong { background: rgba(250,178,25,.2); color: #7a5200; }
.badge-conf-high { background: rgba(0,0,0,.08); color: #111; }
.badge-conf-medium { background: rgba(0,0,0,.05); color: #444; }
.badge-conf-low { background: transparent; color: #777; border: 1px dashed #bbb; }
.tbl { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(0,0,0,.5); padding: .35rem .5rem; border-bottom: 1px solid rgba(0,0,0,.1); white-space: nowrap; }
.tbl td { padding: .35rem .5rem; border-bottom: 1px solid rgba(0,0,0,.05); vertical-align: top; }
.tbl tbody tr:hover { background: rgba(42,120,214,.05); }
.tbl.sortable th[data-sort] { cursor: pointer; user-select: none; }
.tbl.sortable th[data-sort].asc::after { content: " ▲"; } .tbl.sortable th[data-sort].desc::after { content: " ▼"; }
.tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix .cell { min-width: 4.5rem; }
.tbl.plan { table-layout: fixed; min-width: 64rem; }
.tbl.plan th:nth-child(1) { width: 2rem; } .tbl.plan .col-list { width: 18rem; } .tbl.plan .col-dim { width: 11rem; overflow-wrap: anywhere; }
.tbl.plan th:nth-child(5), .tbl.plan th:nth-child(6) { width: 6rem; } .tbl.plan th:nth-child(7) { width: 4.5rem; }
.tbl.plan .col-why { white-space: normal; }
.matrix .cell-pos { background: rgba(42,120,214,.10); }
.matrix .cell-neg { background: rgba(208,59,59,.12); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tab { padding: .35rem .75rem; border-radius: .375rem; font-size: .8125rem; color: rgba(0,0,0,.6); }
.tab:hover { background: rgba(0,0,0,.05); }
.tab.active { background: #fff; border: 1px solid rgba(0,0,0,.1); color: #000; font-weight: 500; }
.input { border: 1px solid rgba(0,0,0,.15); border-radius: .375rem; padding: .3rem .5rem; font-size: .8125rem; background: #fff; }
.btn { border: 1px solid rgba(0,0,0,.15); border-radius: .375rem; padding: .3rem .7rem; font-size: .8125rem; background: #fff; }
.btn-primary { border-radius: .375rem; padding: .3rem .7rem; font-size: .8125rem; background: #2a78d6; color: #fff; font-weight: 500; }
.btn-primary:disabled { opacity: .5; }
.link { color: #1c5cab; }
.legend { display: flex; gap: 1rem; font-size: .75rem; color: rgba(0,0,0,.6); margin-top: .5rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .25rem; vertical-align: 0; }
.insight { border-left: 3px solid rgba(0,0,0,.15); }
.insight-positive { border-left-color: #0ca30c; } .insight-info { border-left-color: #2a78d6; } .insight-warning { border-left-color: #fab219; } .insight-critical { border-left-color: #d03b3b; }
.prose-md p { margin: 0 0 .6rem; } .prose-md ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 .6rem; } .prose-md strong { font-weight: 600; } .prose-md h1,.prose-md h2,.prose-md h3 { font-weight: 600; margin: .8rem 0 .3rem; }
@media (prefers-color-scheme: dark) {
  .tile, .card, .tab.active, .input, .btn { background: #1a1a19; border-color: rgba(255,255,255,.1); color: #fff; }
  .tile-hero { background: linear-gradient(135deg, #1a1a19 0%, #1c2536 100%); }
  .tile-label, .hint, .tbl th, .legend, .tab { color: rgba(255,255,255,.55); }
  .tab.active { color: #fff; } .tab:hover { background: rgba(255,255,255,.06); }
  .tbl th { border-bottom-color: rgba(255,255,255,.12); } .tbl td { border-bottom-color: rgba(255,255,255,.06); }
  .chip-muted { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
  .chip-good { color: #3ec13e; } .chip-bad { color: #e66767; }
  .badge-send { color: #3ec13e; } .badge-test { color: #6da7ec; } .badge-hold { color: #fab219; } .badge-stop { color: #e66767; }
  .badge-conf-high { background: rgba(255,255,255,.15); color: #fff; } .badge-conf-medium { background: rgba(255,255,255,.08); color: #ddd; } .badge-conf-low { color: #999; border-color: #555; }
  .link { color: #6da7ec; }
  .matrix .cell-pos { background: rgba(57,135,229,.18); } .matrix .cell-neg { background: rgba(230,103,103,.18); }
}