:root{--pr:#0D9488;--ok:#059669;--okl:#10B981;--sec:#0284C7;--acc:#F59E0B;--card:#FFF;--surf:#F8FAFC;--txt:#1E293B;--muted:#64748B;--bdr:#E2E8F0;--sh:rgba(15,23,42,.05);--shl:rgba(15,23,42,.12);--g1:linear-gradient(135deg,#0F766E 0%,#0D9488 50%,#14B8A6 100%);--gdb:linear-gradient(165deg,#0A1120 0%,#0F172A 50%,#132238 100%);--gbg:linear-gradient(165deg,#F0FDFA 0%,#F8FAFC 45%,#F1F5F9 100%);--ov:rgba(13,148,136,.08);--F:'Sarabun',sans-serif;--R:14px;--Rl:20px;--xs:12px;--sm:14px;--base:16px;--md:18px;--lg:20px;--xl:24px;--2xl:28px;}
[data-theme=dark]{--pr:#2DD4BF;--ok:#34D399;--card:#1E293B;--surf:#334155;--txt:#F1F5F9;--muted:#94A3B8;--bdr:#334155;--sh:rgba(0,0,0,.35);--shl:rgba(0,0,0,.55);--g1:linear-gradient(135deg,#0F766E,#0D9488,#2DD4BF);--gbg:linear-gradient(165deg,#0B1320 0%,#0F172A 100%);--ov:rgba(45,212,191,.12);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--F);background:var(--gbg);color:var(--txt);display:flex;align-items:center;justify-content:center;}
#app{width:100%;max-width:480px;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--gbg);}
.topbar{display:flex;align-items:center;gap:10px;padding:max(env(safe-area-inset-top,0px),10px) 14px 10px;background:var(--g1);box-shadow:0 2px 10px var(--shl);flex-shrink:0;z-index:20;}
.tb-info{flex:1;min-width:0;}
.tb-title{display:flex;align-items:center;gap:8px;font-size:var(--sm);font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.tb-title-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;}
.tb-title-ico .tb-ico-svg{width:19px;height:19px;stroke:#fff;display:block;}
.tb-title-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-sub{font-size:var(--xs);color:rgba(255,255,255,.85);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-btns{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.ib{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.ib:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.45);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.15);}
.ib:active{background:rgba(255,255,255,.35);transform:scale(.92);}
.ib.gold{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;}
.ib.gold:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.45);color:#fff;}
.tb-btn-svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;}
.progbar{padding:0 12px 7px;background:var(--g1);flex-shrink:0;}
.pi{display:flex;justify-content:space-between;font-size:var(--xs);color:rgba(255,255,255,.85);margin-bottom:3px;font-weight:700;}
.pt{height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;}
.pf{height:100%;border-radius:3px;background:linear-gradient(90deg,#FFD166,#F4A261);transition:width .45s cubic-bezier(.4,0,.2,1);}
.pages{flex:1;overflow:hidden;position:relative;}
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:14px 13px 20px;opacity:0;pointer-events:none;transform:translateX(40px);transition:opacity .28s,transform .28s;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.page::-webkit-scrollbar{display:none;}
.page.active{opacity:1;pointer-events:auto;transform:none;}
.page.out-left{opacity:0;pointer-events:none;transform:translateX(-40px);}
.page.needs-nav{padding-bottom:80px;}
#page-pdpa{padding:0;}
#bottomNav{display:none;flex-shrink:0;flex-direction:row;gap:8px;padding:10px 13px max(env(safe-area-inset-bottom,10px),10px);background:var(--card);border-top:1px solid var(--bdr);box-shadow:0 -3px 10px var(--sh);z-index:30;}
#bottomNav.show{display:flex;}
.nav-btn{flex:1;padding:12px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;border:none;font-family:var(--F);font-size:var(--base);font-weight:700;cursor:pointer;transition:all .18s;}
.nav-btn:active{transform:scale(.97);}
.n-sec{background:var(--surf);color:var(--txt);border:1.5px solid var(--bdr);}
.n-pr{background:var(--g1);color:#fff;box-shadow:0 4px 14px rgba(13,148,136,.25);}
.n-ok{background:linear-gradient(135deg,#059669,#10B981);color:#fff;}
.n-warn{background:linear-gradient(135deg,#D97706,#F59E0B);color:#fff;}
.card{background:var(--card);border-radius:16px;padding:18px 16px;margin-bottom:12px;box-shadow:0 4px 20px -2px var(--sh),0 2px 6px -1px var(--shl);border:1px solid var(--bdr);transition:box-shadow .2s ease,border-color .2s ease;}
@keyframes hb{0%,100%{transform:scale(1);}15%{transform:scale(1.14);}30%{transform:scale(.97);}45%{transform:scale(1.1);}60%{transform:scale(1);}}
@keyframes wig{0%,100%{transform:rotate(0);}25%{transform:rotate(-3deg);}75%{transform:rotate(3deg);}}
@keyframes popIn{0%{transform:scale(0);opacity:0;}70%{transform:scale(1.1);}100%{transform:scale(1);opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{to{background-position:-200% 0;}}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:none;}}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.cover-hero{text-align:center;padding:10px 0 12px;}
.cv-badge-top{display:inline-flex;align-items:center;gap:6px;background:rgba(13,148,136,.1);color:var(--pr);border:1px solid rgba(13,148,136,.28);border-radius:20px;padding:4px 14px;font-size:11.5px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:10px;}
.heart-svg{width:105px;height:105px;margin:0 auto 10px;filter:drop-shadow(0 6px 18px rgba(13,148,136,.38));}
.cv-title{font-size:22px;font-weight:800;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.35;margin-bottom:4px;}
.cv-sub-title{font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.cv-year{display:inline-block;background:var(--g1);color:#fff;border-radius:20px;padding:5px 18px;font-size:var(--sm);font-weight:800;margin:6px 0 14px;box-shadow:0 3px 12px rgba(13,148,136,.25);}
.cv-sub{font-size:var(--sm);color:var(--muted);line-height:1.55;}
.cover-card{padding:20px 18px;border-radius:18px;box-shadow:0 6px 24px rgba(15,23,42,.07);}
.cv-features{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;text-align:left;}
.cv-feat-item{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;background:var(--surf);border:1px solid var(--bdr);font-size:13px;color:var(--txt);line-height:1.45;}
.cv-feat-ico{font-size:20px;flex-shrink:0;}
.badge-row{display:flex;gap:5px;margin:7px 0;flex-wrap:wrap;justify-content:center;}
.badge{background:var(--ov);color:var(--pr);border:1.5px solid var(--pr);border-radius:18px;padding:3px 10px;font-size:var(--xs);font-weight:700;}
.btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:13px 16px;border-radius:12px;border:none;font-family:var(--F);font-size:var(--base);font-weight:700;cursor:pointer;transition:all .18s;}
.btn:active{transform:scale(.97);}
.btn-pr{background:var(--g1);color:#fff;box-shadow:0 4px 14px rgba(13,148,136,.28);}
.btn-pr:hover{box-shadow:0 6px 20px rgba(13,148,136,.38);transform:translateY(-1px);}
.btn-ok{background:linear-gradient(135deg,#059669,#10B981);color:#fff;}
.btn-sec{background:var(--surf);color:var(--txt);border:1.5px solid var(--bdr);}
.btn-sec:hover{background:var(--card);border-color:#cbd5e1;}
.btn-warn{background:linear-gradient(135deg,#D97706,#F59E0B);color:#fff;}
.btn-ol{background:transparent;color:var(--pr);border:2px solid var(--pr);}
.btn-dark{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;}
.btn-danger{background:linear-gradient(135deg,#e11d48,#f43f5e);color:#fff;}
.btn-sm{padding:8px 13px;font-size:var(--sm);border-radius:10px;}
.btn-lg{padding:15px 20px;font-size:16.5px;border-radius:14px;font-weight:800;gap:10px;box-shadow:0 6px 22px rgba(13,148,136,.35);}
.btn-lg:hover{box-shadow:0 8px 26px rgba(13,148,136,.45);transform:translateY(-2px);}
.wig{animation:none;}
.ph{text-align:center;margin-bottom:14px;}
.ph-icon{width:56px;height:56px;border-radius:16px;margin:0 auto 8px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 14px rgba(13,148,136,.25);color:#fff;}
.q-page-badge{display:inline-block;background:rgba(13,148,136,.1);color:var(--pr);border:1px solid rgba(13,148,136,.28);border-radius:16px;padding:3px 12px;font-size:11.5px;font-weight:800;margin-bottom:6px;letter-spacing:0.3px;}
.ph h2{font-size:18px;font-weight:800;color:var(--txt);line-height:1.4;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.ph p{font-size:13px;color:var(--muted);margin-top:3px;font-weight:600;}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px;}
.etc{padding:15px 8px;border-radius:var(--R);border:2px solid var(--bdr);background:var(--card);cursor:pointer;text-align:center;transition:all .18s;user-select:none;}
.etc:active,.etc.sel{border-color:var(--pr);background:var(--ov);box-shadow:0 3px 12px rgba(13,148,136,.15);transform:scale(1.02);}
.etc-ico{font-size:26px;margin-bottom:4px;display:block;pointer-events:none;}
.etc-lbl{font-size:var(--sm);font-weight:700;color:var(--txt);pointer-events:none;}
.etc-sub{font-size:var(--xs);color:var(--muted);margin-top:2px;pointer-events:none;}
.sw{position:relative;margin-bottom:9px;}
.si{display:block;width:100%;padding:12px 38px 12px 40px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--base);outline:none;caret-color:var(--pr);transition:all .18s;}
.si:focus{border-color:var(--pr);box-shadow:0 0 0 3.5px rgba(13,148,136,.14);}
.si-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5;}
.si-clr{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;display:none;padding:2px;}
.filter-tabs{display:flex;gap:5px;margin-bottom:9px;flex-wrap:wrap;}
.ftab{padding:4px 11px;border-radius:16px;border:1.5px solid var(--bdr);background:var(--card);color:var(--muted);font-family:var(--F);font-size:var(--sm);font-weight:700;cursor:pointer;transition:all .16s;}
.ftab.act{background:var(--g1);color:#fff;border-color:transparent;}
.emp-list{max-height:240px;overflow-y:auto;border-radius:10px;border:1px solid var(--bdr);background:var(--card);}
.ei{padding:11px 13px;border-bottom:1px solid var(--bdr);cursor:pointer;transition:background .13s;position:relative;user-select:none;}
.ei:last-child{border-bottom:none;}.ei:active{background:var(--ov);}
.ei-name{font-size:var(--sm);font-weight:700;color:var(--txt);}.ei-sub{font-size:var(--xs);color:var(--muted);margin-top:2px;}
.ei.ei-assessed{opacity:.5;cursor:default;background:var(--surf)!important;}
.ei.ei-declined{opacity:.6;cursor:default;background:rgba(100,116,139,.06)!important;border-left:3px solid var(--muted);}
.ei-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);border-radius:8px;padding:2px 8px;font-size:var(--xs);font-weight:700;color:#fff;}
.bd-ok{background:linear-gradient(135deg,#059669,#10B981);}.bd-dec{background:linear-gradient(135deg,#475569,#64748B);}
.stats-bar{display:flex;gap:5px;margin-bottom:9px;}
.sc{flex:1;padding:8px 5px;border-radius:9px;text-align:center;border:1.5px solid var(--bdr);background:var(--card);}
.sc-n{font-size:var(--xl);font-weight:800;line-height:1;}.sc-l{font-size:10px;color:var(--muted);margin-top:2px;font-weight:600;}
.sc.s-tot .sc-n{color:var(--txt);}.sc.s-ok .sc-n{color:var(--ok);}.sc.s-pend .sc-n{color:var(--acc);}.sc.s-dec .sc-n{color:var(--muted);}
.emp-sel-box{padding:12px;border-radius:11px;background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(20,184,166,.12));border:2px solid var(--pr);display:flex;align-items:center;gap:10px;margin-top:7px;}
.ea{width:38px;height:38px;border-radius:50%;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.en{font-size:var(--sm);font-weight:800;color:var(--pr);}.es{font-size:var(--xs);color:var(--muted);margin-top:2px;line-height:1.35;}
.chg{margin-left:auto;background:none;border:1.5px solid var(--pr);color:var(--pr);border-radius:7px;padding:4px 8px;font-family:var(--F);font-size:var(--xs);font-weight:700;cursor:pointer;}
.chg:active{background:var(--pr);color:#fff;}
.cc{display:inline-flex;align-items:center;gap:3px;background:var(--ov);border:1px solid var(--pr);border-radius:10px;padding:2px 8px;font-size:var(--xs);font-weight:700;color:var(--pr);}
.emp-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 12px;gap:10px;}
.emp-loading-spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(13,148,136,.2);border-top-color:var(--pr);animation:spin .8s linear infinite;}
.emp-loading-text{font-size:var(--sm);font-weight:700;color:var(--pr);animation:pulse 1.4s ease-in-out infinite;}
.emp-loading-sub{font-size:var(--xs);color:var(--muted);}
.skel{background:linear-gradient(90deg,var(--surf) 25%,var(--bdr) 50%,var(--surf) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:9px;height:50px;margin-bottom:6px;}
.pdpa-scroll{padding:13px 13px 32px;}
.pdpa-pbox{background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(20,184,166,.12));border:2px solid var(--pr);border-radius:12px;padding:11px 14px;margin-bottom:11px;display:flex;align-items:center;gap:10px;}
.pdpa-av{width:40px;height:40px;border-radius:50%;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.pdpa-pn{font-size:var(--base);font-weight:800;color:var(--pr);}.pdpa-ps{font-size:var(--xs);color:var(--muted);margin-top:2px;line-height:1.35;}
.pdpa-hero{text-align:center;padding:10px 0 12px;}
.pdpa-shield{width:76px;height:76px;background:var(--g1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 9px;box-shadow:0 5px 18px rgba(13,148,136,.28);animation:hb 2s ease-in-out infinite;}
.pdpa-title{font-size:var(--lg);font-weight:800;background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.3;margin-bottom:3px;}
.pdpa-sub{font-size:var(--sm);color:var(--muted);line-height:1.6;}
.pdpa-card{background:var(--card);border-radius:var(--R);margin-bottom:10px;box-shadow:0 2px 10px var(--sh);border:1.5px solid var(--bdr);overflow:hidden;}
.pdpa-hdr{display:flex;align-items:center;gap:8px;padding:11px 14px;background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(13,148,136,.02));border-bottom:1.5px solid var(--bdr);}
.pdpa-hico{width:32px;height:32px;background:var(--g1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.pdpa-htitle{font-size:var(--sm);font-weight:800;color:var(--pr);}.pdpa-hsub{font-size:var(--xs);color:var(--muted);margin-top:1px;}
.pdpa-body{padding:12px 14px;font-size:var(--sm);line-height:1.85;color:var(--txt);}.pdpa-body p{margin-bottom:8px;}
.pdpa-list{list-style:none;padding:0;margin:7px 0 0;}
.pdpa-list li{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--bdr);font-size:var(--sm);line-height:1.6;}
.pdpa-list li:last-child{border-bottom:none;}
.pdpa-num{width:20px;height:20px;border-radius:50%;background:var(--g1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;margin-top:2px;}
.pdpa-rg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;}
.pdpa-rc{background:var(--surf);border:1.5px solid var(--bdr);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:var(--xs);font-weight:600;color:var(--txt);line-height:1.4;}
.pdpa-rc span:first-child{font-size:16px;flex-shrink:0;}
.pdpa-contact{background:linear-gradient(135deg,rgba(2,132,199,.08),rgba(2,132,199,.13));border:1.5px solid var(--sec);border-radius:10px;padding:10px 13px;margin-top:8px;font-size:var(--sm);line-height:1.75;color:var(--txt);}
.pdpa-contact strong{color:var(--sec);}
.pdpa-alert-box{background:linear-gradient(135deg,rgba(225,29,72,.07),rgba(225,29,72,.12));border:1.5px solid #f43f5e;border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:var(--xs);color:var(--txt);line-height:1.7;}
.pdpa-alert-box strong{color:#e11d48;}
.pdpa-note{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.14));border:1.5px solid var(--acc);border-radius:10px;padding:10px 13px;margin-bottom:10px;font-size:var(--xs);color:var(--txt);line-height:1.65;text-align:center;}
.pdpa-btns{display:flex;flex-direction:column;gap:8px;margin-bottom:5px;}
.btn-pdpa{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;border-radius:13px;border:none;font-family:var(--F);font-size:var(--base);font-weight:800;cursor:pointer;transition:all .18s;}
.btn-pdpa:active{transform:scale(.97);}
.btn-pyes{background:linear-gradient(135deg,#059669,#10B981);color:#fff;box-shadow:0 4px 16px rgba(5,150,105,.28);}
.btn-pno{background:linear-gradient(135deg,#475569,#64748B);color:#fff;box-shadow:0 4px 16px rgba(71,85,105,.22);}
.pdpa-ts{font-size:var(--xs);color:var(--muted);text-align:center;margin-top:4px;min-height:15px;}
.illus{max-width:195px;margin:0 auto 10px;border-radius:var(--R);overflow:hidden;box-shadow:0 3px 10px var(--sh);}
.q-card-illus{padding:8px 12px;margin-bottom:11px;background:var(--card);border-radius:var(--R);border:1px solid var(--bdr);box-shadow:0 2px 10px var(--sh);overflow:hidden;}
.q-illus-wrap{height:110px;max-height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px 0;}
.q-illus-wrap svg{height:100%;max-height:105px;width:auto;max-width:100%;display:block;margin:0 auto;object-fit:contain;}
.og{display:flex;flex-direction:column;gap:10px;}
.oc,.ob{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--card);border:1.5px solid var(--bdr);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);user-select:none;box-shadow:0 2px 6px rgba(15,23,42,.03);position:relative;}
.oc:hover,.ob:hover{border-color:rgba(13,148,136,.4);transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,23,42,.07);}
.oc:active,.ob:active{transform:scale(.99);}
.oc.sel,.ob.sel{border-color:var(--pr)!important;background:linear-gradient(135deg,rgba(13,148,136,.07),rgba(20,184,166,.12))!important;box-shadow:0 4px 16px rgba(13,148,136,.15)!important;}
.oi,.ob-ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:var(--surf);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .2s ease;}
.oc.sel .oi,.ob.sel .ob-ico{background:var(--g1);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(13,148,136,.3);transform:scale(1.05);}
.ol,.ob-lbl{font-size:15px;font-weight:700;color:var(--txt);flex:1;line-height:1.4;}
.ochk,.ob-chk{width:24px;height:24px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease;background:var(--card);}
.oc.sel .ochk,.ob.sel .ob-chk{background:var(--pr);border-color:var(--pr);color:#fff;box-shadow:0 2px 8px rgba(13,148,136,.35);animation:popIn .25s cubic-bezier(.4,0,.2,1);}
.oc.sel .ochk::after,.ob.sel .ob-chk::after{content:'✓';font-weight:900;font-size:13px;color:#fff;}
.tip-btn{width:26px;height:26px;border-radius:50%;border:2px solid var(--sec);background:rgba(69,123,157,.12);color:var(--sec);font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;vertical-align:middle;margin-left:4px;line-height:1;}
.tip-btn:active{background:var(--sec);color:#fff;}
.dis-panel,.opt-det{margin-top:12px;}.dis-panel-title,.dtl{font-size:14px;font-weight:800;color:var(--pr);margin-bottom:8px;}
.dis-grid,.dg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.dck,.dc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:12px;background:var(--surf);border:1.5px solid var(--bdr);cursor:pointer;transition:all .18s ease;user-select:none;font-size:13.5px;font-weight:700;color:var(--txt);}
.dck:hover,.dc:hover{border-color:rgba(13,148,136,.35);background:var(--card);}
.dck:active,.dck.sel,.dc:active,.dc.sel{border-color:var(--pr)!important;background:linear-gradient(135deg,rgba(13,148,136,.08),rgba(20,184,166,.14))!important;box-shadow:0 2px 8px rgba(13,148,136,.12);}
.dck-box,.dc-ck{width:22px;height:22px;border-radius:6px;flex-shrink:0;border:1.5px solid #cbd5e1;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:all .18s;}
.dck.sel .dck-box,.dc.sel .dc-ck{background:var(--pr);border-color:var(--pr);color:#fff;}
.dck-lbl{font-size:13.5px;font-weight:700;color:var(--txt);line-height:1.3;flex:1;}
.other-wrap,.aor{margin-top:8px;background:var(--surf);border:1.5px solid var(--bdr);border-radius:12px;padding:11px;}
.other-lbl{font-size:var(--sm);font-weight:700;color:var(--muted);margin-bottom:6px;}
.other-inp,.aoi{width:100%;padding:10px 14px;border-radius:10px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--sm);outline:none;caret-color:var(--pr);transition:all .18s;}
.other-inp:focus,.aoi:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(13,148,136,.12);}
.dis-summary,.dsum{margin-top:8px;padding:10px 14px;background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(13,148,136,.12));border:1.5px solid var(--pr);border-radius:12px;font-size:var(--sm);color:var(--txt);line-height:1.6;}
.dtw{margin-top:9px;}.dtl{font-size:14px;font-weight:800;color:var(--pr);margin-bottom:6px;display:flex;align-items:center;gap:4px;}
.dta{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--sm);min-height:75px;resize:vertical;outline:none;transition:all .18s;}
.dta:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(13,148,136,.12);}
.smoke-detail{margin-top:12px;background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(13,148,136,.12));border:1.5px solid var(--pr);border-radius:14px;padding:14px 15px;}
.smoke-detail-label{font-size:14px;font-weight:800;color:var(--pr);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.smoke-row{display:flex;align-items:center;gap:10px;}
.smoke-inp{width:90px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:17px;font-weight:800;outline:none;text-align:center;transition:all .18s;}
.smoke-inp:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(13,148,136,.14);}
.smoke-unit{font-size:14px;font-weight:700;color:var(--txt);}

/* Diabetes Family Risk Option Cards */
.diab-box{margin-top:14px;background:rgba(13,148,136,.04);border:1.5px solid rgba(13,148,136,.22);border-radius:14px;padding:15px 16px;}
.diab-box-title{font-size:14px;font-weight:800;color:var(--pr);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.diab-box-sub{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.diab-cards-grid{display:flex;flex-direction:column;gap:10px;}
.diab-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;background:var(--card);border:1.5px solid var(--bdr);cursor:pointer;transition:all .2s ease;user-select:none;position:relative;box-shadow:0 2px 6px rgba(15,23,42,.03);}
.diab-card:hover{border-color:rgba(13,148,136,.35);transform:translateY(-2px);box-shadow:0 6px 14px rgba(15,23,42,.07);}
.diab-card:active{transform:scale(0.99);}
.diab-card-ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--surf);border:1px solid var(--bdr);transition:all .2s ease;}
.diab-card-body{flex:1;min-width:0;}
.diab-card-title{font-size:15px;font-weight:800;color:var(--txt);line-height:1.3;}
.diab-card-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;}
.diab-card-chk{width:24px;height:24px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;transition:all .2s ease;background:var(--card);}

.diab-card.diab-risk.sel{border-color:#e11d48!important;background:linear-gradient(135deg,rgba(225,29,72,.07),rgba(225,29,72,.14))!important;box-shadow:0 4px 14px rgba(225,29,72,.15);}
.diab-card.diab-risk.sel .diab-card-ico{background:#ffe4e6;border-color:#fecdd3;}
.diab-card.diab-risk.sel .diab-card-chk{background:#e11d48;border-color:#e11d48;box-shadow:0 2px 8px rgba(225,29,72,.35);}
.diab-card.diab-risk.sel .diab-card-chk::after{content:'✓';color:#fff;}

.diab-card.diab-norisk.sel{border-color:#059669!important;background:linear-gradient(135deg,rgba(5,150,105,.07),rgba(5,150,105,.14))!important;box-shadow:0 4px 14px rgba(5,150,105,.15);}
.diab-card.diab-norisk.sel .diab-card-ico{background:#d1fae5;border-color:#a7f3d0;}
.diab-card.diab-norisk.sel .diab-card-chk{background:#059669;border-color:#059669;box-shadow:0 2px 8px rgba(5,150,105,.35);}
.diab-card.diab-norisk.sel .diab-card-chk::after{content:'✓';color:#fff;}

.rtbl{width:100%;border-collapse:separate;border-spacing:0;border-radius:10px;overflow:hidden;border:1px solid var(--bdr);}
.rtbl tr{border-bottom:1px solid var(--bdr);transition:background .15s ease;}
.rtbl tr:nth-child(even){background:rgba(248,250,252,.75);}
[data-theme=dark] .rtbl tr:nth-child(even){background:rgba(255,255,255,.02);}
.rtbl tr:last-child td{border-bottom:none;}
.rtbl td{padding:10px 12px;font-size:13.5px;vertical-align:middle;border-bottom:1px solid var(--bdr);}
.rl{color:var(--muted);font-weight:700;min-width:100px;width:115px;background:rgba(241,245,249,.45);border-right:1px solid var(--bdr);}
[data-theme=dark] .rl{background:rgba(255,255,255,.03);}
.rv{color:var(--txt);font-weight:700;line-height:1.45;}
.rv.hl{color:var(--pr);}
.review-audit-notice{display:flex;align-items:flex-start;gap:10px;background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(2,132,199,.08));border:1.5px solid rgba(13,148,136,.25);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:12.5px;color:var(--txt);line-height:1.65;}
.review-audit-notice span{font-size:20px;flex-shrink:0;}
.ty-wrap{text-align:center;padding:10px 0 5px;}
.ty-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 11px;font-size:36px;animation:popIn .55s cubic-bezier(.4,0,.2,1) both;}
.ty-ok{background:linear-gradient(135deg,#2D6A4F,#52B788);box-shadow:0 6px 20px rgba(45,106,79,.32);}
.ty-dec{background:linear-gradient(135deg,#495057,#6C757D);box-shadow:0 6px 20px rgba(0,0,0,.18);}
.sum-card{background:var(--surf);border-radius:var(--R);padding:12px 13px;margin-top:10px;text-align:left;}
.sr{display:flex;align-items:flex-start;gap:6px;padding:5px 0;border-bottom:1px solid var(--bdr);font-size:var(--sm);}.sr:last-child{border-bottom:none;}
.sl{color:var(--muted);min-width:82px;flex-shrink:0;font-weight:600;}.sv{color:var(--txt);font-weight:700;flex:1;line-height:1.4;}
.tip-overlay{position:fixed;inset:0;z-index:9200;background:rgba(0,0,0,.52);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;}
.tip-overlay.show{display:flex;}
.tip-box{background:var(--card);border-radius:var(--Rl) var(--Rl) 0 0;padding:18px 16px max(env(safe-area-inset-bottom,18px),18px);width:100%;max-width:480px;animation:slideUp .28s cubic-bezier(.4,0,.2,1);max-height:78dvh;overflow-y:auto;}
.tip-handle{width:38px;height:4px;border-radius:2px;background:var(--bdr);margin:0 auto 12px;}
.tip-ico{font-size:32px;text-align:center;margin-bottom:7px;}.tip-title{font-size:var(--md);font-weight:800;color:var(--txt);margin-bottom:9px;text-align:center;}
.tip-content{font-size:var(--sm);color:var(--txt);line-height:1.9;}.tip-content ul{padding-left:16px;margin-top:6px;}.tip-content li{margin-bottom:5px;}
.tip-ok{color:var(--ok);font-weight:700;}.tip-warn{color:var(--pr);font-weight:700;}.tip-info{color:var(--sec);font-weight:700;}
.tc{position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:9999;width:calc(100% - 20px);max-width:440px;pointer-events:none;}
.toast{display:flex;align-items:flex-start;gap:9px;padding:12px 13px;border-radius:12px;margin-bottom:6px;box-shadow:0 5px 20px var(--shl);animation:toastIn .28s ease;pointer-events:auto;border-left:4px solid;background:var(--card);}
.toast.success{border-color:#059669;}.toast.error{border-color:#e11d48;}.toast.info{border-color:#0284c7;}.toast.warning{border-color:#f59e0b;}
.ti{font-size:18px;flex-shrink:0;margin-top:1px;}.tb2{flex:1;min-width:0;}.tt{font-size:var(--sm);font-weight:700;color:var(--txt);}
.tm{font-size:var(--xs);color:var(--muted);margin-top:1px;line-height:1.4;}.tx{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0 0 0 4px;flex-shrink:0;}
.lov{position:fixed;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:9998;flex-direction:column;gap:12px;}
.lov.show{display:flex;}.sp{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin .78s linear infinite;}.lov-txt{color:#fff;font-size:var(--base);font-weight:700;}
.mo{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(7px);z-index:9000;display:none;align-items:center;justify-content:center;padding:14px;}
.mo.show, .mo.open{display:flex!important;}
.mb{background:var(--card);border-radius:var(--Rl);padding:20px 18px;width:100%;max-width:480px;animation:modalScale .25s cubic-bezier(.4,0,.2,1);max-height:92dvh;overflow-y:auto;box-shadow:0 20px 45px rgba(0,0,0,.35);}
#settingModal .mb{max-width:1050px;width:100%;max-height:92vh;padding:22px;}
#dbLoginModal .mb, #confirmModal .mb{max-width:440px;margin:auto;}
.mh{width:40px;height:4px;border-radius:2px;background:var(--bdr);margin:0 auto 14px;}.mt2{font-size:var(--md);font-weight:800;color:var(--txt);margin-bottom:13px;text-align:center;}
.lf{margin-bottom:12px;}.ll{font-size:var(--sm);font-weight:700;color:var(--muted);margin-bottom:4px;display:block;}
.li{width:100%;padding:11px 14px;border-radius:10px;border:2px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--base);outline:none;transition:border-color .18s;}
.li:focus{border-color:var(--pr);box-shadow:0 0 0 3px rgba(13,148,136,.12);}
.pwd-wrap{position:relative;display:flex;align-items:center;width:100%;}
.pwd-wrap .li{padding-right:44px;}
.btn-pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:8px;cursor:pointer;color:var(--muted);transition:all .15s ease;user-select:none;-webkit-user-select:none;padding:0;}
.btn-pwd-eye:hover{background:rgba(0,0,0,.06);color:var(--txt);}
.btn-pwd-eye:active{transform:translateY(-50%) scale(.92);}
[data-theme="dark"] .btn-pwd-eye:hover{background:rgba(255,255,255,.08);color:var(--txt);}
.input-error{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.25) !important;animation:shake .35s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes shake{10%,90%{transform:translate3d(-1px,0,0);}20%,80%{transform:translate3d(2px,0,0);}30%,50%,70%{transform:translate3d(-3px,0,0);}40%,60%{transform:translate3d(3px,0,0);}}
.ss{background:var(--surf);border-radius:var(--R);margin-bottom:8px;border:1.5px solid var(--bdr);overflow:hidden;transition:border-color .18s,box-shadow .18s;}
.ss.drag-over{border-color:var(--pr)!important;box-shadow:0 0 0 2px rgba(13,148,136,.2)!important;}.ss.dragging{opacity:.38;}
.ss-hdr{display:flex;align-items:center;gap:6px;padding:10px 12px;background:linear-gradient(135deg,rgba(13,148,136,.06),rgba(13,148,136,.02));border-bottom:1px solid var(--bdr);}
.ss-drag{width:32px;height:32px;border-radius:7px;background:var(--card);border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;cursor:grab;flex-shrink:0;touch-action:none;user-select:none;-webkit-user-select:none;}
.ss-ord{background:var(--g1);color:#fff;border-radius:50%;width:18px;height:18px;min-width:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0;}
.ss-ico-wrap{position:relative;}.ss-ico-btn{width:36px;height:36px;border-radius:8px;background:var(--g1);border:none;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ss-ico-badge{position:absolute;top:-3px;right:-3px;background:var(--acc);border-radius:50%;width:14px;height:14px;font-size:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}
.ss-title-wrap{flex:1;min-width:0;}.ss-ti{width:100%;border:none;background:transparent;font-family:var(--F);font-size:var(--sm);font-weight:700;color:var(--txt);outline:none;padding:2px 0;}.ss-ti:focus{color:var(--pr);}
.ss-badge{font-size:10px;color:var(--muted);margin-top:1px;}.ss-tip-wrap{margin-top:5px;border-top:1px dashed var(--bdr);padding-top:5px;}.ss-tip-label{font-size:10px;color:var(--sec);font-weight:700;margin-bottom:3px;}
.ss-tip-inp{width:100%;border:1.5px solid var(--bdr);background:var(--card);font-family:var(--F);font-size:var(--xs);color:var(--txt);outline:none;padding:6px 8px;border-radius:7px;resize:vertical;min-height:36px;}
.ss-tip-inp:focus{border-color:var(--sec);}
.s-del{background:rgba(225,29,72,.1);border:1.5px solid #f43f5e;color:#e11d48;border-radius:6px;padding:3px 8px;font-family:var(--F);font-size:var(--xs);font-weight:700;cursor:pointer;flex-shrink:0;}
.s-del:active{background:#e11d48;color:#fff;}.ss-body{padding:10px 12px;}
.tags-w{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.otag{display:inline-flex;align-items:center;background:var(--card);border:1.5px solid var(--bdr);border-radius:16px;overflow:hidden;font-size:var(--sm);font-weight:600;color:var(--txt);}
.otag-txt{padding:4px 2px 4px 10px;cursor:text;flex:1;min-width:40px;}.otag-txt:focus{outline:none;color:var(--pr);}
.otag-del{color:#e11d48;font-weight:800;background:none;border:none;cursor:pointer;padding:4px 8px 4px 2px;line-height:1;}
.aor{display:flex;gap:6px;}.aoi{flex:1;padding:8px 11px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--sm);outline:none;}
.aoi:focus{border-color:var(--pr);}.ab{padding:8px 12px;border-radius:8px;border:none;background:var(--g1);color:#fff;font-size:16px;cursor:pointer;flex-shrink:0;}
.ip{position:fixed;z-index:10000;background:var(--card);border:1.5px solid var(--bdr);border-radius:12px;padding:8px;box-shadow:0 6px 20px var(--shl);width:200px;display:none;}
.ip.show{display:block;}.ip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;max-height:140px;overflow-y:auto;}
.ip-btn{width:28px;height:28px;border-radius:6px;border:none;background:var(--surf);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}.ip-btn:active{background:var(--ov);}
.ip-cr{display:flex;gap:5px;margin-top:6px;border-top:1px solid var(--bdr);padding-top:6px;}.ip-ci{flex:1;padding:5px 8px;border-radius:7px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--sm);outline:none;}
.ip-co{padding:5px 10px;border-radius:7px;border:none;background:var(--g1);color:#fff;font-size:var(--sm);cursor:pointer;}
.dtag-w{display:inline-flex;align-items:center;background:var(--card);border:1.5px solid var(--bdr);border-radius:16px;overflow:hidden;font-size:var(--sm);font-weight:600;color:var(--txt);margin:2px;}
.dtag-t{padding:3px 2px 3px 10px;cursor:text;}.dtag-t:focus{outline:none;color:var(--sec);}
.dtag-d{color:#e11d48;font-weight:800;background:none;border:none;cursor:pointer;padding:3px 8px 3px 2px;line-height:1;}
.add-sec{background:var(--ov);border:2px dashed var(--pr);border-radius:var(--R);padding:13px;margin-top:3px;}
.as-row{display:flex;gap:6px;align-items:center;margin-bottom:5px;}
.as-ico{width:40px;height:40px;border-radius:8px;background:var(--g1);border:2px dashed rgba(255,255,255,.4);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.si2{width:100%;padding:9px 11px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--sm);outline:none;margin-bottom:5px;}
.si2:focus{border-color:var(--pr);}
.ybox{background:linear-gradient(135deg,rgba(13,148,136,.07),rgba(13,148,136,.12));border:2px solid var(--pr);border-radius:var(--R);padding:13px;margin-bottom:10px;}
.yt{font-size:var(--sm);font-weight:800;color:var(--pr);margin-bottom:8px;}.yr{display:flex;gap:7px;align-items:center;}
.yi{flex:1;padding:10px 13px;border-radius:9px;border:2px solid var(--pr);background:var(--card);color:var(--txt);font-family:var(--F);font-size:var(--md);font-weight:700;outline:none;text-align:center;}
.ysb{padding:10px 14px;border-radius:9px;border:none;background:var(--g1);color:#fff;font-family:var(--F);font-size:var(--sm);font-weight:700;cursor:pointer;}
.dis-sbox{background:linear-gradient(135deg,rgba(2,132,199,.07),rgba(2,132,199,.12));border:2px solid var(--sec);border-radius:var(--R);padding:13px;margin-bottom:10px;}
.ds-title{font-size:var(--sm);font-weight:800;color:var(--sec);margin-bottom:8px;}
.dec-box{background:linear-gradient(135deg,rgba(100,116,139,.07),rgba(100,116,139,.12));border:2px solid var(--muted);border-radius:var(--R);padding:13px;margin-bottom:10px;}
.dec-box-title{font-size:var(--sm);font-weight:800;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dec-list{display:flex;flex-direction:column;gap:6px;}
.dec-row{background:var(--card);border-radius:10px;padding:9px 11px;border:1px solid var(--bdr);display:flex;align-items:center;gap:8px;}
.dec-row-info{flex:1;min-width:0;}.dec-row-name{font-size:var(--sm);font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dec-row-sub{font-size:var(--xs);color:var(--muted);margin-top:2px;line-height:1.5;}
.dec-ulk{background:linear-gradient(135deg,#2D6A4F,#52B788);border:none;color:#fff;border-radius:7px;padding:6px 11px;font-family:var(--F);font-size:var(--xs);font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap;}
.dec-ulk:active{opacity:.8;transform:scale(.97);}
.dec-empty{text-align:center;padding:13px;font-size:var(--sm);color:var(--ok);font-weight:700;}
.nr{text-align:center;padding:20px 12px;color:var(--muted);font-size:var(--base);}.nr-ico{font-size:32px;display:block;margin-bottom:7px;}
.div{height:1px;background:var(--bdr);margin:12px 0;}
.rh{display:flex;align-items:center;justify-content:center;gap:5px;font-size:var(--xs);color:var(--muted);background:var(--surf);border-radius:8px;padding:6px 10px;margin-bottom:8px;border:1.5px dashed var(--bdr);}
#dbo{position:fixed;inset:0;z-index:8000;background:var(--gdb);display:none;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top,0px);}
#dbo.show, #dbo.open{display:flex;}
.db-bar{display:flex;align-items:center;gap:8px;padding:12px 12px 8px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;}
.db-bar-t{font-size:var(--base);font-weight:800;color:#fff;flex:1;}.db-bar-s{font-size:var(--xs);color:rgba(255,255,255,.5);margin-top:1px;}
.db-close{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font-size:var(--base);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.db-tabs{display:flex;gap:5px;padding:8px 12px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;overflow-x:auto;scrollbar-width:none;}
.db-tabs::-webkit-scrollbar{display:none;}
.db-tab{flex-shrink:0;padding:7px 12px;border-radius:18px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-family:var(--F);font-size:var(--sm);font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap;}
.db-tab.act{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.48);}
.db-body{flex:1;overflow-y:auto;padding:12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;}
.db-panel{display:none;}.db-panel.act{display:block;}
.db-sec{font-size:var(--sm);font-weight:800;color:rgba(255,255,255,.82);margin:13px 0 8px;display:flex;align-items:center;gap:5px;}
.db-sec::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);}
.db-g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.db-sc{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:13px 12px;cursor:pointer;transition:all .18s;}
.db-sc:active{background:rgba(255,255,255,.14);}
.db-sc-ico{font-size:24px;margin-bottom:6px;display:block;}.db-sc-num{font-size:var(--2xl);font-weight:800;color:#fff;line-height:1;}
.db-sc-lbl{font-size:var(--xs);color:rgba(255,255,255,.58);margin-top:3px;font-weight:700;line-height:1.3;}.db-sc-sub{font-size:10px;color:rgba(255,255,255,.38);margin-top:2px;}
.db-sc-fw{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:12px 13px;margin-bottom:8px;cursor:pointer;}
.db-sc-fw:active{background:rgba(255,255,255,.13);}
.db-sc-fw-r{display:flex;align-items:center;gap:11px;}
.db-sc-fw-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.db-sc-fw-t{font-size:var(--sm);font-weight:700;color:#fff;}.db-sc-fw-v{font-size:var(--xl);font-weight:800;color:#fff;line-height:1.2;}
.db-pbar{height:5px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden;}.db-pfill{height:100%;border-radius:2px;}
.cbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:13px;margin-bottom:12px;}
.chdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}.ct{font-size:var(--sm);font-weight:800;color:#fff;}.ch{font-size:10px;color:rgba(255,255,255,.42);}
.hbl{display:flex;flex-direction:column;gap:8px;}.hbi{cursor:pointer;}
.hbi-lbl{font-size:var(--sm);color:rgba(255,255,255,.82);font-weight:600;margin-bottom:3px;display:flex;justify-content:space-between;}
.hbi-lbl span{font-size:var(--xs);color:rgba(255,255,255,.48);}
.hbi-tr{height:24px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;}
.hbi-fill{height:100%;border-radius:6px;transition:width .7s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;padding-left:8px;min-width:28px;}
.hbi-v{font-size:var(--xs);color:#fff;font-weight:700;}
.dnut-w{display:flex;flex-direction:column;align-items:center;gap:12px;}.dnut-leg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.dnut-li{display:flex;align-items:center;gap:5px;font-size:var(--sm);color:rgba(255,255,255,.82);font-weight:600;cursor:pointer;}
.dnut-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.ans-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.ans-tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 11px;cursor:pointer;}
.ans-tag:active{background:rgba(255,255,255,.14);}.ans-tag-n{font-size:var(--sm);font-weight:700;color:#fff;}.ans-tag-c{font-size:var(--xs);color:rgba(255,255,255,.48);margin-top:2px;}
.db-exp{display:flex;gap:6px;padding:8px 12px max(env(safe-area-inset-bottom,8px),8px);background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;overflow-x:auto;scrollbar-width:none;}
.ebtn{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-family:var(--F);font-size:var(--sm);font-weight:700;cursor:pointer;white-space:nowrap;}
.ebtn:active{background:rgba(255,255,255,.15);}
.e-xl{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.14);}.e-pdf{border-color:rgba(2,132,199,.5);background:rgba(2,132,199,.14);}.e-pre{border-color:rgba(69,123,157,.5);background:rgba(69,123,157,.14);}
.drwr{position:fixed;inset:0;z-index:8500;background:rgba(0,0,0,.62);backdrop-filter:blur(7px);display:none;align-items:flex-end;justify-content:center;}
.drwr.show{display:flex;}
.drwr-box{background:#0f172a;border:1px solid rgba(255,255,255,.13);border-radius:var(--Rl) var(--Rl) 0 0;width:100%;max-width:480px;max-height:80dvh;overflow-y:auto;padding:14px 14px max(env(safe-area-inset-bottom,18px),18px);animation:slideUp .28s cubic-bezier(.4,0,.2,1);}
.drwr-hnd{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto 13px;}.drwr-t{font-size:var(--base);font-weight:800;color:#fff;margin-bottom:12px;text-align:center;}
.db-person{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);margin-bottom:6px;}
.db-pav{width:36px;height:36px;border-radius:50%;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.db-pn{font-size:var(--sm);font-weight:700;color:#fff;}.db-ps{font-size:var(--xs);color:rgba(255,255,255,.48);margin-top:2px;line-height:1.45;}
.prev-modal{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.86);display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:max(env(safe-area-inset-top,0px),13px) 9px 9px;overflow:hidden;}
.prev-modal.show{display:flex;}
.prev-box{background:#fff;border-radius:12px;width:100%;max-width:460px;flex:1;overflow:hidden;display:flex;flex-direction:column;}
.prev-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee;flex-shrink:0;}
.prev-hdr-t{font-size:var(--base);font-weight:800;color:var(--txt);}.prev-close{background:none;border:none;font-size:20px;cursor:pointer;color:#666;}
.prev-body{overflow:auto;flex:1;padding:8px;}
.prev-tbl{border-collapse:collapse;width:100%;min-width:620px;font-family:var(--F);}
.prev-tbl th{background:var(--pr);color:#fff;padding:7px 8px;font-size:var(--sm);font-weight:700;text-align:left;white-space:nowrap;}
.prev-tbl td{padding:6px 8px;font-size:var(--sm);border-bottom:1px solid #f0f0f0;color:#333;}
.prev-tbl tr:nth-child(even) td{background:#fafafa;}.prev-foot{padding:10px 12px;display:flex;gap:6px;border-top:1px solid #eee;flex-shrink:0;}
.db-raw{overflow-x:auto;border-radius:10px;border:1px solid rgba(255,255,255,.1);}
.db-raw table{border-collapse:collapse;width:100%;min-width:800px;}
.db-raw th{background:rgba(13,148,136,.38);color:#fff;padding:8px 9px;font-size:var(--sm);font-weight:700;text-align:left;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.09);}
.db-raw td{padding:7px 9px;font-size:var(--sm);color:rgba(255,255,255,.78);border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.db-raw tr:nth-child(even) td{background:rgba(255,255,255,.03);}
.dec-tbl{width:100%;border-collapse:collapse;font-size:var(--sm);}
.dec-tbl th{background:rgba(100,116,139,.48);color:#fff;padding:7px 9px;text-align:left;border-bottom:1px solid rgba(255,255,255,.09);}
.dec-tbl td{padding:6px 9px;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.78);}
.dec-tbl tr:nth-child(even) td{background:rgba(255,255,255,.03);}
.ulk-btn{background:rgba(255,215,0,.2);border:1.5px solid rgba(255,215,0,.55);color:#FFD166;border-radius:6px;padding:3px 8px;font-family:var(--F);font-size:var(--xs);font-weight:700;cursor:pointer;}
.ulk-btn:active{background:rgba(255,215,0,.38);}
.step-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;padding:12px 14px;background:var(--surf);border-radius:14px;border:1px solid var(--bdr);box-shadow:0 2px 8px var(--sh);}
.step-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;user-select:none;transition:all .2s ease;}
.step-item.active{color:var(--pr);}
.step-item.done{color:var(--ok);}
.step-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;background:var(--card);transition:all .25s ease;}
.step-item.active .step-dot{background:var(--pr);border-color:var(--pr);color:#fff;box-shadow:0 2px 8px rgba(13,148,136,.35);transform:scale(1.08);}
.step-item.done .step-dot{background:var(--ok);border-color:var(--ok);color:#fff;}
.step-line{flex:1;height:3px;background:var(--bdr);border-radius:2px;transition:background .3s ease;min-width:14px;}
.step-line.done{background:var(--ok);}

/* Section Headers & Card Sub-Elements */
.card-sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;}
.card-sec-title{font-size:15px;font-weight:800;color:var(--txt);display:flex;align-items:center;gap:8px;}
.sec-num-pill{width:22px;height:22px;border-radius:50%;background:var(--g1);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;box-shadow:0 2px 6px rgba(13,148,136,.3);}
.card-sec-desc{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:10px;line-height:1.5;}
.badge-link{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:11px;padding:3px 8px;border-radius:12px;font-weight:700;}
[data-theme=dark] .badge-link{background:rgba(29,78,216,.18);color:#93c5fd;border-color:rgba(147,197,253,.25);}
.badge-auto{background:rgba(13,148,136,.1);color:var(--pr);border:1px solid rgba(13,148,136,.25);font-size:11px;padding:3px 8px;border-radius:12px;font-weight:700;}

/* Search Input Group */
.search-input-row{display:flex;gap:8px;align-items:center;width:100%;}
.search-sw{margin-bottom:0;flex:1;min-width:0;position:relative;width:100%;}
.search-si{height:48px;font-size:14px;letter-spacing:0.5px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--card);transition:all .2s ease;width:100%;}
.search-si:focus{border-color:var(--pr);box-shadow:0 0 0 3.5px rgba(13,148,136,.14);}
.btn-lookup{width:auto!important;height:48px;padding:0 20px;font-size:14px;font-weight:800;flex-shrink:0!important;white-space:nowrap!important;border-radius:12px;box-shadow:0 4px 14px rgba(13,148,136,.28);}

/* Form Unit Inputs */
.form-group-unit{margin-bottom:0;}
.input-with-unit{position:relative;display:flex;align-items:center;}
.input-with-unit .form-control{padding-right:48px;height:46px;font-size:15px;font-weight:700;border-radius:12px;border:1.5px solid var(--bdr);transition:all .2s ease;}
.input-with-unit .form-control:focus{border-color:var(--pr);box-shadow:0 0 0 3.5px rgba(13,148,136,.14);}
.unit-tag{position:absolute;right:12px;font-size:13px;font-weight:700;color:var(--muted);pointer-events:none;background:var(--surf);padding:2px 7px;border-radius:6px;border:1px solid var(--bdr);}
.req-star{color:#e11d48;font-weight:900;}

/* Page 1 Action Buttons */
.p1-actions{display:flex;gap:10px;margin-bottom:12px;}
.btn-p1-back{width:115px!important;height:48px;font-size:14.5px;flex-shrink:0!important;}
.btn-p1-next{flex:1!important;height:48px;font-size:15px;font-weight:800;}

/* Employee Found Details Card */
.card-emp-found{margin-bottom:12px;border:1.5px solid var(--ok);background:rgba(5,150,105,.03);border-radius:14px;}
.emp-info-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;border-bottom:1px solid rgba(5,150,105,.2);padding-bottom:8px;}
.emp-info-header{font-size:13.5px;font-weight:800;color:var(--ok);display:flex;align-items:center;gap:7px;}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.35);animation:pulse 1.6s infinite;}
.btn-clear-emp{width:auto!important;flex-shrink:0!important;font-size:12px;padding:4px 10px;border-radius:8px;}
.emp-verified-badge{background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.25);border-radius:10px;padding:9px 12px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.ed-table{background:var(--card);border-radius:10px;border:1px solid var(--bdr);overflow:hidden;}
.ed-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--bdr);font-size:13.5px;}
.ed-row:last-child{border-bottom:none;}
.ed-lbl{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.ed-val{color:var(--txt);font-weight:700;text-align:right;word-break:break-word;}
.id-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:var(--surf);padding:2px 7px;border-radius:6px;border:1px solid var(--bdr);font-size:12.5px;letter-spacing:0.5px;color:var(--txt);}
.badge-affil{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;padding:3px 9px;border-radius:8px;font-size:12px;font-weight:800;display:inline-block;}
[data-theme=dark] .badge-affil{background:rgba(29,78,216,.2);color:#93c5fd;border-color:rgba(147,197,253,.3);}

/* Locked Employee Assessment Banner */
.emp-locked-banner{background:#fff7ed;border:2px solid #ea580c;border-radius:12px;padding:13px 14px;margin-bottom:12px;}
[data-theme=dark] .emp-locked-banner{background:rgba(234,88,12,.1);border-color:#ea580c;}
.emp-locked-header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:10px;border-bottom:1.5px dashed #fed7aa;margin-bottom:10px;}
.lock-pulse-ico{font-size:24px;}
.locked-prev-results{background:var(--card);border:1px solid #fed7aa;border-radius:10px;padding:11px 13px;margin:10px 0;}
.locked-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;font-size:12.5px;}
.locked-res-item{line-height:1.4;}
.l-lbl{color:var(--muted);}
.l-val{color:var(--txt);}
.locked-notice-box{font-size:12px;color:#7c2d12;background:#ffedd5;border:1px solid #fed7aa;padding:10px 12px;border-radius:8px;line-height:1.65;margin-top:10px;}
[data-theme=dark] .locked-notice-box{background:rgba(234,88,12,.15);color:#fdba74;border-color:rgba(234,88,12,.3);}

/* Interactive BMI Gauge Card */
.bmi-gauge-card{margin-top:12px;background:linear-gradient(145deg,rgba(13,148,136,.05) 0%,rgba(2,132,199,.07) 100%);border:1.5px solid rgba(13,148,136,.25);border-radius:14px;padding:14px 16px;animation:slideUp .25s ease;}
.bmi-gauge-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.bmi-val-block{display:flex;flex-direction:column;}
.bmi-gauge-lbl{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
.bmi-val-num-row{display:flex;align-items:baseline;gap:5px;}
.bmi-big-num{font-size:26px;font-weight:900;color:var(--txt);line-height:1.1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;}
.bmi-unit-text{font-size:13px;font-weight:700;color:var(--muted);}
.bmi-cat-badge{font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.12);display:inline-block;}
.bmi-meter-container{position:relative;margin-top:4px;}
.bmi-meter-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.15);}
.bmi-meter-seg{flex:1;transition:opacity .2s ease;}
.m-under{background:#38bdf8;flex:1.5;}
.m-normal{background:#10b981;flex:2;}
.m-over{background:#f59e0b;flex:1.2;}
.m-obese1{background:#f43f5e;flex:1.5;}
.m-obese2{background:#be123c;flex:1.5;}
.bmi-meter-pointer{position:relative;width:0;font-size:12px;color:var(--txt);line-height:1;transform:translateX(-50%);transition:left .4s cubic-bezier(.4,0,.2,1);margin-top:1px;}
.bmi-meter-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:4px;}
.leg-normal{color:#059669;font-weight:800;}

/* ==========================================================================
   ENHANCED DATABASE & SETTINGS CRUD STYLING
   ========================================================================== */

/* Settings Navigation Tabs */
.st-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 4px 10px;
  border-bottom: 2px solid var(--bdr);
  margin-bottom: 14px;
  scrollbar-width: thin;
}
.st-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--bdr);
  background: var(--surf);
  color: var(--txt);
  font-family: var(--F);
  font-size: var(--sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.st-tab:hover {
  background: rgba(13,148,136,.08);
  border-color: var(--pr);
}
.st-tab.act {
  background: var(--pr);
  color: #fff;
  border-color: var(--pr);
  box-shadow: 0 3px 8px rgba(13,148,136,.25);
}
.st-panel {
  display: none;
  animation: fadeIn .25s ease;
}
.st-panel.act {
  display: block;
}

/* Action Header Bar in Settings */
.crud-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surf);
  border-radius: var(--R);
  border: 1px solid var(--bdr);
}
.crud-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--xs);
  color: var(--muted);
}
.crud-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--bdr);
  font-weight: 700;
}
.crud-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Bulk Action Bar */
.crud-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.3);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  animation: fadeIn 0.2s ease;
}
[data-theme='dark'] .crud-bulk-bar {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.3);
}

/* Delete Employee Options Modal */
.del-emp-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.del-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--bdr);
  background: var(--card);
  transition: all 0.2s ease;
}
.del-option-card:hover {
  border-color: rgba(225, 29, 72, 0.4);
  background: rgba(225, 29, 72, 0.03);
}
.del-option-card.danger {
  border-color: rgba(225, 29, 72, 0.35);
  background: rgba(225, 29, 72, 0.03);
}
.del-option-card .doc-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surf);
  display: flex;
  align-items: center;
  justify-content: center;
}
.del-option-card .doc-body {
  flex: 1;
  min-width: 0;
}
.del-option-card .doc-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 2px;
}
.del-option-card .doc-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.del-option-card .btn,
.crud-bulk-bar .btn {
  width: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Filter controls */
.crud-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.crud-search-box {
  flex: 1;
  min-width: 180px;
  position: relative;
}
.crud-search-box input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border-radius: 8px;
  border: 1.5px solid var(--bdr);
  font-family: var(--F);
  font-size: var(--sm);
  background: var(--card);
  color: var(--txt);
  outline: none;
  transition: border-color .2s;
}
.crud-search-box input:focus {
  border-color: var(--pr);
}
.crud-search-box .search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}
.crud-select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--bdr);
  font-family: var(--F);
  font-size: var(--sm);
  background: var(--card);
  color: var(--txt);
  outline: none;
}

/* Table Styling */
.crud-table-wrap {
  width: 100%;
  max-height: 480px;
  overflow: auto;
  border-radius: var(--R);
  border: 1px solid var(--bdr);
  background: var(--card);
  box-shadow: 0 2px 8px var(--sh);
}
.crud-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--xs);
  text-align: left;
}
.crud-table th {
  background: var(--surf);
  color: var(--txt);
  font-weight: 800;
  padding: 9px 10px;
  border-bottom: 2px solid var(--bdr);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.crud-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bdr);
  color: var(--txt);
  vertical-align: middle;
}
.crud-table tr:hover td {
  background: rgba(13,148,136,.03);
}

/* Action Buttons in Table */
.tbl-actions {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.btn-tbl {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--F);
  font-weight: 700;
  border: 1px solid var(--bdr);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all .15s ease;
}
.btn-tbl.edit {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0369a1;
}
.btn-tbl.edit:hover {
  background: #0284c7;
  color: #fff;
}
.btn-tbl.del {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.btn-tbl.del:hover {
  background: #dc2626;
  color: #fff;
}
.btn-tbl.view {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.btn-tbl.view:hover {
  background: #059669;
  color: #fff;
}
.btn-tbl.reset {
  background: #fefce8;
  border-color: #fef08a;
  color: #854d0e;
}
.btn-tbl.reset:hover {
  background: #ca8a04;
  color: #fff;
}
.btn-tbl.unlock {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
.btn-tbl.unlock:hover {
  background: #ea580c;
  color: #fff;
}

/* Modal Form Overlays (Sub-modals inside Settings and Master Database) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(5px);
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.modal-overlay.open, .modal-overlay.show {
  display: flex !important;
  animation: fadeIn .2s ease;
}
.modal-window {
  background: var(--card);
  border-radius: var(--Rl);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border: 1px solid var(--bdr);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
}
.modal-header h3 {
  font-size: var(--base);
  font-weight: 800;
  color: var(--txt);
}
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  background: rgba(0,0,0,.08);
  color: var(--txt);
}
.modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 10px 18px;
  background: var(--surf);
  border-top: 1px solid var(--bdr);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Form inputs in Modal */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}
.form-group {
  margin-bottom: 12px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--bdr);
  font-family: var(--F);
  font-size: var(--sm);
  background: var(--card);
  color: var(--txt);
  outline: none;
  box-sizing: border-box;
  transition: all .18s ease;
}
.form-control:focus {
  border-color: var(--pr);
  box-shadow: 0 0 0 3.5px rgba(13,148,136,.14);
}

/* Badges */
.badge-type {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
}
.badge-type.npi {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.badge-type.partner {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.badge-status.done {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.badge-status.pending {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.badge-status.declined {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

/* Excel dropzone */
.dropzone-box {
  border: 2px dashed var(--bdr);
  border-radius: var(--R);
  padding: 24px;
  text-align: center;
  background: var(--surf);
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 14px;
}
.dropzone-box:hover, .dropzone-box.dragover {
  border-color: var(--pr);
  background: rgba(13,148,136,.05);
}

/* Backup Cards */
.backup-card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--R);
  padding: 14px;
  margin-bottom: 12px;
}
.backup-card h4 {
  font-size: var(--sm);
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.backup-card p {
  font-size: var(--xs);
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.btn-inline{width:auto!important;flex-shrink:0!important;white-space:nowrap!important;}
.btn-group-tab {
  cursor: pointer;
  transition: all .2s ease-in-out;
  border-radius: 10px;
  user-select: none;
}
.btn-group-tab:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.btn-group-tab:active {
  transform: scale(0.97);
}

/* ==========================================================================
   HR DASHBOARD MONITORING & PENDING TRACKING STYLES
   ========================================================================== */
.db-filter-bar {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.db-inp {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: var(--F);
  font-size: var(--sm);
  outline: none;
}
.db-inp:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
.db-sel {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #1e1b4b;
  color: #fff;
  font-family: var(--F);
  font-size: var(--xs);
  outline: none;
  cursor: pointer;
}
.db-sel:focus {
  border-color: #60a5fa;
}
.db-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  font-family: var(--F);
  font-size: var(--xs);
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.db-act-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.db-act-btn:active {
  transform: scale(0.98);
}
.db-act-btn.btn-excel {
  background: #d97706;
  color: #fff;
}
.db-act-btn.btn-line {
  background: #16a34a;
  color: #fff;
}
.db-act-btn.btn-reset {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.db-kpi-summary-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: var(--xs);
  color: #fef3c7;
  flex-wrap: wrap;
  gap: 8px;
}
.db-kpi-strip-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-kpi-strip-num {
  font-size: var(--base);
  font-weight: 800;
  color: #fbbf24;
}

.db-progress-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sm);
}
.db-progress-table th {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}
.db-progress-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.db-progress-table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

.db-pbar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-pbar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.db-pbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* Executive Dashboard KPI Cards & Overview Panels */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.kpi {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.kpi:hover {
  background: rgba(255, 255, 255, 0.12);
}
.kpi-n {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}
.kpi-l {
  font-size: var(--xs);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.kpi.k-tot { border-left: 4px solid #3b82f6; }
.kpi.k-tot .kpi-n { color: #93c5fd; }
.kpi.k-ok { border-left: 4px solid #10b981; }
.kpi.k-ok .kpi-n { color: #6ee7b7; }
.kpi.k-pend { border-left: 4px solid #f59e0b; }
.kpi.k-pend .kpi-n { color: #fcd34d; }
.kpi.k-dec { border-left: 4px solid #ef4444; }
.kpi.k-dec .kpi-n { color: #fca5a5; }

.db-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  color: #fff;
}