/* ===== UP Adventure Sports Portal — Shared CSS ===== */
:root {
  --navy: #0f2d4a; --navy2: #1a4068;
  --sf: #FF6700;   --sf2: #e05900;
  --gr: #1a6b2e;   --gr2: #145522;
  --g50: #f8f9fa;  --g100: #f0f2f5; --g200: #e8eaed;
  --g300: #d0d3d9; --g500: #777;    --g700: #444; --g900: #1a2940;
  --ok: #1a6b2e; --wn: #E65100; --er: #C62828; --inf: #1565C0;
  --r: 8px; --rl: 12px; --sh: 0 2px 12px rgba(0,0,0,.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 15px; background: var(--g100); overflow-x: hidden; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--r); font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid; transition: all .15s; white-space: nowrap; text-decoration: none; font-family: inherit; }
.bp  { background: var(--sf);  color: #fff; border-color: var(--sf);  } .bp:hover  { background: var(--sf2); }
.bo  { background: #fff; color: var(--navy); border-color: var(--g300); } .bo:hover  { background: var(--g50); }
.bg  { background: var(--gr);  color: #fff; border-color: var(--gr);  } .bg:hover  { background: var(--gr2); }
.bd  { background: #fff; color: var(--er);  border-color: #FFCDD2; } .bd:hover  { background: #FFEBEE; }
.bw  { background: #fff; color: var(--wn);  border-color: #FFE0B2; } .bw:hover  { background: #FFF3E0; }
.bsm { padding: 7px 14px !important; font-size: 12px !important; min-height: 32px; }
.blg { padding: 13px 28px; font-size: 16px; }

/* ── GOVT HEADER ── */
.gh  { background: var(--navy); padding: 6px 0; border-bottom: 3px solid var(--sf); }
.ghi { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.gh-l { display: flex; align-items: center; gap: 10px; }
.gh-t1 { color: #fff; font-size: 13px; font-weight: 700; }
.gh-t2 { color: rgba(255,255,255,.55); font-size: 10px; }
.gh-r  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ghl   { color: rgba(255,255,255,.65); font-size: 13px; cursor: pointer; text-decoration: none; } .ghl:hover { color: #fff; }
.ghsep { color: rgba(255,255,255,.2); }
.flag  { display: flex; height: 14px; width: 22px; border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.fs    { flex: 1; }

/* ── PUBLIC NAV ── */
.lnav  { background: #fff; border-bottom: 1px solid var(--g200); position: sticky; top: 0; z-index: 100; box-shadow: var(--sh); }
.lnavi { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; height: 58px; gap: 12px; }
.nlogo { font-size: 15px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nlinks { display: flex; flex: 1; margin-left: 12px; }
.nl    { padding: 0 13px; height: 58px; display: flex; align-items: center; font-size: 12px; color: var(--g700); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap; transition: all .15s; }
.nl:hover, .nl.on { color: var(--sf); border-bottom-color: var(--sf); }
.ncta  { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* ── TICKER ── */
.ticker { background: var(--sf); padding: 8px 0; overflow: hidden; }
.ticki  { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.tlbl   { background: rgba(0,0,0,.2); padding: 3px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: .5px; }
.ttxt   { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── ADMISSION NOTICE TICKER (right → left, text only) ── */
.ticker-adm {
    background: transparent;
    border-bottom: none;
    overflow: hidden;
    padding: 8px 0;
}
.ticker-adm-wrap { overflow: hidden; width: 100%; position: relative; }
.ticker-adm-track {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker-rtl 32s linear infinite;
    will-change: transform;
}
.ticker-adm-text {
    flex-shrink: 0;
    padding-right: 5rem;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #c62828;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
@keyframes ticker-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-adm-track { animation: none; justify-content: center; width: 100%; }
    .ticker-adm-text:last-child { display: none; }
}

/* ── CAROUSEL ── */
.car        { position: relative; overflow: hidden; height: 480px; }
.car-slides { display: flex; transition: transform .6s ease; height: 100%; }
.car-slide  { min-width: 100%; height: 100%; position: relative; display: flex; align-items: center; }
.car-slide img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.car-ov    { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,45,74,.85) 0%, rgba(15,45,74,.5) 60%, transparent 100%); }
.car-cnt   { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; }
.car-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,103,0,.25); border: 1px solid rgba(255,103,0,.5); color: #FFA559; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.car-hi    { font-size: 18px; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.car-h1    { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 12px; max-width: 560px; }
.car-p     { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 480px; margin-bottom: 22px; }
.car-prev, .car-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
.car-prev:hover, .car-next:hover { background: rgba(255,255,255,.3); }
.car-prev { left: 12px; } .car-next { right: 12px; }
.car-dots  { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .2s; }
.cdot.on { background: #fff; width: 20px; border-radius: 4px; }
.hstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; max-width: 440px; }
.hs     { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r); padding: 12px; text-align: center; }
.hs-n   { font-size: 22px; font-weight: 800; color: #FFA559; }
.hs-l   { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 2px; }
.hero-aside { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--rl); padding: 22px; backdrop-filter: blur(8px); width: 260px; }
.ha-t { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.ql   { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); cursor: pointer; margin-bottom: 7px; transition: all .15s; text-decoration: none; }
.ql:last-child { margin-bottom: 0; }
.ql:hover { background: rgba(255,255,255,.14); border-color: rgba(255,103,0,.4); }
.ql-ic { width: 30px; height: 30px; border-radius: 6px; background: rgba(255,103,0,.2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #FFA559; flex-shrink: 0; }
.ql-t  { font-size: 13px; font-weight: 600; color: #fff; }
.ql-s  { font-size: 10px; color: rgba(255,255,255,.45); }

/* ── INFO STRIP ── */
.istrip { background: var(--g50); border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200); padding: 22px 16px; }
.istri  { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.is-ic  { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,103,0,.1); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sf); flex-shrink: 0; }

/* ── SECTIONS ── */
.sec    { padding: 52px 16px; max-width: 1200px; margin: 0 auto; }
.secbg  { background: #fff; }
.sec-hdr { text-align: center; margin-bottom: 36px; }
.sec-hdr h2 { font-size: 26px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.sec-hdr p  { font-size: 12px; color: var(--g500); max-width: 520px; margin: 0 auto; }
.sbadge { display: inline-block; background: rgba(255,103,0,.12); color: var(--sf); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 10px; margin-bottom: 10px; letter-spacing: .5px; text-transform: uppercase; }

/* ── PROCESS STEPS ── */
.pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; counter-reset: step; }
.pc    { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); padding: 18px; position: relative; counter-increment: step; }
.pc::before { content: counter(step); position: absolute; top: -12px; left: 18px; width: 26px; height: 26px; background: var(--sf); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 26px; text-align: center; }
.pc-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--g100); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; color: var(--sf); }
.pc-t  { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.pc-d  { font-size: 13px; color: var(--g500); line-height: 1.6; }

/* ── ACTIVITY CARDS ── */
.agrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.acard { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); overflow: hidden; transition: box-shadow .2s; }
.acard:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.aimg { height: 160px; position: relative; overflow: hidden; }
.aimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.acard:hover .aimg img { transform: scale(1.05); }
.aimg-ov  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.acat-pill { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.9); padding: 3px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }

/* ── VERIFY BOX ── */
.vbox  { background: linear-gradient(135deg, var(--navy), var(--navy2)); border-radius: var(--rl); padding: 36px; color: #fff; text-align: center; }
.vbox h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.vbox p  { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 22px; }
.vinrow  { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.vinrow input { flex: 1; padding: 11px 14px; border-radius: var(--r); border: none; font-size: 12px; outline: none; }

/* ── DOWNLOADS ── */
.dgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.ddl   { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); padding: 14px; display: flex; align-items: center; gap: 12px; }

/* ── SITES ── */
.scard     { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); padding: 16px; margin-bottom: 12px; }
.scard-hdr { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.scard-ic  { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.smeta     { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.sm-k { font-size: 13px; color: var(--g500); }
.sm-v { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 1px; }

/* ── CONTACT ── */
.cgrid  { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
.ci-box { background: var(--navy); color: #fff; border-radius: var(--rl); padding: 28px; }
.ci-item { display: flex; gap: 12px; margin-bottom: 20px; }
.ci-ic  { width: 36px; height: 36px; background: rgba(255,103,0,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--sf); flex-shrink: 0; margin-top: 2px; }

/* ── FAQ ── */
.faq    { background: #fff; border: 1px solid var(--g200); border-radius: var(--r); overflow: hidden; margin-bottom: 8px; }
.faq summary { padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-ic { margin-left: auto; color: var(--g500); font-size: 13px; transition: transform .2s; }
details[open] .faq-ic { transform: rotate(180deg); }
.faq-a  { padding: 10px 14px 12px 38px; font-size: 13px; color: var(--g500); line-height: 1.7; border-top: 1px solid var(--g100); }

/* ── FOOTER ── */
.footer { background: var(--navy); color: #fff; padding: 36px 16px 16px; }
.fgrid  { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 24px; }
.fgt    { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.fgl    { display: block; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 7px; text-decoration: none; } .fgl:hover { color: #fff; }
.fbot   { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: rgba(255,255,255,.35); }

/* ── FORMS ── */
input[type=text], input[type=email], input[type=date], input[type=tel],
input[type=number], input[type=password], input[type=time],
input[type=datetime-local], input[type=file], select, textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--g300); border-radius: var(--r);
  font-size: 13px; color: var(--g700); background: #fff; outline: none;
  transition: border .15s; font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--sf); }
textarea { min-height: 72px; resize: vertical; }
.fl    { font-size: 12px; color: var(--g500); margin-bottom: 4px; display: block; font-weight: 600; }
.fl .req { color: var(--er); }
.fl .opt { font-weight: 400; color: var(--g500); }
.fhint { font-size: 13px; color: var(--g500); margin-top: 3px; }
.fsec  { font-size: 13px; font-weight: 700; color: var(--navy); margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--g200); display: flex; align-items: center; gap: 6px; }
.fg1   { margin-bottom: 13px; }
.fg2   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.fg-full { grid-column: 1 / -1; }
.upload-area { border: 2px dashed var(--g300); border-radius: var(--r); padding: 22px; text-align: center; cursor: pointer; background: var(--g50); transition: border .15s; position: relative; overflow: hidden; }
.upload-area:hover { border-color: var(--sf); background: #FFF8F3; }
.upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ── CARDS / TABLES (portal) ── */
.card  { background: #fff; border-radius: var(--rl); border: 1px solid var(--g200); padding: 16px; margin-bottom: 16px; min-width: 0; }
.ct    { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.ct .fai { color: var(--sf); }
.two   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.two > * { min-width: 0; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ts    { overflow-x: auto; }
table  { width: 100%; border-collapse: collapse; font-size: 12px; }
th     { text-align: left; padding: 10px 13px; color: var(--g500); font-weight: 600; border-bottom: 1px solid var(--g200); background: var(--g50); font-size: 13px; white-space: nowrap; }
td     { padding: 10px 13px; border-bottom: 1px solid #f5f6f8; color: var(--g700); vertical-align: middle; font-size: 12px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--g50); }

/* ── BADGES ── */
.badge  { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.b-draft { background: #f5f5f5;  color: #616161; }
.b-sub   { background: #EEF4FF;  color: #1565C0; }
.b-up    { background: #E3F2FD;  color: #0277BD; }
.b-q     { background: #FFF8E1;  color: #F57F17; }
.b-fwd   { background: #E8EAF6;  color: #283593; }
.b-dm    { background: #FFF3E0;  color: #E65100; }
.b-prov  { background: #F3E5F5;  color: #6A1B9A; }
.b-ins   { background: #FBE9E7;  color: #BF360C; }
.b-pass  { background: #E8F5E9;  color: #1B5E20; }
.b-app   { background: #E8F5E9;  color: #1B5E20; }
.b-rej   { background: #FFEBEE;  color: #B71C1C; }
.b-iss   { background: #E0F2F1;  color: #004D40; }
.b-susp  { background: #FFF3E0;  color: #E65100; }
.b-exp   { background: #FFF3E0;  color: #E65100; }
.b-wn    { background: #FFF3E0;  color: #E65100; }
.b-pay   { background: #F3E5F5;  color: #6A1B9A; }
.b-water { background: #EEF4FF;  color: #1565C0; }
.b-air   { background: #E8EAF6;  color: #283593; }
.b-land  { background: #E8F5E9;  color: #1B5E20; }

/* ── ALERT / REMARK ── */
.alert  { padding: 12px 15px; border-radius: var(--r); font-size: 13px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 8px;flex-wrap: wrap; }
.a-w  { background: #FFF3E0; border: 1px solid #FFE0B2; color: var(--wn); }
.a-i  { background: #E3F2FD; border: 1px solid #BBDEFB; color: var(--inf); }
.a-ok { background: #E8F5E9; border: 1px solid #C8E6C9; color: var(--ok); }
.a-e  { background: #FFEBEE; border: 1px solid #FFCDD2; color: var(--er); }
.remark { background: #FFF8F3; border: 1px solid #FFD5B0; border-radius: var(--r); padding: 10px 12px; font-size: 13px; color: #8B4513; margin-top: 8px; line-height: 1.5; }

/* ── STAT GRID ── */
.sg { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.sc { background: #fff; border-radius: var(--rl); border: 1px solid var(--g200); padding: 14px 16px; }
.sl { font-size: 12px; color: var(--g500); margin-bottom: 5px; }
.sv { font-size: 24px; font-weight: 800; color: var(--g900); }
.ss { font-size: 13px; color: var(--g500); margin-top: 2px; }

/* ── PILLS / TABS ── */
.pills   { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.pill    { padding: 6px 14px; border: 1px solid var(--g300); border-radius: 10px; font-size: 12px; cursor: pointer; color: var(--g500); background: #fff; text-decoration: none; transition: all .15s; }
.pill.on, .pill:hover { background: var(--sf); color: #fff; border-color: var(--sf); }
.tab-bar { display: flex; border-bottom: 1px solid var(--g200); margin-bottom: 18px; }
.tab     { padding: 10px 17px; font-size: 12px; font-weight: 600; color: var(--g500); cursor: pointer; border-bottom: 2.5px solid transparent; transition: all .15s; text-decoration: none; }
.tab.on  { color: var(--sf); border-bottom-color: var(--sf); }

/* ── BUTTON ROWS ── */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
@media (max-width: 768px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; flex: none; }
}

/* ── PORTAL LAYOUT ── */
.portal { display: flex; height: 100vh; overflow: hidden; max-width: 100vw; }
.sb     { width: 238px; background: var(--navy); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width .2s; }
.sb-brand { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; min-height: 62px; }
.sb-embl  { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-embl img { width: 100%; height: 100%; object-fit: contain; }
.sb-bt .t1 { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sb-bt .t2 { color: rgba(255,255,255,.4); font-size: 10px; white-space: nowrap; }
.sb-nav { flex: 1; overflow-y: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sb-nav:hover { scrollbar-color: rgba(255,255,255,.18) transparent; }
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.sb-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
.sb-sec { padding: 10px 14px 2px; color: rgba(255,255,255,.22); font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; overflow: hidden; }
.ni     { display: flex; align-items: center; gap: 9px; padding: 9px 14px; color: rgba(255,255,255,.62); font-size: 12px; border-left: 3px solid transparent; transition: all .15s; white-space: nowrap; overflow: hidden; text-decoration: none; }
.ni:hover { background: rgba(255,255,255,.05); color: #fff; }
.ni.on    { background: rgba(255,103,0,.15); border-left-color: var(--sf); color: #fff; }
.ni .fai  { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.nb       { margin-left: auto; background: var(--sf); color: #fff; font-size: 13px; padding: 2px 6px; border-radius: 8px; flex-shrink: 0; }
.sb-foot  { padding: 11px 13px; border-top: 1px solid rgba(255,255,255,.08); }
.urow     { display: flex; align-items: center; gap: 8px; }
.uav      { width: 30px; height: 30px; border-radius: 50%; background: var(--sf); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.un       { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur       { color: rgba(255,255,255,.35); font-size: 10px; }
.pmain    { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar   { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 56px; background: #fff; border-bottom: 1px solid var(--g200); flex-shrink: 0; overflow: hidden; }
.tb-t     { font-size: 16px; font-weight: 700; color: var(--navy); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-src   { display: flex; align-items: center; gap: 6px; background: var(--g50); border: 1px solid var(--g200); border-radius: var(--r); padding: 8px 13px; font-size: 13px; color: var(--g500); width: 220px; }
.tb-gr    { font-size: 12px; color: var(--g500); white-space: nowrap; }
.ca       { flex: 1; overflow-y: auto; padding: 18px; background: var(--g100); }

/* ── MISC PORTAL ── */
.rv  { background: var(--g50); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.rr  { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.rr:last-child { margin-bottom: 0; }
.rk  { color: var(--g500); min-width: 130px; flex-shrink: 0; }
.rv-v { color: var(--g900); font-weight: 700; }
.cert-card { border: 2.5px solid var(--sf); border-radius: 12px; padding: 24px; background: #fff; position: relative; overflow: hidden; max-width: 600px; margin: 0 auto; }
.cert-wm   { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 900; color: var(--gr); opacity: .025; user-select: none; pointer-events: none; }
.cf-l { color: var(--g500); font-size: 10px; margin-bottom: 2px; }
.cf-v { font-weight: 700; color: var(--navy); font-size: 12px; }
.dr   { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5f6f8; }
.dr:last-child { border-bottom: none; }
.di   { width: 28px; height: 28px; background: #EEF4FF; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.no-item { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f5f6f8; }
.no-item:last-child { border-bottom: none; }
.no-ic   { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ni-sms  { background: #EEF4FF; color: var(--inf); }
.ni-em   { background: #E8F5E9; color: var(--ok); }
.ni-sys  { background: #FFF3E0; color: var(--wn); }
.ni-al   { background: #FFEBEE; color: var(--er); }
.chkr    { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f5f6f8; }
.chkr:last-child { border-bottom: none; }
.chkn    { width: 22px; height: 22px; background: var(--navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.chkl    { flex: 1; color: var(--g700); font-size: 12px; }
.rg      { display: flex; gap: 8px; flex-wrap: wrap; }
.ro      { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--g700); cursor: pointer; }
.ro input { width: 13px; height: 13px; accent-color: var(--sf); }
.br   { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f5f6f8; }
.br:last-child { border-bottom: none; }
.brl  { min-width: 130px; color: var(--g700); font-size: 13px; }
.brw  { flex: 1; height: 5px; background: var(--g100); border-radius: 3px; overflow: hidden; }
.brf  { height: 100%; border-radius: 3px; }
.brn  { min-width: 28px; text-align: right; color: var(--navy); font-weight: 700; font-size: 12px; }
.pipe { display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow-y: auto; }
.pi   { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--g200); border-radius: var(--r); background: #fff; }
.pi-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pi.done .pi-dot { background: var(--ok); }
.pi.curr { border-color: var(--sf); background: #FFF8F3; }
.pi.curr .pi-dot { background: var(--sf); }
.pi.todo .pi-dot { background: var(--g300); }
.pi-l { flex: 1; color: var(--g700); font-size: 12px; }
.pi.curr .pi-l { color: var(--navy); font-weight: 700; }
.pi.todo .pi-l { color: #bbb; }
.pi-d { font-size: 13px; color: #bbb; white-space: nowrap; }
.otp-row { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.otp-box { width: 48px; height: 52px; text-align: center; font-size: 20px; font-weight: 700; border: 1.5px solid var(--g300); border-radius: var(--r); outline: none; color: var(--navy); }
.otp-box:focus { border-color: var(--sf); }
.steps   { display: flex; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 4px; }
.step    { display: flex; align-items: center; gap: 5px; }
.sn      { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.step.done .sn { background: var(--ok);  color: #fff; }
.step.curr .sn { background: var(--sf);  color: #fff; }
.step.todo .sn { background: var(--g200); color: var(--g500); }
.sl2 { font-size: 13px; }
.step.done .sl2 { color: var(--g500); }
.step.curr .sl2 { color: var(--navy); font-weight: 700; }
.step.todo .sl2 { color: #ccc; }
.sline  { flex: 1; height: 1px; background: var(--g200); margin: 0 4px; min-width: 8px; }
.pcat   { background: #fff; border: 1.5px solid var(--g200); border-radius: var(--rl); padding: 14px; cursor: pointer; transition: all .15s; text-align: center; }
.pcat:hover, .pcat.sel { border-color: var(--sf); background: #FFF8F3; }
.pcat-ic { font-size: 22px; color: var(--sf); margin-bottom: 6px; }
.pcat-t  { font-size: 13px; font-weight: 700; color: var(--navy); }
.pcgrid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }

/* ── SIDEBAR ROLE SWITCHER ── */
.sb-role { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-rl   { color: rgba(255,255,255,.35); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.sb-rsel { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 13px; padding: 6px 8px; border-radius: 6px; cursor: pointer; outline: none; }
.sb-rsel option { background: var(--navy); }
.sb.col  { width: 54px; }
.sb.col .sb-bt, .sb.col .sb-role, .sb.col .sb-sec, .sb.col .nb, .sb.col .un, .sb.col .ur { display: none; }
.sb.col .sb-brand { justify-content: center; padding: 14px 8px; }
.sb.col .ni { padding: 11px 0; justify-content: center; gap: 0; border-left: none; }
.sb.col .ni.on { border-left: none; background: rgba(255,103,0,.2); border-radius: 0; }
.sb.col .ni .fai { width: 18px; font-size: 16px; }
.sb.col .sb-foot { padding: 10px 0; display: flex; justify-content: center; }
.sb.col .urow { justify-content: center; }
.sb.col .urow a { display: none; }
.tb-mb   { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; color: var(--g700); font-size: 16px; flex-shrink: 0; }
.tb-mb:hover { background: var(--g100); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero-aside { display: none; }
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .agrid { grid-template-columns: repeat(2,1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .istri { grid-template-columns: 1fr 1fr; }
  .sg    { grid-template-columns: repeat(2,1fr); }
  .cgrid { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .car    { height: 360px; }
  .car-h1 { font-size: 22px; }
  .nlinks { display: none; }
  /* Sidebar slides in from left on mobile */
  .sb     { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 100; transition: left .25s; width: 238px !important; }
  .sb.mob { left: 0; }
  /* Stat grids */
  .sg     { grid-template-columns: 1fr 1fr !important; }
  /* Content grids */
  .two    { grid-template-columns: 1fr; }
  .three  { grid-template-columns: 1fr; }
  .fg2    { grid-template-columns: 1fr; }
  .fg3    { grid-template-columns: 1fr; }
  .agrid  { grid-template-columns: 1fr; }
  .pgrid  { grid-template-columns: 1fr; }
  .pcgrid { grid-template-columns: repeat(2,1fr); }
  .istri  { grid-template-columns: 1fr; }
  .step .sl2 { display: none; }
  .sline  { min-width: 6px; }
  .dgrid  { grid-template-columns: 1fr; }
  /* Topbar: hide search/greeting, keep hamburger + title + key actions */
  .tb-src, .tb-gr { display: none; }
  .topbar { padding: 0 10px; gap: 8px; }
  .tb-t   { font-size: 14px; }
  /* Table scroll wrapper — constrain scroll to card, not whole page */
  .ts     { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Inline-grid overrides for pages that hardcode grid-template-columns */
  .smeta  { grid-template-columns: 1fr 1fr; }
  /* Key-value rows: allow label to shrink on narrow screens */
  .rk     { min-width: 100px; }
  .rr     { flex-wrap: wrap; }
  /* Cert card full width */
  .cert-card { max-width: 100%; }
  /* Pipe timeline text wrapping */
  .pi-l   { font-size: 13px; }
  /* Pills wrap naturally — already flex-wrap:wrap */
  /* Application selector full width */
  .ca .card select { max-width: 100%; }
  /* Filter rows in audit / reports */
  .fg[style*="min-width"] { min-width: 0 !important; width: 100%; }
}

/* EIMS public nav: icon gaps + mobile toggle */
.nl i { margin-right: 6px; font-size: 12px; }
.nl-login-mobile { display: none !important; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--g300); border-radius: var(--r); width: 40px; height: 36px; align-items: center; justify-content: center; color: var(--navy); cursor: pointer; }
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .ncta { display: none; }
  .nl-login-mobile { display: flex !important; }
  .lnavi { flex-wrap: wrap; height: auto; min-height: 58px; padding-top: 8px; padding-bottom: 8px; }
  .nlinks { display: none; width: 100%; flex-direction: column; margin-left: 0; order: 3; }
  .nlinks.open { display: flex; }
  .nl { height: 44px; border-bottom: 1px solid var(--g100); border-left: 3px solid transparent; }
  .nl.on, .nl:hover { border-bottom-color: var(--g100); border-left-color: var(--sf); }
}