:root {
  --bg: #f8fafc;
  --panel: rgba(255,255,255,.88);
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #2563eb;
  --primary2: #7c3aed;
  --ok: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;
  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --radius: 24px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(circle at top left, #dbeafe 0, transparent 34%), radial-gradient(circle at top right, #fce7f3 0, transparent 30%), var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
.app { width: min(1160px, 100%); margin: 0 auto; padding: 18px; padding-bottom: 100px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:46px; height:46px; border-radius:18px; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), var(--primary2)); color:white; box-shadow: var(--shadow); font-size:24px; }
.brand h1 { margin:0; font-size: clamp(22px, 4vw, 34px); letter-spacing:-.04em; }
.brand p { margin:2px 0 0; color:var(--muted); font-size:14px; }
.pill { padding:8px 12px; border-radius:999px; background:#e0f2fe; color:#075985; font-size:13px; font-weight:700; }
.grid { display:grid; gap:16px; }
.grid.cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card { background: var(--panel); border:1px solid rgba(226,232,240,.92); border-radius:var(--radius); box-shadow: var(--shadow); padding:18px; backdrop-filter: blur(16px); animation: enter .25s ease both; }
@keyframes enter { from { opacity:0; transform: translateY(8px) scale(.99);} to { opacity:1; transform:none;} }
.card-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card h2, .card h3 { margin:0; letter-spacing:-.03em; }
.muted { color:var(--muted); }
.btn { border-radius:18px; padding:12px 15px; font-weight:800; background:#e2e8f0; color:#0f172a; transition:.18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15,23,42,.12); }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color:white; }
.btn.ok { background: #dcfce7; color:#166534; }
.btn.danger { background:#fee2e2; color:#991b1b; }
.btn.ghost { background: transparent; border:1px solid var(--line); }
.btn.block { width:100%; }
.input, .textarea, .select { width:100%; padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:white; outline:none; transition:.16s ease; }
.input:focus, .textarea:focus, .select:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.space { justify-content:space-between; }
.tabs { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; width:min(760px, calc(100% - 22px)); z-index:10; display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:8px; padding:10px; border-radius:26px; background:rgba(15,23,42,.88); backdrop-filter: blur(18px); box-shadow:0 24px 60px rgba(15,23,42,.28); }
.tab { color:#cbd5e1; background:transparent; border-radius:18px; padding:10px 6px; font-size:12px; font-weight:800; display:grid; gap:2px; place-items:center; }
.tab.active { background:white; color:#0f172a; }
.super-card { min-height:156px; display:flex; flex-direction:column; justify-content:space-between; border-top:5px solid var(--accent, #2563eb); }
.super-logo { width:48px; height:48px; border-radius:18px; display:grid; place-items:center; font-size:22px; color:white; background:var(--accent, #2563eb); font-weight:900; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.chip { padding:9px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#334155; font-weight:750; }
.chip.active { color:#1d4ed8; border-color:#93c5fd; background:#eff6ff; }
.product { display:grid; grid-template-columns: 58px 1fr auto; gap:12px; align-items:center; }
.img { width:58px; height:58px; border-radius:20px; background:#f1f5f9; display:grid; place-items:center; font-size:28px; }
.price { font-weight:900; font-size:18px; }
.old { color:#94a3b8; text-decoration:line-through; font-size:13px; }
.tag { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:800; }
.list-item { position:relative; overflow:hidden; padding:0; touch-action: pan-y; }
.list-content { display:grid; grid-template-columns: 46px 1fr auto; gap:12px; align-items:center; background:var(--panel); padding:14px; border-radius:var(--radius); transition:.2s ease; }
.list-content.done { opacity:.55; text-decoration:line-through; }
.swipe-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-weight:900; color:white; border-radius:var(--radius); background:linear-gradient(90deg, var(--ok), var(--danger)); z-index:-1; }
.qty { width:68px; padding:9px; border-radius:14px; border:1px solid var(--line); }
.progress { height:12px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.progress > div { height:100%; background:linear-gradient(90deg, var(--ok), #22c55e); transition:.25s ease; }
.empty { text-align:center; padding:28px; color:var(--muted); }
.toast { position:fixed; right:18px; bottom:102px; max-width:320px; padding:14px 16px; border-radius:18px; background:#0f172a; color:white; box-shadow:var(--shadow); animation: toast .22s ease both; z-index:20; }
@keyframes toast { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.skeleton { height:88px; border-radius:var(--radius); background:linear-gradient(90deg,#f1f5f9,#fff,#f1f5f9); background-size:200% 100%; animation: sk 1.1s linear infinite; }
@keyframes sk { to { background-position:-200% 0; } }
.two { display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; }
.category-section { margin-top:14px; }
.category-section h3 { font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.small { font-size:12px; }
.hidden { display:none !important; }
@media (max-width: 780px) {
  .app { padding: 14px; padding-bottom: 96px; }
  .two { grid-template-columns: 1fr; }
  .header { align-items:flex-start; }
  .tabs { grid-template-columns: repeat(4, 1fr); }
  .product { grid-template-columns: 50px 1fr; }
  .product .btn { grid-column: 1 / -1; width:100%; }
}
@media (prefers-color-scheme: dark) {
  body.dark-auto { --bg:#020617; --panel:rgba(15,23,42,.86); --text:#e5e7eb; --muted:#94a3b8; --line:#1e293b; }
  body.dark-auto .input, body.dark-auto .textarea, body.dark-auto .select { background:#0f172a; color:#e5e7eb; }
  body.dark-auto .chip { background:#0f172a; color:#cbd5e1; }
  body.dark-auto .list-content { background:#0f172a; }
}
.img img { width:100%; height:100%; object-fit:contain; border-radius:18px; }
code { background:#eef2ff; color:#3730a3; padding:2px 6px; border-radius:8px; }

:root { --panel-solid:#ffffff; }
.card.soft-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)); }
.list-card h2, .community-card h2 { overflow-wrap:anywhere; }
.list-item { background: linear-gradient(90deg, rgba(22,163,74,.18), rgba(239,68,68,.16)); border:1px solid rgba(226,232,240,.92); }
.list-content { position:relative; z-index:1; background:var(--panel-solid); grid-template-columns: 44px minmax(0, 1fr) auto; }
.list-content.done { opacity:.72; }
.list-content.done .item-main { text-decoration:line-through; }
.item-main { min-width:0; }
.item-main h3 { overflow-wrap:anywhere; line-height:1.2; }
.item-main .muted { overflow-wrap:anywhere; line-height:1.35; }
.item-check { width:42px; height:42px; padding:0; border-radius:16px; flex:0 0 auto; font-size:20px; }
.item-delete { white-space:nowrap; }
.swipe-bg { z-index:0; pointer-events:none; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; background:#f1f5f9; border-radius:22px; margin:10px 0; }
.seg { border-radius:17px; padding:11px 12px; background:transparent; color:#475569; font-weight:900; }
.seg.active { background:white; color:#0f172a; box-shadow:0 10px 22px rgba(15,23,42,.08); }
.community-search { position:sticky; top:8px; z-index:2; }
.community-card .preview { background:#f8fafc; border:1px solid var(--line); border-radius:18px; padding:12px; color:#334155; }
.metrics { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.metrics span { padding:8px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:900; }
.details { border:1px solid var(--line); border-radius:18px; padding:12px; background:rgba(248,250,252,.82); }
.details summary { cursor:pointer; font-weight:900; }
.mini-list { display:grid; gap:8px; margin-top:10px; }
.mini-list > div { display:grid; gap:2px; padding:10px; background:white; border:1px solid var(--line); border-radius:14px; }
.mini-list small { color:var(--muted); }
@media (max-width: 780px) {
  .app { padding-bottom: 150px; }
  .tabs { bottom:10px; }
}
@media (max-width: 520px) {
  .brand p { font-size:13px; }
  .pill { max-width:92px; text-align:center; line-height:1.2; }
  .list-content { grid-template-columns: 44px minmax(0, 1fr); gap:10px; }
  .item-delete { grid-column:2; justify-self:start; padding:10px 14px; }
  .qty { width:62px; }
  .card { padding:16px; }
}
@media (prefers-color-scheme: dark) {
  body.dark-auto { --panel-solid:#0f172a; }
  body.dark-auto .segmented, body.dark-auto .community-card .preview, body.dark-auto .details { background:#020617; }
  body.dark-auto .seg.active, body.dark-auto .mini-list > div { background:#0f172a; color:#e5e7eb; }
}