body { background:#f5f7fb; color:#202733; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:210px; background:#202733; color:#fff; flex-shrink:0; }
.brand { height:58px; line-height:58px; padding:0 20px; font-size:18px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar a { display:block; color:#d6dae3; padding:14px 20px; }
.sidebar a:hover,.sidebar a.active { background:#16baaa; color:#fff; }
.main { flex:1; padding:20px; min-width:0; }
.topbar { height:38px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:18px; font-weight:600; }
.top-actions { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:400; }
.logout-link { color:#202733; padding:6px 10px; border:1px solid #d7dce5; border-radius:4px; background:#fff; }
.logout-link:hover { color:#16baaa; border-color:#16baaa; }
.panel { background:#fff; border:1px solid #e7eaf0; border-radius:6px; padding:18px; margin-bottom:16px; }
.toolbar { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-bottom:14px; }
.toolbar .preset-select { width:220px; }
.compact-toolbar { margin:10px 0 6px; }
.searchbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.table-wrap { overflow:auto; }
.layui-table td,.layui-table th { white-space:nowrap; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#f5f7fb; }
.login-box { width:360px; background:#fff; border:1px solid #e7eaf0; border-radius:6px; padding:28px; }
.login-title { font-size:22px; font-weight:700; margin-bottom:22px; text-align:center; }
.items-table { table-layout:auto; }
.items-table td,.items-table th { padding:6px 7px; vertical-align:top; }
.items-table input { min-width:0; }
.items-table .desc { min-width:620px; width:100%; min-height:64px; resize:vertical; line-height:1.45; white-space:normal; }
.items-table .product { min-width:140px; width:100%; }
.items-table .qty-input { width:54px; }
.items-table .unit-input { width:42px; }
.items-table .price-input,.items-table .amount-input { width:78px; }
.items-table .part { min-width:130px; }
.items-table th:nth-child(1),.items-table td:nth-child(1) { width:42px; min-width:42px; text-align:center; }
.items-table th:nth-child(4),.items-table td:nth-child(4) { width:60px; min-width:60px; }
.items-table th:nth-child(5),.items-table td:nth-child(5) { width:48px; min-width:48px; }
.items-table th:nth-child(6),.items-table td:nth-child(6),.items-table th:nth-child(7),.items-table td:nth-child(7) { width:84px; min-width:84px; }
.items-table th:nth-child(8),.items-table td:nth-child(8) { width:54px; min-width:54px; }
.quote-groups { display:flex; flex-direction:column; gap:14px; }
.quote-group { border:1px solid #e7eaf0; border-radius:6px; background:#fbfcff; padding:12px; }
.group-head { display:grid; grid-template-columns:32px minmax(220px, 1fr) auto auto; gap:8px; align-items:center; margin-bottom:10px; }
.group-index { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:4px; background:#eef2f7; color:#394150; font-weight:700; }
.item-index { min-width:48px; text-align:center; font-weight:700; color:#394150; background:#fbfcff; }
.group-name { font-weight:600; }
.group-checks { display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:8px; }
.group-checks label { display:inline-flex; gap:6px; align-items:center; color:#394150; }
.tabs { display:flex; gap:8px; }
.tabs a { padding:8px 14px; border:1px solid #d7dce5; border-radius:6px; background:#fff; color:#394150; }
.tabs a.active { background:#16baaa; border-color:#16baaa; color:#fff; }
.pill { display:inline-block; padding:2px 8px; margin:2px 4px 2px 0; border-radius:999px; background:#eef2f7; color:#394150; }
.modal-backdrop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.38); padding:24px; }
.modal-backdrop[hidden] { display:none; }
.modal-card { width:min(920px, 100%); max-height:88vh; overflow:auto; background:#fff; border-radius:6px; box-shadow:0 18px 50px rgba(15,23,42,.22); padding:18px; }
.modal-title { font-size:18px; font-weight:700; margin-bottom:14px; }
.modal-form { display:flex; flex-direction:column; gap:10px; }
.modal-form-wide { width:100%; }
.modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.preset-items-table select { min-width:260px; }
.preset-items-table input { min-width:90px; }
.preset-desc { min-width:360px; max-width:520px; white-space:normal; color:#394150; line-height:1.45; }
.library-table td,.library-table th { white-space:normal; vertical-align:top; }
.wrap-cell { white-space:normal; line-height:1.5; min-width:220px; }
.inline-field { width:100%; border:1px solid transparent; background:transparent; resize:vertical; min-height:34px; padding:6px 8px; color:#202733; box-sizing:border-box; }
.inline-field[readonly] { cursor:pointer; }
.inline-field.editing { background:#fff; border-color:#16baaa; }
.product-name-field { min-width:160px; }
.product-desc-field { min-width:280px; min-height:54px; }
.group-name-field { min-width:180px; }
.compact-field { min-width:80px; min-height:34px; resize:none; }
.muted { color:#8b95a5; }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stat { background:#fff; border:1px solid #e7eaf0; border-radius:6px; padding:18px; }
.stat .num { font-size:28px; font-weight:700; margin-top:8px; }
.preview-body { margin:0; background:#eef2f7; min-height:100vh; display:flex; flex-direction:column; }
.preview-toolbar { position:sticky; top:0; z-index:10; display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:10px 16px; background:#fff; border-bottom:1px solid #d7dce5; box-shadow:0 2px 10px rgba(15,23,42,.06); }
.preview-title { margin-right:auto; font-size:15px; font-weight:600; color:#202733; }
.preview-frame { width:100%; flex:1; min-height:calc(100vh - 52px); border:0; background:#fff; }
.preview-sheet { padding:18px; overflow:auto; }
.preview-sheet table { margin:0 auto; background:#fff; border-collapse:collapse; }
@media (max-width: 800px) {
    .layout { display:block; }
    .sidebar { width:auto; display:flex; overflow:auto; }
    .brand { display:none; }
    .sidebar a { flex-shrink:0; }
    .stat-grid { grid-template-columns:1fr; }
    .group-head { grid-template-columns:1fr; }
    .modal-grid { grid-template-columns:1fr; }
    .topbar { height:auto; gap:10px; align-items:flex-start; }
    .top-actions { flex-shrink:0; }
}