/* ===========================================================
   SAAGAR — sagardahal123.com.np
   Shared design system
   =========================================================== */
:root{
  --navy:#2d5578; --navy-2:#1f3f5c; --navy-ink:#17324a; --navy-soft:#3f6d95;
  --bg:#eef3f9; --bg-2:#e6eef7; --card:#ffffff;
  --line:#d8e2ef; --line-2:#c3d2e4;
  --ink:#16283a; --dim:#5a6f85; --faint:#8ba0b6;
  --blue:#2f6df6; --green:#16a34a; --gold:#e0a12a; --red:#dc2626; --purple:#7c3aed;
  --r:16px; --r-sm:11px;
  --sh:0 2px 10px rgba(23,50,74,.06);
  --sh-2:0 14px 34px rgba(23,50,74,.14);
  --sh-3:0 24px 60px rgba(23,50,74,.20);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans Devanagari","Nirmala UI",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  --max:1120px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.62; -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer;}
input,select,textarea{font:inherit;}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px;}
h1,h2,h3,h4{line-height:1.25; font-weight:850;}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 22px;}
.grow{flex:1;}

/* ---------- header ---------- */
.hd{background:#fff; border-bottom:2px solid var(--navy); position:sticky; top:0; z-index:60;}
.hd-in{max-width:var(--max); margin:0 auto; padding:9px 22px; display:flex; align-items:center; gap:12px;}
.hd-logo{height:44px; width:auto; border-radius:9px; box-shadow:var(--sh); flex-shrink:0;}
.hd-brand{font-weight:900; letter-spacing:1.8px; font-size:16.5px; color:var(--navy); line-height:1.1; flex-shrink:0;}
.hd-brand small{display:block; font-weight:600; font-size:9.5px; letter-spacing:1.4px; color:var(--faint);}
.hd-nav{margin-left:auto; display:flex; gap:2px; align-items:center; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; max-width:100%;}
.hd-nav::-webkit-scrollbar{display:none;}
.hd-nav a{font-size:13.5px; font-weight:700; color:var(--navy); padding:8px 12px; border-radius:9px; transition:.16s; white-space:nowrap; flex-shrink:0;}
@media(max-width:780px){ .hd-nav a.sec{display:none;} }
.hd-nav a:hover{background:var(--bg-2);}
.hd-nav a.on{background:var(--navy); color:#fff;}

/* ---------- page hero ---------- */
.phero{background:linear-gradient(150deg,#fff 0%,var(--bg-2) 100%); border-bottom:1px solid var(--line); padding:32px 0 28px;}
.phero h1{font-size:clamp(23px,4vw,34px); font-weight:900; color:var(--navy-2); letter-spacing:.2px;}
.phero p{color:var(--dim); margin-top:7px; font-size:14.5px; max-width:720px;}
.crumb{font-size:12.5px; font-weight:700; color:var(--faint); letter-spacing:.4px; margin-bottom:8px;}
.crumb a:hover{color:var(--navy); text-decoration:underline;}

/* ---------- sections / cards ---------- */
.sec{padding:30px 0 44px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--sh);}
.card + .card{margin-top:16px;}
.card h2{font-size:17px; font-weight:850; color:var(--navy-2); margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.card h2 .em{font-size:20px;}
.card > p.note{color:var(--dim); font-size:13.5px; margin:-8px 0 14px;}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12.5px; font-weight:800; color:var(--dim); letter-spacing:.3px;}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%; padding:10px 12px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  background:#fbfdff; color:var(--ink); transition:.15s; font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3.5px rgba(45,85,120,.13); background:#fff;}
textarea{resize:vertical; min-height:96px; line-height:1.6;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.row > *{flex:1; min-width:130px;}
.row.tight{gap:8px;}
.row.center{align-items:center;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr;}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 19px; border-radius:var(--r-sm); font-weight:800; font-size:14px;
  border:2px solid transparent; transition:.17s; background:var(--navy); color:#fff; white-space:nowrap;
}
.btn:hover{background:var(--navy-ink); transform:translateY(-2px); box-shadow:0 9px 20px rgba(23,50,74,.22);}
.btn:active{transform:translateY(0);}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn.ghost:hover{background:var(--navy); color:#fff;}
.btn.soft{background:var(--bg-2); color:var(--navy-2); border-color:var(--line-2);}
.btn.soft:hover{background:var(--line-2); color:var(--navy-2); box-shadow:none; transform:none;}
.btn.sm{padding:8px 14px; font-size:13px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}

/* ---------- output ---------- */
.out{margin-top:13px; padding:13px 15px; border-radius:var(--r-sm); background:#f2f8ff;
  border:1.5px solid #cfe1f5; font-size:15px; font-weight:700; color:var(--navy-2); min-height:20px; word-break:break-word;}
.out:empty{display:none;}
.out.ok{background:#eefaf1; border-color:#b6e5c4; color:#136c36;}
.out.bad{background:#fdf0f0; border-color:#f3c4c4; color:#a11f1f;}
.out .big{font-size:26px; font-weight:900; display:block; line-height:1.2;}
.out .sub{font-size:13px; font-weight:600; color:var(--dim); display:block; margin-top:3px;}
.muted{color:var(--dim); font-size:12.5px; line-height:1.55;}
.mono{font-family:var(--mono); font-size:13px;}

/* ---------- tables ---------- */
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
table.tbl th,table.tbl td{padding:9px 11px; border-bottom:1px solid var(--line); text-align:left;}
table.tbl th{background:var(--bg-2); font-weight:800; color:var(--navy-2); font-size:12.5px; letter-spacing:.3px;}
table.tbl tr:last-child td{border-bottom:0;}
table.tbl tbody tr:hover{background:#f7fafe;}

/* ---------- tiles (directory) ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 17px 15px; display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--sh); transition:transform .19s, box-shadow .19s, border-color .19s; position:relative; overflow:hidden;
}
.tile::before{content:""; position:absolute; inset:0 0 auto 0; height:3.5px; background:linear-gradient(90deg,var(--navy),#5b8fc9);}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2);}
.tile .ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:23px;
  background:linear-gradient(135deg,#e8f0f9,#d6e3f2); margin-bottom:3px;}
.tile h3{font-size:15.5px; font-weight:850; color:var(--navy-2);}
.tile p{font-size:12.8px; color:var(--dim); flex:1; line-height:1.5;}
.tile .go{font-size:12.5px; font-weight:800; color:var(--blue);}
.tile:hover .go{text-decoration:underline;}

/* ---------- toast ---------- */
#toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,90px); z-index:200;
  background:var(--navy-ink); color:#fff; padding:11px 20px; border-radius:999px; font-size:13.5px; font-weight:700;
  box-shadow:var(--sh-3); opacity:0; transition:.3s; pointer-events:none; max-width:90vw; text-align:center;}
#toast.show{opacity:1; transform:translate(-50%,0);}
#toast.err{background:#8f1d1d;}

/* ---------- footer ---------- */
.ft{background:var(--navy-2); color:#c3d4e5; padding:28px 0; margin-top:auto;}
.ft-in{max-width:var(--max); margin:0 auto; padding:0 22px; display:flex; flex-direction:column; gap:9px; align-items:center; text-align:center;}
.ft-sig{font-size:19px; font-weight:900; color:#fff; letter-spacing:.8px;}
.ft-sig small{display:block; font-size:10.5px; font-weight:600; letter-spacing:2px; color:#8fa9c2; margin-top:2px;}
.ft-links{display:flex; gap:15px; flex-wrap:wrap; justify-content:center; font-size:13.5px;}
.ft-links a{color:#e6eef6; font-weight:700;}
.ft-links a:hover{text-decoration:underline;}
.ft-note{font-size:11.8px; color:#7e97b0;}

/* ---------- utilities ---------- */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.chip{font-size:12px; font-weight:750; color:var(--navy); background:var(--bg-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:999px; transition:.15s;}
.chip:hover,.chip.on{background:var(--navy); color:#fff; border-color:var(--navy);}
.badge{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px; padding:3px 9px; border-radius:999px;
  background:var(--bg-2); color:var(--navy); border:1px solid var(--line);}
.badge.bot{background:#f3eeff; color:#5b21b6; border-color:#ddd0f7;}
.badge.room{background:#eafaf0; color:#166534; border-color:#c3ecd1;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.right{text-align:right;}
.center{text-align:center;}
.mt{margin-top:14px;} .mt-s{margin-top:8px;} .mt-l{margin-top:22px;}
.hidden{display:none !important;}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
  .reveal.in{opacity:1; transform:none;}
}
@media(max-width:620px){
  .hd-brand small{display:none;}
  .hd-logo{height:38px;}
  .card{padding:17px;}
  .btn{padding:10px 16px;}
}