:root{
  --navy:#14304D;
  --navy-deep:#0A1B2C;
  --amber:#F0A93A;
  --amber-deep:#D4820F;
  --amber-bright:#FF9F1C;
  --sage:#4B6B52;
  --sand:#F6F2EA;
  --sand-deep:#EAE2D0;
  --ink:#20262B;
  --white:#FFFFFF;
  --line: rgba(20,48,77,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy-deep);
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber-deep);
  font-weight:600;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
section{padding:96px 0;}
@media(max-width:720px){ section{padding:64px 0;} .wrap{padding:0 20px;} }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,242,234,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px;margin:0 auto;padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand svg{width:38px;height:38px;flex-shrink:0;}
.brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;color:var(--navy-deep);line-height:1.1;}
.brand-name span{color:var(--amber-deep);}
nav{display:flex; gap:32px; font-size:0.94rem; font-weight:500;}
nav a{position:relative; padding:4px 0; color:var(--navy);}
nav a:hover{color:var(--amber-deep);}
.header-actions{display:flex;align-items:center;gap:18px;}
.phone-link{font-size:0.92rem;font-weight:600;color:var(--navy-deep);white-space:nowrap;}
.phone-link small{display:block;font-weight:400;font-size:0.72rem;color:var(--sage);font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px; border-radius:7px; font-weight:600; font-size:0.88rem;
  border:1.5px solid transparent; cursor:pointer; transition:all .18s ease;
  white-space:nowrap;
}
.btn-amber{ background:var(--amber-bright); color:var(--navy-deep); box-shadow:0 10px 26px -10px rgba(255,159,28,0.55); }
.btn-amber:hover{ background:var(--amber-deep); transform:translateY(-1px); box-shadow:0 16px 32px -12px rgba(255,159,28,0.6); }
.btn-outline{ border-color:var(--navy); color:var(--navy); background:transparent; }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-sm{padding:8px 16px;font-size:0.8rem;}
.btn-danger{border-color:#B3453D;color:#B3453D;background:transparent;}
.btn-danger:hover{background:#B3453D;color:var(--white);}
.nav-toggle{display:none; background:none; border:none; cursor:pointer;}
.nav-toggle svg{width:26px;height:26px;}
@media(max-width:880px){
  nav{ display:none; }
  nav.nav-open{ display:flex; position:absolute; top:100%; left:0; right:0; background:var(--sand); flex-direction:column; padding:20px 32px; gap:16px; border-bottom:1px solid var(--line); }
  .header-actions .phone-link{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg, rgba(10,27,44,0.55) 0%, rgba(10,27,44,0.35) 35%, rgba(10,27,44,0.88) 100%),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=75') center 40% / cover no-repeat;
  color:var(--sand);
  padding:76px 0 0 0;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:auto 0 58px 0; height:5px; z-index:3;
  background:linear-gradient(90deg, var(--amber-bright) 0%, var(--amber) 50%, var(--sage) 100%);
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:60px;
  background:var(--sand);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:scaleX(1.4);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  position:relative; z-index:2; padding-bottom:100px;
}
@media(max-width:920px){ .hero-grid{grid-template-columns:1fr; padding-bottom:60px;} }
.eyebrow-light{ color:var(--amber-bright); }
.hero h1{
  font-size:clamp(2.5rem, 5vw, 4.1rem);
  color:var(--white);
  line-height:1.03;
  margin:18px 0 22px;
  text-shadow:0 4px 30px rgba(0,0,0,0.25);
}
.hero h1 em{ font-style:italic; color:var(--amber-bright); font-weight:500; }
.hero p.lede{
  font-size:1.14rem; color:rgba(246,242,234,0.92); max-width:520px; margin-bottom:34px;
  text-shadow:0 2px 16px rgba(0,0,0,0.3);
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.btn-ghost-light{ border:1.5px solid rgba(246,242,234,0.55); color:var(--sand); background:rgba(255,255,255,0.06); backdrop-filter:blur(6px);}
.btn-ghost-light:hover{ background:rgba(246,242,234,0.16); border-color:var(--sand); }

/* Live estimator — the hero's signature element */
.estimator-card{
  background:rgba(10,27,44,0.62);
  backdrop-filter:blur(20px);
  border:1px solid rgba(246,242,234,0.22);
  border-radius:16px;
  padding:30px 30px 28px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.55);
}
.estimator-card h3{ color:var(--white); font-size:1.02rem; margin-bottom:4px; }
.estimator-card .est-sub{ font-size:0.8rem; color:rgba(246,242,234,0.6); margin-bottom:22px; }
.estimator-card select{
  width:100%; padding:12px 14px; border-radius:6px; border:1.5px solid rgba(246,242,234,0.25);
  background:rgba(255,255,255,0.06); color:var(--white); font-family:'Inter',sans-serif; font-size:0.92rem; margin-bottom:20px;
}
.estimator-card select option{ color:var(--ink); }
.est-slider-row{ margin-bottom:24px; }
.est-slider-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.est-slider-top .amt-big{ font-family:'IBM Plex Mono',monospace; font-size:1.6rem; font-weight:600; color:var(--amber-bright); }
.est-slider-top .amt-range{ font-size:0.72rem; color:rgba(246,242,234,0.5); font-family:'IBM Plex Mono',monospace; }
input[type="range"].est-range{
  -webkit-appearance:none; width:100%; height:6px; border-radius:4px;
  background:linear-gradient(90deg, var(--amber-bright) 0%, var(--amber-bright) var(--fill,50%), rgba(246,242,234,0.18) var(--fill,50%));
  outline:none;
}
input[type="range"].est-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--white); border:3px solid var(--amber-bright); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
input[type="range"].est-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--white); border:3px solid var(--amber-bright); cursor:pointer;
}
.est-results{ border-top:1px solid rgba(246,242,234,0.16); padding-top:16px; margin-bottom:22px; }
.est-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:0.88rem; color:rgba(246,242,234,0.72); }
.est-row.total{ border-top:1px solid rgba(246,242,234,0.16); margin-top:6px; padding-top:12px; font-weight:600; color:var(--white); font-size:0.98rem; }
.est-row .val{ font-family:'IBM Plex Mono',monospace; color:var(--white); }
.est-row.total .val{ color:var(--amber-bright); font-size:1.1rem; }

