:root{
  --forotv-red:#d2232a;
  --forotv-red-2:#b71c1c;
  --ink:#0b1220;
  --muted:#667085;
  --border:#e6e8ee;
  --card:#ffffff;
  --bg:#f6f7fb;
  --shadow: 0 18px 60px rgba(15,23,42,.12);
  --shadow-sm: 0 10px 26px rgba(15,23,42,.10);
  --r-xl: 18px;
  --r-lg: 14px;
}

html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 520px at 20% -10%, rgba(210,35,42,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 0%, rgba(210,35,42,.10), transparent 60%),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--ink);
}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-variant-numeric: tabular-nums;}
.muted{color:var(--muted)}
a{color:inherit}

.shell{
  max-width: 1780px;
  margin: 14px auto;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topbar{
  background: linear-gradient(135deg, var(--forotv-red), var(--forotv-red-2));
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.brand{
  display:flex; gap:12px; align-items:center;
}
.brand .badge{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 14px 22px rgba(0,0,0,.16);
}
.brand h1{margin:0;font-size:1.05rem;font-weight:900;letter-spacing:.2px}
.brand .sub{opacity:.88;font-size:.88rem;margin-top:2px}

.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-weight:800;
  font-size:.82rem;
  white-space: nowrap;
}

.layout{
  display:grid;
  grid-template-columns: 420px 1fr;
  min-height: calc(100vh - 90px);
}

.sidebar{
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.72);
}
.main{
  background: transparent;
}

.section{
  padding: 14px;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.controls{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  align-items: end;
}

.label{font-size:.8rem;font-weight:800;color:var(--muted); margin-bottom:6px}
.input{
  width:100%;
  border-radius: 12px;
  border:1px solid var(--border);
  padding: 10px 12px;
  outline:none;
  background:#fff;
}
.input:focus{
  border-color: rgba(210,35,42,.55);
  box-shadow: 0 0 0 .25rem rgba(210,35,42,.12);
}
.btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 14px 26px rgba(15,23,42,.12);}
.btn-danger{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, var(--forotv-red), var(--forotv-red-2));
}
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(210,35,42,.25);
  color: rgba(183,28,28,.98);
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.kpi{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:space-between;
  min-height: 66px;
}
.kpi .v{font-weight: 950; font-size: 1.15rem; letter-spacing:-.4px}
.kpi .t{font-size:.8rem;font-weight:900;color:var(--muted)}

@media (max-width: 1200px){
  .layout{grid-template-columns: 1fr}
  .sidebar{border-right:0;border-bottom:1px solid var(--border)}
  .kpi-grid{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 640px){
  .kpi-grid{grid-template-columns: 1fr}
}

.list{
  margin-top: 12px;
  max-height: 62vh;
  overflow:auto;
  border-top:1px solid var(--border);
}
.item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-bottom:1px solid rgba(230,232,238,.9);
  cursor:pointer;
}
.item:hover{background: rgba(210,35,42,.03)}
.item .name{font-weight: 950}
.item .meta{font-size:.82rem;color:var(--muted)}
.item input{margin-top:4px}

.pills{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210,35,42,.22);
  background: linear-gradient(135deg, rgba(210,35,42,.10), rgba(210,35,42,.04));
  color: rgba(183,28,28,.98);
  font-weight: 950;
  font-size: .86rem;
}

.tabs{
  display:flex; gap:8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
.tab{
  border:1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 950;
  cursor:pointer;
}
.tab.active{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, var(--forotv-red), var(--forotv-red-2));
}
.panel{padding: 12px}

.table-wrap{
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.table-scroll{max-height: 56vh; overflow:auto}
table{
  width:100%;
  border-collapse: collapse;
  font-size: .92rem;
}
thead th{
  position: sticky;
  top: 0;
  background:#fff;
  z-index: 2;
  border-bottom: 2px solid rgba(210,35,42,.85);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: .78rem;
  color: rgba(183,28,28,.95);
  padding: 12px 10px;
}
tbody td{
  border-bottom: 1px solid rgba(230,232,238,.95);
  padding: 10px;
  vertical-align: top;
}
tbody tr:hover{background: rgba(210,35,42,.03)}
.cell-tight{white-space:nowrap}
.cell-wrap{white-space:normal}

.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(15,23,42,.55);
  display:none;
  z-index: 1000;
}
.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 1001;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.modal .box{
  width: min(1100px, 98vw);
  max-height: 88vh;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(15,23,42,.22);
}
.modal .head{
  padding: 12px 14px;
  color:#fff;
  background: linear-gradient(135deg, var(--forotv-red), var(--forotv-red-2));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal .body{padding: 14px}
.modal .head .title{font-weight: 950}
.modal .close{background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); color:#fff; border-radius: 10px; padding:8px 10px; cursor:pointer; font-weight: 950;}

@media print{
  .topbar, .sidebar, .tabs, .controls, .btn, .pills { display:none !important; }
  body{ background:#fff; }
  .shell{ box-shadow:none; border:none; }
  .layout{ grid-template-columns: 1fr; }
  .table-scroll{ max-height: none; overflow: visible; }
}