/* =============================================================================
   Lista do Mercado — Telegram Mini App
   Design herdado de .claude/scripts/render-lista-mercado.py (estilo Apple, dark).
   ========================================================================== */
:root{
  --bg:#F4F4F7; --grad1:#FFFFFF; --grad2:#EFEFF4;
  --card:rgba(255,255,255,.92); --hair:rgba(60,60,67,.10);
  --ink:#11131A; --sub:#8A8A8E; --faint:#AEAEB4;
  --accent:#0A84FF; --accent-soft:rgba(10,132,255,.10);
  --green:#30D158; --shadow:0 10px 40px -12px rgba(20,20,40,.18);
}
@media (prefers-color-scheme: dark){
  :root{--bg:#000; --grad1:#1A1A1D; --grad2:#0A0A0C;
    --card:rgba(28,28,30,.86); --hair:rgba(255,255,255,.08);
    --ink:#F5F5F7; --sub:#98989F; --faint:#6A6A70;
    --accent:#0A84FF; --accent-soft:rgba(10,132,255,.18);
    --green:#30D158; --shadow:0 12px 44px -10px rgba(0,0,0,.7);}
}
/* Telegram injeta o tema do app; se vier, respeita o fundo dele */
body.tg-dark{--bg:#000;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding:0 0 64px;min-height:100vh;
}
.hero{
  background:linear-gradient(180deg,var(--grad1),var(--grad2));
  padding:max(28px,env(safe-area-inset-top)) 22px 26px;
  border-bottom:1px solid var(--hair);
}
.wrap{max-width:620px;margin:0 auto;padding:0 18px;}
.hero .wrap{padding:0;}
.kicker{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;}
h1{font-size:38px;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.02;}
.sub{color:var(--sub);font-size:15px;margin-top:8px;font-weight:450;}
.barwrap{margin-top:20px;display:flex;align-items:center;gap:12px;}
.bar{flex:1;height:8px;border-radius:99px;background:var(--hair);overflow:hidden;}
.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#34D399,var(--green));transition:width .45s cubic-bezier(.22,1,.36,1);}
.pct{font-size:14px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums;min-width:64px;text-align:right;}
section{margin-top:26px;}
.sec-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:0 14px 9px;}
.sec-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--hair);color:var(--sub);font-size:11px;font-weight:700;}
.card{background:var(--card);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--hair);}
.row{display:flex;align-items:center;gap:15px;padding:15px 17px;cursor:pointer;border-bottom:1px solid var(--hair);transition:background .15s;}
.row:last-child{border-bottom:none;}
.row:active{background:var(--accent-soft);}
.check{flex:0 0 27px;width:27px;height:27px;border-radius:50%;border:2px solid var(--faint);display:flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s,border-color .18s;}
.check svg{width:15px;height:15px;opacity:0;transform:scale(.3);transition:opacity .18s,transform .18s cubic-bezier(.34,1.56,.64,1);}
.row.done .check{background:var(--green);border-color:var(--green);transform:scale(1.04);}
.row.done .check svg{opacity:1;transform:scale(1);}
.body{flex:1;min-width:0;}
.name{font-size:17px;font-weight:600;letter-spacing:-.012em;}
.detail{font-size:13.5px;color:var(--sub);margin-top:4px;line-height:1.45;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.detail .qty{color:var(--ink);font-weight:500;}
.detail .dot{color:var(--faint);}
.detail .obs{color:var(--sub);}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12.5px;padding:3px 9px;border-radius:99px;letter-spacing:-.01em;}
.pill .store{color:var(--sub);font-weight:500;}
.row.done .name{text-decoration:line-through;color:var(--faint);}
.row.done .detail{opacity:.4;}
.actions{text-align:center;margin-top:26px;}
.reset{background:none;border:none;color:var(--accent);font-size:15px;font-weight:600;padding:10px 16px;cursor:pointer;font-family:inherit;border-radius:99px;}
.reset:active{background:var(--accent-soft);}
footer{color:var(--faint);font-size:12px;line-height:1.6;margin:30px 20px 0;text-align:center;}
.done-all{opacity:0;transition:opacity .4s;font-size:15px;font-weight:600;color:var(--green);margin-top:6px;}
.done-all.on{opacity:1;}
/* estados de carga / vazio / erro */
.state{margin:60px 20px;text-align:center;color:var(--sub);font-size:15px;line-height:1.6;}
.state .big{font-size:34px;margin-bottom:10px;}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--hair);border-top-color:var(--accent);animation:sp .8s linear infinite;margin:0 auto 14px;}
@keyframes sp{to{transform:rotate(360deg);}}
/* selo de sincronização (canto) */
.sync{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--hair);color:var(--sub);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:99px;box-shadow:var(--shadow);opacity:0;transition:opacity .25s;pointer-events:none;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.sync.on{opacity:1;}
.sync.err{color:#FF453A;}