/* ========================================
   CONFIRA VAGAS — ESTILOS
   ========================================
   Paleta profissional: azul (confiança) + verde (oportunidade)
   Glassmorphism sutil em fundo claro
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- CORES DA MARCA ---------- */
  --bg: #eef2f7;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --surface-hover: rgba(255, 255, 255, 0.9);
  --primary: #1a6b4e;
  --primary-light: #22886a;
  --primary-bg: rgba(26, 107, 78, 0.08);
  --accent: #0f5ea8;
  --accent-light: #e8f1fc;

  /* ---------- CORES DE TEXTO ---------- */
  --text: #1e293b;
  --text-sec: #475569;
  --text-light: #94a3b8;

  /* ---------- OUTROS ---------- */
  --border: rgba(0, 0, 0, 0.08);
  --success: #16a34a;
  --danger: #dc2626;
  --shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08);
  --glass: blur(12px) saturate(1.4);
  --radius: 14px;
  --radius-sm: 8px;
  --sidebar: 230px;
  --bottom-nav: 64px;
  font-size: 15px;
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(15, 94, 168, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(26, 107, 78, 0.06) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text);
  display: flex; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

::selection{background:var(--primary-bg);color:var(--primary)}

/* ===== TOPBAR ===== */
.topbar{
  width: 100%; height: 70px;
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--border);
}
.topbar-container{
  width: 100%; max-width: 1100px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-logo{
  display: flex; align-items: center; gap: 10px;
}
.topbar-logo svg{flex-shrink:0}
.topbar-logo h1{
  font-size:18px;font-weight:800;color:var(--primary);line-height:1.2;
  letter-spacing:-0.3px; white-space:nowrap;
}
.topbar-nav{
  display:flex; align-items:center; gap: 4px;
}
.nav-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:600;color:var(--text-sec);
  cursor:pointer;transition:all .15s;border:none;background:transparent;
}
.nav-item:hover{background:rgba(0,0,0,.04);color:var(--text)}
.nav-item.active{
  background:var(--primary-bg);color:var(--primary);
}

/* ===== DROPDOWN MENU ===== */
.nav-dropdown{position:relative}
.nav-dropdown-toggle svg{transition:transform .2s}
.nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:100%;left:0;min-width:200px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:6px;
  display:none;z-index:200;
  animation:dropdownIn .15s ease;
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.nav-dropdown-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 14px;border:none;background:transparent;
  font-size:13px;font-weight:500;color:var(--text-sec);
  border-radius:6px;cursor:pointer;transition:all .12s;
  text-align:left;font-family:inherit;
}
.nav-dropdown-item:hover{background:var(--primary-bg);color:var(--primary)}
.nav-dropdown-item svg{flex-shrink:0;opacity:.6}

/* ===== PAGE SIZE BAR ===== */
.page-size-bar{
  display:flex;align-items:center;gap:6px;
  margin-bottom:12px;
}
.page-size-label{font-size:12px;font-weight:600;color:var(--text-sec)}
.page-size-btn{
  padding:5px 12px;border:1px solid var(--border);border-radius:6px;
  background:rgba(255,255,255,.5);font-size:12px;font-weight:600;
  color:var(--text-sec);cursor:pointer;transition:all .15s;font-family:inherit;
}
.page-size-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-size-btn.active{
  background:var(--primary);color:#fff;border-color:var(--primary);
}

.topbar-actions{
  display:flex; align-items:center; gap: 6px;
}
.nav-icon{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-sec);
  cursor:pointer; transition:all .15s;
}
.nav-icon:hover{background:rgba(0,0,0,.04);color:var(--primary)}
.nav-icon svg{width:18px; height:18px;}

/* ===== MAIN ===== */
.main{
  margin-top: 70px;
  margin-left: auto; margin-right: auto;
  flex:1;padding:28px 20px;max-width:1000px;
  width:100%;
}
.main-header{margin-bottom:24px}
.main-header h2{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-0.3px}
.main-header p{font-size:13px;color:var(--text-sec);margin-top:4px}

/* ===== TABS ===== */
.tab-content{display:none;animation:fadeIn .3s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ===== KEY BADGE ===== */
.key-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-light);color:var(--accent);
  font-size:11px;padding:5px 10px;border-radius:20px;
  font-family:'SF Mono','Courier New',monospace;margin-top:4px;
  border:1px solid rgba(15, 94, 168, 0.12);
}

