:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #f9fafc;
  --text: #152033;
  --muted: #667085;
  --line: #e6eaf0;
  --primary: #1f4b99;
  --primary-2: #2e67c8;
  --danger: #b42318;
  --warning: #b54708;
  --success: #027a48;
  --shadow: 0 10px 30px rgba(28, 39, 55, .08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { background: #101828; color: white; padding: 24px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 68px; height: 52px; flex:0 0 68px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.brand-mark img { width: 72px; height: 72px; object-fit:contain; transform:scale(1.55); transform-origin:center; }
.brand-copy { min-width:0; }
.brand h1 { font-size: 15px; line-height: 1.2; margin: 0; }
.brand small { color: #98a2b3; }
.nav { display: grid; gap: 6px; margin-top: 22px; }
.nav button { width: 100%; text-align: left; border: 0; background: transparent; color: #d0d5dd; padding: 11px 12px; border-radius: 10px; display:flex; align-items:center; gap:10px; }
.nav button:hover, .nav button.active { background:#1d2939; color:white; }
.sidebar-footer { margin-top: auto; padding: 14px 8px 4px; color:#98a2b3; font-size:12px; line-height:1.5; }
.main { min-width: 0; }
.topbar { height: 74px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:10; }
.topbar h2 { margin:0; font-size:18px; }
.topbar .meta { color:var(--muted); font-size:13px; }
.content { padding: 28px; max-width: 1480px; margin: 0 auto; }
.hero { background: linear-gradient(135deg,#102a56,#1f4b99 65%,#2e67c8); border-radius: 24px; padding: 32px; color:white; box-shadow: var(--shadow); overflow:hidden; position:relative; }
.hero:after { content:""; position:absolute; width:260px; height:260px; right:-80px; top:-100px; border-radius:50%; background:rgba(255,255,255,.08); }
.hero h3 { margin:0 0 8px; font-size:30px; }
.hero p { margin:0; color:#d6e4ff; max-width:760px; }
.quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.action-card { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:20px; box-shadow:0 6px 16px rgba(28,39,55,.04); text-align:left; transition:.18s ease; }
.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color:#cdd8ec; }
.action-card .icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eff4ff; color:var(--primary); font-size:20px; margin-bottom:14px; }
.action-card h4 { margin:0 0 6px; font-size:16px; }
.action-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:28px 0 12px; }
.section-title h3 { margin:0; font-size:18px; }
.section-title p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 6px 16px rgba(28,39,55,.04); }
.panel.pad { padding:22px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
th { font-size:12px; color:var(--muted); font-weight:600; background:#fafbfc; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:700; background:#f2f4f7; color:#475467; }
.badge.success { background:#ecfdf3; color:#027a48; }
.badge.warn { background:#fffaeb; color:#b54708; }
.badge.danger { background:#fef3f2; color:#b42318; }
.badge.blue { background:#eff4ff; color:#175cd3; }
.btn { border:1px solid var(--line); background:white; color:var(--text); border-radius:10px; padding:9px 13px; font-weight:600; font-size:13px; }
.btn:hover { background:#f9fafb; }
.btn.primary { background:var(--primary); color:white; border-color:var(--primary); }
.btn.primary:hover { background:var(--primary-2); }
.btn.danger { color:var(--danger); border-color:#fecdca; background:#fff; }
.btn.ghost { border-color:transparent; background:transparent; }
.btn.small { padding:6px 9px; font-size:12px; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
label { font-size:12px; color:#475467; font-weight:650; }
input, select, textarea { width:100%; border:1px solid #d0d5dd; background:white; border-radius:10px; padding:10px 11px; color:var(--text); outline:none; }
input:focus, select:focus, textarea:focus { border-color:#84adff; box-shadow:0 0 0 3px #eff4ff; }
textarea { min-height:88px; resize:vertical; }
.required::after { content:" *"; color:#d92d20; }
.helper { color:var(--muted); font-size:11px; line-height:1.5; }
.wizard { display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; }
.stepper { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; height:max-content; position:sticky; top:96px; }
.step { display:flex; gap:10px; padding:10px 8px; border-radius:10px; color:var(--muted); font-size:13px; }
.step .num { flex:0 0 26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:white; font-size:11px; font-weight:700; }
.step.active { background:#eff4ff; color:#1849a9; font-weight:700; }
.step.done { color:#027a48; }
.wizard-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.wizard-head { padding:22px 24px 12px; border-bottom:1px solid var(--line); }
.wizard-head .question { font-size:23px; margin:0 0 7px; }
.wizard-head p { color:var(--muted); margin:0; font-size:13px; }
.wizard-body { padding:24px; }
.wizard-footer { padding:16px 24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fafbfc; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.choice { border:1px solid var(--line); border-radius:14px; padding:16px; background:white; cursor:pointer; text-align:left; }
.choice:hover, .choice.selected { border-color:#84adff; box-shadow:0 0 0 3px #eff4ff; }
.choice h4 { margin:0 0 5px; }
.choice p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.callout { border:1px solid #b2ccff; background:#eff4ff; color:#1849a9; border-radius:12px; padding:12px 14px; font-size:12px; line-height:1.5; }
.warn-callout { border-color:#fedf89; background:#fffaeb; color:#93370d; }
.success-callout { border-color:#abefc6; background:#ecfdf3; color:#05603a; }
.checklist { display:grid; gap:8px; margin-top:12px; }
.checkitem { display:flex; align-items:center; gap:8px; font-size:12px; color:#475467; }
.dot { width:8px; height:8px; border-radius:50%; background:#d0d5dd; }
.dot.ok { background:#12b76a; }
.doc-builder { display:grid; gap:14px; }
.section-box { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white; }
.section-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px 12px; background:#fafbfc; border-bottom:1px solid var(--line); }
.section-toolbar input { border:0; background:transparent; font-weight:700; padding:6px; }
.line-grid { display:grid; grid-template-columns: minmax(220px,2.2fr) repeat(4,minmax(92px,.7fr)) minmax(100px,.8fr) 44px; gap:8px; padding:10px 12px; align-items:start; }
.line-grid.header { color:var(--muted); font-size:11px; font-weight:700; padding-bottom:4px; }
.line-grid input { padding:8px 9px; font-size:12px; }
.line-grid .desc { min-width:220px; }
.row-no { min-height:34px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:750; color:var(--muted); background:#f8fafc; border:1px solid #e4e7ec; border-radius:8px; }
.line-grid .remove { border:0; background:#fff; color:#b42318; font-size:18px; padding:7px; }
.totals { margin-left:auto; width:min(420px,100%); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.total-row { display:flex; justify-content:space-between; gap:20px; padding:10px 13px; border-bottom:1px solid var(--line); font-size:13px; }
.total-row:last-child { border-bottom:0; font-size:16px; font-weight:800; background:#fafbfc; }
.two-col { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; }
.sticky-side { position:sticky; top:96px; height:max-content; }
.empty { padding:32px; text-align:center; color:var(--muted); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:20px; }
.kpi { background:white; border:1px solid var(--line); border-radius:16px; padding:16px; }
.kpi strong { display:block; font-size:24px; margin-top:5px; }
.kpi span { color:var(--muted); font-size:12px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { width:min(760px,100%); max-height:88vh; overflow:auto; background:white; border-radius:18px; box-shadow:0 30px 70px rgba(16,24,40,.28); }
.modal-head { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }
.modal-body { padding:20px; }
.modal-foot { padding:16px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
.search { min-width:260px; }
.logo-preview { max-height:64px; max-width:180px; object-fit:contain; }
@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 88px 1fr; }
  .brand-copy, .nav span, .sidebar-footer { display:none; }
  .brand { justify-content:center; padding-left:0; padding-right:0; }
  .brand-mark { width:56px; flex-basis:56px; }
  .brand-mark img { width:62px; height:62px; }
  .nav button { justify-content:center; }
  .quick-grid, .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wizard { grid-template-columns:1fr; }
  .stepper { position:static; display:flex; overflow:auto; }
  .step { min-width:max-content; }
  .two-col { grid-template-columns:1fr; }
  .sticky-side { position:static; }
}
@media (max-width: 720px) {
  .app-shell { display:block; }
  .sidebar { height:auto; position:static; padding:12px; }
  .brand { border-bottom:0; padding:0; }
  .nav { display:flex; overflow:auto; margin-top:12px; }
  .nav button { min-width:56px; width:auto; }
  .main { width:100%; }
  .topbar { padding:0 16px; }
  .content { padding:16px; }
  .quick-grid, .kpi-grid, .choice-grid, .form-grid, .form-grid.cols-3 { grid-template-columns:1fr; }
  .line-grid { grid-template-columns:1fr 1fr; }
  .line-grid.header { display:none; }
}
.btn[href]{text-decoration:none;display:inline-flex;align-items:center}
#syncStatus.bad{color:var(--danger);font-weight:700}