/* iOS 18 · Liquid Glass — vidro translúcido, refração de luzes ambientes, tipografia SF */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --bg1:#eaeefb; --bg2:#f1ecfb;
  --label:#0b0b10; --label2:rgba(60,60,67,.68); --label3:rgba(60,60,67,.38);
  --glass:rgba(255,255,255,.52); --glass-sm:rgba(255,255,255,.45); --glass-hi:rgba(255,255,255,.85);
  --stroke:rgba(255,255,255,.7); --stroke2:rgba(0,0,0,.06);
  --shadow:0 18px 50px -18px rgba(40,40,90,.28),0 2px 6px rgba(40,40,90,.06);
  --blue:#0a84ff; --green:#5b6cf0; --orange:#8b5cf6; --red:#ff453a; --purple:#8b5cf6; --yellow:#7c83f5; --gray:#8e8e93;
  --r:26px; --r-sm:18px; --blur:30px;
}
@media (prefers-color-scheme:dark){:root{
  --bg1:#070912; --bg2:#0d0a1c;
  --label:#fff; --label2:rgba(235,235,245,.68); --label3:rgba(235,235,245,.34);
  --glass:rgba(40,40,60,.38); --glass-sm:rgba(60,60,85,.32); --glass-hi:rgba(255,255,255,.16);
  --stroke:rgba(255,255,255,.2); --stroke2:rgba(255,255,255,.07);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);
}}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.45 var(--font);color:var(--label);background:linear-gradient(160deg,var(--bg1),var(--bg2));min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
code{font:12.5px var(--mono);padding:2px 6px;border-radius:7px;background:var(--stroke2)}
.muted{color:var(--label2)} .small{font-size:13px} .lead{margin:-6px 4px 16px;max-width:60ch}
.ok{color:var(--green)} .warn-t{color:var(--orange)}
.link{color:var(--blue);font-weight:500}