/* ===== FORMULÁRIOS ===== */
.form-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:28px;
}
.form-section{margin-bottom:24px}
.form-section:last-child{margin-bottom:0}
.form-section h3{
  font-size:12px;font-weight:700;color:var(--primary);
  text-transform:uppercase;letter-spacing:0.8px;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.form-group{margin-bottom:14px}
.form-group:last-child{margin-bottom:0}
.form-group label{
  display:block;font-size:12.5px;font-weight:600;color:var(--text-sec);
  margin-bottom:5px;
}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:10px 12px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:var(--radius-sm);font-size:14px;outline:none;
  transition:all .15s;font-family:inherit;
  background:rgba(255,255,255,.6);color:var(--text);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-light)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26, 107, 78, 0.1);
  background:#fff;
}
.form-group select{cursor:pointer}
.form-group select option{background:#fff;color:var(--text)}
.form-group textarea{resize:vertical;min-height:90px}

/* ===== DYNAMIC GROUPS (Currículo) ===== */
.dynamic-group{
  background:rgba(0,0,0,.02);border:1px solid var(--border);
  border-radius:8px;padding:12px;margin-bottom:10px;
}
.dynamic-group input,.dynamic-group textarea{
  width:100%;padding:10px 12px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:var(--radius-sm);font-size:14px;outline:none;
  transition:all .15s;font-family:inherit;
  background:rgba(255,255,255,.6);color:var(--text);
  margin-bottom:8px;
}
.dynamic-group input:last-child,.dynamic-group textarea:last-child{margin-bottom:0}
.dynamic-group input:focus,.dynamic-group textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26, 107, 78, 0.1);
  background:#fff;
}
.dynamic-group textarea{resize:vertical;min-height:70px}

.char-count{font-size:11px;color:var(--text-light);text-align:right;margin-top:4px;transition:color .2s}
.char-count.limit-warn{color:#d97706}
.char-count.limit-full{color:#dc2626;font-weight:600}
.radio-group{display:flex;gap:6px;flex-wrap:wrap}
.radio-group label{
  display:flex;align-items:center;gap:4px;
  font-weight:500;font-size:13px;cursor:pointer;
  padding:7px 14px;border:1px solid rgba(0,0,0,.1);
  border-radius:20px;transition:all .15s;color:var(--text-sec);
  background:rgba(255,255,255,.5);
}
.radio-group label:hover{border-color:rgba(0,0,0,.2)}
.radio-group label.selected{
  border-color:var(--primary);background:var(--primary);
  color:#fff;font-weight:600;
}
.radio-group input[type=radio]{display:none}

/* ===== BOTÕES ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px;border:none;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;
  font-family:inherit;width:100%;
}
.btn:active{transform:scale(0.98)}
.btn-primary{
  background:var(--primary);color:#fff;
  box-shadow:0 1px 3px rgba(26, 107, 78, 0.3);
}
.btn-primary:hover{background:var(--primary-light);box-shadow:0 2px 8px rgba(26, 107, 78, 0.25)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-danger{
  background:rgba(220,38,38,.08);color:var(--danger);
  padding:7px 14px;font-size:12px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid rgba(220,38,38,.15);cursor:pointer;
}
.btn-danger:hover{background:rgba(220,38,38,.14)}
.btn-outline{
  background:rgba(255,255,255,.5);backdrop-filter:blur(4px);
  border:1px solid var(--border);color:var(--text-sec);
  padding:7px 14px;font-size:12px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.btn-sm{width:auto;padding:7px 14px;font-size:12px}
.btn-icon{
  width:32px;height:32px;padding:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);color:var(--text-sec);
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
.btn-icon:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.btn-icon svg{width:16px;height:16px}

/* ===== CARDS DE VAGAS ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media(max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}
.card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(26, 107, 78, 0.2);
  background:var(--surface-hover);
}
.card h3{font-size:16px;font-weight:700;margin-bottom:3px;color:var(--text)}
.card .empresa{font-size:13px;color:var(--primary);font-weight:600;margin-bottom:10px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.card .tags span{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:500;color:var(--text-sec);
  background:rgba(0,0,0,.04);padding:3px 8px;border-radius:4px;
}
.card .desc{font-size:13.5px;color:var(--text-sec);line-height:1.55;margin-bottom:12px}
.card .footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;border-top:1px solid var(--border);
  flex-wrap:wrap;gap:8px;
}
.card .footer .data{font-size:11px;color:var(--text-light);font-weight:500}
.card .footer .contato{
  font-size:13px;font-weight:600;color:var(--success);
  background:rgba(22, 163, 74, 0.06);padding:4px 10px;
  border-radius:20px;border:1px solid rgba(22, 163, 74, 0.12);
}
.card .card-actions{
  display:flex;gap:6px;align-items:center;
}

/* ===== FILTROS ===== */
.filter-bar{
  background: #fff;
  border: 1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;
  margin-bottom:20px;
}
.filter-bar input,.filter-bar select{
  padding:9px 12px;border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;outline:none;font-family:inherit;
  color:var(--text);background:rgba(255,255,255,.5);
}
.filter-bar input::placeholder{color:var(--text-light)}
.filter-bar input:focus,.filter-bar select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26, 107, 78, 0.08);
  background:#fff;
}
.filter-bar select option{background:#fff;color:var(--text)}

/* Range Slider */
.range-group input[type=range]{
  -webkit-appearance:none;width:100%;background:transparent;
  padding:0;height:24px;border:none;outline:none;
}
.range-group input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;height:16px;width:16px;border-radius:50%;
  background:var(--primary);cursor:pointer;margin-top:-6px;
  box-shadow:0 1px 4px rgba(26, 107, 78, 0.3);
  border:2px solid #fff;
}
.range-group input[type=range]::-webkit-slider-runnable-track{
  width:100%;height:4px;cursor:pointer;
  background:rgba(0,0,0,.1);border-radius:2px;
}
.range-group input[type=range]::-moz-range-thumb{
  height:14px;width:14px;border-radius:50%;
  background:var(--primary);cursor:pointer;border:2px solid #fff;
}
.range-group input[type=range]::-moz-range-track{
  width:100%;height:4px;cursor:pointer;
  background:rgba(0,0,0,.1);border-radius:2px;
}

