:root { --red:#e30b17; --red-dark:#bd0812; --red-soft:#fff0f1; --ink:#101114; --muted:#6f727a; --line:#e6e7e9; --surface:#fff; --canvas:#f5f5f6; --success:#1f7a4c; --warning:#a76b00; --sidebar:258px; }
* { box-sizing:border-box; }
html { background:var(--canvas); }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Arial,var(--font-geist-sans),sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); background:#0d0e10; color:#fff; z-index:40; display:flex; flex-direction:column; border-right:1px solid #25272b; }
.sidebar-head { min-height:76px; display:flex; align-items:center; padding:0 22px; border-bottom:1px solid #292a2e; }
.brand { display:flex; align-items:center; gap:12px; letter-spacing:-.03em; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; }
.brand-mark img { width:45px; height:45px; object-fit:contain; transform:scale(1.35); }
.brand>span:last-child { display:flex; align-items:baseline; gap:6px; }
.brand b { font-size:19px; }
.brand small { color:#b6b7bc; font-size:10px; letter-spacing:.21em; font-weight:800; }
.sidebar nav { padding:16px 12px; overflow-y:auto; flex:1; }
.nav-group { color:#6e7178; font-size:9px; font-weight:800; letter-spacing:.18em; margin:18px 12px 8px; }
.nav-group:first-child { margin-top:2px; }
.sidebar nav button { width:100%; min-height:41px; background:transparent; color:#bfc1c7; border:0; border-radius:8px; display:flex; align-items:center; gap:11px; padding:0 11px; text-align:left; font-size:12.5px; font-weight:650; transition:.18s ease; }
.sidebar nav button:hover { background:#191b1e; color:#fff; }
.sidebar nav button.active { background:#242528; color:#fff; box-shadow:inset 3px 0 var(--red); }
.nav-mark { width:25px; height:25px; border:1px solid #3a3c41; border-radius:6px; display:grid; place-items:center; font-size:8px; letter-spacing:.04em; font-weight:900; color:#a6a8ae; }
.active .nav-mark { color:#fff; border-color:#55575e; }
.nav-badge { margin-left:auto; background:#34363b; color:#c7c9ce; border-radius:99px; min-width:20px; padding:2px 6px; text-align:center; font-size:9px; }
.active .nav-badge,.sidebar nav button:hover .nav-badge { background:var(--red); color:#fff; }
.storage-card { margin:8px 16px 14px; padding:12px; border:1px solid #2e3034; border-radius:9px; background:#161719; }
.storage-card div { display:flex; justify-content:space-between; font-size:10px; color:#c0c2c6; }
.storage-card progress,.load progress { width:100%; height:4px; appearance:none; border:0; overflow:hidden; border-radius:9px; background:#34363a; }
progress::-webkit-progress-bar { background:#e8e9eb; border-radius:9px; }
progress::-webkit-progress-value { background:var(--red); border-radius:9px; }
progress::-moz-progress-bar { background:var(--red); border-radius:9px; }
.storage-card small { display:block; color:#777a81; font-size:9px; margin-top:6px; }
.sidebar-user { min-height:70px; padding:11px 16px; border-top:1px solid #292a2e; display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:900; flex:0 0 auto; }
.sidebar-user>span:nth-child(2) { min-width:0; flex:1; }
.sidebar-user b,.sidebar-user small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user b { font-size:11px; }
.sidebar-user small { color:#85888f; font-size:9px; margin-top:3px; }
.sidebar-user button { border:0; color:#888b91; background:transparent; }
.main { margin-left:var(--sidebar); min-height:100vh; }
.topbar { height:68px; padding:0 34px; display:flex; align-items:center; gap:20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.breadcrumbs { display:flex; gap:9px; align-items:center; font-size:11px; flex:1; }
.breadcrumbs span,.breadcrumbs b { color:#9a9da3; font-weight:500; }
.breadcrumbs strong { color:#45474d; }
.search { width:min(390px,36vw); height:36px; border:1px solid #dedfe2; background:#f8f8f9; border-radius:8px; display:flex; align-items:center; gap:9px; padding:0 10px; color:#8b8e95; }
.search input { min-width:0; flex:1; border:0; background:transparent; outline:none; font-size:11px; color:var(--ink); }
.search kbd { border:1px solid #d6d7d9; background:#fff; border-radius:4px; padding:2px 5px; font-size:8px; }
.icon-button,.help-button { height:34px; border:1px solid #dedfe2; background:#fff; border-radius:8px; position:relative; }
.icon-button { width:34px; font-size:17px; }
.icon-button i { position:absolute; width:6px; height:6px; border:1px solid #fff; background:var(--red); border-radius:50%; right:7px; top:7px; }
.help-button { padding:0 12px; font-size:10px; font-weight:700; }
.menu-toggle,.mobile-close { display:none; }
.content { max-width:1540px; margin:0 auto; padding:34px; }
.welcome-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:25px; }
.eyebrow { display:block; color:#8b8e94; font-size:8.5px; line-height:1.2; letter-spacing:.16em; font-weight:900; }
.eyebrow.red { color:var(--red); }
h1 { font-size:clamp(28px,3vw,38px); letter-spacing:-.045em; margin:7px 0 8px; }
.welcome-row p { color:var(--muted); margin:0; font-size:12px; }
.welcome-row p b { color:var(--red); }
.actions { display:flex; gap:9px; }
.button { height:38px; border-radius:8px; padding:0 14px; font-size:10.5px; font-weight:800; transition:.18s; }
.button.secondary { border:1px solid #d9dadd; background:#fff; color:#383a3f; }
.button.primary { border:1px solid var(--red); background:var(--red); color:#fff; box-shadow:0 5px 14px rgba(227,11,23,.18); }
.button:hover { transform:translateY(-1px); }
.button.primary:hover { background:var(--red-dark); }
.button.wide { width:100%; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:15px; }
.metrics-grid.three { grid-template-columns:repeat(3,1fr); }
.metric-card { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:16px 17px; }
.metric-top { display:flex; justify-content:space-between; align-items:center; color:#73767d; font-size:9.5px; font-weight:700; }
.metric-top i { width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px var(--red-soft); }
.metric-card strong { display:block; font-size:25px; letter-spacing:-.04em; margin:12px 0 5px; }
.metric-card small { color:#94979d; font-size:9px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:15px; margin-bottom:15px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:11px; min-width:0; }
.panel-head { min-height:72px; padding:16px 19px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #ececef; }
.panel-head h2 { margin:5px 0 0; font-size:15px; letter-spacing:-.02em; }
.panel-head>button,.table-actions button { border:0; background:transparent; color:#75787e; font-size:9.5px; font-weight:700; }
.counter { min-width:24px; height:24px; padding:0 6px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--red); font-size:9px; font-weight:800; }
.agenda { padding:3px 19px 10px; }
.agenda-item { min-height:58px; display:grid; grid-template-columns:44px 8px 1fr auto; gap:12px; align-items:center; border-bottom:1px solid #f0f0f2; }
.agenda-item:last-child { border-bottom:0; }
.agenda-item time { color:#7a7d84; font-size:10px; font-weight:700; }
.agenda-item>i { width:7px; height:7px; border-radius:50%; background:#bbb; }
.agenda-item>i.red { background:var(--red); }
.agenda-item>i.black { background:#151619; }
.agenda-item div b,.agenda-item div span { display:block; }
.agenda-item div b { font-size:10.5px; }
.agenda-item div span { color:#9a9ca2; font-size:9px; margin-top:4px; }
.status { display:inline-flex; align-items:center; border-radius:99px; padding:4px 8px; font-size:8px; font-weight:800; white-space:nowrap; background:#f0f1f2; color:#666970; }
.status.success { background:#eaf6ef; color:var(--success); }
.status.danger { background:var(--red-soft); color:var(--red-dark); }
.status.progress { background:#fff4dd; color:var(--warning); }
.alert-list { padding:3px 11px 10px; }
.alert-list button { min-height:58px; width:100%; display:flex; align-items:center; gap:10px; border:0; border-bottom:1px solid #f0f0f2; background:transparent; text-align:left; padding:7px 4px; }
.alert-list button:last-child { border-bottom:0; }
.alert-icon { width:29px; height:29px; flex:0 0 auto; border-radius:7px; background:var(--red); color:#fff; display:grid; place-items:center; font-size:9px; font-weight:900; }
.alert-icon.dark { background:#202226; }
.alert-icon.soft { background:#f1f1f2; color:#65686e; }
.alert-list button div { min-width:0; flex:1; }
.alert-list b,.alert-list small { display:block; }
.alert-list b { font-size:9.5px; }
.alert-list small { color:#92959b; font-size:8.5px; margin-top:4px; }
.alert-list strong { color:#aaa; }
.workflow-panel { margin-bottom:15px; }
.panel-tabs { display:flex; gap:4px; }
.panel-tabs button,.table-actions button { border:1px solid transparent; border-radius:6px; padding:5px 9px; background:transparent; color:#8a8d93; font-size:8.5px; font-weight:700; }
.panel-tabs button.active { color:var(--ink); background:#f1f1f2; }
.pipeline { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.pipeline-column { padding:14px; background:#fafafb; }
.pipeline-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pipeline-title b { font-size:9.5px; }
.pipeline-title span { color:#888b91; font-size:8px; border:1px solid #dedfe1; background:#fff; border-radius:99px; padding:2px 6px; }
.work-card { display:block; width:100%; min-height:87px; padding:12px; margin-bottom:8px; border-radius:8px; border:1px solid #e2e3e5; background:#fff; text-align:left; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.work-card:hover { border-color:#c4c5c8; transform:translateY(-1px); }
.work-card span,.work-card b,.work-card small { display:block; }
.work-card span { color:var(--red); font-size:8px; font-weight:800; }
.work-card b { margin:7px 0 11px; font-size:10px; }
.work-card small { color:#8c8f95; font-size:8px; }
.work-card small i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--red); margin-right:4px; }
.view-more { width:100%; border:0; background:transparent; color:#868990; font-size:8.5px; padding:5px; }
.bottom-grid { grid-template-columns:1.2fr .8fr; }
.people-list { padding:6px 18px 12px; }
.people-list>div { min-height:55px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #f0f0f2; }
.people-list>div:last-child { border-bottom:0; }
.avatar.small { width:29px; height:29px; background:#202226; font-size:8px; }
.people-list p { flex:1; min-width:0; }
.people-list p b,.people-list p small { display:block; }
.people-list p b { font-size:9.5px; }
.people-list p small { color:#96999f; font-size:8px; margin-top:3px; }
.load { width:100px; text-align:right; }
.load span { color:#767980; font-size:8px; }
.load progress { display:block; margin-top:4px; }
.insight-panel { padding:21px; background:linear-gradient(145deg,#151619,#25272b); color:#fff; border-color:#25272b; position:relative; overflow:hidden; }
.insight-panel::after { content:""; position:absolute; width:180px; height:180px; border:42px solid rgba(227,11,23,.12); border-radius:50%; right:-95px; top:-90px; }
.insight-badge { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--red); border-radius:8px; font-size:10px; font-weight:900; margin-bottom:23px; position:relative; z-index:1; }
.insight-panel h2 { font-size:17px; line-height:1.35; margin:7px 0 10px; max-width:380px; }
.insight-panel p { color:#aeb0b5; font-size:9.5px; line-height:1.6; }
.insight-panel p b { color:#fff; }
.confidence { display:flex; justify-content:space-between; color:#8e9198; font-size:8px; padding:10px 0 15px; border-top:1px solid #35373b; margin-top:16px; }
.confidence b { color:#fff; }
.module-page .welcome-row { align-items:center; }
.data-panel { min-height:430px; }
.table-actions { display:flex; gap:3px; }
.table-actions button { border-color:#e1e2e4; background:#fff; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:10px; }
th { color:#85888e; background:#fafafb; font-size:8px; letter-spacing:.08em; text-transform:uppercase; text-align:left; padding:12px 18px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:14px 18px; border-bottom:1px solid #eeeeef; color:#65686e; white-space:nowrap; }
td b { color:#24262a; }
tbody tr:hover { background:#fcfcfd; }
.empty { padding:50px; text-align:center; color:#8d9096; font-size:11px; }
.table-footer { min-height:56px; padding:0 18px; display:flex; justify-content:space-between; align-items:center; color:#8d9096; font-size:8.5px; }
.table-footer div { display:flex; gap:4px; }
.table-footer button { width:27px; height:27px; border:1px solid #e0e1e3; background:#fff; border-radius:6px; font-size:9px; }
.table-footer button.active { background:#1a1b1e; color:#fff; border-color:#1a1b1e; }
.toast { position:fixed; right:24px; bottom:24px; z-index:70; max-width:360px; padding:13px 16px; border-radius:9px; background:#161719; color:#fff; box-shadow:0 14px 40px rgba(0,0,0,.24); font-size:10px; display:flex; gap:10px; align-items:center; animation:toast-in .2s ease-out; }
.toast span { width:19px; height:19px; border-radius:50%; background:var(--red); display:grid; place-items:center; font-weight:900; }
@keyframes toast-in { from { transform:translateY(10px); opacity:0; } }
.backdrop { display:none; }
.logout { color:#8d9096; text-decoration:none; font-size:16px; padding:5px; }
.loading-state,.error-state { min-height:55vh; display:grid; place-content:center; justify-items:center; text-align:center; color:#85888f; }
.loading-state span { width:28px; height:28px; border:3px solid #e2e3e5; border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; }
.loading-state p,.error-state p { font-size:11px; margin-top:13px; }
.error-state b { color:var(--ink); }
@keyframes spin { to { transform:rotate(360deg); } }
.empty.compact { padding:22px; }
.status-select { appearance:none; border:0; border-radius:99px; padding:5px 24px 5px 9px; font-size:8px; font-weight:800; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 10px) 50%,calc(100% - 7px) 50%; background-size:3px 3px,3px 3px; background-repeat:no-repeat; }
.status-select.neutral { background-color:#f0f1f2; color:#666970; }.status-select.success{background-color:#eaf6ef;color:var(--success)}.status-select.danger{background-color:var(--red-soft);color:var(--red-dark)}.status-select.progress{background-color:#fff4dd;color:var(--warning)}
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(4,5,7,.68); display:grid; place-items:center; padding:20px; backdrop-filter:blur(3px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(690px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:13px; box-shadow:0 30px 90px rgba(0,0,0,.34); }
.modal>header { min-height:76px; padding:17px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.modal h2 { margin:5px 0 0; font-size:20px; }
.modal>header button { border:0; background:#f1f1f2; width:31px; height:31px; border-radius:50%; font-size:20px; }
.modal form { padding:20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:grid; gap:7px; }
.form-field.full { grid-column:1/-1; }
.form-field span { font-size:10px; font-weight:800; color:#4e5157; }
.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #dfe0e3; background:#fff; border-radius:8px; padding:0 11px; color:var(--ink); outline:none; font-size:11px; }
.form-field input,.form-field select { height:40px; }.form-field textarea { padding-top:10px; resize:vertical; }
.form-field select[multiple] { height:112px; padding:7px; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(227,11,23,.08); }
.modal footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.modal-open { overflow:hidden; }
.login-body { background:#0d0e10; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(350px,1fr) minmax(480px,1fr); }
.login-brand { padding:8vh 7vw; color:#fff; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.login-brand::after { content:""; width:520px; height:520px; border:100px solid rgba(227,11,23,.14); border-radius:50%; position:absolute; right:-300px; bottom:-310px; }
.login-eyebrow { display:block; color:#9a9da3; font-size:9px; letter-spacing:.2em; font-weight:900; }.login-eyebrow.red{color:var(--red)}
.login-brand h1 { color:#fff; font-size:clamp(46px,6vw,80px); line-height:.94; letter-spacing:-.065em; margin:18px 0 24px; }
.login-brand p { color:#a5a7ad; max-width:520px; line-height:1.7; }
.login-foot { color:#777a81; font-size:10px; }
.login-form-wrap { background:#f5f5f6; display:grid; place-items:center; padding:35px; }
.login-card { width:min(410px,100%); background:#fff; border:1px solid var(--line); border-radius:14px; padding:34px; box-shadow:0 25px 70px rgba(0,0,0,.12); }
.login-card h2 { font-size:34px; letter-spacing:-.045em; margin:10px 0 8px; }
.login-card>p { color:#878a90; font-size:11px; line-height:1.55; margin-bottom:25px; }
.login-card label { display:grid; gap:8px; margin:14px 0; font-size:10px; font-weight:800; }
.login-card input { height:44px; border:1px solid #dfe0e3; border-radius:8px; padding:0 12px; outline:none; }
.login-card input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(227,11,23,.08); }
.login-card .button { margin-top:8px; height:45px; }
.login-card>small { display:block; color:#9a9ca1; font-size:9px; line-height:1.55; margin-top:17px; text-align:center; }
.login-error { padding:11px 12px; background:var(--red-soft); color:var(--red-dark); border-radius:7px; font-size:10px; margin-bottom:15px; }
@media(max-width:1050px){ .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:18px 0 45px rgba(0,0,0,.22)}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.menu-toggle,.mobile-close{display:inline-grid;place-items:center;border:0;background:transparent}.menu-toggle{width:34px;height:34px;border:1px solid #dedfe2;border-radius:8px}.mobile-close{margin-left:auto;color:#fff;font-size:24px}.backdrop.show{display:block;position:fixed;inset:0;border:0;z-index:35;background:rgba(0,0,0,.45)} }
@media(max-width:760px){ .topbar{padding:0 15px;gap:9px}.breadcrumbs,.help-button,.search kbd{display:none}.search{flex:1;width:auto}.content{padding:22px 15px 28px}.welcome-row{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions .button{flex:1}.metrics-grid,.metrics-grid.three{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr}.pipeline-column{border-bottom:1px solid var(--line)}.panel-tabs{display:none}.agenda-item{grid-template-columns:40px 7px 1fr}.agenda-item .status{display:none}.module-page .welcome-row{align-items:flex-start}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.login-shell{grid-template-columns:1fr}.login-brand{min-height:320px;padding:35px 24px}.login-brand h1{font-size:46px}.login-form-wrap{padding:30px 18px}.login-card{padding:27px 22px} }
@media(max-width:430px){ .metrics-grid,.metrics-grid.three{grid-template-columns:1fr}.metric-card{padding:14px 16px}h1{font-size:30px}.topbar{height:61px}.welcome-row p{line-height:1.6}.toast{left:15px;right:15px;bottom:15px} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }