/* SAF Operational Platform — styles transcribed from "SAF Platform Screens.dc.html" */
:root{
 --teal:#004F4B;--ath:#009D8A;--ath-d:#007A6C;--orange:#DB5832;--green:#3EA86F;--sand:#B1865B;
 --ink:#1D3733;--ink2:#3D524E;--ink3:#4F625E;--mute:#5E716D;--mute2:#6B7D79;--mute3:#8A9A96;--mute4:#9AA8A5;
 --line:#E1E8E2;--line2:#DDE5DF;--line3:#EEF2EE;--line4:#CFDCD6;--bg:#F4F7F4;--soft:#F1F5F2;--soft2:#F7F9F7;--tealSoft:#E0ECEB;--focus:#DFF3F0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:Inter,'IBM Plex Sans Arabic',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ath);text-decoration:none}a:hover{color:var(--teal)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,textarea{font:inherit;color:inherit}
h1,h2,p{margin:0}
.grow{flex:1}
.strong{font-weight:600;color:var(--ink)}
:focus-visible{outline:2px solid var(--ath);outline-offset:2px}
.link{font-size:12.5px;font-weight:600;color:var(--ath)}
.link:hover{color:var(--teal)}

/* ---------- Buttons ---------- */
.btn{height:42px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;white-space:nowrap;border:1px solid;transition:filter .15s,background .15s}
.btn.pri{background:#004F4B;color:#fff;border-color:#004F4B}
.btn.pri:hover{background:#003F3C;color:#fff}
.btn.sec{background:#fff;color:#004F4B;border-color:#B9CBC6}
.btn.sec:hover{background:#F3F8F6}
.btn.ghost{background:transparent;color:#3D524E;border-color:#DDE5DF}
.btn.ghost:hover{background:#F1F5F2}
.btn.sm{height:40px;padding:0 18px;font-size:13px}

/* ---------- Shell ---------- */
.app{display:flex;min-height:100vh;min-width:1280px;background:var(--bg)}
.side{width:264px;flex:none;background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line3)}
.brand img{height:50px;width:auto}
.brand div{display:flex;flex-direction:column;gap:2px}
.brand b{font-size:13px;font-weight:700;color:var(--teal);line-height:1.4}
.brand span{font-size:11px;color:var(--mute2)}
.side-lbl{padding:18px 24px 8px;font-size:11px;font-weight:600;color:var(--mute3)}
.nav{display:flex;flex-direction:column;gap:3px;padding:0 12px}
.nav-it{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:10px;color:#3D524E;font-size:13.5px;font-weight:500}
.nav-it svg{flex:none;color:#5E716D}
.nav-it:hover{background:var(--soft);color:var(--ink)}
.nav-it.on{background:#004F4B;color:#fff;font-weight:600}
.nav-it.on svg{color:#fff}
.nav-it.soon{color:#8A9A96}
.nav-badge{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:#FBE7DF;color:#B8461F}
.nav-it.on .nav-badge{background:#DB5832;color:#fff}
.subnav{display:flex;flex-direction:column;gap:1px;margin:4px 22px 6px 0;padding-right:12px;border-right:2px solid var(--line)}
.subnav a{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:8px;font-size:12.5px;color:#4F625E;line-height:1.45}
.subnav a span{font-size:10.5px;font-weight:700;color:#8A9A96;flex:none}
.subnav a:hover{background:var(--soft);color:var(--ink)}
.subnav a.on{background:var(--tealSoft);color:var(--teal);font-weight:600}
.subnav a.on span{color:var(--teal)}
.role-card{margin:16px;padding:16px;border-radius:12px;background:var(--soft);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.role-card .pat{position:absolute;inset:0;background:url(assets/pattern.png);background-size:280px;opacity:.4}
.role-card>div:not(.pat){position:relative;display:flex;flex-direction:column;gap:2px}
.role-card span{font-size:11px;color:var(--mute2)}
.role-card b{font-size:13.5px;font-weight:700;color:var(--teal)}
.role-card b.sm{font-size:12.5px;font-weight:600;color:var(--ink)}
.logout{display:flex;align-items:center;gap:10px;padding:4px 28px 22px;color:var(--mute2);font-size:13px}
.logout:hover{color:var(--ink)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.top{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 28px;flex:none;position:sticky;top:0;z-index:20}
.gsearch{width:400px;height:42px;border:1px solid var(--line2);border-radius:10px;background:var(--soft2);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--mute3);font-size:13.5px}
.gsearch:hover{border-color:#B9CBC6}
.gsearch kbd{font-family:inherit;font-size:11px;border:1px solid #D2DBD1;border-radius:6px;padding:2px 6px;color:var(--mute2);background:#fff}
.scope-pill{display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;background:var(--tealSoft);color:var(--teal);font-size:12.5px;font-weight:500;white-space:nowrap}
.dd-wrap{position:relative}
.season{display:flex;align-items:center;gap:8px;height:42px;padding:0 13px;border-radius:10px;border:1px solid var(--line2);font-size:13px;white-space:nowrap}
.bell{position:relative;width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);background:#fff;display:flex;align-items:center;justify-content:center}
.bell.open{background:var(--tealSoft);border-color:#9CC3BC}
.bell-n{position:absolute;top:-5px;left:-5px;min-width:19px;height:19px;border-radius:10px;background:#DB5832;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.me{display:flex;align-items:center;gap:10px;padding-right:14px;margin-right:2px;border-right:1px solid var(--line)}
.me-av{width:38px;height:38px;border-radius:50%;background:#004F4B;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.me-t{display:flex;flex-direction:column;gap:1px}
.me-t b{font-size:13.5px;font-weight:600}
.me-t span{font-size:11.5px;color:var(--mute2)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 20px 50px rgba(29,55,51,.18);padding:6px;z-index:30;display:flex;flex-direction:column}
.menu[hidden]{display:none}
.menu a,.menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--ink);white-space:nowrap}
.menu a:hover,.menu button:hover{background:var(--soft)}
.menu .on{background:var(--tealSoft);color:var(--teal);font-weight:600}
.me-menu{width:300px;max-height:calc(100vh - 90px);overflow-y:auto}
.menu-sep{height:1px;background:var(--line3);margin:6px 0}
.menu-lbl{font-size:11px;font-weight:600;color:var(--mute3);padding:6px 10px 4px}
.menu-sub{font-size:11.5px;color:var(--mute2);font-weight:400}

.popover{position:absolute;top:calc(100% + 10px);left:-60px;width:410px;background:#fff;border:1px solid var(--line2);border-radius:14px;box-shadow:0 20px 50px rgba(29,55,51,.20);z-index:30;overflow:hidden}
.pop-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line3)}
.pop-h b{font-size:15px;font-weight:700}
.pop-list{display:flex;flex-direction:column;padding:6px 8px}
.pop-it{display:flex;align-items:flex-start;gap:12px;padding:11px 8px;border-radius:10px}
.pop-it.unread{background:#F5F9F7}
.pop-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pop-b b{font-size:13px;font-weight:600}
.pop-b span{font-size:12px;color:var(--mute)}
.pop-m{font-size:11px;color:var(--mute3);white-space:nowrap}
.pop-it .unread-dot{margin-top:5px}
.pop-all{display:block;padding:12px;border-top:1px solid var(--line3);text-align:center;font-size:13px;font-weight:600;color:var(--teal)}
.unread-dot{width:8px;height:8px;border-radius:50%;background:#DB5832;flex:none}

.content{flex:1}
.page{display:flex;flex-direction:column;gap:20px;padding:24px 28px 32px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.page-h-l{display:flex;flex-direction:column;gap:8px;min-width:0}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute2)}
.crumbs button:hover{color:var(--teal);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.page h1{font-size:26px;font-weight:700;line-height:1.3}
.desc{font-size:13.5px;color:var(--mute)}
.page-actions{display:flex;gap:10px;flex:none}

/* Filters */
.filters{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.f-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f-q{flex:1;min-width:300px;height:40px;border:1px solid var(--line2);border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 13px;font-size:13px}
.f-q input{flex:1;border:0;outline:0;background:none;font-size:13px}
.f-q input::placeholder{color:var(--mute3)}
.f-q:focus-within{border-color:var(--ath);box-shadow:0 0 0 3px var(--focus)}
.f-dd{height:40px;padding:0 13px;border:1px solid var(--line2);border-radius:10px;display:flex;align-items:center;gap:12px;font-size:13px;background:#fff;white-space:nowrap}
.f-dd:hover{border-color:#B9CBC6}
.f-adv{height:40px;padding:0 14px;border-radius:10px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--teal);background:var(--tealSoft)}
.f-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f-chips .lbl{font-size:12px;color:var(--mute2)}
.f-chips .link{font-size:12px}
.fchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:#DDF2EE;color:var(--ath-d);font-size:12px;font-weight:500}
.fchip button{display:flex}

/* Tabs / segmented */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2)}
.tabs button{padding:10px 16px 12px;font-size:13.5px;font-weight:500;color:var(--mute);border-bottom:2.5px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:8px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{font-weight:700;color:var(--teal);border-bottom-color:var(--teal)}
.tabs .n{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:#EDF1EE;color:#566A66}
.tabs .on .n{background:#004F4B;color:#fff}
.segctl{display:flex;padding:3px;border-radius:9px;background:var(--soft);gap:2px}
.segctl button{padding:4px 11px;border-radius:7px;font-size:12px;font-weight:500;color:var(--mute2)}
.segctl button.on{background:#fff;color:var(--teal)}

/* Rows & blocks */
.row{display:grid;gap:20px;align-items:stretch}
.blk{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.blk.clear{background:transparent;border:0;padding:0}
.blk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.blk-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.blk-title .t{font-size:15.5px;font-weight:700}
.blk-title .s{font-size:12px;color:var(--mute2)}
.blk-tools{display:flex;align-items:center;gap:10px;flex:none}
.ic-box{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.ic-box.sm{width:34px;height:34px}

/* KPIs */
.kpis{display:grid;gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-lbl{display:flex;align-items:center;gap:10px;min-width:0}
.kpi-lbl span{font-size:13px;color:var(--ink3);font-weight:500}
.delta{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.kpi-v{font-weight:700;line-height:1.15;letter-spacing:-.01em}
.kpi-sub{font-size:12px;color:var(--mute2)}
.track6,.track8,.track10,.track4{border-radius:4px;background:#EAF0EC;overflow:hidden}
.track6{height:6px}.track8{height:8px;border-radius:5px;background:#EEF2EE}.track10{flex:1;height:10px;border-radius:6px;background:#EEF2EE}.track4{height:4px;border-radius:2px;background:#EEF2EE}
.track6>div,.track8>div,.track10>div,.track4>div{height:100%;border-radius:inherit}
.track4>div{background:var(--ath)}
.track8.end{flex:1;display:flex;justify-content:flex-end}

/* Table */
.tbl{border:1px solid #E3E9E4;border-radius:12px;overflow:hidden}
.tr{display:grid;padding:0 14px;border-top:1px solid #EDF1ED;align-items:center;background:#fff}
.tr.th{background:#F3F6F3;border-top:0}
.tr.th>div{padding:11px 8px;font-size:12px;font-weight:600;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr.hl{background:#F3F8F6}
.tr.clickable{cursor:pointer}
.tr.clickable:hover{background:#F7FAF8}
.td{min-width:0;display:flex;align-items:center;gap:10px;font-size:13px}
.cell-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.cell-text>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-text .strong{font-weight:600}
.cell-text .sub{font-size:11.5px;color:var(--mute2)}
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.badge .dot{width:6px;height:6px;border-radius:50%;flex:none}
.mini-bar{flex:1;height:6px;background:#E8EEEA;border-radius:4px;overflow:hidden;min-width:30px}
.mini-bar>div{height:100%;border-radius:4px}
.mini-bar-v{font-size:12.5px;font-weight:600;min-width:34px}
.check-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.more-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.more-btn:hover{background:var(--soft)}
.cell-input{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tbl-input{height:36px;width:100%;border:1.5px solid #DDE5DF;border-radius:8px;background:#fff;padding:0 10px;font-size:13px;outline:0}
.tbl-input::placeholder{color:#9AA8A5}
.tbl-input.st-ok{border-color:#BFD6CB}
.tbl-input.st-err{border-color:#C9473D;box-shadow:0 0 0 3px #F9E3E1}
.tbl-input.st-focus,.tbl-input:focus{border-color:#009D8A;box-shadow:0 0 0 3px #DFF3F0}
.tbl-input:disabled{background:#F1F4F1;color:#9AA8A5}
.err-msg{font-size:11px;color:#B33A31;white-space:nowrap}
.att-seg{display:flex;gap:4px}
.att-seg button{padding:6px 11px;border-radius:8px;border:1px solid #DDE5DF;background:#fff;color:#5E716D;font-size:12px;font-weight:600}
.att-seg button:not(.on):hover{background:var(--soft)}
.tfoot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #EDF1ED;background:#FBFCFB}
.tfoot>span{font-size:12.5px;color:var(--mute)}
.pager{display:flex;gap:5px}
.pager button{min-width:30px;height:30px;padding:0 6px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;background:#fff;color:#3D524E;border:1px solid #DDE5DF}
.pager button.on{background:#004F4B;color:#fff;border-color:#004F4B}
.pager button:disabled{cursor:default}

/* Charts */
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
.legend i{width:10px;height:10px;border-radius:3px}
.legend i.ln{width:14px;height:3px;border-radius:2px}
.bars{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid #D5DED8;background-image:linear-gradient(#EEF2EE 1px,transparent 1px);background-size:100% 25%}
.bar-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.bar-top{font-size:11.5px;font-weight:600}
.bar-grp{width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.bar{border-radius:5px 5px 0 0;transition:filter .15s}
.bar:hover{filter:brightness(1.15)}
.bar-labels{display:flex;gap:12px;margin-top:-8px}
.bar-labels span{flex:1;min-width:0;text-align:center;font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbars{display:flex;flex-direction:column;gap:14px}
.hbar{display:flex;align-items:center;gap:12px}
.rank{width:22px;height:22px;border-radius:6px;background:#EEF2EE;color:#566A66;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.rank.top{background:#004F4B;color:#fff}
.hbar-l{flex:none;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-v{width:50px;flex:none;font-size:13px;font-weight:600;text-align:left}
.line-wrap{display:flex;gap:10px}
.line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.line-main svg{width:100%;display:block;overflow:visible}
.line-x{display:flex;justify-content:space-between;font-size:11px;color:var(--mute2)}
.line-y{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--mute3);width:40px;flex:none;margin-top:-7px}
.donut-wrap{display:flex;align-items:center;gap:26px;flex:1}
.donut{width:170px;height:170px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.donut>div{width:120px;height:120px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.donut .c{font-size:23px;font-weight:700}
.donut .cs{font-size:11.5px;color:var(--mute2)}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.donut-legend>div{display:flex;align-items:center;gap:10px;font-size:13px}
.donut-legend i{width:10px;height:10px;border-radius:50%;flex:none}
.donut-legend b{font-weight:600}
.donut-legend .pct{width:46px;text-align:left;color:var(--mute2);font-size:12px}

/* List */
.list{display:flex;flex-direction:column;gap:2px}
.li{display:flex;align-items:flex-start;gap:12px;border-radius:10px}
.li.unread{background:#F5F9F7}
.li.sel{background:var(--tealSoft)}
.li-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:1px}
.li-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.li-t b{font-size:13.5px;font-weight:600}
.li-badge{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.li-s{font-size:12.5px;color:var(--mute);line-height:1.55}
.li-m{display:flex;align-items:center;gap:8px;flex:none;padding-top:3px}
.li-m span{font-size:11.5px;color:var(--mute3);white-space:nowrap}

/* Progress */
.prog{display:flex;flex-direction:column;gap:15px}
.prog>div{display:flex;flex-direction:column;gap:7px}
.prog-h{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.prog-h b{font-weight:600}

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:16px;background:#fff;border:1px solid var(--line);padding:26px 30px;display:flex;align-items:center;gap:22px;min-height:136px}
.hero-img{position:absolute;top:0;bottom:0;left:0;width:64%;background-size:cover;background-position:center}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to left,#FFFFFF 36%,rgba(255,255,255,0.6) 68%,rgba(255,255,255,0.1) 100%)}
.hero-ini{position:relative;width:78px;height:78px;border-radius:50%;background:#004F4B;color:#fff;font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 4px #fff,0 0 0 6px #3EA86F}
.hero-icon{position:relative;width:70px;height:70px;border-radius:18px;background:#004F4B;display:flex;align-items:center;justify-content:center;flex:none}
.hero-body{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.hero-body .n{font-size:24px;font-weight:700}
.hero-body .s{font-size:13.5px;color:var(--ink3)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid}
.hero-stats{position:relative;display:flex;gap:10px;flex:none}
.hero-stats>div{min-width:108px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,0.9);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.hero-stats b{font-size:20px;font-weight:700;color:var(--teal);white-space:nowrap}
.hero-stats span{font-size:11.5px;color:var(--mute);white-space:nowrap}

/* Form */
.form{display:grid;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld>label{font-size:12.5px;font-weight:600;color:#3D524E}
.box{height:44px;border:1.5px solid #DDE5DF;border-radius:10px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 13px}
.box:focus-within{border-color:#009D8A;box-shadow:0 0 0 3px #DFF3F0}
.box.st-err{border-color:#C9473D;box-shadow:0 0 0 3px #F9E3E1}
.box.st-ok{border-color:#2E9B62}
.box svg{flex:none}
.box-in{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13.5px;color:#1D3733;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:100%}
.box-in.ph,.box-in::placeholder{color:#9AA8A5}
.area{min-height:90px;border:1.5px solid #DDE5DF;border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.7;background:#fff;resize:vertical;outline:0}
.area:focus{border-color:#009D8A;box-shadow:0 0 0 3px #DFF3F0}
.msg{font-size:11.5px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft2);cursor:pointer}
.toggle-row span{font-size:13px;font-weight:500}
.switch{width:42px;height:24px;border-radius:12px;background:#C9D3CE;display:flex;align-items:center;justify-content:flex-start;padding:3px;flex:none;transition:background .15s}
.switch i{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch.on{background:#009D8A;justify-content:flex-end}
.form-act{display:flex;justify-content:flex-end}

/* Timeline */
.timeline{display:flex;flex-direction:column}
.tl{display:flex;gap:14px}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:14px}
.tl-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex:none}
.tl-line{width:2px;flex:1;margin:5px 0 0}
.tl-body{flex:1;min-width:0;padding-bottom:18px;display:flex;flex-direction:column;gap:3px}
.tl-h{display:flex;justify-content:space-between;gap:10px}
.tl-h b{font-size:13.5px;font-weight:600}
.tl-h span{font-size:11.5px;color:var(--mute3);white-space:nowrap}
.tl-s{font-size:12.5px;color:var(--mute)}

/* Week planner */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.day{display:flex;flex-direction:column;gap:8px;min-height:270px;border-radius:12px;background:#F7F9F7;border:1px solid #E8EEEA;padding:10px;color:#3D524E}
.day.today{background:#E0ECEB;border-color:#9CC3BC;color:#004F4B}
.day-h{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px}
.day-h span{font-size:13px;font-weight:600}
.day-h b{font-size:19px;font-weight:700}
.sess{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.sess-tag{display:flex;align-items:center;gap:6px}
.sess-tag i{width:8px;height:8px;border-radius:50%}
.sess-tag span{font-size:11px;font-weight:600}
.sess b{font-size:12.5px;font-weight:600;line-height:1.45}
.sess .s{font-size:11.5px;color:var(--mute2)}
.rest{flex:1;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--mute3);border:1.5px dashed #D2DBD1;border-radius:10px}

/* Gantt */
.gantt{display:flex;flex-direction:column;position:relative}
.g-months{display:flex;padding-right:130px}
.g-months span{flex:1;font-size:11.5px;color:var(--mute2);padding:0 0 9px;text-align:center}
.g-row{display:flex;align-items:center;border-top:1px solid var(--line3);height:50px}
.g-l{width:130px;flex:none;font-size:12.5px;font-weight:600;color:#3D524E}
.g-track{flex:1;position:relative;height:100%;background-image:linear-gradient(to left,#EEF2EE 1px,transparent 1px)}
.g-bar{position:absolute;top:10px;bottom:10px;color:#fff;border-radius:7px;font-size:11px;font-weight:600;display:flex;align-items:center;padding:0 8px;overflow:hidden;white-space:nowrap}
.g-today{position:absolute;top:22px;bottom:0;width:2px;background:#DB5832}
.g-today-l{position:absolute;top:0;transform:translateX(50%);font-size:10.5px;font-weight:700;color:#fff;background:#DB5832;padding:2px 7px;border-radius:6px}

/* QR */
.qr{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0}
.qr-card{padding:18px;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 30px rgba(0,79,75,.10);position:relative}
.qr-grid{display:grid;grid-template-columns:repeat(25,10px)}
.qr-grid span{width:10px;height:10px;background:#fff}
.qr-grid span.on{background:#1D3733}
.qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center}
.qr-logo img{width:46px}
.qr-s{font-size:16px;font-weight:700}
.qr-g{font-size:13px;color:var(--mute)}
.qr-exp{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#FBF0DA;color:#9A6A0F;font-size:13px;font-weight:600}
.qr-live{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#24804F;font-weight:600}
.qr-live i{width:8px;height:8px;border-radius:50%;background:#2E9B62;box-shadow:0 0 0 4px #E2F2E8;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px #E2F2E8}}
.qr-code{font-size:11.5px;color:var(--mute3)}

/* Stepper */
.stepper{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;gap:8px}
.step{display:flex;align-items:center;gap:12px;min-width:0}
.step-n{width:34px;height:34px;border-radius:50%;background:#fff;color:#8A9A96;border:2px solid #D2DBD1;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.step.done .step-n{background:#2E9B62;border-color:#2E9B62;color:#fff}
.step.cur .step-n{background:#004F4B;border-color:#004F4B;color:#fff}
.step-t{display:flex;flex-direction:column;gap:2px;flex:none}
.step-t b{font-size:13px;font-weight:600;color:#8A9A96}
.step.done .step-t b,.step.cur .step-t b{color:#1D3733}
.step-t span{font-size:11.5px;color:var(--mute3)}
.step-line{flex:1;height:2px;background:#DDE5DF;margin:0 8px;min-width:20px}
.step.done .step-line{background:#2E9B62}

/* Drop zone */
.drop{border:1.5px dashed #B9CBC6;border-radius:12px;background:var(--soft2);padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer}
.drop:hover{border-color:var(--ath);background:#F3F8F6}
.drop-ic{width:44px;height:44px;border-radius:50%;background:var(--tealSoft);display:flex;align-items:center;justify-content:center}
.drop b{font-size:13.5px;font-weight:600}
.drop>span{font-size:12px;color:var(--mute2)}
.files{display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.ext{width:36px;height:36px;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.file-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fn{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs{font-size:11.5px;color:var(--mute2)}
.file .ok{width:22px;height:22px;border-radius:50%;background:#2E9B62;display:flex;align-items:center;justify-content:center;flex:none}
.file .x{display:flex}

/* Note */
.note{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1px solid}
.note-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.note-b{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.note-b b{font-size:14px;font-weight:700}
.note-b span{font-size:13px;line-height:1.65;color:#2F4642}
.note-act{font-size:12.5px;font-weight:600;white-space:nowrap;align-self:center;padding:8px 14px;border-radius:9px;border:1px solid;background:#fff}

/* Versus */
.vs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 6px}
.vs-p{display:flex;align-items:center;gap:10px}
.vs-p.rev{flex-direction:row-reverse}
.vs-p.rev>div{text-align:left}
.vs-p>div{display:flex;flex-direction:column;gap:2px}
.vs-p b{font-size:14px;font-weight:700}
.vs-p>div span{font-size:11.5px;color:var(--mute2)}
.vs-av{width:42px;height:42px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.vs-mid{font-size:12px;font-weight:700;color:var(--mute);padding:5px 12px;border-radius:999px;background:var(--soft)}
.vs-rows{display:flex;flex-direction:column;gap:13px}
.vs-row{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;gap:12px}
.vs-side{display:flex;align-items:center;gap:8px}
.vs-side .track8{flex:1}
.vs-v{font-size:13px;width:60px}
.vs-v.left{text-align:left}
.vs-l{text-align:center;font-size:12.5px;color:var(--ink3)}

/* Heatmap */
.heat{display:flex;flex-direction:column;gap:6px}
.heat-row{display:grid;gap:6px}
.heat-c{font-size:11.5px;color:var(--mute);text-align:center;font-weight:500}
.heat-l{font-size:13px;font-weight:500;display:flex;align-items:center}
.heat-cell{height:40px;border-radius:8px;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.heat-legend{display:flex;gap:14px;justify-content:flex-end;padding-top:6px}
.heat-legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mute)}
.heat-legend i{width:12px;height:12px;border-radius:4px}

/* Checklist */
.checks{display:flex;flex-direction:column;gap:16px}
.check-g{display:flex;flex-direction:column;gap:3px}
.check-gt{font-size:11.5px;font-weight:700;color:var(--mute3);padding:0 6px 4px}
.check-it{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;width:100%}
.check-it:hover{background:var(--soft2)}
.check-it.on{background:#F3F8F6}
.cb{width:18px;height:18px;border-radius:5px;border:1.5px solid #B9CBC6;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.cb .cb-on,.cb .cb-ind{display:none}
.cb-ind{width:8px;height:2px;background:#fff;border-radius:1px}
.check-it.on .cb,.check-it.ind .cb{background:#009D8A;border-color:#009D8A}
.check-it.on .cb-on{display:block}
.check-it.ind .cb-ind{display:block}
.check-it .grow{font-size:13px}
.check-it .type{font-size:11px;color:var(--mute2);padding:2px 8px;border-radius:6px;background:var(--soft);white-space:nowrap}

/* Tiles */
.tiles{display:grid;gap:12px}
.tile{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--line);background:#FBFCFB;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:#9CC3BC;box-shadow:0 6px 18px rgba(0,79,75,.08)}
.tile-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.tile>div{display:flex;flex-direction:column;gap:3px}
.tile b{font-size:14px;font-weight:600}
.tile>div span{font-size:12px;color:var(--mute2)}

/* Pills */
.pills{display:flex;flex-direction:column;gap:12px}
.pill-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill-l{width:112px;flex:none;font-size:12.5px;font-weight:600;color:var(--mute)}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;border:1px solid;font-size:12.5px;font-weight:500}
.pill i{width:7px;height:7px;border-radius:50%}
.pill button{display:flex}
.pill-add{height:32px;padding:0 12px;border-radius:999px;border:1.5px dashed #B9CBC6;color:var(--teal);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center}

/* Big search */
.bigsearch{height:58px;border:2px solid #009D8A;border-radius:14px;display:flex;align-items:center;gap:12px;padding:0 18px;box-shadow:0 0 0 4px #DFF3F0;background:#fff}
.bigsearch input{flex:1;border:0;outline:0;background:none;font-size:19px;font-weight:600;caret-color:#009D8A}
.bigsearch .meta{font-size:12.5px;color:var(--mute2)}
.bigsearch button{display:flex}
.schips{display:flex;gap:8px;flex-wrap:wrap}
.schips button{height:34px;padding:0 14px;border-radius:999px;background:#fff;color:#3D524E;border:1px solid #DDE5DF;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.schips button b{font-size:11.5px;font-weight:700}
.schips button.on{background:#004F4B;color:#fff;border-color:#004F4B}

/* Toast & modal */
.toast{position:fixed;bottom:28px;left:28px;width:390px;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 16px 40px rgba(29,55,51,.18);display:flex;gap:12px;padding:14px 16px;align-items:flex-start;z-index:40;animation:rise .25s ease-out}
@keyframes rise{from{transform:translateY(12px);opacity:0}}
.toast-ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.toast-b{flex:1;display:flex;flex-direction:column;gap:3px}
.toast-b b{font-size:14px;font-weight:700}
.toast-b span{font-size:12.5px;color:var(--mute)}
.toast>button{display:flex}
.modal-bg{position:fixed;inset:0;background:rgba(29,55,51,.40);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{width:520px;background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-t{font-size:20px;font-weight:700}
.modal p{font-size:14px;line-height:1.75;color:#3D524E}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

/* Empty / placeholder */
.empty{margin:60px auto;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.empty-ic{width:64px;height:64px;border-radius:18px;background:var(--tealSoft);display:flex;align-items:center;justify-content:center}
.empty p{font-size:14px;color:var(--mute);line-height:1.7}

/* ---------- Auth ---------- */
.auth{display:flex;min-height:100vh;background:#fff}
.auth-l{width:600px;flex:none;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:44px 72px}
.auth-l .pat{position:absolute;inset:0;background:url(assets/pattern.png);background-size:560px;opacity:.10}
.auth-top{position:relative;display:flex;align-items:center;justify-content:space-between}
.auth-top img{height:88px;width:auto}
.lang{font-size:13px;font-weight:500;color:var(--teal);padding:7px 14px;border:1px solid var(--line4);border-radius:999px;background:#fff}
.auth-mid{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
.auth-form{display:flex;flex-direction:column;gap:26px}
.auth-h{display:flex;flex-direction:column;gap:8px}
.auth-h h1{font-size:32px;font-weight:700}
.auth-h p{font-size:15px;color:var(--mute);line-height:1.65}
.afld{display:flex;flex-direction:column;gap:8px}
.afld label{font-size:13px;font-weight:600;color:#3D524E}
.ainput{height:52px;border:1.5px solid #DDE5DF;border-radius:12px;background:#fff;display:flex;align-items:center;gap:12px;padding:0 16px;color:#5E716D}
.ainput:focus-within{border-color:#009D8A;box-shadow:0 0 0 4px #DFF3F0;color:#009D8A}
.ainput input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:15px;color:var(--ink)}
.ainput input#lg-u{text-align:right}
.ainput input[type=password]{font-size:18px;letter-spacing:.2em}
.ainput button{display:flex}
.auth-row{display:flex;align-items:center;justify-content:space-between}
.auth-row .link{font-size:14px}
.remember{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.remember input{position:absolute;opacity:0;pointer-events:none}
.cbx{width:20px;height:20px;border-radius:6px;background:#fff;border:1.5px solid #B9CBC6;display:flex;align-items:center;justify-content:center}
.cbx svg{visibility:hidden}
.remember input:checked+.cbx{background:#009D8A;border-color:#009D8A}
.remember input:checked+.cbx svg{visibility:visible}
.remember input:focus-visible+.cbx{outline:2px solid var(--ath);outline-offset:2px}
.abtn{height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600;text-align:center}
.abtn.pri{background:#004F4B;color:#fff}
.abtn.pri:hover{background:#003F3C}
.abtn.sec{background:#fff;border:1.5px solid #B9CBC6;color:#004F4B;font-size:15px}
.abtn.sec:hover{background:#F3F8F6}
.or{display:flex;align-items:center;gap:14px;color:var(--mute3);font-size:13px}
.or span{flex:1;height:1px;background:#E1E8E2}
.secure{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute2)}
.back{font-size:14px;font-weight:600;color:var(--ath);display:flex;align-items:center;gap:6px}
.otp-ic{width:64px;height:64px;border-radius:18px;background:var(--tealSoft);display:flex;align-items:center;justify-content:center}
.warn{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-radius:12px;background:#FBF0DA;border:1px solid #F0D9A8}
.warn svg{flex:none}
.warn span{font-size:13.5px;color:#7A540C;line-height:1.6}
.otp{display:flex;gap:12px}
.otp input{width:62px;height:66px;border-radius:12px;border:1.5px solid #DDE5DF;background:#fff;font-size:28px;font-weight:600;text-align:center;outline:0;caret-color:#009D8A}
.otp input.filled{border-color:#9CC3BC;background:#F3F8F6}
.otp input:focus{border:2px solid #009D8A;box-shadow:0 0 0 4px #DFF3F0;background:#fff}
.otp input.err{border-color:#C9473D;box-shadow:0 0 0 4px #F9E3E1}
.otp-meta{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.otp-meta>span{color:var(--mute);display:flex;align-items:center;gap:8px}
.otp-meta b{font-weight:700;color:var(--ink)}
.resend{color:var(--ath);font-weight:600}
.resend:disabled{color:#9AA8A5;font-weight:500;cursor:default}
.help{font-size:13px;color:var(--mute2)}
.help b{font-weight:600}
.auth-foot{position:relative;font-size:12px;color:var(--mute3);display:flex;justify-content:space-between}
.auth-r{flex:1;position:relative;background-size:cover;background-position:center}
.auth-r .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,38,36,.94) 0%,rgba(0,79,75,.45) 45%,rgba(0,79,75,0) 75%)}
.auth-tag{position:absolute;bottom:60px;right:60px;left:60px;color:#fff;display:flex;flex-direction:column;gap:16px}
.stripes{display:flex;gap:6px}
.stripes i{height:5px;border-radius:3px}
.auth-tag b{font-size:36px;font-weight:700;line-height:1.4}
.auth-tag span{font-size:16px;color:rgba(255,255,255,.88);line-height:1.6}

/* ---------- Screen catalog ---------- */
.cat{background:#E6ECE8;min-height:100vh;padding:56px 64px 120px;display:flex;flex-direction:column;gap:72px}
.cover{display:flex;align-items:center;gap:56px;padding:56px 64px;background:#fff;border-radius:28px;border:1px solid var(--line2);position:relative;overflow:hidden;min-height:340px}
.cover-img{position:absolute;top:0;bottom:0;left:0;width:62%;background:url(assets/bg-curve.png) center/cover}
.cover-fade{position:absolute;inset:0;background:linear-gradient(to left,#FFFFFF 38%,rgba(255,255,255,0) 100%)}
.cover-logo{position:relative;height:190px;width:auto;flex:none}
.cover-b{position:relative;display:flex;flex-direction:column;gap:14px;max-width:1100px}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--ath);text-align:right}
.cover h1{font-size:50px;font-weight:700;line-height:1.25;color:var(--teal)}
.cover p{font-size:19px;color:var(--ink3)}
.cover-roles{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cover-roles a{padding:7px 14px;border-radius:999px;background:var(--soft);border:1px solid var(--line2);font-size:13.5px;font-weight:500;color:var(--ink)}
.cover-roles a:hover{border-color:var(--ath);color:var(--teal)}
.cover-cta{margin-top:6px}
.cat-sec{display:flex;flex-direction:column;gap:28px}
.sec-h{display:flex;align-items:flex-end;gap:28px;padding-bottom:24px;border-bottom:2px solid var(--line4);flex-wrap:wrap}
.sec-k{width:96px;height:96px;border-radius:24px;background:#004F4B;color:#fff;font-size:48px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.sec-t{display:flex;flex-direction:column;gap:6px}
.sec-t .eyebrow{font-size:13px;letter-spacing:.1em}
.sec-t h2{font-size:40px;font-weight:700}
.sec-c{font-size:14.5px;color:var(--mute)}
.journey{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.journey span{padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:500;background:#fff;color:var(--ink);border:1px solid var(--line4)}
.journey span.first{font-weight:700;background:#004F4B;color:#fff;border-color:#004F4B}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cat-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--line2);border-radius:14px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.cat-card:hover{border-color:#9CC3BC;box-shadow:0 10px 28px rgba(29,55,51,.10);color:var(--ink)}
.cat-card .sid{font-size:12px;font-weight:700;color:#fff;background:#004F4B;padding:4px 9px;border-radius:7px}
.cat-card b{font-size:16px;font-weight:700}
.cat-card .en{font-size:13px;color:var(--mute2)}
.cat-card .role{margin-top:4px;font-size:12.5px;color:var(--teal);background:var(--soft);border:1px solid var(--line4);padding:5px 11px;border-radius:999px;display:flex;gap:6px;align-items:center}