/* ===== STATUS BAR ===== */
.status-bar{font-size:12px;font-weight:500;color:var(--text-light);text-align:center;padding:10px 0}

/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.35);backdrop-filter:blur(3px);
  z-index:999;display:none;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;
}
.modal{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  padding:28px;max-width:440px;width:92%;max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}
.modal h2{font-size:18px;font-weight:800;margin-bottom:8px;letter-spacing:-0.3px}
.modal p{font-size:13px;color:var(--text-sec);margin-bottom:16px;line-height:1.55}
.modal textarea{
  width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.1);
  border-radius:var(--radius-sm);font-size:12px;
  font-family:'SF Mono','Courier New',monospace;
  resize:vertical;min-height:70px;color:var(--text);
  background:rgba(255,255,255,.6);
}
.modal textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26, 107, 78, 0.1);background:#fff}
.modal .btn{margin-top:10px}
.modal .btn-outline{margin-top:4px}
.modal-editar{max-width:560px}
.modal-vaga-qr{max-width:480px}

/* ===== QR CODE ===== */
.qr-area{text-align:center;padding:14px 0}
.qr-area img{
  width:180px;height:180px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:#fff;padding:6px;
}
.qr-area p{font-size:11px;color:var(--text-light);margin-top:8px;word-break:break-all;font-family:monospace}

/* ===== ESTADOS VAZIOS E LOADING ===== */
.empty{
  text-align:center;padding:56px 20px;color:var(--text-light);
}
.empty svg{margin-bottom:14px;opacity:.35}
.empty strong{display:block;font-size:16px;font-weight:700;color:var(--text-sec);margin-bottom:4px}
.loading{text-align:center;padding:32px;color:var(--text-light);font-size:13px}
.loading::after{
  content:'';display:inline-block;width:18px;height:18px;margin-left:8px;
  border:2px solid rgba(0,0,0,.08);border-top-color:var(--primary);
  border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}
.badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:4px;font-weight:600}
.badge-warn{background:#fef3c7;color:#92400e}
.badge-exp{background:#f3f4f6;color:var(--text-sec)}

/* ===== SHARE BUTTONS ===== */
.share-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center}
.share-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border:none;border-radius:var(--radius-sm);
  font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;
  font-family:inherit;color:#fff;
}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.share-btn:active{transform:scale(0.97)}
.share-whatsapp{background:#25D366}
.share-linkedin{background:#0A66C2}
.share-facebook{background:#1877F2}
.share-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.share-copy{background:var(--text-sec);color:#fff}

/* ===== SHARE CARD PREVIEW ===== */
.share-card-preview{display:flex;justify-content:center;margin-bottom:16px}
.share-card{
  width:320px;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.12);border:1px solid var(--border);
}
.share-card-header{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--primary);color:#fff;
}
.share-card-logo{
  width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;letter-spacing:-0.5px;
}
.share-card-header span{font-size:14px;font-weight:700}
.share-card-body{padding:18px}
.share-card-body h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}
.share-card-empresa{font-size:13px;color:var(--primary);font-weight:600;margin-bottom:10px}
.share-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.share-card-tags span{
  font-size:11px;font-weight:500;color:var(--text-sec);
  background:rgba(0,0,0,.04);padding:3px 8px;border-radius:4px;
}
.share-card-contato{font-size:12px;color:var(--success);font-weight:600}
.share-card-footer{
  padding:14px 18px;border-top:1px solid var(--border);
  display:flex;justify-content:center;
}
.share-card-qr{text-align:center}
.share-card-qr img{width:100px;height:100px;border-radius:8px}
.share-card-qr span{display:block;font-size:10px;color:var(--text-light);margin-top:6px}

/* ===== CURRÍCULO LIST ===== */
.perfil-actions-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.perfil-actions-bar .btn{width:auto}
.cv-list{display:flex;flex-direction:column;gap:12px}
.cv-item{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;transition:box-shadow .2s;
}
.cv-item:hover{box-shadow:var(--shadow-md)}
.cv-item-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cv-item-avatar{
  width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0;
}
.cv-item-info{flex:1}
.cv-item-info h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}
.cv-item-info .cv-item-cargo{font-size:12px;color:var(--primary);font-weight:600}
.cv-item-preview{font-size:13px;color:var(--text-sec);line-height:1.5;margin-bottom:12px;max-height:60px;overflow:hidden}
.cv-item-actions{display:flex;gap:6px;flex-wrap:wrap}
.cv-item-actions .btn-outline{padding:6px 12px;font-size:11px}

/* ===== SECURITY BANNER ===== */
.security-banner{
  display:flex;align-items:center;gap:10px;
  background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius-sm);
  padding:12px 16px;margin-bottom:20px;font-size:13px;color:#92400e;line-height:1.5;
}
.security-banner svg{flex-shrink:0;color:#f59e0b}

/* ===== TOAST (NOTIFICAÇÕES) ===== */
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  padding:12px 24px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;z-index:9999;display:none;
  max-width:90%;text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  animation:fadeIn .2s ease;
}
.toast.success{background:var(--success);color:#fff}
.toast.error{background:var(--danger);color:#fff}
.toast.info{background:var(--accent);color:#fff}

/* ===== BANNER (URL PARAM) ===== */
.url-banner{
  background:var(--primary);color:#fff;text-align:center;
  padding:10px 16px;font-size:13px;
  position:fixed;top:70px;left:0;right:0;z-index:99;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.url-banner strong{font-weight:700}
.url-banner a{color:#fff;text-decoration:underline;font-weight:600}

/* ===== RESPONSIVO (MOBILE) ===== */
@media(max-width:768px){
  .topbar-nav { display:none; }
  .topbar-actions .nav-icon { display:none; }
  .topbar-container { padding: 0 16px; }
  .main{margin-top:70px;padding:16px;padding-bottom:calc(var(--bottom-nav) + 16px)}
  .main-header h2{font-size:20px}
  .form-row{flex-direction:column;gap:0}
  .bottom-nav{
    position:fixed;bottom:0;left:0;right:0;z-index:99;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
    display:flex;padding:6px 0 env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(0,0,0,.04);
  }
  .bottom-nav .nav-item{
    flex-direction:column;padding:6px 0;gap:2px;
    font-size:10px;border-radius:0; flex:1;
    align-items:center; justify-content:center;
  }
  .bottom-nav .nav-item svg{width:22px;height:22px}
  .bottom-nav .nav-item.active{background:transparent;color:var(--primary)}
  .menu-toggle{display:flex!important; background:transparent; border:none; padding:8px; margin-right:-8px; cursor:pointer; color:var(--text-sec)}
  .filter-bar{flex-direction:column;padding:10px}
  .filter-bar input,.filter-bar select{min-width:auto;width:100%}
  .cards{gap:10px}
  .modal{padding:22px}
  .page-size-bar{justify-content:center}
  .url-banner{top:70px;font-size:12px;padding:8px 12px}
}
@media(min-width:769px){
  .bottom-nav{display:none}
  .menu-toggle{display:none}
}