:root {
  --vt-accent: #0f4c5c;
  --vt-accent-2: #2a9d8f;
  --vt-ink: #12262c;
  --vt-muted: #5b7380;
  --vt-line: #d7e3e6;
  --vt-bg: #f3f7f8;
  --vt-card: #ffffff;
  --vt-danger: #b42318;
  --vt-ok: #067647;
  --vt-warn: #b54708;
  --side-w: 240px;
  --top-h: 56px;
  --radius: 12px;
  --font: "Cairo", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.vt-app {
  font-family: var(--font);
  background: var(--vt-bg);
  color: var(--vt-ink);
}
a { color: var(--vt-accent); text-decoration: none; }
a:hover { color: var(--vt-accent-2); }

.vt-top {
  position: sticky; top: 0; z-index: 40;
  height: var(--top-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--vt-accent); color: #fff;
}
.vt-top a { color: #fff; }
.vt-brand { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.vt-brand strong { font-size: 16px; }
.vt-brand span { font-size: 12px; opacity: .82; }
.vt-top .page-name { font-weight: 700; margin-inline-start: 8px; }
.vt-top .spacer { flex: 1; }
.vt-user { font-size: 13px; opacity: .92; }
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--vt-line); background: #fff; color: var(--vt-ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
.vt-btn.primary { background: var(--vt-accent); color: #fff; border-color: transparent; }
.vt-btn.primary:hover { background: #0c3d4a; color: #fff; }
.vt-btn.danger { background: var(--vt-danger); color: #fff; border-color: transparent; }
.vt-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.vt-btn.small { min-height: 32px; padding: 0 10px; font-size: 13px; }

.vt-shell { display: flex; min-height: calc(100vh - var(--top-h)); }
.vt-side {
  width: var(--side-w); flex: 0 0 var(--side-w);
  background: #fff; border-inline-end: 1px solid var(--vt-line);
  padding: 14px 10px;
}
.vt-side a {
  display: block; padding: 9px 12px; border-radius: 9px;
  color: var(--vt-ink); font-weight: 700; font-size: 14px;
}
.vt-side a:hover, .vt-side a.active {
  background: #e8f4f3; color: var(--vt-accent);
}
.vt-main { flex: 1; min-width: 0; padding: 20px; }

.vt-flash {
  padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 700;
}
.vt-flash.ok { background: #ecfdf3; color: var(--vt-ok); }
.vt-flash.err { background: #fef3f2; color: var(--vt-danger); }

.vt-card {
  background: var(--vt-card); border: 1px solid var(--vt-line);
  border-radius: var(--radius); padding: 16px;
}
.vt-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.vt-head h1 { margin: 0; font-size: 22px; }
.vt-muted { color: var(--vt-muted); font-size: 13px; font-weight: 400; }

.vt-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.vt-stat { background: #fff; border: 1px solid var(--vt-line); border-radius: 12px; padding: 14px; }
.vt-stat b { display: block; font-size: 22px; }
.vt-stat span { color: var(--vt-muted); font-size: 13px; }

.vt-table-wrap { overflow: auto; }
table.vt {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
table.vt th, table.vt td {
  padding: 10px 8px; border-bottom: 1px solid var(--vt-line); text-align: right;
  vertical-align: top;
}
table.vt th { color: var(--vt-muted); font-size: 12px; font-weight: 800; }
table.vt .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.vt-form { display: grid; gap: 12px; }
.vt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.vt-field { display: flex; flex-direction: column; gap: 6px; }
.vt-field span { font-size: 13px; font-weight: 800; }
.vt-field input, .vt-field select, .vt-field textarea {
  font: inherit; border: 1px solid var(--vt-line); border-radius: 9px;
  padding: 9px 11px; background: #fff; color: inherit;
}
.vt-field textarea { min-height: 88px; resize: vertical; }
.vt-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.vt-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(700px 280px at 100% 0, rgba(42,157,143,.18), transparent 60%),
    var(--vt-bg);
}
.vt-login .vt-card { width: min(420px, 100%); padding: 28px; }
.vt-login h1 { margin: 0 0 6px; }
.vt-due { color: var(--vt-warn); font-weight: 800; }
.vt-ok { color: var(--vt-ok); font-weight: 800; }

.vt-public {
  min-height: 100vh;
  background:
    radial-gradient(900px 340px at 0 0, rgba(42,157,143,.16), transparent 55%),
    var(--vt-bg);
}
.vt-hero { max-width: 1080px; margin: 0 auto; padding: 36px 20px 16px; }
.vt-hero h1 { margin: 0 0 8px; font-size: 34px; }
.vt-cards {
  max-width: 1080px; margin: 0 auto; padding: 8px 20px 40px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px;
}
.vt-pcard h2 { margin: 0 0 8px; font-size: 18px; }
.vt-pcard p { margin: 0 0 6px; color: var(--vt-muted); font-size: 14px; }
.vt-nav-pub { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; max-width: 1080px; margin: 0 auto; }

@media (max-width: 900px) {
  .vt-stats, .vt-grid-2, .vt-grid-3 { grid-template-columns: 1fr; }
  .vt-shell { flex-direction: column; }
  .vt-side { width: auto; flex: none; display: flex; overflow: auto; gap: 4px; }
  .vt-side a { white-space: nowrap; }
}