/* ===== Dashboard modern (mockup) ===== */
    .db-page { display:flex; flex-direction:column; gap:1rem; }
    .db-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:0.85rem; }
    .db-head h1 { margin:0; font-size:1.35rem; font-weight:700; display:flex; align-items:center; gap:0.55rem; }
    .db-head p { margin:0.25rem 0 0; color:var(--muted); font-size:0.9rem; }
    .db-head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem; }
    .db-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; }
    @media (max-width:1100px){ .db-stats { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:640px){ .db-stats { grid-template-columns:1fr; } }
    .db-stat {
      background:var(--surface); border:1px solid var(--border); border-radius:14px;
      padding:1rem 1.1rem; display:flex; align-items:center; gap:0.85rem;
    }
    .db-stat:hover { border-color:var(--accent); }
    .db-stat-ico {
      width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-size:1.25rem; flex-shrink:0;
    }
    .db-stat-ico.blue { background:rgba(59,130,246,.15); color:#60a5fa; }
    .db-stat-ico.green { background:rgba(16,185,129,.15); color:#34d399; }
    .db-stat-ico.purple { background:rgba(139,92,246,.15); color:#a78bfa; }
    .db-stat-ico.cyan { background:rgba(97,179,196,.18); color:var(--accent); }
    .db-stat strong { display:block; font-size:1.55rem; font-weight:700; line-height:1.15; }
    .db-stat span { font-size:0.8rem; color:var(--muted); }
    .db-mid { display:grid; grid-template-columns:1.1fr 1fr 0.9fr; gap:0.75rem; }
    @media (max-width:1100px){ .db-mid { grid-template-columns:1fr; } }
    .db-card {
      background:var(--surface); border:1px solid var(--border); border-radius:14px;
      padding:1rem 1.15rem; min-height:200px;
    }
    .db-card h3 { margin:0 0 0.85rem; font-size:0.95rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
    .db-card h3 .linkish {
      background:none; border:none; color:var(--accent); font-size:0.8rem; cursor:pointer; font-weight:500;
    }
    .db-donut-wrap { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
    .db-donut {
      width:140px; height:140px; border-radius:50%; position:relative; flex-shrink:0;
    }
    .db-donut-hole {
      position:absolute; inset:28px; border-radius:50%; background:var(--surface);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    .db-donut-hole strong { font-size:1.2rem; line-height:1.1; }
    .db-donut-hole span { font-size:0.7rem; color:var(--muted); }
    .db-legend { display:flex; flex-direction:column; gap:0.45rem; font-size:0.85rem; }
    .db-legend-row { display:flex; align-items:center; gap:0.45rem; }
    .db-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .db-dl-list { display:flex; flex-direction:column; gap:0.35rem; }
    .db-dl-item {
      display:grid; grid-template-columns:36px 1fr auto; gap:0.55rem; align-items:center;
      padding:0.45rem 0; border-bottom:1px solid rgba(127,127,127,.08);
    }
    .db-dl-item:last-child { border-bottom:none; }
    .db-dl-ico {
      width:36px; height:36px; border-radius:10px; background:rgba(97,179,196,.12);
      display:flex; align-items:center; justify-content:center; color:var(--accent);
    }
    .db-dl-item strong { display:block; font-size:0.88rem; }
    .db-dl-item span { font-size:0.75rem; color:var(--muted); }
    .db-badge {
      font-size:0.72rem; font-weight:600; padding:0.2rem 0.55rem; border-radius:999px;
      background:rgba(16,185,129,.15); color:#34d399; white-space:nowrap;
    }
    .db-badge.warn { background:rgba(245,158,11,.15); color:#fbbf24; }
    .db-badge.danger { background:rgba(239,68,68,.15); color:#f87171; }
    .db-badge.info { background:rgba(59,130,246,.15); color:#60a5fa; }
    .db-cat-list { display:flex; flex-direction:column; gap:0.65rem; }
    .db-cat-row {
      display:flex; align-items:center; justify-content:space-between; gap:0.5rem; font-size:0.88rem;
    }
    .db-cat-left { display:flex; align-items:center; gap:0.5rem; }
    .db-cat-ico {
      width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .db-table-card {
      background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;
    }
    .db-table-card .db-table-head {
      padding:0.85rem 1.1rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem;
      border-bottom:1px solid var(--border);
    }
    .db-table-card .db-table-head h3 { margin:0; font-size:0.95rem; }
    .db-table-card table { width:100%; border-collapse:collapse; font-size:0.88rem; }
    .db-table-card th {
      text-align:left; padding:0.65rem 0.85rem; color:var(--muted); font-weight:600; font-size:0.75rem;
      text-transform:uppercase; letter-spacing:0.03em; border-bottom:1px solid var(--border); background:var(--surface-2);
    }
    .db-table-card td { padding:0.7rem 0.85rem; border-bottom:1px solid rgba(127,127,127,.08); }
    .db-table-card tr:last-child td { border-bottom:none; }
    .db-table-card tbody tr:hover { background:rgba(97,179,196,.05); }
    .db-status { font-size:0.78rem; color:var(--muted); }


    /* System Health */
    .sh-wrap { display:flex; flex-direction:column; gap:1rem; }
    .sh-overall {
      display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
      padding:1.1rem 1.25rem; border-radius:14px; border:1px solid var(--border);
      background: var(--surface);
    }
    .sh-overall .sh-big { font-size:1.35rem; font-weight:800; }
    .sh-badges { display:flex; flex-wrap:wrap; gap:0.45rem; }
    .sh-badge {
      display:inline-flex; align-items:center; gap:0.3rem;
      padding:0.28rem 0.65rem; border-radius:999px; font-size:0.78rem; font-weight:600;
      border:1px solid var(--border); background:var(--surface-2);
    }
    .sh-badge.ok { border-color: rgba(46,204,113,0.45); color:#2ecc71; }
    .sh-badge.warn { border-color: rgba(243,156,18,0.5); color:var(--warning); }
    .sh-badge.crit { border-color: rgba(231,76,60,0.5); color:var(--danger); }
    .sh-badge.unk { color:var(--muted); }
    .sh-grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.85rem;
    }
    .sh-card {
      background:var(--surface); border:1px solid var(--border); border-radius:12px;
      padding:0.95rem 1rem; cursor:default;
    }
    .sh-card h3 { margin:0 0 0.55rem; font-size:0.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
    .sh-metric { font-size:1.35rem; font-weight:700; font-variant-numeric:tabular-nums; }
    .sh-sub { font-size:0.75rem; color:var(--muted); margin-top:0.25rem; }
    .sh-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
    .sh-table th, .sh-table td { padding:0.45rem 0.55rem; border-bottom:1px solid var(--border); text-align:left; }
    .sh-table th { color:var(--muted); font-weight:600; font-size:0.75rem; }
    .sh-toolbar { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-bottom:0.5rem; }
    .sh-period-control { display:flex; align-items:center; gap:0.55rem; min-width:0; }
    .sh-period-label {
      color:var(--muted); font-size:0.72rem; font-weight:650;
      letter-spacing:0.025em; white-space:nowrap;
    }
    .sh-period-dropdown { position:relative; width:min(100%,15rem); }
    .sh-period-trigger {
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
      width:100%; min-height:2.45rem; padding:0.5rem 0.8rem;
      border:1px solid var(--border); border-radius:10px;
      background:linear-gradient(180deg,var(--surface),var(--surface-2));
      color:var(--text); font:inherit; font-size:0.8rem; font-weight:600;
      text-align:left; cursor:pointer; box-shadow:0 2px 7px rgba(0,0,0,.12);
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .sh-period-trigger:hover, .sh-period-dropdown.is-open .sh-period-trigger { border-color:var(--accent); }
    .sh-period-trigger:focus-visible, .sh-period-option:focus-visible {
      outline:2px solid var(--accent); outline-offset:2px;
    }
    .sh-period-chevron {
      flex:0 0 auto; width:0.48rem; height:0.48rem; margin-top:-0.22rem;
      border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
      transform:rotate(45deg); transition:transform .15s ease;
    }
    .sh-period-dropdown.is-open .sh-period-chevron { margin-top:0.22rem; transform:rotate(225deg); }
    .sh-period-options {
      position:absolute; z-index:30; top:calc(100% + 0.35rem); left:0;
      display:flex; flex-direction:column; gap:0.15rem; width:100%; padding:0.3rem;
      border:1px solid var(--border); border-radius:10px;
      background:var(--surface); box-shadow:0 6px 16px rgba(0,0,0,.2);
    }
    .sh-period-options[hidden] { display:none; }
    .sh-period-option {
      width:100%; padding:0.55rem 0.65rem; border:0; border-radius:7px;
      background:transparent; color:var(--text); font:inherit; font-size:0.8rem;
      text-align:left; cursor:pointer;
    }
    .sh-period-option:hover, .sh-period-option.is-active { background:var(--surface-2); }
    .sh-period-option.is-active { color:var(--accent); font-weight:650; }
    .sh-chart {
      width:100%; height:120px; background:var(--surface-2); border-radius:8px;
      border:1px solid var(--border); position:relative; overflow:hidden;
    }
    .sh-chart svg { width:100%; height:100%; display:block; }
    .sh-alert {
      padding:0.65rem 0.85rem; border-radius:10px; border:1px solid var(--border);
      background:var(--surface-2); margin-bottom:0.45rem; font-size:0.85rem;
    }
    .sh-alert.crit { border-color:rgba(231,76,60,0.5); }
    .sh-alert.warn { border-color:rgba(243,156,18,0.5); }
    @media (max-width:640px) {
      .sh-toolbar { align-items:flex-start; }
      .sh-period-control { flex:1 1 calc(100% - 3rem); flex-direction:column; align-items:flex-start; gap:0.35rem; }
      .sh-period-dropdown { width:min(100%,20rem); }
    }


    /* VU Preview */
    .vu-drop {
      border: 2px dashed var(--border); border-radius: 14px; padding: 2rem 1.25rem;
      text-align: center; background: var(--surface); transition: border-color .15s, background .15s;
    }
    .vu-drop.drag { border-color: var(--accent); background: var(--surface-2); }
    .vu-drop input[type=file] { display:none; }
    .vu-badge {
      display:inline-block; padding:0.2rem 0.55rem; border-radius:999px; font-size:0.75rem; font-weight:600;
      border:1px solid var(--border);
    }
    .vu-badge.vu { color:#2ecc71; border-color:rgba(46,204,113,.4); }
    .vu-badge.card { color:#f39c12; border-color:rgba(243,156,18,.4); }

    .vu-acc { border:1px solid var(--border); border-radius:12px; margin-bottom:0.65rem; overflow:hidden; background:var(--surface); }
    .vu-acc > summary {
      cursor:pointer; list-style:none; padding:0.75rem 1rem; font-weight:650; font-size:0.92rem;
      display:flex; align-items:center; gap:0.5rem; user-select:none;
    }
    .vu-acc > summary::-webkit-details-marker { display:none; }
    .vu-acc > summary::before { content:"▸"; color:var(--muted); width:1rem; display:inline-block; }
    .vu-acc[open] > summary::before { content:"▾"; }
    .vu-acc .vu-acc-body { padding:0 0.75rem 0.85rem; }
    .vu-acc .sh-sub { margin:0 0 0.5rem; }

    .section-header { flex-wrap: wrap; gap: 0.5rem; }
    .section-header .section-title { flex: 1 1 auto; min-width: 0; }
    .table-wrap { overflow-x: auto; max-width: 100%; }
    .sh-table { table-layout: auto; }
    #page-content { max-width: 100%; width: 100%; overflow-x: hidden; box-sizing: border-box; }
    #page-content .section { max-width: 100%; }

    .audit-dl-menu {
      display: none;
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      z-index: 50;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.75rem;
      box-shadow: 0 12px 32px rgba(0,0,0,.3);
      min-width: 200px;
    }
    .audit-dl-menu.open {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      align-items: stretch;
    }
    .audit-dl-cube {
      width: 100%;
      min-width: 64px;
      height: 28px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      font-weight: 600;
      font-size: 0.65rem;
      font-family: inherit;
      transition: background 0.12s, transform 0.08s;
      padding: 0 0.5rem;
    }
    .audit-dl-cube:hover { transform: translateY(-1px); }
    .audit-dl-cube:active { transform: scale(0.98); }
    .audit-dl-cube.pdf {
      background: rgba(231, 76, 60, 0.15);
      color: var(--danger, #e74c3c);
    }
    .audit-dl-cube.pdf:hover { background: rgba(231, 76, 60, 0.25); }
    .audit-dl-cube.xlsx {
      background: rgba(46, 204, 113, 0.15);
      color: var(--success, #2ecc71);
    }
    .audit-dl-cube.xlsx:hover { background: rgba(46, 204, 113, 0.25); }
    .audit-dl-cube span.icon { font-size: 0.75rem; line-height: 1; }
    .audit-dl-menu {
      min-width: 70px;
      max-width: 78px;
      padding: 0.28rem;
      gap: 0.22rem;
    }
    .audit-dl-icon-btn {
      width: 28px; height: 28px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--border); background: var(--surface-2);
      cursor: pointer; color: var(--text); padding: 0;
      transition: background 0.12s, border-color 0.12s;
    }
    .audit-dl-icon-btn:hover { border-color: var(--accent); background: var(--surface); }
    .audit-dl-icon-btn svg { width: 14px; height: 14px; }
    .audit-page { border-radius:12px; }
    .audit-page > .section-header { background:var(--surface); }
    .audit-content { padding:0.85rem 1.1rem; }
    .audit-filters { width:100%; margin-bottom:0.7rem; }
    .audit-filter-row { width:100%; flex-wrap:wrap; overflow:visible; }
    .audit-search-wrap { display:flex; flex:0 0 160px; flex-direction:row; align-items:center; gap:0; min-width:150px; max-width:160px; }
    .audit-search-wrap .vu-search-input { height:34px; box-sizing:border-box; font-family:inherit; }
    .audit-date-range { min-width:0; }
    .audit-date-range input[type="date"] { width:148px; min-width:148px; height:34px; }
    .audit-date-range .tacho-dp-wrap { width:148px; min-width:148px; }
    .audit-date-range .tacho-dp-wrap input.tacho-date-input { width:148px !important; min-width:148px !important; max-width:148px !important; height:34px; font-size:0.82rem; }
    .audit-tabs { display:flex; gap:0.35rem; flex-wrap:wrap; margin-bottom:0.65rem; padding-bottom:0.65rem; border-bottom:1px solid var(--border); }
    .audit-event-list { display:flex; flex-direction:column; gap:0.5rem; }
    .audit-event-card {
      min-width:0;
      padding:0.7rem 0.85rem;
      border:1px solid rgba(255,255,255,0.06);
      border-left:3px solid rgba(97,179,196,0.5);
      border-radius:10px;
      background:rgba(0,0,0,0.18);
    }
    .audit-event-card.audit-event-file { border-left-color:#60a5fa; }
    .audit-event-card.audit-event-system { border-left-color:#f5b041; }
    .audit-event-head { display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem 0.75rem; margin-bottom:0.35rem; }
    .audit-event-time { color:var(--muted); font-size:0.72rem; white-space:nowrap; }
    .audit-event-identity { display:flex; flex-direction:column; align-items:flex-end; gap:0.08rem; min-width:0; margin-left:auto; text-align:right; }
    .audit-event-resource-label { color:var(--muted); font-size:0.62rem; font-weight:700; text-transform:uppercase; }
    .audit-event-resource-name { color:var(--text); font-size:0.74rem; font-weight:600; overflow-wrap:anywhere; }
    .audit-event-user { color:var(--muted); font-size:0.7rem; overflow-wrap:anywhere; }
    .audit-event-main { display:grid; grid-template-columns:minmax(130px,0.8fr) minmax(180px,1.2fr); gap:0.45rem 0.85rem; min-width:0; }
    .audit-event-field { display:flex; flex-direction:column; gap:0.12rem; min-width:0; }
    .audit-event-field-label { color:var(--muted); font-size:0.62rem; font-weight:700; text-transform:uppercase; }
    .audit-event-document { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.82rem; font-weight:600; overflow-wrap:anywhere; }
    .audit-event-action { color:var(--text); font-size:0.82rem; }
    .audit-event-title { font-size:0.86rem; font-weight:600; }
    .audit-event-summary { display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem 0.6rem; margin-top:0.4rem; color:var(--muted); font-size:0.76rem; line-height:1.4; overflow-wrap:anywhere; }
    .audit-mode-badge { display:inline-flex; align-items:center; padding:0.15rem 0.5rem; border:1px solid rgba(97,179,196,0.35); border-radius:999px; background:rgba(97,179,196,0.12); color:var(--text); font-size:0.68rem; font-weight:650; white-space:nowrap; }
    .audit-mode-badge.is-group { border-color:rgba(245,176,65,0.35); background:rgba(245,176,65,0.12); }
    .audit-event-period { font-size:0.74rem; }
    .audit-empty { padding:2rem 1rem; border:1px dashed var(--border); border-radius:10px; color:var(--muted); text-align:center; }
    @media (max-width:640px) {
      .audit-content { padding:0.7rem; }
      .audit-event-identity { align-items:flex-start; margin-left:0; text-align:left; }
      .audit-event-main { grid-template-columns:1fr; }
      .audit-search-wrap { flex:1 1 100%; max-width:none; }
      .audit-date-range { flex:1 1 100%; }
      .audit-date-range input[type="date"] { flex:1; width:auto; min-width:0; }
      .audit-date-range .tacho-dp-wrap { flex:1 1 0; width:auto; min-width:0; }
      .audit-date-range .tacho-date-input { width:100%; min-width:0; max-width:none; }
    }