:root{--q:#3157d5;--q2:#6d5dfb;--nav:#111827;--bg:#f4f7fb;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--red:#dc2626;--amber:#d97706;--green:#16a34a;--blue:#2563eb;--shadow:0 12px 38px rgba(15,23,42,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:var(--bg)}body{min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.icon{width:20px;height:20px;display:inline-block;vertical-align:middle}.boot{min-height:100vh;display:grid;place-items:center;gap:9px;text-align:center;color:var(--muted)}.boot>span{display:block;font-size:13px}.boot-mark{width:52px;height:52px;border-radius:16px;background:var(--q);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900;margin:0 auto 8px}.boot-error{min-height:100vh;display:grid;place-items:center;padding:24px}.boot-error>div{max-width:560px;background:#fff;padding:28px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.boot-error a{display:inline-block;background:var(--q);color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:800}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,1fr) minmax(440px,1fr);background:#fff}.login-brand{background:linear-gradient(145deg,#111827,#1e3a8a 58%,#312e81);color:#fff;padding:9vw 8vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-160px;bottom:-150px}.login-logo{width:62px;height:62px;border-radius:18px;background:var(--q2);display:grid;place-items:center;margin-bottom:28px}.login-brand h1{font-size:44px;line-height:1.08;margin:0 0 18px;max-width:620px}.login-brand p{color:#cbd5e1;max-width:560px;font-size:16px;line-height:1.7}.login-points{display:grid;gap:10px;margin-top:24px}.login-points div{display:flex;gap:10px;align-items:center;color:#e2e8f0;font-size:14px}.login-panel{display:grid;place-items:center;padding:40px}.login-card{width:min(430px,100%)}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:11px;color:var(--q);font-weight:900}.login-card h2{font-size:30px;margin:8px 0 8px}.login-card>p{margin:0 0 30px;color:var(--muted);line-height:1.6}.field{display:grid;gap:7px;margin-bottom:16px}.field label{font-weight:800;font-size:13px}.field input,.field select,.field textarea{width:100%;border:1px solid #cbd5e1;border-radius:11px;padding:12px 13px;background:#fff;outline:none;transition:.15s}.field textarea{min-height:108px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--q2);box-shadow:0 0 0 3px rgba(49,87,213,.14)}.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--q);color:#fff}.btn-primary:hover{background:#2447b8}.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--line)}.btn-danger{background:#fff1f2;color:#b91c1c;border:1px solid #fecdd3}.btn-full{width:100%}.login-note{margin-top:22px;padding:13px 14px;border-radius:12px;background:#eef2ff;color:#3730a3;font-size:12px;line-height:1.5}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:var(--nav);color:#cbd5e1;padding:20px 14px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:12px;padding:5px 8px 24px}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--q);color:#fff;display:grid;place-items:center}.brand b{color:#fff}.brand small{display:block;color:#64748b;font-size:10px;margin-top:1px}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:#64748b;font-weight:900;padding:10px 12px 7px}.nav{display:grid;gap:4px}.nav button{background:transparent;border:0;color:#cbd5e1;text-align:left;border-radius:9px;padding:10px 11px;display:flex;gap:10px;align-items:center;font-size:13px}.nav button:hover{background:#172033;color:#fff}.nav button.active{background:#1e3a8a;color:#fff}.nav button .icon{width:18px;height:18px}.sidebar-spacer{flex:1}.side-profile{border-top:1px solid #243044;padding:15px 8px 3px;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center}.avatar{width:34px;height:34px;border-radius:10px;background:#1e293b;display:grid;place-items:center;font-weight:900;color:#bfdbfe}.side-profile b{font-size:12px;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-profile small{font-size:10px;color:#64748b}.icon-btn{width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:#94a3b8;display:grid;place-items:center}.icon-btn:hover{background:#1e293b;color:#fff}.main{min-width:0}.topbar{height:72px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}.top-title b{display:block;font-size:15px}.top-title small{font-size:11px;color:var(--muted)}.mobile-menu{display:none}.content{padding:28px;max-width:1440px;margin:0 auto}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}.page-head h1{font-size:26px;margin:0 0 5px}.page-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.cards{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:13px;margin-bottom:24px}.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px;min-height:105px}.metric .label{font-size:11px;color:var(--muted);font-weight:700;min-height:30px}.metric strong{display:block;font-size:27px;margin-top:7px}.metric.danger strong{color:var(--red)}.metric.warn strong{color:var(--amber)}.metric.good strong{color:var(--green)}.grid-2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 3px 15px rgba(15,23,42,.025)}.panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head h3{font-size:14px;margin:0}.panel-head small{color:var(--muted)}.panel-body{padding:18px 20px}.attention{display:grid}.attention-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid #f1f5f9;align-items:center}.attention-item:last-child{border-bottom:0}.risk-dot{width:8px;height:36px;border-radius:5px;background:var(--amber)}.risk-dot.high{background:var(--red)}.attention-item b{font-size:13px;display:block;margin-bottom:4px}.attention-meta{font-size:11px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}.link-btn{background:transparent;border:0;color:var(--q);font-weight:800;font-size:12px;padding:7px}.empty{padding:42px 22px;text-align:center;color:var(--muted)}.empty .icon{width:35px;height:35px;color:#94a3b8;margin-bottom:8px}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:15px}.search{position:relative;flex:1;max-width:480px}.search .icon{position:absolute;left:11px;top:10px;color:#94a3b8;width:18px;height:18px}.search input{width:100%;padding:10px 12px 10px 37px;border:1px solid var(--line);border-radius:10px;background:#fff}.filter-select{padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:850px}.table th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:#f8fafc}.table td{padding:14px;border-bottom:1px solid #f1f5f9;font-size:12px;vertical-align:middle}.table tr:hover td{background:#f8faff}.table .title{font-weight:800;color:var(--text);font-size:12px}.table .sub{font-size:10px;color:var(--muted);margin-top:4px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:850;background:#f1f5f9;color:#475569}.badge.red{background:#fef2f2;color:#b91c1c}.badge.amber{background:#fffbeb;color:#b45309}.badge.green{background:#f0fdf4;color:#15803d}.badge.blue{background:#eff6ff;color:#1d4ed8}.badge.teal{background:#eef2ff;color:#3157d5}.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.36);z-index:49}.drawer{position:fixed;right:0;top:0;height:100vh;width:min(720px,94vw);background:#fff;z-index:50;box-shadow:-20px 0 50px rgba(15,23,42,.16);display:flex;flex-direction:column}.drawer-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.drawer-head h2{font-size:18px;margin:0}.drawer-body{padding:22px;overflow:auto;flex:1}.drawer-foot{padding:15px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;background:#fff}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:22px}.step{height:5px;border-radius:4px;background:#e2e8f0}.step.active{background:var(--q)}.form-title{font-size:19px;margin:0 0 5px}.form-help{font-size:12px;color:var(--muted);margin:0 0 22px}.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;text-align:left}.choice.selected{border-color:var(--q);background:#eef2ff;box-shadow:0 0 0 2px rgba(49,87,213,.10)}.choice b{font-size:12px}.choice small{display:block;color:var(--muted);margin-top:5px}.row-2{display:grid;grid-template-columns:1fr 1fr;gap:13px}.summary-box{border:1px solid var(--line);border-radius:13px;background:#f8fafc;padding:16px;display:grid;gap:11px}.summary-row{display:flex;justify-content:space-between;gap:15px;font-size:12px}.summary-row span{color:var(--muted)}.detail-hero{background:linear-gradient(135deg,#111827,#1e3a8a 62%,#312e81);color:#fff;border-radius:16px;padding:22px;margin-bottom:18px}.detail-hero .code{color:#bfdbfe;font-size:11px;font-weight:900;letter-spacing:.05em}.detail-hero h2{margin:6px 0 10px;font-size:22px}.detail-meta{display:flex;gap:9px;flex-wrap:wrap}.detail-meta .badge{background:rgba(255,255,255,.1);color:#fff}.detail-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px}.section{margin-bottom:18px}.section h3{font-size:13px;margin:0 0 10px}.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 15px;font-size:12px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:650}.timeline{position:relative;padding-left:20px}.timeline:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:#cbd5e1}.timeline-item{position:relative;padding:0 0 17px 12px}.timeline-item:before{content:"";position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--q);box-shadow:0 0 0 3px #dbeafe}.timeline-item b{font-size:11px}.timeline-item p{font-size:11px;color:var(--muted);margin:3px 0}.action-card{border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:10px}.action-card b{font-size:12px}.progress{height:7px;background:#e2e8f0;border-radius:5px;overflow:hidden;margin-top:9px}.progress>span{display:block;height:100%;background:var(--q);border-radius:5px}.upload{border:1.5px dashed #94a3b8;border-radius:12px;padding:18px;text-align:center;background:#f8fafc}.upload input{max-width:100%}.toast-wrap{position:fixed;right:18px;top:18px;z-index:80;display:grid;gap:8px}.toast{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:11px;padding:12px 14px;min-width:280px;font-size:12px}.toast.error{border-left:4px solid var(--red)}.toast.success{border-left:4px solid var(--green)}.loading-line{height:3px;position:fixed;top:0;left:0;right:0;z-index:90;background:linear-gradient(90deg,transparent,var(--q),transparent);animation:slide 1.2s infinite}.muted{color:var(--muted)}.text-danger{color:var(--red)}.hidden{display:none!important}@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media(max-width:1180px){.cards{grid-template-columns:repeat(3,1fr)}.grid-2,.detail-grid{grid-template-columns:1fr}}@media(max-width:860px){.login-shell{grid-template-columns:1fr}.login-brand{display:none}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;width:250px;transition:.2s}.sidebar.open{left:0;box-shadow:20px 0 50px rgba(15,23,42,.28)}.mobile-menu{display:grid}.topbar{padding:0 16px}.content{padding:18px}.cards{grid-template-columns:repeat(2,1fr)}.page-head{flex-direction:column}.choice-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.login-panel{padding:26px 20px}.login-card h2{font-size:25px}.cards{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:13px}.metric strong{font-size:23px}.row-2{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.drawer-body{padding:18px}.drawer-foot{flex-wrap:wrap}.kv{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.search{max-width:none}}

/* MGI QMS v1.0.0 — Enterprise Analytical UI */
:root{--motion-fast:160ms;--motion-med:230ms;--shadow-soft:0 10px 30px rgba(15,23,42,.055);--shadow-lift:0 16px 40px rgba(15,23,42,.09)}
.nav button,.metric,.panel,.btn,.attention-item,.decision-card,.icon-btn{transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,border-color var(--motion-fast) ease,background var(--motion-fast) ease,color var(--motion-fast) ease}
.nav button:hover{transform:translateX(3px)}
.metric:hover,.panel.analytical:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.page-head{align-items:flex-start}.page-head .eyebrow{margin-bottom:7px}.quality-score{min-width:152px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:var(--shadow-soft);display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 4px}.quality-score span{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.quality-score strong{font-size:34px;line-height:1;color:var(--text)}.quality-score small{font-size:12px;color:var(--muted);padding-bottom:3px}.analytics-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}.panel.analytical{box-shadow:var(--shadow-soft)}
.trend-chart{height:190px;display:flex;align-items:end;gap:16px;padding:10px 6px 0}.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:38px}.bars{height:135px;width:100%;display:flex;justify-content:center;align-items:end;gap:5px;border-bottom:1px solid var(--border)}.bar{display:block;width:12px;max-height:132px;border-radius:7px 7px 2px 2px;min-height:5px}.bar.created{background:var(--q)}.bar.closed{background:#16a34a}.trend-col small{font-size:10px;color:var(--muted);font-weight:700}.chart-legend{display:flex;gap:16px;margin-top:10px;font-size:11px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.dot.teal{background:var(--q)}.dot.green{background:#16a34a}
.rank-list{display:flex;flex-direction:column;gap:4px}.rank-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #edf2f7}.rank-row:last-child{border-bottom:0}.rank{font-size:10px;font-weight:900;color:#94a3b8}.rank-row b{font-size:12px}.rank-row>strong{font-size:16px}.mini-track{height:4px;background:#eef2f7;border-radius:999px;overflow:hidden;margin-top:7px}.mini-track span{display:block;height:100%;background:var(--q);border-radius:999px}.decision-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}.decision-card:last-child{border-bottom:0}.decision-code{font-size:10px;color:var(--q);font-weight:900;letter-spacing:.04em;margin-bottom:4px}.metric strong{letter-spacing:-.035em}.table tbody tr:hover{background:#f6f8ff}.drawer{box-shadow:-20px 0 55px rgba(15,23,42,.14)}
@media(max-width:980px){.analytics-grid{grid-template-columns:1fr}.quality-score{min-width:130px}.trend-chart{gap:8px}}
@media(max-width:640px){.page-head{display:block}.quality-score{margin-top:14px;width:100%;max-width:none}.analytics-grid{display:block}.panel.analytical{margin-top:12px}.trend-chart{gap:4px}.bar{width:9px}.decision-card{align-items:flex-start;flex-direction:column}.decision-card .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* QMS v1.5 — Operational Quality Suite */
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.kpi-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px;box-shadow:var(--shadow-soft);transition:.18s ease}.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}.kpi-head{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.05em}.kpi-card h3{font-size:13px;margin:14px 0 6px}.kpi-value{font-size:30px;font-weight:850;letter-spacing:-.04em}.kpi-value small{font-size:12px;color:var(--muted);font-weight:700}.kpi-target{font-size:11px;color:var(--muted);margin-top:4px}.drawer-compact{width:min(620px,94vw)}.check-row{display:grid;grid-template-columns:28px 1fr 34px;gap:8px;align-items:center;margin-bottom:8px}.check-row>span{width:26px;height:26px;border-radius:8px;background:#f1f5f9;display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--muted)}.check-row input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px}.nav button svg{flex:0 0 auto}@media(max-width:980px){.kpi-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.kpi-grid{grid-template-columns:1fr}.kpi-card{padding:15px}}


/* MGI QMS 2.1.0 — Cobalt Analytical Design System */
:root{
  --cobalt:#3157d5;--cobalt-dark:#2447b8;--indigo:#6d5dfb;--midnight:#111827;
  --ice:#f4f7fb;--surface:#ffffff;--surface-soft:#f8faff;--blue-soft:#eef2ff;
  --border:#e5eaf2;--text-strong:#111827;--text-soft:#667085;
  --shadow-card:0 1px 2px rgba(16,24,40,.02),0 8px 24px rgba(16,24,40,.045);
  --shadow-float:0 18px 44px rgba(28,45,92,.10)
}
html{scroll-behavior:smooth}body{letter-spacing:-.005em}.content{max-width:1510px;padding:26px 30px 34px}.sidebar{background:linear-gradient(180deg,#111827 0%,#101827 60%,#0b1220 100%);border-right:1px solid rgba(255,255,255,.035)}
.brand-mark{background:linear-gradient(145deg,var(--cobalt),var(--indigo));box-shadow:0 10px 24px rgba(49,87,213,.28)}
.nav button{position:relative;border-radius:10px;padding:10px 12px;color:#aeb8c8}.nav button:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(2px)}
.nav button.active{background:linear-gradient(90deg,rgba(49,87,213,.28),rgba(109,93,251,.12));box-shadow:inset 3px 0 0 #6ea8ff;color:#fff}
.nav button.active:after{content:"";position:absolute;right:10px;width:5px;height:5px;border-radius:50%;background:#8bb7ff;box-shadow:0 0 0 4px rgba(139,183,255,.10)}
.topbar{height:68px;background:rgba(255,255,255,.90);border-color:var(--border);box-shadow:0 1px 0 rgba(16,24,40,.02)}
.page-head h1{font-size:28px;letter-spacing:-.035em}.eyebrow{color:var(--cobalt);letter-spacing:.12em}.quality-score{border-color:var(--border);background:linear-gradient(145deg,#fff 15%,#f5f7ff);box-shadow:var(--shadow-card)}
.quality-score strong{color:var(--cobalt)}.cards{gap:12px}.metric{border-color:var(--border);border-radius:13px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fdfdff)}
.metric:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(49,87,213,.26),transparent);opacity:0;transition:opacity .18s ease}.metric:hover:before{opacity:1}
.metric:hover{border-color:#d8e0f0;transform:translateY(-2px);box-shadow:var(--shadow-float)}.metric .label{color:#667085}.metric strong{font-weight:780;color:#182230}
.panel{border-color:var(--border);border-radius:14px;box-shadow:var(--shadow-card)}.panel-head{border-color:#edf0f6}.panel-head h3{font-weight:760;color:#182230}.panel-body{background:#fff}
.btn{border-radius:9px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.btn-primary{background:linear-gradient(135deg,var(--cobalt),#456fe6);box-shadow:0 7px 16px rgba(49,87,213,.20)}.btn-primary:hover{background:linear-gradient(135deg,var(--cobalt-dark),#3157d5);transform:translateY(-1px);box-shadow:0 10px 22px rgba(49,87,213,.25)}
.btn-secondary:hover{border-color:#cbd5e1;background:#f8faff}.field input:focus,.field select:focus,.field textarea:focus,.search input:focus,.filter-select:focus{border-color:#7c98eb;box-shadow:0 0 0 3px rgba(49,87,213,.10);outline:none}
.login-brand{background:radial-gradient(circle at 85% 18%,rgba(109,93,251,.30),transparent 28%),radial-gradient(circle at 15% 78%,rgba(49,87,213,.22),transparent 30%),linear-gradient(145deg,#111827,#172554 62%,#312e81)}
.login-logo{background:linear-gradient(145deg,var(--cobalt),var(--indigo));box-shadow:0 16px 34px rgba(49,87,213,.25)}.login-note{background:#eef2ff;color:#3730a3;border:1px solid #e0e7ff}
.trend-chart{background:linear-gradient(180deg,#fbfcff,#fff);border-radius:10px}.bar.created{background:linear-gradient(180deg,#7395f2,var(--cobalt))}.bar.closed{background:linear-gradient(180deg,#93c5fd,#2563eb)}
.dot.teal{background:var(--cobalt)}.dot.green{background:#2563eb}.rank-row{border-color:#eef1f6}.mini-track{background:#eef1f7}.mini-track span{background:linear-gradient(90deg,var(--cobalt),var(--indigo))}
.table th{background:#f8f9fc;color:#667085;border-color:#e9edf4}.table td{border-color:#f0f2f6}.table tbody tr:hover td{background:#f7f9ff}.table .title{color:#182230}
.badge.teal{background:#eef2ff;color:#3157d5}.badge.blue{background:#eff6ff;color:#1d4ed8}.badge.green{background:#eff6ff;color:#1d4ed8}
.drawer-backdrop{background:rgba(17,24,39,.42);backdrop-filter:blur(2px)}.drawer{border-left:1px solid rgba(229,234,242,.9);box-shadow:-24px 0 60px rgba(17,24,39,.16)}
.step.active,.progress>span{background:linear-gradient(90deg,var(--cobalt),var(--indigo))}.choice.selected{border-color:#7791df;background:#f4f6ff;box-shadow:0 0 0 3px rgba(49,87,213,.08)}
.detail-hero{background:radial-gradient(circle at 92% 15%,rgba(109,93,251,.33),transparent 28%),linear-gradient(135deg,#111827,#172554 60%,#312e81);box-shadow:0 16px 32px rgba(17,24,39,.13)}
.detail-hero .code{color:#bfdbfe}.timeline-item:before{background:var(--cobalt);box-shadow:0 0 0 3px #dbeafe}.link-btn,.decision-code{color:var(--cobalt)}
.kpi-card{border-color:var(--border);box-shadow:var(--shadow-card);background:linear-gradient(180deg,#fff,#fdfdff)}.kpi-card:hover{border-color:#d7e0f1;box-shadow:var(--shadow-float)}.kpi-value{color:#182230}
.loading-line{background:linear-gradient(90deg,transparent,var(--cobalt),var(--indigo),transparent)}
/* quiet professional motion */
@keyframes qmsFadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.page-head,.cards,.grid-2,.analytics-grid,.kpi-grid,.panel.table-wrap{animation:qmsFadeUp .30s cubic-bezier(.2,.7,.2,1) both}.cards{animation-delay:.035s}.grid-2,.analytics-grid{animation-delay:.06s}
@media(max-width:860px){.content{padding:18px}.sidebar{background:#111827}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-head,.cards,.grid-2,.analytics-grid,.kpi-grid,.panel.table-wrap{animation:none!important}}

/* QMS v2.2.0 — Core Login UX */
.password-wrap{position:relative}.password-wrap input{padding-right:92px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#eef2ff;color:#3157d5;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:800;cursor:pointer}.password-toggle:hover{background:#e0e7ff}.remember-row{display:flex;align-items:center;gap:9px;margin:2px 0 16px;font-size:12px;color:#667085;cursor:pointer}.remember-row input{width:16px;height:16px;accent-color:#3157d5}.btn:disabled{opacity:.62;cursor:not-allowed;transform:none!important}.login-card{box-shadow:0 28px 80px rgba(17,24,39,.12)}

/* QMS v2.4.0 Massive Operational */
.ops-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}.ops-strip>div{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-card)}.ops-strip span{display:block;font-size:10px;color:var(--text-soft);font-weight:750}.ops-strip b{display:block;margin-top:5px;font-size:21px;color:var(--text-strong)}.progress-note-box{display:grid;gap:8px;margin-top:12px}.progress-note-box textarea{min-height:84px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;resize:vertical}.escalate-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}@media(max-width:760px){.ops-strip{grid-template-columns:1fr 1fr}}@media(max-width:430px){.ops-strip{grid-template-columns:1fr}}


/* QMS v3.0.1 — Beginner Friendly UI/UX */
.start-here{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#f8faff,#eef2ff);border:1px solid #dfe6f5;border-radius:16px;padding:17px 18px;margin:0 0 14px;box-shadow:var(--shadow-card)}
.start-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.start-copy>b{font-size:16px;color:var(--text-strong)}.start-copy small{color:var(--text-soft);line-height:1.45}.start-badge{align-self:flex-start;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);background:#fff;border:1px solid #dce5fb;border-radius:999px;padding:5px 8px;margin-bottom:2px}.start-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.simple-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin:0 0 16px}.simple-flow>div{display:grid;grid-template-columns:32px 1fr;column-gap:9px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:13px;padding:12px;box-shadow:var(--shadow-card)}.simple-flow>div>span{grid-row:1/3;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#eef2ff;color:var(--cobalt);font-weight:900}.simple-flow b{font-size:12px;color:var(--text-strong)}.simple-flow small{font-size:10px;color:var(--text-soft)}.simple-flow>i{font-style:normal;color:#94a3b8;font-weight:900}
.simple-nav-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}.simple-nav-grid button{appearance:none;text-align:left;border:1px solid var(--border);background:#fff;border-radius:13px;padding:14px;cursor:pointer;box-shadow:var(--shadow-card);transition:.16s ease;display:grid;grid-template-columns:32px 1fr;column-gap:9px;align-items:center}.simple-nav-grid button:hover{transform:translateY(-2px);border-color:#cfdaf2;box-shadow:var(--shadow-float)}.simple-nav-grid button>span{grid-row:1/3;width:30px;height:30px;border-radius:9px;background:#eef2ff;color:var(--cobalt);display:grid;place-items:center}.simple-nav-grid b{font-size:12px}.simple-nav-grid small{font-size:10px;color:var(--text-soft);line-height:1.35}.top-actions{display:flex;align-items:center;gap:8px}
.nav-label:after{content:' · sederhana';font-weight:600;color:#718096}.nav button{min-height:42px}.empty{line-height:1.5}.form-help{background:#f8faff;border-left:3px solid #9bb1ee;padding:10px 12px;border-radius:0 9px 9px 0;color:#667085}
@media(max-width:980px){.simple-nav-grid{grid-template-columns:1fr 1fr}.start-here{align-items:flex-start;flex-direction:column}.start-actions{justify-content:flex-start}.simple-flow{grid-template-columns:1fr}.simple-flow>i{display:none}}
@media(max-width:640px){.simple-nav-grid{grid-template-columns:1fr}.top-actions .btn-secondary{display:none}.start-actions{width:100%}.start-actions .btn{flex:1}.start-here{padding:14px}.content{padding:14px}.cards{grid-template-columns:1fr 1fr}.metric{padding:13px}.metric strong{font-size:24px}.simple-flow>div{padding:11px}}
@media(max-width:420px){.cards{grid-template-columns:1fr}.topbar .btn-primary{padding:8px 10px;font-size:11px}.start-actions{display:grid;grid-template-columns:1fr}.start-actions .btn{width:100%}}


/* ================================================================
   QMS v3.2.0 — Professional Analytical UI + Full Page Wizard
   ================================================================ */
:root{
  --ui-text:#182230;--ui-muted:#667085;--ui-border:#e7ebf2;
  --ui-soft:#f6f8fc;--ui-blue:#3157d5;--ui-navy:#111827;
}
body{font-weight:400}
.top-title>b,.brand b,.side-profile b{font-weight:650}
.page-head h1,.dash-head-clean h1,.wizard-page-head h1{font-weight:650}
.panel-head h3,.analytic-head h3{font-weight:600}
.table .title,.clean-title{font-weight:550}
.btn{font-weight:600}
.metric strong,.kpi-value{font-weight:650}

.dash-head-clean{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;animation:qmsFadeUp .28s ease both}
.dash-head-clean h1{font-size:28px;letter-spacing:-.035em;margin:5px 0 5px;color:var(--ui-text)}
.dash-head-clean p{margin:0;color:var(--ui-muted);font-size:13px}
.dash-actions-clean{display:flex;gap:9px;flex-wrap:wrap}
.kpi-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.kpi-lite{background:#fff;border:1px solid var(--ui-border);border-radius:14px;padding:15px 16px;box-shadow:0 3px 14px rgba(16,24,40,.035);animation:qmsFadeUp .32s ease both;transition:.2s ease}
.kpi-lite:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(16,24,40,.07)}
.kpi-lite>span{display:block;color:var(--ui-muted);font-size:11px;font-weight:500;margin-bottom:9px}
.kpi-lite>div{display:flex;align-items:baseline;gap:4px}.kpi-lite strong{font-size:28px;line-height:1;font-weight:650;letter-spacing:-.04em;color:var(--ui-text)}
.kpi-lite small{font-size:11px;color:#98a2b3}.kpi-lite em{display:block;font-style:normal;font-size:10px;color:#98a2b3;margin-top:8px}
.kpi-lite.danger strong{color:#d92d20}.kpi-lite.warn strong{color:#dc6803}.kpi-lite.good strong{color:#079455}

.analytics-pro-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.analytics-pro-grid>.span-2{grid-column:span 1}
.analytics-pro-grid:first-of-type{grid-template-columns:1.65fr .85fr}
.analytic-card{background:#fff;border:1px solid var(--ui-border);border-radius:16px;padding:18px;box-shadow:0 3px 15px rgba(16,24,40,.035);animation:qmsFadeUp .34s ease both}
.analytic-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:17px}
.analytic-head h3{font-size:14px;margin:3px 0;color:var(--ui-text)}.analytic-head p{font-size:11px;color:var(--ui-muted);margin:0}
.analytic-kicker{font-size:9px;letter-spacing:.13em;font-weight:700;color:var(--ui-blue)}
.chart-legend.clean{margin:0;display:flex;gap:12px;font-size:10px;color:var(--ui-muted)}
.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}.legend-dot.blue{background:#3157d5}.legend-dot.success{background:#12b76a}
.pro-bar-chart{height:205px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;border-bottom:1px solid #eef1f5;padding:0 10px 4px}
.pro-bar-col{flex:1;max-width:76px;display:flex;flex-direction:column;align-items:center;gap:8px}.pro-bar-col small{font-size:10px;color:#98a2b3}
.pro-bars{height:170px;display:flex;align-items:flex-end;justify-content:center;gap:5px;width:100%}.pro-bar{width:13px;border-radius:6px 6px 2px 2px;position:relative;transform-origin:bottom;animation:qmsBarGrow .65s cubic-bezier(.2,.8,.2,1) both}
.pro-bar.new{background:linear-gradient(180deg,#617de5,#3157d5)}.pro-bar.done{background:linear-gradient(180deg,#54d6a0,#12b76a)}
.pro-bar i{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;color:#98a2b3;opacity:.85}
@keyframes qmsBarGrow{from{transform:scaleY(.08);opacity:.25}to{transform:scaleY(1);opacity:1}}

.donut-wrap{display:grid;grid-template-columns:145px 1fr;align-items:center;gap:18px;min-height:190px}
.donut-pro,.sla-ring{width:138px;height:138px;border-radius:50%;display:grid;place-items:center;position:relative;animation:qmsPop .45s ease both}
.donut-pro:after,.sla-ring:after{content:"";position:absolute;inset:20px;background:#fff;border-radius:50%}
.donut-pro>div,.sla-ring>div{z-index:1;text-align:center}.donut-pro strong,.sla-ring strong{font-size:25px;font-weight:650;color:var(--ui-text);display:block}.donut-pro small,.sla-ring small{font-size:10px;color:#98a2b3}
@keyframes qmsPop{from{transform:scale(.92);opacity:.25}to{transform:scale(1);opacity:1}}
.donut-legend{display:grid;gap:9px}.donut-legend>div{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:7px;font-size:10px;color:var(--ui-muted)}.donut-legend b{font-size:11px;font-weight:600;color:var(--ui-text)}
.legend-swatch{width:7px;height:7px;border-radius:50%}.legend-swatch.s0{background:#3157d5}.legend-swatch.s1{background:#f59e0b}.legend-swatch.s2{background:#16a34a}.legend-swatch.s3{background:#94a3b8}

.hbar-list{display:grid;gap:13px}.hbar-row>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}.hbar-row span{font-size:10px;color:var(--ui-muted)}.hbar-row b{font-size:10px;font-weight:600;color:var(--ui-text)}
.hbar-track{height:6px;background:#f0f2f6;border-radius:99px;overflow:hidden}.hbar-track>span{display:block;height:100%;background:linear-gradient(90deg,#3157d5,#6d83df);border-radius:99px;animation:qmsWidth .65s ease both}
.category-bars .hbar-track>span{background:linear-gradient(90deg,#7f56d9,#9e77ed)}
@keyframes qmsWidth{from{max-width:0}to{max-width:100%}}

.sla-block{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:22px}.sla-ring{background:conic-gradient(#3157d5 0%,#edf1f7 0)}
.sla-stats{display:grid;gap:11px}.sla-stats>div{display:flex;justify-content:space-between;border-bottom:1px solid #f0f2f5;padding-bottom:8px}.sla-stats span{font-size:10px;color:var(--ui-muted)}.sla-stats b{font-size:11px;font-weight:600;color:var(--ui-text)}
.pic-analytics{display:grid;gap:11px}.pic-row{display:grid;grid-template-columns:minmax(110px,1fr) 1.3fr 28px;align-items:center;gap:9px}.pic-name span{display:block;font-size:10px;color:var(--ui-text)}.pic-name small{font-size:9px;color:#98a2b3}.pic-track{height:5px;border-radius:99px;background:#f0f2f5;overflow:hidden}.pic-track span{display:block;height:100%;background:#3157d5;border-radius:99px;animation:qmsWidth .6s ease}.pic-row>b{font-size:11px;font-weight:600;text-align:right}

.clean-list{display:grid}.clean-list-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f1f3f6;cursor:pointer}.clean-list-row:last-child{border-bottom:0}.clean-list-row:hover .clean-title{color:var(--ui-blue)}
.clean-title{display:block;font-size:11px;color:var(--ui-text)}.clean-list-row small{font-size:9.5px;color:#98a2b3}.clean-due{font-size:9.5px;color:var(--ui-muted);white-space:nowrap}
.clean-list.compact .clean-list-row{grid-template-columns:1fr auto}.clean-empty{font-size:11px;color:#98a2b3;padding:22px 0}

/* Full page guided form */
.wizard-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px;animation:qmsFadeUp .25s ease}
.wizard-page-head h1{font-size:26px;letter-spacing:-.035em;margin:4px 0 5px}.wizard-page-head p{margin:0;color:var(--ui-muted);font-size:12px}
.wizard-shell{display:grid;grid-template-columns:285px minmax(0,1fr);gap:16px;align-items:start}
.wizard-rail{display:grid;gap:8px;position:sticky;top:82px}
.wizard-step-card{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;padding:13px;background:#fff;border:1px solid var(--ui-border);border-radius:13px;cursor:pointer;transition:.18s ease}
.wizard-step-card:hover{border-color:#cfd8f4}.wizard-step-card.active{border-color:#96a9ea;box-shadow:0 0 0 3px rgba(49,87,213,.07);background:#fbfcff}.wizard-step-card.complete .wizard-step-no{background:#ecfdf3;color:#079455}
.wizard-step-no{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#f2f4f7;color:#667085;font-size:10px;font-weight:650}.wizard-step-card.active .wizard-step-no{background:#eef2ff;color:#3157d5}
.wizard-step-card b{display:block;font-size:11px;font-weight:600;color:var(--ui-text)}.wizard-step-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;color:#98a2b3;margin-top:3px}
.wizard-edit{font-size:9px;color:#3157d5}.wizard-help-card{display:flex;gap:9px;padding:13px;border-radius:13px;background:#f8f9fc;color:#667085}.wizard-help-card .icon{width:17px;height:17px}.wizard-help-card b{display:block;font-size:10px;font-weight:600}.wizard-help-card small{font-size:9px;line-height:1.45}
.wizard-main-card{background:#fff;border:1px solid var(--ui-border);border-radius:16px;box-shadow:0 6px 22px rgba(16,24,40,.045);overflow:hidden}
.wizard-progress{height:3px;background:#f0f2f5}.wizard-progress span{display:block;height:100%;background:#3157d5;transition:width .28s ease}
.wizard-main-body{padding:26px 28px;min-height:520px;animation:qmsFadeUp .22s ease}.wizard-main-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef1f5;padding:14px 28px;background:#fff}
.form-section-head{margin-bottom:24px}.form-section-head>span{font-size:9px;letter-spacing:.12em;font-weight:650;color:#3157d5}.form-section-head h2{font-size:20px;font-weight:600;letter-spacing:-.025em;margin:5px 0}.form-section-head p{font-size:11px;color:#667085;margin:0}
.field label{font-weight:550}.field-note{display:block;font-size:9px;color:#98a2b3;margin-top:5px}
.pic-mode-switch{display:flex;gap:4px;padding:4px;background:#f2f4f7;border-radius:11px;width:max-content;margin-bottom:17px}.pic-mode-switch button{border:0;background:transparent;padding:9px 13px;border-radius:8px;font-size:10px;color:#667085;cursor:pointer}.pic-mode-switch button.active{background:#fff;color:#3157d5;box-shadow:0 1px 4px rgba(16,24,40,.08);font-weight:600}
.readonly-field{min-height:42px;border:1px solid #e4e7ec;background:#f9fafb;border-radius:10px;padding:11px 12px;font-size:11px;color:#475467}
.risk-choice-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.risk-choice-grid button{border:1px solid #e4e7ec;background:#fff;border-radius:11px;padding:13px 8px;cursor:pointer;text-align:center;transition:.16s ease}.risk-choice-grid button:hover{border-color:#bdc9ee}.risk-choice-grid button.selected{border-color:#7690e6;background:#f6f8ff;box-shadow:0 0 0 2px rgba(49,87,213,.06)}.risk-choice-grid strong{display:block;font-size:17px;font-weight:600;color:#344054}.risk-choice-grid span{display:block;font-size:9px;color:#98a2b3;margin-top:4px}
.risk-result-card{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;background:#f8f9fc;border:1px solid #eaecf0;border-radius:13px;padding:16px;margin-top:18px}.risk-result-card>div{display:flex;justify-content:space-between;gap:10px}.risk-result-card span{font-size:10px;color:#667085}.risk-result-card strong{font-size:12px;font-weight:600}.risk-result-card small{grid-column:1/-1;font-size:9px;color:#98a2b3}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.review-card{position:relative;border:1px solid #e4e7ec;background:#fff;border-radius:13px;padding:15px;text-align:left;cursor:pointer}.review-card:hover{border-color:#aebde9;background:#fcfdff}.review-card>span{font-size:9px;color:#98a2b3}.review-card strong{display:block;font-size:12px;font-weight:600;color:#182230;margin:6px 0}.review-card small{font-size:9.5px;color:#667085}.review-card em{position:absolute;right:12px;top:12px;font-size:9px;font-style:normal;color:#3157d5}
.review-action{margin-top:12px;padding:16px;background:#f8f9fc;border-radius:13px;border:1px solid #eaecf0}.review-action>span{font-size:9px;color:#98a2b3}.review-action p{font-size:11px;color:#344054;line-height:1.6}.review-action small{font-size:9.5px;color:#667085}

@media(max-width:1180px){.kpi-strip{grid-template-columns:repeat(3,1fr)}.analytics-pro-grid:first-of-type{grid-template-columns:1fr 1fr}}
@media(max-width:920px){.wizard-shell{grid-template-columns:1fr}.wizard-rail{position:static;grid-template-columns:repeat(2,1fr)}.wizard-help-card{display:none}.analytics-pro-grid,.analytics-pro-grid:first-of-type{grid-template-columns:1fr}.donut-wrap{grid-template-columns:130px 1fr}}
@media(max-width:680px){.dash-head-clean,.wizard-page-head{display:block}.dash-actions-clean{margin-top:12px}.kpi-strip{grid-template-columns:1fr 1fr}.wizard-rail{grid-template-columns:1fr}.wizard-main-body{padding:20px 16px}.wizard-main-foot{padding:13px 16px}.risk-choice-grid{grid-template-columns:1fr 1fr}.review-grid{grid-template-columns:1fr}.sla-block,.donut-wrap{grid-template-columns:1fr;justify-items:center}.donut-legend,.sla-stats{width:100%}}


/* ================================================================
   QMS v3.3.0 — QA Manager High-Tech Command Center
   ================================================================ */
.qa-command-shell{
  position:relative;margin:-18px -18px -30px;padding:24px 22px 40px;
  min-height:100vh;color:#dbe7ff;overflow:hidden;
  background:
    radial-gradient(circle at 15% 5%,rgba(37,99,235,.16),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(99,102,241,.11),transparent 26%),
    linear-gradient(180deg,#07111f 0%,#091426 48%,#08111f 100%);
}
.qa-command-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(104,146,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(104,146,255,.10) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}
.qa-command-ambient{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);background:rgba(49,87,213,.08);right:-140px;top:230px;pointer-events:none;animation:qaAmbient 8s ease-in-out infinite alternate}
@keyframes qaAmbient{to{transform:translate(-90px,70px) scale(1.12);opacity:.7}}
.qa-command-head,.qa-filterbar,.qa-kpis,.qa-grid-main,.qa-grid-secondary,.qa-grid-bottom{position:relative;z-index:1}
.qa-command-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
.qa-command-kicker{font-size:9px;letter-spacing:.18em;font-weight:650;color:#78a8ff;display:flex;align-items:center;gap:8px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#48a3ff;box-shadow:0 0 16px #48a3ff;animation:qaPulse 1.7s ease-in-out infinite}
@keyframes qaPulse{50%{transform:scale(1.7);opacity:.45}}
.qa-command-head h1{font-size:28px;letter-spacing:-.035em;font-weight:600;margin:6px 0 4px;color:#f6f8ff;text-shadow:0 0 24px rgba(96,165,250,.08)}
.qa-command-head p{margin:0;font-size:11px;color:#7f90ab}
.qa-head-actions{display:flex;gap:8px}.qa-btn{height:38px;border-radius:10px;padding:0 14px;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid rgba(111,149,255,.22);transition:.2s ease}
.qa-btn .icon{width:15px;height:15px}.qa-btn.primary{background:linear-gradient(180deg,#2865eb,#1e4fc0);color:#fff;box-shadow:0 0 22px rgba(37,99,235,.22)}.qa-btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(37,99,235,.34)}.qa-btn.ghost{background:rgba(255,255,255,.035);color:#b9c8df}.qa-btn.ghost:hover{background:rgba(255,255,255,.07)}

.qa-filterbar{display:flex;gap:8px;padding:9px;border:1px solid rgba(114,150,224,.13);background:rgba(7,16,31,.55);backdrop-filter:blur(18px);border-radius:13px;margin-bottom:13px;box-shadow:inset 0 1px rgba(255,255,255,.02)}
.qa-filter{flex:1;min-width:110px;padding:8px 10px;border-radius:8px;border:1px solid rgba(119,151,214,.12);background:rgba(255,255,255,.025);display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center}.qa-filter span{font-size:8px;color:#637694}.qa-filter b{font-size:9.5px;font-weight:500;color:#cbd7eb}.qa-filter i{font-style:normal;color:#536a91}.qa-filter-reset{border:1px solid rgba(119,151,214,.13);background:transparent;color:#7183a0;border-radius:8px;padding:0 13px;font-size:9px;cursor:pointer}

.qa-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:12px}
.qa-kpi{position:relative;overflow:hidden;min-height:135px;padding:14px 14px 12px;border-radius:13px;border:1px solid rgba(102,140,213,.16);background:linear-gradient(160deg,rgba(15,29,53,.9),rgba(7,17,33,.84));box-shadow:0 10px 28px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.025);transition:.23s ease}
.qa-kpi:before{content:"";position:absolute;inset:auto -30% -65% -30%;height:100px;background:radial-gradient(ellipse,rgba(61,121,255,.12),transparent 66%);pointer-events:none}.qa-kpi:hover{transform:translateY(-3px);border-color:rgba(100,150,255,.36);box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 26px rgba(50,105,235,.09)}
.qa-kpi-icon{position:absolute;right:12px;top:11px;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:rgba(80,128,255,.08);font-size:12px;color:#7ca9ff}.qa-kpi>span{display:block;font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:#8291aa;margin-bottom:14px}.qa-kpi>div:not(.qa-kpi-icon){display:flex;align-items:baseline;gap:4px}.qa-kpi strong{font-weight:550;font-size:27px;color:#eff5ff;letter-spacing:-.035em}.qa-kpi small{font-size:9px;color:#637694}.qa-kpi em{font-style:normal;font-size:8px;color:#5d708e;display:block;margin-top:6px}.qa-kpi .spark{position:absolute;left:10px;right:10px;bottom:8px;width:calc(100% - 20px);height:25px;fill:none;stroke:#4f8dff;stroke-width:1.7;opacity:.75;filter:drop-shadow(0 0 5px rgba(79,141,255,.38))}.qa-kpi.red .spark{stroke:#ff5f63}.qa-kpi.amber .spark{stroke:#f7aa2a}.qa-kpi.green .spark{stroke:#3ed684}.qa-kpi.purple .spark{stroke:#c56cff}.qa-kpi.cyan .spark{stroke:#42d1ed}
.qa-kpi.red strong{color:#ff8b8e}.qa-kpi.amber strong{color:#ffc86d}.qa-kpi.green strong{color:#76e4a8}.qa-kpi.purple strong{color:#db9cff}

.qa-grid-main{display:grid;grid-template-columns:1.55fr .82fr .88fr;gap:10px;margin-bottom:10px}
.qa-grid-secondary{display:grid;grid-template-columns:.85fr 1.25fr .85fr;gap:10px;margin-bottom:10px}
.qa-grid-bottom{display:grid;grid-template-columns:1.25fr .75fr;gap:10px}
.qa-glass{background:linear-gradient(155deg,rgba(13,28,51,.86),rgba(7,17,32,.88));border:1px solid rgba(107,145,217,.15);border-radius:13px;padding:14px;box-shadow:0 14px 34px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.022);backdrop-filter:blur(16px);transition:.22s ease}.qa-glass:hover{border-color:rgba(90,139,235,.28);box-shadow:0 18px 42px rgba(0,0,0,.18),0 0 30px rgba(49,87,213,.045)}
.qa-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px}.qa-card-head>div>span{font-size:7.5px;letter-spacing:.15em;color:#5579bc;font-weight:650}.qa-card-head h3{font-size:12px;font-weight:560;color:#e2ebfb;margin:3px 0}.qa-card-head p{font-size:8px;color:#586b89;margin:0}.qa-card-head>b{font-size:9px;font-weight:550;color:#ff8b8e}.qa-link{border:0;background:transparent;color:#6094ff;font-size:8px;cursor:pointer}

.qa-line-chart{height:235px;position:relative;padding-top:8px}.qa-grid-lines{position:absolute;inset:13px 0 30px;display:flex;flex-direction:column;justify-content:space-between}.qa-grid-lines span{height:1px;background:rgba(113,146,209,.08)}.qa-line-chart svg{position:absolute;left:0;right:0;top:8px;width:100%;height:190px;overflow:visible}.qa-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:qaLineDraw 1.25s cubic-bezier(.22,.8,.24,1) forwards}.qa-line.incoming{stroke:#4c91ff;filter:drop-shadow(0 0 5px rgba(76,145,255,.45))}.qa-line.completed{stroke:#44d88a;filter:drop-shadow(0 0 5px rgba(68,216,138,.28));animation-delay:.18s}@keyframes qaLineDraw{to{stroke-dashoffset:0}}.qa-point{stroke-width:2;fill:#081427;opacity:0;animation:qaPointPop .35s ease forwards .75s}.qa-point.incoming{stroke:#72aaff}.qa-point.completed{stroke:#61e39b}@keyframes qaPointPop{to{opacity:1}}.qa-months{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between}.qa-months span{font-size:7.5px;color:#526682}.qa-legend{font-size:7.5px;color:#7183a0;display:flex;align-items:center;gap:7px}.qa-legend i{width:8px;height:2px;border-radius:9px}.qa-legend .b{background:#4c91ff}.qa-legend .g{background:#44d88a}

.qa-heatmap{display:grid;gap:3px;margin-top:8px}.qa-heat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.qa-heat-row button{aspect-ratio:1.18;border:1px solid rgba(255,255,255,.09);border-radius:5px;cursor:pointer;color:#fff;font-size:8px;transition:.16s ease;position:relative;overflow:hidden}.qa-heat-row button:hover{transform:scale(1.05);z-index:2;box-shadow:0 0 18px rgba(255,106,70,.22)}.qa-heat-row button:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 45%)}.heat-2,.heat-3,.heat-4{background:#1b8f62}.heat-5,.heat-6{background:#b4a830}.heat-7,.heat-8{background:#e68c28}.heat-9,.heat-10{background:#df4a42}.qa-heat-row button span{position:relative;z-index:1}.qa-heat-axis{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:6.8px;color:#566984}.qa-heat-axis b{font-weight:500}

.qa-priority-list{display:grid;gap:7px}.qa-priority-list button{width:100%;display:grid;grid-template-columns:26px 1fr auto 10px;gap:8px;align-items:center;border:1px solid rgba(119,151,214,.11);background:rgba(255,255,255,.018);border-radius:8px;padding:9px;color:#c9d7eb;text-align:left;cursor:pointer;transition:.17s}.qa-priority-list button:hover{background:rgba(66,114,216,.07);border-color:rgba(96,145,240,.23);transform:translateX(2px)}.qa-priority-list i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:10px}.qa-priority-list i.danger,.qa-priority-list i.red{background:rgba(245,76,76,.1);color:#ff686d}.qa-priority-list i.amber{background:rgba(245,158,11,.1);color:#fbbf4b}.qa-priority-list b{font-size:8.5px;font-weight:550}.qa-priority-list small{display:block;font-size:7px;color:#586d8d;margin-top:2px}.qa-priority-list strong{font-size:11px;font-weight:550}.qa-priority-list>button>span{color:#4e6e9f}

.qa-aging{display:grid;grid-template-columns:115px 1fr;gap:12px;align-items:center}.qa-aging-ring{width:108px;height:108px;border-radius:50%;background:conic-gradient(#4c8cff 0 28%,#26c786 28% 53%,#f0ad2e 53% 83%,#e24b4e 83% 100%);display:grid;place-items:center;animation:qaRing 1s ease both}.qa-aging-ring:before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#0b1729}.qa-aging-ring{position:relative}.qa-aging-ring>div{position:relative;z-index:1;text-align:center}.qa-aging-ring strong{font-size:19px;font-weight:550}.qa-aging-ring small{font-size:7px;color:#667a9a;display:block}.qa-aging-legend{display:grid;gap:7px}.qa-aging-legend div{display:grid;grid-template-columns:7px 1fr auto;gap:6px;align-items:center}.qa-aging-legend i{width:6px;height:6px;border-radius:50%}.qa-aging-legend .a1{background:#4c8cff}.qa-aging-legend .a2{background:#26c786}.qa-aging-legend .a3{background:#f0ad2e}.qa-aging-legend .a4{background:#e24b4e}.qa-aging-legend span,.qa-aging-legend b{font-size:7.5px;color:#7587a3}.qa-aging-legend b{font-weight:550;color:#c9d6e9}
@keyframes qaRing{from{transform:rotate(-40deg) scale(.85);opacity:.2}to{transform:rotate(0) scale(1);opacity:1}}

.qa-pareto{height:170px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;position:relative;padding:0 10px 24px}.qa-pareto-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}.qa-pareto-bar{width:22px;min-height:10px;background:linear-gradient(180deg,#438fff,#195ed6);border-radius:5px 5px 2px 2px;box-shadow:0 0 14px rgba(53,126,255,.12);animation:qaBarRise .7s ease both;transform-origin:bottom}.qa-pareto-col b{font-size:7px;font-weight:500;color:#9cb4db;margin:3px 0}.qa-pareto-col small{font-size:6.2px;color:#536987;text-align:center;white-space:nowrap;max-width:62px;overflow:hidden;text-overflow:ellipsis}.qa-pareto svg{position:absolute;inset:8px 5px 28px;width:calc(100% - 10px);height:130px;pointer-events:none}.qa-pareto-line{fill:none;stroke:#c766ff;stroke-width:2;filter:drop-shadow(0 0 4px rgba(199,102,255,.3));stroke-dasharray:800;stroke-dashoffset:800;animation:qaLineDraw 1.2s ease forwards .35s}@keyframes qaBarRise{from{transform:scaleY(.08);opacity:.25}to{transform:scaleY(1);opacity:1}}

.qa-sla{display:grid;grid-template-columns:115px 1fr;gap:12px;align-items:center}.qa-sla-ring{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;position:relative;animation:qaRing 1s ease both}.qa-sla-ring:before{content:"";position:absolute;width:74px;height:74px;border-radius:50%;background:#0b1729}.qa-sla-ring>div{position:relative;z-index:1;text-align:center}.qa-sla-ring strong{display:block;font-size:18px;font-weight:550}.qa-sla-ring small{font-size:7px;color:#62c9b4}.qa-sla-copy{display:grid;gap:8px}.qa-sla-copy div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(255,255,255,.04);padding-bottom:6px}.qa-sla-copy span,.qa-sla-copy b{font-size:7.5px;color:#7185a4}.qa-sla-copy b{font-weight:550;color:#c6d4e9}

.qa-recent{display:grid}.qa-recent button{display:grid;grid-template-columns:7px 1fr auto;gap:8px;align-items:center;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.045);padding:8px 1px;text-align:left;color:#cbd8ea;cursor:pointer}.qa-recent button:hover b{color:#6fa0ff}.qa-recent i{width:6px;height:6px;border-radius:50%;background:#488cff}.qa-recent i.red{background:#ff6267;box-shadow:0 0 9px rgba(255,98,103,.35)}.qa-recent b{display:block;font-size:8px;font-weight:520}.qa-recent small{font-size:6.8px;color:#526782}.qa-recent span{font-size:6.7px;color:#637795}
.qa-workload{display:grid;gap:8px}.qa-workload>div{display:grid;grid-template-columns:25px 1fr 22px;gap:8px;align-items:center}.qa-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#2e73e9,#254fa7);font-size:6.7px;font-weight:600;color:#fff}.qa-workload b{font-size:7.7px;font-weight:520;color:#aebfd7}.qa-workload strong{font-size:8px;font-weight:550;color:#b8c9de}.qa-work-track{height:4px;background:rgba(255,255,255,.05);border-radius:99px;margin-top:4px;overflow:hidden}.qa-work-track span{display:block;height:100%;background:linear-gradient(90deg,#2e73e9,#62a0ff);border-radius:99px;animation:qaWidth .7s ease both}@keyframes qaWidth{from{max-width:0}to{max-width:100%}}

.reveal-item{opacity:0;transform:translateY(18px) scale(.992);filter:blur(2px);transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease}.reveal-item.is-visible{opacity:1;transform:none;filter:none}.qa-kpis .reveal-item:nth-child(2){transition-delay:.05s}.qa-kpis .reveal-item:nth-child(3){transition-delay:.10s}.qa-kpis .reveal-item:nth-child(4){transition-delay:.15s}.qa-kpis .reveal-item:nth-child(5){transition-delay:.20s}.qa-kpis .reveal-item:nth-child(6){transition-delay:.25s}
@media(prefers-reduced-motion:reduce){.qa-command-ambient,.pulse-dot,.qa-line,.qa-point,.qa-aging-ring,.qa-sla-ring,.qa-pareto-bar,.qa-pareto-line,.qa-work-track span{animation:none!important}.reveal-item{opacity:1;transform:none;filter:none;transition:none}}

@media(max-width:1240px){.qa-kpis{grid-template-columns:repeat(3,1fr)}.qa-grid-main{grid-template-columns:1.4fr 1fr}.qa-priority-card{grid-column:1/-1}.qa-grid-secondary{grid-template-columns:1fr 1fr}.qa-grid-secondary>.qa-glass:last-child{grid-column:1/-1}}
@media(max-width:850px){.qa-command-shell{margin:-15px;padding:18px 14px 35px}.qa-command-head{display:block}.qa-head-actions{margin-top:12px}.qa-filterbar{overflow:auto}.qa-filter{min-width:160px}.qa-kpis{grid-template-columns:1fr 1fr}.qa-grid-main,.qa-grid-secondary,.qa-grid-bottom{grid-template-columns:1fr}.qa-priority-card,.qa-grid-secondary>.qa-glass:last-child{grid-column:auto}}
@media(max-width:560px){.qa-kpis{grid-template-columns:1fr}.qa-command-head h1{font-size:23px}}


/* ================================================================
   QMS v3.4.0 — Clean White Animated Workspace
   ================================================================ */
:root{
  --q-bg:#f8fafc;--q-surface:#ffffff;--q-surface-2:#f9fbff;
  --q-text:#172033;--q-muted:#667085;--q-line:#e6ebf2;
  --q-blue:#2563eb;--q-blue-2:#3b82f6;--q-green:#16a34a;
  --q-amber:#f59e0b;--q-red:#ef4444;--q-purple:#7c3aed;
  --q-shadow:0 8px 26px rgba(16,24,40,.055);
}
html{scroll-behavior:smooth}
body{background:var(--q-bg);color:var(--q-text)}
.content{transition:opacity .18s ease,transform .18s ease,filter .18s ease}
.content.page-transitioning{opacity:.18;transform:translateY(5px);filter:blur(1.5px)}
.content [data-animate],
.content .panel,
.content .analytic-card,
.content .wizard-main-card,
.content .table-wrap,
.content .detail-card{
  opacity:0;transform:translateY(13px);transition:opacity .48s cubic-bezier(.2,.75,.2,1),transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .22s ease,border-color .22s ease;
  transition-delay:var(--motion-delay,0ms)
}
.content .motion-visible{opacity:1!important;transform:none!important}

/* Sidebar motion */
.sidebar,.side,.app-sidebar{transition:width .28s cubic-bezier(.2,.8,.2,1),transform .28s ease,box-shadow .25s ease}
.sidebar a,.side-menu-item,.nav-item,.sidebar button{transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.sidebar a:hover,.side-menu-item:hover,.nav-item:hover{transform:translateX(3px)}
.sidebar .active,.side-menu-item.active,.nav-item.active{animation:qNavEnter .28s cubic-bezier(.2,.8,.2,1)}
@keyframes qNavEnter{from{transform:translateX(-5px);opacity:.55}to{transform:none;opacity:1}}

/* Global white cards */
.panel,.analytic-card,.wizard-main-card,.table-wrap,.detail-card,.metric,.kpi-lite{
  background:#fff;border-color:var(--q-line);box-shadow:var(--q-shadow)
}
.panel:hover,.analytic-card:hover,.kpi-lite:hover{border-color:#d8e2f1;box-shadow:0 14px 34px rgba(16,24,40,.075)}
.btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px)}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
input:focus,select:focus,textarea:focus{border-color:#8fb0ff!important;box-shadow:0 0 0 4px rgba(37,99,235,.08)!important}

/* QA Dashboard white conversion */
.qa-command-shell{
  margin:-18px -18px -30px;padding:24px 22px 40px;min-height:100vh;
  color:var(--q-text);background:
  radial-gradient(circle at 82% 0%,rgba(37,99,235,.045),transparent 25%),
  linear-gradient(180deg,#fbfdff 0%,#f7f9fc 100%);
}
.qa-command-shell:before{opacity:.025;background-image:linear-gradient(#2563eb 1px,transparent 1px),linear-gradient(90deg,#2563eb 1px,transparent 1px)}
.qa-command-ambient{background:rgba(37,99,235,.035);filter:blur(110px)}
.qa-command-kicker{color:#2563eb}.pulse-dot{background:#3b82f6;box-shadow:0 0 12px rgba(59,130,246,.35)}
.qa-command-head h1{color:#172033;text-shadow:none;font-weight:610}.qa-command-head p{color:#78869a}
.qa-btn{border-color:#dfe7f3}.qa-btn.primary{background:#2563eb;color:white;box-shadow:0 7px 18px rgba(37,99,235,.15)}.qa-btn.primary:hover{background:#1d4ed8;box-shadow:0 10px 24px rgba(37,99,235,.20)}
.qa-btn.ghost{background:#fff;color:#53657c}.qa-btn.ghost:hover{background:#f8fafc}

.qa-filterbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);border-color:#e4eaf2;box-shadow:0 5px 22px rgba(16,24,40,.04);backdrop-filter:blur(16px)}
.qa-filter-wrap{position:relative;flex:1}
.qa-filter{width:100%;background:#fff;border-color:#e4eaf2;color:#53657c;text-align:left;cursor:pointer}
.qa-filter span{color:#98a2b3}.qa-filter b{color:#344054}.qa-filter i{color:#98a2b3}
.qa-filter:hover{border-color:#bfd0f2;background:#fbfdff}
.qa-filter-menu{position:absolute;top:calc(100% + 7px);left:0;right:0;background:#fff;border:1px solid #e4eaf2;border-radius:11px;padding:5px;box-shadow:0 16px 35px rgba(16,24,40,.12);z-index:50;animation:qPopover .18s ease}
.qa-filter-menu button{width:100%;border:0;background:transparent;text-align:left;padding:8px 9px;border-radius:7px;font-size:9px;color:#475467;cursor:pointer;transition:.15s}
.qa-filter-menu button:hover{background:#f2f6ff;color:#2563eb}
.qa-filter-reset{border-color:#e4eaf2;color:#667085;background:#fff}
@keyframes qPopover{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}

.qa-kpi{background:#fff;border-color:#e5eaf2;box-shadow:0 7px 20px rgba(16,24,40,.045);color:#344054}
.qa-kpi:before{background:radial-gradient(ellipse,rgba(37,99,235,.055),transparent 66%)}
.qa-kpi:hover{border-color:#cddaf0;box-shadow:0 14px 28px rgba(16,24,40,.075)}
.qa-kpi>span{color:#667085}.qa-kpi strong{color:#172033}.qa-kpi small{color:#98a2b3}.qa-kpi em{color:#98a2b3}
.qa-kpi-icon{background:#eff5ff;color:#2563eb}
.qa-kpi .spark{stroke:#2563eb;filter:none}.qa-kpi.red .spark{stroke:#ef4444}.qa-kpi.amber .spark{stroke:#f59e0b}.qa-kpi.green .spark{stroke:#16a34a}.qa-kpi.purple .spark{stroke:#7c3aed}.qa-kpi.cyan .spark{stroke:#0ea5e9}
.qa-kpi.red strong{color:#dc2626}.qa-kpi.amber strong{color:#d97706}.qa-kpi.green strong{color:#16a34a}.qa-kpi.purple strong{color:#7c3aed}

.qa-glass{background:#fff;border-color:#e5eaf2;box-shadow:0 8px 24px rgba(16,24,40,.045);backdrop-filter:none}
.qa-glass:hover{border-color:#d1dced;box-shadow:0 15px 34px rgba(16,24,40,.07)}
.qa-card-head>div>span{color:#2563eb}.qa-card-head h3{color:#293548;font-weight:580}.qa-card-head p{color:#98a2b3}.qa-card-head>b{color:#dc2626}.qa-link{color:#2563eb}
.qa-grid-lines span{background:#eef2f7}.qa-line-chart .qa-line.incoming{stroke:#2563eb;filter:drop-shadow(0 2px 4px rgba(37,99,235,.16))}.qa-line-chart .qa-line.completed{stroke:#16a34a;filter:none}.qa-point{fill:#fff}.qa-point.incoming{stroke:#2563eb}.qa-point.completed{stroke:#16a34a}.qa-months span,.qa-legend{color:#98a2b3}
.qa-priority-list button{border-color:#edf0f5;background:#fff;color:#475467}.qa-priority-list button:hover{background:#f8fbff;border-color:#d8e3f4}.qa-priority-list b{color:#344054}.qa-priority-list small{color:#98a2b3}
.qa-aging-ring:before,.qa-sla-ring:before{background:#fff}.qa-aging-ring strong,.qa-sla-ring strong{color:#293548}.qa-aging-ring small,.qa-sla-ring small{color:#98a2b3}
.qa-aging-legend span,.qa-sla-copy span{color:#667085}.qa-aging-legend b,.qa-sla-copy b{color:#344054}
.qa-pareto-col b{color:#667085}.qa-pareto-col small{color:#98a2b3}.qa-pareto-bar{background:linear-gradient(180deg,#4c8dff,#2563eb);box-shadow:none}
.qa-recent button{border-bottom-color:#eef2f6;color:#475467}.qa-recent b{color:#344054}.qa-recent small,.qa-recent span{color:#98a2b3}
.qa-workload b,.qa-workload strong{color:#475467}.qa-work-track{background:#eef2f7}.qa-avatar{background:linear-gradient(145deg,#4f8cff,#2563eb)}
.qa-heat-row button{border-color:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.qa-heat-row button:hover{box-shadow:0 8px 18px rgba(16,24,40,.12);transform:scale(1.055)}
.qa-heat-axis{color:#98a2b3}

/* Table and lists */
table tbody tr{transition:background .15s ease,transform .15s ease}
table tbody tr:hover{background:#f8fbff}
.badge{transition:transform .16s ease,box-shadow .16s ease}.badge:hover{transform:translateY(-1px)}

/* Wizard and form transitions */
.wizard-main-body>template,.form-section-head,.review-grid,.risk-choice-grid,.pic-mode-switch{animation:qContentIn .28s cubic-bezier(.2,.8,.2,1)}
.wizard-step-card{transition:transform .17s ease,border-color .17s ease,background .17s ease,box-shadow .17s ease}
.wizard-step-card:hover{transform:translateX(3px)}
.review-card{transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease}.review-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,24,40,.06)}
@keyframes qContentIn{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}

/* Modal / drawer / detail */
.modal-backdrop,.drawer-backdrop{animation:qBackdrop .18s ease}
.modal,.drawer,.detail-panel{animation:qPanelIn .24s cubic-bezier(.2,.8,.2,1)}
@keyframes qBackdrop{from{opacity:0}to{opacity:1}}
@keyframes qPanelIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* Skeleton shimmer utility */
.skeleton,.loading-skeleton{background:linear-gradient(90deg,#f1f4f8 25%,#fafcff 37%,#f1f4f8 63%);background-size:400% 100%;animation:qShimmer 1.35s ease infinite}
@keyframes qShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Scroll reveal */
.reveal-item{filter:none;transform:translateY(13px);opacity:0;transition:opacity .46s cubic-bezier(.2,.8,.2,1),transform .46s cubic-bezier(.2,.8,.2,1)}
.reveal-item.is-visible{opacity:1;transform:none}

/* Responsive */
@media(max-width:850px){.qa-filter-wrap{min-width:155px}.qa-filterbar{overflow:visible}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .content [data-animate],.content .panel,.content .analytic-card,.content .wizard-main-card,.content .table-wrap,.content .detail-card{opacity:1!important;transform:none!important}
}

/* v3.4.1 runtime blank-screen safety */
.content{visibility:visible}
.content:not(.page-transitioning){opacity:1;filter:none}
.no-js-motion,.motion-safety{opacity:1!important;transform:none!important;filter:none!important}


/* ================================================================
   QMS v3.4.2 — Readability Typography Hotfix
   Better font sizing / spacing across all menus
   ================================================================ */
html{font-size:16px}
body{
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:0;
}

/* global text scale */
h1{font-size:1.75rem;line-height:1.2;font-weight:620}
h2{font-size:1.45rem;line-height:1.24;font-weight:600}
h3{font-size:1.15rem;line-height:1.3;font-weight:600}
h4{font-size:1rem;line-height:1.35;font-weight:590}
h5{font-size:.92rem;line-height:1.4;font-weight:580}
small{font-size:.8rem}
label{font-size:.9rem;line-height:1.35;font-weight:560;color:#334155}
p,li,td,th,span,div{line-height:1.5}

/* sidebar / navigation */
.sidebar,
.side,
.app-sidebar{font-size:14px}
.sidebar .brand-title,
.side .brand-title,
.app-sidebar .brand-title{font-size:1.15rem;font-weight:650}
.sidebar .brand-subtitle,
.side .brand-subtitle,
.app-sidebar .brand-subtitle{font-size:.74rem;letter-spacing:.02em}
.sidebar a,
.side-menu-item,
.nav-item,
.sidebar button{
  font-size:.96rem;
  line-height:1.35;
  font-weight:540;
}
.sidebar .menu-caption,
.side .menu-caption,
.app-sidebar .menu-caption{
  font-size:.72rem;
  letter-spacing:.08em;
  font-weight:700;
}
.user-panel,
.profile-mini,
.sidebar .profile-name{font-size:.92rem}
.sidebar .profile-role{font-size:.78rem}

/* page headers */
.page-head h1,
.page-title,
.content h1{font-size:1.55rem;font-weight:620;letter-spacing:-.01em}
.page-head p,
.page-subtitle,
.content .subtitle{font-size:.95rem;color:#64748b}

/* buttons / inputs / filters */
button,.btn,a.btn{
  font-size:.92rem;
  font-weight:580;
  line-height:1.2;
}
input,select,textarea{
  font-size:.93rem;
  line-height:1.4;
}
::placeholder{font-size:.9rem}
.qa-filter span{font-size:.72rem}
.qa-filter b{font-size:.88rem;font-weight:590}
.qa-filter-reset{font-size:.86rem}
.qa-filter-menu button{font-size:.88rem;padding:9px 10px}

/* cards and KPI */
.panel,
.analytic-card,
.wizard-main-card,
.table-wrap,
.detail-card{font-size:.92rem}
.qa-kpi>span{font-size:.72rem;letter-spacing:.02em}
.qa-kpi strong{font-size:2rem;line-height:1.05;font-weight:650}
.qa-kpi small{font-size:.78rem}
.qa-kpi em{font-size:.76rem}
.qa-kpi-icon{font-size:1rem}
.metric-title,
.card-title,
.section-title{font-size:1rem;font-weight:610}
.metric-subtitle,
.card-subtitle,
.section-subtitle{font-size:.84rem;color:#64748b}

/* analytic sections */
.qa-card-head > div > span{font-size:.72rem;letter-spacing:.08em;font-weight:700}
.qa-card-head h3{font-size:1.06rem;font-weight:610}
.qa-card-head p{font-size:.83rem}
.qa-card-head>b{font-size:.76rem}
.qa-legend,
.qa-months span,
.qa-aging-legend span,
.qa-sla-copy span,
.qa-heat-axis,
.qa-pareto-col small,
.qa-recent small,
.qa-recent span{font-size:.78rem}
.qa-priority-list b,
.qa-recent b,
.qa-workload strong{font-size:.92rem;font-weight:590}
.qa-priority-list small,
.qa-workload b{font-size:.78rem}
.qa-aging-ring strong,
.qa-sla-ring strong{font-size:1.2rem;font-weight:650}
.qa-aging-ring small,
.qa-sla-ring small{font-size:.76rem}

/* forms / wizard / modal */
.form-section-head h2,
.wizard-page-head h1{font-size:1.35rem;font-weight:620}
.form-section-head p,
.wizard-page-head p{font-size:.92rem}
.wizard-step-card{font-size:.9rem}
.wizard-step-card b{font-size:.95rem;font-weight:600}
.wizard-step-card small{font-size:.8rem}
.review-card h4,
.detail-card h4,
.modal h4{font-size:1rem;font-weight:610}
.review-card p,
.detail-card p,
.modal p{font-size:.9rem}

/* tables */
table{font-size:.9rem}
table thead th{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
table tbody td{font-size:.9rem;line-height:1.45}
.badge{font-size:.76rem;font-weight:650}

/* reports / list stats */
.stat-number,
.big-number{font-size:1.8rem;font-weight:650}
.stat-label,
.muted-caption{font-size:.8rem}

/* responsive readability */
@media (max-width: 1200px){
  body{font-size:14.2px}
  .page-head h1,.page-title,.content h1{font-size:1.45rem}
  .qa-kpi strong{font-size:1.8rem}
}
@media (max-width: 768px){
  body{font-size:14px}
  .sidebar a,.side-menu-item,.nav-item,.sidebar button{font-size:.93rem}
  .page-head h1,.page-title,.content h1{font-size:1.32rem}
  h1{font-size:1.5rem}
  h2{font-size:1.25rem}
  .qa-kpi strong{font-size:1.55rem}
  table{font-size:.86rem}
}



/* ================================================================
   QMS Web v3.4.3 — Premium Login Refresh
   ================================================================ */
.login-v343{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(37,99,235,.18),transparent 26%),
    radial-gradient(circle at 85% 80%,rgba(14,165,233,.10),transparent 28%),
    linear-gradient(135deg,#06111f 0%,#07172a 46%,#081321 100%);
}
.login-v343:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:
    linear-gradient(rgba(96,165,250,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.10) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.login-grid-glow{
  position:absolute;inset:-20%;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(59,130,246,.06) 58%,transparent 72%);
  animation:loginGlow 10s ease-in-out infinite alternate;
}
.login-orbit{position:absolute;border:1px solid rgba(96,165,250,.08);border-radius:50%;pointer-events:none}
.orbit-a{width:620px;height:620px;left:-250px;top:-230px;animation:loginOrbit 18s linear infinite}
.orbit-b{width:420px;height:420px;right:-150px;bottom:-160px;animation:loginOrbit 22s linear infinite reverse}
@keyframes loginOrbit{to{transform:rotate(360deg)}}
@keyframes loginGlow{to{transform:scale(1.08) translateY(-2%);opacity:.8}}

.login-frame{
  width:min(1180px,100%);
  min-height:680px;
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:0;
  padding:9px;
  border-radius:26px;
  background:rgba(255,255,255,.985);
  box-shadow:0 32px 90px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.45);
  animation:loginFrameIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes loginFrameIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

.login-brand-v343{
  min-height:662px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  padding:38px 42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  background:
    radial-gradient(circle at 78% 22%,rgba(39,130,246,.22),transparent 25%),
    radial-gradient(circle at 18% 88%,rgba(14,165,233,.12),transparent 30%),
    linear-gradient(155deg,#061b38 0%,#06172e 48%,#04111f 100%);
}
.login-brand-v343:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:
    linear-gradient(120deg,transparent 0 34%,rgba(59,130,246,.08) 35%,transparent 36%),
    repeating-linear-gradient(0deg,rgba(96,165,250,.045) 0 1px,transparent 1px 22px);
}
.login-brand-top{position:relative;z-index:3;display:flex;align-items:center;gap:12px}
.login-brand-mark{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#2563eb,#60a5fa);box-shadow:0 8px 22px rgba(37,99,235,.24)}
.login-brand-mark .icon{width:23px;height:23px;color:#fff}
.login-brand-copy b{display:block;font-size:1.22rem;line-height:1.1;font-weight:680}
.login-brand-copy small{display:block;margin-top:4px;font-size:.7rem;letter-spacing:.08em;color:#8ba4c8}

.login-hero-copy{position:relative;z-index:3;margin-top:auto;margin-bottom:48px;max-width:480px}
.login-kicker{font-size:.72rem;letter-spacing:.16em;color:#6ba4ff;font-weight:700;margin-bottom:16px}
.login-hero-copy h1{margin:0;font-size:3.1rem;line-height:1.02;letter-spacing:-.05em;font-weight:650;color:#fff}
.login-hero-copy h1 span{display:block;color:#3b82f6}
.login-accent-line{width:66px;height:4px;background:#3b82f6;border-radius:99px;margin:25px 0 22px;box-shadow:0 0 20px rgba(59,130,246,.4)}
.login-hero-copy p{margin:0;font-size:1rem;line-height:1.65;color:#d2dbea;max-width:470px}

.login-feature-row{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.10);padding-top:22px}
.login-feature{display:flex;flex-direction:column;align-items:flex-start;padding:0 15px;border-right:1px solid rgba(255,255,255,.11)}
.login-feature:first-child{padding-left:0}.login-feature:last-child{border-right:0}
.login-feature .icon{width:24px;height:24px;color:#60a5fa;margin-bottom:10px}
.login-feature b{font-size:.85rem;font-weight:600;color:#edf5ff}
.login-feature small{font-size:.73rem;color:#7f96b7;margin-top:2px}

.login-wave{
  position:absolute;left:-18%;right:-18%;height:210px;border-radius:50%;pointer-events:none;
  border-top:1px solid rgba(59,130,246,.22);filter:drop-shadow(0 0 7px rgba(59,130,246,.08))
}
.wave-one{top:34%;transform:rotate(-6deg);animation:waveMoveOne 8s ease-in-out infinite alternate}
.wave-two{top:41%;transform:rotate(5deg);opacity:.7;animation:waveMoveTwo 10s ease-in-out infinite alternate}
@keyframes waveMoveOne{to{transform:translateX(35px) rotate(-3deg) scaleY(1.12)}}
@keyframes waveMoveTwo{to{transform:translateX(-28px) rotate(2deg) scaleY(.9)}}

.login-panel-v343{
  display:grid;place-items:center;
  padding:46px 58px;
  background:#fff;
  border-radius:0 20px 20px 0;
}
.login-card-v343{width:min(450px,100%);background:transparent;border:0;box-shadow:none;padding:0}
.login-form-head{margin-bottom:30px}
.login-form-head .eyebrow{font-size:.72rem;letter-spacing:.12em;color:#2563eb;font-weight:700;margin-bottom:9px}
.login-form-head h2{font-size:2rem;line-height:1.15;letter-spacing:-.03em;font-weight:650;color:#111827;margin:0 0 9px}
.login-form-head p{font-size:.95rem;line-height:1.55;color:#667085;margin:0}

.login-field{margin-bottom:19px}
.login-field label{display:block;margin-bottom:8px;font-size:.9rem;color:#344054;font-weight:590}
.login-input-wrap{position:relative}
.login-input-wrap input{
  width:100%;height:52px;border:1px solid #d6dee9;border-radius:10px;background:#fff;padding:0 48px 0 44px;font-size:.95rem;color:#172033;outline:none;
  transition:border-color .17s ease,box-shadow .17s ease,transform .17s ease;
}
.login-input-wrap input:focus{border-color:#8eb0ff;box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.login-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.05rem;color:#8a9ab2;z-index:2}
.login-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#64748b;font-size:.78rem;cursor:pointer;padding:6px 7px}
.login-eye:hover{color:#2563eb}
.remember-v343{display:flex;align-items:center;gap:9px;margin:3px 0 21px;color:#5f6f85;font-size:.88rem;cursor:pointer}
.remember-v343 input{width:17px;height:17px;accent-color:#2563eb}
.login-submit-v343{height:52px;border-radius:10px;font-size:.95rem;font-weight:620;background:linear-gradient(180deg,#2563eb,#1d4ed8);box-shadow:0 9px 22px rgba(37,99,235,.18)}
.login-submit-v343:hover{box-shadow:0 12px 28px rgba(37,99,235,.23)}
.login-submit-v343:disabled{opacity:.72;cursor:wait}
.login-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:inline-block;animation:loginSpin .75s linear infinite}
@keyframes loginSpin{to{transform:rotate(360deg)}}
.login-divider-v343{height:1px;background:#e8edf4;margin:28px 0 22px}
.login-access-note{display:flex;align-items:flex-start;gap:10px;color:#7a8799}
.login-access-note .icon{width:18px;height:18px;color:#3b82f6;flex:0 0 auto;margin-top:2px}
.login-access-note p{margin:0;font-size:.82rem;line-height:1.55}.login-access-note b{color:#4b5b71;font-weight:600}

/* Explicitly ensure no secondary MGI Core login button appears */
.login-v343 .core-login,
.login-v343 .mgi-core-login,
.login-v343 [data-login="core"]{display:none!important}

@media(max-width:980px){
  .login-v343{padding:18px}
  .login-frame{grid-template-columns:1fr;max-width:680px}
  .login-brand-v343{min-height:360px;padding:30px 32px}
  .login-hero-copy{margin-top:55px;margin-bottom:25px}
  .login-hero-copy h1{font-size:2.35rem}
  .login-feature-row{display:none}
  .login-panel-v343{border-radius:0 0 18px 18px;padding:38px 34px}
}
@media(max-width:600px){
  .login-v343{padding:0;align-items:stretch}
  .login-frame{min-height:100vh;border-radius:0;padding:0}
  .login-brand-v343{display:none}
  .login-panel-v343{border-radius:0;padding:34px 22px;min-height:100vh}
  .login-form-head h2{font-size:1.7rem}
}
@media(prefers-reduced-motion:reduce){
  .login-grid-glow,.login-orbit,.login-wave,.login-frame,.login-spinner{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ================================================================
   QMS Web v3.4.4 — Compact Login Layout Hotfix
   More compact and balanced login composition
   ================================================================ */
.login-v343{
  padding:24px;
}
.login-frame{
  width:min(980px,100%);
  min-height:600px;
  grid-template-columns:minmax(360px, 43%) minmax(420px, 57%);
  padding:8px;
  border-radius:24px;
}
.login-brand-v343{
  min-height:584px;
  padding:32px 34px;
}
.login-brand-top{gap:10px}
.login-brand-mark{width:40px;height:40px;border-radius:12px}
.login-brand-copy b{font-size:1.08rem}
.login-brand-copy small{font-size:.66rem}
.login-hero-copy{
  max-width:360px;
  margin-bottom:28px;
}
.login-kicker{margin-bottom:12px;font-size:.68rem}
.login-hero-copy h1{
  font-size:2.55rem;
  line-height:1.04;
}
.login-accent-line{
  width:54px;
  margin:18px 0 18px;
}
.login-hero-copy p{
  font-size:.94rem;
  line-height:1.58;
  max-width:350px;
}
.login-feature-row{
  padding-top:16px;
  gap:0;
}
.login-feature{padding:0 10px}
.login-feature b{font-size:.79rem}
.login-feature small{font-size:.7rem}
.login-panel-v343{
  padding:34px 40px;
}
.login-card-v343{width:min(420px,100%)}
.login-form-head{margin-bottom:22px}
.login-form-head .eyebrow{margin-bottom:8px}
.login-form-head h2{
  font-size:1.7rem;
  margin:0 0 6px;
}
.login-form-head p{
  font-size:.9rem;
  line-height:1.48;
}
.login-field{margin-bottom:15px}
.login-field label{
  margin-bottom:6px;
  font-size:.86rem;
}
.login-input-wrap input{
  height:48px;
  padding:0 46px 0 42px;
  font-size:.92rem;
}
.login-input-icon{left:13px;font-size:1rem}
.login-eye{right:10px;font-size:.76rem}
.remember-v343{
  margin:2px 0 16px;
  font-size:.85rem;
}
.login-submit-v343{
  height:48px;
  font-size:.92rem;
}
.login-divider-v343{margin:20px 0 16px}
.login-access-note p{font-size:.79rem;line-height:1.48}

@media(max-width:1100px){
  .login-frame{width:min(920px,100%)}
  .login-brand-v343{padding:28px 28px}
  .login-hero-copy h1{font-size:2.3rem}
  .login-panel-v343{padding:30px 28px}
}
@media(max-width:980px){
  .login-v343{padding:16px}
  .login-frame{max-width:650px;min-height:auto;grid-template-columns:1fr}
  .login-brand-v343{min-height:320px;padding:26px 26px}
  .login-hero-copy{max-width:420px;margin-top:40px;margin-bottom:18px}
  .login-hero-copy h1{font-size:2.08rem}
  .login-panel-v343{padding:30px 28px}
}
@media(max-width:600px){
  .login-v343{padding:0}
  .login-panel-v343{padding:28px 18px;min-height:100vh}
  .login-card-v343{width:100%}
  .login-form-head{margin-bottom:18px}
  .login-form-head h2{font-size:1.52rem}
  .login-input-wrap input{height:46px}
  .login-submit-v343{height:46px}
}


/* ================================================================
   QMS Web v3.5.0 — Director Executive Dashboard
   Clean, readable, interactive, animated, beginner-friendly
   ================================================================ */
.director-dashboard{display:grid;gap:16px;padding-bottom:28px;color:#172033}
.director-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.director-kicker{display:flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:.10em;font-weight:750;color:#2563eb}.director-kicker>span{width:8px;height:8px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.08);animation:directorPulse 2s ease-in-out infinite}
.director-head h1{font-size:1.9rem;line-height:1.18;margin:6px 0 5px;letter-spacing:-.025em;font-weight:650}.director-head p{margin:0;color:#667085;font-size:.94rem}
.director-head-actions{display:flex;gap:9px}.director-btn{height:42px;border-radius:10px;padding:0 14px;border:1px solid #dfe6ef;background:#fff;color:#475467;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:7px;cursor:pointer;transition:.18s ease}.director-btn .icon{width:16px;height:16px}.director-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(16,24,40,.08)}.director-btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}.director-btn.primary b{min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:.72rem}

.director-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.director-kpi{text-align:left;position:relative;min-height:150px;padding:16px;border:1px solid #e5eaf1;border-radius:14px;background:#fff;box-shadow:0 6px 20px rgba(16,24,40,.04);cursor:pointer;overflow:hidden;transition:.20s ease}.director-kpi:hover{transform:translateY(-3px);border-color:#cfdaf0;box-shadow:0 14px 30px rgba(16,24,40,.075)}.director-kpi-top{display:flex;justify-content:space-between;align-items:center}.director-kpi-top>span{font-size:.82rem;color:#667085;font-weight:560}.director-kpi-top i{width:27px;height:27px;border-radius:8px;background:#eff5ff;color:#2563eb;display:grid;place-items:center;font-style:normal;font-size:.82rem}.director-kpi-value{display:flex;align-items:baseline;gap:4px;margin:13px 0 5px}.director-kpi-value strong{font-size:2rem;letter-spacing:-.04em;line-height:1;font-weight:650;color:#172033}.director-kpi-value small{font-size:.76rem;color:#98a2b3}.director-kpi p{font-size:.78rem;color:#98a2b3;margin:0}.director-kpi em{display:block;margin-top:13px;font-style:normal;font-size:.75rem;color:#2563eb;font-weight:560}.director-kpi.risk .director-kpi-top i{background:#fff1f2;color:#e11d48}.director-kpi.risk .director-kpi-value strong{color:#dc2626}.director-kpi.approval .director-kpi-top i{background:#fff7ed;color:#d97706}.director-kpi.approval .director-kpi-value strong{color:#d97706}.director-kpi.done .director-kpi-top i{background:#ecfdf3;color:#16a34a}.director-kpi.done .director-kpi-value strong{color:#16a34a}.director-kpi-meter{height:5px;background:#eef2f7;border-radius:99px;overflow:hidden;position:absolute;left:16px;right:16px;bottom:15px}.director-kpi-meter>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#60a5fa);transform-origin:left;animation:directorWidth .8s cubic-bezier(.2,.8,.2,1) both}

.director-card,.director-insight-card{background:#fff;border:1px solid #e5eaf1;border-radius:15px;box-shadow:0 7px 22px rgba(16,24,40,.04);padding:18px;transition:.20s ease}.director-card:hover,.director-insight-card:hover{border-color:#d5dfed;box-shadow:0 13px 30px rgba(16,24,40,.06)}
.director-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:15px}.director-section-head>div>span{display:block;font-size:.7rem;letter-spacing:.09em;font-weight:750;color:#2563eb;margin-bottom:5px}.director-section-head h2{font-size:1.12rem;font-weight:620;letter-spacing:-.012em;margin:0 0 4px;color:#243044}.director-section-head p{font-size:.82rem;color:#8a98aa;margin:0}.director-section-head>button{border:0;background:transparent;color:#2563eb;font-size:.78rem;font-weight:580;cursor:pointer;padding:5px}.director-section-head>button:hover{text-decoration:underline}.director-section-head.compact{margin-bottom:13px}
.director-insights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.director-insight{display:grid;grid-template-columns:34px 1fr 12px;align-items:center;gap:10px;min-height:92px;padding:12px;border:1px solid #e9edf3;border-radius:11px;background:#fbfcfe;text-align:left;cursor:pointer;transition:.18s ease}.director-insight:hover{transform:translateY(-2px);background:#fff;box-shadow:0 8px 18px rgba(16,24,40,.06)}.director-insight>i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-style:normal;background:#eff5ff;color:#2563eb;font-weight:700}.director-insight b{display:block;font-size:.88rem;font-weight:610;color:#344054}.director-insight p{font-size:.76rem;line-height:1.45;color:#7c899c;margin:4px 0 0}.director-insight>span{color:#9aa8ba}.director-insight.critical>i{background:#fff1f2;color:#dc2626}.director-insight.warning>i,.director-insight.attention>i{background:#fff7ed;color:#d97706}.director-insight.good>i{background:#ecfdf3;color:#16a34a}

.director-grid{display:grid;gap:12px}.director-grid-main{grid-template-columns:1.55fr .85fr}.director-grid-secondary{grid-template-columns:1fr 1fr}.director-grid-bottom{grid-template-columns:1.25fr .75fr}
.director-chart-legend{display:flex;gap:11px;font-size:.75rem;color:#667085}.director-chart-legend span{display:flex;align-items:center;gap:5px}.director-chart-legend i{width:8px;height:8px;border-radius:50%}.director-chart-legend .blue{background:#2563eb}.director-chart-legend .green{background:#16a34a}
.director-trend-chart{position:relative;height:270px;padding:8px 0 30px}.director-gridlines{position:absolute;left:0;right:0;top:13px;bottom:38px;display:flex;flex-direction:column;justify-content:space-between}.director-gridlines span{height:1px;background:#eef2f6}.director-trend-chart svg{position:absolute;left:0;right:0;top:7px;width:100%;height:220px;overflow:visible}.director-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:directorLineDraw 1.05s cubic-bezier(.2,.8,.2,1) forwards}.director-line.opened{stroke:#2563eb}.director-line.closed{stroke:#16a34a;animation-delay:.15s}.director-dot{fill:#fff;stroke-width:2.2;opacity:0;animation:directorDot .3s ease .65s forwards}.director-dot.opened{stroke:#2563eb}.director-dot.closed{stroke:#16a34a}.director-months{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between}.director-months span{font-size:.75rem;color:#98a2b3}
.director-status-wrap{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:20px;min-height:250px}.director-donut{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;position:relative;animation:directorRing .7s cubic-bezier(.2,.8,.2,1) both}.director-donut:after{content:"";position:absolute;inset:22px;background:#fff;border-radius:50%}.director-donut>div{z-index:1;text-align:center}.director-donut strong{display:block;font-size:1.65rem;font-weight:650;color:#172033}.director-donut small{font-size:.74rem;color:#98a2b3}.director-status-list{display:grid;gap:7px}.director-status-list button{display:grid;grid-template-columns:8px 1fr auto 10px;align-items:center;gap:8px;padding:9px 6px;border:0;border-bottom:1px solid #f0f2f5;background:transparent;text-align:left;cursor:pointer}.director-status-list button:hover{background:#f8fbff}.director-status-list i{width:7px;height:7px;border-radius:50%}.director-status-list .c0{background:#3157d5}.director-status-list .c1{background:#f59e0b}.director-status-list .c2{background:#16a34a}.director-status-list .c3{background:#94a3b8}.director-status-list span{font-size:.82rem;color:#667085}.director-status-list b{font-size:.85rem;color:#344054;font-weight:620}.director-status-list em{font-style:normal;color:#98a2b3}

.director-area-list{display:grid;gap:10px}.director-area-list>button{display:grid;grid-template-columns:1fr 14px;gap:7px 10px;padding:9px 4px;border:0;border-bottom:1px solid #f0f2f5;background:transparent;text-align:left;cursor:pointer}.director-area-list>button:hover span{color:#2563eb}.director-area-list>button>div:first-child{display:flex;justify-content:space-between;gap:10px}.director-area-list span{font-size:.84rem;color:#475467}.director-area-list b{font-size:.76rem;color:#667085;font-weight:560}.director-area-list em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;color:#98a2b3}.director-area-track{height:6px;border-radius:99px;background:#eef2f6;overflow:hidden}.director-area-track>span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);border-radius:99px;transform-origin:left;animation:directorWidth .75s ease both}
.director-approval-list,.director-priority-list{display:grid}.director-approval-list button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 4px;border:0;border-bottom:1px solid #f0f2f5;background:transparent;text-align:left;cursor:pointer}.director-approval-list button:hover b{color:#2563eb}.director-approval-list b{display:block;font-size:.86rem;font-weight:600;color:#344054}.director-approval-list small{font-size:.75rem;color:#98a2b3}.director-approval-list span{font-size:.76rem;color:#2563eb;font-weight:570}
.director-priority-list button{display:grid;grid-template-columns:9px 1fr auto auto;align-items:center;gap:9px;padding:11px 4px;border:0;border-bottom:1px solid #f0f2f5;background:transparent;text-align:left;cursor:pointer}.director-priority-list button:hover b{color:#2563eb}.director-priority-list>button>i{width:7px;height:7px;border-radius:50%;background:#f59e0b}.director-priority-list>button>i.critical{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.08)}.director-priority-list b{display:block;font-size:.86rem;font-weight:600;color:#344054}.director-priority-list small{font-size:.74rem;color:#98a2b3}.director-priority-list>button>span{font-size:.74rem;color:#667085}.director-priority-list>button>em{font-size:.73rem;color:#98a2b3;font-style:normal;white-space:nowrap}.director-empty{padding:22px 6px;text-align:center;color:#98a2b3;font-size:.82rem}.director-empty.success{color:#15803d;background:#f0fdf4;border-radius:9px}
.director-management-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.director-management-grid>div{padding:12px;border:1px solid #edf0f4;border-radius:10px;background:#fbfcfe}.director-management-grid span{display:block;font-size:.76rem;color:#667085}.director-management-grid strong{display:block;font-size:1.35rem;font-weight:650;color:#263449;margin:5px 0 3px}.director-management-grid small{font-size:.7rem;color:#98a2b3}

.director-reveal{opacity:0;transform:translateY(14px);transition:opacity .50s cubic-bezier(.2,.8,.2,1),transform .50s cubic-bezier(.2,.8,.2,1);transition-delay:var(--director-delay,0ms)}.director-reveal.is-visible{opacity:1;transform:none}
@keyframes directorPulse{50%{transform:scale(1.25);opacity:.65}}@keyframes directorLineDraw{to{stroke-dashoffset:0}}@keyframes directorDot{to{opacity:1}}@keyframes directorWidth{from{transform:scaleX(.05);opacity:.35}to{transform:scaleX(1);opacity:1}}@keyframes directorRing{from{transform:scale(.86) rotate(-25deg);opacity:.25}to{transform:none;opacity:1}}
@media(max-width:1200px){.director-kpis{grid-template-columns:repeat(3,1fr)}.director-grid-main{grid-template-columns:1.35fr .85fr}.director-insights{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.director-head{display:block}.director-head-actions{margin-top:13px}.director-kpis{grid-template-columns:1fr 1fr}.director-grid-main,.director-grid-secondary,.director-grid-bottom{grid-template-columns:1fr}.director-status-wrap{grid-template-columns:140px 1fr}}
@media(max-width:600px){.director-kpis{grid-template-columns:1fr}.director-insights{grid-template-columns:1fr}.director-head-actions{display:grid}.director-btn{justify-content:center}.director-status-wrap{grid-template-columns:1fr;justify-items:center}.director-status-list{width:100%}.director-management-grid{grid-template-columns:1fr}.director-priority-list button{grid-template-columns:9px 1fr auto}.director-priority-list>button>em{grid-column:2/4}}
@media(prefers-reduced-motion:reduce){.director-reveal{opacity:1;transform:none;transition:none}.director-kicker>span,.director-line,.director-dot,.director-donut,.director-area-track>span,.director-kpi-meter>span{animation:none!important}}

/* QMS v3.6.0 - full page finding detail, reporting and SVG sidebar */
.nav button .icon{width:20px;height:20px;flex:0 0 20px;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease,filter .18s ease}.nav button{min-height:44px;gap:12px}.nav button:hover .icon{transform:scale(1.06)}.nav button.active .icon{filter:drop-shadow(0 2px 4px rgba(37,99,235,.18))}
.finding-page{max-width:1400px;margin:0 auto;padding-bottom:28px}.finding-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}.finding-head-left{display:flex;gap:12px;align-items:flex-start}.finding-page-head h1{font-size:1.55rem;margin:3px 0 5px;letter-spacing:-.025em}.finding-page-head p{margin:0;color:#667085;font-size:.9rem}.finding-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.finding-understand-card{display:grid;grid-template-columns:44px minmax(0,1fr) 190px;gap:15px;align-items:start;padding:18px;border:1px solid #dbe5f4;border-radius:16px;background:linear-gradient(135deg,#f7faff,#fff);box-shadow:0 7px 22px rgba(16,24,40,.045);margin-bottom:12px;animation:findingRise .38s ease both}.finding-understand-card.red{border-left:4px solid #ef4444}.finding-understand-card.amber{border-left:4px solid #f59e0b}.finding-understand-card.green{border-left:4px solid #16a34a}.finding-understand-icon{width:40px;height:40px;border-radius:12px;background:#eaf2ff;display:grid;place-items:center;color:#2563eb}.finding-understand-icon .icon{width:22px;height:22px}.finding-understand-card>div:nth-child(2)>span{font-size:.7rem;letter-spacing:.09em;color:#2563eb;font-weight:700}.finding-understand-card h2{font-size:1.02rem;line-height:1.45;margin:4px 0;font-weight:610}.finding-understand-card p{font-size:.88rem;color:#667085;line-height:1.55;margin:0}.finding-understand-status{border-left:1px solid #e5eaf2;padding-left:16px}.finding-understand-status small{display:block;font-size:.72rem;color:#98a2b3}.finding-understand-status b{display:block;font-size:.92rem;margin:4px 0;color:#344054}.finding-understand-status em{font-size:.76rem;font-style:normal;color:#667085}
.finding-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.finding-kpis>div{padding:14px 15px;border:1px solid #e5eaf2;background:#fff;border-radius:13px;box-shadow:0 5px 16px rgba(16,24,40,.035);animation:findingRise .42s ease both}.finding-kpis span{display:block;font-size:.73rem;color:#667085}.finding-kpis strong{display:block;font-size:1.35rem;font-weight:640;color:#172033;margin:4px 0 2px}.finding-kpis strong.red{color:#dc2626}.finding-kpis strong.amber{color:#d97706}.finding-kpis strong.green{color:#16a34a}.finding-kpis small{font-size:.72rem;color:#98a2b3}
.finding-visual-grid,.finding-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.finding-card,.finding-edit-card{border:1px solid #e5eaf2;background:#fff;border-radius:15px;padding:17px;box-shadow:0 6px 20px rgba(16,24,40,.04);animation:findingRise .46s ease both}.finding-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.finding-card-head span{font-size:.68rem;letter-spacing:.09em;color:#2563eb;font-weight:700}.finding-card-head h3{font-size:1rem;margin:3px 0 0;font-weight:610}.finding-card-head p{font-size:.8rem;color:#98a2b3;margin:3px 0 0}
.finding-risk-visual{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}.finding-risk-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;animation:findingRing .7s ease both}.finding-risk-ring:after{content:"";position:absolute;inset:18px;background:#fff;border-radius:50%}.finding-risk-ring>div{z-index:1;text-align:center}.finding-risk-ring strong{display:block;font-size:1.5rem;font-weight:650}.finding-risk-ring small{font-size:.72rem;color:#98a2b3}.finding-risk-copy p{font-size:.84rem;color:#667085;line-height:1.55}.risk-scale{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:.68rem;color:#98a2b3}.risk-scale i{height:6px;background:linear-gradient(90deg,#16a34a,#f59e0b,#ef4444);border-radius:99px}
.finding-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.finding-steps>div{text-align:center;position:relative}.finding-steps>div:before{content:"";position:absolute;top:15px;left:-50%;right:50%;height:2px;background:#e7ecf3;z-index:0}.finding-steps>div:first-child:before{display:none}.finding-steps span{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:#f2f4f7;color:#98a2b3;display:grid;place-items:center;margin:0 auto 7px;font-size:.72rem;font-weight:650}.finding-steps b{font-size:.7rem;font-weight:560;color:#98a2b3}.finding-steps>div.done span{background:#eaf2ff;color:#2563eb}.finding-steps>div.done b{color:#475467}.finding-steps>div.done:before{background:#99b8f8}.finding-steps>div.active span{background:#2563eb;color:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.08)}
.director-decision-box{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 17px;background:#fff8ed;border:1px solid #fed7aa;border-radius:14px;margin-bottom:12px}.director-decision-box>div:first-child{display:flex;gap:11px;align-items:flex-start}.director-decision-box .icon{width:24px;height:24px;color:#d97706}.director-decision-box b{font-size:.92rem}.director-decision-box p{margin:3px 0 0;font-size:.79rem;color:#8a5b17}.director-decision-actions{display:flex;gap:7px;flex-wrap:wrap}
.finding-edit-card{margin-bottom:12px;border-color:#b9cdf5;background:#fbfdff}.finding-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.finding-tabs{display:flex;gap:5px;padding:5px;border:1px solid #e5eaf2;background:#fff;border-radius:13px;margin-bottom:10px;position:sticky;top:72px;z-index:10;box-shadow:0 5px 18px rgba(16,24,40,.035)}.finding-tabs button{border:0;background:transparent;border-radius:9px;padding:9px 13px;display:flex;align-items:center;gap:7px;font-size:.82rem;color:#667085;cursor:pointer;transition:.16s ease}.finding-tabs button .icon{width:17px;height:17px}.finding-tabs button:hover{background:#f7f9fc;color:#344054}.finding-tabs button.active{background:#eef4ff;color:#2563eb;font-weight:600}.finding-tabs button em{font-style:normal;background:#f2f4f7;color:#667085;border-radius:99px;padding:1px 6px;font-size:.68rem}.finding-tab-content{animation:findingTab .24s ease both}.finding-description{font-size:.9rem;line-height:1.65;color:#475467}.finding-kv{display:grid;grid-template-columns:130px 1fr;gap:9px 12px;margin:15px 0 0}.finding-kv dt{font-size:.76rem;color:#98a2b3}.finding-kv dd{margin:0;font-size:.83rem;color:#344054;font-weight:520}
.finding-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.finding-action-card{border:1px solid #e5eaf2;border-radius:14px;background:#fff;padding:15px;transition:.18s ease}.finding-action-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(16,24,40,.06)}.finding-action-top{display:flex;justify-content:space-between;gap:12px}.finding-action-top span{font-size:.68rem;color:#2563eb;font-weight:700}.finding-action-top h3{font-size:.9rem;line-height:1.45;margin:3px 0;font-weight:590}.finding-action-top strong{font-size:1.1rem;font-weight:650}.finding-action-progress{height:7px;background:#edf2f7;border-radius:99px;overflow:hidden;margin:11px 0}.finding-action-progress span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);border-radius:99px;animation:findingWidth .6s ease}.finding-action-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.74rem;color:#98a2b3}.finding-action-meta b{color:#475467;font-weight:560}.finding-progress-buttons{display:flex;gap:5px;margin-top:10px}.finding-progress-buttons button{border:1px solid #dbe3ef;background:#fff;border-radius:8px;padding:5px 8px;font-size:.7rem;cursor:pointer}
.finding-evidence-list{display:grid;gap:8px}.finding-evidence-list>div{display:flex;gap:9px;align-items:center;padding:9px;border:1px solid #eef1f5;border-radius:10px}.finding-evidence-list .icon{width:20px;height:20px;color:#2563eb}.finding-evidence-list b{display:block;font-size:.82rem}.finding-evidence-list small{font-size:.72rem;color:#98a2b3}.finding-upload{display:grid;grid-template-columns:1.1fr 1fr auto;gap:7px;margin-top:12px}.verification-state{display:flex;gap:10px}.verification-state>span{width:11px;height:11px;border-radius:50%;margin-top:4px}.verification-state .ok{background:#16a34a}.verification-state .warn{background:#f59e0b}.verification-state .pending{background:#94a3b8}.verification-state b{font-size:.88rem}.verification-state p{font-size:.78rem;color:#667085}.verification-actions{display:flex;gap:7px;margin-top:13px}.finding-approval-list{margin-top:12px}.finding-approval-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #eef1f5}.finding-approval-row:last-child{border-bottom:0}.finding-approval-row b{display:block;font-size:.83rem}.finding-approval-row small{font-size:.72rem;color:#98a2b3}.finding-approval-actions{display:flex;gap:6px}
.finding-timeline{display:grid;gap:10px}.finding-timeline>div{display:grid;grid-template-columns:10px 1fr;gap:9px}.finding-timeline i{width:8px;height:8px;border-radius:50%;background:#8fb1f8;margin-top:5px;box-shadow:0 0 0 4px #eef4ff}.finding-timeline b{display:block;font-size:.81rem;font-weight:560}.finding-timeline small{font-size:.7rem;color:#98a2b3}.finding-empty{padding:22px 10px;text-align:center;color:#98a2b3;font-size:.82rem}.finding-page-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid #e9edf3}.finding-page-footer>div{display:flex;gap:7px;flex-wrap:wrap}
.report-page-head{align-items:flex-start}.report-actions{display:flex;gap:8px;flex-wrap:wrap}.report-preview{background:#fff;border:1px solid #dfe6ef;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(16,24,40,.055)}.report-preview-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid #e7ecf3;padding-bottom:15px;margin-bottom:14px}.report-preview-head>div:first-child>span{font-size:.68rem;letter-spacing:.1em;color:#2563eb;font-weight:700}.report-preview-head h2{font-size:1.35rem;margin:4px 0}.report-preview-head p{font-size:.82rem;color:#667085;margin:0}.report-date{text-align:right}.report-date span{display:block;font-size:.68rem;color:#98a2b3}.report-date b{font-size:.8rem}.report-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:18px}.report-kpis>div{padding:12px;background:#f8fafc;border-radius:10px}.report-kpis span{font-size:.7rem;color:#667085}.report-kpis strong{display:block;font-size:1.35rem;margin-top:3px}.report-kpis .warn strong{color:#d97706}.report-kpis .danger strong{color:#dc2626}.report-kpis .good strong{color:#16a34a}.report-preview-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;margin-bottom:18px}.report-preview-grid section{border:1px solid #edf0f4;border-radius:12px;padding:14px}.report-section-title{font-size:.84rem;font-weight:620;color:#344054;margin-bottom:10px}.report-insight-list{display:grid;gap:8px}.report-insight-list>div{display:grid;grid-template-columns:24px 1fr;gap:7px}.report-insight-list span{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:#eef4ff;color:#2563eb;font-size:.7rem;font-weight:650}.report-insight-list p{font-size:.78rem;color:#667085;margin:2px 0}.report-mini-chart{height:125px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px}.report-mini-chart>div{flex:1;text-align:center}.report-mini-bars{height:90px;display:flex;align-items:flex-end;justify-content:center;gap:4px}.report-mini-bars i{display:block;width:10px;background:#2563eb;border-radius:4px 4px 1px 1px}.report-mini-bars i.done{background:#16a34a}.report-mini-chart small{font-size:.65rem;color:#98a2b3}.report-table{border:1px solid #e7ecf3;border-radius:11px;overflow:hidden}.report-tr{display:grid;grid-template-columns:2.2fr 1fr .7fr .9fr .9fr;gap:8px;align-items:center;width:100%;border:0;border-bottom:1px solid #edf0f4;background:#fff;text-align:left;padding:9px 11px;color:#475467;font-size:.75rem}.report-tr:last-child{border-bottom:0}.report-tr:not(.report-th){cursor:pointer}.report-tr:not(.report-th):hover{background:#f8fbff}.report-th{background:#f4f7fb;font-weight:650;font-size:.7rem;color:#667085}.report-tr b{display:block;font-size:.77rem;color:#344054}.report-tr small{display:block;font-size:.66rem;color:#98a2b3}.report-foot-note{margin-top:12px;padding:10px 12px;border-radius:9px;background:#f8fafc;font-size:.74rem;color:#667085}.report-foot-note span{font-weight:650;color:#2563eb}
@keyframes findingRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes findingRing{from{opacity:.2;transform:rotate(-40deg) scale(.85)}to{opacity:1;transform:none}}@keyframes findingTab{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes findingWidth{from{max-width:0}to{max-width:100%}}
@media(max-width:1050px){.finding-understand-card{grid-template-columns:44px 1fr}.finding-understand-status{grid-column:2;border-left:0;padding-left:0}.finding-kpis{grid-template-columns:repeat(2,1fr)}.finding-visual-grid,.finding-summary-grid,.finding-action-grid,.report-preview-grid{grid-template-columns:1fr}.report-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.finding-page-head{display:block}.finding-head-actions{margin-top:12px}.finding-understand-card{grid-template-columns:1fr}.finding-understand-icon{display:none}.finding-understand-status{grid-column:auto}.finding-kpis{grid-template-columns:1fr 1fr}.finding-tabs{overflow:auto;top:58px}.finding-tabs button{white-space:nowrap}.finding-risk-visual{grid-template-columns:1fr;justify-items:center}.finding-steps{grid-template-columns:repeat(3,1fr);row-gap:14px}.finding-steps>div:before{display:none}.finding-upload{grid-template-columns:1fr}.finding-approval-row{grid-template-columns:1fr auto}.finding-approval-actions{grid-column:1/-1}.finding-page-footer{display:block}.finding-page-footer>div{margin-top:8px}.report-preview{padding:15px}.report-preview-head{display:block}.report-date{text-align:left;margin-top:10px}.report-kpis{grid-template-columns:1fr 1fr}.report-tr{grid-template-columns:1.8fr .8fr .7fr}.report-tr span:nth-child(4),.report-tr span:nth-child(5){display:none}}


/* ================================================================
   QMS v3.7.0 — Live Statistics & Reliable Workspace
   ================================================================ */

/* Critical form content must never disappear because of animation. */
.wizard-shell .wizard-main-card{
  opacity:1!important;
  transform:none!important;
}
.wizard-main-card{animation:qmsWizardSafeIn .24s ease both}
@keyframes qmsWizardSafeIn{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Trust cue for live statistics */
.live-data-note{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:.75rem;color:#667085}
.live-data-note span{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.08)}
.management-head{align-items:flex-start}
.management-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.management-summary-page{max-width:1420px;margin:0 auto}
.management-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px}
.management-kpis button{background:#fff;border:1px solid #e4eaf2;border-radius:13px;padding:14px;text-align:left;cursor:pointer;box-shadow:0 5px 16px rgba(16,24,40,.035);transition:.18s ease}
.management-kpis button:hover{transform:translateY(-2px);border-color:#c9d8f2;box-shadow:0 10px 24px rgba(16,24,40,.06)}
.management-kpis span{display:block;font-size:.72rem;color:#667085}
.management-kpis strong{display:block;font-size:1.38rem;color:#172033;margin:5px 0 3px;font-weight:650}
.management-kpis strong small{font-size:.72rem;color:#98a2b3;font-weight:500}
.management-kpis em{font-size:.69rem;color:#98a2b3;font-style:normal}
.management-kpis .danger strong{color:#dc2626}.management-kpis .warn strong{color:#d97706}.management-kpis .good strong{color:#159447}
.management-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;margin-bottom:12px}
.management-card{background:#fff;border:1px solid #e4eaf2;border-radius:15px;padding:17px;box-shadow:0 6px 20px rgba(16,24,40,.04)}
.management-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px}
.management-card-head>div>span{font-size:.67rem;letter-spacing:.09em;color:#2563eb;font-weight:700}
.management-card-head h2{font-size:1rem;margin:3px 0 2px}
.management-card-head p{font-size:.76rem;color:#98a2b3;margin:0;line-height:1.45}
.management-card-head>button{border:0;background:transparent;color:#2563eb;font-size:.75rem;cursor:pointer}
.management-insights{display:grid;gap:7px}
.management-insights button{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;border:1px solid #edf1f5;border-radius:11px;padding:10px;background:#fff;text-align:left;cursor:pointer;transition:.16s}
.management-insights button:hover{background:#f8fbff;border-color:#d6e2f5}
.management-insights i{width:32px;height:32px;border-radius:9px;background:#eef4ff;color:#2563eb;display:grid;place-items:center;font-style:normal}
.management-insights i .icon{width:17px;height:17px}
.management-insights b{font-size:.8rem}.management-insights p{font-size:.72rem;color:#667085;margin:2px 0;line-height:1.4}.management-insights>button>span{color:#98a2b3}
.management-stat-list{display:grid;gap:4px}
.management-stat-list>div{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:9px 0;border-bottom:1px solid #eff2f6}
.management-stat-list>div:last-child{border-bottom:0}.management-stat-list span{font-size:.76rem;color:#667085}.management-stat-list b{font-size:.83rem}.management-stat-list small{grid-column:1/-1;font-size:.67rem;color:#98a2b3}
.management-indicators{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.management-indicators>div{padding:12px;border:1px solid #edf1f5;border-radius:10px;background:#fafcff}
.management-indicators span{font-size:.71rem;color:#667085}.management-indicators b{display:block;font-size:.98rem;margin-top:4px}.management-indicators small{display:block;font-size:.65rem;color:#98a2b3;margin-top:3px}
.management-actions{display:grid;gap:7px}.management-actions button{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;border:1px solid #edf1f5;background:#fff;border-radius:10px;padding:10px;text-align:left;cursor:pointer}.management-actions button:hover{background:#f8fbff}.management-actions b{font-size:.77rem}.management-actions small{display:block;font-size:.67rem;color:#98a2b3;margin-top:2px}.management-actions strong{font-size:.8rem;color:#2563eb}
.statistics-trust-card{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;background:#f7faff;border:1px solid #dce7f7;border-radius:12px;margin-top:4px}
.statistics-trust-card>.icon{width:22px;height:22px;color:#2563eb;flex:0 0 22px}.statistics-trust-card b{font-size:.8rem}.statistics-trust-card p{font-size:.72rem;line-height:1.5;color:#667085;margin:2px 0 0}

/* Document page: simple and readable */
.nav button .icon{width:20px;height:20px;stroke-width:1.8}
.nav button:has(.icon){letter-spacing:0}
.qa-heatmap button span{font-weight:700}
.qa-aging-legend b{font-variant-numeric:tabular-nums}

@media(max-width:1200px){
  .management-kpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .management-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .management-kpis{grid-template-columns:1fr 1fr}
  .management-indicators{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .wizard-main-card,.management-kpis button{animation:none!important;transition:none!important}
}


/* ================================================================
   MGI QMS v3.8.0 — QA Operations Cockpit
   Clean, beginner-friendly, live-data interactive analytics
   ================================================================ */
.qa-cockpit{max-width:1500px;margin:0 auto;padding-bottom:28px;color:#172033}
.qa-cockpit-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:13px}
.qa-live-label{display:flex;align-items:center;gap:7px;font-size:.68rem;letter-spacing:.075em;font-weight:700;color:#2563eb;text-transform:uppercase}
.qa-live-label span{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.10);animation:qaLivePulse 1.8s ease-in-out infinite}
.qa-cockpit-head h1{font-size:1.72rem;line-height:1.15;margin:6px 0 5px;letter-spacing:-.03em}
.qa-cockpit-head p{margin:0;color:#667085;font-size:.87rem;line-height:1.5}
.qa-cockpit-greeting{display:flex;align-items:center;gap:11px;text-align:right}
.qa-cockpit-greeting small,.qa-cockpit-greeting em{display:block;color:#98a2b3;font-size:.7rem;font-style:normal}
.qa-cockpit-greeting strong{display:block;font-size:.85rem;margin:1px 0 2px}
.qa-alert-bell{position:relative;width:38px;height:38px;border:1px solid #e4eaf2;border-radius:11px;background:#fff;display:grid;place-items:center;color:#667085;box-shadow:0 4px 12px rgba(16,24,40,.035)}
.qa-alert-bell .icon{width:19px;height:19px}.qa-alert-bell.active{color:#2563eb}
.qa-alert-bell b{position:absolute;right:-5px;top:-6px;min-width:18px;height:18px;border-radius:99px;background:#ef4444;color:#fff;font-size:.62rem;display:grid;place-items:center;padding:0 4px;box-shadow:0 2px 7px rgba(239,68,68,.28)}

.qa-cockpit-filter{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto auto;gap:8px;align-items:stretch;background:#fff;border:1px solid #e5eaf2;border-radius:13px;padding:8px;margin-bottom:13px;box-shadow:0 6px 20px rgba(16,24,40,.035);position:relative;z-index:30}
.qa-filter-new{width:100%;height:48px;border:1px solid #e5eaf2;border-radius:9px;background:#fff;padding:7px 11px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;text-align:left;cursor:pointer;transition:.16s}
.qa-filter-new:hover{border-color:#c9d8f2;background:#fbfdff}.qa-filter-new span{font-size:.67rem;color:#98a2b3}.qa-filter-new b{font-size:.77rem;font-weight:570;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qa-filter-new i{font-style:normal;color:#98a2b3}
.qa-filter-menu-light{top:55px;left:0;min-width:100%;background:#fff;border:1px solid #dfe6ef;box-shadow:0 14px 34px rgba(16,24,40,.12);border-radius:10px;padding:5px;z-index:80}
.qa-filter-menu-light button{color:#475467;background:#fff;border-radius:7px;font-size:.76rem}.qa-filter-menu-light button:hover{background:#eef4ff;color:#2563eb}
.qa-area-menu{max-height:260px;overflow:auto;min-width:220px}
.qa-filter-reset-new,.qa-create-btn{height:48px;border-radius:9px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:.76rem;font-weight:580;cursor:pointer;white-space:nowrap}
.qa-filter-reset-new{border:1px solid #dfe6ef;background:#fff;color:#475467}.qa-filter-reset-new:hover{background:#f8fafc}
.qa-filter-reset-new .icon,.qa-create-btn .icon{width:17px;height:17px}
.qa-create-btn{border:1px solid #2563eb;background:#2563eb;color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.18)}.qa-create-btn:hover{background:#1d4ed8;transform:translateY(-1px)}

.qa-section-title{display:flex;justify-content:space-between;gap:15px;align-items:end;margin:3px 2px 8px}.qa-section-title h2{font-size:.94rem;margin:0 0 2px}.qa-section-title p{font-size:.7rem;color:#98a2b3;margin:0}
.qa-focus-section{margin-bottom:10px}
.qa-focus-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.qa-focus-card{position:relative;display:grid;grid-template-columns:39px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid #e5eaf2;background:#fff;border-radius:12px;padding:11px 11px;min-height:78px;cursor:pointer;transition:.19s ease;box-shadow:0 5px 15px rgba(16,24,40,.025)}
.qa-focus-card:hover{transform:translateY(-2px);box-shadow:0 11px 24px rgba(16,24,40,.07);border-color:#cbd9ef}
.qa-focus-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eef4ff;color:#2563eb}.qa-focus-icon .icon{width:20px;height:20px}
.qa-focus-card strong{display:inline-block;font-size:1.25rem;line-height:1;font-weight:650;margin-right:7px}.qa-focus-card b{display:inline;font-size:.72rem}.qa-focus-card small{display:block;font-size:.65rem;color:#98a2b3;margin-top:4px}.qa-focus-card em{font-style:normal;color:#98a2b3;font-size:1.1rem}
.qa-focus-card.danger{border-color:#fecaca;background:linear-gradient(135deg,#fff7f7,#fff)}.qa-focus-card.danger .qa-focus-icon{background:#fee2e2;color:#dc2626}
.qa-focus-card.warning .qa-focus-icon{background:#fff1dd;color:#ea580c}.qa-focus-card.info .qa-focus-icon{background:#eaf2ff;color:#2563eb}.qa-focus-card.purple .qa-focus-icon{background:#f0eaff;color:#7c3aed}.qa-focus-card.success .qa-focus-icon{background:#dcfce7;color:#16a34a}

.qa-kpi-grid-new{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}
.qa-kpi-new{border:1px solid #e5eaf2;background:#fff;border-radius:12px;padding:12px;text-align:left;min-height:119px;cursor:pointer;box-shadow:0 5px 16px rgba(16,24,40,.03);transition:.18s;overflow:hidden}
.qa-kpi-new:hover{transform:translateY(-2px);border-color:#cddaf0;box-shadow:0 12px 25px rgba(16,24,40,.065)}
.qa-kpi-label{display:flex;justify-content:space-between;gap:5px;font-size:.68rem;color:#667085;font-weight:560}.qa-kpi-label>span{width:15px;height:15px;border:1px solid #dfe6ef;border-radius:50%;display:grid;place-items:center;font-size:.57rem;color:#98a2b3}
.qa-kpi-value{display:flex;gap:3px;align-items:baseline;margin:6px 0 3px}.qa-kpi-value strong{font-size:1.55rem;font-weight:660;letter-spacing:-.035em}.qa-kpi-value small{font-size:.68rem;color:#98a2b3}
.qa-kpi-new p{font-size:.65rem;color:#98a2b3;line-height:1.35;margin:0 0 8px}
.qa-kpi-meter{height:4px;background:#edf2f7;border-radius:99px;overflow:hidden}.qa-kpi-meter i{display:block;height:100%;background:#2563eb;border-radius:99px;animation:qaWidthIn .65s ease both}
.qa-kpi-mini{font-size:.61rem;color:#667085;background:#f8fafc;border-radius:7px;padding:5px 7px}.qa-kpi-new.danger .qa-kpi-value strong{color:#dc2626}.qa-kpi-new.warning .qa-kpi-value strong{color:#d97706}.qa-kpi-new.info .qa-kpi-value strong{color:#2563eb}.qa-kpi-new.success .qa-kpi-value strong{color:#159447}
.qa-kpi-mini.danger{background:#fff1f2;color:#b42318}.qa-kpi-mini.warning{background:#fff7ed;color:#b54708}.qa-kpi-mini.info{background:#eff6ff;color:#1d4ed8}.qa-kpi-mini.success{background:#ecfdf3;color:#067647}

.qa-analytics-grid{display:grid;grid-template-columns:1.45fr .85fr .85fr .9fr .78fr .8fr;gap:9px;margin-bottom:10px}
.qa-panel-new{background:#fff;border:1px solid #e5eaf2;border-radius:13px;padding:13px;box-shadow:0 6px 20px rgba(16,24,40,.035);min-width:0;transition:.18s}
.qa-panel-new:hover{border-color:#d3deee;box-shadow:0 12px 28px rgba(16,24,40,.055)}
.qa-panel-head{display:flex;justify-content:space-between;gap:9px;align-items:flex-start;margin-bottom:9px}.qa-panel-head h3{font-size:.79rem;margin:0 0 2px}.qa-panel-head p{font-size:.62rem;color:#98a2b3;margin:0;line-height:1.35}.qa-text-link{border:0;background:transparent;color:#2563eb;font-size:.66rem;font-weight:580;cursor:pointer}
.qa-legend-new{font-size:.6rem;color:#667085;display:flex;align-items:center;gap:4px;white-space:nowrap}.qa-legend-new span{width:7px;height:7px;border-radius:50%}.qa-legend-new .blue{background:#2563eb}.qa-legend-new .green{background:#16a34a}

.qa-trend-chart-new{height:185px;position:relative;padding:5px 4px 19px}.qa-trend-chart-new svg{width:100%;height:150px;overflow:visible;position:relative;z-index:2}
.qa-y-grid{position:absolute;left:7px;right:7px;top:10px;height:135px;display:flex;flex-direction:column;justify-content:space-between}.qa-y-grid span{border-top:1px dashed #edf1f5}
.qa-trend-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:qaDrawLine 1s cubic-bezier(.2,.8,.2,1) forwards}.qa-trend-line.created{stroke:#2563eb}.qa-trend-line.closed{stroke:#16a34a}
.qa-trend-point{cursor:pointer;stroke:#fff;stroke-width:2;transition:.14s}.qa-trend-point:hover{r:7}.qa-trend-point.created{fill:#2563eb}.qa-trend-point.closed{fill:#16a34a}
.qa-chart-months{position:absolute;bottom:0;left:4px;right:4px;display:flex;justify-content:space-between;font-size:.58rem;color:#98a2b3}
.qa-chart-tooltip{position:absolute;top:42px;z-index:5;transform:translateX(-50%);background:#fff;border:1px solid #dfe6ef;border-radius:8px;box-shadow:0 9px 24px rgba(16,24,40,.12);padding:7px 9px;min-width:105px;font-size:.6rem;pointer-events:none}.qa-chart-tooltip b{display:block;font-size:.66rem;margin-bottom:4px}.qa-chart-tooltip span{display:flex;align-items:center;gap:5px;margin:2px 0;color:#667085}.qa-chart-tooltip i{width:6px;height:6px;border-radius:50%}.qa-chart-tooltip i.blue{background:#2563eb}.qa-chart-tooltip i.green{background:#16a34a}

.qa-pareto-new{display:grid;gap:7px}.qa-pareto-new button{border:0;background:transparent;padding:0;display:grid;grid-template-columns:80px 1fr 30px;gap:6px;align-items:center;text-align:left;cursor:pointer}.qa-pareto-new button:hover span{color:#2563eb}.qa-pareto-new span{font-size:.58rem;color:#667085;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qa-pareto-new div{height:7px;background:#edf2f7;border-radius:99px;overflow:hidden}.qa-pareto-new i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);border-radius:99px;animation:qaWidthIn .65s ease}.qa-pareto-new b{font-size:.58rem;color:#475467;text-align:right}

.qa-heatmap-new{display:grid;grid-template-columns:22px 1fr;gap:5px;align-items:center}.qa-heat-y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.51rem;color:#98a2b3;display:flex;align-items:center;justify-content:space-between;height:135px}.qa-heat-y span{font-weight:600;color:#667085}
.qa-heat-cells{display:grid;gap:3px}.qa-heat-row-new{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.qa-heat-row-new button{height:23px;border:0;border-radius:4px;font-size:.58rem;font-weight:650;color:#fff;cursor:pointer;transition:.14s}.qa-heat-row-new button:hover{transform:scale(1.08);box-shadow:0 4px 10px rgba(16,24,40,.16);z-index:2}
.qa-heat-row-new .heat-2,.qa-heat-row-new .heat-3{background:#46b96a}.qa-heat-row-new .heat-4,.qa-heat-row-new .heat-5{background:#a6c94b}.qa-heat-row-new .heat-6,.qa-heat-row-new .heat-7{background:#f5b42c}.qa-heat-row-new .heat-8{background:#f97316}.qa-heat-row-new .heat-9,.qa-heat-row-new .heat-10{background:#e83d35}
.qa-heat-x{display:flex;justify-content:space-between;align-items:center;font-size:.5rem;color:#98a2b3;margin-top:2px}.qa-heat-x b{font-size:.53rem;color:#667085}
.qa-heat-tooltip{font-size:.55rem;color:#667085;margin-top:5px;background:#f8fafc;padding:5px;border-radius:6px}

.qa-aging-new{display:flex;align-items:center;gap:10px}.qa-aging-donut{width:89px;height:89px;border-radius:50%;display:grid;place-items:center;flex:0 0 89px;animation:qaDonutIn .7s ease both}.qa-aging-donut>div{width:55px;height:55px;background:#fff;border-radius:50%;display:grid;place-items:center;align-content:center;box-shadow:0 0 0 1px #edf1f5}.qa-aging-donut strong{font-size:1.02rem}.qa-aging-donut small{font-size:.5rem;color:#98a2b3}
.qa-aging-list{display:grid;gap:4px;flex:1}.qa-aging-list button{border:0;background:transparent;display:grid;grid-template-columns:7px 1fr auto;gap:5px;align-items:center;padding:1px 0;cursor:pointer;text-align:left}.qa-aging-list button:hover span{color:#2563eb}.qa-aging-list i{width:7px;height:7px;border-radius:50%}.qa-aging-list i.green{background:#22c55e}.qa-aging-list i.blue{background:#3b82f6}.qa-aging-list i.orange{background:#f59e0b}.qa-aging-list i.red{background:#ef4444}.qa-aging-list span,.qa-aging-list b{font-size:.54rem}.qa-aging-list span{color:#667085}.qa-oldest{font-size:.55rem;color:#98a2b3;margin-top:7px}.qa-oldest b{color:#dc2626}

.qa-sla-new{text-align:center}.qa-sla-gauge{width:105px;height:105px;border-radius:50%;margin:0 auto;display:grid;place-items:center;clip-path:inset(0 0 50% 0);margin-bottom:-42px}.qa-sla-gauge>div{width:72px;height:72px;border-radius:50%;background:#fff;display:grid;place-items:center;align-content:center;margin-top:0}.qa-sla-gauge strong{font-size:1rem}.qa-sla-gauge small{font-size:.5rem;color:#98a2b3}.qa-sla-new p{font-size:.56rem;line-height:1.4;color:#475467;margin:2px 0 4px}.qa-sla-new>span{font-size:.5rem;color:#98a2b3}
.qa-workload-new{display:grid;gap:7px}.qa-workload-new button{border:0;background:transparent;display:grid;grid-template-columns:75px 1fr 18px;gap:5px;align-items:center;padding:0;cursor:pointer;text-align:left}.qa-workload-new button:hover>span{color:#2563eb}.qa-workload-new span{font-size:.55rem;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qa-workload-new div{height:6px;background:#edf2f7;border-radius:99px;overflow:hidden}.qa-workload-new i{display:block;height:100%;background:#22c55e;border-radius:99px;animation:qaWidthIn .6s ease}.qa-workload-new i.danger{background:#ef4444}.qa-workload-new b{font-size:.56rem;text-align:right}

.qa-bottom-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:9px;margin-bottom:10px}
.qa-action-table{border:1px solid #edf1f5;border-radius:9px;overflow:hidden}.qa-action-row{display:grid;grid-template-columns:2.1fr .85fr .85fr .6fr .78fr .82fr .8fr;gap:6px;align-items:center;width:100%;min-height:37px;padding:6px 8px;border:0;border-bottom:1px solid #edf1f5;background:#fff;text-align:left;font-size:.57rem;color:#667085}.qa-action-row:last-child{border-bottom:0}.qa-action-row:not(.qa-action-head){cursor:pointer}.qa-action-row:not(.qa-action-head):hover{background:#f8fbff}.qa-action-head{min-height:29px;background:#f8fafc;color:#98a2b3;font-size:.52rem}
.qa-action-row b{display:block;color:#344054;font-size:.59rem;font-weight:570;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qa-action-row small{display:block;font-size:.49rem;color:#98a2b3}.qa-action-row em{font-style:normal;font-weight:600}.qa-action-row em.red{color:#dc2626}.qa-action-row em.amber{color:#d97706}.qa-action-row em.green{color:#159447}.qa-action-row .late{color:#dc2626;font-weight:600}.qa-action-row .status{border-radius:6px;padding:4px 5px;display:inline-block}.qa-action-row .status.red{background:#fff1f2;color:#b42318}.qa-action-row .status.amber{background:#fff7ed;color:#b54708}.qa-action-row .status.blue{background:#eff6ff;color:#1d4ed8}.qa-action-row .status.green{background:#ecfdf3;color:#067647}
.qa-progress-cell{width:100%;height:5px;background:#edf2f7;border-radius:99px;overflow:hidden}.qa-progress-cell i{display:block;height:100%;background:#2563eb;border-radius:99px}
.qa-table-hint{font-size:.52rem;color:#98a2b3;margin-top:6px}.qa-table-empty{padding:18px;text-align:center;color:#98a2b3}.qa-table-empty>.icon{width:20px;height:20px;color:#16a34a}.qa-table-empty b{display:block;font-size:.68rem;color:#667085;margin-top:5px}.qa-table-empty small{font-size:.55rem}

.qa-activity-new{display:grid;gap:0}.qa-activity-new button{display:grid;grid-template-columns:28px 1fr auto;gap:7px;align-items:start;width:100%;padding:7px 0;border:0;border-bottom:1px solid #edf1f5;background:#fff;text-align:left;cursor:pointer}.qa-activity-new button:last-child{border-bottom:0}.qa-activity-new button:hover b{color:#2563eb}.qa-activity-new>button>i{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font-style:normal}.qa-activity-new>button>i .icon{width:14px;height:14px}.qa-activity-new i.success{background:#ecfdf3;color:#16a34a}.qa-activity-new i.info{background:#eff6ff;color:#2563eb}.qa-activity-new i.warning{background:#fff7ed;color:#d97706}.qa-activity-new i.neutral{background:#f2f4f7;color:#667085}.qa-activity-new b{display:block;font-size:.58rem;color:#344054;line-height:1.35}.qa-activity-new small{display:block;font-size:.5rem;color:#98a2b3;margin-top:2px}.qa-activity-new time{font-size:.48rem;color:#98a2b3;white-space:nowrap}

.qa-trust-strip{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;background:#f7faff;border:1px solid #dce7f7;border-radius:10px}.qa-trust-strip>.icon{width:19px;height:19px;color:#2563eb;flex:0 0 19px}.qa-trust-strip b{font-size:.68rem}.qa-trust-strip p{font-size:.57rem;color:#667085;margin:2px 0 0;line-height:1.45}
.qa-empty-mini{font-size:.58rem;color:#98a2b3;padding:12px 2px}
.side-help-mini{margin:0 13px 10px;padding:10px;border:1px solid rgba(124,169,255,.17);border-radius:10px;background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(37,99,235,.05));display:flex;gap:8px;align-items:flex-start}.side-help-mini>.icon{width:18px;height:18px;color:#7ca9ff;flex:0 0 18px}.side-help-mini b{display:block;color:#eef5ff;font-size:.7rem}.side-help-mini small{display:block;color:#8291aa;font-size:.56rem;line-height:1.45;margin-top:2px}

@keyframes qaLivePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.55}}
@keyframes qaWidthIn{from{max-width:0;opacity:.4}to{max-width:100%;opacity:1}}
@keyframes qaDrawLine{to{stroke-dashoffset:0}}
@keyframes qaDonutIn{from{opacity:.3;transform:rotate(-35deg) scale(.88)}to{opacity:1;transform:none}}

@media(max-width:1350px){
  .qa-analytics-grid{grid-template-columns:1.4fr 1fr 1fr}.qa-trend-new{grid-column:span 2}
  .qa-kpi-grid-new{grid-template-columns:repeat(3,1fr)}.qa-focus-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .qa-cockpit-filter{grid-template-columns:1fr 1fr 1fr}.qa-area-filter{grid-column:auto}
  .qa-analytics-grid{grid-template-columns:1fr 1fr}.qa-trend-new{grid-column:1/-1}.qa-bottom-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .qa-cockpit-head{display:block}.qa-cockpit-greeting{margin-top:10px;text-align:left}
  .qa-cockpit-filter{grid-template-columns:1fr 1fr}.qa-focus-grid{grid-template-columns:1fr 1fr}.qa-kpi-grid-new{grid-template-columns:1fr 1fr}.qa-analytics-grid{grid-template-columns:1fr}.qa-trend-new{grid-column:auto}
  .qa-action-row{grid-template-columns:1.7fr .7fr .7fr}.qa-action-row>span:nth-child(3),.qa-action-row>span:nth-child(5),.qa-action-row>span:nth-child(6),.qa-action-row>span:nth-child(7){display:none}
}
@media(max-width:520px){
  .qa-focus-grid,.qa-kpi-grid-new,.qa-cockpit-filter{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .qa-live-label span,.qa-trend-line,.qa-aging-donut,.qa-pareto-new i,.qa-workload-new i,.qa-kpi-meter i{animation:none!important}
}


/* ================================================================
   MGI QMS v3.8.1 — QA Readability & Compact Analytics Refinement
   UI-only refinement. Keeps v3.8.0 live-data/API contract unchanged.
   Goal: readable typography, balanced chart sizes, compact tables.
   ================================================================ */
.qa-cockpit{
  max-width:1560px;
  --qa-text-xs:11px;
  --qa-text-sm:12px;
  --qa-text-md:13px;
  --qa-text-lg:14px;
  --qa-title:15px;
}

/* Header and filter hierarchy */
.qa-cockpit-head h1{font-size:clamp(24px,1.6vw,28px);line-height:1.18}
.qa-cockpit-head p{font-size:13px;line-height:1.5;max-width:720px}
.qa-live-label{font-size:11px;letter-spacing:.055em}
.qa-cockpit-greeting small,.qa-cockpit-greeting em{font-size:11px}
.qa-cockpit-greeting strong{font-size:13px}
.qa-filter-new{height:46px;padding:7px 10px}
.qa-filter-new span{font-size:11px}.qa-filter-new b{font-size:12.5px}
.qa-filter-menu-light button{font-size:12px}
.qa-filter-reset-new,.qa-create-btn{height:46px;font-size:12px}

/* Focus cards: compact, but no micro-text */
.qa-section-title{margin:4px 2px 8px}
.qa-section-title h2{font-size:15px;line-height:1.25;margin:0 0 3px}
.qa-section-title p{font-size:11.5px;line-height:1.4}
.qa-focus-grid{gap:9px}
.qa-focus-card{grid-template-columns:40px 1fr auto;gap:9px;min-height:82px;padding:10px 11px;border-radius:11px}
.qa-focus-icon{width:38px;height:38px}.qa-focus-icon .icon{width:19px;height:19px}
.qa-focus-card strong{font-size:21px;line-height:1;font-weight:680;margin-right:6px}
.qa-focus-card b{font-size:12px;line-height:1.25}
.qa-focus-card small{font-size:11px;line-height:1.35;margin-top:4px}
.qa-focus-card em{font-size:18px}

/* KPI: consistent numbers and explanatory text */
.qa-kpi-grid-new{gap:9px;margin-bottom:12px}
.qa-kpi-new{padding:11px 12px;min-height:116px;border-radius:11px}
.qa-kpi-label{font-size:11.5px;line-height:1.3}
.qa-kpi-label>span{width:16px;height:16px;font-size:9px}
.qa-kpi-value{margin:6px 0 4px}
.qa-kpi-value strong{font-size:26px;line-height:1;font-weight:680}
.qa-kpi-value small{font-size:11px}
.qa-kpi-new p{font-size:11px;line-height:1.4;margin:0 0 7px;min-height:30px}
.qa-kpi-mini{font-size:10.5px;line-height:1.3;padding:5px 7px}

/* Analytics: stop squeezing six charts into one row. */
.qa-analytics-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px;
  margin-bottom:11px;
}
.qa-analytics-grid>.qa-panel-new:nth-child(1){grid-column:span 6}
.qa-analytics-grid>.qa-panel-new:nth-child(2){grid-column:span 3}
.qa-analytics-grid>.qa-panel-new:nth-child(3){grid-column:span 3}
.qa-analytics-grid>.qa-panel-new:nth-child(4),
.qa-analytics-grid>.qa-panel-new:nth-child(5),
.qa-analytics-grid>.qa-panel-new:nth-child(6){grid-column:span 4}
.qa-panel-new{padding:13px 14px;border-radius:12px;min-height:0}
.qa-panel-head{gap:10px;margin-bottom:10px}
.qa-panel-head h3{font-size:14px;line-height:1.25;margin:0 0 3px}
.qa-panel-head p{font-size:11px;line-height:1.4}
.qa-text-link{font-size:11.5px}
.qa-legend-new{font-size:11px;gap:5px}.qa-legend-new span{width:8px;height:8px}

/* Trend chart: readable axis, labels and tooltip. */
.qa-trend-chart-new{height:220px;padding:8px 8px 25px 35px}
.qa-trend-chart-new svg{height:182px}
.qa-y-grid{left:35px;right:8px;top:12px;height:158px}
.qa-y-labels{position:absolute;left:0;top:7px;height:169px;width:29px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:#98a2b3;font-size:10px;line-height:1;pointer-events:none}
.qa-chart-months{left:35px;right:8px;font-size:10.5px;line-height:1.2}
.qa-chart-tooltip{top:44px;min-width:122px;padding:8px 10px;font-size:11px}
.qa-chart-tooltip b{font-size:12px}.qa-chart-tooltip span{gap:6px;margin:3px 0}
.qa-trend-point:hover{r:6.5}

/* Pareto: category names remain legible. */
.qa-pareto-new{gap:9px}
.qa-pareto-new button{grid-template-columns:minmax(92px,1.05fr) 1.3fr 40px;gap:8px;min-height:24px}
.qa-pareto-new span,.qa-pareto-new b{font-size:11px;line-height:1.25}
.qa-pareto-new div{height:8px}

/* Heatmap: larger cells and labels, still compact. */
.qa-heatmap-new{grid-template-columns:26px 1fr;gap:7px}
.qa-heat-y{font-size:10px;height:172px}.qa-heat-y span{font-size:10px}
.qa-heat-cells{gap:4px}.qa-heat-row-new{gap:4px}
.qa-heat-row-new button{height:30px;border-radius:5px;font-size:11px;font-weight:680}
.qa-heat-x{font-size:10px;margin-top:4px}.qa-heat-x b{font-size:10px}
.qa-heat-tooltip{font-size:10.5px;line-height:1.35;padding:6px 7px;margin-top:7px}

/* Aging and SLA: balanced donuts/gauges, explanatory labels >= 10px. */
.qa-aging-new{gap:14px;min-height:120px}
.qa-aging-donut{width:104px;height:104px;flex-basis:104px}
.qa-aging-donut>div{width:64px;height:64px}.qa-aging-donut strong{font-size:19px}.qa-aging-donut small{font-size:10px}
.qa-aging-list{gap:7px}.qa-aging-list button{grid-template-columns:8px 1fr auto;gap:7px;padding:2px 0}
.qa-aging-list i{width:8px;height:8px}.qa-aging-list span,.qa-aging-list b{font-size:11px}
.qa-oldest{font-size:10.5px;margin-top:8px}
.qa-sla-gauge{width:120px;height:120px;margin-bottom:-46px}.qa-sla-gauge>div{width:80px;height:80px}
.qa-sla-gauge strong{font-size:19px}.qa-sla-gauge small{font-size:10px}
.qa-sla-new p{font-size:11px;line-height:1.4;margin:4px 0 5px}.qa-sla-new>span{font-size:10.5px;line-height:1.35;display:block}

/* PIC workload: show names without forcing tiny text. */
.qa-workload-new{gap:10px}
.qa-workload-new button{grid-template-columns:minmax(100px,1.15fr) 1.4fr 24px;gap:8px;min-height:23px}
.qa-workload-new span{font-size:11px}.qa-workload-new div{height:7px}.qa-workload-new b{font-size:11px}

/* Bottom section: wide compact action table + fixed activity column. */
.qa-bottom-grid{grid-template-columns:minmax(0,1fr) 330px;gap:10px;margin-bottom:11px;align-items:start}
.qa-action-table{border-radius:9px;overflow-x:auto;overflow-y:hidden}
.qa-action-row{
  grid-template-columns:minmax(220px,2.35fr) minmax(92px,.9fr) minmax(105px,1fr) 72px 88px minmax(82px,.8fr) minmax(105px,1fr);
  gap:8px;
  min-width:880px;
  min-height:42px;
  padding:6px 9px;
  font-size:11px;
  line-height:1.3;
}
.qa-action-head{min-height:32px;font-size:10.5px;font-weight:650;letter-spacing:.01em}
.qa-action-row b{font-size:11.5px;line-height:1.28;font-weight:600}
.qa-action-row small{font-size:10px;line-height:1.3;margin-top:2px}
.qa-action-row .status{padding:4px 6px;border-radius:6px;white-space:nowrap;font-size:10.5px}
.qa-progress-cell{height:6px;margin-bottom:2px}
.qa-table-hint{font-size:10.5px;line-height:1.4;margin-top:7px}
.qa-table-empty{padding:20px 12px}.qa-table-empty b{font-size:12px}.qa-table-empty small{font-size:11px}

/* Activity feed: concise but readable. */
.qa-activity-new button{grid-template-columns:30px 1fr auto;gap:8px;padding:9px 0}
.qa-activity-new>button>i{width:27px;height:27px}.qa-activity-new>button>i .icon{width:15px;height:15px}
.qa-activity-new b{font-size:11.5px;line-height:1.38}.qa-activity-new small{font-size:10.5px;line-height:1.35;margin-top:3px}.qa-activity-new time{font-size:10px}
.qa-trust-strip{padding:10px 12px}.qa-trust-strip b{font-size:12px}.qa-trust-strip p{font-size:10.5px;line-height:1.45}
.qa-empty-mini{font-size:11px;line-height:1.4;padding:13px 2px}
.side-help-mini b{font-size:11.5px}.side-help-mini small{font-size:10.5px;line-height:1.45}

/* Responsive behavior prioritizes readability over squeezing. */
@media(max-width:1350px){
  .qa-analytics-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .qa-analytics-grid>.qa-panel-new:nth-child(1){grid-column:span 6}
  .qa-analytics-grid>.qa-panel-new:nth-child(2),
  .qa-analytics-grid>.qa-panel-new:nth-child(3),
  .qa-analytics-grid>.qa-panel-new:nth-child(4),
  .qa-analytics-grid>.qa-panel-new:nth-child(5),
  .qa-analytics-grid>.qa-panel-new:nth-child(6){grid-column:span 3}
  .qa-bottom-grid{grid-template-columns:1fr}
}
@media(max-width:1020px){
  .qa-analytics-grid{grid-template-columns:1fr 1fr}
  .qa-analytics-grid>.qa-panel-new:nth-child(n){grid-column:auto}
  .qa-analytics-grid>.qa-panel-new:nth-child(1){grid-column:1/-1}
  .qa-kpi-grid-new{grid-template-columns:repeat(3,1fr)}
  .qa-focus-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .qa-cockpit{--qa-text-xs:11px;--qa-text-sm:12px}
  .qa-focus-grid,.qa-kpi-grid-new,.qa-analytics-grid{grid-template-columns:1fr}
  .qa-analytics-grid>.qa-panel-new:nth-child(n){grid-column:auto}
  .qa-cockpit-head h1{font-size:23px}
  .qa-focus-card{min-height:76px}
  .qa-trend-chart-new{height:205px;padding-left:32px}.qa-trend-chart-new svg{height:168px}.qa-y-grid{left:32px;height:148px}.qa-y-labels{height:158px}.qa-chart-months{left:32px}
}


/* ================================================================
   QMS Web v3.8.2 — Compact Clean Split Login
   ================================================================ */
.login-v382{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  overflow:hidden;
  background:linear-gradient(135deg,#f8fbff 0%,#f4f8fd 48%,#eef5ff 100%);
}
.login-layout-v382{
  width:min(1360px,100%);
  min-height:min(760px,calc(100vh - 56px));
  display:grid;
  grid-template-columns:minmax(390px,41%) minmax(560px,59%);
  background:#fff;
  border:1px solid rgba(203,213,225,.72);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(15,23,42,.12);
  animation:login382In .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes login382In{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}
.login-form-side-v382{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px clamp(34px,4vw,64px);
  background:#fff;
  position:relative;
  z-index:2;
}
.login-card-v382{width:min(440px,100%)}
.login-brand-v382{display:flex;align-items:center;gap:12px;margin-bottom:44px}
.login-brand-mark-v382{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#2563eb,#3b82f6 55%,#60a5fa);
  box-shadow:0 10px 24px rgba(37,99,235,.20);
}
.login-brand-mark-v382 .icon{width:25px;height:25px}
.login-brand-v382 b{display:block;color:#0f1f3a;font-size:1.32rem;line-height:1.1;font-weight:760;letter-spacing:-.02em}
.login-brand-v382 small{display:block;margin-top:4px;color:#94a3b8;font-size:.68rem;letter-spacing:.08em;font-weight:650}
.login-head-v382{margin-bottom:30px}
.login-head-v382 h1{margin:0 0 10px;color:#0f172a;font-size:2.15rem;line-height:1.12;letter-spacing:-.045em;font-weight:720}
.login-head-v382 p{margin:0;color:#64748b;font-size:.93rem;line-height:1.62;max-width:410px}
.login-field-v382{margin-bottom:17px}
.login-field-v382 label{display:block;margin-bottom:7px;color:#1e293b;font-size:.88rem;font-weight:650}
.login-input-v382{position:relative}
.login-input-v382 input{
  width:100%;height:50px;border:1px solid #d8e1ed;border-radius:10px;background:#fff;
  padding:0 48px 0 45px;color:#0f172a;font-size:.93rem;outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.login-input-v382 input::placeholder{color:#94a3b8}
.login-input-v382 input:focus{border-color:#7da5ff;box-shadow:0 0 0 4px rgba(37,99,235,.08);background:#fff}
.login-input-icon-v382{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;color:#94a3b8;display:grid;place-items:center}
.login-input-icon-v382 .icon{width:19px;height:19px}
.login-eye-v382{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#94a3b8;display:grid;place-items:center;padding:0}
.login-eye-v382:hover{color:#2563eb;background:#f1f5f9}
.login-eye-v382 .icon{width:18px;height:18px}
.login-remember-v382{display:flex;align-items:center;gap:9px;margin:2px 0 18px;color:#64748b;font-size:.84rem;cursor:pointer;width:max-content}
.login-remember-v382 input{width:16px;height:16px;accent-color:#2563eb}
.login-submit-v382{height:50px;border-radius:10px;font-size:.94rem;font-weight:700;background:linear-gradient(180deg,#2870ed,#1d5fe0);box-shadow:0 10px 22px rgba(37,99,235,.20)}
.login-submit-v382:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(37,99,235,.24)}
.login-submit-v382:disabled{transform:none;cursor:wait;opacity:.72}
.login-security-v382{display:flex;align-items:center;gap:10px;margin-top:24px;padding:12px 13px;border:1px solid #e4eaf2;border-radius:10px;background:#f8fafc;color:#64748b}
.login-security-v382>.icon{width:18px;height:18px;color:#2563eb;flex:0 0 auto}
.login-security-v382 b{display:block;color:#334155;font-size:.78rem;font-weight:700}
.login-security-v382 small{display:block;margin-top:2px;font-size:.75rem;line-height:1.4}
.login-foot-v382{margin-top:16px;text-align:center;color:#94a3b8;font-size:.72rem;letter-spacing:.01em}

.login-visual-v382{position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#f8fbff 0%,#edf4ff 100%);border-left:1px solid #edf2f8}
.login-visual-v382:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.0),rgba(255,255,255,.15));pointer-events:none}
.login-visual-glow-v382{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:rgba(147,197,253,.28);filter:blur(80px);right:-12%;top:0;animation:login382Glow 8s ease-in-out infinite alternate}
.login-visual-v382 img{position:relative;z-index:1;width:min(96%,860px);height:auto;display:block;transform:translateY(8px);filter:drop-shadow(0 22px 34px rgba(37,99,235,.08));animation:login382Float 8s ease-in-out infinite alternate}
.login-visual-caption-v382{position:absolute;z-index:2;left:38px;bottom:30px;display:flex;flex-direction:column;gap:4px;color:#334155}
.login-visual-caption-v382 b{font-size:.9rem;font-weight:750;color:#172554}
.login-visual-caption-v382 span{font-size:.72rem;color:#7c8da5;letter-spacing:.03em}
@keyframes login382Float{to{transform:translateY(-2px)}}
@keyframes login382Glow{to{transform:translate(-4%,5%) scale(1.08);opacity:.75}}

@media(max-width:1050px){
  .login-v382{padding:18px}
  .login-layout-v382{grid-template-columns:minmax(360px,47%) minmax(430px,53%);min-height:min(680px,calc(100vh - 36px))}
  .login-form-side-v382{padding:38px 34px}
  .login-brand-v382{margin-bottom:34px}
  .login-head-v382 h1{font-size:1.9rem}
  .login-visual-caption-v382{left:26px;bottom:22px}
}
@media(max-width:820px){
  .login-v382{padding:0;background:#fff}
  .login-layout-v382{display:block;min-height:100vh;border:0;border-radius:0;box-shadow:none}
  .login-form-side-v382{min-height:100vh;padding:34px 24px}
  .login-card-v382{width:min(430px,100%)}
  .login-visual-v382{display:none}
  .login-brand-v382{margin-bottom:40px}
}
@media(max-width:480px){
  .login-form-side-v382{padding:28px 20px}
  .login-brand-v382{margin-bottom:34px}
  .login-head-v382 h1{font-size:1.75rem}
  .login-head-v382 p{font-size:.88rem}
  .login-input-v382 input,.login-submit-v382{height:48px}
  .login-security-v382{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.login-layout-v382,.login-visual-v382 img,.login-visual-glow-v382,.login-spinner{animation:none!important}}


/* ================================================================
   QMS Web v3.8.4 — Centered Login Layout Hotfix
   Fix outer legacy login-shell grid causing left-aligned split login
   ================================================================ */
.login-shell.login-v382{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:linear-gradient(135deg,#f8fbff 0%,#f4f8fd 48%,#eef5ff 100%);
}
.login-shell.login-v382 > .login-layout-v382{
  margin:0 auto;
  flex:0 1 min(1360px,100%);
}
@media(max-width:820px){
  .login-shell.login-v382{padding:0;background:#fff;display:block}
}


/* ================================================================
   QMS Web v4.0.0 — Single Owner / Kepala Bidang Work Center
   ================================================================ */
.qa-work-head{align-items:center}
.qa-work-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.qa-work-kpi{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px;text-align:left;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;box-shadow:0 3px 14px rgba(15,23,42,.03);transition:.18s}
.qa-work-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.07);border-color:#bfdbfe}
.qa-work-kpi>.icon{width:34px;height:34px;padding:8px;border-radius:10px;background:#eff6ff;color:#2563eb}
.qa-work-kpi strong{font-size:24px;line-height:1;color:#0f172a;margin-right:8px}
.qa-work-kpi b{display:block;margin-top:5px;font-size:12px;color:#1e293b}
.qa-work-kpi small{display:block;margin-top:3px;color:#64748b;font-size:10.5px;line-height:1.35}
.qa-work-kpi.danger>.icon{background:#fef2f2;color:#dc2626}.qa-work-kpi.warning>.icon{background:#fff7ed;color:#d97706}.qa-work-kpi.info>.icon{background:#eff6ff;color:#2563eb}
.qa-work-panel{overflow:hidden}.qa-work-list{display:grid}.qa-work-list>button{width:100%;border:0;border-bottom:1px solid #eef2f7;background:#fff;padding:12px 16px;display:grid;grid-template-columns:5px minmax(0,1fr) auto 18px;gap:11px;align-items:center;text-align:left;transition:.15s}.qa-work-list>button:last-child{border-bottom:0}.qa-work-list>button:hover{background:#f8fbff}.qa-work-indicator{width:5px;height:34px;border-radius:99px;background:#2563eb}.qa-work-list>button.danger .qa-work-indicator{background:#dc2626}.qa-work-list>button.warning .qa-work-indicator{background:#d97706}.qa-work-list>button.info .qa-work-indicator{background:#2563eb}.qa-work-list b{display:block;font-size:12px;color:#0f172a}.qa-work-list small{display:block;margin-top:4px;font-size:10.5px;color:#64748b;line-height:1.4}.qa-work-list em{font-size:10.5px;color:#64748b;font-style:normal;white-space:nowrap}.qa-work-list i{font-size:18px;color:#94a3b8;font-style:normal}.management-notice-intro{background:linear-gradient(135deg,#eff6ff,#f8fafc);border:1px solid #dbeafe;border-radius:14px;padding:15px 17px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.management-notice-intro>div{display:flex;gap:11px;align-items:flex-start}.management-notice-intro .icon{color:#2563eb;width:24px;height:24px}.management-notice-intro b{font-size:12.5px}.management-notice-intro p{margin:3px 0 0;color:#64748b;font-size:11px;line-height:1.45}
@media(max-width:1100px){.qa-work-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.qa-work-kpis{grid-template-columns:1fr 1fr}.qa-work-list>button{grid-template-columns:5px minmax(0,1fr) 18px}.qa-work-list em{display:none}.management-notice-intro{align-items:flex-start;flex-direction:column}}
@media(max-width:460px){.qa-work-kpis{grid-template-columns:1fr}}


/* ================================================================
   QMS Web v4.1.0 — Integrated Work Center & Director Information
   ================================================================ */
.qa-work-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.qa-work-kpi.success>.icon{background:#ecfdf5;color:#059669}.qa-next-label{color:#1d4ed8;font-size:10px}
.director-notice-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.director-notice-summary>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}.director-notice-summary small{display:block;color:#64748b;font-size:10.5px}.director-notice-summary strong{display:block;font-size:23px;margin-top:5px;color:#0f172a}.director-notice-list{display:grid}.director-notice-list article{display:grid;grid-template-columns:5px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px 17px;border-bottom:1px solid #eef2f7}.director-notice-list article:last-child{border-bottom:0}.director-notice-tone{width:5px;height:44px;border-radius:99px;background:#2563eb}.director-notice-tone.attention{background:#d97706}.director-notice-tone.critical{background:#dc2626}.director-notice-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.director-notice-title b{font-size:12.5px;color:#0f172a}.director-notice-list p{margin:4px 0;color:#475569;font-size:11px;line-height:1.45}.director-notice-list small{color:#94a3b8;font-size:10px}.director-notice-actions{display:flex;gap:7px}.director-notice-actions .btn{padding:8px 10px;font-size:10.5px}
@media(max-width:1180px){.qa-work-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.director-notice-summary{grid-template-columns:1fr 1fr}.director-notice-list article{grid-template-columns:5px minmax(0,1fr)}.director-notice-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}}


/* ================================================================
   QMS Web v4.1.4 — Beginner UX + Blank Page Safety
   Content is visible by default. Motion is enhancement, never a gate.
   ================================================================ */
.content [data-animate],
.content .panel,
.content .analytic-card,
.content .wizard-main-card,
.content .table-wrap,
.content .detail-card,
.reveal-item{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
.content.page-transitioning{opacity:.82;transform:none;filter:none}

.ux-state-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;margin:0 0 16px;border:1px solid #dbe5f2;border-radius:14px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.035)}
.ux-state-card>.icon{width:28px;height:28px;color:#2563eb}.ux-state-card b{display:block;font-size:14px}.ux-state-card p{margin:3px 0;color:#64748b;font-size:12.5px;line-height:1.45}.ux-state-card small{color:#94a3b8;font-size:11px}.ux-state-card.error-state{border-color:#fed7aa;background:#fffaf5}.ux-state-card.error-state>.icon{color:#d97706}.ux-state-card.welcome-state{border-color:#bfdbfe;background:#f8fbff}

.beginner-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.beginner-action-grid>button{border:1px solid #e2e8f0;border-radius:14px;background:#fff;padding:16px;text-align:left;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;box-shadow:0 4px 14px rgba(15,23,42,.025);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.beginner-action-grid>button:hover{border-color:#bfdbfe;box-shadow:0 8px 24px rgba(37,99,235,.08);transform:translateY(-1px)}.beginner-action-grid>button>.icon{width:38px;height:38px;padding:9px;border-radius:11px;background:#eff6ff;color:#2563eb}.beginner-action-grid b{display:block;font-size:13px;color:#172033;margin-bottom:3px}.beginner-action-grid small{display:block;color:#64748b;font-size:11px;line-height:1.4}.beginner-action-grid em{font-style:normal;font-size:11px;font-weight:800;color:#2563eb;white-space:nowrap}
.beginner-metrics .metric small{display:block;color:#94a3b8;font-size:10.5px;line-height:1.35;margin-top:5px}.beginner-governance-grid{align-items:start}.friendly-empty{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:18px;border:1px dashed #dbe3ee;border-radius:12px;background:#fafcff}.friendly-empty>.icon{width:24px;height:24px;color:#64748b}.friendly-empty b{font-size:12.5px}.friendly-empty p{margin:3px 0 0;color:#64748b;font-size:11px;line-height:1.45}.simple-progress-actions{display:flex;gap:6px;margin-top:9px}.simple-progress-actions button{border:1px solid #dbe3ee;background:#fff;border-radius:8px;padding:6px 8px;font-size:10px;font-weight:750}.integration-simple-panel{margin-top:16px}.integration-simple-list{display:grid;gap:8px}.integration-simple-list>div{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;border-bottom:1px solid #f1f5f9;padding:9px 0}.integration-simple-list>div:last-child{border-bottom:0}.integration-simple-list .icon{width:20px;height:20px;color:#2563eb}.integration-simple-list b{font-size:12px}.integration-simple-list small{display:block;margin-top:2px;color:#94a3b8;font-size:10px}.integration-simple-list strong{font-size:12px;color:#334155}
@media(max-width:1120px){.beginner-action-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.beginner-action-grid{grid-template-columns:1fr}.ux-state-card,.friendly-empty{grid-template-columns:auto minmax(0,1fr)}.ux-state-card>button,.friendly-empty>button{grid-column:1/-1;width:100%}}

/* QMS Web v4.1.5 — render recovery boundary */
.qms-runtime-error{position:fixed;inset:0;z-index:99999;background:rgba(248,250,252,.97);display:grid;place-items:center;padding:24px}.qms-runtime-error>div{width:min(520px,100%);background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.16);padding:24px}.qms-runtime-error strong{display:block;font-size:18px;color:#0f172a}.qms-runtime-error p{margin:8px 0 18px;color:#64748b;font-size:13px;line-height:1.55;word-break:break-word}.qms-runtime-error button{border:0;border-radius:10px;background:#2563eb;color:#fff;padding:10px 14px;font-weight:750}