:root{
  --primary:#1769e0;--primary-2:#0f55bb;--primary-soft:#eaf3ff;--bg:#f5f7fb;--card:#fff;--text:#1f2a37;--muted:#738095;--line:#e6eaf0;--sidebar:#fff;--success:#1f9d67;--warning:#e6a019;--danger:#d9485f;--purple:#7857d8;--teal:#0f8a7c;--shadow:0 10px 30px rgba(31,42,55,.07)
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}a{text-decoration:none;color:inherit}
.app{min-height:100vh;display:flex}.sidebar{width:292px;background:var(--sidebar);border-right:1px solid var(--line);position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:20;transition:.25s ease}.brand{height:76px;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--line)}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#46b5ff);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 20px rgba(23,105,224,.25);font-size:12px}.brand h1{font-size:18px;line-height:1;margin:0}.brand small{display:block;color:var(--muted);margin-top:6px;font-size:11px}.side-scroll{overflow:auto;padding:12px 10px 24px;flex:1}
.nav-item,.nav-parent{border-radius:10px;display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;color:#556276;font-size:14px;cursor:pointer;transition:.18s ease;user-select:none}.nav-item:hover,.nav-parent:hover{background:#f4f7fb;color:var(--primary)}.nav-item.active,.nav-parent.active{background:var(--primary-soft);color:var(--primary);font-weight:700}.nav-icon{width:20px;text-align:center;opacity:.92}.nav-parent .chev{margin-left:auto;font-size:12px;transition:.2s}.nav-parent.open .chev{transform:rotate(180deg)}.submenu{display:none;padding-left:31px;margin-bottom:5px}.submenu.open{display:block}.submenu .nav-item{font-size:13px;padding:9px 10px;margin:2px 0}.nav-divider{margin:12px 10px 7px;color:#a1aaba;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.profile{padding:14px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;background:#fff}.avatar{width:38px;height:38px;border-radius:50%;background:#1f63b7;color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}.profile b{font-size:13px}.profile small{display:block;color:var(--primary);font-size:11px;margin-top:2px}.profile .dots{margin-left:auto;color:#9aa5b5;font-size:18px}
.main{margin-left:292px;min-height:100vh;width:calc(100% - 292px);transition:.25s ease}.topbar{height:76px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:14px;position:sticky;top:0;z-index:15}.hamb{display:none;border:0;background:#f4f6f9;width:38px;height:38px;border-radius:10px;cursor:pointer}.search{flex:1;max-width:460px;position:relative}.search input{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 40px 0 14px;background:#f8fafc;outline:none}.search span{position:absolute;right:12px;top:10px;color:#8d99aa}.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.top-btn{border:1px solid var(--line);background:#fff;border-radius:10px;height:39px;padding:0 11px;cursor:pointer;color:#556276;display:flex;align-items:center;gap:7px}.theme-dot{width:12px;height:12px;border-radius:50%;background:var(--primary)}.notif{position:relative}.notif::after{content:"3";position:absolute;right:-4px;top:-6px;background:var(--danger);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center}.content{padding:22px 24px 40px}
.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.page-head h2{margin:0;font-size:26px}.page-head p{margin:7px 0 0;color:var(--muted);font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:10px 13px;cursor:pointer;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:7px}.btn.primary{background:var(--primary);color:#fff}.btn.light{background:#fff;color:#556276;border:1px solid var(--line)}.btn.soft{background:var(--primary-soft);color:var(--primary)}.btn.success{background:#eaf8f2;color:var(--success)}.btn.danger{background:#fff0f3;color:var(--danger)}.btn.warn{background:#fff7e8;color:#bb7810}.btn.block{width:100%;justify-content:center}
.grid{display:grid;gap:16px}.grid.cards{grid-template-columns:repeat(4,1fr)}.grid.two{grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.profile-grid{grid-template-columns:320px 1fr}.grid.form-grid{grid-template-columns:1fr 1fr}.grid.pipeline{grid-template-columns:repeat(5,1fr)}
.stat,.panel,.role-card,.flow-card,.kanban-card,.summary-card,.mini-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.stat{padding:16px}.stat-top{display:flex;justify-content:space-between;align-items:flex-start}.stat .label{font-size:12px;color:var(--muted)}.stat .value{font-size:28px;font-weight:800;margin-top:7px}.stat .delta{font-size:11px;margin-top:7px;color:var(--success)}.stat-icon{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.panel{padding:16px}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.panel-title{font-weight:800;font-size:14px}.panel-sub{font-size:11px;color:var(--muted);margin-top:3px}
.filters,.module-pills,.legend,.inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.chip,.check-pill{border:1px solid var(--line);background:#fff;color:#6b7687;border-radius:999px;padding:7px 10px;font-size:11px}.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.check-pill input{vertical-align:-1px;margin-right:5px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse}th,td{padding:11px 10px;border-bottom:1px solid #edf0f4;text-align:left;font-size:12px;white-space:nowrap}th{color:#788495;font-weight:700;background:#fafbfc}td strong{font-size:12px}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700}.badge.green{background:#e9f8f2;color:var(--success)}.badge.yellow{background:#fff7e8;color:#bb7810}.badge.red{background:#fff0f2;color:var(--danger)}.badge.blue{background:var(--primary-soft);color:var(--primary)}.badge.gray{background:#f1f3f6;color:#6b7687}.badge.purple{background:#f4f0ff;color:#6b45c8}.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.small{font-size:11px}.muted{color:var(--muted)}
.crew-cell{display:flex;align-items:center;gap:8px}.crew-photo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#dceaff,#c7dfff);display:grid;place-items:center;font-weight:800;color:var(--primary)}
.timeline{position:relative;padding-left:21px}.timeline.compact{padding-left:18px}.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:8px;width:2px;background:#e8edf3}.tl{position:relative;padding:0 0 16px}.tl::before{content:"";position:absolute;left:-19px;top:4px;width:10px;height:10px;background:var(--primary);border-radius:50%;border:3px solid #eaf3ff}.tl b{font-size:12px}.tl p{font-size:11px;color:var(--muted);margin:4px 0}
.instruction{background:#f7fbff;border:1px solid #d8e9ff;border-radius:12px;padding:12px 13px;font-size:11px;color:#4d6584;line-height:1.55;margin-bottom:14px}
.flow-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.flow-card{padding:14px;position:relative;min-height:220px}.flow-card .flow-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid rgba(255,255,255,.65);font-weight:800;margin-bottom:12px}.flow-card h4{margin:0;font-size:20px;line-height:1.1}.flow-card small{display:block;margin-top:5px;color:#1d3747;opacity:.9}.flow-card p{font-size:12px;line-height:1.6;margin:14px 0 0;color:#173648}.flow-card.blue{background:linear-gradient(180deg,#cae6ff,#fff)}.flow-card.green{background:linear-gradient(180deg,#cef5eb,#fff)}.flow-card .flow-actions{position:absolute;bottom:14px;left:14px;right:14px}.flow-card.approval{display:flex;flex-direction:column;justify-content:flex-start}.approval-box{margin-top:18px;background:#075e68;color:#fff;border-radius:16px;padding:16px;text-align:center;font-weight:800}.approval-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.flow-foot{margin-top:18px;padding-top:10px;border-top:1px dashed var(--line)}
.summary-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.summary-card{padding:12px}.summary-card b{font-size:20px;display:block}.summary-card span{font-size:11px;color:var(--muted)}
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kanban-col{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px}.kanban-col h4{margin:0 0 12px;font-size:13px;display:flex;justify-content:space-between}.kanban-card{padding:12px;margin-bottom:10px}.kanban-card h5{margin:0 0 6px;font-size:13px}.kanban-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.kanban-card .meta{margin-top:9px;font-size:10px;color:#7e8896}.kanban-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.input,.select,.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:#fff;outline:none;color:#445064}.field label{display:block;font-size:11px;color:#5d6979;font-weight:700;margin-bottom:6px}.field textarea{min-height:92px;resize:vertical}.helper{font-size:10px;color:var(--muted);margin-top:5px}.toolbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:12px}.toolbar .left,.toolbar .right{display:flex;gap:8px;flex-wrap:wrap}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.role-card{padding:14px}.role-card h4{margin:0 0 6px;font-size:14px}.role-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.role-card ul{padding-left:18px;color:#596678;font-size:11px;line-height:1.8;margin:10px 0 0}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini-card{padding:12px}.mini-card b{display:block;font-size:18px}.mini-card span{font-size:11px;color:var(--muted)}
.preview-paper{width:min(100%,820px);margin:auto;background:#fff;border:1px solid #dfe5ec;box-shadow:0 18px 50px rgba(31,42,55,.08);min-height:420px;padding:28px;border-radius:8px}.paper-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #26384e;padding-bottom:14px}.logo-fake{font-size:22px;font-weight:900;letter-spacing:.03em;color:var(--primary)}.paper-title{text-align:center;margin:24px 0 20px}.paper-title h3{margin:0;font-size:16px;text-transform:uppercase}.paper-title p{margin:4px 0;color:#6d7784;font-size:11px}.signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:70px;text-align:center;font-size:11px}.signatures div::before{content:"";display:block;border-top:1px solid #9da7b5;margin-bottom:7px}
.right-drawer{position:fixed;top:0;right:-390px;width:370px;bottom:0;background:#fff;z-index:50;box-shadow:-20px 0 50px rgba(31,42,55,.15);transition:.3s;padding:20px;overflow:auto}.right-drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.drawer-head h3{margin:0;font-size:16px}.close{border:0;background:#f3f5f8;border-radius:9px;width:34px;height:34px;cursor:pointer}
.modal{display:none;position:fixed;inset:0;background:rgba(22,30,40,.4);z-index:60;padding:20px}.modal.open{display:grid;place-items:center}.modal-card{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:17px}.modal-body{padding:18px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;right:22px;bottom:22px;background:#1f2a37;color:#fff;border-radius:12px;padding:12px 14px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s;z-index:70}.toast.show{opacity:1;transform:translateY(0)}.overlay{display:none;position:fixed;inset:0;background:rgba(23,31,42,.28);z-index:18}.overlay.show{display:block}
.theme-menu,.lang-wrap{position:relative}.theme-pop,.lang-pop{position:absolute;right:0;top:45px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow);display:none;width:210px;z-index:40}.lang-pop{width:160px;padding:7px}.theme-pop.open,.lang-pop.open{display:block}.theme-option,.lang-pop div{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;cursor:pointer;font-size:12px}.theme-option:hover,.lang-pop div:hover{background:#f5f7fa}.swatch{width:16px;height:16px;border-radius:50%}.swatch.blue{background:#1769e0}.swatch.navy{background:#183b75}.swatch.green{background:#147a5a}.swatch.dark{background:#182131;border:1px solid #4e8df7}
.desktop-badge{font-size:10px;color:#8792a1;border:1px solid var(--line);border-radius:999px;padding:4px 7px}
.empty-note{padding:28px;text-align:center;color:var(--muted);font-size:12px}
body[data-theme="navy"]{--primary:#183b75;--primary-2:#102a55;--primary-soft:#eaf0f8;--bg:#f3f5f8}
body[data-theme="green"]{--primary:#147a5a;--primary-2:#0f6047;--primary-soft:#e9f6f1;--bg:#f4f8f6}
body[data-theme="dark"]{--primary:#4e8df7;--primary-2:#6ca2ff;--primary-soft:#1d2d45;--bg:#111824;--card:#182131;--text:#eaf0f8;--muted:#91a0b6;--line:#2a3546;--sidebar:#151e2c;--shadow:none}
body[data-theme="dark"] .topbar,body[data-theme="dark"] .profile,body[data-theme="dark"] .input,body[data-theme="dark"] .select,body[data-theme="dark"] .field input,body[data-theme="dark"] .field select,body[data-theme="dark"] .field textarea,body[data-theme="dark"] .top-btn,body[data-theme="dark"] .preview-paper,body[data-theme="dark"] .modal-card,body[data-theme="dark"] .right-drawer,body[data-theme="dark"] .theme-pop,body[data-theme="dark"] .lang-pop{background:#182131;color:#eaf0f8}body[data-theme="dark"] th{background:#151d2a}body[data-theme="dark"] .search input{background:#131b28;color:#eaf0f8}
@media(max-width:1250px){.grid.cards,.metric-grid{grid-template-columns:repeat(2,1fr)}.flow-wrap,.summary-bar,.role-grid,.grid.pipeline{grid-template-columns:repeat(2,1fr)}.grid.two,.grid.profile-grid,.grid.form-grid,.kanban{grid-template-columns:1fr}}
@media(max-width:860px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.hamb{display:block}.topbar{padding:0 14px}.content{padding:18px 14px 32px}.desktop-badge{display:none}.overlay{z-index:19}.signatures{grid-template-columns:1fr}.summary-bar,.flow-wrap,.grid.cards,.role-grid,.grid.pipeline,.metric-grid{grid-template-columns:1fr}}
@media(max-width:520px){.topbar .search{display:none}.right-drawer{width:94vw}.top-actions{gap:6px}.top-btn{padding:0 8px}.page-head{flex-direction:column}.toolbar .left,.toolbar .right,.actions{width:100%}.btn.block-sm{width:100%;justify-content:center}}