/* ============================================================
   QPNEWS v3 — estilos compartilhados
   ============================================================ */
:root{
  --ink:#16181d;--ink-2:#1f232b;--ink-3:#2b313b;
  --paper:#f6f4ee;--surface:#ffffff;--text:#1b1d22;--muted:#7b7568;--muted-2:#a39c8c;
  --line:#e7e2d6;--line-2:#efebe1;
  --accent:#d6361f;--accent-d:#b22a16;--accent-soft:#fbe9e4;
  --ok:#2f9e5e;--ok-soft:#e3f4ea;
  --tol:#2563a8;--mer:#1a9b73;--fro:#c4881a;
  --font-display:'Fraunces',Georgia,serif;--font-ui:'Archivo',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(20,22,28,.04),0 4px 16px rgba(20,22,28,.05);
  --shadow-lift:0 2px 6px rgba(20,22,28,.07),0 12px 32px rgba(20,22,28,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-ui);background:var(--paper);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(123,117,104,.4);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(123,117,104,.6);background-clip:content-box}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(120% 120% at 50% -10%, #20242b 0%, var(--ink) 60%)}
.login-card{width:100%;max-width:360px;background:var(--surface);border-radius:18px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.login-card .qp{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.5px;text-align:center}
.login-card .qp em{color:var(--accent);font-style:normal}
.login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin:4px 0 22px}
.login-card label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);display:block;margin:14px 0 6px}
.login-card input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--font-ui);font-size:14px;outline:none;transition:.15s}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.login-card button{width:100%;margin-top:20px;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:12px;font-family:var(--font-ui);font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.login-card button:hover{background:var(--ink-3)}
.login-erro{background:var(--accent-soft);color:var(--accent-d);border:1px solid #f4cdc4;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:8px;text-align:center}

/* ===== APP SHELL (lista) ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:266px;flex:0 0 266px;background:var(--ink);color:#cfd2d8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid #000}
.brand{padding:22px 22px 18px;border-bottom:1px solid var(--ink-2);display:flex;align-items:baseline;gap:8px}
.brand .qp{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-.5px;color:#fff;line-height:1}
.brand .qp em{color:var(--accent);font-style:normal}
.brand .tag{font-size:10.5px;letter-spacing:2.5px;color:var(--muted-2);text-transform:uppercase;margin-left:auto;font-weight:600}
.nav{padding:16px 12px 6px;display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#6c7280;padding:14px 10px 7px;font-weight:700}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#c2c6cd;text-decoration:none;font-size:13.5px;font-weight:500;transition:background .15s,color .15s;position:relative}
.nav a svg{width:17px;height:17px;flex:0 0 17px;opacity:.8}
.nav a .badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;min-width:20px;text-align:center}
.nav a:hover{background:var(--ink-2);color:#fff}
.nav a.active{background:linear-gradient(90deg,var(--ink-3),var(--ink-2));color:#fff}
.nav a.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.sources{flex:1;overflow-y:auto;padding:4px 12px 12px}
.source{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;color:#aeb3bb;text-decoration:none;font-size:12.5px;transition:background .15s,color .15s}
.source:hover{background:var(--ink-2);color:#fff}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--ok);box-shadow:0 0 0 3px rgba(47,158,94,.15)}
.dot.warn{background:#e0a83a;box-shadow:0 0 0 3px rgba(224,168,58,.15)}
.dot.stale{background:var(--accent);box-shadow:0 0 0 3px rgba(214,54,31,.15)}
.source .when{margin-left:auto;font-size:10.5px;color:#5f6571;font-variant-numeric:tabular-nums}
.side-foot{padding:13px 22px;border-top:1px solid var(--ink-2);font-size:11px;color:#5f6571;display:flex;justify-content:space-between;align-items:center}
.side-foot a{color:#8a9099;text-decoration:none}
.side-foot a:hover{color:#fff}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(246,244,238,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:15px 32px;display:flex;align-items:center;gap:18px}
.hamb{display:none;background:none;border:none;cursor:pointer;color:var(--text);padding:4px}
.page-h{display:flex;flex-direction:column;gap:1px}
.page-h h1{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.4px;line-height:1}
.page-h span{font-size:12px;color:var(--muted)}
.search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 13px;width:260px;transition:.15s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{width:16px;height:16px;color:var(--muted)}
.search input{border:none;outline:none;background:none;font-family:var(--font-ui);font-size:13.5px;width:100%;color:var(--text)}
.refresh{background:var(--ink);color:#fff;border:none;border-radius:10px;cursor:pointer;padding:9px 15px;font-family:var(--font-ui);font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;transition:.15s;text-decoration:none}
.refresh:hover{background:var(--ink-3)}
.refresh svg{width:15px;height:15px}
.scroll{flex:1;overflow-y:auto}
.wrap{max-width:1080px;margin:0 auto;padding:26px 32px 80px}

/* tabs */
.tabs{display:flex;margin-bottom:24px;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;cursor:pointer;font-family:var(--font-ui);padding:12px 2px;margin-right:30px;font-size:16px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:9px;position:relative;transition:color .15s}
.tab .tc{font-size:12px;font-weight:700;background:var(--line-2);color:var(--muted);padding:1px 9px;border-radius:20px;font-variant-numeric:tabular-nums;transition:all .15s}
.tab svg{width:17px;height:17px}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:transparent;border-radius:3px;transition:background .18s}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text)}
.tab.on .tc{background:var(--ink);color:#fff}
.tab.on::after{background:var(--ink)}
.tab.imp svg{color:var(--accent)}
.tab.imp.on{color:var(--accent-d)}
.tab.imp.on .tc{background:var(--accent);color:#fff}
.tab.imp.on::after{background:var(--accent)}
.panel{display:none}
.panel.on{display:block;animation:fade .25s ease both}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.vazio{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:11px;display:flex;gap:15px;cursor:pointer;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s,border-color .14s;position:relative;overflow:hidden;text-decoration:none;color:inherit}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .14s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
#p-imp .card:hover::before{background:var(--accent)}
.card:hover::before{background:var(--muted-2)}
.thumb{width:124px;height:90px;flex:0 0 124px;border-radius:9px;overflow:hidden;position:relative;background:linear-gradient(135deg,#e9e4d8,#d8d2c4);display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .mono{font-family:var(--font-display);font-weight:700;font-size:26px;color:rgba(27,29,34,.22)}
.thumb.t-pol{background:linear-gradient(135deg,#2b313b,#454d59)}
.thumb.t-pol .mono{color:rgba(255,255,255,.28)}
.thumb.t-cot{background:linear-gradient(135deg,#dfe7ef,#c4d4e6)}
.thumb.t-bra{background:linear-gradient(135deg,#e8e2d3,#dccfb4)}
.thumb.t-agro{background:linear-gradient(135deg,#dce9d6,#c3ddb8)}
.thumb .cat{position:absolute;left:7px;bottom:7px;background:rgba(0,0,0,.55);color:#fff;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:2px 7px;border-radius:5px}
.body-c{flex:1;min-width:0;display:flex;flex-direction:column}
.title-c{font-family:var(--font-ui);font-weight:600;font-size:15.5px;line-height:1.3;color:var(--text);letter-spacing:-.2px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-top:auto}
.meta .src{font-weight:600;color:var(--text)}
.meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.meta .city{display:inline-flex;align-items:center;gap:4px}
.meta .city svg{width:12px;height:12px}
.dests{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:5px}
.pill.tol{background:rgba(37,99,168,.1);color:var(--tol)}
.pill.mer{background:rgba(26,155,115,.12);color:var(--mer)}
.pill.fro{background:rgba(196,136,26,.13);color:#9c6c12}
.rail{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-left:4px}
.ia{display:flex;align-items:center;gap:6px;background:var(--line-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:11px;font-weight:700;color:var(--muted);cursor:help}
.ia .score{font-variant-numeric:tabular-nums;color:var(--text)}
.ia .led{width:6px;height:6px;border-radius:50%}
.ia.hi .led{background:var(--accent)}
.ia.mid .led{background:#e0a83a}
.ia.lo .led{background:var(--muted-2)}
.flag{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted-2);transition:all .15s}
.flag svg{width:16px;height:16px}
.flag:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.flag.up{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
.flag.up svg{fill:var(--accent)}
.status{font-size:10.5px;font-weight:600;color:var(--muted-2);display:flex;align-items:center;gap:4px}
.status.new{color:var(--accent)}
.status .nd{width:6px;height:6px;border-radius:50%;background:currentColor}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}

/* ===== TOAST (compartilhado) ===== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:60;display:flex;align-items:center;gap:11px;max-width:90vw;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .ic{width:26px;height:26px;border-radius:7px;background:var(--ok);display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.toast.warn .ic{background:var(--muted)}
.toast .ic svg{width:15px;height:15px}
.toast b{font-weight:700}

/* ===== RESPONSIVO (lista) ===== */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .3s}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .scrim.show{display:block}
  .hamb{display:flex}
  .topbar{padding:13px 16px}
  .wrap{padding:20px 16px 80px}
  .search{display:none}
  .thumb{width:92px;height:74px;flex:0 0 92px}
  .rail{flex-direction:row;align-items:center;position:absolute;top:13px;right:13px}
  .card{padding:11px;padding-top:46px;flex-wrap:wrap}
  .title-c{font-size:14.5px}
}