:root { --bg:#0f1419; --panel:#1a212b; --user:var(--link,#2563eb); --bot:var(--panel-2,#243140);
          --text:#e6edf3; --muted:#8b98a5; --accent:#3fb950; --border:#2d3744; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,'Segoe UI',Roboto,sans-serif; background:var(--bg);
         color:var(--text); min-height:100vh; }
main { max-width:860px; margin:0 auto; padding:22px 16px 60px; }
h1 { font-size:24px; margin:0 0 6px; }   /* base.css's h1 — one size site-wide */
.sub { color:var(--muted); font-size:13.5px; margin-bottom:18px; line-height:1.5; }
/* search + filters */
  #q { width:100%; padding:12px 15px; font-size:16px; font-family:inherit; color:var(--text);
       background:var(--panel); border:1px solid var(--border); border-radius:12px; }
#q:focus { border-color:var(--accent); }
#q:focus-visible { outline:2px solid var(--accent,#3fb950); outline-offset:2px; }
.chips { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 20px; }
/* The same pill everywhere: the same shape and height as the filters in „Документи", so they
   do not look like two different components on two neighbouring screens. */
.chip { background:var(--panel); border:1px solid var(--border); color:var(--muted);
        font-size:13px; display:inline-flex; align-items:center; gap:6px; min-height:36px;
        padding:0 13px; border-radius:999px; text-decoration:none; white-space:nowrap;
        cursor:pointer; font-family:inherit; }
.chip:hover { color:var(--text); }
.chip.on { border-color:var(--accent); color:var(--accent); background:var(--accent-bg,#16281a); }
/* sections + rows */
  h2 { font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px;
       margin:22px 0 8px; }
.rows { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.row { display:flex; align-items:center; gap:10px; padding:11px 13px; text-decoration:none;
         color:var(--text); border-bottom:1px solid var(--border); }
.row:last-child { border-bottom:none; }
.row:hover { background:var(--panel); }
.row .t { flex:1; min-width:0; font-size:14px; line-height:1.35; }
.row .meta { color:var(--muted); font-size:12px; white-space:nowrap; }
.badge { flex:none; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
           padding:3px 8px; border-radius:6px; background:var(--bot); color:var(--muted); }
.badge.закон, .badge.кодекс, .badge.конституция { color:var(--accent); background:var(--accent-bg,#16281a); }
.star { flex:none; background:none; border:none; font-size:16px; cursor:pointer; opacity:.4;
          padding:2px 4px; line-height:1; }
.star:hover { opacity:1; }
.star.on { opacity:1; }
/* The bell sits beside the star in „Моите закони". Off is the state worth showing plainly —
   a struck-through bell that looks disabled reads as „broken", not as „you turned this off". */
.bell { flex:none; background:none; border:none; font-size:15px; cursor:pointer; opacity:.35;
        padding:2px 4px; line-height:1; }
.bell:hover { opacity:1; }
.bell.on { opacity:.85; }
.empty { color:var(--muted); font-size:13.5px; padding:16px; text-align:center; }
.count { color:var(--muted); font-size:12.5px; margin:8px 2px; }
.act { color:var(--muted); }
nav .lbl { margin-left:5px; }
@media (max-width:600px){
    .row .meta { display:none; }
    header { padding:9px 12px; gap:6px; }
    nav { gap:1px; margin-left:auto; }
    nav a { padding:8px 9px; font-size:17px; }   /* icon-only, comfortable tap target */
    nav .lbl { display:none; }                    /* hide text labels so the nav fits */
    .brand .bname { font-size:15px; }
  }

/* Following: the bell switches alerts on, ⚙ narrows them to named provisions, and topics are
   the other half — „tell me when anything about this moves". */
.mine-hint { color:var(--muted,#8b98a5); font-size:12.5px; line-height:1.5; margin:2px 0 10px; max-width:70ch; }
.row .scope { background:none; border:1px solid var(--border,#2d3744); border-radius:8px;
  color:var(--muted,#8b98a5); font:inherit; font-size:11.5px; cursor:pointer; padding:2px 8px;
  margin-left:6px; flex:none; white-space:nowrap; }
.row .scope:hover { color:var(--accent,#3fb950); border-color:var(--accent,#3fb950); }
.row .scope.on { color:var(--accent,#3fb950); border-color:var(--accent,#3fb950); }
.topics-h { margin-top:24px; }
.topic { display:flex; align-items:center; gap:10px; padding:9px 12px; margin:6px 0;
  border:1px solid var(--border,#2d3744); border-radius:10px; background:var(--panel,#1a212b); }
.topic .t { flex:1; font-size:13.5px; }
.topic .del { background:none; border:0; color:var(--muted,#8b98a5); font-size:18px; cursor:pointer;
  padding:2px 6px; border-radius:6px; line-height:1; }
.topic .del:hover { color:var(--danger,#f85149); }
.topic-add { display:flex; gap:8px; margin:10px 0 0; flex-wrap:wrap; }
.topic-add input { flex:1; min-width:200px; font:inherit; font-size:13.5px; padding:9px 11px;
  border-radius:9px; background:var(--inset,#0d1218); border:1px solid var(--border,#2d3744); color:var(--text,#e6edf3); }
.topic-add button { background:var(--accent,#3fb950); color:var(--on-accent,#06210c); border:0;
  border-radius:9px; padding:0 15px; min-height:40px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.topic-err { color:var(--danger,#f85149); font-size:12.5px; min-height:16px; margin-top:4px; }