:root {
      --primary: #2563eb;
      --secondary: #3b82f6;
      --success: #10b981;
      --warning: #f59e42;
      --danger-bg: #db1919;
      --danger-text: #fff;
      --muted: #6b7280;
      --header-highlight: #e0eafc;
      --gray: #c2c7cf;
      --table-header: #233;
      --very-muted: #aaa;
      --border: #d1d5db;
      --bg: #f4f7fb;
      --contact-2: #fffbe0;
      --contact-5: #ffe394;
      --contact-10: #f3a35c;
      --contact-15: #d4462e;
      --contact-text: #ab2222;
    }
    body { font-family: 'Roboto', Arial, sans-serif; background: var(--bg); margin:0; min-height: 100vh; color: #223; font-size: 16px; }
    .container { max-width: 1200px; margin: auto; padding: 1.6rem 1.1rem; }
    h1, h2, h3 { color: var(--primary); }
    .statusbar { border-radius: 6px; background: #f2f6fa; color: #1d3557; font-size: 1.08em; margin: 0.8em 0 .2em 0; padding: .4em .7em; font-weight: 700; display:inline-block; letter-spacing:.3px; }
    .filterbar, .toolbar, .colconfig { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; margin: .8em 0 .8em 0; }
    .filterbar label { font-weight: 600;color: var(--muted);}
    .toolbar button, .filterbar button, .colconfig button, .fields-helper-btn, .relat-btn { font: inherit; background: var(--primary); color: #fff; padding: .5em 1em; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 8px #a5a9b81f; font-weight: 700; transition: background .15s, color .12s;}
    .relat-btn {background: #ffe15c; color: #174090; font-weight: bold; border: 1.5px solid #c8aa2f; box-shadow: 0 2px 8px #dfc41f1c; margin-right:.9em; font-size:1.03em; padding:.52em 1.2em;}
    .relat-btn:hover {background: #f8c94c;}
    .toolbar button:hover, .filterbar button:hover, .colconfig button:hover, .fields-helper-btn:hover { background: var(--secondary); color: var(--danger-bg);}
    .toolbar > * { margin-right: .7em; }
    .toolbar input[type="checkbox"] {margin: 0 1.15em 0 .6em;}
    .statusbar span { margin-right:2em;}
    table { width: 100%; border-collapse: collapse; font-size: 1em; background: #fff; margin-top: .8em; margin-bottom:.4em; }
    th, td { padding: .49em .4em; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; max-width:340px; word-break:break-word; }
    th { background: var(--table-header); color: #fff; position: sticky; top: 0; z-index: 20; cursor: pointer; user-select: none; white-space: nowrap;}
    th.sortable::after { content: ''; margin-left: 0.5em; font-size: .9em; vertical-align: middle;}
    th.sorted-asc::after    { content: ' ▲'; }
    th.sorted-desc::after   { content: ' ▼'; }
    tr.selected-row { background: #ffe15c !important; }
    tr.contact-2 { background: var(--contact-2) !important; }
    tr.contact-5 { background: var(--contact-5) !important; }
    tr.contact-10 { background: var(--contact-10) !important; color: #fff; }
    tr.contact-15 { background: var(--contact-15) !important; color: #fff !important; }
    tr:hover:not(.selected-row) { background: var(--row-hov) !important;}
    .sub-table { border: none; background: none; font-size: .93em; width:100%;}
    .alarm { background: var(--danger-bg) !important; color: var(--danger-text) !important; font-weight: bold; border-radius: 2.5px; border: 2px solid #fff; text-shadow: 0 1px 1px #980000, 0 0 2px #fff; box-shadow: 0 0 0 2px #fff, 0 0 2px 2px #db1919; padding: .13em .34em; transition: box-shadow .12s,border .12s; animation: blinky 1.1s infinite alternate; }
    @keyframes blinky { from { box-shadow: 0 0 0 2px #fff,0 0 7px 7px #db1919 } to   { box-shadow: 0 0 0 2px #fff,0 0 1px 1px #db1919; } }
    .warn { background: var(--warning) !important; color: #fff !important; font-weight: 600 !important; border-radius: 2.5px; text-shadow: 0px 1px 2px #0003,0 0 1px #fff;}
    .colconfig { gap: .6em; flex-wrap: wrap; margin-bottom: 0.2em;}
    .colconfig label { font-size: 0.96em; font-weight: 500; background: #e6e9ef; padding: .21em .8em; border-radius: 7px; margin: 0 0.2em 0 0; cursor: pointer; color: #3d4962; }
    .colconfig input[type="checkbox"] {accent-color: var(--primary);}
    #cmdhist { background: #1a2138; color: #ffeb90; min-height: 80px; font-family: "Fira Mono", monospace; font-size: 1em; border-radius: 8px; padding: 1.1em; margin-bottom: 1em; white-space: pre-wrap; box-shadow: 0 2px 12px rgba(24,28,42,0.09);}
    .fieldfilter-input {font-size:1em;padding:.4em .6em;border:1px solid var(--border);border-radius:4px;min-width:32px;width:140px;}
    .fieldfilter-field {width:180px;}
    .fieldfilter-btn, .fields-helper-btn {padding:.44em .8em;font-size:.96em;}
    .fields-helper-tip { display: none; position: absolute; left: 0; top: 102%; background: #fefefe; border: 1px solid var(--gray); padding: .65em 1.3em .7em .8em; z-index: 300; border-radius: 5px; min-width: 225px; max-height: 250px; overflow: auto; color: #1c1c26; box-shadow: 0 3px 20px #0002; font-size: .99em;}
    .fields-helper-tip ul {margin:.15em 0 0 0;padding:.18em 0 0 1.1em;}
    .fields-helper-tip li {margin:.07em 0;}
    .fields-helper-tip strong {color: var(--primary);}
    .autocomplete-list {
      position: absolute;
      background: #fff;
      border: 1.5px solid var(--gray);
      border-radius: 5px;
      box-shadow: 0 3px 10px #0002;
      left:0; top:100%;
      min-width: 210px;
      max-width: 360px;
      max-height: 205px;
      overflow-y: auto;
      z-index: 998;
      font-size: .98em;
      margin-top: 0;
    }
    .autocomplete-item {
      padding: .33em .7em;
      color: #2a3552;
      cursor: pointer;
      border-bottom: 1px solid #f4f4f4;
      transition: background .11s;
    }
    .autocomplete-item:hover, .autocomplete-item.selected {
      background: var(--header-highlight);
      color: var(--primary);
    }
    .relatorio-modal, .modal-hist {
      display: none;
      background: #fff;
      position: fixed;
      z-index: 3001;
      left: 50%; top: 6vw;
      transform: translateX(-50%);
      border: 1.7px solid #aaaabb;
      padding:1.6em 2em .6em 2em;
      border-radius: 14px;
      box-shadow: 0 5px 32px #2232b329;
      min-width: 320px; min-height: 80px;
      max-width: 95vw; max-height: 94vh; overflow: auto;
    }
    .modal-hist {padding:.7em 1.8em 1em 1.2em;}
    .relatorio-modal h3, .modal-hist h3 {margin-bottom:.22em;}
    .hist-svg {background: #f6f6fa;width:93vw;max-width:640px;}
    .closebtn-report { float:right;margin-top:-1.5em;font-size:1.28em;cursor:pointer;color:#d7263d;font-weight:900;background:none;border:none}
    .hist-label-y {font-size:.85em;fill:#322; opacity:.77;}
    .hist-label-x {font-size:.9em;fill:#263252;}
    .hist-bar-label  {font-size:.7em;fill:#555;}
    @media (max-width:1024px) {.relatorio-modal, .modal-hist {left:2vw; transform:none;max-width:97vw}}
    @media (max-width:1050px) {table, .toolbar, .filterbar, .colconfig { font-size: .98em;} .container {font-size: 15.2px;}}
    @media (max-width: 700px) { .container{padding:.33em;} table, th, td { font-size: .93em;} th, td { padding: .32em .13em;} .toolbar, .filterbar, .colconfig { flex-direction: column; align-items:flex-start; gap:.37em;} }
    @media (max-width: 500px) { .colconfig { font-size:.92em;} th, td {padding:.14em .09em;} .statusbar {font-size: 1em;} h1 {font-size: 1.09em;} }
    .hidden { display: none !important;}
    .table-actions {margin-bottom:.35em;}
    .table-actions button {font: inherit; padding:.25em .8em; font-size:.97em; margin-right:1em;}
.sub-table td {
  background: none;
  color: #222;
  border: none;
  padding: 0.1em 0.32em;
}