:root{
      --bg:#0b1220;
      --panel:#0f1a2f;
      --panel2:#0c162a;
      --text:#e6edf6;
      --muted:#9bb0cc;
      --line:rgba(255,255,255,.08);
      --accent:#5dd6ff;
      --accent2:#8a7dff;
      --ok:#3bd671;
      --warn:#ffcc66;
      --danger:#ff5d7a;
      --shadow: 0 18px 50px rgba(0,0,0,.45);
      --radius: 18px;
      --radius2: 12px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--font);
      background:
        radial-gradient(1200px 800px at 15% 10%, rgba(93,214,255,.14), transparent 55%),
        radial-gradient(900px 700px at 85% 25%, rgba(138,125,255,.18), transparent 55%),
        radial-gradient(900px 700px at 55% 90%, rgba(59,214,113,.10), transparent 55%),
        var(--bg);
      color:var(--text);
      min-height:100vh;
    }

    .app{display:flex; min-height:100vh;}

    /* Sidebar */
    .sidebar{
      width:290px;
      padding:22px 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-right:1px solid var(--line);
      position:sticky;
      top:0;
      height:100vh;
      backdrop-filter: blur(12px);
    }
    .brand{
      display:flex;
      gap:12px;
      align-items:center;
      padding:14px 14px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      box-shadow: var(--shadow);
    }
    .logo{
      width:42px;height:42px;border-radius:14px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 14px 40px rgba(93,214,255,.16);
      position:relative;
    }
    .logo:after{
      content:"";
      position:absolute; inset:10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.35);
    }
    .brand h1{
      font-size:14px;
      margin:0;
      letter-spacing:.6px;
      text-transform:uppercase;
    }
    .brand p{
      margin:2px 0 0 0;
      color:var(--muted);
      font-size:12px;
    }

    .nav{
      margin-top:18px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .nav button{
      width:100%;
      text-align:left;
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
      color:var(--text);
      padding:12px 12px;
      border-radius:14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:10px;
      transition: transform .08s ease, background .2s ease, border-color .2s ease;
    }
    .nav button:hover{ background:rgba(255,255,255,.06); }
    .nav button:active{ transform: translateY(1px); }
    .nav button.active{
      background: linear-gradient(135deg, rgba(93,214,255,.16), rgba(138,125,255,.14));
      border-color: rgba(93,214,255,.35);
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
    }
    .pill{
      margin-top:16px;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
    }
    .pill b{ color:var(--text); }
    .pill code{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      padding: 1px 6px;
      border-radius: 10px;
      color: rgba(230,237,246,.95);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 11px;
    }

    /* Main */
    .main{ flex:1; padding:26px 26px 40px; }
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .title{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .title h2{
      margin:0;
      font-size:20px;
      letter-spacing:.2px;
    }
    .title span{
      color:var(--muted);
      font-size:12px;
    }

    .card{
      background: rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      padding:18px;
    }

    .hidden{display:none !important}

    /* Upload area */
    .dropzone{
      margin-top:14px;
      border-radius: var(--radius);
      border: 1px dashed rgba(255,255,255,.22);
      background: rgba(255,255,255,.02);
      padding: 28px 18px;
      text-align:center;
    }
    .dropzone.drag{
      border-color: rgba(93,214,255,.55);
      background: rgba(93,214,255,.07);
    }
    .dropzone h3{ margin:0 0 6px 0; font-size:16px; }
    .dropzone p{ margin:0; color:var(--muted); font-size:13px; }

    .actions{
      display:flex;
      gap:10px;
      justify-content:center;
      margin-top:14px;
      flex-wrap:wrap;
    }
    .btn{
      border-radius: 14px;
      padding: 11px 14px;
      border: 1px solid var(--line);
      cursor:pointer;
      font-weight:600;
      color:var(--text);
      background: rgba(255,255,255,.04);
      transition: transform .08s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
    }
    .btn:hover{ background: rgba(255,255,255,.07); }
    .btn:active{ transform: translateY(1px); }
    .btn.primary{
      border-color: rgba(93,214,255,.35);
      background: linear-gradient(135deg, rgba(93,214,255,.18), rgba(138,125,255,.14));
    }
    .btn.danger{
      border-color: rgba(255,93,122,.35);
      background: rgba(255,93,122,.08);
    }
    .btn:disabled{ opacity:.45; cursor:not-allowed; }

    .status{
      margin-top:14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      color:var(--muted);
      font-size:12px;
    }
    .chip{
      padding:8px 10px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
    }

    /* Table */
    .table-wrap{
      overflow:auto;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
    }
    table.dataTable{
      width:100% !important;
      border-collapse: collapse !important;
      background: transparent !important;
      color: var(--text);
    }

    /* DataTables tweaks */
    .dataTables_wrapper{ padding: 14px; }
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select{
      background: rgba(255,255,255,.04) !important;
      border: 1px solid var(--line) !important;
      color: var(--text) !important;
      border-radius: 12px !important;
      padding: 8px 10px !important;
      outline: none !important;
    }
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label{
      color: var(--muted) !important;
      font-size: 12px !important;
      font-weight: 600;
    }
    table.dataTable thead th{
      background: rgba(255,255,255,.03) !important;
      border-bottom: 1px solid var(--line) !important;
      color: var(--text) !important;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .6px;
      white-space:nowrap;
    }
    table.dataTable tbody td{
      border-top: 1px solid rgba(255,255,255,.06) !important;
      color: rgba(230,237,246,.92) !important;
      font-size: 13px;
      white-space: nowrap;
      vertical-align: middle;
    }
    .filters-row th{ padding: 10px 8px !important; }
    .col-filter{
      width:100%;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 8px;
      color: var(--text);
      outline:none;
      font-size:12px;
    }
    .col-filter:disabled{ opacity:.45; cursor:not-allowed; }

    .sectionTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:16px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .sectionTitle .left{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .sectionTitle .left h3{
      margin:0;
      font-size:14px;
      letter-spacing:.3px;
    }
    .sectionTitle .left span{
      margin:0;
      font-size:12px;
      color:var(--muted);
    }

    .toast{
      position: fixed;
      right: 18px;
      bottom: 18px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(10,18,32,.85);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
      display:flex;
      align-items:center;
      gap:10px;
      color: var(--text);
      transform: translateY(20px);
      opacity:0;
      pointer-events:none;
      transition: .25s ease;
      max-width: 520px;
      z-index: 9999;
    }
    .toast.show{ transform: translateY(0); opacity:1; }
    .dot{
      width:10px;height:10px;border-radius:50%;
      background: var(--ok);
      box-shadow: 0 0 0 6px rgba(59,214,113,.12);
      flex:0 0 auto;
    }

    /* List view box */
    .monoBox{
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      border-radius: var(--radius);
      padding:12px;
      overflow:auto;
      max-height:520px;
    }
    .monoBox pre{
      margin:0;
      font-size:12px;
      color:rgba(230,237,246,.9);
      white-space:pre;
    }

    /* ✅ Linha editada (verde) */
    tr.rowEdited td{
      background: rgba(59,214,113,.14) !important;
    }
    tr.rowEdited:hover td{
      background: rgba(59,214,113,.20) !important;
    }

    /* ✅ Linha marcada (para sugestões) */
    tr.rowMarked td{
      box-shadow: inset 3px 0 0 rgba(93,214,255,.65);
    }

    /* Cell editor (valor REAL dentro da mesma coluna) */
    .cellWrap{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:100%;
      min-width: 90px;
    }
    .expectedVal{
      font-weight:700;
      letter-spacing:.2px;
    }
    .realTag{
      margin-left:8px;
      padding:2px 8px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      font-size:12px;
      color: rgba(230,237,246,.92);
      background: rgba(255,255,255,.04);
    }
    .realTag.hidden{ display:none !important; }

    .cellInput{
      width: 80px;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.14);
      border-radius:10px;
      padding:6px 8px;
      color: var(--text);
      outline:none;
      font-size:12px;
      display:none; /* ✅ invisível até editar */
    }
    .cellWrap.editing .cellInput{ display:inline-block; }
    .cellWrap.editing .realTag{ display:none !important; }

    .cellEditBtn{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius:10px;
      padding:6px 10px;
      cursor:pointer;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      margin-left:auto;
    }
    .cellEditBtn:hover{ background: rgba(255,255,255,.08); }
    .cellEditBtn:disabled{ opacity:.5; cursor:not-allowed; }

    /* Checkbox de marcação */
    .markWrap{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
    }
    .rowMark{
      width:18px;
      height:18px;
      cursor:pointer;
      accent-color: var(--accent);
      transform: translateY(1px);
    }

    @media (max-width: 920px){
      .sidebar{ width: 240px; }
      .cellInput{ width: 70px; }
    }
    @media (max-width: 780px){
      .app{ flex-direction:column; }
      .sidebar{
        width:100%;
        height:auto;
        position:relative;
        border-right:none;
        border-bottom:1px solid var(--line);
      }
      .main{ padding:18px; }
    }