:root {
  color-scheme: dark;
  --bg: #101216;
  --panel: #1b2029;
  --panel-soft: #242a35;
  --text: #f5f7fb;
  --muted: #aab4c3;
  --line: #343b49;
  --accent: #4f9f8f;
  --blue: #5a8dee;
  --orange: #f3a33c;
  --red: #ef5b5b;
  --green: #49c27d;
}
.request-dialog [hidden]{display:none!important}
.history-empty[hidden]{display:none!important}
.request-slot{color:var(--green);font-size:.78rem;font-weight:800}.request-dialog{width:min(680px,calc(100% - 28px));border:1px solid var(--line);border-radius:12px;padding:0;background:var(--panel);color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.55)}.request-dialog::backdrop{background:rgba(3,8,15,.78);backdrop-filter:blur(4px)}.request-dialog form{display:grid;gap:18px;padding:24px}.dialog-head,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head h2{margin:3px 0 0}.dialog-close{width:38px;height:38px;padding:0;border:1px solid var(--line);background:var(--panel-soft);font-size:1.35rem}.request-edit-fields,.request-schedule-fields{display:grid;gap:14px}.request-dialog label{display:grid;gap:7px;color:var(--muted);font-size:.78rem;font-weight:750}.request-dialog .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.request-dialog textarea{min-height:115px}.request-dialog .dialog-check{display:flex;align-items:center}.request-dialog .dialog-check input{width:auto}.dialog-actions{justify-content:flex-end;padding-top:4px}.dialog-actions .secondary,.request-review .secondary{border:1px solid var(--line);background:var(--panel-soft);color:var(--text)}@media(max-width:650px){.request-dialog .form-grid{grid-template-columns:1fr}}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; width: 250px; border-right: 1px solid var(--line); background: #141820; transition: width 180ms ease, transform 180ms ease; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 20px; border-bottom: 1px solid var(--line); overflow: hidden; }
.brand-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; background: var(--accent); color: white; font-size: 1.35rem; font-weight: 900; }
.sidebar-brand div { display: grid; gap: 3px; white-space: nowrap; }
.sidebar-brand strong { font-size: 1.15rem; }
.sidebar-brand small, .sidebar-footer { color: var(--muted); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.nav-group { margin-bottom: 18px; }
.nav-group p { padding: 0 12px 7px; color: #778397; font-size: .68rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.nav-group a { display: flex; align-items: center; gap: 12px; min-height: 43px; margin: 2px 0; padding: 0 12px; border-radius: 7px; color: var(--muted); font-weight: 750; text-decoration: none; white-space: nowrap; overflow: hidden; }
.nav-group a:hover { background: var(--panel-soft); color: var(--text); }
.nav-group a.active { background: rgba(79,159,143,.18); color: #79d2c0; }
.nav-icon { flex: 0 0 24px; width: 24px; text-align: center; font-size: 1.05rem; }
.nav-count { display: grid; place-items: center; min-width: 21px; height: 21px; margin-left: auto; border-radius: 999px; padding: 0 6px; background: var(--red); color: white; font-size: .68rem; font-weight: 900; }
.nav-count.info { background: var(--blue); }.nav-count.warning { background: var(--orange); color: #17120a; }
.mobile-nav-count { position: absolute; top: 3px; left: calc(50% + 8px); display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #141820; border-radius: 999px; background: var(--red); color: white; font-size: .58rem; font-weight: 900; line-height: 1; }.mobile-nav-count.info { background: var(--blue); }.mobile-nav-count.warning { background: var(--orange); color: #17120a; }
.sidebar-footer { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 24px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.sidebar-logout { width: 100%; border-width: 1px 0 0; border-radius: 0; background: transparent; color: var(--muted); text-align: left; }
.sidebar-logout:hover { background: var(--panel-soft); color: var(--text); }
.sidebar-toggle { position: fixed; z-index: 60; top: 24px; left: 226px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0; background: var(--panel-soft); color: var(--text); font-size: 1.15rem; transition: left 180ms ease; }
body > .shell { width: min(1420px, calc(100% - 298px)); margin-left: max(282px, calc((100% - 1420px + 250px) / 2)); transition: margin 180ms ease, width 180ms ease; }
.sidebar-collapsed .app-sidebar { width: 76px; }
.sidebar-collapsed .sidebar-toggle { left: 56px; }
.sidebar-collapsed .sidebar-brand { padding-left: 17px; }
.sidebar-collapsed .sidebar-brand div, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-group p { display: none; }
.sidebar-collapsed .sidebar-nav { padding-inline: 9px; }
.sidebar-collapsed .nav-group a { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 0; }
body.sidebar-collapsed > .shell { width: min(1420px, calc(100% - 124px)); margin-left: max(108px, calc((100% - 1420px + 76px) / 2)); }

@media (max-width: 760px) {
  .app-sidebar { width: 250px; transform: translateX(-100%); box-shadow: 16px 0 40px rgba(0,0,0,.35); }
  .menu-open .app-sidebar { transform: translateX(0); }
  .sidebar-toggle, .sidebar-collapsed .sidebar-toggle { top: 14px; left: 14px; }
  body > .shell, body.sidebar-collapsed > .shell { width: min(100% - 20px, 1180px); margin: 0 auto; padding-top: 72px; }
  .sidebar-collapsed .app-sidebar { width: 250px; }
  .sidebar-collapsed .sidebar-brand div, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-group p { display: initial; }
  .sidebar-collapsed .nav-group a { justify-content: flex-start; padding: 0 12px; }
}

.shell {
  width: min(1420px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.topbar,
.panel-head,
.split,
.service-row,
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar {
  margin-bottom: 24px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

h2 {
  margin-top: 4px;
  font-size: 1.15rem;
}

.eyebrow,
.label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap;
}

.nav-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}

.dot.ok {
  background: var(--green);
}

.dot.warn {
  background: var(--orange);
}

.dot.ko {
  background: var(--red);
}

.overview,
.resources,
.service-grid,
.admin-grid {
  display: grid;
  gap: 16px;
}

.overview {
  grid-template-columns: 2fr repeat(3, 1fr);
  margin-bottom: 16px;
}

.stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.analytics-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.analytics-panel { margin-bottom: 16px; }
.analytics-actions { align-items: center; }
.analytics-generated { color: var(--muted); font-size: .76rem; text-align: right; margin: 10px 2px 0; }
.print-only { display: none; }
.analytics-insight { margin-bottom: 16px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 20px; }
.analytics-insight > div { display: grid; gap: 5px; }
.analytics-insight > div:not(:first-child) { border-left: 1px solid var(--border); padding-left: 20px; }
.analytics-insight span { color: var(--muted); font-size: .8rem; }
.analytics-trend { display: inline-flex; padding: 2px 7px; margin-right: 3px; border-radius: 999px; font-size: .72rem; }
.analytics-trend.good { color: #45c98b; background: rgba(69,201,139,.12); }
.analytics-trend.bad { color: #f87171; background: rgba(248,113,113,.12); }
.analytics-legend { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.legend-dot.expense { background: #f59e0b; }
.analytics-chart { display: grid; grid-template-columns: repeat(12, minmax(42px, 1fr)); align-items: end; gap: 10px; min-height: 275px; overflow-x: auto; padding: 18px 4px 0; }
.analytics-month { min-width: 42px; display: grid; grid-template-rows: auto 220px auto auto; text-align: center; color: var(--muted); font-size: .78rem; }
.analytics-month-value { min-height: 18px; font-size: .68rem; font-style: normal; white-space: nowrap; color: var(--muted); }
.analytics-month strong { color: var(--text); text-transform: capitalize; }
.analytics-bars { height: 220px; display: flex; gap: 4px; align-items: end; justify-content: center; border-bottom: 1px solid rgba(148,163,184,.22); }
.analytics-bar { display: block; flex: 0 0 16px; width: 16px; min-height: 0; border-radius: 5px 5px 2px 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset; }
.analytics-bar.revenue { background: #45c98b; }
.analytics-bar.expense { background: #f59e0b; }
.analytics-table-wrap { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; }
.analytics-table th, .analytics-table td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--border); }
.analytics-table th:first-child, .analytics-table td:first-child { text-align: left; }
.analytics-table tbody tr:last-child td { border-bottom: 0; }
.positive-value { color: #45c98b !important; }
.negative-value { color: #f87171 !important; }
@media (max-width: 1100px) { .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .analytics-kpis { grid-template-columns: 1fr; } .analytics-chart { grid-template-columns: repeat(12, 48px); } .analytics-insight { grid-template-columns: 1fr; } .analytics-insight > div:not(:first-child) { border-left: 0; border-top: 1px solid var(--border); padding: 12px 0 0; } }
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A4 landscape; margin: 8mm 15mm; }
  body { background: #fff !important; color: #111 !important; }
  .sidebar, .app-sidebar, .sidebar-toggle, .mobile-tabbar, .analytics-actions, .global-search { display: none !important; }
  .shell { margin: 0 !important; max-width: none !important; width: 100% !important; box-sizing: border-box !important; padding: 0 10mm !important; }
  .topbar { margin-bottom: 8px !important; }
  .topbar h1 { font-size: 25px !important; }
  .page-intro { display: none !important; }
  .panel, .metric-card { background: #fff !important; color: #111 !important; border-color: #bbb !important; box-shadow: none !important; }
  .analytics-kpis { grid-template-columns: repeat(5, 1fr) !important; gap: 7px !important; margin-bottom: 7px !important; }
  .analytics-kpis .metric-card { min-height: 0 !important; padding: 10px !important; }
  .analytics-kpis .metric-card strong { font-size: 18px !important; }
  .analytics-insight { margin-bottom: 7px !important; padding: 9px 14px !important; }
  .analytics-panel { margin-bottom: 7px !important; padding: 10px 14px !important; }
  .analytics-panel h2 { font-size: 16px !important; }
  .analytics-table th, .analytics-table td { color: #111 !important; border-color: #ccc !important; }
  .analytics-table th, .analytics-table td { padding: 5px 8px !important; font-size: 10px !important; }
  .analytics-empty-month { display: none !important; }
  .print-only { display: block !important; }
  .analytics-print-note { margin: 5px 0 0 !important; color: #555 !important; font-size: 8px !important; }
  .analytics-chart { overflow: visible; min-height: 125px !important; padding-top: 2px !important; }
  .analytics-month { grid-template-rows: 14px 85px auto auto !important; }
  .analytics-bars { height: 85px !important; }
  .analytics-bar { display: block !important; flex: 0 0 12px !important; width: 12px !important; min-width: 12px !important; max-height: 85px !important; border: 0 !important; }
  .analytics-print-h-0 { height: 0 !important; } .analytics-print-h-1 { height: 5px !important; } .analytics-print-h-2 { height: 9px !important; } .analytics-print-h-3 { height: 13px !important; } .analytics-print-h-4 { height: 17px !important; }
  .analytics-print-h-5 { height: 22px !important; } .analytics-print-h-6 { height: 26px !important; } .analytics-print-h-7 { height: 30px !important; } .analytics-print-h-8 { height: 34px !important; } .analytics-print-h-9 { height: 39px !important; }
  .analytics-print-h-10 { height: 43px !important; } .analytics-print-h-11 { height: 47px !important; } .analytics-print-h-12 { height: 51px !important; } .analytics-print-h-13 { height: 56px !important; } .analytics-print-h-14 { height: 60px !important; }
  .analytics-print-h-15 { height: 64px !important; } .analytics-print-h-16 { height: 68px !important; } .analytics-print-h-17 { height: 73px !important; } .analytics-print-h-18 { height: 77px !important; } .analytics-print-h-19 { height: 81px !important; } .analytics-print-h-20 { height: 85px !important; }
  .analytics-bar.revenue { background: #45c98b !important; border-color: #45c98b !important; }
  .analytics-bar.expense { background: #f59e0b !important; border-color: #f59e0b !important; }
  .analytics-month-value { color: #333 !important; font-size: 8px !important; }
  .analytics-generated { display: none !important; }
  .print-report-brand { display: flex !important; align-items: center; gap: 12px; padding: 0 0 7px; margin-bottom: 7px; border-bottom: 2px solid #111; }
  .print-report-brand img { width: 42px; height: 42px; object-fit: contain; }
  .print-report-brand div { display: grid; line-height: 1.2; }
  .print-report-brand strong { font-size: 19px; color: #111; }
  .print-report-brand span { font-size: 10px; color: #333; }
  .print-report-brand small { font-size: 8px; color: #666; }
}
.infra-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.request-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.request-review-list { display: grid; gap: 14px; }
.request-review { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: var(--panel); }
.request-review.pending { border-left: 3px solid var(--orange); }.request-review.approved { border-left: 3px solid var(--green); opacity: .82; }.request-review.rejected { border-left: 3px solid var(--red); opacity: .7; }
.request-review > header,.request-review > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-review > header > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.request-profile { color: var(--blue); font-size: .72rem; font-weight: 900; text-transform: uppercase; }.request-date { color: var(--muted); font-size: .78rem; }
.request-review-body { display: grid; grid-template-columns: .7fr .7fr 1.6fr; gap: 24px; margin: 20px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.request-person,.request-need,.request-message { display: grid; align-content: start; gap: 5px; }.request-person h2 { margin: 0 0 5px; }.request-person a { color: var(--muted); font-size: .82rem; text-decoration: none; }.request-need span,.request-message span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.request-need small { color: var(--muted); }.request-message p { margin: 0; white-space: pre-wrap; }
.request-review > footer { justify-content: flex-end; }.request-review .reject { border: 1px solid rgba(239,91,91,.35); background: rgba(239,91,91,.1); color: var(--red); }
.ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ops-history { margin-bottom: 16px; }
.ops-incidents { margin-bottom: 16px; }.ops-incidents .attention-list { grid-template-columns: repeat(2, minmax(0,1fr)); }.ops-incidents .all-good { grid-column: 1 / -1; }
@media (max-width: 760px) { .ops-incidents .attention-list { grid-template-columns: 1fr; }.ops-incidents .all-good { grid-column: auto; } }
.backup-overview, .backup-latest { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.backup-latest > div { display: grid; gap: 5px; }
.backup-latest small { color: var(--muted); }
.history-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.history-summary > div { display: grid; gap: 5px; padding: 12px 14px; border-radius: 8px; background: var(--panel-soft); }
.history-summary span { color: var(--muted); font-size: .75rem; }
.history-summary strong { font-size: 1.15rem; }
.history-canvas-wrap { position: relative; min-height: 280px; margin-top: 12px; }
.history-canvas-wrap canvas { display: block; width: 100%; height: 280px; }
.history-empty { position: absolute; inset: 0; display: grid; place-items: center; }
.settings-form { display: grid; gap: 12px; align-content: start; }
.settings-form label { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, .7fr); align-items: center; gap: 12px; color: var(--muted); }
.audit-list { max-height: 480px; margin-top: 18px; overflow-y: auto; }
.audit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.audit-row div { display: grid; gap: 4px; }
.audit-row small, .audit-row time { color: var(--muted); font-size: .8rem; }
.infra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.infra-disks { margin-bottom: 16px; }
.infra-list { display: grid; gap: 10px; margin-top: 18px; }
.infra-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 70px; padding: 12px; border-radius: 8px; background: var(--panel-soft); }
.infra-row div { display: grid; gap: 5px; min-width: 0; }
.infra-row small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.status-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 900; }
.status-icon.up { color: var(--green); background: rgba(73,194,125,.15); }
.status-icon.down { color: var(--red); background: rgba(239,91,91,.15); }
.home-welcome { margin-top: 10px; color: var(--muted); }
.home-header { align-items: flex-end; }
.home-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 16px; }
.home-kpi { display: flex; align-items: center; gap: 16px; min-height: 126px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-decoration: none; }
.home-kpi:hover { border-color: #4b5669; transform: translateY(-1px); }
.home-kpi > div:last-child { min-width: 0; }
.home-kpi strong { display: block; margin: 7px 0; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1; }
#serverState { max-width: 100%; font-size: clamp(1.25rem, 1.65vw, 1.65rem); white-space: nowrap; }
.home-kpi span:last-child { display: block; overflow: hidden; color: var(--muted); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.kpi-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; font-size: 1.15rem; font-weight: 900; }
.kpi-icon.server { color: var(--green); background: rgba(73,194,125,.14); }
.kpi-icon.website { color: var(--blue); background: rgba(90,141,238,.14); }
.kpi-icon.audience { color: #bb8af7; background: rgba(187,138,247,.14); }
.kpi-icon.live { color: var(--green); background: rgba(73,194,125,.14); }
.live-pulse { width: 13px; height: 13px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(73,194,125,.55); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 10px rgba(73,194,125,0); } 100% { box-shadow: 0 0 0 0 rgba(73,194,125,0); } }
.kpi-icon.planning { color: var(--orange); background: rgba(243,163,60,.14); }
.kpi-icon.health { color: #ff6f91; background: rgba(255,111,145,.14); }
.health-hero { display: flex; align-items: center; gap: 30px; margin-bottom: 16px; }
.health-gauge { display: grid; place-items: center; align-content: center; flex: 0 0 150px; width: 150px; height: 150px; border: 12px solid var(--green); border-radius: 50%; background: var(--panel-soft); }
.health-gauge.warn { border-color: var(--orange); }.health-gauge.error { border-color: var(--red); }

/* Cockpit V2 */
.cockpit-header { margin-bottom: 22px; }
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 22px 2px 10px; }.home-section-head:first-of-type { margin-top: 0; }.home-section-head h2 { margin: 3px 0 0; font-size: 1.05rem; }.home-section-head > span { color: var(--muted); font-size: .8rem; text-transform: capitalize; }
.command-search-trigger { border-color: rgba(90,141,238,.35); background: rgba(90,141,238,.1); }
.cockpit-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cockpit-summary > a { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, var(--panel), var(--panel-soft)); color: var(--text); text-decoration: none; }
.cockpit-summary > a:hover { border-color: #536174; transform: translateY(-2px); }
.cockpit-summary > a > div { flex: 1; min-width: 0; }
.cockpit-summary small { display: block; overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-summary strong { display: block; margin-top: 6px; font-size: 1.5rem; line-height: 1; }
.summary-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; font-weight: 900; }
.summary-icon.request { color: #bb8af7; background: rgba(187,138,247,.13); }
.summary-icon.appointment { color: var(--blue); background: rgba(90,141,238,.13); }
.summary-icon.overdue { color: var(--red); background: rgba(239,91,91,.13); }
.summary-icon.revenue, .summary-icon.live { color: var(--green); background: rgba(73,194,125,.13); }
.summary-icon .live-pulse { display: block; }
.cockpit-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 16px; margin-bottom: 16px; }
.cockpit-grid.lower { grid-template-columns: 1.2fr .8fr; }
.today-actions { display: grid; gap: 8px; }
.today-action { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; background: var(--panel-soft); color: var(--text); text-decoration: none; }
.today-action:hover { border-color: #566174; background: #252b35; }
.today-action.urgent { border-left-color: var(--red); }.today-action.high { border-left-color: var(--orange); }
.action-kind { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(90,141,238,.11); font-weight: 900; }
.today-action strong, .today-action small { display: block; }.today-action small, .action-meta { color: var(--muted); font-size: .78rem; }
.cockpit-good { min-height: 88px; }
.quick-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-action-grid a { display: flex; align-items: center; gap: 11px; min-height: 78px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); color: var(--blue); font-size: 1.25rem; text-decoration: none; }
.quick-action-grid a:hover { border-color: var(--blue); }
.quick-action-grid strong, .quick-action-grid small { display: block; color: var(--text); font-size: .84rem; }.quick-action-grid small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.pipeline-panel { margin-bottom: 16px; overflow: hidden; }
.business-pipeline { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 8px; overflow-x: auto; }
.pipeline-stage { position: relative; display: flex; min-height: 126px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); color: var(--text); text-decoration: none; }
.pipeline-stage:hover { border-color: var(--blue); transform: translateY(-2px); }
.pipeline-stage > div { display: flex; flex-direction: column; justify-content: flex-end; }
.pipeline-index { position: absolute; top: 12px; left: 13px; color: #697588; font-size: .7rem; font-weight: 900; }
.pipeline-stage small { color: var(--muted); font-size: .74rem; }.pipeline-stage strong { margin: 5px 0; font-size: 1.8rem; }.pipeline-stage em { color: var(--green); font-size: .73rem; font-style: normal; font-weight: 800; }
.pipeline-stage > i { position: absolute; z-index: 2; top: 50%; right: -14px; color: #677386; font-style: normal; transform: translateY(-50%); }
.live-page-list { display: grid; gap: 8px; }.live-page-list > div:not(.empty-state) { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 8px; background: var(--panel-soft); }.live-page-list span { display: flex; align-items: center; gap: 9px; }
.facebook-panel { margin-bottom: 16px; }
.facebook-overview { margin-top: 18px; }
.facebook-kpis-compact { margin: 0; }
.facebook-detail-panel { margin-bottom: 16px; }
.facebook-ranking-page { margin-top: 18px; }
.facebook-post-list { display: grid; gap: 8px; margin-top: 18px; }.facebook-post-list a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); color: var(--text); text-decoration: none; }.facebook-post-list a:hover { border-color: #1877f2; }.facebook-post-list strong, .facebook-post-list small { display: block; }.facebook-post-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.facebook-post-list small, .facebook-post-list em { margin-top: 4px; color: var(--muted); font-size: .72rem; font-style: normal; }.facebook-post-list em { white-space: nowrap; }
.facebook-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.facebook-kpis > div { padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.facebook-kpis small, .facebook-kpis strong { display: block; }.facebook-kpis small { color: var(--muted); }.facebook-kpis strong { margin-top: 7px; font-size: 1.45rem; }
.facebook-latest { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); color: var(--text); text-decoration: none; }
.facebook-latest:hover { border-color: #1877f2; }.facebook-latest span { min-width: 0; }.facebook-latest small, .facebook-latest strong { display: block; }.facebook-latest small, .facebook-latest em { color: var(--muted); font-size: .72rem; font-style: normal; }.facebook-latest strong { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.facebook-latest em { flex: 0 0 auto; }
.facebook-notice { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid rgba(24,119,242,.35); border-radius: 10px; background: rgba(24,119,242,.08); }.facebook-notice.error { border-color: rgba(239,91,91,.4); background: rgba(239,91,91,.08); }.facebook-notice strong, .facebook-notice small { display: block; }.facebook-notice small { margin-top: 4px; color: var(--muted); }.facebook-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: #1877f2; color: white; font-size: 1.4rem; font-weight: 900; }
.facebook-ranking { display: grid; gap: 7px; margin-top: 16px; }.facebook-ranking h3 { margin: 0 0 3px; font-size: .82rem; text-transform: uppercase; color: var(--muted); }.facebook-ranking a { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel-soft); color: var(--text); text-decoration: none; }.facebook-ranking a:hover { background: #252b35; }.facebook-ranking b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(24,119,242,.15); color: #77adf5; }.facebook-ranking span { min-width: 0; }.facebook-ranking strong, .facebook-ranking small { display: block; }.facebook-ranking strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.facebook-ranking small, .facebook-ranking em { margin-top: 3px; color: var(--muted); font-size: .7rem; font-style: normal; }.facebook-ranking em { white-space: nowrap; }
@media (max-width: 700px) { .facebook-kpis { grid-template-columns: 1fr; }.facebook-latest { align-items: flex-start; flex-direction: column; } }
@media (max-width: 700px) { .facebook-ranking a { grid-template-columns: 30px minmax(0,1fr); }.facebook-ranking em { grid-column: 2; white-space: normal; } }
@media (max-width: 700px) { .facebook-post-list a { grid-template-columns: 1fr; }.facebook-post-list em { white-space: normal; } }
.record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.record-actions button:first-child { border-color: rgba(90,141,238,.35); background: rgba(90,141,238,.1); color: var(--blue); }
.global-search { width: min(680px, calc(100% - 24px)); padding: 0; border: 1px solid #4b5668; border-radius: 14px; background: #171b22; color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.global-search::backdrop { background: rgba(3,6,12,.72); backdrop-filter: blur(5px); }
.global-search-box { overflow: hidden; border-radius: inherit; }
.global-search-head { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.global-search-head input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1rem; }
.global-search kbd { padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font: inherit; font-size: .68rem; }
.global-search-results { min-height: 100px; max-height: 440px; padding: 8px; overflow-y: auto; }.global-search-results > p { padding: 28px 12px; color: var(--muted); text-align: center; }
.global-search-results a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; color: var(--text); text-decoration: none; }.global-search-results a:hover { background: var(--panel-soft); }
.global-search-results strong, .global-search-results small { display: block; }.global-search-results small { margin-top: 3px; color: var(--muted); }
.search-type { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(90,141,238,.12); color: var(--blue); font-weight: 900; }
.global-search footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }.global-search footer button { min-height: 32px; padding: 5px 10px; }
.health-gauge strong { font-size: 2.5rem; line-height: 1; }.health-gauge span { color: var(--muted); }
.health-hero > div:last-child { display: grid; gap: 8px; }.health-hero p,.health-hero small { color: var(--muted); }
.health-factors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.health-factor { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid transparent; border-radius: 10px; background: var(--panel-soft); }
.health-factor.warn { border-color: rgba(243,163,60,.35); }.health-factor.error { border-color: rgba(239,91,91,.4); }
.health-factor > div { display: grid; gap: 5px; }.health-factor small,.health-factor > span:last-child { color: var(--muted); }
@media (max-width: 700px) { .health-hero { align-items: flex-start; flex-direction: column; } .health-gauge { align-self: center; } .health-factors { grid-template-columns: 1fr; } }
.home-main-grid { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr); gap: 16px; margin-bottom: 16px; }
.attention-list { display: grid; gap: 10px; margin-top: 18px; }
.attention-row, .all-good { display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 12px; border-radius: 8px; background: var(--panel-soft); }
.attention-row div, .all-good div { display: grid; gap: 4px; }
.attention-row small, .all-good small, .empty-compact { color: var(--muted); }
.alert-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; font-weight: 900; }
.alert-icon.warn { color: var(--orange); background: rgba(243,163,60,.16); }
.alert-icon.ko { color: var(--red); background: rgba(239,91,91,.16); }
.all-good > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(73,194,125,.16); color: var(--green); font-size: 1.2rem; font-weight: 900; }
.panel-link { color: #79d2c0; font-size: .85rem; font-weight: 800; text-decoration: none; }
.mini-chart { display: flex; align-items: end; gap: 12px; height: 225px; margin-top: 20px; padding-top: 10px; border-bottom: 1px solid var(--line); }
.mini-day { display: grid; grid-template-rows: 24px 1fr 28px; align-items: end; justify-items: center; flex: 1; height: 100%; color: var(--muted); font-size: .72rem; }
.mini-bar { display: block; width: min(38px, 70%); border-radius: 5px 5px 0 0; background: var(--accent); }
.mini-h-0 { height: 0; }.mini-h-1 { height: 8px; }.mini-h-2 { height: 16px; }.mini-h-3 { height: 24px; }.mini-h-4 { height: 32px; }.mini-h-5 { height: 40px; }.mini-h-6 { height: 48px; }.mini-h-7 { height: 56px; }.mini-h-8 { height: 64px; }.mini-h-9 { height: 72px; }.mini-h-10 { height: 80px; }.mini-h-11 { height: 88px; }.mini-h-12 { height: 96px; }.mini-h-13 { height: 104px; }.mini-h-14 { height: 112px; }.mini-h-15 { height: 120px; }.mini-h-16 { height: 128px; }.mini-h-17 { height: 136px; }.mini-h-18 { height: 144px; }.mini-h-19 { height: 152px; }.mini-h-20 { height: 160px; }
.mini-day small { padding-top: 8px; text-transform: capitalize; }
.home-activity { margin-bottom: 16px; }
.activity-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 20px; }
.activity-columns h3 { margin: 0 0 8px; font-size: .86rem; color: var(--muted); text-transform: uppercase; }
.compact-list { display: grid; }
.compact-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.compact-list a:last-child { border-bottom: 0; }
.compact-list a > span:first-child { display: grid; gap: 4px; min-width: 0; }
.compact-list small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.compact-list time, .compact-list a > span:last-child { color: var(--muted); white-space: nowrap; }
.empty-compact { padding: 20px 0; }
.resource-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.home-system-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }.home-system-strip > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; }.home-system-strip > a:hover { border-color: #536174; transform: translateY(-2px); }.home-system-strip small, .home-system-strip strong { display: block; }.home-system-strip small { color: var(--muted); font-size: .7rem; }.home-system-strip strong { margin-top: 6px; font-size: 1.15rem; }.home-system-strip .system-health { justify-content: flex-start; }.home-system-strip .system-health .dot { flex: 0 0 auto; }
.resource-title, .resource-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resource-stat { min-height: 56px; padding: 0 16px; border-radius: 8px; background: var(--panel-soft); }
.bar span.bar-w-0 { width: 0%; }.bar span.bar-w-1 { width: 5%; }.bar span.bar-w-2 { width: 10%; }.bar span.bar-w-3 { width: 15%; }.bar span.bar-w-4 { width: 20%; }.bar span.bar-w-5 { width: 25%; }.bar span.bar-w-6 { width: 30%; }.bar span.bar-w-7 { width: 35%; }.bar span.bar-w-8 { width: 40%; }.bar span.bar-w-9 { width: 45%; }.bar span.bar-w-10 { width: 50%; }.bar span.bar-w-11 { width: 55%; }.bar span.bar-w-12 { width: 60%; }.bar span.bar-w-13 { width: 65%; }.bar span.bar-w-14 { width: 70%; }.bar span.bar-w-15 { width: 75%; }.bar span.bar-w-16 { width: 80%; }.bar span.bar-w-17 { width: 85%; }.bar span.bar-w-18 { width: 90%; }.bar span.bar-w-19 { width: 95%; }.bar span.bar-w-20 { width: 100%; }
.stats-chart-panel { margin-bottom: 16px; }
.stats-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.traffic-chart { display: flex; align-items: stretch; gap: 5px; height: 310px; margin-top: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.traffic-day { display: grid; grid-template-rows: 24px 1fr 28px; align-items: end; justify-items: center; flex: 1 0 24px; min-width: 24px; color: var(--muted); font-size: .7rem; }
.traffic-bar { width: min(22px, 80%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--accent); }
.traffic-day small { padding-top: 7px; font-size: .62rem; writing-mode: vertical-rl; }
.ranking { display: grid; gap: 2px; margin-top: 18px; }
.rank-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row > span:last-child, .rank-number { color: var(--muted); }

.resources {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 16px;
}

.admin-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.client-profile-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; margin-top: 16px; }
.client-profile-summary > div { display: grid; gap: 5px; padding: 13px; border-radius: 8px; background: var(--panel-soft); }
.client-profile-summary span { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.client-profile-summary .client-notes { grid-column: span 2; }
.client-profile-summary p { white-space: pre-wrap; }
.profile-actions { display: flex !important; flex-wrap: wrap; align-content: center; gap: 8px !important; background: transparent !important; padding: 0 !important; }
.profile-actions a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(90,141,238,.35); border-radius: 7px; background: rgba(90,141,238,.1); color: var(--blue); font-weight: 800; text-decoration: none; }
.profile-actions a.disabled { pointer-events: none; opacity: .4; }

.accounting-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.expense-layout { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: 16px; }
.expense-list { display: grid; gap: 10px; margin-top: 18px; }
.expense-row { display: grid; grid-template-columns: minmax(0,1fr) 180px auto; gap: 14px; align-items: center; padding: 13px; background: var(--panel-soft); border-radius: 8px; }
.expense-row div { display: grid; gap: 5px; }
.expense-row span { color: var(--muted); }
.expense-row button { color: var(--red); background: rgba(239,91,91,.14); }
.backup-download { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 800; }
.accounting-toolbar select { min-width: 120px; }
.accounting-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.accounting-kpi { min-height: 130px; }
.accounting-kpi strong { display: block; margin: 14px 0 6px; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.accounting-kpi span, .revenue-values, .status-row span, #chartLegend { color: var(--muted); }
.accounting-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr); gap: 16px; }
.revenue-chart { display: grid; grid-template-columns: repeat(12, minmax(36px, 1fr)); gap: 8px; min-height: 330px; margin-top: 24px; overflow-x: auto; }
.revenue-month { display: grid; grid-template-rows: 34px 240px 24px; min-width: 36px; text-align: center; }
.revenue-values { overflow: hidden; font-size: .68rem; }
.revenue-bars { display: flex; align-items: end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--line); }
.revenue-bar { width: min(14px, 42%); min-height: 0; border-radius: 4px 4px 0 0; }
.revenue-bar.billed { background: var(--blue); }
.revenue-bar.paid { background: var(--green); }
.chart-h-0 { height: 0; }
.chart-h-1 { height: 11px; }
.chart-h-2 { height: 22px; }
.chart-h-3 { height: 33px; }
.chart-h-4 { height: 44px; }
.chart-h-5 { height: 55px; }
.chart-h-6 { height: 66px; }
.chart-h-7 { height: 77px; }
.chart-h-8 { height: 88px; }
.chart-h-9 { height: 99px; }
.chart-h-10 { height: 110px; }
.chart-h-11 { height: 121px; }
.chart-h-12 { height: 132px; }
.chart-h-13 { height: 143px; }
.chart-h-14 { height: 154px; }
.chart-h-15 { height: 165px; }
.chart-h-16 { height: 176px; }
.chart-h-17 { height: 187px; }
.chart-h-18 { height: 198px; }
.chart-h-19 { height: 209px; }
.chart-h-20 { height: 220px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; border-radius: 2px; }
.legend-dot.billed { background: var(--blue); }
.legend-dot.paid { background: var(--green); }
.revenue-month > strong { padding-top: 7px; font-size: .72rem; }
.status-breakdown { display: grid; gap: 10px; margin-top: 24px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 12px 0; }
.status-row div { display: grid; gap: 5px; }

.planning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
  gap: 16px;
  margin-bottom: 16px;
}

.billing-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  margin-bottom: 16px;
}

.billing-layout.history-collapsed {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
}

.panel,
.metric-card,
.summary-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 20px;
}

.summary-panel {
  display: grid;
  align-content: space-between;
  min-height: 150px;
}

.summary-panel strong,
.metric-card strong,
.panel-head strong {
  display: block;
  margin-top: 8px;
  font-size: 1.9rem;
  line-height: 1;
}

.summary-panel p:last-child,
.metric-card span,
.panel-head span,
.split,
.service-url {
  color: var(--muted);
  font-size: 0.92rem;
}

.metric-card {
  display: grid;
  align-content: space-between;
  min-height: 150px;
}

.bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #11151c;
  margin: 18px 0 12px;
}

.bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 300ms ease;
}

.bar span.warn {
  background: var(--orange);
}

.bar span.ko {
  background: var(--red);
}

.disk-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.disk-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(220px, 2fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.disk-mount {
  font-weight: 800;
}

.service-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 16px;
}

.service-row {
  min-height: 78px;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 78px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.admin-form {
  display: grid;
  gap: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.client-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.client-form input:nth-of-type(4),
.client-form button {
  grid-column: 1 / -1;
}

.search-input {
  margin-top: 16px;
}

.client-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.client-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.client-card.selected {
  outline: 2px solid var(--accent);
}

.client-name {
  display: block;
  margin-bottom: 6px;
  font-weight: 900;
}

.client-meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.client-actions {
  display: flex;
  gap: 8px;
}

.client-actions button {
  min-height: 34px;
}

.client-actions button[data-action="delete"] {
  background: rgba(239, 91, 91, 0.16);
  color: var(--red);
}

.form-title {
  font-weight: 800;
}

input,
select,
textarea,
button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151c;
  color: var(--text);
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  padding: 0 12px;
}

textarea {
  min-height: 86px;
  padding-top: 10px;
  resize: vertical;
}

button {
  padding: 0 14px;
  background: var(--accent);
  border-color: transparent;
  color: #07110f;
  font-weight: 800;
  cursor: pointer;
}

.config-list {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.config-row button {
  min-height: 34px;
  background: rgba(239, 91, 91, 0.16);
  color: var(--red);
}

.record-list {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.record-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.record-row p {
  margin-top: 6px;
  color: var(--muted);
  white-space: pre-wrap;
}

.record-row button {
  min-height: 34px;
  background: rgba(239, 91, 91, 0.16);
  color: var(--red);
}

.outage-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.outage-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.outage-card-head small, .outage-card-head strong { display: block; }
.outage-card-head small { margin-bottom: 4px; color: var(--muted); font-size: .72rem; }
.outage-card-head strong { font-size: 1rem; line-height: 1.35; }
.outage-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.outage-badges span { padding: 5px 8px; border-radius: 99px; background: rgba(90,141,238,.11); color: #a9c2f4; font-size: .67rem; font-weight: 800; white-space: nowrap; }
.outage-badges span.open, .outage-badges span.urgent { background: rgba(243,163,60,.13); color: var(--orange); }
.outage-badges span.resolved { background: rgba(73,194,125,.13); color: var(--green); }
.outage-badges span.urgent { background: rgba(239,91,91,.13); color: var(--red); }
.outage-card-content { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px 0; }
.outage-card-content section { min-width: 0; padding: 11px 12px; border-radius: 8px; background: rgba(0,0,0,.12); }
.outage-card-content section.resolution { background: rgba(73,194,125,.045); }
.outage-card-content small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.outage-card-content p { margin-top: 7px; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.outage-card .record-actions { padding-top: 1px; }
.outage-card .record-actions button[data-outage-status] { border-color: rgba(73,194,125,.3); background: rgba(73,194,125,.1); color: var(--green); }
.outage-card .record-actions button[data-record] { margin-left: auto; }

/* Centre e-mails */
.mailbox-panel { margin-bottom: 16px; }
.mailbox-panel h2 { display: flex; align-items: center; gap: 9px; }
.mailbox-unread { padding: 4px 8px; border-radius: 99px; background: rgba(90,141,238,.13); color: var(--blue); font-size: .68rem; }
.mailbox-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); min-height: 390px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.mailbox-list { max-height: 560px; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(0,0,0,.08); }
.mailbox-list > button { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.mailbox-list > button:hover, .mailbox-list > button.active { background: rgba(90,141,238,.1); }
.mailbox-list > button.unread { box-shadow: inset 3px 0 var(--blue); background: rgba(90,141,238,.06); }
.mailbox-list > button span:nth-child(2), .mailbox-list strong, .mailbox-list b, .mailbox-list small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-list strong { font-size: .78rem; }.mailbox-list b { margin-top: 3px; font-size: .74rem; }.mailbox-list small { margin-top: 4px; color: var(--muted); font-size: .67rem; font-weight: 400; }
.mailbox-list > button:not(.unread) strong, .mailbox-list > button:not(.unread) b { font-weight: 500; color: var(--muted); }
.mailbox-avatar { display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #35425a; color: #cbdcff; font-weight: 900; }
.mailbox-reader { min-width: 0; padding: 18px; }
.mailbox-reader > header { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mailbox-reader h3 { margin: 0 0 7px; }.mailbox-reader p, .mailbox-reader time { color: var(--muted); font-size: .73rem; }.mailbox-reader header > div:last-child { display: flex; align-items: start; gap: 6px; flex-wrap: wrap; }
.mailbox-reader pre { max-height: 390px; margin: 0; padding: 18px 3px; overflow: auto; color: var(--text); font: inherit; font-size: .82rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.mailbox-files { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 0; border-bottom: 1px solid var(--line); }.mailbox-files a { padding: 7px 9px; border-radius: 7px; background: var(--panel-soft); color: var(--blue); font-size: .72rem; text-decoration: none; }.mailbox-files small { color: var(--muted); }
.email-center-layout { display: grid; grid-template-columns: minmax(260px,.58fr) minmax(0,1.42fr); gap: 16px; margin-bottom: 16px; }
.email-template-panel, .email-composer { margin: 0; }
.email-template-panel > .search-input { margin-bottom: 9px; }
.template-filters { display: grid; grid-template-columns: 1fr 1.35fr .7fr; gap: 5px; margin-bottom: 14px; padding: 4px; border-radius: 8px; background: var(--panel-soft); }
.template-filters button { min-height: 34px; padding: 5px 7px; border: 0; background: transparent; color: var(--muted); font-size: .7rem; }
.template-filters button.active { background: #343d4b; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.email-template-list { display: grid; gap: 15px; max-height: 680px; padding-right: 3px; overflow-y: auto; }
.template-group { display: grid; gap: 6px; }
.template-group h3 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 4px; color: var(--muted); font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.template-group h3 span { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 99px; background: var(--panel-soft); font-size: .62rem; }
.template-group > button { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; background: var(--panel-soft); color: var(--text); text-align: left; }
.template-group > button:hover, .template-group > button.active { border-color: var(--blue); background: rgba(90,141,238,.1); }
.email-template-list strong, .email-template-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.email-template-list small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.email-composer { display: grid; gap: 12px; }
.email-composer textarea { min-height: 300px; line-height: 1.55; resize: vertical; }
.email-variables { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }.email-variables > span { margin-right: 5px; color: var(--muted); font-size: .73rem; }.email-variables button { min-height: 30px; padding: 4px 8px; border-radius: 99px; background: rgba(90,141,238,.1); color: var(--blue); font-family: monospace; font-size: .7rem; }
.email-actions { display: flex; flex-wrap: wrap; gap: 8px; }.email-actions .primary-action { margin-left: auto; }
.primary-action { border-color: #5fb7a6 !important; background: #4d9e8f !important; color: white !important; }
.email-history { display: grid; gap: 8px; }.email-history article { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 8px; background: var(--panel-soft); }.email-history strong, .email-history small { display: block; }.email-history small, .email-history time { margin-top: 3px; color: var(--muted); font-size: .72rem; }.email-history-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(73,194,125,.12); color: var(--green); font-weight: 900; }
.email-preview-dialog { width: min(720px,calc(100% - 24px)); padding: 0; border: 1px solid #4b5668; border-radius: 14px; background: #171b22; color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.55); }.email-preview-dialog::backdrop { background: rgba(3,6,12,.75); backdrop-filter: blur(5px); }
.email-preview-card > header, .email-preview-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }.email-preview-card > footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }.email-preview-card header button { min-width: 38px; padding: 5px; font-size: 1.3rem; }
.email-preview-meta { padding: 11px 18px; background: var(--panel-soft); color: var(--muted); font-size: .78rem; }.email-preview-body { min-height: 220px; max-height: 50vh; padding: 22px; overflow-y: auto; background: white; color: #222; line-height: 1.6; }.email-preview-body p { margin: 0 0 16px; }
.email-preview-body .review-link { display: inline-block; padding: 12px 18px; border-radius: 7px; background: #2e5fa7; color: white; font-weight: 800; text-decoration: none; }
.email-attachments { display: grid; gap: 9px; padding: 13px; border: 1px dashed #485467; border-radius: 9px; background: rgba(0,0,0,.08); }
.email-attachments > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.email-attachments > div:first-child small { color: var(--muted); font-size: .68rem; text-align: right; }
.attachment-picker { display: inline-flex; justify-self: start; cursor: pointer; }.attachment-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.attachment-picker span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 11px; border: 1px solid rgba(90,141,238,.35); border-radius: 7px; background: rgba(90,141,238,.1); color: var(--blue); font-size: .78rem; font-weight: 800; }
.attachment-list { display: grid; gap: 6px; }.attachment-list > div:not(.empty-state) { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: var(--panel-soft); }.attachment-list strong, .attachment-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attachment-list small { color: var(--muted); font-size: .68rem; }.attachment-list button { min-width: 30px; min-height: 30px; padding: 3px; background: rgba(239,91,91,.12); color: var(--red); }
.email-preview-meta { display: grid; gap: 4px; }
.recipient-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0; border: 0; }.recipient-mode legend { margin-bottom: 7px; color: var(--muted); font-size: .75rem; }.recipient-mode label { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); cursor: pointer; }.recipient-mode label:has(input:checked) { border-color: var(--blue); background: rgba(90,141,238,.12); color: #cbdcff; }.recipient-mode input { position: absolute; opacity: 0; }
.direct-recipient-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.direct-recipient-fields[hidden] { display: none; }
.intervention-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; border: 0; }
.intervention-mode legend { margin-bottom: 7px; color: var(--muted); font-size: .75rem; }
.intervention-mode label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); cursor: pointer; }
.intervention-mode label:has(input:checked) { border-color: var(--blue); background: rgba(90,141,238,.12); color: #cbdcff; }
.intervention-mode input { position: absolute; opacity: 0; pointer-events: none; }
.planning-mode { display: inline-block; padding: 3px 7px; border-radius: 99px; background: rgba(243,163,60,.12); color: var(--orange); font-size: .68rem; }
.planning-mode.remote { background: rgba(90,141,238,.12); color: var(--blue); }

.month-controls,
.filter-row,
.inline-fields {
  display: flex;
  gap: 10px;
}

.month-controls button {
  min-height: 34px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.calendar-weekdays {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  text-align: left;
}

.calendar-day.today {
  outline: 2px solid var(--accent);
}

.muted-day {
  opacity: 0.45;
}

.calendar-number {
  font-weight: 900;
}

.calendar-total {
  min-height: 17px;
  color: var(--muted);
  font-size: 0.78rem;
}

.calendar-item {
  overflow: hidden;
  border-radius: 6px;
  background: rgba(79, 159, 143, 0.18);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-form {
  display: grid;
  align-content: start;
  gap: 10px;
}

.billing-form {
  display: grid;
  align-content: start;
  gap: 10px;
}

.filter-row {
  margin-top: 16px;
}

.filter-row .search-input {
  margin-top: 0;
}

.planning-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.planning-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(190px, 0.7fr);
  gap: 16px;
  align-items: start;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.planning-row p {
  margin-top: 6px;
  color: var(--muted);
  white-space: pre-wrap;
}

.planning-date,
.planning-client {
  display: grid;
  gap: 6px;
}

.planning-date strong {
  font-size: 1.45rem;
}

.planning-date span,
.planning-client span {
  color: var(--muted);
  font-size: 0.9rem;
}

.planning-client a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.planning-delete {
  margin-top: 6px;
  border-color: rgba(239, 91, 91, .55);
  background: rgba(239, 91, 91, .14);
  color: var(--red);
}
.confirmation-option { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; }
.confirmation-option input { width: auto; }
.planning-edit { margin-top: 6px; color: var(--blue); background: rgba(90,141,238,.14); }

.billing-lines {
  display: grid;
  gap: 10px;
}

.billing-presets {
  display: grid;
  gap: 10px;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-buttons button {
  flex: 1 1 125px;
  padding: 10px 8px;
  border-color: rgba(90, 141, 238, .55);
  background: rgba(90, 141, 238, .1);
}

.service-preset-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.field-group { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.field-group input { width: 100%; }
.hidden { display: none !important; }

.billing-line {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 100px 82px 110px 90px auto;
  gap: 8px;
  align-items: center;
}

.billing-line button,
.billing-card button[data-action="delete"] {
  min-height: 34px;
  background: rgba(239, 91, 91, 0.16);
  color: var(--red);
}

.billing-total {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 1.1rem;
  font-weight: 900;
  text-align: right;
}

.billing-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.billing-history {
  align-self: start;
}

.billing-history.collapsed .billing-history-body {
  display: none;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-actions button {
  min-height: 34px;
}

.billing-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.8fr) auto;
  gap: 16px;
  align-items: center;
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.billing-card.selected {
  outline: 2px solid var(--accent);
}

.mail-row {
  margin: 16px 0;
}

.document-preview {
  overflow: auto;
  display: grid;
  justify-items: center;
  padding: 16px;
  border-radius: 8px;
  background: #0b0d11;
}

.invoice-paper {
  width: 794px;
  min-height: 1123px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  background: #fff;
  color: #000;
  padding: 110px 70px 48px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.legacy-invoice-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.invoice-logo {
  width: 244px;
  height: 164px;
  object-fit: cover;
  background: #50545b;
}

.invoice-company {
  display: grid;
  gap: 3px;
  padding-top: 4px;
  text-align: center;
}

.invoice-title {
  color: #2e5fa7;
  font-size: 18px;
  font-weight: 700;
  margin: 80px 0 8px;
  text-align: center;
}

.invoice-client {
  margin-top: 26px;
}

.invoice-paper table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 56px;
}

.invoice-paper th,
.invoice-paper td {
  border: 1px solid #000;
  padding: 3px 8px;
  text-align: left;
  vertical-align: top;
}

.invoice-paper th {
  background: #fff;
  color: #000;
  font-weight: 700;
}

.invoice-paper td {
  background: #bfbfbf;
  color: #000;
  font-weight: 700;
}

.invoice-totals {
  display: grid;
  justify-content: start;
  gap: 4px;
  margin-top: 40px;
  text-align: left;
}

.invoice-payment {
  margin-top: 58px;
}

.quote-preview-conditions { margin-top: 28px; border: 1px solid #777; padding: 14px; line-height: 1.5; }
.quote-preview-approval { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.quote-preview-approval span { min-height: 90px; border: 1px solid #777; padding: 12px; }

.invoice-thanks {
  margin-top: 26px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.service-name {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
}

.badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.ok {
  background: rgba(73, 194, 125, 0.16);
  color: var(--green);
}

.badge.ko {
  background: rgba(239, 91, 91, 0.16);
  color: var(--red);
}

.badge.warn {
  background: rgba(243, 163, 60, 0.16);
  color: var(--orange);
}

@media (max-width: 900px) {
  .mailbox-layout { grid-template-columns: 1fr; }
  .mailbox-list { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
  .email-center-layout { grid-template-columns: 1fr; }
  .cockpit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-grid, .cockpit-grid.lower { grid-template-columns: 1fr; }
  .business-pipeline { grid-template-columns: repeat(6, minmax(155px, 1fr)); }
  .request-review-body { grid-template-columns: 1fr; gap: 15px; }
  .ops-grid { grid-template-columns: 1fr; }
  .infra-grid { grid-template-columns: 1fr; }
  .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-main-grid { grid-template-columns: 1fr; }
  .activity-columns { grid-template-columns: 1fr; gap: 18px; }
  .resource-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-details { grid-template-columns: 1fr; }
  .expense-layout { grid-template-columns: 1fr; }
  .accounting-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-grid { grid-template-columns: 1fr; }
  .overview,
  .resources,
  .service-grid,
  .admin-grid,
  .detail-grid,
  .planning-layout,
  .billing-layout {
    grid-template-columns: 1fr;
  }

  .disk-item,
  .planning-row,
  .billing-card,
  .billing-line {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mailbox-reader > header { display: grid; }
  .direct-recipient-fields { grid-template-columns: 1fr; }
  .email-actions { display: grid; }.email-actions .primary-action { margin-left: 0; }
  .email-history article { grid-template-columns: 34px 1fr; }.email-history time { grid-column: 2; }
  .outage-card-head { display: grid; }
  .outage-badges { justify-content: flex-start; }
  .outage-card-content { grid-template-columns: 1fr; }
  .outage-card .record-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .outage-card .record-actions button[data-record] { grid-column: 1 / -1; margin-left: 0; }
  .cockpit-summary { grid-template-columns: 1fr; }
  .cockpit-summary > a { min-height: 76px; }
  .quick-action-grid { grid-template-columns: 1fr; }
  .today-action { grid-template-columns: 34px minmax(0, 1fr) 12px; }
  .today-action .action-meta { display: none; }
  .cockpit-header .nav-actions { width: 100%; }
  .command-search-trigger { flex: 1; }
  .request-kpis { grid-template-columns: 1fr; }
  .history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-kpis { grid-template-columns: 1fr; }
  .home-kpis, .resource-cards { grid-template-columns: 1fr; }
  .home-header { align-items: flex-start; }
  .stats-kpis { grid-template-columns: 1fr; }
  .accounting-kpis { grid-template-columns: 1fr; }
  .service-preset-row { grid-template-columns: 1fr; }
  .shell {
    width: min(100% - 20px, 1180px);
    padding: 18px 0;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-actions,
  .client-actions,
  .filter-row,
  .inline-fields,
  .month-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .client-form,
  .client-card,
  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-weekdays {
    display: none;
  }

  .panel,
  .metric-card,
  .summary-panel {
    padding: 16px;
  }
}

/* Expérience application iPhone / iPad */
.mobile-tabbar { display: none; }

@media (max-width: 760px) {
  html { background: var(--bg); }
  body {
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  body > .shell,
  body.sidebar-collapsed > .shell {
    width: min(100% - 24px, 1180px);
    padding-top: 70px;
    padding-bottom: 18px;
  }
  .sidebar-toggle,
  .sidebar-collapsed .sidebar-toggle {
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    border-color: rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(36,42,53,.78);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .app-sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    border-right-color: rgba(255,255,255,.12);
    background: rgba(20,24,32,.96);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
  }
  .panel, .metric-card, .summary-panel, .home-kpi {
    border-color: rgba(255,255,255,.1);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
  }
  button, input, select, textarea, .nav-actions a { min-height: 44px; }
  button, a { touch-action: manipulation; }
  input, select, textarea { font-size: 16px; }
  .mobile-tabbar {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 7px 6px env(safe-area-inset-bottom);
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(20,24,32,.86);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }
  .mobile-tabbar a {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    border-radius: 10px;
    color: var(--muted);
    text-decoration: none;
  }
  .mobile-tabbar a > span { font-size: 1.25rem; line-height: 1; }
  .mobile-tabbar small { font-size: .63rem; font-weight: 750; }
  .mobile-tabbar a.active { color: #79d2c0; }
}

@media (display-mode: standalone) and (max-width: 760px) {
  .sidebar-toggle, .sidebar-collapsed .sidebar-toggle { top: calc(8px + env(safe-area-inset-top)); }
  body > .shell, body.sidebar-collapsed > .shell { padding-top: 62px; }
}

.auth-page { display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 10%, #243448 0, var(--bg) 48%); }
.auth-card { display: grid; gap: 22px; width: min(100%, 430px); padding: 32px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(27,32,41,.9); box-shadow: 0 28px 80px rgba(0,0,0,.42); text-align: center; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.auth-card > img { margin: 0 auto; border-radius: 22px; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.auth-card h1 { margin-top: 7px; font-size: 2.15rem; }
.auth-intro, .auth-message { margin-top: 9px; color: var(--muted); }
.auth-message { min-height: 1.4em; font-size: .88rem; }
.auth-message.error { color: #ff8585; }
.auth-card button { width: 100%; min-height: 50px; border-radius: 13px; }
.auth-primary { background: var(--accent); color: #fff; }
.auth-card details { border-top: 1px solid var(--line); padding-top: 18px; text-align: left; }
.auth-card summary { color: var(--muted); cursor: pointer; font-size: .84rem; text-align: center; }
.auth-card form { display: grid; gap: 14px; margin-top: 18px; }
.auth-card label { display: grid; gap: 7px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.auth-card input { width: 100%; min-height: 48px; font-size: 16px; }
.security-panel { margin-bottom: 16px; }
.security-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.security-kpis .metric-card { min-width: 0; }
.security-kpis strong { font-size: clamp(1.25rem,2vw,1.8rem); }
.security-good { color: var(--green); }.security-warn { color: var(--orange); }
.security-overview { margin-bottom: 16px; }
.security-incidents { margin-bottom: 16px; }
.incident-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.incident-summary > div { display: grid; gap: 7px; padding: 14px; border-radius: 9px; background: var(--panel-soft); }
.incident-summary span,.incident-timeline small,.security-incidents > small { color: var(--muted); font-size: .8rem; }
.incident-summary strong { font-size: 1.45rem; }
.incident-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.incident-toolbar select { min-width: 210px; }
.incident-timeline { display: grid; gap: 8px; max-height: 520px; margin: 14px 0; overflow-y: auto; }
.incident-event { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.incident-marker { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(79,159,143,.17); color: #79d2c0; font-weight: 900; }
.incident-event.warn .incident-marker { background: rgba(243,163,60,.14); color: var(--orange); }
.incident-event.critical .incident-marker { background: rgba(239,91,91,.14); color: var(--red); }
.incident-event > div { display: grid; gap: 5px; min-width: 0; }
.incident-event > div > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.security-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.security-facts > div { display: grid; gap: 6px; padding: 14px; border-radius: 9px; background: var(--panel-soft); }
.security-facts span,.certificate-list small { color: var(--muted); font-size: .8rem; }
.certificate-list { display: grid; gap: 10px; margin-top: 16px; }
.certificate-list article { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; }
.certificate-list article > div { display: grid; gap: 4px; }
.security-list { display: grid; gap: 10px; margin-top: 20px; }
.security-device { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px; border-radius: 12px; background: var(--panel-soft); }
.security-device-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(79,159,143,.17); color: #79d2c0; font-size: 1.25rem; }
.security-device > div:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.security-device small { color: var(--muted); }
.security-device-actions { display: flex; gap: 8px; }
.danger-button { border: 1px solid rgba(239,91,91,.35); background: rgba(239,91,91,.1); color: #ff7777; }
.security-sessions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.security-sessions > div { display: grid; gap: 7px; }
.security-sessions p:last-child { color: var(--muted); }
.website-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 16px; }
.website-control > div:first-child { display: grid; gap: 7px; }
.website-control > div:first-child p:not(.label), .website-control small { color: var(--muted); }
.website-control-actions { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; min-width: 340px; }
.website-control-actions .status-pill { grid-column: 1 / -1; justify-content: center; }
.website-control .auth-message { grid-column: 1 / -1; }
@media (max-width: 650px) {
  .security-kpis,.security-facts,.incident-summary { grid-template-columns: 1fr; }
  .incident-toolbar { align-items: stretch; flex-direction: column; }
  .incident-toolbar select { width: 100%; min-width: 0; }
  .security-device { grid-template-columns: 42px minmax(0,1fr); }
  .security-device-actions { grid-column: 1 / -1; }
  .security-device-actions button { flex: 1; }
  .security-sessions { align-items: stretch; flex-direction: column; }
  .website-control { grid-template-columns: 1fr; }
  .website-control-actions { min-width: 0; }
}
@media (min-width: 651px) and (max-width: 1050px) { .security-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.notification-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.notification-state { display: flex; align-items: center; gap: 16px; }
.notification-state > div { display: grid; gap: 5px; }
.notification-state p:last-child { color: var(--muted); }
.notification-bell { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(79,159,143,.17); color: #79d2c0; font-size: 1.4rem; }
.notification-settings > label { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; border-bottom: 1px solid var(--line); }
.notification-settings > label > span { display: grid; gap: 5px; }
.notification-settings small { color: var(--muted); }
.notification-settings input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); }
.notification-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (max-width: 650px) { .notification-card { align-items: stretch; flex-direction: column; } .notification-actions { flex-direction: column; } }
.notification-history { margin-top: 16px; }
.notification-history-actions { display: flex; gap: 9px; }
.notification-history-list { display: grid; gap: 10px; margin-top: 20px; }
.notification-history-item { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid transparent; border-radius: 12px; background: var(--panel-soft); }
.notification-history-item.unread { border-color: rgba(79,159,143,.35); background: rgba(79,159,143,.09); }
.notification-history-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.notification-history-item.unread .notification-history-dot { background: #79d2c0; box-shadow: 0 0 0 4px rgba(121,210,192,.12); }
.notification-history-item > div:nth-child(2) { display: grid; gap: 5px; min-width: 0; }
.notification-history-item p { color: var(--muted); }
.notification-history-meta { display: flex; gap: 10px; color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.notification-history-meta time { margin-left: auto; }
.notification-item-actions { display: flex; gap: 7px; }
.notification-item-actions button { min-height: 38px; padding-inline: 11px; }
@media (max-width: 720px) { .notification-history .panel-head { align-items: stretch; flex-direction: column; } .notification-history-actions { width: 100%; } .notification-history-actions > * { flex: 1; } .notification-history-item { grid-template-columns: 10px minmax(0,1fr); } .notification-item-actions { grid-column: 1 / -1; } .notification-item-actions button { flex: 1; } }
.external-backup-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin-bottom: 16px; }
.backup-assurance { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; margin-bottom: 16px; }
.backup-assurance > div:nth-child(2) { display: grid; gap: 5px; }.backup-assurance > div:nth-child(2) p:last-child { color: var(--muted); }
.backup-shield { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(69,201,139,.12); color: #45c98b; font-size: 1.6rem; font-weight: 900; }.backup-shield.warn { background: rgba(245,158,11,.12); color: #f59e0b; }.backup-shield.ko { background: rgba(248,113,113,.12); color: #f87171; }
.backup-assurance-score { display: grid; text-align: right; }.backup-assurance-score strong { font-size: 1.8rem; }.backup-assurance-score span { color: var(--muted); font-size: .75rem; }
.backup-actions-panel { margin-bottom: 16px; }.backup-action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.backup-action-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }.backup-action-card > div { display: grid; gap: 5px; }.backup-action-card p { color: var(--muted); font-size: .82rem; line-height: 1.45; }.backup-action-card button { grid-column: 1/-1; width: 100%; }.backup-action-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(79,159,143,.15); color: #79d2c0; font-size: 1.1rem; font-weight: 900; }
.backup-live-message { min-height: 20px; margin: 12px 2px 0; color: var(--muted); }.backup-live-message.active { color: #79d2c0; }.backup-live-message.error { color: #f87171; }
.external-backup-kpis .metric-card { display: grid; gap: 8px; min-height: 132px; }
.external-backup-kpis .metric-card > span,.external-backup-kpis small { color: var(--muted); }
.external-backup-kpis .metric-card > strong { font-size: 1.35rem; }
.external-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.external-actions > div:first-child { display: grid; gap: 7px; }
.external-actions p:last-child { color: var(--muted); }
.external-actions > div:last-child { display: flex; gap: 10px; }
.external-history { display: grid; gap: 10px; margin-top: 20px; }
.external-history-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px; border-radius: 10px; background: var(--panel-soft); }
.external-history-row > div { display: grid; gap: 5px; }
.external-history-row small,.external-history-row > span:last-child { color: var(--muted); }
.restore-kit { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.restore-kit > div:first-child { display: grid; gap: 7px; }
.restore-kit p { color: var(--muted); }
.restore-kit > div:last-child { display: flex; gap: 10px; }
.restore-kit a { display: inline-flex; align-items: center; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; color: var(--text); font-weight: 750; text-decoration: none; }
.restore-guide { display: grid; gap: 16px; }
.restore-guide .topbar { margin-bottom: 0; }
.restore-guide .panel { display: grid; gap: 12px; }
.restore-guide ol { display: grid; gap: 9px; margin: 4px 0 0; padding-left: 22px; color: var(--muted); }
.restore-guide pre { overflow-x: auto; margin: 4px 0; border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #0b0d11; color: #bfe8df; }
.restore-guide code { font-family: "SFMono-Regular", Consolas, monospace; }
.restore-warning { border-color: rgba(243,163,60,.4); background: rgba(243,163,60,.08); }
.restore-warning strong { color: var(--orange); }
.secondary-link,.recovery-links a { display:inline-flex;align-items:center;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:0 14px;color:var(--text);font-weight:750;text-decoration:none;background:var(--panel); }
.recovery-overview { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px; }
.recovery-score { display:grid;text-align:right; }
.recovery-score strong { font-size:2rem; }
.recovery-score span { color:var(--muted);font-size:.82rem; }
.recovery-progress { grid-column:1/-1;height:9px;overflow:hidden;border-radius:99px;background:var(--soft); }
.recovery-progress span { display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .25s ease; }
.recovery-scenarios { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.recovery-scenarios button { display:grid;gap:5px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:15px;background:var(--soft);color:var(--text);cursor:pointer; }
.recovery-scenarios button span { color:var(--muted);font-size:.8rem;line-height:1.35; }
.recovery-scenarios button.active { border-color:var(--accent);background:rgba(89,194,169,.12);box-shadow:inset 0 0 0 1px var(--accent); }
.text-button { border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:underline; }
.recovery-checklist { display:grid;gap:9px; }
.recovery-step { display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:13px;background:var(--soft);cursor:pointer; }
.recovery-step input { width:19px;height:19px;accent-color:var(--accent); }
.recovery-step-number { display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);color:var(--muted);font-weight:800;font-size:.78rem; }
.recovery-step > span:last-child { display:grid;gap:3px; }
.recovery-step small { color:var(--muted);line-height:1.4; }
.recovery-step.done { border-color:rgba(89,194,169,.45);background:rgba(89,194,169,.08); }
.recovery-step.done .recovery-step-number { background:var(--accent);color:#07110f; }
.recovery-commands p { color:var(--muted); }
.recovery-links { display:flex;gap:10px; }
.recovery-decision { display:flex;align-items:center;justify-content:space-between;gap:20px;border-color:rgba(243,163,60,.4); }
.recovery-decision.ready { border-color:rgba(89,194,169,.55);background:rgba(89,194,169,.06); }
@media (max-width:900px) { .recovery-scenarios { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .recovery-overview { grid-template-columns:1fr; }.recovery-score{text-align:left}.recovery-progress{grid-column:1}.recovery-scenarios{grid-template-columns:1fr}.recovery-decision{align-items:flex-start;flex-direction:column}.recovery-links{flex-direction:column}.secondary-link{margin-top:10px} }
.monthly-report-info,.monthly-report-footer { display:flex;align-items:center;justify-content:space-between;gap:20px; }
.monthly-report-list { display:grid;gap:16px; }
.monthly-report-card { display:grid;gap:16px; }
.monthly-report-metrics { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px; }
.monthly-report-metrics span { display:grid;gap:5px;border-radius:9px;padding:13px;background:var(--soft); }
.monthly-report-metrics small,.monthly-report-footer { color:var(--muted); }
.monthly-report-metrics strong { font-size:1.25rem;text-transform:capitalize; }
.monthly-report-footer p { margin:0; }
@media (max-width:800px) { .monthly-report-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .monthly-report-info,.monthly-report-footer { align-items:flex-start;flex-direction:column; }.monthly-report-metrics { grid-template-columns:1fr; } }
.report-score { display:grid;text-align:right; }.report-score strong{font-size:1.65rem}.report-score small{color:var(--muted)}
.report-details { border:1px solid var(--line);border-radius:10px;background:var(--soft);overflow:hidden; }
.report-details summary { padding:14px 16px;font-weight:800;cursor:pointer; }.report-details[open] summary{border-bottom:1px solid var(--line)}
.report-details table { width:100%;border-collapse:collapse; }.report-details th,.report-details td{padding:11px 16px;text-align:right;border-bottom:1px solid var(--line)}.report-details th:first-child{text-align:left}.report-details tbody tr:last-child>*{border-bottom:0}
.report-detail-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line); }.report-detail-grid p{display:grid;gap:4px;margin:0;padding:14px;background:var(--panel)}.report-detail-grid span{color:var(--muted);font-size:.8rem}
.report-event-list,.report-action-list { display:grid;gap:0;margin:0;padding:0;list-style:none; }.report-event-list li,.report-action-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line)}.report-event-list li:first-child,.report-action-list li:first-child{border-top:0}.report-event-list small,.report-action-list small{color:var(--muted)}
.report-action-list li{grid-template-columns:minmax(150px,.7fr) minmax(0,1fr) auto}.report-action-list span{color:var(--muted)}
.report-advice { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.report-advice>div{border:1px solid var(--line);border-radius:10px;padding:15px}.report-advice h3{margin:0 0 8px}.report-advice ul{margin:0;padding-left:20px;color:var(--muted)}
@media(max-width:700px){.report-detail-grid,.report-advice{grid-template-columns:1fr}.report-details{overflow-x:auto}.report-event-list li,.report-action-list li{grid-template-columns:1fr}.report-score{text-align:left}}
@media (max-width: 900px) { .external-backup-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .backup-action-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .external-backup-kpis { grid-template-columns: 1fr; } .backup-assurance { grid-template-columns: auto minmax(0,1fr); }.backup-assurance-score { grid-column: 2; text-align: left; } .external-actions,.restore-kit { align-items: stretch; flex-direction: column; } .external-actions > div:last-child,.restore-kit > div:last-child { flex-direction: column; } .external-history-row { grid-template-columns: 38px minmax(0,1fr); } .external-history-row > span:last-child { grid-column: 2; } }
@media (max-width: 1050px) { .home-system-strip { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .home-section-head { align-items: flex-start; }.home-system-strip { grid-template-columns: 1fr 1fr; }.home-system-strip > a:first-child { grid-column: 1 / -1; } }
@media (max-width: 430px) { .home-system-strip { grid-template-columns: 1fr; }.home-system-strip > a:first-child { grid-column: auto; } }