/* falvtool.site visual layer
   Keeps the original DOM and business logic intact. */
:root {
  --bg: #f5f3ee;
  --surface: rgba(255, 253, 250, .94);
  --surface-2: #f3f0e9;
  --surface-3: #fffdfa;
  --border: #e6e1d8;
  --border-strong: #d9d1c4;
  --text: #14263b;
  --text-2: #667483;
  --text-3: #958a7c;
  --primary: #203e5d;
  --primary-strong: #142f4b;
  --primary-soft: #e6edf2;
  --primary-line: rgba(32, 62, 93, .22);
  --danger: #a9564d;
  --danger-soft: #f5e7e3;
  --success: #447962;
  --success-soft: #e7f0eb;
  --warning: #b3833e;
  --warning-soft: #f4ead9;
  --purple: #756596;
  --purple-soft: #ede9f3;
  --muted: #718096;
  --muted-soft: #edf0f2;
  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 24px;
  --glass: blur(14px) saturate(1.15);
  --shadow-xs: 0 3px 12px rgba(31, 45, 61, .04);
  --shadow-sm: 0 7px 24px rgba(31, 45, 61, .06);
  --shadow-md: 0 12px 32px rgba(31, 45, 61, .09);
  --shadow-lg: 0 24px 64px rgba(31, 45, 61, .14);
  --ring: 0 0 0 3px rgba(185, 138, 67, .2);
  --sidebar-w: 252px;
  --topbar-h: 68px;
}

body {
  background:
    radial-gradient(720px 460px at 88% -10%, rgba(218, 232, 224, .72), transparent 62%),
    radial-gradient(620px 420px at -8% 96%, rgba(239, 222, 194, .58), transparent 62%),
    #f5f3ee;
}

::selection { background: #f1e4ce; }
.brand-logo, .auth-logo { filter: none; }

.topbar {
  background: rgba(245, 243, 238, .9);
  border-bottom-color: rgba(218, 210, 197, .88);
  padding-inline: 24px;
}

.brand-logo { box-shadow: 0 7px 18px rgba(32, 62, 93, .18); }
.brand-name { color: #14263b; letter-spacing: .02em; }
.brand-sub { color: #8c7c68; letter-spacing: .08em; }

#sidebar {
  background: rgba(249, 247, 242, .94);
  border-right: 1px solid var(--border);
  padding: 18px 14px 22px;
}

.nav-group-title { color: #9a8e7c; letter-spacing: .15em; }
.nav-item { border-radius: 12px; color: #405264; }
.nav-item:hover { background: #fffdfa; }
.nav-item.active {
  background: #fffdfa;
  color: var(--primary);
  box-shadow: 0 8px 22px rgba(31, 45, 61, .08);
}
.nav-item.active::before { background: #b98a43; box-shadow: none; }
.nav-item.active .nav-badge { box-shadow: none; }
.sidebar-foot { border-top-color: #ddd5ca; }
.data-hint b { color: #447962; font-weight: 700; }

#view { padding-top: calc(var(--topbar-h) + 26px); }

.portal-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 26px 28px;
  border: 1px solid #e9dece;
  border-radius: 24px;
  background: linear-gradient(118deg, #f3e5d0 0%, #fff7e8 52%, #e8f1ec 100%);
  box-shadow: var(--shadow-sm);
}
.portal-hero::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: 9%;
  top: -175px;
  border-radius: 50%;
  background: rgba(234, 183, 88, .22);
  filter: blur(16px);
}
.portal-kicker {
  color: #9a7e55;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.portal-hero h1 { margin: 8px 0 5px; font-size: 28px; letter-spacing: -.03em; }
.portal-hero p { margin: 0; color: #667483; font-size: 13px; line-height: 1.8; }
.portal-hero-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 13px;
  border: 1px solid rgba(68, 121, 98, .18);
  border-radius: 999px;
  background: rgba(255, 253, 250, .8);
  color: #447962;
  font-size: 11px;
  font-weight: 700;
}
.portal-hero-status i { width: 8px; height: 8px; border-radius: 50%; background: #4d9877; box-shadow: 0 0 0 4px rgba(77, 152, 119, .12); }

.stat-grid { grid-template-columns: repeat(auto-fit, minmax(174px, 1fr)); gap: 14px; }
.stat-card, .panel, .table-wrap, .form-card {
  background: rgba(255, 253, 250, .96);
  border-color: var(--border);
  backdrop-filter: none;
}
.stat-card::after { background: #b98a43; }
.stat-card:hover { border-color: #d9d1c4; box-shadow: 0 12px 30px rgba(31, 45, 61, .09); }
.stat-num { filter: none; font-family: Georgia, "Times New Roman", serif; }
.panel-head { background: rgba(249, 247, 242, .58); }
.reminder-item:hover, table.list tbody tr:hover td { background: #fbf8f2; }
table.list th { background: #f4f1ea; color: #667483; }

.btn.primary { box-shadow: 0 5px 14px rgba(32, 62, 93, .18); }
.btn.primary:hover { box-shadow: 0 8px 20px rgba(32, 62, 93, .24); }
.tag.red { background: #a9564d; }
.tag.amber { background: #f1e4ce; color: #8a6733; }
.tag.green { background: #e7f0eb; color: #447962; }
.tag.blue { background: #e3edf4; color: #49789b; }

.auth-wrap::before {
  opacity: 1;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="140" height="140"><path d="M8 16h32M24 16v16M15 16v9M33 16v9" stroke="%23203e5d" stroke-width="3.5" stroke-linecap="round" fill="none"/><circle cx="15" cy="31" r="5.5" fill="none" stroke="%23203e5d" stroke-width="3"/><circle cx="33" cy="31" r="5.5" fill="none" stroke="%23203e5d" stroke-width="3"/><path d="M17 40h14" stroke="%23203e5d" stroke-width="3.5" stroke-linecap="round"/></svg>'),
    radial-gradient(560px 360px at 85% 10%, rgba(223, 205, 175, .64), transparent 62%),
    radial-gradient(460px 320px at 5% 95%, rgba(207, 225, 216, .76), transparent 62%);
}
.auth-card { background: rgba(255, 253, 250, .94); border-color: var(--border); }

@media (max-width: 760px) {
  .portal-hero { align-items: flex-start; flex-direction: column; padding: 22px 20px; }
  .portal-hero h1 { font-size: 23px; }
  .portal-hero-status { align-self: flex-start; }
}