/* ===== Web‑App Polish (no changes to colors.js) ===== */

/* Buttons & focus */
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:999px; background:transparent; border:1px solid rgba(0,0,0,.08); cursor:pointer; }
.btn-ghost:hover { background:rgba(0,0,0,.04); }
.btn-primary, .btn-secondary { padding:.55rem .85rem; border-radius:10px; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:#1a73e8; color:#fff; }
.btn-primary:hover { filter:brightness(.96); }
.btn-secondary { background:transparent; border-color:rgba(0,0,0,.12); }
.btn-secondary:hover { background:rgba(0,0,0,.04); }
.btn-ghost:focus, .btn-primary:focus, .btn-secondary:focus, a:focus, button:focus, .filter:focus {
  outline: 2px solid rgba(26,115,232,.6); outline-offset:2px;
}

.icon-right svg { margin-left:.25rem; }

/* Modal */
.modal.is-hidden { display:none; }
.modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-card { position:relative; width:min(720px, 92vw); background:#fff; border-radius:16px; box-shadow:0 10px 35px rgba(0,0,0,.2); display:flex; flex-direction:column; max-height:90vh; }
.modal-head, .modal-foot { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.06); }
.modal-foot { border-top:1px solid rgba(0,0,0,.06); border-bottom:none; }
.modal-body { padding:1rem 1.25rem; overflow:auto; }
.icon-btn { background:transparent; border:none; padding:.5rem; border-radius:8px; cursor:pointer; }
.icon-btn:hover { background:rgba(0,0,0,.06); }
.divider { height:1px; background:rgba(0,0,0,.08); margin:1rem 0; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.input-sm { width:4.5rem; padding:.35rem .5rem; border:1px solid rgba(0,0,0,.2); border-radius:8px; }

/* Cards & contrast */
.card { background:#fff; color:#111; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.card .muted { color:rgba(0,0,0,.65); }
.card.inset { background:#f8f9fb; color:#101213; border-color: rgba(0,0,0,.05); }

/* Plan warning */
.plan-warning { display:flex; gap:.9rem; align-items:flex-start; padding:1rem; }
.plan-warning__icon svg { width:28px; height:28px; }
.row { display:flex; align-items:center; gap:.5rem; }
.chip { display:inline-flex; align-items:center; font-weight:700; font-size:.75rem; border-radius:999px; padding:.15rem .55rem; border:1px solid transparent; }
.chip-warn { background:rgba(255, 180, 0, .12); color:#7a4c00; border-color:rgba(255, 180, 0, .25); }
.actions { display:flex; gap:.5rem; margin-top:.5rem; }

/* Tracked items */
.items { display:grid; gap:.75rem; }
.item { display:grid; grid-template-columns: 1fr auto; gap:.75rem; align-items:center; padding:.75rem .9rem; border:1px solid rgba(0,0,0,.06); border-radius:12px; background:#fff; }
.item .meta { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; }
.item .title { font-weight:600; }
.item .url { font-size:.9rem; color:rgba(0,0,0,.55); }
.item .actions { display:flex; align-items:center; gap:.5rem; }
.item .price { font-weight:700; }

/* Trust badges */
.trust-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.85rem; line-height:1; border:1px solid transparent; }
.trust-verified { background:rgba(50, 180, 90, .12); color:#176a39; border-color:rgba(50, 180, 90, .25); }
.trust-caution  { background:rgba(255, 180, 0, .12); color:#7a4c00; border-color:rgba(255, 180, 0, .25); }
.trust-risky    { background:rgba(220, 30, 50, .12); color:#7a1020; border-color:rgba(220, 30, 50, .25); }
.trust-unknown  { background:rgba(100, 110, 130, .10); color:#2f3542; border-color:rgba(100, 110, 130, .22); }
.trust-badge svg { width:14px; height:14px; }

/* Filter row */
.filter-row { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.filter-row .filter { padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(0,0,0,.1); background:#fff; font-weight:600; cursor:pointer; }
.filter-row .filter[aria-pressed="true"] { background:#1a73e8; color:#fff; border-color:transparent; }

/* Layout utilities */
.container { width:min(1100px, 92vw); margin-inline:auto; }
.section { padding:1.25rem 0; }
.section > h3, .section > h4 { margin-bottom:.75rem; }
.stack-sm > * + * { margin-top:.5rem; }
.stack-md > * + * { margin-top:.85rem; }
.stack-lg > * + * { margin-top:1.25rem; }

/* Header notif dot (toggle class .is-off on #notifBtn if push disabled) */
.btn-ghost { position:relative; }
.btn-ghost.is-off::after { content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:#d93025; }