.ruler-card{
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(14px);
  border:1px solid rgba(246,242,234,0.18);
  border-radius:12px;
  padding:32px 30px 26px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.5);
}
.ruler-label{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px;}
.ruler-label .amt{font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:600; color:var(--amber);}
.ruler-label .cap{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:rgba(246,242,234,0.55);}
.ruler-track{
  position:relative; height:6px; border-radius:4px;
  background:rgba(246,242,234,0.14);
  margin:0 4px;
}
.ruler-fill{
  position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(90deg, var(--sage) 0%, var(--amber) 100%);
}
.ruler-hand{
  position:absolute; top:50%; width:22px; height:22px;
  transform:translate(-50%,-50%);
  animation:slide 7s ease-in-out infinite;
}
@keyframes slide{
  0%,100%{ left:2%; }
  50%{ left:98%; }
}
@media (prefers-reduced-motion: reduce){ .ruler-hand{ animation:none; left:50%; } }
.ruler-ticks{
  display:flex; justify-content:space-between; margin-top:14px;
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:rgba(246,242,234,0.55);
}
.ruler-note{ margin-top:20px; font-size:0.82rem; color:rgba(246,242,234,0.6); border-top:1px solid rgba(246,242,234,0.14); padding-top:16px;}

/* ---------- Trust strip ---------- */
.trust-strip{
  background:var(--sand);
  padding:56px 0 88px;
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-item{ padding:28px 20px; text-align:center; border-right:1px solid var(--line); }
.trust-item:last-child{ border-right:none; }
.trust-item .num{ font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:600; color:var(--navy-deep); }
.trust-item .cap{ font-size:0.78rem; color:var(--sage); margin-top:6px; letter-spacing:0.01em;}
@media(max-width:720px){
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item:nth-child(2){border-right:none;}
}

/* ---------- Why Choose Us (photo section) ---------- */
.why-section{ background:var(--white); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media(max-width:920px){ .why-grid{grid-template-columns:1fr; gap:36px;} }
.why-photo{ position:relative; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(11,32,51,0.35); }
.why-photo img{ width:100%; height:440px; object-fit:cover; }
.why-float-card{
  position:absolute; bottom:20px; left:20px; right:20px;
  background:rgba(11,32,51,0.88); backdrop-filter:blur(10px);
  border-radius:10px; padding:20px 24px; color:var(--sand);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.why-float-card .item .num{ font-family:'IBM Plex Mono',monospace; font-size:1.3rem; font-weight:600; color:var(--amber); }
.why-float-card .item .cap{ font-size:0.72rem; color:rgba(246,242,234,0.65); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px; }
.why-list{ display:flex; flex-direction:column; gap:22px; margin-top:28px; }
.why-list .why-item{ display:flex; gap:16px; align-items:flex-start; }
.why-list .why-icon{
  width:48px; height:48px; border-radius:50%; background:rgba(75,107,82,0.12); color:var(--sage);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.why-list .why-icon svg{ width:22px; height:22px; }
.why-list h4{ font-size:1rem; color:var(--navy-deep); margin-bottom:4px; }
.why-list p{ font-size:0.9rem; color:#525b64; }

/* ---------- Section headers ---------- */
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:12px; letter-spacing:-0.02em; }
.section-head p{ color:#4a5560; margin-top:14px; font-size:1.05rem; }

/* ---------- Packages ---------- */
.packages-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  background:transparent; border:none;
}
@media(max-width:920px){ .packages-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .packages-grid{grid-template-columns:1fr;} }
.package-card{
  background:var(--white); padding:36px 30px; transition:all .22s ease;
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(11,32,51,0.04);
}
.package-card:hover{ background:var(--white); transform:translateY(-4px); box-shadow:0 24px 44px -24px rgba(11,32,51,0.22); border-color:rgba(226,167,62,0.35); }
.icon-badge{
  width:56px; height:56px; border-radius:50%; background:rgba(240,169,58,0.14);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.icon-badge svg{ width:26px; height:26px; margin-bottom:0; color:var(--amber-deep); }
.package-card svg{ width:34px; height:34px; color:var(--amber-deep); margin-bottom:18px;}
.package-card h3{ font-size:1.14rem; margin-bottom:8px; }
.package-card p{ font-size:0.92rem; color:#525b64; flex-grow:1; }
.package-card .pkg-meta{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:0.76rem; color:var(--sage); margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.package-card .btn{ margin-top:18px; align-self:flex-start; }

/* ---------- Rate logic ---------- */
.rate-section{ background:var(--navy-deep); color:var(--sand); }
.rate-section .section-head p{ color:rgba(246,242,234,0.72); }
.rate-section .eyebrow{ color:var(--amber); }
.rate-section h2{ color:var(--white); }
.rate-factors{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:12px;
}
@media(max-width:820px){ .rate-factors{grid-template-columns:1fr;} }
.factor{
  border:1px solid rgba(246,242,234,0.16); border-radius:8px; padding:28px;
  background:rgba(246,242,234,0.03);
}
.factor .tag{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--amber); letter-spacing:0.1em;}
.factor h3{ color:var(--white); font-size:1.1rem; margin:10px 0 8px;}
.factor p{ color:rgba(246,242,234,0.68); font-size:0.92rem; }
.rate-flat-note{
  margin-top:36px; padding:20px 24px; border-left:3px solid var(--amber);
  background:rgba(226,167,62,0.08); font-size:0.95rem; color:rgba(246,242,234,0.86);
}

/* ---------- Eligibility ---------- */
.elig-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media(max-width:860px){ .elig-wrap{grid-template-columns:1fr; gap:40px;} }
.elig-list{ display:flex; flex-direction:column; gap:20px; }
.elig-item{ display:flex; gap:16px; align-items:flex-start; }
.elig-item .check{
  width:30px; height:30px; border-radius:50%; background:var(--sage); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.elig-item .check svg{ width:15px; height:15px; }
.elig-item h4{ font-size:1rem; font-weight:600; color:var(--navy-deep); margin-bottom:4px; }
.elig-item p{ font-size:0.92rem; color:#525b64; }
.elig-note{ margin-top:26px; font-size:0.82rem; color:var(--sage); font-style:italic; }
.elig-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px; padding:40px;
}
.elig-card .amt-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:0.94rem;}
.elig-card .amt-row:last-child{ border-bottom:none; }
.elig-card .amt-row span:last-child{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--navy-deep); }

/* ---------- CTA / Contact ---------- */
.contact-section{ background:var(--sand-deep); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
@media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-detail{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-detail:last-child{border-bottom:none;}
.contact-detail svg{ width:22px;height:22px;color:var(--amber-deep); flex-shrink:0; margin-top:2px;}
.contact-detail h4{ font-size:0.98rem; color:var(--navy-deep); }
.contact-detail p{ font-size:0.92rem; color:#525b64; }
form{ display:flex; flex-direction:column; gap:16px; }
.field label{ display:block; font-size:0.82rem; font-weight:600; color:var(--navy-deep); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:4px;
  font-family:'Inter',sans-serif; font-size:0.94rem; background:var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:500px){ .field-row{grid-template-columns:1fr;} }
.field-error{color:#B3453D;font-size:0.78rem;margin-top:4px;}

/* ---------- Footer ---------- */
footer{ background:var(--navy-deep); color:rgba(246,242,234,0.7); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(246,242,234,0.12); }
@media(max-width:720px){ .footer-grid{grid-template-columns:1fr; gap:32px;} }
.footer-grid h5{ color:var(--white); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-family:'IBM Plex Mono',monospace;}
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:0.9rem; }
.footer-grid ul a:hover{ color:var(--amber); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand span{ font-family:'Fraunces',serif; color:var(--white); font-weight:600; font-size:1.1rem; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:0.78rem; }
.disclaimer{ font-size:0.76rem; color:rgba(246,242,234,0.45); max-width:820px; margin-top:18px; line-height:1.6; }

/* ================= App additions: auth, dashboard, tables, alerts ================= */

/* ---------- Admin console theme (visually distinct from the user dashboard) ---------- */
body.admin-body{ background:#0E1B2A; }
body.admin-body header{ background:#0B1622; border-bottom:1px solid rgba(226,167,62,0.14); backdrop-filter:none; position:static; }
body.admin-body header a, body.admin-body .phone-link{ color:var(--sand); }
body.admin-body .brand-name{ color:var(--white); }
body.admin-body header .btn-outline{ border-color:rgba(246,242,234,0.35); color:var(--sand); }
body.admin-body header .btn-outline:hover{ background:rgba(246,242,234,0.1); color:var(--white); }
.admin-shell{ background:#0E1B2A; min-height:100vh; }
.admin-shell .app-shell{ background:#0E1B2A; }
.admin-shell .side-nav{ background:#101F30; border-right:1px solid rgba(226,167,62,0.1); }
.admin-shell .side-nav a{ color:rgba(246,242,234,0.68); border-left:3px solid transparent; }
.admin-shell .side-nav a:hover{ background:rgba(226,167,62,0.06); color:var(--sand); }
.admin-shell .side-nav a.active{ color:var(--amber); border-left-color:var(--amber); background:rgba(226,167,62,0.08); }
.admin-shell .main-content{ background:#0E1B2A; }
.admin-shell .page-title-row h1{ color:var(--white); }
.admin-shell .page-title-row p{ color:rgba(246,242,234,0.55); }
.admin-shell .stat-card{
  background:#142132; border:1px solid rgba(226,167,62,0.12); border-radius:10px;
}
.admin-shell .stat-card .cap{ color:rgba(226,167,62,0.85); }
.admin-shell .stat-card .val{ color:var(--white); }
.admin-shell .panel{ background:#142132; border:1px solid rgba(226,167,62,0.12); }
.admin-shell .panel h3{ color:var(--white); }
.admin-shell .panel-empty{ color:rgba(246,242,234,0.4); }
.admin-shell .table-wrap{ background:#142132; border:1px solid rgba(226,167,62,0.12); }
.admin-shell table.data-table th{ background:#0E1B2A; color:rgba(226,167,62,0.85); border-bottom:1px solid rgba(226,167,62,0.12); }
.admin-shell table.data-table td{ border-bottom:1px solid rgba(226,167,62,0.08); color:rgba(246,242,234,0.86); }
.admin-shell table.data-table tr:hover td{ background:rgba(226,167,62,0.05); }
.admin-shell .plan-detail-card{ background:#142132; border:1px solid rgba(226,167,62,0.12); }
.admin-shell .plan-detail-card h3{ color:var(--white); }
.admin-shell .field label{ color:rgba(246,242,234,0.75); }
.admin-shell .field input, .admin-shell .field select, .admin-shell .field textarea{
  background:#0E1B2A; border-color:rgba(226,167,62,0.18); color:var(--sand);
}
.admin-shell .field input:focus, .admin-shell .field select:focus, .admin-shell .field textarea:focus{ border-color:var(--amber); }
.admin-shell .icon-link{ border-color:rgba(226,167,62,0.2); color:rgba(246,242,234,0.8); }
.admin-shell .icon-link:hover{ background:rgba(226,167,62,0.08); }
.admin-shell .elig-card .amt-row{ border-bottom-color:rgba(226,167,62,0.1); color:rgba(246,242,234,0.86); }
.admin-shell .elig-card .amt-row span:last-child{ color:var(--white); }
.admin-shell .notif-item{ border-bottom-color:rgba(226,167,62,0.1); color:rgba(246,242,234,0.86); }
.admin-shell .empty-state{ color:rgba(246,242,234,0.4); }

/* Auth pages */
.auth-section{ padding:72px 0; }
.auth-card{
  max-width:460px; margin:0 auto; background:var(--white); border:1px solid var(--line);
  border-radius:10px; padding:44px 40px; box-shadow:0 18px 44px -30px rgba(11,32,51,0.4);
}
.auth-card h2{ font-size:1.6rem; margin-bottom:6px; }
.auth-card .sub{ color:#525b64; font-size:0.92rem; margin-bottom:28px; }
.auth-card form{ gap:18px; }
.auth-switch{ margin-top:24px; text-align:center; font-size:0.9rem; color:#525b64; }
.auth-switch a{ color:var(--amber-deep); font-weight:600; }
.auth-hero-image{ border-radius:10px; overflow:hidden; margin-bottom:24px; }
.auth-hero-image img{ width:100%; height:160px; object-fit:cover; }

/* Alerts */
.alert{ padding:14px 18px; border-radius:6px; font-size:0.9rem; margin-bottom:20px; border-left:3px solid; }
.alert-success{ background:rgba(75,107,82,0.1); color:var(--sage); border-color:var(--sage); }
.alert-error{ background:rgba(179,69,61,0.08); color:#B3453D; border-color:#B3453D; }
.alert-info{ background:rgba(226,167,62,0.1); color:var(--amber-deep); border-color:var(--amber); }

/* Dashboard */
.dash-shell{ background:var(--sand); min-height:70vh; }
.dash-header{ background:var(--navy-deep); color:var(--sand); padding:44px 0; }
.dash-header h1{ color:var(--white); font-size:1.9rem; }
.dash-header p{ color:rgba(246,242,234,0.72); margin-top:8px; }
.dash-body{ padding:48px 0 80px; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; }
@media(max-width:920px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .stat-grid{grid-template-columns:1fr;} }
.stat-card{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:26px; }
.stat-card .cap{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--sage); font-family:'IBM Plex Mono',monospace; }
.stat-card .val{ font-family:'IBM Plex Mono',monospace; font-size:1.7rem; font-weight:600; color:var(--navy-deep); margin-top:10px; }

.dash-columns{ display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
@media(max-width:920px){ .dash-columns{grid-template-columns:1fr;} }
.panel{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:28px; margin-bottom:24px; }
.panel h3{ font-size:1.08rem; margin-bottom:18px; }
.panel .panel-empty{ font-size:0.9rem; color:#8b93a1; padding:16px 0; }

.notif-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.88rem; align-items:flex-start; }
.notif-item:last-child{ border-bottom:none; }
.notif-item .notif-body:hover{ color:var(--amber-deep); }
.notif-delete{
  background:none; border:none; color:#8b93a1; font-size:1.1rem; line-height:1; cursor:pointer;
  padding:2px 6px; border-radius:4px; flex-shrink:0; margin-left:auto;
}
.notif-delete:hover{ color:#B3453D; background:rgba(179,69,61,0.08); }
.notif-dot{ width:8px;height:8px;border-radius:50%; background:var(--amber); margin-top:6px; flex-shrink:0; }
.notif-dot.read{ background:var(--line); }
.notif-time{ display:block; font-size:0.74rem; color:#8b93a1; margin-top:2px; font-family:'IBM Plex Mono',monospace;}

/* Tables */
.table-wrap{ overflow-x:auto; background:var(--white); border:1px solid var(--line); border-radius:8px; }
table.data-table{ width:100%; border-collapse:collapse; font-size:0.9rem; min-width:640px; }
table.data-table th{ text-align:left; padding:14px 18px; background:var(--sand); color:var(--navy-deep); font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--line); }
table.data-table td{ padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:rgba(226,167,62,0.05); }

.badge{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:0.72rem; font-weight:600; letter-spacing:0.03em; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; }
.badge-pending{ background:rgba(226,167,62,0.14); color:var(--amber-deep); }
.badge-approved{ background:rgba(75,107,82,0.14); color:var(--sage); }
.badge-rejected{ background:rgba(179,69,61,0.12); color:#B3453D; }

/* Loan summary card (apply loan) */
.summary-card{ background:var(--navy-deep); color:var(--sand); border-radius:8px; padding:28px; }
.summary-card h3{ color:var(--white); font-size:1.05rem; margin-bottom:18px; }
.summary-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(246,242,234,0.12); font-size:0.92rem; }
.summary-row:last-child{ border-bottom:none; font-weight:600; padding-top:16px; }
.summary-row .lbl{ color:rgba(246,242,234,0.68); }
.summary-row .val{ font-family:'IBM Plex Mono',monospace; color:var(--amber); }

/* Sidebar nav for dashboard/admin */
.app-shell{ display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 90px); }
@media(max-width:860px){ .app-shell{ grid-template-columns:1fr; } }
.side-nav{ background:var(--white); border-right:1px solid var(--line); padding:32px 0; }
@media(max-width:860px){ .side-nav{ border-right:none; border-bottom:1px solid var(--line); padding:16px 0; } }
.side-nav ul{ list-style:none; display:flex; flex-direction:column; gap:2px; }
@media(max-width:860px){ .side-nav ul{ flex-direction:row; flex-wrap:wrap; padding:0 20px; } }
.side-nav a{ display:flex; align-items:center; gap:10px; padding:12px 28px; font-size:0.92rem; font-weight:500; color:var(--navy); border-left:3px solid transparent; }
.side-nav a:hover{ background:var(--sand); }
.side-nav a.active{ color:var(--amber-deep); border-left-color:var(--amber); background:var(--sand); font-weight:600; }
.main-content{ padding:40px 36px; }
@media(max-width:600px){ .main-content{ padding:28px 18px; } }

.page-title-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:32px; }
.page-title-row h1{ font-size:1.6rem; }
.page-title-row p{ color:#525b64; font-size:0.92rem; margin-top:4px; }

.hero-sub{ background:var(--navy-deep); }
.hero-sub .wrap{ padding-top:56px; padding-bottom:56px; }
.hero-sub h1{ font-size:2.2rem; }

.plan-detail-card{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:32px; margin-bottom:24px;}
.two-col{ display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
@media(max-width:920px){ .two-col{grid-template-columns:1fr;} }

.action-icons{ display:flex; gap:8px; flex-wrap:wrap; }
.icon-link{ padding:6px 12px; border-radius:4px; font-size:0.76rem; font-weight:600; border:1px solid var(--line); }
.icon-link:hover{ background:var(--sand); }

.empty-state{ text-align:center; padding:60px 20px; color:#8b93a1; }
.empty-state svg{ width:40px;height:40px;margin:0 auto 14px; color:var(--line); }