/* ---- Luzes ambientes ---- */
.lights{position:fixed;inset:0;z-index:-1;overflow:hidden}
.lights i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:float 22s ease-in-out infinite}
.l1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#5e7bff,transparent 65%)}
.l2{width:40vmax;height:40vmax;right:-10vmax;top:6vmax;background:radial-gradient(circle,#9b6bff,transparent 65%);animation-delay:-6s}
.l3{width:44vmax;height:44vmax;left:18vmax;bottom:-22vmax;background:radial-gradient(circle,#4a8dff,transparent 65%);animation-delay:-11s}
.l4{width:30vmax;height:30vmax;right:6vmax;bottom:4vmax;background:radial-gradient(circle,#b08cff,transparent 65%);animation-delay:-16s;opacity:.55}
@media (prefers-color-scheme:dark){.lights i{opacity:.5}}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vmax,3vmax) scale(1.08)}66%{transform:translate(-3vmax,5vmax) scale(.94)}}
@media (prefers-reduced-motion:reduce){.lights i{animation:none}}

/* ---- Vidro ---- */
.glass,.glass-sm{position:relative;-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  background:var(--glass);border:1px solid var(--stroke);box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.06)}
.glass{border-radius:var(--r)}
.glass-sm{border-radius:var(--r-sm);background:var(--glass-sm);box-shadow:0 8px 24px -14px rgba(30,30,80,.25),inset 0 1px 0 var(--glass-hi)}
/* brilho especular que acompanha a borda superior */
.glass::before,.glass-sm::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
@media (prefers-color-scheme:dark){.glass::before,.glass-sm::before{opacity:.7}}

/* ---- Estrutura ---- */
.shell{display:grid;grid-template-columns:96px 1fr;gap:22px;max-width:1240px;margin:0 auto;padding:22px}
.dock{position:sticky;top:22px;height:calc(100vh - 44px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px;font-size:11px;letter-spacing:.2px}
.logo{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#5ea0ff,#a35bff);box-shadow:0 8px 20px -6px #7a5cff,inset 0 1px 0 rgba(255,255,255,.5)}
.logo .ic{width:22px;height:22px}
.dock-item{display:flex;flex-direction:column;align-items:center;gap:3px;width:72px;padding:10px 4px;border-radius:18px;font-size:11px;font-weight:500;color:var(--label2);transition:.25s}
.dock-item:hover{background:var(--stroke2)}
.dock-item.on{color:var(--blue);background:var(--glass-hi);box-shadow:0 6px 18px -8px rgba(10,132,255,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.ic{width:24px;height:24px;flex:none}
.content{min-width:0;display:flex;flex-direction:column;gap:18px;padding-bottom:40px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 4px 2px}
.page-head h1{font-size:clamp(30px,5vw,40px);font-weight:700;letter-spacing:-.8px;line-height:1.1}
.eyebrow{font-size:13px;font-weight:600;color:var(--label2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.eyebrow a:hover{color:var(--blue)}
.card{padding:22px}
.card h2{font-size:19px;font-weight:650;letter-spacing:-.3px;margin-bottom:12px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions form{display:inline}
.empty{text-align:center;padding:34px}

/* ---- Botões / campos ---- */
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--stroke);cursor:pointer;
  font:600 15px var(--font);color:var(--label);background:var(--glass-sm);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 6px 16px -10px rgba(30,30,80,.4),inset 0 1px 0 var(--glass-hi);transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:scale(.97)}
.btn .ic{width:18px;height:18px}
.btn.primary{color:#fff;border-color:rgba(255,255,255,.35);background:linear-gradient(180deg,#3d9bff,#0a6cf0);box-shadow:0 10px 24px -10px rgba(10,132,255,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.sm{height:34px;padding:0 13px;font-size:13px}.btn.sm .ic{width:15px;height:15px}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--label2)}
.btn.danger:hover{color:var(--red)}
.btn[disabled]{opacity:.45;pointer-events:none}
.field{height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--stroke);background:var(--glass-sm);color:var(--label);font:16px var(--font);outline:none;flex:1;min-width:0;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,132,255,.22)}
.search{display:flex;gap:10px;padding:10px}
.search .field{background:transparent;border-color:transparent;box-shadow:none}
.form-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* ---- Cards de métricas ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{padding:18px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.stat b{font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin-top:10px}
.stat-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px currentColor}
.stat-ic .ic{width:20px;height:20px}
.stat.blue .stat-ic{background:linear-gradient(145deg,#52a8ff,#0a84ff);color:#0a84ff}
.stat.green .stat-ic{background:linear-gradient(145deg,#8a96ff,#5b6cf0);color:#5b6cf0}
.stat.purple .stat-ic{background:linear-gradient(145deg,#a78bfa,#7c4ddb);color:#7c4ddb}
.stat.orange .stat-ic{background:linear-gradient(145deg,#b794ff,#8b5cf6);color:#8b5cf6}
.stat-ic .ic{color:#fff}

/* ---- Banner / toast ---- */
.banner{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:22px}
.banner .ic{width:26px;height:26px;color:var(--orange)} .banner.info .ic{color:var(--blue)} .banner .btn{margin-left:auto}
.toast{padding:14px 20px;border-radius:20px;font-weight:500;animation:pop .5s cubic-bezier(.2,1.3,.4,1)}
.toast.ok{border-color:rgba(91,108,240,.5)} .toast.erro{border-color:rgba(255,69,58,.6);color:var(--red)}
@keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.96)}}

/* ---- Pílulas / chips ---- */
.pill,.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--stroke2);color:var(--label2);white-space:nowrap}
.pill.green{background:rgba(91,108,240,.18);color:#4350c9}.pill.red{background:rgba(255,69,58,.18);color:#e0372d}
.pill.orange{background:rgba(139,92,246,.18);color:#6d3fd1}.pill.yellow{background:rgba(124,131,245,.2);color:#4f55c7}
.pill.purple{background:rgba(139,92,246,.18);color:#6d3fd1}.pill.blue{background:rgba(10,132,255,.16);color:#0a6cf0}
@media (prefers-color-scheme:dark){.pill.green{color:#9aa5ff}.pill.red{color:#ff7a70}.pill.orange{color:#c4a6ff}.pill.yellow{color:#a9aeff}.pill.purple{color:#c4a6ff}.pill.blue{color:#6db3ff}}
.st-processando{background:rgba(10,132,255,.18);color:var(--blue)}.st-concluido{background:rgba(91,108,240,.18);color:#4350c9}.st-pausado{background:rgba(139,92,246,.18);color:#6d3fd1}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 15px;font-size:14px;background:var(--glass-sm);border:1px solid var(--stroke);backdrop-filter:blur(16px)}
.chip.on{background:var(--label);color:var(--bg1);border-color:transparent}
.chip b{opacity:.7}

/* ---- Segmented control ---- */
.seg{display:inline-flex;padding:4px;gap:2px;align-self:flex-start;max-width:100%;overflow-x:auto}
.seg a{padding:9px 18px;border-radius:14px;font-weight:600;font-size:14px;color:var(--label2);white-space:nowrap;transition:.25s}
.seg a em{font-style:normal;opacity:.6;margin-left:4px}
.seg a.on{background:var(--glass-hi);color:var(--label);box-shadow:0 4px 14px -6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.7)}

/* ---- Lotes ---- */
.lote-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.lote{display:block;padding:16px;transition:.2s}.lote:hover{transform:translateY(-2px)}
.lote-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px;align-items:center}
.lote-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;margin-top:10px}
.bar{height:8px;border-radius:99px;background:var(--stroke2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#34c8ff,#0a84ff,#a35bff);box-shadow:0 0 14px rgba(10,132,255,.7);transition:width .5s cubic-bezier(.3,.9,.3,1)}
.bar.big{height:14px;margin:18px 0 8px}
.run.busy .bar i{background-size:200% 100%;animation:sheen 1.6s linear infinite}
@keyframes sheen{from{background-position:200% 0}to{background-position:-200% 0}}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-top:12px}
.counters b{display:block;font-size:26px;letter-spacing:-.6px}.counters span{font-size:12.5px;color:var(--label2)}
.error-line{color:var(--red);font-weight:500;margin-top:10px}
.drop{padding:18px}
.drop-area{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 16px;border:2px dashed var(--label3);border-radius:22px;transition:.25s}
.drop-area.over{border-color:var(--blue);background:rgba(10,132,255,.1);transform:scale(1.01)}
.drop-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;color:#fff;background:linear-gradient(145deg,#52a8ff,#a35bff);box-shadow:0 12px 26px -10px #7a5cff,inset 0 1px 0 rgba(255,255,255,.5)}
.drop-ic .ic{width:28px;height:28px}.file-name{font-weight:600;color:var(--blue)}

/* ---- Itens ---- */
.list{display:flex;flex-direction:column;gap:12px}
.item{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.3fr) auto;gap:18px;padding:16px 18px;align-items:start}
.item-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:16px}
.item-title a:hover{color:var(--blue)}
.detalhe{margin-top:6px;color:var(--orange)}
.item-actions{display:flex;flex-direction:column;gap:8px}
.link-item:hover{transform:translateY(-1px)}
.found{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;margin-bottom:9px;font-size:13px;color:#4350c9;background:rgba(91,108,240,.16);border-color:rgba(91,108,240,.45)}
.found .ic{width:15px;height:15px}.found .sep{opacity:.5}
@media (prefers-color-scheme:dark){.found{color:#9aa5ff}}
.phones{display:flex;flex-wrap:wrap;gap:8px}
.phone{display:inline-flex;flex-direction:column;padding:8px 13px;border-radius:15px;background:var(--glass-sm);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--glass-hi);position:relative;font-variant-numeric:tabular-nums}
.phone b{font-size:15px}.phone small{font-size:11.5px;color:var(--label2)}
.phone.rel{border-color:rgba(139,92,246,.5);background:linear-gradient(180deg,rgba(139,92,246,.14),var(--glass-sm))}
.wa{position:absolute;top:-6px;right:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#5b6cf0;color:#fff;box-shadow:0 4px 10px -3px #5b6cf0}
.wa .ic{width:12px;height:12px}
.pager{display:flex;gap:18px;justify-content:center;align-items:center;padding:10px 18px;align-self:center}
.pager a{color:var(--blue);font-weight:600}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.kv div{display:flex;flex-direction:column;gap:3px}.kv b{font-weight:600;word-break:break-word}
.conn{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}.conn-card p{margin:0 0 16px}
.test-out.ok{color:var(--green)}.test-out.bad{color:var(--red)}
.card .row-between.small{padding:9px 0;border-top:1px solid var(--stroke2)}

/* ---- Mobile: dock vira barra flutuante inferior ---- */
@media (max-width:860px){
  .shell{grid-template-columns:1fr;padding:14px 14px 104px}
  .dock{position:fixed;z-index:20;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));top:auto;height:auto;flex-direction:row;justify-content:space-around;padding:8px;border-radius:30px}
  .brand{display:none}.dock-item{width:auto;flex:1;padding:8px 2px}
  .item{grid-template-columns:1fr}
  .item-actions{flex-direction:row}
}
[hidden]{display:none!important}
.phone .np{font-size:10.5px;padding:1px 7px;align-self:flex-start;margin:3px 0 1px}
