:root {
  --bg: #f2f6fb;
  --surface: #fff;
  --line: #d9e2ef;
  --text: #1f2b3d;
  --muted: #5d6f89;
  --primary: #1273de;
  --primary-2: #0f5fb6;
  --danger: #cf3c4f;
  --shadow: 0 8px 24px rgba(31, 43, 61, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "IBM Plex Sans", "Trebuchet MS", "Segoe UI", sans-serif; background: radial-gradient(circle at top right,#d8ebff 0%,#f2f6fb 40%,#edf3fa 100%); color: var(--text); }
button,input,select,textarea { font: inherit; }
.app-shell { display:grid; grid-template-columns:290px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; background:linear-gradient(180deg,#0f2f4f,#1f567f); color:#f4f8ff; padding:20px 16px; display:flex; flex-direction:column; gap:14px; }
.brand-block h1 { margin:0; font-size:24px; }
.brand-block p { margin:4px 0 0; opacity:.8; font-size:13px; }
.nav-list { display:flex; flex-direction:column; gap:4px; overflow:auto; }
.nav-item { border:none; background:transparent; color:rgba(244,248,255,.84); text-align:left; padding:9px 10px; border-radius:10px; cursor:pointer; }
.nav-item.indent { margin-left:12px; font-size:13px; }
.nav-item:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.2); color:#fff; font-weight:600; }
.sidebar-footer { margin-top:auto; font-size:12px; opacity:.72; }
.content { display:flex; flex-direction:column; min-width:0; }
.topbar { position:sticky; top:0; z-index:10; padding:14px 24px; border-bottom:1px solid var(--line); background:rgba(242,246,251,.92); backdrop-filter:blur(6px); display:flex; gap:12px; align-items:center; }
.topbar h2 { margin:0; font-size:20px; }
.topbar small { color:var(--muted); }
.topbar-account { margin-left:auto; display:flex; align-items:center; gap:8px; }
.topbar-account small { display:inline-block; background:#e5f1ff; border:1px solid #c8dff9; border-radius:999px; padding:3px 8px; color:#0f5fb6; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view-root { padding:24px; display:grid; gap:16px; }
.view-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); }
.card.compact { padding:12px; }
.card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.card-head h3 { margin:0; }
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stat-card h3 { margin:0; font-size:14px; color:var(--muted); }
.card-value { margin:10px 0 4px; font-size:24px; font-weight:700; }
.badge { background:#e5f1ff; border:1px solid #c8dff9; color:#0f5fb6; border-radius:20px; padding:2px 8px; font-size:11px; }
.form-grid, .selector-grid { display:grid; gap:12px; }
.form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid.inline { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.selector-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; }
input,select,textarea { border:1px solid #c8d5e6; background:#fff; border-radius:10px; padding:9px 10px; color:var(--text); }
textarea { min-height:110px; resize:vertical; }
button { border:none; border-radius:10px; padding:9px 12px; cursor:pointer; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-2); }
.btn-secondary { background:#e7f2ff; border:1px solid #c7def8; color:#124881; }
.btn-ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn-danger { background:#ffe8ec; border:1px solid #f4c6ce; color:#932234; }
.btn-link { background:transparent; color:#126ecf; padding:3px 5px; }
.btn-link.danger { color:var(--danger); }
.materials-layout { display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:16px; align-items:start; }
.materials-summary { margin-bottom:10px; }
.materials-filters { margin-bottom:10px; align-items:end; }
.table-wrap { overflow:auto; }
.table-modern { width:100%; border-collapse:collapse; min-width:620px; }
.table-modern th,.table-modern td { border-bottom:1px solid #e2e8f1; padding:10px; text-align:left; font-size:13px; }
.table-modern th { background:#f8fbff; color:#4f617e; }
.module-rules-wrap .module-rules-table { table-layout:fixed; min-width:1820px; }
.module-rules-table col.col-piece { width:170px; }
.module-rules-table col.col-rule { width:220px; }
.module-rules-table col.col-qtd { width:90px; }
.module-rules-table col.col-material { width:180px; }
.module-rules-table col.col-hwlist { width:380px; }
.module-rules-table col.col-oplist { width:360px; }
.module-rules-table col.col-edges { width:90px; }
.module-rules-table col.col-action { width:90px; }
.module-rules-table td input,
.module-rules-table td select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.module-rules-table td .btn-link {
  white-space: nowrap;
}
.module-rules-table.compact th,.module-rules-table.compact td { padding:8px 8px; }
.module-rules-table.spacious th,.module-rules-table.spacious td { padding:14px 12px; }
.module-rules-table.compact input,.module-rules-table.compact select { padding:7px 8px; }
.module-rules-table.spacious input,.module-rules-table.spacious select { padding:10px 10px; }
.module-rules-table.compact .rule-cell { grid-template-columns:minmax(115px,1fr) 88px minmax(120px,1fr); gap:4px; }
.module-rules-table.spacious .rule-cell { grid-template-columns:minmax(145px,1fr) 110px minmax(150px,1fr); gap:8px; }
.empty-cell { text-align:center; color:var(--muted); }
hr { border:none; border-top:1px solid var(--line); margin:16px 0; }
.text-muted { color:var(--muted); }
.head-actions,.button-row { display:flex; flex-wrap:wrap; gap:8px; }
.rule-cell { display:grid; grid-template-columns: minmax(130px, 1fr) 96px minmax(140px, 1fr); gap:6px; align-items:center; }
.rule-fixed-hidden { display:none; }
.rule-manual-hidden { display:none; }
.piece-sublist { display:grid; gap:6px; margin-bottom:6px; }
.piece-subitem { display:grid; grid-template-columns:minmax(110px,1fr) minmax(90px,.9fr) minmax(90px,.9fr) auto; gap:6px; align-items:center; }
.piece-subitem button { min-width:24px; }
.mobile-only,.sidebar-backdrop { display:none; }
@media (max-width:1100px){ .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .selector-grid{grid-template-columns:1fr;} }
@media (max-width:1200px){ .materials-layout{grid-template-columns:1fr;} }
@media (max-width:860px){ .app-shell{grid-template-columns:1fr;} .sidebar{position:fixed; left:-310px; width:290px; z-index:30; transition:left .2s ease;} .app-shell.sidebar-open .sidebar{left:0;} .sidebar-backdrop{position:fixed; inset:0; border:none; background:rgba(12,26,44,.48); z-index:20;} .app-shell.sidebar-open .sidebar-backdrop{display:block;} .mobile-only{display:inline-flex;} .topbar{padding:12px 14px;} .topbar-account small{max-width:120px;} .view-root{padding:14px;} .card-grid,.form-grid{grid-template-columns:1fr;} .table-modern{min-width:560px;} .module-rules-wrap .module-rules-table{min-width:1580px;} .piece-subitem{grid-template-columns:1fr;} }