@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
:root{
--brand:#7B2FFF;--brand-strong:#5F1FD6;--brand-soft:#F0E8FF;--brand-line:#DCCBFF;
--ink:#160A25;--muted:#5D5470;--line:#E9E2F6;--page:#FBF9FF;--card:#fff;
--green:#1DBF73;--green-soft:#E4F9EF;
--red:#C92A2A;--red-soft:#FDEBEB;
--amber:#A96212;--amber-soft:#FFF4E0;
--blue-soft:#EDEAFF;
--shadow:0 16px 44px rgba(22,10,37,.07);
--radius-card:8px;--radius-btn:2px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 'Plus Jakarta Sans',Arial,sans-serif}
.app-shell{min-height:100vh}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{display:block;width:84px;height:28px;object-fit:contain;object-position:left center}
.brand div{display:flex;flex-direction:column;line-height:1.2}
.brand strong{font-size:16px;font-weight:800;color:var(--ink)}
.brand span:last-child{color:var(--muted);font-size:12.5px;font-weight:600}
.mode{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--brand-soft);color:var(--brand-strong);border-radius:2px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.mode-dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
main{max-width:1500px;margin:auto;padding:28px 32px 48px}
.hero{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:800;font-size:11px;margin:0 0 6px}
.hero h1{font:800 34px/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;margin:0;color:var(--ink)}
.subtitle{margin:8px 0 0;color:var(--muted)}
.source-health{display:flex;gap:10px;align-items:center}
.health-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:800}
.source-health div{display:flex;flex-direction:column}
.source-health span{color:var(--muted);font-size:12px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.metric{border:1px solid var(--line);background:var(--card);border-radius:var(--radius-card);padding:17px 18px;text-align:left;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:start;font-family:inherit}
.metric:hover{border-color:var(--brand-line)}
.metric span{font-weight:700}
.metric strong{font:800 30px/1 'Plus Jakarta Sans',sans-serif;color:var(--ink)}
.metric small{grid-column:1/-1;color:var(--muted);margin-top:6px;font-size:12px;font-weight:600}
.workspace{display:grid;grid-template-columns:minmax(780px,1.65fr) minmax(340px,.65fr);gap:16px;align-items:start}
.queue-card,.detail{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow);border:1px solid var(--line)}
.toolbar{padding:16px;display:flex;gap:12px;border-bottom:1px solid var(--line);align-items:center}
.search{height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-btn);min-width:250px;flex:1;background:#fff}
.search:focus-within{border-color:var(--brand)}
.search span{font-size:20px;color:var(--muted)}
.search input{border:0;outline:0;width:100%;font:inherit;background:none}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;cursor:pointer;color:var(--muted);font-weight:700;font-family:inherit}
.chip.active{color:var(--brand-strong);background:var(--brand-soft);border-color:var(--brand-line)}
.active-filter{padding:8px 16px;background:var(--page);color:var(--muted);font-size:12px}
.active-filter button{border:0;background:none;color:var(--brand);font-weight:800;cursor:pointer}
.queue-head{padding:16px 18px 10px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.queue-head>div{display:flex;align-items:baseline;gap:8px}
.queue-head h2{font:800 22px 'Plus Jakarta Sans',sans-serif;margin:0;color:var(--ink)}
.queue-row{width:100%;display:grid;grid-template-columns:68px 1.2fr 1.55fr .8fr .72fr .72fr .65fr 18px;gap:12px;align-items:center;text-align:left;background:#fff;border:0;border-top:1px solid var(--line);padding:15px 16px;cursor:pointer;color:inherit;font-family:inherit}
.queue-row:hover,.queue-row.selected{background:var(--page)}
.queue-row.selected{box-shadow:inset 3px 0 var(--brand)}
.queue-row>div{min-width:0;display:flex;flex-direction:column}
.queue-row strong{font-size:12.5px;font-weight:700}
.queue-row span{font-size:11.5px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.priority{align-items:flex-start}
.priority-dot{width:8px;height:8px;border-radius:50%;margin-bottom:4px}
.priority-dot.critical{background:var(--red)}
.priority-dot.high{background:var(--amber)}
.priority-dot.normal{background:var(--brand)}
.priority-dot.low{background:#b6acc9}
.identity strong{font-size:13px}
.exception{color:var(--red)!important;background:var(--red-soft);padding:4px 7px;border-radius:2px}
.clear{color:var(--green)!important}
.row-arrow{font-size:22px!important;color:#C4B9DC!important}
.empty{padding:60px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty span{color:var(--muted)}
.empty button{margin-top:8px;padding:10px 14px;border:0;border-radius:var(--radius-btn);background:var(--brand);color:#fff;font-weight:800;cursor:pointer}
.detail{position:sticky;top:84px;overflow:hidden}
.detail-head{padding:20px;display:flex;justify-content:space-between;gap:16px}
.detail h2{font:800 25px 'Plus Jakarta Sans',sans-serif;margin:4px 0}
.detail h3{font-size:13px;font-weight:800;margin:0 0 11px}
.detail p{margin:0;color:var(--muted)}
.type{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:11px;font-weight:800}
.priority-pill{height:max-content;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}
.priority-pill.critical{color:var(--red);background:var(--red-soft)}
.priority-pill.high{color:var(--amber);background:var(--amber-soft)}
.priority-pill.normal,.priority-pill.low{color:var(--brand-strong);background:var(--brand-soft)}
.detail section{padding:18px 20px;border-top:1px solid var(--line)}
.callout{display:flex;gap:10px;background:var(--page)}
.callout>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-strong);font-weight:800;flex:none}
.callout.warn{background:var(--red-soft)}
.callout.warn>span{background:#fff;color:var(--red)}
.callout p{font-size:13px;line-height:1.5;margin-top:3px}
.section-title{display:flex;justify-content:space-between}
.suggested{font-size:11px;background:var(--blue-soft);padding:3px 6px;border-radius:2px}
.action-box{padding:12px;border-radius:var(--radius-btn);background:var(--page);display:flex;flex-direction:column}
.action-box span{color:var(--muted);font-size:12px;margin-top:3px}
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.gate{padding:10px 8px;border:1px solid var(--line);border-radius:var(--radius-btn);display:flex;gap:7px;align-items:center}
.gate>div{display:flex;flex-direction:column;min-width:0}
.gate strong{font-size:11px}
.gate span:last-child{color:var(--muted);font-size:10.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gate-status{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:10px}
.gate-status.confirmed,.gate-status.approved,.gate-status.validated{background:var(--green-soft);color:var(--green)}
.gate-status.pending,.gate-status.not_validated{background:var(--amber-soft);color:var(--amber)}
blockquote{margin:0;padding:12px;border-left:3px solid var(--brand-line);background:var(--page);border-radius:0 4px 4px 0;font-size:13px}
.meta{font-size:12px!important;margin-top:7px!important}
dl{margin:0}
dl div{display:flex;justify-content:space-between;padding:5px 0}
dt{color:var(--muted)}
dd{margin:0;font-weight:700}
.detail footer{padding:13px 20px;background:var(--page);color:var(--muted);font-size:12px;text-align:center}
@media(max-width:1050px){main{padding:22px 18px}
.workspace{grid-template-columns:1fr}
.detail{position:static}
.queue-row{grid-template-columns:60px 1.1fr 1.5fr .8fr .72fr}
.queue-row .due,.queue-row .flags{display:none}
}
@media(max-width:620px){.topbar{padding:0 16px}
.brand-logo{width:72px;height:24px}
.mode{font-size:0}
.mode:after{content:'Local';font-size:11px}
.mode-dot{display:block}
.hero{align-items:flex-start}
.hero h1{font-size:28px}
.source-health{display:none}
.metrics{grid-template-columns:repeat(2,1fr)}
main{padding:18px 12px}
.toolbar{display:block}
.filters{margin-top:10px;overflow:auto;flex-wrap:nowrap}
.chip{white-space:nowrap}
.workspace{display:block}
.queue-card{border-radius:var(--radius-card)}
.queue-head>span{display:none}
.queue-row{grid-template-columns:48px 1fr 18px;padding:14px 12px}
.queue-row .message,.queue-row .stage,.queue-row .pending,.queue-row .due,.queue-row .flags{display:none}
}