:root { --bg:#f7f8fc; --surface:#fff; --border:#e6e9f0; --text:#0f172a; --muted:#64748b; --accent:#8b5cf6; }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
    .layout { min-height: 100vh; display:grid; grid-template-columns:260px 1fr; transition:grid-template-columns .2s ease; }
    .layout.collapsed { grid-template-columns:72px 1fr; }
    .sidebar { background:var(--surface); border-right:1px solid var(--border); padding:12px 10px; overflow:hidden; }
    .brand { display:flex; align-items:center; justify-content:space-between; margin:0 4px 12px; }
    .brand-text { font-size:13px; font-weight:700; letter-spacing:.8px; color:#0b1324; }
    .toggle { border:1px solid #cbd5e1; background:#fff; border-radius:8px; width:30px; height:30px; cursor:pointer; }
    .section-title { margin:10px 6px 6px; font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.8px; }
    .menu-item { display:flex; align-items:center; gap:8px; text-decoration:none; color:#1f2937; padding:8px; border-radius:10px; border:1px solid transparent; font-size:13px; white-space:nowrap; }
    .menu-item:hover { background:#f8fafc; border-color:#dbe2ea; }
    .menu-item.active { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; font-weight:600; }
    .menu-sep { height:1px; background:#e5e7eb; margin:5px 8px; }
    .icon { width:16px; height:16px; flex:0 0 16px; }
    .icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
    .layout.collapsed .brand-text, .layout.collapsed .section-title, .layout.collapsed .label { display:none; }
    .content { padding:12px; }
    .panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; height:calc(100vh - 24px); display:flex; flex-direction:column; }
    .topbar { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
    h1 { margin:0; font-size:22px; }
    .sub { margin:4px 0 0; color:var(--muted); font-size:13px; }
    .actions { display:flex; gap:8px; flex-wrap:wrap; }
    .btn { border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:7px 10px; font-size:13px; cursor:pointer; }
    .btn.primary { background:var(--accent); border-color:#7c3aed; color:#fff; }
    .btn.success { background:#10b981; border-color:#059669; color:#fff; }
    .btn.danger { background:#ef4444; border-color:#dc2626; color:#fff; }
    .btn.warn { background:#f59e0b; border-color:#d97706; color:#fff; }
    .btn:disabled { opacity:.45; cursor:not-allowed; }
    .table-wrap { flex:1; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
    table { width:100%; border-collapse:collapse; }
    th, td { border-bottom:1px solid var(--border); text-align:left; padding:8px 7px; font-size:13px; }
    th { color:#334155; background:#f8fafc; font-weight:600; position:sticky; top:0; z-index:1; }
    tr.selected td { background:#eff6ff; }
    tr[data-id]:hover td { background:#f8fafc; cursor:pointer; }
    @keyframes row-flash { 0%,100%{background:inherit} 30%,70%{background:#fde68a !important;} }
    tr.row-flash td { animation:row-flash 1.2s ease; }
    .badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
    .badge-inbound  { background:#dbeafe; color:#1d4ed8; }
    .badge-outbound { background:#fef3c7; color:#92400e; }
    .badge-pending  { background:#f1f5f9; color:#64748b; }
    .badge-accepted, .badge-shipped  { background:#d1fae5; color:#065f46; }
    .badge-rejected, .badge-returned { background:#fee2e2; color:#991b1b; }
    .badge-complete  { background:#bbf7d0; color:#14532d; }
    .badge-partial   { background:#fed7aa; color:#7c2d12; }
    .badge-over      { background:#fef9c3; color:#713f12; border:1px solid #fbbf24; }
    .badge-under     { background:#ffe4e6; color:#9f1239; border:1px solid #fca5a5; }
    tr.row-complete td { background:#f0fdf4; }
    tr.row-complete.selected td { background:#dcfce7; }
    tr.row-over td  { background:#fffbeb; }
    tr.row-over.selected td  { background:#fef3c7; }
    tr.row-partial td { background:#fff7ed; }
    tr.row-partial.selected td { background:#fed7aa44; }
    .overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100; align-items:center; justify-content:center; }
    .overlay.open { display:flex; }
    .modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; width:540px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column; }
    .modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
    .modal-head h2 { margin:0; font-size:16px; }
    .modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); line-height:1; }
    .modal-body { padding:16px; overflow-y:auto; flex:1; }
    .modal-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .form-group { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
    .form-group label { font-size:12px; font-weight:600; color:#334155; }
    .form-group input, .form-group select { border:1px solid #cbd5e1; border-radius:7px; padding:6px 8px; font-size:13px; color:var(--text); background:#fff; width:100%; }
    .form-group input:disabled, .form-group select:disabled { background:#f1f5f9; color:var(--muted); }
    .signoff-detail { background:#f8fafc; border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:14px; }
    .signoff-detail .row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; border-bottom:1px solid var(--border); }
    .signoff-detail .row:last-child { border-bottom:none; }
    .signoff-detail .row span:first-child { color:var(--muted); font-weight:500; }
    .signoff-detail .row span:last-child { font-weight:600; }
    @media (max-width:920px){ .layout,.layout.collapsed{grid-template-columns:1fr;} .sidebar{border-right:0;border-bottom:1px solid var(--border);} .panel{height:auto;} .layout.collapsed .brand-text,.layout.collapsed .section-title,.layout.collapsed .label{display:initial;} .form-row{grid-template-columns:1fr;} }