:root{
    --bg:#0B1220;
    --panel:#101a2c;
    --panel-2:#0d1626;
    --border:#1f2c46;
    --border-soft:#182238;
    --text:#e7ecf3;
    --text-dim:#8b98ac;
    --text-faint:#5b6883;
    --mint:#4ce0b3;
    --mint-dim:#2a7a63;
    --amber:#f2a340;
    --red:#e2596b;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0; overflow-x:hidden; width:100%;}
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(76,224,179,0.07), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(242,163,64,0.05), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--mint-dim); color:#fff;}

  /* ---------- Access gate ---------- */
  #gate{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(1000px 600px at 50% 20%, rgba(76,224,179,0.08), transparent 60%), var(--bg);
    padding:20px;
  }
  .gate-card{
    width:min(400px, 100%);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:36px 32px 30px;
    text-align:center;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .gate-cross{
    width:44px;height:44px;margin:0 auto 18px;
    position:relative;
  }
  .gate-cross::before,.gate-cross::after{
    content:"";position:absolute;background:var(--mint);border-radius:3px;
  }
  .gate-cross::before{ left:50%; top:0; width:10px; height:44px; transform:translateX(-50%); }
  .gate-cross::after{ top:50%; left:0; height:10px; width:44px; transform:translateY(-50%); }
  .gate-card h1{
    font-family:var(--font-display); font-size:19px; margin:0 0 6px; letter-spacing:0.01em;
  }
  .gate-card p{
    color:var(--text-dim); font-size:13px; margin:0 0 22px; line-height:1.5;
  }
  .gate-field{ text-align:left; margin-bottom:12px; }
  .gate-field label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); margin-bottom:6px; }
  .gate-field input, .gate-field select{
    width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--border);
    background:var(--panel-2); color:var(--text); font-family:var(--font-body); font-size:16px; outline:none;
  }
  .gate-field input:focus, .gate-field select:focus{ border-color:var(--mint); }
  .gate-btn{
    margin-top:6px; width:100%; padding:12px; border-radius:8px; border:none;
    background:var(--mint); color:#06251c; font-weight:600; font-family:var(--font-body);
    font-size:14px; cursor:pointer; transition:filter .15s;
  }
  .gate-btn:hover{ filter:brightness(1.08); }
  .gate-link{ margin-top:14px; font-size:12px; color:var(--text-faint); background:none; border:none; cursor:pointer; text-decoration:underline; }
  #gate-error{ color:var(--red); font-size:12px; margin-top:10px; min-height:14px; }
  .gate-note{
    margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft);
    font-size:11px; color:var(--text-faint); line-height:1.6; text-align:left;
  }
  .gate-loading{ color:var(--text-dim); font-size:13px; padding:20px 0; }
  .hidden{ display:none !important; }

  /* ---------- App shell ---------- */
  #app{ display:none; max-width:1180px; margin:0 auto; padding:28px 24px 60px; }

  header.topbar{
    display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
    padding-bottom:18px; flex-wrap:wrap;
  }
  .brand{ display:flex; gap:14px; align-items:center; }
  .brand-cross{ width:30px;height:30px; position:relative; flex-shrink:0; }
  .brand-cross::before,.brand-cross::after{ content:""; position:absolute; background:var(--mint); border-radius:2px; }
  .brand-cross::before{ left:50%; top:0; width:7px; height:30px; transform:translateX(-50%); }
  .brand-cross::after{ top:50%; left:0; height:7px; width:30px; transform:translateY(-50%); }
  .brand-text .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; color:var(--mint); text-transform:uppercase; }
  .brand-text h1{ font-family:var(--font-display); font-size:24px; margin:2px 0 0; font-weight:600; }

  .who{ display:flex; align-items:center; gap:10px; }
  .who .stat{ text-align:right; font-family:var(--font-mono); }
  .who .stat .num{ font-size:22px; color:var(--mint); font-weight:600; }
  .who .stat .lbl{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.12em; }
  .user-chip{
    display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-family:var(--font-mono);
  }
  .user-chip .uname{ font-size:12.5px; color:var(--text); }
  .logout-btn{
    background:none; border:1px solid var(--border); color:var(--text-faint); border-radius:7px;
    padding:5px 10px; font-size:10.5px; cursor:pointer; font-family:var(--font-body); margin-top:4px;
  }
  .logout-btn:hover{ border-color:var(--red); color:var(--red); }

  /* pulse divider */
  .pulse-wrap{ height:34px; margin:4px 0 20px; overflow:hidden; }
  .pulse-wrap svg{ width:200%; height:100%; animation:pulse-scroll 7s linear infinite; }
  @keyframes pulse-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .pulse-wrap svg{ animation:none; } }

  /* controls row */
  .controls{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  }
  .search-box{
    flex:1; min-width:220px; position:relative;
  }
  .search-box input{
    width:100%; padding:11px 14px 11px 38px; border-radius:9px; border:1px solid var(--border);
    background:var(--panel); color:var(--text); font-family:var(--font-body); font-size:13.5px; outline:none;
  }
  .search-box input:focus{ border-color:var(--mint); }
  .search-box::before{
    content:"⌕"; position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color:var(--text-faint); font-size:16px; pointer-events:none;
  }
  .btn-ghost{
    padding:10px 14px; border-radius:9px; border:1px solid var(--border); background:transparent;
    color:var(--text-dim); font-family:var(--font-body); font-size:12.5px; cursor:pointer; white-space:nowrap;
  }
  .btn-ghost:hover{ border-color:var(--text-faint); color:var(--text); }

  nav.tabs{
    display:flex; gap:4px; border-bottom:1px solid var(--border-soft); margin-bottom:22px; flex-wrap:wrap;
  }
  nav.tabs button{
    background:none; border:none; color:var(--text-faint); font-family:var(--font-body);
    font-size:13px; font-weight:500; padding:10px 4px; margin-right:22px; cursor:pointer;
    border-bottom:2px solid transparent; position:relative; top:1px;
  }
  nav.tabs button.active{ color:var(--text); border-bottom-color:var(--mint); }
  nav.tabs button .count{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); margin-left:5px; }
  nav.tabs button.admin-tab{ color:var(--amber); }
  nav.tabs button.admin-tab.active{ border-bottom-color:var(--amber); }

  .panel{ background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:18px; }
  .panel-head{ padding:16px 18px; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
  .panel-head h2{ font-family:var(--font-display); font-size:15px; margin:0; font-weight:600; }
  .panel-head .sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }

  form.add-row{
    display:grid; gap:8px; padding:16px 18px; border-bottom:1px solid var(--border-soft);
    background:var(--panel-2);
    grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
    align-items:end;
  }
  form.add-row label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); margin-bottom:5px; }
  form.add-row input, form.add-row select{
    width:100%; padding:9px 10px; border-radius:7px; border:1px solid var(--border);
    background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:13px; outline:none;
  }
  form.add-row input:focus, form.add-row select:focus{ border-color:var(--mint); }
  form.add-row button{
    padding:9px 16px; border-radius:7px; border:none; background:var(--mint); color:#06251c;
    font-weight:600; font-size:12.5px; cursor:pointer; height:37px;
  }
  form.add-row button:hover{ filter:brightness(1.08); }

  .readonly-note{
    padding:10px 18px; border-bottom:1px solid var(--border-soft); background:var(--panel-2);
    font-size:11.5px; color:var(--text-faint); display:flex; align-items:center; gap:8px;
  }

  table{ width:100%; border-collapse:collapse; font-size:13px; }
  thead th{
    text-align:left; padding:10px 18px; font-family:var(--font-mono); font-size:10.5px;
    text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); border-bottom:1px solid var(--border-soft);
    white-space:nowrap;
  }
  tbody td{ padding:11px 18px; border-bottom:1px solid var(--border-soft); color:var(--text); vertical-align:middle; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background:rgba(76,224,179,0.03); }
  .name-cell{ font-weight:500; }
  .del-btn{
    background:none; border:1px solid var(--border); color:var(--text-faint); border-radius:6px;
    width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1;
  }
  .del-btn:hover{ border-color:var(--red); color:var(--red); }
  .badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-family:var(--font-mono); }
  .b-mint{ background:rgba(76,224,179,0.12); color:var(--mint); }
  .b-amber{ background:rgba(242,163,64,0.12); color:var(--amber); }
  .b-red{ background:rgba(226,89,107,0.12); color:var(--red); }
  .b-dim{ background:rgba(139,152,172,0.12); color:var(--text-dim); }
  .empty-state{ padding:40px 20px; text-align:center; color:var(--text-faint); font-size:13px; }

  /* admin */
  .perm-cell{ display:flex; gap:10px; }
  .perm-cell label{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-dim); cursor:pointer; white-space:nowrap; }
  .perm-cell input[type=checkbox]{ accent-color:var(--mint); width:14px; height:14px; cursor:pointer; }
  .perm-cell input[disabled]{ cursor:not-allowed; opacity:.5; }
  .access-row select, .access-row input{
    padding:7px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg);
    color:var(--text); font-family:var(--font-body); font-size:12.5px; outline:none; width:100%;
  }
  .access-row select:focus, .access-row input:focus{ border-color:var(--mint); }

  footer.foot{
    margin-top:28px; padding-top:16px; border-top:1px solid var(--border-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:11px; color:var(--text-faint); font-family:var(--font-mono);
  }

  /* ---------- Mobile ---------- */
  @media (max-width:640px){
    #app{ padding:18px 14px 44px; }
    header.topbar{ gap:12px; }
    .who{ width:100%; justify-content:space-between; }
    .who .stat{ display:none; }
    .brand-text h1{ font-size:19px; }
    .brand-cross{ width:26px; height:26px; }
    .brand-cross::before{ width:6px; height:26px; }
    .brand-cross::after{ height:6px; width:26px; }

    .controls{ gap:8px; }
    .search-box{ min-width:100%; order:1; }
    #export-btn, #lock-btn{ flex:1; text-align:center; }

    nav.tabs{
      flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
      margin-left:-14px; margin-right:-14px; padding:0 14px 2px;
      scrollbar-width:none;
    }
    nav.tabs::-webkit-scrollbar{ display:none; }
    nav.tabs button{ flex-shrink:0; margin-right:16px; padding:10px 2px 12px; font-size:12.5px; }

    .panel-head{ padding:14px; }
    .panel-head h2{ font-size:14px; }

    form.add-row{ grid-template-columns:1fr 1fr; padding:14px; gap:10px; }
    form.add-row input, form.add-row select{
      font-size:16px; /* impede o zoom automático do iOS ao focar o campo */
      padding:10px 10px;
    }
    form.add-row button{ grid-column:1 / -1; height:42px; font-size:13.5px; }

    thead th{ padding:9px 12px; font-size:9.5px; }
    tbody td{ padding:10px 12px; font-size:12.5px; }
    .del-btn{ width:30px; height:30px; }

    .gate-card{ padding:28px 22px 24px; }

    footer.foot{ flex-direction:column; gap:4px; }
  }

  @media (max-width:380px){
    form.add-row{ grid-template-columns:1fr; }
  }