:root {
  --bg: #07111f;
  --navy: #0b1f3a;
  --panel: #101b2c;
  --line: #24344c;
  --text: #eef4fb;
  --muted: #93a3b8;
  --teal: #2dd4bf;
  --teal2: #0e7c86;
  --good: #3dff9a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1280px; height: 720px; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: Inter, Calibri, ui-sans-serif, system-ui, sans-serif; }
body { background: radial-gradient(800px 380px at 85% 0%, rgba(45,212,191,.12), transparent 50%), var(--bg); }
a { color: inherit; text-decoration: none; }
.nav { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #2dd4bf, #0e7c86); }
.links { display: flex; gap: 22px; color: var(--muted); font-size: 14px; }
.links a.on, .links a:hover { color: #fff; }
.btn { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; display: inline-block; }
.btn-p { background: linear-gradient(180deg, #3ee0cb, #0e7c86); color: #04231f; }
.btn-g { background: transparent; color: #fff; border: 1px solid var(--line); }
.pager { position: fixed; right: 18px; bottom: 10px; display: flex; gap: 8px; z-index: 20; }
.pager a { font-size: 12px; padding: 7px 11px; }
h1 { font-size: 40px; letter-spacing: -1px; line-height: 1.08; }
h1 em { font-style: normal; color: var(--teal); }
.sub { color: var(--muted); margin-top: 12px; font-size: 16px; max-width: 520px; line-height: 1.45; }
.card { background: linear-gradient(180deg, #152033, #0d1624); border: 1px solid var(--line); border-radius: 14px; }
.app { display: grid; grid-template-columns: 210px 1fr; height: 662px; }
.side { border-right: 1px solid var(--line); padding: 14px; }
.side a { display: block; color: var(--muted); padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.side a.on { background: #163042; color: #fff; }
.main { padding: 16px 18px; overflow: hidden; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.kpis .card { padding: 12px; }
.kpis b { display: block; font-size: 24px; }
.kpis span { color: var(--muted); font-size: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); color: var(--muted); }
td b { color: #fff; font-weight: 600; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 99px; background: #12351f; color: var(--good); font-size: 11px; }
.pill.wait { background: #3a2a10; color: #ffc857; }
.ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); }
.cap { position: absolute; left: 8px; bottom: 8px; background: rgba(7,17,31,.8); padding: 5px 8px; border-radius: 7px; font-size: 12px; }