:root{
    --crimson:#A6192E;
    --crimson-dark:#7E1223;
    --navy:#0B2545;
    --navy-soft:#12315C;
    --parchment:#FAF4E8;
    --parchment-dim:#F1E9D8;
    --gold:#C99A3B;
    --gold-soft:#E9CE8E;
    --ink:#2B2620;
    --ink-soft:#6b6255;
    --green:#4C7A51;
    --line:#E3D8BE;
    --white:#FFFDF9;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  body{margin:0;}
  html,body{height:100%;}
  body{
    background:var(--parchment);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Noto Serif Devanagari','Georgia',serif;
    color:var(--navy);
    margin:0;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}

  /* Prayer-flag strip: signature motif */
  .flag-strip{
    height:6px;
    display:flex;
    width:100%;
  }
  .flag-strip span{flex:1;}
  .flag-strip .b{background:#1C3F94;}
  .flag-strip .w{background:#F4F1E8;}
  .flag-strip .r{background:var(--crimson);}
  .flag-strip .g{background:#2E7D46;}
  .flag-strip .y{background:var(--gold);}

  .app{
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:100vh;
  }

  /* Sidebar */
  .sidebar{
    background:var(--navy);
    color:var(--parchment);
    display:flex;
    flex-direction:column;
    padding:26px 18px;
    position:relative;
    overflow:hidden;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
    padding:0 4px;
  }
  .brand-mark{
    width:38px;height:38px;border-radius:50%;
    background:linear-gradient(160deg,var(--gold),var(--crimson));
    display:flex;align-items:center;justify-content:center;
    font-family:'Noto Serif Devanagari',serif;
    font-weight:700;color:var(--navy);font-size:18px;
    flex-shrink:0;
  }
  .brand-text{line-height:1.15;}
  .brand-text .name{font-family:'Noto Serif Devanagari',serif;font-size:16px;font-weight:600;color:var(--white);}
  .brand-text .sub{font-size:10.5px;color:var(--gold-soft);letter-spacing:.06em;text-transform:uppercase;}

  nav{margin-top:28px;display:flex;flex-direction:column;gap:3px;}
  .nav-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,244,232,.45);padding:0 12px;margin:14px 0 8px;}
  .nav-btn{
    display:flex;align-items:center;gap:11px;
    padding:10px 12px;border-radius:8px;
    color:rgba(250,244,232,.82);
    background:transparent;border:none;
    font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;
    cursor:pointer;text-align:left;width:100%;
    transition:background .15s ease, color .15s ease;
  }
  .nav-btn:hover{background:rgba(250,244,232,.08);color:var(--white);}
  .nav-btn.active{background:var(--crimson);color:var(--white);}
  .nav-btn svg{width:17px;height:17px;flex-shrink:0;}

  .sidebar-foot{
    margin-top:auto;
    padding-top:18px;
  }
  .himalaya{
    width:100%;height:64px;opacity:.9;
  }
  .foot-caption{
    font-size:10px;color:rgba(250,244,232,.4);text-align:center;margin-top:6px;letter-spacing:.04em;
  }

  /* Main */
  main{
    padding:26px 40px 60px;
    max-width:1180px;
  }
  .topbar{
    display:flex;justify-content:space-between;align-items:flex-start;
    margin-bottom:26px;flex-wrap:wrap;gap:14px;
  }
  .topbar h1{font-size:26px;font-weight:600;}
  .topbar .tag{color:var(--ink-soft);font-size:13.5px;margin-top:4px;}

  .rate-widget{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px 16px;
    display:flex;align-items:center;gap:12px;
    box-shadow:0 1px 2px rgba(43,38,32,.04);
  }
  .rate-widget .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);}
  .rate-widget .val{display:flex;align-items:center;gap:6px;margin-top:2px;}
  .rate-widget input{
    width:78px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;
    font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--navy);
    background:var(--parchment-dim);
  }
  .rate-widget .eq{color:var(--ink-soft);font-size:13px;}

  section.view{display:none;}
  section.view.active{display:block;}

  /* Cards / stat grid */
  .stat-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px;
  }
  .stat-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 18px 16px;position:relative;overflow:hidden;
  }
  .stat-card::before{
    content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent,var(--crimson));
  }
  .stat-card .num{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--navy);}
  .stat-card .lbl{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}

  .panel{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px 24px;margin-bottom:22px;
  }
  .panel h2{font-size:18px;font-weight:600;margin-bottom:4px;}
  .panel .desc{font-size:13px;color:var(--ink-soft);margin-bottom:16px;}

  table{width:100%;border-collapse:collapse;font-size:13.5px;}
  th{
    text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid var(--line);font-weight:600;
  }
  td{padding:10px 10px;border-bottom:1px solid var(--parchment-dim);}
  tr:last-child td{border-bottom:none;}

  .pill{
    display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
    font-size:11.5px;font-weight:600;
  }
  .pill.present{background:#E4EFE4;color:var(--green);}
  .pill.absent{background:#F6E1E4;color:var(--crimson);}
  .pill.paid{background:#E4EFE4;color:var(--green);}
  .pill.due{background:#FBEFD9;color:#946B15;}

  button.btn{
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
    border:none;border-radius:7px;padding:8px 14px;cursor:pointer;
    transition:filter .15s ease;
  }
  button.btn:hover{filter:brightness(1.06);}
  .btn-primary{background:var(--crimson);color:var(--white);}
  .btn-navy{background:var(--navy);color:var(--white);}
  .btn-ghost{background:var(--parchment-dim);color:var(--navy);}
  .btn-sm{padding:5px 10px;font-size:12px;}

  .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
  select,input[type=date],input[type=text],input[type=number]{
    font-family:'Inter',sans-serif;border:1px solid var(--line);border-radius:7px;
    padding:8px 10px;font-size:13px;background:var(--white);color:var(--ink);
  }

  .attend-toggle{
    display:flex;gap:6px;
  }
  .toggle-btn{
    border:1px solid var(--line);background:var(--white);border-radius:6px;
    padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-soft);
  }
  .toggle-btn.p-on{background:var(--green);color:#fff;border-color:var(--green);}
  .toggle-btn.a-on{background:var(--crimson);color:#fff;border-color:var(--crimson);}

  /* Materials */
  .subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .subject-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 18px;
  }
  .subject-card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .subject-card .head .icon{
    width:34px;height:34px;border-radius:8px;background:var(--parchment-dim);
    display:flex;align-items:center;justify-content:center;font-size:16px;
  }
  .subject-card h3{font-size:15.5px;}
  .subject-card .count{font-size:11px;color:var(--ink-soft);}
  .material-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:7px 0;border-top:1px solid var(--parchment-dim);font-size:12.8px;
  }
  .material-item:first-of-type{border-top:none;}
  .material-item a{color:var(--navy-soft);text-decoration:none;font-weight:500;}
  .material-item .type{font-size:10px;color:var(--ink-soft);background:var(--parchment-dim);padding:2px 6px;border-radius:4px;}
  .add-material{margin-top:10px;display:flex;gap:6px;}
  .add-material input{flex:1;font-size:12px;padding:6px 8px;}

  /* Fees */
  .fee-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;}
  .fee-line{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--parchment-dim);}
  .fee-line:last-child{border-bottom:none;}
  .fee-line .name{font-size:13.5px;font-weight:500;}
  .fee-line .sub{font-size:11px;color:var(--ink-soft);}
  .fee-amounts{text-align:right;}
  .fee-amounts .usd{font-size:11.5px;color:var(--ink-soft);}
  .fee-amounts .npr{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--navy);font-size:14.5px;}
  .fee-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:2px solid var(--navy);}
  .fee-total .npr{font-size:20px;color:var(--crimson);}

  .receipt-form{display:grid;gap:10px;}
  .receipt-form label{font-size:11.5px;color:var(--ink-soft);display:block;margin-bottom:4px;}
  .receipt-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

  /* Facilities */
  .facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .facility-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;
  }
  .facility-top{
    height:64px;display:flex;align-items:center;justify-content:center;font-size:26px;
    background:linear-gradient(135deg,var(--navy-soft),var(--navy));
  }
  .facility-body{padding:14px 16px 16px;}
  .facility-body h3{font-size:14.5px;margin-bottom:4px;}
  .facility-body p{font-size:12.3px;color:var(--ink-soft);line-height:1.5;margin:0 0 8px;}
  .facility-body .meta{display:flex;justify-content:space-between;font-size:11px;color:var(--gold);font-weight:600;}

  .empty{padding:26px;text-align:center;color:var(--ink-soft);font-size:13px;}

  @media (max-width:880px){
    .app{grid-template-columns:1fr;}
    .sidebar{flex-direction:row;overflow-x:auto;align-items:center;padding:14px;}
    .brand{margin-bottom:0;}
    nav{flex-direction:row;margin-top:0;margin-left:14px;}
    .nav-eyebrow{display:none;}
    .sidebar-foot{display:none;}
    main{padding:20px;}
    .stat-grid,.subject-grid,.facility-grid{grid-template-columns:1fr 1fr;}
    .fee-cols{grid-template-columns:1fr;}
  }