:root {
  --ui-ink: #13243a;
  --ui-ink-2: #1d3351;
  --ui-brand: #0b7a68;
  --ui-brand-2: #10a083;
  --ui-bg: #f4f7fb;
  --ui-card: #ffffff;
  --ui-border: #e5ebf2;
  --ui-muted: #728096;
  --ui-shadow: 0 16px 40px rgba(22, 41, 70, .08);
}

html { scroll-behavior: smooth; }
body { background: var(--ui-bg); color: var(--ui-ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Login */
.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, rgba(16,160,131,.12), transparent 30%),
    radial-gradient(circle at 95% 85%, rgba(44,91,145,.12), transparent 28%),
    #f3f6fa;
  padding: 28px;
}
.login-shell {
  width: min(1080px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  background: #fff;
  border: 1px solid rgba(20, 38, 62, .08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(21, 41, 69, .14);
}
.login-hero {
  position: relative;
  padding: 54px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 16%, rgba(71, 221, 193, .22), transparent 24%),
    linear-gradient(160deg, #10253f 0%, #153c5a 55%, #0b6f61 100%);
  overflow: hidden;
}
.login-hero::before,
.login-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}
.login-hero::before { width: 420px; height: 420px; right: -210px; top: -160px; }
.login-hero::after { width: 310px; height: 310px; left: -190px; bottom: -190px; }
.login-brand {
  display:flex; align-items:center; gap:14px; position:relative; z-index:1;
}
.login-logo {
  width: 50px; height: 50px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);
  font-weight:800; letter-spacing:.02em;
  backdrop-filter: blur(8px);
}
.login-brand-title { font-weight: 750; font-size: 1rem; }
.login-brand-sub { color: rgba(255,255,255,.62); font-size:.75rem; margin-top:2px; }
.login-hero-copy { position:relative; z-index:1; max-width: 520px; margin-top: 96px; }
.login-kicker { color:#8ee5d5; font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; }
.login-hero h1 { color:#fff; font-size:clamp(2rem, 4vw, 3.35rem); line-height:1.07; letter-spacing:-.04em; margin:14px 0 18px; }
.login-hero p { color:rgba(255,255,255,.78); font-size:1rem; line-height:1.7; max-width: 460px; }
.login-points { display:grid; gap:12px; margin-top:30px; }
.login-point { display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.84); font-size:.9rem; }
.login-point-icon { width:28px; height:28px; border-radius:9px; background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#9cf0df; }
.login-form-panel { display:flex; align-items:center; justify-content:center; padding:54px 58px; background:#fff; }
.login-card { width:min(390px,100%); }
.login-card h2 { color:var(--ui-ink); font-size:1.75rem; letter-spacing:-.03em; margin-bottom:7px; }
.login-card > p { color:var(--ui-muted); margin-bottom:30px; }
.login-label { color:#3c4a60; font-size:.78rem; font-weight:700; margin-bottom:8px; }
.login-input { min-height:50px; border:1px solid #dce4ed; border-radius:12px; padding:0 14px; box-shadow:none !important; }
.login-input:focus { border-color:#73cbbd; box-shadow:0 0 0 4px rgba(16,160,131,.10) !important; }
.login-submit { min-height:52px; border:0; border-radius:13px; background:linear-gradient(135deg,#0b7a68,#0b9079); font-weight:700; letter-spacing:.01em; box-shadow:0 10px 24px rgba(11,122,104,.22); }
.login-submit:hover { background:linear-gradient(135deg,#096d5e,#087b68); }
.login-footer { margin-top:26px; color:#96a1af; font-size:.72rem; text-align:center; }
.login-trust { display:flex; align-items:center; justify-content:center; gap:6px; color:#8b97a7; font-size:.72rem; margin-top:12px; }
.login-trust-dot { width:7px; height:7px; background:#23a889; border-radius:50%; }

/* App shell */
.app-sidebar { background:linear-gradient(180deg,#10243c 0%,#142b48 60%,#10213a 100%) !important; box-shadow: 10px 0 30px rgba(17,34,56,.08) !important; }
.sidebar-brand { min-height:84px !important; }
.sidebar-brand .brand-badge, .sidebar-mobile-header .brand-badge { background:linear-gradient(135deg,#10a083,#0a6f60) !important; box-shadow:0 7px 18px rgba(10,111,96,.25); }
.sidebar-section-label { letter-spacing:.16em !important; padding-top:26px !important; color:rgba(255,255,255,.34) !important; }
.sidebar-nav { gap:6px !important; }
.sidebar-nav .nav-link { min-height:46px !important; border-radius:12px !important; padding: .72rem .85rem !important; }
.sidebar-nav .nav-link.active { background:linear-gradient(135deg,#0c806c,#0b6f60) !important; box-shadow:0 8px 20px rgba(7,110,94,.2) !important; }
.sidebar-footer { background:rgba(255,255,255,.025); }
.app-navbar { min-height:78px !important; background:rgba(255,255,255,.95) !important; backdrop-filter:blur(10px); }
.app-content { padding-top:34px !important; }
.app-content > .mb-4:first-child { margin-bottom:28px !important; }
.app-content h2 { font-size:clamp(1.7rem,2.35vw,2.25rem) !important; letter-spacing:-.035em !important; }
.app-content .card { border-radius:16px !important; box-shadow:var(--ui-shadow) !important; border-color:var(--ui-border) !important; }
.app-content .card-header { background:#fff !important; }
.app-content .table { margin-bottom:0; }
.app-content .table thead th { color:#657489 !important; letter-spacing:.045em; }
.app-content .table tbody td { vertical-align:middle; }
.app-content .btn { border-radius:10px; font-weight:600; }
.app-content .form-control, .app-content .form-select { min-height:46px; border-radius:11px; border-color:#dbe3ec; }
.app-content .form-control:focus, .app-content .form-select:focus { border-color:#74cdbc; box-shadow:0 0 0 4px rgba(16,160,131,.09); }
.stat-card { border-left-width:5px !important; border-radius:16px !important; }
.sidebar-toggle { border:1px solid #e2e8ef !important; }
.user-menu { border-radius:12px !important; }

/* Approval page */
.approval-header { margin-bottom:26px; }
.approval-icon { box-shadow:0 8px 18px rgba(14,128,109,.1); }
.approval-summary { box-shadow:0 6px 14px rgba(138,103,20,.06); }

@media (max-width: 900px) {
  .login-shell { grid-template-columns:1fr; min-height:auto; }
  .login-hero { min-height:330px; padding:34px; }
  .login-hero-copy { margin-top:46px; }
  .login-form-panel { padding:38px 30px 44px; }
}
@media (max-width: 575px) {
  .login-page { padding:12px; }
  .login-shell { border-radius:20px; }
  .login-hero { padding:26px; min-height:290px; }
  .login-hero h1 { font-size:2rem; }
  .login-points { margin-top:20px; }
  .login-form-panel { padding:30px 22px 34px; }
}