:root {
  --primary: #0f2d5e;
  --primary-mid: #1a4480;
  --primary-light: #2563eb;
  --accent: #f97316;
  --accent-hover: #ea6c00;
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --c-pf: #2563eb; --c-pf-bg: #eff6ff;
  --c-esi: #059669; --c-esi-bg: #ecfdf5;
  --c-tds: #d97706; --c-tds-bg: #fffbeb;
  --c-pt: #7c3aed; --c-pt-bg: #f5f3ff;
  --c-lwf: #0891b2; --c-lwf-bg: #ecfeff;
  --c-bonus: #dc2626; --c-bonus-bg: #fef2f2;
  --c-factory: #92400e; --c-factory-bg: #fef3c7;
  --c-env: #15803d; --c-env-bg: #f0fdf4;
  --c-fire: #9d174d; --c-fire-bg: #fff1f2;
  --c-general: #475569; --c-general-bg: #f8fafc;
  --tl-teal: #ff9e2c;
  --tl-white: #ffffff;
}

body{background:#f1f5f9}
/* ── Hero ── */
.hero {
    background-image: url(../images/connectbg.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 140px 0px 110px;
    text-align: center;
}

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 197, 163, .12);
    border: 1px solid rgba(0, 197, 163, .25);
    color: var(--tl-teal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 0px;
}


.hero h1 {
    font-size: clamp(1.9rem, 4vw, 4.2rem);
    margin-top: 10px;
    font-weight: 700;
    color: var(--tl-white);
    line-height: 58px;
    margin-bottom: 18px;
}
.hero h1 em {
    color: var(--tl-teal);
    font-style: normal;
}
.hero p {
    text-align: center;
    color: #fff;
    font-size: 22px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.hero-state{display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:wrap;position:relative;margin-top:30px;}
.hero-state label{font-size:1.6rem;opacity:.9;font-weight:500; color:#fff;}
.state-pick{padding:.7rem 1.25rem;border-radius:8px;border:2px solid rgba(255,255,255,.5);background:#fff;color:var(--text);font-size:1.2rem;font-weight:600;min-width:260px;cursor:pointer;}
.state-pick:focus{outline:none;border-color:#fff;}
.hero-stats{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;margin-top:5px;position:relative;}
.hs {
    text-align: center;
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.hs-num {
    font-size: 1.8rem;
    font-weight: 500;
    color: #040404;
}
.hs-lbl {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #3c3c3c;
}

/* ── Controls bar ── */
.ctrl-bar{background:#fff;border-bottom:1px solid var(--border);padding:.75rem 1.75rem;display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;position:sticky;top:58px;z-index:150;}
.ctrl-bar select, .ctrl-bar input[type=text] {
    padding: 1rem 1.9rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1.3rem;
    color: var(--text);
    background: #fff;
    transition: border .2s, box-shadow .2s;
    font-weight: 500;
}
.ctrl-bar select:focus,.ctrl-bar input:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(37,99,235,.1);}

.ctrl-bar select{
 width: 140px;
 min-width: auto;
}
select#stateMain {
    width: 274px;
}

.search-wrap{position:relative;}
.search-wrap input{padding-left:2rem;min-width:200px;}
.search-ico{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:1.2rem;}
.view-tog{margin-left:auto;display:flex;background:var(--bg);border-radius:7px;padding:3px;border:1px solid var(--border);gap:2px;}
.vbtn{padding:.38rem .9rem;border:none;background:transparent;border-radius:5px;font-size:1.2rem;cursor:pointer;color:var(--muted);transition:all .2s;display:flex;align-items:center;gap:.35rem;}
.vbtn.active{background:#fff;color:var(--primary);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.results-bar {
    padding: .4rem 1.75rem;
    font-size: 1.2rem;
    color: var(--muted);
    text-align: center;
    padding-top: 7px;
}
/* ── Legend ── */
.legend{padding:1.5rem 0rem;display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center; justify-content:center;}
.legend-lbl{font-size:1.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-right:.25rem;}
.ldot {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: default;
    flex-wrap: wrap;
}
.ldot-c{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* ── Main ── */
.main{padding:1.5rem 1.75rem 2rem;max-width:1450px;margin:0 auto;}
.sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;}
.sec-title{font-size:1.8rem;font-weight:600;color:var(--text);}
.sec-sub {
    font-size: 1.3rem;
    color: var(--muted);
    margin-top: 5px;
}

/* ── Calendar Grid ── */
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.25rem;}
.month-card{background:#fff;border-radius:12px;border:1px solid var(--border);overflow:hidden;transition:box-shadow .2s,transform .15s;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.month-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-2px);}
.mc-head{background:var(--primary);color:#fff;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;}
.mc-month{font-size:1.8rem;font-weight:700;}
.mc-year{font-size:1.2rem;opacity:.7;}
.mc-count{background:rgba(255,255,255,.2);padding:.15rem .55rem;border-radius:99px;font-size:1.2rem;font-weight:600;}
.mc-body{padding:.6rem;}
.cc{display:flex;align-items:flex-start;gap:.55rem;padding:1rem .5rem;border-radius:7px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;margin-bottom:1rem;}
.cc:hover{background:var(--bg);}
.cc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.cc-info{flex:1;min-width:0;}
.cc-name{font-size:1.2rem;font-weight:500;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-cat{font-size:1.2rem;color:var(--muted);margin-top:1px;}
.cc-due{font-size:1rem;font-weight:500;color:var(--accent);white-space:nowrap;flex-shrink:0;}
.mc-empty{text-align:center;padding:1.25rem;font-size:1.2rem;color:var(--muted);font-style:italic;}

/* ── Table View ── */
.tbl-wrap{background:#fff;border-radius:12px;border:1px solid var(--border);overflow:auto;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ctbl{width:100%;border-collapse:collapse;}
.ctbl th{background:var(--primary);color:#fff;padding:.8rem 1rem;text-align:left;font-size:1.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;cursor:pointer;user-select:none;transition:background .15s;}
.ctbl th:hover{background:#1e4d8c;}
.ctbl th .sort-ico{opacity:.5;margin-left:.3rem;}
.ctbl td{padding:.8rem 1rem;font-size:1.3rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.ctbl tr:last-child td{border-bottom:none;}
.ctbl tr:hover td{background:#f8fafc;}
.month-sep td{background:var(--bg)!important;font-weight:700;color:var(--primary);font-size:1.4rem;text-transform:uppercase;letter-spacing:.6px;padding:.45rem 1rem;}
.cbadge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:99px;font-size:1.2rem;font-weight:500;white-space:nowrap;}
.fbadge{display:inline-block;padding:.18rem .55rem;border-radius:4px;font-size:1.2rem;font-weight:500;border:1.5px solid;white-space:nowrap;}
.fb-monthly{border-color:var(--c-pf);color:var(--c-pf);}
.fb-quarterly{border-color:var(--c-tds);color:var(--c-tds);}
.fb-halfyearly{border-color:var(--c-pt);color:var(--c-pt);}
.fb-annual{border-color:var(--c-esi);color:var(--c-esi);}
.fb-onetime{border-color:var(--muted);color:var(--muted);}
.due-cell{font-weight:700;color:var(--accent);}
.penalty-cell{font-size:.75rem;color:var(--danger);max-width:180px;}

/* ── Detail Panel ── */
.dpanel{position:fixed;right:0;top:0px;bottom:0;width:380px;background:#fff;border-left:1px solid var(--border);z-index:180;transform:translateX(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:-6px 0 24px rgba(0,0,0,.1);}
.dpanel.open{transform:translateX(0);}
.dp-hdr{padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:1;}
.dp-close{float:right;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);line-height:1;padding:.1rem;}
.dp-cat-bar{display:inline-flex;align-items:center;gap:.4rem;font-size:1rem;font-weight:600;padding:.2rem .6rem;border-radius:4px;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.3px;}
.dp-title{font-size:1.2rem;font-weight:600;color:var(--text);line-height:1.3;clear:both;}
.dp-body{padding:1.25rem;}
.dp-row{display:flex;gap:.75rem;margin-bottom:.85rem;align-items:flex-start;}
.dp-lbl{font-size:1.2rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;min-width:90px;padding-top:2px;flex-shrink:0;}
.dp-val{font-size:1.2rem;color:var(--text);flex:1;}
.dp-alert{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:.85rem;margin-top:1rem;font-size:1.3rem;color:#9a3412;}
.dp-alert strong{display:block;margin-bottom:.25rem;}

/* ── Download Section ── */
.dl-section{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%);color:#fff;padding:3rem 2rem;text-align:center;margin-top:2rem;}
.dl-section h2{font-size:1.6rem;font-weight:800;margin-bottom:.5rem;}
.dl-section p{opacity:.85;max-width:460px;margin:0 auto 1.5rem;font-size:.95rem;}
.dl-features{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;}

.dl-feat {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.3rem;
    margin-top: 15px;
    color: #000;
}
.btn-dl{background:var(--accent);color:#fff;border:none;padding:.9rem 2.25rem;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 14px rgba(249,115,22,.4);}
.btn-dl:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.5);}

/* ── Modal ── */
.modal-ov{overflow:auto; display:none;position:fixed;inset:0;background:rgba(15,45,94,.65);z-index:999;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px);}
.modal-ov.open{display:flex;}
.modal2{background:#FBF7EB;border-radius:16px;width:100%;max-width:590px;overflow:hidden;animation:modIn .25s ease;}
.searchrow {
    background: #fff;
    position: sticky;
    top: 76px;
    padding: 10px 0px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    z-index:2;
}
#connectdiv{display:none;}
.reqwestbtn{max-width: 270px;}

@keyframes modIn{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.mod-hdr{background:#FBF7EB;color:#fff;padding:1.4rem 1.5rem 0px; position:relative;}
.mod-hdr h3 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #0A3A7C;
    margin-top: 6px;
}

.mod-hdr p {
    font-size: 1.5rem;
    color: #000;
}
.mod-body{padding:1.4rem 1.5rem;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem; margin-bottom: 10px;}
.fg{margin-bottom:.9rem;}
.fg label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: .35rem;
}
.fg input, .fg select {
    width: 100%;
    padding: .58rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    transition: border .2s, box-shadow .2s;
    height: 42px;
}
.fg input:focus,.fg select:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.form-note{font-size:1.5rem;color:#333333;margin-bottom:1rem;}
.btn-sub {
    width: 100%;
    background: #0A3A7C;
    color: #fff;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-sub:hover{background:var(--accent-hover);}
.btn-sub:disabled{opacity:.6;cursor:not-allowed;}
.btn-can {
    width: auto;
    background: transparent;
    border: none;
    color: #0f4f93;
    padding: .55rem;
    font-size: 2rem;
    cursor: pointer;
    margin-top: .5rem;
    position: absolute;
    right: 11px;
    top: 0;
}
.btn-can:hover{color:var(--text);}
.success-msg{text-align:center;padding:1.5rem 1rem;}
.success-msg .s-ico{font-size:3rem;margin-bottom:.75rem;}
.success-msg h4{font-size:1.5rem;font-weight:500;margin-bottom:.5rem;}
.success-msg p{font-size:1.3rem;color:var(--muted);margin-bottom:1.25rem;}
.btn-sdl {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    border: none;
    padding: .75rem 1.75rem;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    background: #0a3a7c;
}
.error {
    border-color: #ff9898 !important;
}
.toast {
    position: fixed;
    right: 1.5rem;
    color: #fff;
    padding: .8rem 1.25rem;
    border-radius: 10px;
    font-size: 1.2rem;
    display: none;
    align-items: center;
    gap: .6rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    z-index: 9999;
    top: 9px;
    font-weight: 500;
}
.toast.show{display:flex;}

.mod-hdr::before {
    content: "";
    width: 100px;
    position: absolute;
    height: 2px;
    background: #FF9D2C;
    bottom: -10px;
}
.hdr-tag{color:#fff;}

@media(max-width:991px) {
.searchrow{top:60px;}
.hero{padding:60px 0px 70px;}
}

@media(max-width:900px) {
    .hero h1{font-size:1.75rem;}
  .cal-grid{grid-template-columns:1fr;}
  
  .view-tog{margin-left:0;width:fit-content;}
  .dpanel{width:100%;top:auto;bottom:0;height:82vh;border-left:none;border-top:1px solid var(--border);transform:translateY(110%);}
  .dpanel.open{transform:translateY(0);}
  .frow{grid-template-columns:1fr;}
}
@media(max-width:767px) {
.ctrl-bar{flex-direction:column;align-items:stretch;}
.search-wrap input{width:100%;}
.searchrow, .ctrl-bar{position:inherit;}
.connect-cta{padding:20px 20px;}
.hero p{font-size:16px;}
.legend-lbl{width:100%;}
.legend{justify-content:flex-start;}
.ctrl-bar select, .select#stateMain{width:100% !important;}
.hs-lbl, .hs-lbl{font-size:1.3rem}
.hero-stats {
    gap: 9px;
    justify-content: center;
}
}
@media(max-width:480px){
  .hero{padding:2.5rem 1rem 2rem;}
  .main{padding:1rem;}
  .hdr{padding:0 1rem;}
}
@media print{
  .hdr,.ctrl-bar,.legend,.dl-section,.dpanel,.modal-ov,.results-bar{display:none!important;}
  .main{padding:0;}
}