/* FishRiverOS Framer V2 — local synthetic prototype. Self-contained; no external fonts/assets. */
:root {
  --bg: #0f1417; --panel: #171f24; --panel2: #1d272d; --ink: #e8eef1; --dim: #8fa1aa;
  --line: #2a373f; --good: #3fb97f; --warn: #e0a83a; --crit: #e0573a; --acc: #4aa3df; --dimchip: #5c6f79;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, "Segoe UI", sans-serif; }
header { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
header h1 { font-size: 17px; margin: 0; letter-spacing: .04em; }
header .meta { color: var(--dim); font-size: 12px; }
.banner { padding: 10px 20px; font-weight: 600; }
.banner.stale { background: #4a3a12; color: #f4d488; }
.banner.failed { background: #4a1f12; color: #f4a488; }
.banner.denied { background: #3a1230; color: #e8a0d8; }
.banner.error { background: #4a1212; color: #f08888; }
main { padding: 18px 20px; max-width: 1180px; margin: 0 auto; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 14px; cursor: pointer; }
.tabs button.active { border-color: var(--acc); color: var(--acc); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.stat .label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.stat .value { font-size: 20px; font-weight: 700; margin: 2px 0; }
.stat .trend { font-size: 12px; }
.trend.up { color: var(--good); } .trend.down { color: var(--crit); } .trend.flat { color: var(--dim); }
section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 0 0 10px; }
.card { background: var(--panel2); border-left: 4px solid var(--dimchip); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.card.crit { border-left-color: var(--crit); } .card.warn { border-left-color: var(--warn); }
.card.good { border-left-color: var(--good); } .card.acc { border-left-color: var(--acc); }
.card .t { font-weight: 700; margin-bottom: 3px; }
.card .m { color: var(--dim); font-size: 13px; }
.card .meta { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #24313a; color: var(--dim); }
.chip.good { color: var(--good); } .chip.warn { color: var(--warn); } .chip.crit { color: var(--crit); } .chip.acc { color: var(--acc); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.feed div { padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.feed .ts { color: var(--dim); margin-right: 8px; font-size: 12px; }
.sanitized { outline: 1px dashed var(--warn); outline-offset: 1px; }
.empty, .skeleton { text-align: center; color: var(--dim); padding: 60px 20px; }
.skeleton .bar { height: 14px; border-radius: 4px; background: linear-gradient(90deg, #1d272d, #26333b, #1d272d); background-size: 200% 100%; animation: sk 1.2s infinite; margin: 10px auto; max-width: 620px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.c2tag { font-size: 10px; color: #e8a0d8; border: 1px solid #6a3a5c; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
footer { padding: 14px 20px; color: var(--dim); font-size: 11px; border-top: 1px solid var(--line); }