/* QB CLEAR mockup design system
============================== */
:root{
--bg:#F4F7FB;
--bg-2:#E9EFF6;
--surface:#FFFFFF;
--surface-2:#F8FAFD;
--surface-3:#EEF3F8;
--ink:#0B1A2A;
--ink-2:#28384A;
--muted:#6B7886;
--muted-2:#94A0AE;
--line:#DCE5EE;
--line-strong:#BCCBDC;
--primary:#0369A1;
--primary-2:#0284C7;
--primary-3:#075985;
--accent:#1FCB6D;
--accent-2:#4FD89A;
--success:#1F9D5B;
--success-bg:#E1F4EA;
--warn:#B7791F;
--warn-bg:#FAEFD4;
--danger:#B4392D;
--danger-bg:#F7E2DD;
--info:#0284C7;
--info-bg:#DFEBF6;
--shadow:0 1px 0 rgba(3,105,161,.04), 0 8px 28px -16px rgba(3,105,161,.18);
--shadow-lg:0 1px 0 rgba(3,105,161,.04), 0 24px 60px -28px rgba(3,105,161,.28);
--radius:10px;
--radius-lg:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'Inter','Segoe UI',system-ui,sans-serif;
font-size:14px;
line-height:1.5;
color:var(--ink);
background:var(--bg);
background-image:radial-gradient(1200px 600px at 100% -200px, rgba(31,203,109,.08), transparent 60%),
radial-gradient(900px 500px at -200px 100%, rgba(3,105,161,.08), transparent 60%);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.92em;letter-spacing:.01em}
.muted{color:var(--muted)}
.small{font-size:12px}
.strong{font-weight:600;color:var(--ink)}
.strong.xl{font-size:22px;font-weight:600;letter-spacing:-.01em}
.right{text-align:right}
/* App grid
-------- */
.app{
display:grid;
grid-template-columns:248px 1fr;
grid-template-rows:auto 1fr;
grid-template-areas:
"header header"
"sidebar main";
min-height:100vh;
}
.topbar{grid-area:header}
.sidebar{grid-area:sidebar}
.main{
grid-area:main;
display:flex;
flex-direction:column;
min-height:0;
min-width:0;
}
.view{
flex:1;
padding:28px 36px 8px;
min-width:0;
}
/* Sidebar
------- */
.sidebar{
background:#0369A1;
color:#EAF3FB;
padding:14px 0 16px;
position:sticky;top:64px;height:calc(100vh - 64px);
display:flex;flex-direction:column;
box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
.sidebar-tag{
display:flex;align-items:center;gap:8px;
margin:0 14px 10px;padding:8px 12px;
background:rgba(255,255,255,.10);border-radius:99px;
font-size:11px;color:#FFFFFF;letter-spacing:.12em;text-transform:uppercase;
}
.st-dot{width:6px;height:6px;border-radius:50%;background:#3FE08D;box-shadow:0 0 0 3px rgba(63,224,141,.25)}
.nav{flex:1;padding:0 10px;overflow-y:auto}
.nav-section{
font-size:11px;color:#C2D6E8;text-transform:uppercase;letter-spacing:.12em;
padding:14px 10px 8px;font-weight:500;
}
.nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 10px;border-radius:7px;
font-size:13.5px;color:#F1F7FC;
cursor:pointer;user-select:none;
position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.10);color:#fff}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 2px 0 0 var(--accent)}
.nav-count{
margin-left:auto;font-size:11px;font-weight:500;
background:rgba(255,255,255,.14);color:#FFFFFF;
padding:1px 7px;border-radius:99px;
}
.nav-count.danger{background:rgba(244,113,96,.55);color:#FFE2DC}
.nav-ico{
width:16px;height:16px;flex:0 0 16px;
background:currentColor;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
opacity:.85;
}
.nav-ico[data-i="grid"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="list"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="check"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="route"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="cert"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="book"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="cap"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="chart"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.nav-ico[data-i="shield"]{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.sidebar-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.14);font-size:11.5px;color:#D1E2F0}
.env-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);padding:5px 10px;border-radius:99px;margin-bottom:8px;color:#FFFFFF}
.env-pill .dot{width:6px;height:6px;border-radius:50%;background:#3FE08D;box-shadow:0 0 0 3px rgba(63,224,141,.25)}
.sidebar-version{color:#A8C0D6;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
/* Topbar
------ */
.topbar{
display:grid;
grid-template-columns:248px 1fr minmax(280px,520px) auto;
align-items:center;gap:18px;
padding:0 24px 0 0;
background:#FFFFFF;
border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:30;
box-shadow:0 1px 0 rgba(3,105,161,.04);
}
.topbar-brand{
display:flex;align-items:center;justify-content:flex-start;
padding:10px 18px;height:64px;
border-right:1px solid var(--line);
text-decoration:none;
}
.topbar-brand .brand-logo{
height:40px;width:auto;max-width:200px;object-fit:contain;display:block;
}
.crumb{font-size:13px;color:var(--muted);padding-left:8px}
.crumb [data-crumb]{color:var(--ink-2);font-weight:500}
.search{
display:flex;align-items:center;gap:8px;
background:var(--surface);border:1px solid var(--line);border-radius:9px;
padding:6px 10px;box-shadow:0 1px 0 rgba(3,105,161,.02);
}
.search-ico{
width:14px;height:14px;flex:0 0 14px;background:var(--muted);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.search input{flex:1;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--ink)}
.search kbd{
font-family:'JetBrains Mono',monospace;font-size:11px;
background:var(--surface-3);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--muted);
}
.search.inline{padding:5px 10px}
.search.inline input{font-size:13px;width:240px}
.topbar-right{display:flex;align-items:center;gap:12px}
.iconbtn{
background:transparent;border:1px solid var(--line);border-radius:8px;
padding:6px 10px;font-size:12px;color:var(--ink-2);position:relative;
}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn.bell{padding:6px 9px}
.iconbtn.bell::before{
content:'';display:inline-block;width:14px;height:14px;background:var(--ink-2);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.bell-dot{position:absolute;top:4px;right:5px;width:7px;height:7px;background:var(--accent);border-radius:50%;border:2px solid var(--surface)}
.user{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--line)}
.avatar{
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,#0284C7,#0369A1);
color:#FFFFFF;display:grid;place-items:center;
font-weight:600;font-size:12px;letter-spacing:.04em;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.avatar.lg{width:42px;height:42px;font-size:14px}
.user-name{font-weight:600;font-size:13px;color:var(--ink)}
.user-role{font-size:11.5px;color:var(--muted)}
/* Page basics
----------- */
.page{display:flex;flex-direction:column;gap:22px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.page-head.dense{align-items:center}
.h1{font-family:'Newsreader',serif;font-weight:600;font-size:30px;letter-spacing:-.015em;margin:0 0 4px;color:var(--ink)}
.h2{font-family:'Newsreader',serif;font-weight:600;font-size:18px;letter-spacing:-.005em;margin:0;color:var(--ink)}
.h3{font-family:'Newsreader',serif;font-weight:600;font-size:15px;margin:0 0 8px;color:var(--ink)}
.lede{font-size:14px;color:var(--muted);margin:0;max-width:760px}
.page-actions{display:flex;gap:8px;align-items:center}
.btn{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;
border:1px solid transparent;background:var(--surface);color:var(--ink-2);
transition:transform .04s, background .12s, border-color .12s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary-3)}
.btn.primary:hover{background:var(--primary-2)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--surface);border-color:var(--line-strong)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.lg{padding:11px 18px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-btn{background:none;border:0;color:var(--primary-2);font-weight:500;padding:0}
.link-btn:hover{text-decoration:underline}
/* Cards
----- */
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:20px 22px;
box-shadow:var(--shadow);
}
.card.flush{padding:0;overflow:hidden}
.card.callout{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.card.callout .callout-icon{
width:46px;height:46px;border-radius:12px;
background:linear-gradient(135deg,#0284C7,#075985);
display:grid;place-items:center;color:#fff;flex:0 0 46px;
position:relative;
}
.card.callout .callout-icon::after{
content:'';width:22px;height:22px;background:#fff;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.card-foot.subtle{margin-top:18px;background:var(--surface-2);border-radius:10px;padding:14px;border:1px dashed var(--line-strong)}
.card-foot .cost{font-family:'Newsreader',serif;font-size:24px;font-weight:600;color:var(--primary)}
.card.highlight{background:linear-gradient(180deg,#EAF3FB 0%, #FFFFFF 60%);border-color:#BFD7EC}
/* KPI row
------- */
.kpis{
display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.kpi{
background:var(--surface);border:1px solid var(--line);border-radius:12px;
padding:16px 16px 14px;position:relative;overflow:hidden;
box-shadow:var(--shadow);
}
.kpi::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--primary),var(--accent));
opacity:.7;
}
.kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.kpi-value{
font-family:'Newsreader',serif;font-size:32px;font-weight:600;letter-spacing:-.02em;
color:var(--ink);display:flex;align-items:baseline;gap:8px;
}
.kpi-unit{font-size:14px;color:var(--muted);font-family:'Inter',sans-serif;font-weight:500}
.kpi-delta{font-size:11px;font-weight:500;padding:2px 7px;border-radius:99px}
.kpi-delta.up{background:var(--success-bg);color:var(--success)}
.kpi-delta.down{background:var(--danger-bg);color:var(--danger)}
.kpi-foot{font-size:11.5px;color:var(--muted);margin-top:6px}
.trend.down{color:var(--success)}
.spark{height:32px;margin-top:8px}
/* Grids
----- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-2.wide-left{grid-template-columns:1.55fr 1fr}
.grid-2.wide-left > div:first-child > .card{margin-bottom:18px}
.grid-2.wide-left > aside > .card{margin-bottom:14px}
.row{display:flex}
.row.gap{gap:8px}
/* Chips, pills, tags
----------------- */
.chip{
display:inline-flex;align-items:center;gap:6px;
padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:500;
background:var(--surface-3);color:var(--ink-2);border:1px solid transparent;
white-space:nowrap;
}
.chip.outline{background:transparent;border-color:var(--line)}
.chip.ok{background:var(--success-bg);color:var(--success)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.danger{background:var(--danger-bg);color:var(--danger)}
.chip.info{background:var(--info-bg);color:var(--info)}
.chip.neutral{background:var(--surface-3);color:var(--ink-2)}
.chip.small{font-size:10.5px;padding:1px 7px}
/* Feed
---- */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.feed-item{display:grid;grid-template-columns:64px 10px 1fr;gap:10px;align-items:flex-start;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.feed-item:last-child{border-bottom:0;padding-bottom:0}
.feed-time{font-size:11px;color:var(--muted);padding-top:2px;text-align:right}
.feed-dot{width:10px;height:10px;border-radius:50%;margin-top:5px}
.feed-dot.ok{background:var(--success)}
.feed-dot.warn{background:var(--warn)}
.feed-dot.info{background:var(--info)}
.feed-body{font-size:13px;color:var(--ink-2)}
.feed-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
/* Chart placeholders (SVG drawn in JS)
--------------- */
.chart{height:220px;margin:0 -6px 0;position:relative}
.chart svg{width:100%;height:100%;overflow:visible}
.legend{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend.tight{gap:14px;margin:6px 0 14px}
.legend-key{display:inline-flex;align-items:center;gap:6px}
.legend-key i{width:9px;height:9px;border-radius:2px;display:inline-block}
.legend-key i.dot{border-radius:50%}
.legend-key i.dot.ok{background:var(--success)}
.legend-key i.dot.warn{background:var(--warn)}
.legend-key i.dot.danger{background:var(--danger)}
.legend-key i.dot.muted{background:var(--muted-2)}
/* Funnel
------ */
.funnel{display:flex;flex-direction:column;gap:8px}
.funnel-row{display:grid;grid-template-columns:200px 1fr 70px;gap:14px;align-items:center;font-size:13px;color:var(--ink-2)}
.funnel-row .bar{
height:18px;background:linear-gradient(90deg,var(--primary),var(--primary-2));
border-radius:4px;width:var(--w);position:relative;
}
.funnel-row .bar.accent{background:linear-gradient(90deg,var(--accent),#14A658)}
.funnel-row .num{font-family:'JetBrains Mono',monospace;font-size:12.5px;text-align:right;color:var(--ink-2)}
/* Tables
------ */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table thead th{
background:var(--surface-2);text-align:left;padding:10px 14px;
font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
border-bottom:1px solid var(--line);
position:sticky;top:0;
}
.table tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table.tight tbody td, .table.tight thead th{padding:8px 12px;font-size:12.5px}
.table .right{text-align:right;font-variant-numeric:tabular-nums}
.table .check{width:32px;padding-right:0}
.apps tbody tr{cursor:pointer}
.apps .applicant-cell{display:flex;align-items:center;gap:10px}
.apps .ac-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#0284C7,#0369A1);color:#fff;display:grid;place-items:center;font-weight:600;font-size:11px;flex:0 0 30px}
.apps .ac-meta{display:flex;flex-direction:column}
.apps .ac-name{font-weight:500;color:var(--ink)}
.apps .ac-sub{font-size:11.5px;color:var(--muted)}
.apps .stage{display:inline-flex;align-items:center;gap:8px}
.apps .stage .pill{height:6px;border-radius:99px;background:var(--surface-3);width:100px;overflow:hidden}
.apps .stage .pill span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:var(--w,40%)}
.apps .qbc{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2)}
.apps .openrow{color:var(--muted);font-size:18px;font-weight:300}
.apps .openrow:hover{color:var(--primary)}
.table-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-2);border-top:1px solid var(--line)}
.pager{display:flex;gap:4px}
.pager-btn{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px;color:var(--ink-2)}
.pager-btn.active{background:var(--primary);color:#fff;border-color:var(--primary-3)}
/* Tabs + toolbar
------------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{
background:transparent;border:0;padding:10px 14px;font-size:13px;color:var(--muted);
border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;
}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--primary);border-bottom-color:var(--accent);font-weight:500}
.tabnum{font-size:11px;background:var(--surface-3);padding:1px 7px;border-radius:99px;color:var(--muted)}
.tab.active .tabnum{background:var(--accent);color:#fff}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.filter-grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-grp.end{margin-left:auto}
.filter{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.filter select{
background:var(--surface);border:1px solid var(--line);border-radius:7px;
padding:5px 8px;font-size:12.5px;color:var(--ink-2);
}
/* Applicant detail
--------------- */
.applicant{gap:18px}
.applicant-head{display:flex;gap:22px;align-items:center;padding:22px}
.ah-portrait{
width:88px;height:88px;border-radius:18px;flex:0 0 88px;
background:linear-gradient(135deg,var(--primary-2),var(--primary-3));
color:#FFFFFF;display:grid;place-items:center;
font-family:'Newsreader',serif;font-size:30px;font-weight:600;letter-spacing:.02em;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px -10px rgba(3,105,161,.3);
}
.ah-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ah-sub{display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.ah-sub strong{color:var(--ink-2);font-weight:500;margin-right:4px}
.ah-stats{display:flex;gap:30px;padding-top:14px;border-top:1px dashed var(--line);flex-wrap:wrap}
.ah-stats > div{display:flex;flex-direction:column;gap:2px}
.ah-stat{font-family:'Newsreader',serif;font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ah-stat.warn{color:var(--accent)}
.subnav{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 4px}
.subnav-item{
background:transparent;border:0;padding:11px 14px;font-size:13.5px;color:var(--muted);
border-bottom:2px solid transparent;
}
.subnav-item:hover{color:var(--ink-2)}
.subnav-item.active{color:var(--primary);border-bottom-color:var(--accent);font-weight:500}
.tabpane{display:flex;flex-direction:column;gap:18px}
/* Steps timeline
------------- */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;counter-reset:step}
.step{
display:grid;grid-template-columns:36px 1fr auto;gap:14px;
padding:14px 0;border-bottom:1px solid var(--line);align-items:center;position:relative;
}
.step:last-child{border-bottom:0}
.step-num{
width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--surface-2);border:1px solid var(--line);
font-family:'Newsreader',serif;font-weight:600;color:var(--muted);
}
.step.done .step-num{background:var(--success);color:#fff;border-color:var(--success);box-shadow:0 0 0 4px rgba(45,106,79,.12)}
.step.now .step-num{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,203,109,.18)}
.step-title{font-weight:600;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.step-desc{font-size:12.5px;color:var(--muted)}
.step-out{font-size:12px;font-weight:500;padding:3px 9px;border-radius:99px}
.step-out.ok{background:var(--success-bg);color:var(--success)}
.step-out.warn{background:var(--warn-bg);color:var(--warn)}
.step-out.muted{background:var(--surface-3);color:var(--muted)}
/* Units strip
---------- */
.units-strip{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.us-cell{
height:74px;border-radius:8px;
display:flex;flex-direction:column;justify-content:space-between;
padding:8px;font-size:11px;
border:1px solid var(--line);background:var(--surface-2);position:relative;
}
.us-cell .us-ref{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.04em}
.us-cell .us-state{font-weight:600;font-size:12px}
.us-cell.ok{background:var(--success-bg);border-color:#B7D5C0}
.us-cell.ok .us-state{color:var(--success)}
.us-cell.warn{background:var(--warn-bg);border-color:#E4D0A1}
.us-cell.warn .us-state{color:var(--warn)}
.us-cell.danger{background:var(--danger-bg);border-color:#DDB1AB}
.us-cell.danger .us-state{color:var(--danger)}
.us-cell.muted{background:var(--surface-3);border-color:var(--line);color:var(--muted)}
/* dl
-- */
.dl{display:grid;grid-template-columns:1fr 1.4fr;gap:8px 12px;margin:0;font-size:12.5px}
.dl dt{color:var(--muted);font-weight:500}
.dl dd{margin:0;color:var(--ink-2)}
.dl.tight{font-size:12px;gap:5px 10px}
/* Specialist
--------- */
.specialist{display:flex;align-items:center;gap:12px;margin-bottom:12px}
/* Documents
--------- */
.doc-row{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:flex-start;padding-top:6px}
.doc-thumb{
border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#F4F8FC, #E6EFF7);
padding:18px 18px 22px;position:relative;min-height:140px;
}
.doc-corner{
position:absolute;top:10px;right:12px;font-family:'JetBrains Mono',monospace;
font-size:10px;background:#0369A1;color:#fff;padding:2px 6px;border-radius:4px;
}
.doc-title{font-family:'Newsreader',serif;font-size:16px;font-weight:600;color:var(--ink);margin:4px 0}
.doc-body{padding-right:60px}
.emp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.emp li{display:grid;grid-template-columns:14px 1fr 180px;gap:12px;align-items:flex-start}
.emp-bullet{width:10px;height:10px;border-radius:50%;background:var(--success);margin-top:7px;box-shadow:0 0 0 3px rgba(45,106,79,.15)}
.emp-evidence{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.emp-cov{display:flex;flex-direction:column;gap:4px}
.cov-bar{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.cov-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:var(--w)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--ink-2)}
.log li{display:grid;grid-template-columns:90px 1fr;gap:10px}
.log-time{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11.5px}
/* Documents & OCR portal
--------------------- */
.docs-card{padding:0;overflow:hidden}
.docs-layout{display:grid;grid-template-columns:300px 1fr;min-height:680px}
.docs-list{
border-right:1px solid var(--line);background:var(--surface-2);
display:flex;flex-direction:column;
}
.docs-list-head{
padding:14px 16px;border-bottom:1px solid var(--line);
display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.doc-li{
display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:flex-start;
padding:12px 14px;text-align:left;background:transparent;border:0;
border-bottom:1px solid var(--line);cursor:pointer;
}
.doc-li:hover{background:var(--surface-3)}
.doc-li.active{background:#EAF3FB;box-shadow:inset 3px 0 0 var(--primary)}
.doc-li-thumb{
width:54px;height:68px;background:#fff;border:1px solid var(--line);border-radius:4px;
padding:6px 5px;display:flex;flex-direction:column;gap:3px;overflow:hidden;position:relative;
box-shadow:0 1px 0 rgba(3,105,161,.06);
}
.dlt-band{height:10px;background:linear-gradient(90deg,#0369A1,#0284C7);margin:-6px -5px 4px}
.dlt-line{height:3px;background:var(--line-strong);border-radius:99px}
.dlt-name{height:5px;background:var(--accent);border-radius:99px;width:60%;margin:2px 0}
.dlt-line.w50{width:50%}.dlt-line.w60{width:60%}.dlt-line.w70{width:70%}.dlt-line.w80{width:80%}.dlt-line.w90{width:90%}
.doc-li-thumb.passport{padding:6px}
.dlt-pass-photo{width:18px;height:22px;background:var(--line-strong);border-radius:2px;float:left;margin-right:6px}
.dlt-pass-mrz{margin-top:auto;height:6px;background:repeating-linear-gradient(90deg,#2c3e50 0 2px,transparent 2px 4px)}
.doc-li-title{font-weight:600;font-size:13px;color:var(--ink);line-height:1.3;margin-bottom:3px}
.doc-li-meta{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.doc-li-chips{display:flex;gap:5px;flex-wrap:wrap}
.docs-list-foot{padding:12px;margin-top:auto;border-top:1px solid var(--line)}
.docs-detail{
display:flex;flex-direction:column;min-width:0;
}
.docs-head{
display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
padding:14px 22px;border-bottom:1px solid var(--line);background:var(--surface);
}
.docs-meta{display:flex;gap:24px;align-items:center}
.dm{display:flex;flex-direction:column;gap:1px}
.dm > span:last-child{font-size:13px;color:var(--ink)}
.docs-actions{display:flex;gap:6px}
.docs-grid{
display:grid;grid-template-columns:1.35fr 1fr;gap:0;flex:1;min-height:0;
}
.docs-canvas{
background:linear-gradient(180deg,#EEF3F8,#E1E9F1);
border-right:1px solid var(--line);
display:flex;flex-direction:column;
}
.scan-toolbar{
display:flex;justify-content:space-between;align-items:center;
padding:8px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);
}
.scan-tabs{display:flex;gap:2px}
.scan-tab{
background:transparent;border:0;padding:5px 10px;font-size:12px;color:var(--muted);
border-radius:6px;
}
.scan-tab.active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 0 rgba(3,105,161,.06)}
.scan-zoom{display:flex;align-items:center;gap:6px}
.zbtn{background:var(--surface);border:1px solid var(--line);border-radius:5px;width:22px;height:22px;font-size:13px;display:grid;place-items:center;color:var(--ink-2)}
.scan-wrap{
flex:1;padding:28px;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
}
.scan-doc{
width:100%;max-width:640px;background:#FDFBF6;
background-image:
radial-gradient(circle at 20% 10%, rgba(0,0,0,.02), transparent 50%),
radial-gradient(circle at 80% 90%, rgba(0,0,0,.015), transparent 50%),
linear-gradient(180deg,#FDFBF6 0%,#F7F3E7 100%);
border:1px solid #DDD3BD;border-radius:4px;
box-shadow:0 2px 4px rgba(0,0,0,.05),0 12px 30px -10px rgba(0,0,0,.18),
inset 0 0 80px rgba(120,90,30,.04);
padding:38px 44px;font-family:'Newsreader',serif;color:#1a1a1a;line-height:1.5;
position:relative;
}
.scan-watermark{
position:absolute;top:14px;right:18px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
color:rgba(0,0,0,.28);letter-spacing:.18em;
}
/* OCR bounding boxes */
.ocr-box{
position:relative;display:inline;
outline:1.5px dashed rgba(3,105,161,.55);outline-offset:2px;border-radius:2px;
background:rgba(3,105,161,.06);
padding:0 2px;cursor:pointer;
}
.ocr-box::before{
content:attr(data-n);position:absolute;top:-15px;left:-3px;
font-family:'JetBrains Mono',monospace;font-size:9px;
background:var(--primary);color:#fff;padding:1px 5px;border-radius:3px;letter-spacing:.04em;
line-height:1.2;font-style:normal;
white-space:nowrap;
}
.ocr-box:hover, .ocr-box.is-focus{
outline-color:var(--accent);
outline-width:2px;
background:rgba(31,203,109,.16);
z-index:5;
}
.ocr-box:hover::before, .ocr-box.is-focus::before{background:var(--accent)}
/* Credential recreation — base + variants */
.cg-paper{
text-align:center;border:1.5px solid #C9202A;border-radius:2px;
padding:30px 28px;background:#FBF6EA;position:relative;
background-image:radial-gradient(ellipse at center,#FCF8EC 0%, #F4ECD4 100%);
}
.cg-paper::before{
content:'';position:absolute;inset:6px;border:1px solid rgba(201,32,42,.35);border-radius:2px;pointer-events:none;
}
/* UK · City and Guilds (default) — keep red & cream */
.cg-paper.v-uk-cg{ border-color:#C9202A; background-image:radial-gradient(ellipse at center,#FCF8EC 0%, #F4ECD4 100%); }
.cg-paper.v-uk-cg::before{ border-color:rgba(201,32,42,.35) }
/* India · NCVT National Trade Cert — saffron/blue/green stripes */
.cg-paper.v-india-ncvt{
border-color:#0F4A8F;
background:linear-gradient(180deg,#FCF6E8 0%,#FAF1D8 100%);
}
.cg-paper.v-india-ncvt::before{
border:1px solid rgba(15,74,143,.35);
}
.cg-paper.v-india-ncvt .cg-band{
background:linear-gradient(90deg,#F47216 0%,#F47216 33%,#FFFFFF 33%,#FFFFFF 66%,#138808 66%,#138808 100%);
padding:10px 14px;border-radius:4px;margin:-10px -12px 16px;
}
.cg-paper.v-india-ncvt .cg-org-1{color:#0F4A8F}
.cg-paper.v-india-ncvt .cg-org-2{color:#444}
.cg-paper.v-india-ncvt .cg-name{color:#0F4A8F}
.cg-paper.v-india-ncvt .cg-sig-glyph{color:#0F4A8F}
.cg-paper.v-india-ncvt .cg-specimen{color:rgba(15,74,143,.6);border-color:rgba(15,74,143,.55)}
/* India · University degree — maroon, formal */
.cg-paper.v-india-univ{
border-color:#5C0E1E;
background:linear-gradient(180deg,#FFFAEF 0%,#F4E8D2 100%);
}
.cg-paper.v-india-univ::before{
border:2px double rgba(92,14,30,.45);inset:8px;
}
.cg-paper.v-india-univ .cg-band{ background:transparent; padding:8px 0 6px; }
.cg-paper.v-india-univ .cg-org-1{color:#5C0E1E;font-family:'Newsreader',serif;font-weight:700;font-size:22px}
.cg-paper.v-india-univ .cg-org-2{color:#5C0E1E;font-style:italic;font-size:13px}
.cg-paper.v-india-univ .cg-name{color:#5C0E1E;font-size:32px}
.cg-paper.v-india-univ .cg-sig-glyph{color:#5C0E1E}
.cg-paper.v-india-univ .cg-specimen{color:rgba(92,14,30,.65);border-color:rgba(92,14,30,.55)}
/* Oman · Government-issued — red/white/green flag-band, khanjar emblem */
.cg-paper.v-oman-govt{
border-color:#0F4A2B;
background:linear-gradient(180deg,#FBFAF4 0%,#F4F0E1 100%);
}
.cg-paper.v-oman-govt::before{
border:1px solid rgba(15,74,43,.4);
}
.cg-paper.v-oman-govt .cg-band{
background:linear-gradient(180deg,#C9202A 0%,#C9202A 33%,#FFFFFF 33%,#FFFFFF 66%,#0F4A2B 66%,#0F4A2B 100%);
padding:14px 16px;border-radius:4px;margin:-12px -14px 18px;
color:#fff;
}
.cg-paper.v-oman-govt .cg-org-1{color:#0F4A2B;font-weight:700;text-shadow:0 1px 0 #fff}
.cg-paper.v-oman-govt .cg-org-2{color:#5a3722}
.cg-paper.v-oman-govt .cg-name{color:#C9202A}
.cg-paper.v-oman-govt .cg-sig-glyph{color:#0F4A2B}
.cg-paper.v-oman-govt .cg-specimen{color:rgba(15,74,43,.6);border-color:rgba(15,74,43,.55)}
/* QB CLEAR previously-issued — blue government style */
.cg-paper.v-qb-clear{
border-color:#0369A1;
background:linear-gradient(180deg,#F4F8FC 0%,#E6EFF7 100%);
}
.cg-paper.v-qb-clear::before{ border-color:rgba(3,105,161,.35) }
.cg-paper.v-qb-clear .cg-band{
background:linear-gradient(90deg,#0369A1,#0284C7);
padding:14px 16px;border-radius:4px;margin:-12px -14px 18px;color:#fff;
}
.cg-paper.v-qb-clear .cg-org-1{color:#fff;font-weight:600}
.cg-paper.v-qb-clear .cg-org-2{color:#D7E4F1;font-style:italic}
.cg-paper.v-qb-clear .cg-name{color:#0369A1;font-style:italic}
.cg-paper.v-qb-clear .cg-sig-glyph{color:#0369A1}
.cg-paper.v-qb-clear .cg-specimen{color:rgba(3,105,161,.65);border-color:rgba(3,105,161,.55)}
/* Anomaly stamp variant — red, prominent */
.cg-specimen.alarm{
color:#fff !important;background:rgba(180,57,45,.92);border-color:#7d1f17 !important;
transform:translateX(-50%) rotate(-4deg);
}
/* Empty-state / no-credential card */
.scan-doc.v-none{
display:flex;align-items:center;justify-content:center;text-align:center;min-height:340px;
background:#FAF8F2;
background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.02) 0 6px,transparent 6px 14px);
}
.empty-cred{max-width:380px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px;border:1.5px dashed var(--line-strong);border-radius:10px;background:rgba(255,255,255,.6)}
.empty-cred-icon{width:60px;height:60px;border-radius:50%;background:#EEF3F8;display:grid;place-items:center}
.empty-cred-anomaly{margin-top:10px;background:#F7E2DD;color:#7d1f17;padding:8px 12px;border-radius:6px;font-size:12px;line-height:1.5;text-align:left}
.cg-band{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
.cg-org{text-align:left}
.cg-org-1{font-family:'Newsreader',serif;font-weight:700;font-size:20px;color:#222;letter-spacing:.02em}
.cg-org-2{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:#444}
.cg-intro{font-style:italic;color:#444;margin:14px 0 8px;font-size:14px}
.cg-name{font-family:'Newsreader',serif;font-style:italic;font-size:30px;color:#0B3D40;margin:8px 0 14px}
.cg-line{color:#444;font-size:13.5px;margin:10px 0;line-height:1.7}
.cg-qual{font-family:'Newsreader',serif;font-weight:600;font-size:18px;color:#222;margin:14px 0;line-height:1.45}
.cg-codes{display:flex;justify-content:center;gap:24px;font-size:12.5px;color:#333;margin:14px 0 6px}
.cg-reg{font-size:11.5px;font-style:italic;color:#555;margin:6px 0 18px}
.cg-row{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12.5px;color:#333;margin:6px 0}
.cg-sep{color:#999}
.cg-sigs{display:flex;justify-content:space-around;gap:24px;margin:28px 0 4px}
.cg-sig{display:flex;flex-direction:column;align-items:center;gap:2px}
.cg-sig-line{border-bottom:1px solid #333;width:170px;display:flex;justify-content:center;padding:0 0 2px;margin-bottom:4px}
.cg-sig-glyph{font-family:'Brush Script MT','Lucida Handwriting',cursive;color:#1b3a8a;font-size:18px;font-style:italic;letter-spacing:.02em}
.cg-sig-name{font-size:12px;font-weight:600;color:#222}
.cg-sig-role{font-size:11px;color:#555;font-style:italic}
.cg-foot{margin-top:20px;text-align:center;font-size:11px;color:#666;display:flex;flex-direction:column;gap:2px}
.cg-specimen{
position:absolute;bottom:14px;left:50%;transform:translateX(-50%) rotate(-2deg);
font-family:'JetBrains Mono',monospace;font-size:10px;
color:rgba(201,32,42,.55);border:1.5px solid rgba(201,32,42,.55);
padding:3px 10px;letter-spacing:.12em;border-radius:2px;
}
/* Employer letter recreation */
.letter-doc{font-size:13.5px;color:#222}
.letterhead{
display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
padding-bottom:14px;border-bottom:1.5px solid #2D3A47;margin-bottom:18px;
}
.lh-mark{width:48px;height:48px;border-radius:8px;background:#2D3A47;color:#fff;display:grid;place-items:center;font-family:'Newsreader',serif;font-weight:700;font-size:18px}
.lh-name .strong{font-family:'Newsreader',serif;font-size:18px;color:#1a1a1a}
.lh-meta{font-size:11.5px;text-align:right;color:#444;display:flex;flex-direction:column;gap:2px}
.letter-doc p{margin:0 0 10px;color:#222;font-size:13.5px;line-height:1.65}
.letter-sig-glyph{font-family:'Brush Script MT','Lucida Handwriting',cursive;color:#1b3a8a;font-size:22px;font-style:italic;margin:14px 0 2px}
/* Handbook recreation */
.handbook-doc{text-align:left;font-size:13px;color:#222}
.hd-title{font-family:'Newsreader',serif;font-size:22px;margin:0 0 4px;color:#1a1a1a}
.hd-sub{font-family:'Newsreader',serif;font-size:15px;font-weight:500;margin:0 0 16px;color:#444}
.hd-units{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.hd-unit{
border:1px solid #DCD3BD;border-radius:6px;padding:10px 12px;background:rgba(255,255,255,.55);
display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:flex-start;
}
.hd-unit > div:first-of-type{font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-unit .muted.small{grid-column:2}
/* Passport recreation */
.passport-doc{background:linear-gradient(180deg,#E8E0CE 0%,#D8CEB6 100%);color:#1a1a1a;padding:24px}
.pp-band{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#1F2A36;color:#F2D87B;border-radius:4px;margin-bottom:14px;font-family:'Newsreader',serif;font-weight:600;font-size:13px;letter-spacing:.04em}
.pp-band-r{color:#F2D87B;letter-spacing:.16em}
/* Passport variants */
.passport-doc.pp-v-gbr{background:linear-gradient(180deg,#E8E0CE 0%,#D8CEB6 100%)}
.passport-doc.pp-v-gbr .pp-band{background:#0B1B41;color:#D7A33E}
.passport-doc.pp-v-gbr .pp-band-r{color:#D7A33E}
.passport-doc.pp-v-ind{background:linear-gradient(180deg,#E9DCC2 0%,#D2BE94 100%)}
.passport-doc.pp-v-ind .pp-band{background:#2C2E5C;color:#F8C25C}
.passport-doc.pp-v-ind .pp-band-r{color:#F8C25C}
.passport-doc.pp-v-ind .pp-photo{border-color:#7d6520}
.passport-doc.pp-v-omn{background:linear-gradient(180deg,#EFE5C9 0%,#D8C892 100%)}
.passport-doc.pp-v-omn .pp-band{background:#6B0A14;color:#FBE8B1}
.passport-doc.pp-v-omn .pp-band-r{color:#FBE8B1}
.passport-doc.pp-v-omn .pp-photo{border-color:#6B0A14}
.passport-doc.pp-v-npl{background:linear-gradient(180deg,#E9D6C2 0%,#C9A88B 100%)}
.passport-doc.pp-v-npl .pp-band{background:#7D1F1F;color:#F4D9A8}
.passport-doc.pp-v-npl .pp-band-r{color:#F4D9A8}
.passport-doc.pp-v-npl .pp-photo{border-color:#7D1F1F}
.pp-grid{display:grid;grid-template-columns:120px 1fr;gap:16px;background:#F4ECD4;padding:14px;border:1px solid #B59E6A;border-radius:3px}
.pp-photo{height:160px;background:repeating-linear-gradient(45deg,#C9C0AA 0 4px,#D7CDB4 4px 8px);display:grid;place-items:center;color:rgba(0,0,0,.35);font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid #B59E6A;letter-spacing:.16em}
.pp-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:11.5px}
.pp-fields > div{display:flex;flex-direction:column;gap:1px}
.pp-k{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#7a6a3e}
.pp-v{font-family:'Newsreader',serif;font-weight:600;color:#1a1a1a;font-size:14px}
.pp-mrz{
margin-top:14px;padding:10px 12px;background:#F4ECD4;border:1px solid #B59E6A;border-radius:3px;
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#222;letter-spacing:.02em;white-space:pre-wrap;line-height:1.6;
}
/* Right side panel — fields & raw */
.docs-panel{
padding:18px 20px 22px;overflow:auto;background:var(--surface);
display:flex;flex-direction:column;gap:18px;
}
.dp-block{display:flex;flex-direction:column;gap:8px}
.dp-title{
font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--primary);font-weight:600;
padding-bottom:6px;border-bottom:1px solid var(--line);
}
.dp-fields{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.dp-fields td{padding:6px 8px;border-bottom:1px dashed var(--line);vertical-align:middle;color:var(--ink-2)}
.dp-fields tr:last-child td{border-bottom:0}
.dp-fields .dp-n{
font-family:'JetBrains Mono',monospace;font-size:10.5px;
background:var(--primary);color:#fff;padding:1px 6px;border-radius:3px;text-align:center;
width:24px;
}
.dp-fields tr:hover td{background:var(--surface-2)}
.dp-fields tr.is-focus td{background:#EAF7F0}
.dp-fields tr.is-focus .dp-n{background:var(--accent)}
.dp-fields.tight td{padding:4px 8px;font-size:12px}
.conf{position:relative;width:90px;height:14px;background:var(--surface-3);border-radius:99px;overflow:hidden;display:flex;align-items:center}
.conf span:first-child{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:var(--w);display:block}
.conf .conf-v{position:absolute;right:6px;top:-1px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#fff;mix-blend-mode:difference}
.conf.mid span:first-child{background:linear-gradient(90deg,#0284C7,#1F9D5B)}
.conf.lo span:first-child{background:linear-gradient(90deg,#B7791F,#B4392D)}
.dp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2)}
.dp-checks li{display:flex;align-items:flex-start;gap:8px}
.dp-checks li::before{content:'';width:14px;height:14px;border-radius:50%;flex:0 0 14px;margin-top:1px}
.dp-checks li.ok::before{background:var(--success);
-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat var(--success);
mask:url("data:image/svg+xml;utf8,") center/70% no-repeat var(--success);
}
.dp-checks li.warn::before{background:var(--warn);
-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat var(--warn);
mask:url("data:image/svg+xml;utf8,") center/70% no-repeat var(--warn);
}
.raw-ocr{
margin:0;padding:12px;background:#0E1A28;color:#CFE0F2;
font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.55;
border-radius:6px;overflow:auto;max-height:260px;
}
.raw-ocr code{color:inherit;font-family:inherit}
/* Pages grid */
.pages{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.pg{
aspect-ratio:1/1;display:grid;place-items:center;border:1px solid var(--line);
border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-2);
}
.pg.ok{background:#EAF7F0;border-color:#A8D8BE;color:var(--success)}
@media (max-width:1280px){
.docs-grid{grid-template-columns:1fr}
.docs-canvas{border-right:0;border-bottom:1px solid var(--line)}
.docs-meta{gap:14px;flex-wrap:wrap}
}
@media (max-width:980px){
.docs-layout{grid-template-columns:1fr}
.docs-list{border-right:0;border-bottom:1px solid var(--line)}
}
/* Employer letter · highlighted reading
----------------------------------- */
.letter{
display:grid;grid-template-columns:1fr 240px;gap:18px;align-items:flex-start;
border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#F7FAFD,#FFFFFF);
padding:18px 20px;
}
.letter-meta{
grid-column:1 / -1;display:flex;justify-content:space-between;gap:10px;
padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--line);color:var(--muted);
}
.letter-body{font-family:'Newsreader',serif;font-size:14px;line-height:1.65;color:var(--ink-2)}
.letter-body p{margin:0 0 10px}
.letter-sig{margin-top:14px !important;color:var(--muted)}
.letter-body mark.ev{
background:#FFF6D9;color:var(--ink);padding:0 3px;border-radius:3px;
box-shadow:inset 0 -2px 0 rgba(183,121,31,.35);
cursor:pointer;font-style:normal;
}
.letter-body mark.ev:hover{box-shadow:inset 0 -2px 0 var(--warn)}
.letter-body mark.e-u05{background:#E1F4EA;box-shadow:inset 0 -2px 0 rgba(31,157,91,.45)}
.letter-body mark.e-u06{background:#E1F4EA;box-shadow:inset 0 -2px 0 rgba(31,157,91,.45)}
.letter-body mark.e-u07{background:#E1F4EA;box-shadow:inset 0 -2px 0 rgba(31,157,91,.45)}
.letter-body mark.e-u03{background:#E1F4EA;box-shadow:inset 0 -2px 0 rgba(31,157,91,.45)}
.letter-body mark.e-u08{background:#DFEBF6;box-shadow:inset 0 -2px 0 rgba(10,111,177,.55)}
.letter-body mark.e-u01{background:#FAEFD4;box-shadow:inset 0 -2px 0 rgba(183,121,31,.55)}
.letter-body mark.e-multi{background:#EAF6EE;box-shadow:inset 0 -2px 0 rgba(31,157,91,.45)}
.letter-body mark.e-time{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 -2px 0 var(--line-strong);font-style:italic}
.letter-side{
border-left:1px dashed var(--line);padding-left:16px;display:flex;flex-direction:column;gap:8px;
}
.letter-side-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);font-weight:600;margin-bottom:4px}
.ls-row{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;font-size:12px;color:var(--ink-2)}
.ls-row.muted{color:var(--muted)}
.ev-dot{width:10px;height:10px;border-radius:3px;display:inline-block;background:var(--line-strong)}
.ev-dot.e-u05,.ev-dot.e-u06,.ev-dot.e-u07,.ev-dot.e-u03{background:#1F9D5B}
.ev-dot.e-u08{background:#0284C7}
.ev-dot.e-u01{background:#B7791F}
.ev-dot.e-none{background:#D8DEE6}
@media (max-width:1100px){
.letter{grid-template-columns:1fr}
.letter-side{border-left:0;border-top:1px dashed var(--line);padding-left:0;padding-top:14px;margin-top:6px}
}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.checks li{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.checks li::before{
content:'';width:14px;height:14px;border-radius:50%;background:var(--success);flex:0 0 14px;
-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat var(--success);
mask:url("data:image/svg+xml;utf8,") center/70% no-repeat var(--success);
display:inline-block;
}
/* Mapping process stepper
---------------------- */
.mapping-process .mp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.mp-step{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);position:relative}
.mp-step::after{content:'';position:absolute;right:-9px;top:50%;width:18px;height:18px;background:var(--surface);border:1px solid var(--line);border-radius:50%;transform:translateY(-50%);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:10px;
}
.mp-step:last-child::after{display:none}
.mp-step.done{background:#F1F8FD;border-color:#BFD7EC}
.mp-step.now{background:linear-gradient(180deg,#FFF7E8,#FFFEF8);border-color:#E6CE9C}
.mp-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-family:'Newsreader',serif;font-weight:600;color:var(--muted)}
.mp-step.done .mp-num{background:var(--primary);color:#fff;border-color:var(--primary-3)}
.mp-step.now .mp-num{background:var(--warn);color:#fff;border-color:#8C5C16}
.mp-title{font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.mp-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.mp-result{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Mapping unit cards (v2 — two-stage explicit)
------------------------------------------ */
.map-grid{display:flex;flex-direction:column;gap:12px}
.map-card2{
border:1px solid var(--line);border-radius:12px;background:var(--surface);
position:relative;overflow:hidden;
}
.map-card2::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.map-card2.ok::before{background:var(--success)}
.map-card2.warn::before{background:var(--warn)}
.map-card2.danger::before{background:var(--danger)}
.map-card2.muted::before{background:var(--muted-2)}
.m2-head{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:12px 16px 10px 18px;border-bottom:1px solid var(--line);
background:var(--surface-2);
}
.m2-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m2-ref{color:var(--muted);letter-spacing:.04em}
.m2-title{font-family:'Newsreader',serif;font-weight:600;font-size:15px;margin:0;color:var(--ink)}
.m2-verdict{display:flex;align-items:center;gap:8px}
.m2-body{
display:grid;grid-template-columns:260px 1fr;gap:0;
}
.m2-nos{
padding:14px 16px;border-right:1px dashed var(--line);background:linear-gradient(180deg,#F4F8FC,#FFFFFF);
}
.m2-lbl{
display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
color:var(--primary);font-weight:600;margin-bottom:6px;
}
.m2-reqs{margin:0;padding-left:14px;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.m2-reqs li{line-height:1.4}
.m2-stages{
display:grid;grid-template-columns:1fr 24px 1fr;gap:0;
}
.m2-stage{padding:14px 16px}
.m2-stage:first-of-type{border-right:0}
.m2-stage-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.m2-stage-tag{
font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
padding:2px 8px;border-radius:99px;
}
.m2-stage-tag.stage-1{background:var(--info-bg);color:var(--info)}
.m2-stage-tag.stage-2{background:#EAF6EE;color:var(--success)}
.ev-src{margin:6px 0 8px}
.ev-src-ref{margin-bottom:3px}
.ev-quote{
margin:0;padding:8px 12px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
background:var(--surface-2);border-left:3px solid var(--line-strong);border-radius:0 6px 6px 0;
font-style:italic;
}
.ev-quote.hl{background:#FFF6D9;border-left-color:var(--warn)}
.m2-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:6px}
.m2-arrow{
display:grid;place-items:center;color:var(--muted-2);
border-left:1px dashed var(--line);border-right:1px dashed var(--line);
}
.m2-foot{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);
font-size:12.5px;
}
.m2-foot-left,.m2-foot-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m2-bridging{color:var(--ink-2);font-weight:500}
@media (max-width:1100px){
.m2-body{grid-template-columns:1fr}
.m2-nos{border-right:0;border-bottom:1px dashed var(--line)}
.m2-stages{grid-template-columns:1fr;gap:0}
.m2-arrow{display:none}
.m2-stage:first-of-type{border-bottom:1px dashed var(--line)}
.mapping-process .mp-steps{grid-template-columns:1fr}
.mp-step::after{display:none}
}
.map-card{
border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface);
display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:start;
position:relative;overflow:hidden;
}
.map-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.map-card.ok::before{background:var(--success)}
.map-card.warn::before{background:var(--warn)}
.map-card.danger::before{background:var(--danger)}
.map-card.muted::before{background:var(--muted-2)}
.map-ref{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:11.5px;letter-spacing:.04em;align-self:start;padding-top:2px}
.map-title{font-weight:600;color:var(--ink);font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.map-desc{grid-column:2;font-size:12.5px;color:var(--muted);line-height:1.45}
.map-bridge{grid-column:2;font-size:12px;color:var(--ink-2);background:var(--surface-2);border-radius:7px;padding:8px 10px;border:1px dashed var(--line)}
.matrix th, .matrix td{font-size:12.5px}
.matrix td.ok{color:var(--success)}
.matrix td.warn{color:var(--warn)}
.matrix td.danger{color:var(--danger)}
.matrix .pill-cell{display:inline-flex;align-items:center;gap:6px}
.matrix .pill-cell::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--success)}
.matrix td.warn .pill-cell::before{background:var(--warn)}
.matrix td.danger .pill-cell::before{background:var(--danger)}
.trace{display:grid;grid-template-columns:1fr 80px 1fr;gap:8px;align-items:flex-start}
.trace-col{display:flex;flex-direction:column;gap:8px}
.trace-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:2px}
.trace-chip{
background:var(--surface);border:1px solid var(--line);
border-radius:8px;padding:8px 11px;font-size:12.5px;color:var(--ink-2);
}
.trace-chip.ok{border-color:#B7D5C0;background:#F4FAF6;color:var(--success)}
.trace-chip.warn{border-color:#EAD9A6;background:#FBF2D9;color:var(--warn)}
.trace-chip.danger{border-color:#E2B7B0;background:#F7E2DD;color:var(--danger)}
.trace-col.arrows svg{width:100%;height:320px;fill:none;stroke:var(--line-strong);stroke-width:1.2}
/* Knowledge quiz
------------- */
.quiz-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:12px 0 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.quiz-stats > div > .strong{font-family:'Newsreader',serif;font-size:18px}
.quiz-stats .warn{color:var(--accent)}
/* Bridging
-------- */
.bridge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bridge-card{
background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;
}
.bridge-card.pri{background:linear-gradient(180deg,#E4F4EC 0%, #F2FAF5 70%);border-color:#9FD8B9}
.bridge-priority{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.bridge-list{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}
.bridge-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.bridge-progress{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bridge-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:var(--w)}
.bridge-actions{display:flex;gap:8px;margin-top:4px}
/* Decision
-------- */
.decision-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.decision-bullets{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.bullet{display:grid;grid-template-columns:60px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--success-bg);color:var(--success)}
.bullet.warn{background:var(--warn-bg);color:var(--warn)}
.bullet.muted{background:var(--surface-2);color:var(--muted)}
.b-num{font-family:'Newsreader',serif;font-weight:600;font-size:18px;text-align:center}
.decision-statement{
font-family:'Newsreader',serif;font-size:16px;line-height:1.55;color:var(--ink-2);
border-left:3px solid var(--accent);padding:6px 0 6px 14px;margin:6px 0 18px;
}
.decision-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opt{
display:flex;align-items:flex-start;gap:10px;text-align:left;
background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
}
.opt:hover{border-color:var(--line-strong)}
.opt.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(3,105,161,.08)}
.opt-tick{
width:18px;height:18px;border-radius:50%;background:var(--primary);flex:0 0 18px;
display:inline-block;position:relative;
}
.opt-tick::after{
content:'';position:absolute;inset:0;background:#fff;
-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/70% no-repeat;
}
.signoff{display:flex;gap:30px}
.decision-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* Certificate
----------- */
.cert{
background:#F4F8FC;
border:1px solid #BFD7EC;border-radius:12px;
padding:26px 28px;position:relative;
background-image:
radial-gradient(circle at 16px 16px, rgba(3,105,161,.05) 1px, transparent 2px),
radial-gradient(circle at 100% 100%, rgba(31,203,109,.06) 0, transparent 50%);
background-size:36px 36px, auto;
}
.cert::before{
content:'';position:absolute;inset:8px;border:1px dashed rgba(3,105,161,.18);border-radius:8px;pointer-events:none;
}
.cert-band{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cert-org{font-family:'Newsreader',serif;font-weight:600;font-size:16px;color:var(--primary)}
.cert-org.sm{font-size:12px}
.cert-system{font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.cert-title{font-family:'Newsreader',serif;font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-top:4px}
.cert-title.sm{font-size:14px}
.cert-sub{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.cert-name{font-family:'Newsreader',serif;font-style:italic;font-size:30px;color:var(--primary);letter-spacing:-.01em;border-bottom:1px dashed rgba(3,105,161,.18);padding-bottom:6px;margin-bottom:18px}
.cert-name.sm{font-size:18px;padding-bottom:2px;margin-bottom:8px}
.cert-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;font-size:12.5px}
.cert-meta.sm{grid-template-columns:1fr 1fr;font-size:11.5px;gap:4px;margin-top:auto}
.cert-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:14px;border-top:1px dashed rgba(3,105,161,.18)}
.cert-stamp{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);
border:2px solid var(--accent);padding:5px 10px;transform:rotate(-3deg);border-radius:4px;letter-spacing:.08em;
}
.cert-crest{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;background:#fff;border-radius:50%;border:1px solid #BFD7EC}
.cert-crest.mini{flex:0 0 28px;width:28px;height:28px;border-radius:6px}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cert.mini{padding:14px;background-image:none;display:flex;flex-direction:column}
.cert.mini::before{inset:5px}
/* NOS
--- */
.nos-strip{
display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.strip-stat{
background:var(--surface);border:1px solid var(--line);border-radius:10px;
padding:14px 16px;box-shadow:var(--shadow);
}
.strip-stat .strong.xl{font-family:'Newsreader',serif;font-size:24px}
.welding .ctx-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}
.ctx{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.ctx-k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600}
.ctx-v{font-size:12.5px;color:var(--ink-2)}
.units td:first-child{font-family:'JetBrains Mono',monospace;color:var(--muted);width:140px}
/* Microcred
--------- */
.mcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.mc-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.mc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}
/* Tracks
------ */
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.track{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.track-k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600;margin-bottom:6px}
.track-v{font-family:'Newsreader',serif;font-size:26px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
/* Donut / vision
------------- */
.donut{display:grid;place-items:center;height:200px}
.donut-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.donut-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px}
.vision-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
/* Audit
----- */
.audit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.audit li{display:grid;grid-template-columns:140px 160px 1fr;gap:14px;font-size:12.5px;color:var(--ink-2);padding:10px 0;border-bottom:1px dashed var(--line)}
.audit li:last-child{border-bottom:0}
.audit-time{color:var(--muted)}
.audit-actor{color:var(--ink);font-weight:500}
/* Classification Report
--------------------- */
.report-controls{
display:flex;justify-content:space-between;align-items:center;gap:14px;
background:var(--surface);border:1px solid var(--line);border-radius:10px;
padding:10px 14px;margin-bottom:14px;
}
.report-page{
background:transparent;display:flex;justify-content:center;
}
.rpt{
background:#fff;width:100%;max-width:850px;
border:1px solid var(--line);border-radius:8px;
box-shadow:var(--shadow-lg);
padding:36px 44px 30px;
color:#0E1A2A;font-family:'Inter',sans-serif;line-height:1.55;
position:relative;
}
.rpt-head{
display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;
padding-bottom:18px;border-bottom:2px solid var(--primary);margin-bottom:18px;
}
.rpt-mark{width:54px;height:54px;background:#F4F8FC;border-radius:50%;display:grid;place-items:center;border:1px solid #BFD7EC}
.rpt-org{font-family:'Newsreader',serif;font-weight:600;color:var(--primary);font-size:14px;letter-spacing:.02em}
.rpt-system{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.rpt-title{font-family:'Newsreader',serif;font-size:24px;font-weight:600;margin:0 0 2px;color:var(--ink);letter-spacing:-.01em}
.rpt-sub{font-size:13px;color:var(--ink-2)}
.rpt-meta{display:flex;flex-direction:column;gap:6px;text-align:right;font-size:12px;min-width:170px}
.rpt-meta > div > div{color:var(--ink);font-weight:500}
.rpt-banner{
display:flex;justify-content:space-between;align-items:center;
padding:14px 18px;border-radius:8px;margin-bottom:18px;
background:linear-gradient(135deg,#F4F8FC,#EAF3FB);
border:1px solid #BFD7EC;
}
.rpt-banner.band-ok{background:linear-gradient(135deg,#EAF7F0,#D8F0E2);border-color:#9FD8B9}
.rpt-banner.band-warn{background:linear-gradient(135deg,#FBF2D9,#F6E7B6);border-color:#E5CD90}
.rpt-banner.band-danger{background:linear-gradient(135deg,#F7E2DD,#F0CFC8);border-color:#E0AFA7}
.rpt-banner.band-info{background:linear-gradient(135deg,#DFEBF6,#C8D9EB);border-color:#A8C0D6}
.rpt-banner-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.rpt-banner-headline{font-family:'Newsreader',serif;font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-top:2px}
.rpt-banner-r{display:flex;gap:24px}
.rpt-banner-r > div{display:flex;flex-direction:column;gap:1px;text-align:right}
.rpt-banner-r .strong{font-family:'Newsreader',serif;font-size:18px;font-weight:600}
.rpt-section{margin-bottom:18px;page-break-inside:avoid}
.rpt-h2{
font-family:'Newsreader',serif;font-size:15px;font-weight:600;color:var(--primary);
margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line);
letter-spacing:.01em;
}
.rpt-p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rpt-kv{width:100%;border-collapse:collapse;font-size:12.5px}
.rpt-kv th, .rpt-kv td{
text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;
}
.rpt-kv th{
background:var(--surface-2);color:var(--muted);font-weight:500;
font-size:11px;text-transform:uppercase;letter-spacing:.08em;width:22%;
}
.rpt-kv td{color:var(--ink)}
.rpt-units{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.rpt-units th{
background:var(--surface-2);color:var(--muted);
font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;
}
.rpt-units td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.rpt-units tr:last-child td{border-bottom:0}
.rpt-pip{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-strong);vertical-align:middle;margin-right:2px}
.rpt-pip.ok{background:var(--success)}
.rpt-pip.warn{background:var(--warn)}
.rpt-pip.danger{background:var(--danger)}
.rpt-pip.muted{background:var(--muted-2)}
.rpt-final.ok strong{color:var(--success)}
.rpt-final.warn strong{color:var(--warn)}
.rpt-final.danger strong{color:var(--danger)}
.rpt-final.muted strong{color:var(--muted)}
.rpt-key{margin-top:6px;display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
.rpt-key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:var(--line-strong);vertical-align:middle}
.rpt-key i.ok{background:var(--success)}.rpt-key i.warn{background:var(--warn)}.rpt-key i.danger{background:var(--danger)}.rpt-key i.muted{background:var(--muted-2)}
.rpt-statement{
font-family:'Newsreader',serif;font-size:14.5px;line-height:1.65;color:var(--ink-2);
padding:14px 18px;border-radius:8px;border-left:4px solid var(--primary);
background:var(--surface-2);margin-bottom:10px;
}
.rpt-statement.rpt-ok{border-left-color:var(--success);background:#F0FAF4}
.rpt-statement.rpt-warn{border-left-color:var(--warn);background:#FBF2D9}
.rpt-statement.rpt-danger{border-left-color:var(--danger);background:#F7E2DD}
.rpt-statement.rpt-info{border-left-color:var(--info);background:#EAF3FB}
.rpt-outcome-bullets{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rpt-bullet{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:7px 10px;border-radius:6px;font-size:13px;background:var(--surface-2)}
.rpt-bullet.ok{background:#EAF7F0;color:var(--success)}
.rpt-bullet.warn{background:#FBF2D9;color:var(--warn)}
.rpt-bullet.danger{background:#F7E2DD;color:var(--danger)}
.rpt-bullet.muted{background:var(--surface-2);color:var(--muted)}
.rpt-bullet .b-num{font-family:'Newsreader',serif;font-weight:600;font-size:16px;text-align:center}
.rpt-signoff{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:8px}
.rpt-sig{padding-top:10px}
.rpt-sig-line{border-bottom:1px solid #444;height:32px;display:flex;align-items:flex-end;padding-bottom:2px;margin-bottom:6px}
.rpt-sig-glyph{font-family:'Brush Script MT','Lucida Handwriting',cursive;color:#0F4A8F;font-size:20px;font-style:italic}
.rpt-sig-name{font-weight:600;color:var(--ink);font-size:13px}
.rpt-sig-role{font-size:11.5px;color:var(--muted);font-style:italic}
.rpt-sig-date{font-size:11px;color:var(--muted);margin-top:4px}
.rpt-foot{
margin-top:24px;padding-top:14px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;align-items:flex-end;
font-size:11.5px;color:var(--muted);
}
/* KPI projection / actual tag chips
--------------------------------- */
.kpi-tag{
display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;
font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
background:var(--surface-3);color:var(--muted);vertical-align:middle;
}
.kpi-tag.actual{background:#EAF7F0;color:var(--success)}
.kpi-tag.target{background:#DFEBF6;color:var(--info)}
.kpi-tag.pilot{background:#FBF2D9;color:var(--warn)}
/* Mode banner — projection vs pilot
--------------------------------- */
.mode-banner{
display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
background:linear-gradient(135deg,#EAF3FB,#F4F8FC);
border:1px solid #BFD7EC;border-radius:10px;padding:12px 18px;
margin-bottom:6px;
}
.mb-pill{
display:inline-flex;align-items:center;gap:8px;
background:#fff;border:1px solid #BFD7EC;border-radius:99px;
padding:6px 12px;color:var(--primary);font-size:12.5px;white-space:nowrap;
}
.mb-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(3,105,161,.18)}
.mb-body{font-size:13px;color:var(--ink-2);line-height:1.55;max-width:none}
.mb-body .link{color:var(--primary);text-decoration:underline}
/* Flagship-case disclaimer banner
------------------------------ */
.flagship-disclaimer{
display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
background:linear-gradient(135deg,#FBF2D9,#FDF8E8);
border:1px solid #E5CD90;border-radius:10px;padding:12px 16px;margin-bottom:14px;
}
.fd-icon{
width:28px;height:28px;border-radius:50%;background:var(--warn);color:#fff;
display:grid;place-items:center;font-weight:700;font-style:italic;font-family:'Newsreader',serif;
flex:0 0 28px;
}
.fd-body .strong{color:var(--ink);font-size:13.5px}
.fd-body .muted.small{color:var(--ink-2);max-width:780px}
.fd-actions{display:flex;gap:6px;flex-wrap:wrap}
/* Language toggle (EN / AR / Bilingual)
------------------------------------ */
.lang-toggle{
display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:2px;
}
.lang-toggle .lt-btn{
background:transparent;border:0;padding:6px 12px;font-size:12.5px;color:var(--muted);
border-radius:6px;cursor:pointer;
}
.lang-toggle .lt-btn.active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 0 rgba(3,105,161,.08)}
/* Default both lang-en and lang-ar visible until a class is applied */
.outcome-doc.lang-en .lang-ar { display:none !important }
.outcome-doc.lang-ar .lang-en { display:none !important }
.outcome-doc.lang-ar { direction:rtl; text-align:right }
.outcome-doc.lang-ar .oc-foot { grid-template-columns:160px 1fr }
.outcome-doc.lang-ar .oc-head { grid-template-columns:auto 1fr 48px }
.outcome-doc.lang-ar .oc-ref{text-align:left}
.outcome-doc.lang-bi { /* show both */ }
.outcome-doc.lang-bi .lang-ar { background:linear-gradient(180deg, transparent 0, rgba(3,105,161,.025) 100%); border-top:1px dashed var(--line); padding-top:10px; margin-top:6px }
.outcome-doc.lang-bi .oc-recipient.lang-ar, .outcome-doc.lang-bi .oc-salutation.lang-ar, .outcome-doc.lang-bi .oc-section-head.lang-ar, .outcome-doc.lang-bi .oc-body.lang-ar > p, .outcome-doc.lang-bi .oc-actions.lang-ar, .outcome-doc.lang-bi .oc-close.lang-ar, .outcome-doc.lang-bi .oc-foot-meta .lang-ar {padding-right:4px}
.outcome-doc.lang-bi .oc-title.lang-ar{font-family:'Newsreader',serif;font-size:22px;margin-top:-12px;margin-bottom:18px;color:var(--muted)}
.outcome-doc.lang-bi .oc-head .oc-header-text .lang-ar, .outcome-doc.lang-bi .oc-ref .lang-ar{font-size:12px;color:var(--muted)}
.outcome-doc.lang-bi .oc-recipient.lang-ar{font-size:12.5px;color:var(--muted)}
.outcome-doc.lang-bi .oc-watermark.lang-ar{display:none}
.outcome-doc.lang-bi .oc-encouragement.lang-ar{margin-top:-10px}
/* Same pattern for classification report */
.rpt.lang-en .lang-ar { display:none !important }
.rpt.lang-ar .lang-en { display:none !important }
.rpt.lang-ar { direction:rtl; text-align:right }
.rpt.lang-ar .rpt-head { grid-template-columns:auto 1fr 170px }
.rpt.lang-ar .rpt-meta { text-align:left }
.rpt.lang-ar .rpt-banner-r { text-align:left }
.rpt.lang-bi .lang-ar { color:var(--muted); font-size:.95em; margin-top:2px; padding-right:4px; }
.rpt.lang-bi .rpt-h2.lang-ar{font-size:13px;margin-top:-4px;margin-bottom:6px;color:var(--muted);border-bottom:0;padding-bottom:0}
.rpt.lang-bi .rpt-banner-headline.lang-ar{font-size:15px;margin-top:2px}
.rpt.lang-bi .rpt-statement .lang-ar{background:transparent;padding:8px 0 0;border-left:0;border-top:1px dashed var(--line);margin-top:8px;font-size:13px;color:var(--ink-2)}
/* Print styles for bilingual */
@media print {
.rpt.lang-bi .lang-ar, .outcome-doc.lang-bi .lang-ar { break-inside: avoid }
}
/* Outcome statement (applicant-facing letter)
------------------------------------------ */
.outcome-page{display:flex;justify-content:center}
.outcome-doc{
background:#fff;width:100%;max-width:780px;
border:1px solid var(--line);border-radius:8px;
box-shadow:var(--shadow-lg);
padding:54px 60px 36px;
color:#0E1A2A;font-family:'Inter',sans-serif;font-size:14px;line-height:1.65;
position:relative;overflow:hidden;
}
.oc-watermark{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%) rotate(-22deg);
font-family:'Newsreader',serif;font-size:110px;font-weight:700;
color:rgba(3,105,161,.04);letter-spacing:.08em;white-space:nowrap;pointer-events:none;z-index:0;
}
.outcome-doc.oc-v-conditional .oc-watermark{color:rgba(183,121,31,.05)}
.outcome-doc.oc-v-approval .oc-watermark{color:rgba(31,157,91,.05)}
.outcome-doc.oc-v-hold .oc-watermark{color:rgba(180,57,45,.05)}
.outcome-doc > *{position:relative;z-index:1}
.oc-head{
display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
padding-bottom:18px;border-bottom:2px solid var(--primary);margin-bottom:22px;color:var(--primary);
}
.outcome-doc.oc-v-conditional .oc-head{border-bottom-color:var(--warn);color:var(--warn)}
.outcome-doc.oc-v-hold .oc-head{border-bottom-color:var(--danger);color:var(--danger)}
.oc-crest{width:48px;height:48px;display:grid;place-items:center;color:inherit}
.oc-header-text{font-family:'Newsreader',serif;font-size:13px;color:var(--ink);font-weight:500;line-height:1.45}
.oc-ref{text-align:right;font-size:11.5px;display:flex;flex-direction:column;gap:2px;color:var(--ink-2)}
.oc-title{
font-family:'Newsreader',serif;font-size:26px;font-weight:600;color:var(--ink);
letter-spacing:-.01em;margin-bottom:18px;
}
.oc-recipient{font-size:13.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.55}
.oc-badge-row{margin-bottom:22px}
.oc-badge{
display:inline-block;padding:8px 16px;border-radius:99px;font-weight:600;font-size:13px;
background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
.oc-badge.band-ok{background:#EAF7F0;color:var(--success);border-color:#9FD8B9}
.oc-badge.band-warn{background:#FBF2D9;color:var(--warn);border-color:#E5CD90}
.oc-badge.band-danger{background:#F7E2DD;color:var(--danger);border-color:#E0AFA7}
.oc-badge.band-info{background:#DFEBF6;color:var(--info);border-color:#A8C0D6}
.oc-salutation{font-family:'Newsreader',serif;font-size:16px;color:var(--ink);margin:0 0 12px}
.oc-body p{font-size:14px;color:var(--ink-2);line-height:1.75;margin:0 0 14px}
.oc-body strong{color:var(--ink)}
.oc-section-head{font-family:'Newsreader',serif;font-size:15px;font-weight:600;color:var(--primary);margin:18px 0 8px;letter-spacing:.01em}
.outcome-doc.oc-v-conditional .oc-section-head{color:var(--warn)}
.outcome-doc.oc-v-hold .oc-section-head{color:var(--danger)}
.oc-actions{margin:0 0 18px;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.oc-actions li{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.oc-encouragement{
display:flex;align-items:center;gap:14px;
background:linear-gradient(135deg,#FFF7E2,#FBF2D9);
border:1px solid #E5CD90;border-radius:10px;padding:14px 18px;margin:14px 0 18px;color:var(--warn);
}
.oc-enc-icon{width:30px;height:30px;background:#fff;border:1px solid #E5CD90;border-radius:50%;display:grid;place-items:center;color:var(--warn);flex:0 0 30px}
.oc-enc-icon + div{color:var(--ink-2)}
.oc-close p{font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:0 0 18px}
.oc-foot{display:grid;grid-template-columns:1fr 160px;gap:30px;align-items:flex-end;margin-top:24px;padding-top:14px}
.oc-sig{padding-top:10px}
.oc-sig-line{border-bottom:1px solid #444;height:36px;display:flex;align-items:flex-end;padding-bottom:2px;margin-bottom:6px}
.oc-sig-glyph{font-family:'Brush Script MT','Lucida Handwriting',cursive;color:#0F4A8F;font-size:22px;font-style:italic}
.oc-sig-name{font-weight:600;color:var(--ink);font-size:13px}
.oc-sig-role{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:2px}
.oc-stamp-zone{display:grid;place-items:center}
.oc-stamp{
width:140px;height:140px;border-radius:50%;
border:3px double #0F4A8F;display:grid;place-items:center;
background:radial-gradient(ellipse at center, rgba(15,74,143,.05) 0%, transparent 70%);
transform:rotate(-6deg);color:#0F4A8F;
}
.outcome-doc.oc-v-conditional .oc-stamp{border-color:var(--warn);color:var(--warn);background:radial-gradient(ellipse at center,rgba(183,121,31,.06) 0%,transparent 70%)}
.outcome-doc.oc-v-hold .oc-stamp{border-color:var(--danger);color:var(--danger);background:radial-gradient(ellipse at center,rgba(180,57,45,.06) 0%,transparent 70%)}
.outcome-doc.oc-v-approval .oc-stamp{border-color:var(--success);color:var(--success);background:radial-gradient(ellipse at center,rgba(31,157,91,.06) 0%,transparent 70%)}
.oc-stamp-inner{text-align:center;font-family:'Newsreader',serif;font-weight:600;font-size:11px;padding:8px;letter-spacing:.04em}
.oc-stamp-arabic{font-size:14px;margin-bottom:4px;direction:rtl}
.oc-stamp-eng{font-size:9.5px;letter-spacing:.12em;color:inherit;margin-bottom:6px;font-weight:500}
.oc-stamp-system{font-size:8.5px;letter-spacing:.08em;color:inherit;text-transform:uppercase;margin-bottom:4px;line-height:1.1}
.oc-stamp-date{font-family:'JetBrains Mono',monospace;font-size:9px;color:inherit;opacity:.7}
.oc-foot-meta{display:flex;justify-content:space-between;margin-top:28px;padding-top:14px;border-top:1px solid var(--line);gap:14px;flex-wrap:wrap}
/* Bilingual mode — adds Arabic text alongside English (mock) */
.outcome-doc.bilingual::after{
content:'هذا البيان متاح أيضاً باللغة العربية. للاطلاع على النسخة العربية، يُرجى التواصل مع نقطة دعم المتقدمين على support.qbclear.om';
display:block;padding:14px 18px;background:#F4F8FC;border:1px dashed #BFD7EC;border-radius:10px;
margin-top:18px;font-size:13.5px;color:var(--ink-2);direction:rtl;text-align:right;line-height:1.7;
}
/* Print styles
------------ */
@media print {
@page { size: A4; margin: 14mm 14mm 16mm 14mm; }
html, body { background:#fff !important; }
.sidebar, .topbar, .subnav, .report-controls, .footer, .applicant-head, .nav, .footer { display:none !important; }
.main { display:block !important; }
.view { padding:0 !important; }
.app { display:block !important; }
.page-head, .applicant > .page-head { display:none !important; }
.rpt {
box-shadow:none !important;border:0 !important;
width:auto !important;max-width:none !important;padding:0 !important;
}
.rpt-section { break-inside: avoid; page-break-inside: avoid; }
.rpt-h2 { break-after: avoid; }
.rpt-units, .rpt-kv { font-size:11px !important; }
.rpt-banner { break-inside: avoid; }
.rpt-foot { position: relative; }
}
/* Public intake portal
------------------- */
[hidden]{display:none !important}
body.app-fullscreen .sidebar, body.app-fullscreen .topbar, body.app-fullscreen .footer { display:none !important; }
body.app-fullscreen .app { grid-template-columns: 1fr !important; }
body.app-fullscreen .view { padding:0 !important; }
.apply-shell{ min-height:100vh; background:linear-gradient(180deg,#F4F8FC 0%, #FFFFFF 380px); display:flex; flex-direction:column }
.apply-shell[data-tenant="mol"] { background:linear-gradient(180deg,#F2F9F4 0%, #FFFFFF 380px); }
.apply-topbar{
display:flex;justify-content:space-between;align-items:center;
padding:14px 36px;background:rgba(255,255,255,.85);
backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.apply-brand{display:flex;align-items:center;gap:14px}
.apply-brand-logo{height:36px;width:auto;display:block;object-fit:contain}
.apply-brand-divider{width:1px;height:30px;background:var(--line-strong);align-self:center}
.apply-brand-name{font-family:'Newsreader',serif;font-weight:600;font-size:15px;color:var(--ink);line-height:1.2}
.apply-brand-sub{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.apply-controls{display:flex;align-items:center;gap:16px}
.apply-tenant-toggle{display:flex;align-items:center;gap:6px;font-size:12px}
.apply-tenant-toggle select{background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px;color:var(--ink-2);min-width:240px}
.apply-lang{display:inline-flex;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);padding:2px}
.apply-lang .ttab{background:transparent;border:0;padding:4px 10px;font-size:12px;color:var(--muted);border-radius:5px}
.apply-lang .ttab.active{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 0 rgba(3,105,161,.06)}
.apply-hero{padding:48px 36px 28px;max-width:1100px;margin:0 auto;width:100%}
.apply-h1{font-family:'Newsreader',serif;font-size:36px;font-weight:600;margin:0 0 12px;letter-spacing:-.02em;color:var(--ink);max-width:760px;line-height:1.15}
.apply-lede{font-size:15px;color:var(--ink-2);max-width:780px;margin:0 0 22px;line-height:1.55}
.apply-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.apply-pillar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
.pillar-num{font-family:'Newsreader',serif;font-weight:600;font-size:20px;color:var(--primary);width:32px;text-align:center}
.apply-shell[data-tenant="mol"] .apply-h1, .apply-shell[data-tenant="mol"] .pillar-num{ color:#0F4A2B; }
.apply-wizard{max-width:1100px;margin:0 auto;width:100%;padding:0 36px 48px;display:flex;flex-direction:column;gap:14px}
.apply-steps{list-style:none;display:flex;align-items:center;gap:0;padding:0;margin:0 0 8px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.astep{flex:1;display:flex;align-items:center;gap:10px;padding:14px 16px;color:var(--muted);font-size:13px;position:relative;border-right:1px solid var(--line)}
.astep:last-child{border-right:0}
.astep-num{width:24px;height:24px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-family:'Newsreader',serif;font-weight:600;color:var(--muted);font-size:12px}
.astep.active{background:linear-gradient(180deg,#F4F8FC,#FFFFFF);color:var(--ink)}
.astep.active .astep-num{background:var(--primary);color:#fff}
.astep.done{color:var(--success)}
.astep.done .astep-num{background:var(--success);color:#fff}
.apply-shell[data-tenant="mol"] .astep.active .astep-num{ background:#0F4A2B; }
.apply-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 30px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:18px}
.apply-card-head .apply-h2{font-family:'Newsreader',serif;font-size:22px;font-weight:600;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}
.apply-card-head p{font-size:14px;color:var(--muted);margin:0;max-width:740px;line-height:1.6}
.upload-zone{
display:flex;align-items:center;gap:18px;padding:30px;
border:2px dashed var(--line-strong);border-radius:14px;background:var(--surface-2);
cursor:pointer;transition:all .15s;
}
.upload-zone:hover{border-color:var(--primary);background:#F4F8FC}
.upload-zone.uploaded{border-style:solid;border-color:var(--success);background:#EAF7F0}
.uz-icon{width:64px;height:64px;background:#fff;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--primary);flex:0 0 64px}
.upload-zone.uploaded .uz-icon{color:var(--success);border-color:var(--success)}
.uz-text .strong{font-size:15px;color:var(--ink);font-weight:500}
.uz-text .link{color:var(--primary);text-decoration:underline}
.ocr-running{display:flex;flex-direction:column;gap:8px;padding:14px 18px;background:#F4F8FC;border:1px solid #BFD7EC;border-radius:10px}
.ocr-bar{height:6px;background:rgba(3,105,161,.12);border-radius:99px;overflow:hidden;position:relative}
.ocr-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#1FCB6D);border-radius:99px}
.ocr-msg{font-size:13px;color:var(--ink-2);font-family:'JetBrains Mono',monospace}
.ocr-result{display:flex;flex-direction:column;gap:10px}
.ocr-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ocr-card-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ocr-fields-mini{width:100%;border-collapse:collapse;font-size:12.5px}
.ocr-fields-mini td{padding:6px 14px;border-bottom:1px solid var(--line)}
.ocr-fields-mini tr:last-child td{border-bottom:0}
.ocr-fields-mini td:first-child{color:var(--muted);width:30%}
.ocr-fields-mini td:nth-child(2){color:var(--ink)}
.conf-mini{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);width:50px;text-align:right}
.apply-nav{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed var(--line);gap:14px;flex-wrap:wrap}
.apply-nav.center{justify-content:center}
.apply-nav .btn.primary{padding:9px 22px}
.review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rc-head{padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);font-weight:600}
.ai-map{background:linear-gradient(180deg,#FFFFFF,#F4F8FC);border:1px solid #BFD7EC;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px}
.aim-head{display:flex;align-items:center;gap:14px}
.aim-pulse{width:14px;height:14px;border-radius:50%;background:#1FCB6D;box-shadow:0 0 0 6px rgba(31,203,109,.18);animation:aim-pulse 1.4s infinite}
@keyframes aim-pulse{0%,100%{box-shadow:0 0 0 4px rgba(31,203,109,.18)} 50%{box-shadow:0 0 0 10px rgba(31,203,109,.05)}}
.aim-trail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aim-trail li{display:flex;gap:10px;font-size:13px;color:var(--muted);align-items:center}
.aim-trail li.done{color:var(--ink-2)}
.aim-tick{display:inline-block;width:18px;text-align:center}
.aim-trail li.done .aim-tick{color:var(--success)}
.aim-result{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.aim-banner{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:10px}
.aim-banner.band-ok{background:#EAF7F0;border:1px solid #9FD8B9}
.aim-banner.band-warn{background:#FBF2D9;border:1px solid #E5CD90}
.aim-banner-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.aim-banner-head{font-family:'Newsreader',serif;font-size:18px;font-weight:600;color:var(--ink)}
.aim-bullets{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.apply-card-confirm{align-items:center;text-align:center;padding-top:36px}
.confirm-icon{margin-bottom:6px}
.confirm-ref{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;width:100%;max-width:640px;text-align:left}
.confirm-ref > div{display:flex;flex-direction:column;gap:2px}
.apply-foot{padding:18px 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;background:#fff}
@media (max-width:900px){
.apply-pillars{grid-template-columns:1fr 1fr}
.apply-steps{flex-wrap:wrap}
.astep{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--line)}
.review-cards{grid-template-columns:1fr}
.confirm-ref{grid-template-columns:1fr}
}
/* Footer
------ */
.footer{
padding:14px 36px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
margin-top:24px;
}
/* Seg control
----------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:2px}
.seg-btn{background:transparent;border:0;padding:5px 10px;font-size:12px;color:var(--muted);border-radius:6px}
.seg-btn.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 rgba(3,105,161,.06);font-weight:500}
/* Misc
---- */
.back{display:flex;align-items:center;gap:10px;color:var(--muted)}
/* Hamburger + mobile drawer
------------------------- */
.hamburger{
display:none;background:transparent;border:1px solid var(--line);border-radius:7px;
width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
cursor:pointer;margin:0 4px 0 12px;flex:0 0 38px;
}
.hamburger span{display:block;width:18px;height:2px;background:var(--ink-2);border-radius:2px}
.mobile-backdrop{
display:none;position:fixed;inset:0;background:rgba(11,26,42,.5);z-index:39;
opacity:0;pointer-events:none;transition:opacity .18s;
}
body.sidebar-open .mobile-backdrop{opacity:1;pointer-events:auto}
/* Responsive
---------- */
@media (max-width:1280px){
.kpis{grid-template-columns:repeat(3,1fr)}
.map-grid{grid-template-columns:1fr}
.nos-strip{grid-template-columns:repeat(3,1fr)}
.vision-grid{grid-template-columns:repeat(3,1fr)}
.cert-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
.grid-2,.grid-2.wide-left{grid-template-columns:1fr}
.ah-stats{gap:18px}
.mcgrid,.track-grid{grid-template-columns:1fr}
.docs-grid{grid-template-columns:1fr}
.docs-canvas{border-right:0;border-bottom:1px solid var(--line)}
.docs-meta{gap:14px;flex-wrap:wrap}
}
@media (max-width:840px){
/* Sidebar becomes a drawer */
.hamburger{display:inline-flex}
.mobile-backdrop{display:block}
.app{
grid-template-columns:1fr;
grid-template-areas:"header" "main";
}
.sidebar{
position:fixed;top:64px;left:-280px;width:264px;height:calc(100vh - 64px);
transition:left .22s ease;z-index:40;
box-shadow:8px 0 28px -10px rgba(11,26,42,.4);
}
body.sidebar-open .sidebar{left:0}
/* Topbar compacts */
.topbar{
grid-template-columns:auto auto 1fr auto;
gap:8px;padding:0 12px 0 0;
}
.topbar-brand{padding:8px 14px;height:64px;border-right:0}
.topbar-brand .brand-logo{height:32px}
.crumb{display:none}
.search{display:none}
.topbar-right{gap:6px}
.iconbtn[title="Switch language"]{display:none}
.user-meta{display:none}
.avatar{margin-left:4px}
/* Page padding shrinks */
.view{padding:18px 14px;overflow-x:hidden;min-width:0}
body{overflow-x:hidden}
.page-head{flex-direction:column;align-items:flex-start;gap:10px}
.page-actions{width:100%;flex-wrap:wrap}
.h1{font-size:24px}
.lede{font-size:13px}
/* KPI stack */
.kpis{grid-template-columns:1fr 1fr;gap:10px}
.kpi-value{font-size:26px}
/* Card pads tighter */
.card{padding:14px}
.card-head{flex-direction:column;align-items:flex-start;gap:8px}
/* Tables horizontal-scroll wrap — only wide tables (apps list, verification queue) */
.card.flush{overflow-x:auto}
.card.flush .table.apps, .card.flush .table.nos, .card.flush .table{min-width:720px}
/* In-card narrow tables stay fluid */
.table.tight, .rpt-kv, .rpt-units, .matrix{min-width:0;width:100%}
/* Tabs scroll horizontally */
.tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{height:3px}
.tab{white-space:nowrap;flex-shrink:0}
/* Toolbar (filters) wraps */
.toolbar{flex-direction:column;gap:8px}
.filter-grp{flex-wrap:wrap}
/* Pager wraps */
.pager{flex-wrap:wrap}
/* Applicant header stacks */
.applicant-head{flex-direction:column;align-items:flex-start;padding:14px}
.ah-portrait{width:64px;height:64px;font-size:24px;border-radius:14px;flex:0 0 64px}
.ah-name{gap:6px}
.h1#ahName, .applicant-head .h1{font-size:22px}
.ah-sub{gap:8px;flex-wrap:wrap;font-size:12px}
.ah-stats{gap:14px;flex-wrap:wrap;width:100%}
.ah-stats > div{min-width:140px}
.ah-stat{font-size:16px}
/* Subnav scroll */
.subnav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.subnav-item{white-space:nowrap;flex-shrink:0;padding:9px 12px;font-size:12.5px}
/* Documents tab */
.docs-layout{grid-template-columns:1fr}
.docs-list{border-right:0;border-bottom:1px solid var(--line);max-height:280px;overflow-y:auto}
.docs-head{grid-template-columns:1fr;padding:14px 16px;gap:10px}
.docs-meta{flex-wrap:wrap;gap:10px}
.docs-actions{flex-wrap:wrap}
/* OCR doc canvas + scan paper */
.scan-wrap{padding:16px}
.scan-doc{padding:22px 18px}
.cg-name{font-size:24px}
.cg-sigs{flex-direction:column;gap:12px}
.cg-sig-line{width:140px}
.cg-codes{flex-direction:column;gap:6px}
.cg-row{flex-wrap:wrap;justify-content:flex-start;gap:6px}
/* Mapping cards */
.m2-body{grid-template-columns:1fr}
.m2-nos{border-right:0;border-bottom:1px dashed var(--line)}
.m2-stages{grid-template-columns:1fr;gap:0}
.m2-arrow{display:none}
.m2-stage:first-of-type{border-bottom:1px dashed var(--line)}
/* Mapping process stepper stacks */
.mapping-process .mp-steps{grid-template-columns:1fr}
.mp-step::after{display:none}
/* Bridging grid */
.bridge-grid{grid-template-columns:1fr}
/* Decision options */
.decision-options{grid-template-columns:1fr}
.signoff{flex-direction:column;gap:14px}
.decision-foot{flex-direction:column;align-items:flex-start;gap:14px}
/* Cert preview */
.cert{padding:18px 18px}
.cert-name{font-size:22px}
.cert-meta{grid-template-columns:1fr 1fr;gap:10px}
/* NOS strip */
.nos-strip{grid-template-columns:repeat(2,1fr)}
/* Cert grid */
.cert-grid{grid-template-columns:1fr}
/* Microcred + tracks */
.mcgrid{grid-template-columns:1fr}
.track-grid{grid-template-columns:1fr}
/* Vision indicators */
.vision-grid{grid-template-columns:1fr 1fr}
/* Letter (verification reading panel) */
.letter{grid-template-columns:1fr}
.letter-side{border-left:0;border-top:1px dashed var(--line);padding-left:0;padding-top:14px}
/* Trace */
.trace{grid-template-columns:1fr;gap:14px}
.trace-col.arrows{display:none}
/* Audit list cols */
.audit li{grid-template-columns:110px 1fr;gap:8px}
.audit-actor{grid-column:2}
/* History trail */
#historyList li{grid-template-columns:1fr;gap:4px}
/* Outcome statement scales */
.outcome-doc{padding:22px 18px}
.oc-title{font-size:20px}
.oc-head{grid-template-columns:1fr;gap:10px;text-align:center}
.oc-ref{text-align:left;flex-direction:row;gap:14px;flex-wrap:wrap}
.oc-foot{grid-template-columns:1fr;gap:18px}
.oc-stamp-zone{justify-self:flex-start}
.oc-actions{padding-left:14px}
/* Classification report scales */
.rpt{padding:22px 18px}
.rpt-head{grid-template-columns:1fr;gap:10px;text-align:left}
.rpt-mark{margin:0 auto 4px;width:42px;height:42px}
.rpt-meta{text-align:left;flex-direction:row;gap:12px;flex-wrap:wrap}
.rpt-banner{flex-direction:column;align-items:flex-start;gap:10px}
.rpt-banner-r{gap:14px;flex-wrap:wrap}
.rpt-kv th, .rpt-kv td{padding:6px 8px;font-size:12px}
.rpt-kv tr{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rpt-kv th{width:auto}
.rpt-units{font-size:11px;min-width:auto}
.rpt-units th, .rpt-units td{padding:5px 6px}
.rpt-statement{font-size:13.5px;padding:12px 14px}
.rpt-signoff{grid-template-columns:1fr;gap:16px}
.rpt-foot{flex-direction:column;align-items:flex-start;gap:8px}
/* Apply portal */
.apply-topbar{padding:10px 14px;flex-wrap:wrap;gap:10px}
.apply-brand{gap:10px;flex:1 1 auto;min-width:200px}
.apply-brand-logo{height:32px}
.apply-brand-divider{display:none}
.apply-controls{gap:8px;flex-wrap:wrap}
.apply-hero{padding:24px 14px 18px}
.apply-h1{font-size:24px}
.apply-lede{font-size:13px}
.apply-pillars{grid-template-columns:1fr;gap:10px}
.apply-wizard{padding:0 14px 28px;gap:10px}
.apply-steps{flex-direction:row;overflow-x:auto;flex-wrap:nowrap}
.astep{flex:0 0 auto;padding:10px 12px;border-right:1px solid var(--line);border-bottom:0;white-space:nowrap}
.astep:last-child{border-right:0}
.apply-card{padding:18px}
.apply-card-head .apply-h2{font-size:18px}
.apply-nav{flex-direction:column;align-items:stretch;gap:10px}
.apply-nav .btn{width:100%;justify-content:center}
.upload-zone{flex-direction:column;text-align:center;gap:10px;padding:20px}
.review-cards{grid-template-columns:1fr}
/* Report / outcome controls bar wraps */
.report-controls{flex-direction:column;align-items:stretch;gap:10px}
.report-controls .row.gap{flex-wrap:wrap}
/* Quiz stats */
.quiz-stats{grid-template-columns:1fr 1fr;gap:10px}
/* Trace + mapping process: arrows hidden already */
/* Bilingual report sections: stack cleanly */
.rpt.lang-bi .rpt-banner-r{flex-direction:column;gap:6px;align-items:flex-start}
/* Mode banner stacks */
.mode-banner{grid-template-columns:1fr;gap:8px;padding:10px 14px}
/* Flagship disclaimer */
.flagship-disclaimer{grid-template-columns:1fr;gap:8px}
.fd-actions{flex-wrap:wrap}
/* Pages grid in handbook docs */
.pages{grid-template-columns:repeat(6,1fr)}
/* Letter meta wraps */
.letter-meta{flex-direction:column;align-items:flex-start;gap:4px}
/* Trace SVG hidden in mobile */
.trace-col.arrows svg{display:none}
/* Passport biographic page */
.pp-grid{grid-template-columns:1fr;gap:10px}
.pp-photo{height:120px;width:90px;margin:0 auto}
.pp-fields{grid-template-columns:1fr 1fr;font-size:11px}
/* Confirmation reference */
.confirm-ref{grid-template-columns:1fr}
}
@media (max-width:520px){
.kpis{grid-template-columns:1fr}
.vision-grid{grid-template-columns:1fr}
.nos-strip{grid-template-columns:1fr 1fr}
.pp-fields{grid-template-columns:1fr}
.rpt-kv tr{grid-template-columns:1fr}
.pages{grid-template-columns:repeat(5,1fr)}
.ah-name{flex-direction:column;align-items:flex-start;gap:6px}
}