:root { --bg:#0f1115; --panel:#171a21; --line:#262b36; --text:#e8eaf0; --muted:#8b93a7; --accent:#e1306c; --ok:#2ecc71; --warn:#f5a623; --dead:#6b7280; }
* { box-sizing: border-box; }
/* The `hidden` attribute is styled by the user agent at a specificity any class
   rule beats, so every `display:` declaration below would silently un-hide an
   element toggled with `el.hidden`. The selection bar and the hashtag panel both
   set `display:flex` and both rely on `hidden`; without this they render while
   empty. Keep this rule above them. */
[hidden] { display: none !important; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; }
button, input, select { font:inherit; color:inherit; }
.btn { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.5rem .9rem; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { border-color:#3a4150; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost { background:transparent; }
.muted { color:var(--muted); }
.pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.pill.ok { border-color:var(--ok); color:var(--ok); }
.pill.warn { border-color:var(--warn); color:var(--warn); }

/* place-content, not just place-items: with three auto rows and no explicit
   track sizing, `align-content` resolves to stretch, so the rows expand to fill
   100vh and the heading, blurb and button end up flung apart rather than
   forming one centred block. */
.signin { min-height:100vh; display:grid; place-content:center; place-items:center; text-align:center; padding:2rem; }
.signin h1 { font-size:2rem; margin:0 0 .5rem; }
.signin p { color:var(--muted); max-width:28rem; }

.status { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:5; }
.status-left, .status-mid, .status-right { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.status form { margin:0; }

.tabs { display:flex; gap:.25rem; padding:.75rem 1rem 0; border-bottom:1px solid var(--line); }
.tab { background:none; border:none; border-bottom:2px solid transparent; padding:.5rem .9rem; cursor:pointer; color:var(--muted); }
.tab.active { color:var(--text); border-bottom-color:var(--accent); }

.filters { display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem 1rem; }
.filters input, .filters select { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; }
.filters input[type=search] { flex:1; min-width:14rem; }
.check { display:flex; align-items:center; gap:.4rem; color:var(--muted); }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:.75rem; padding:0 1rem 6rem; }
/* Match the 1rem gutter every other section uses; without it the empty-state
   message sits flush against the viewport edge and reads as unfinished. */
#empty { padding:0 1rem; }
.tile { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.tile.selected { outline:2px solid var(--accent); }
.tile .thumb { display:block; width:100%; aspect-ratio:1; padding:0; border:none; background:#000; cursor:pointer; position:relative; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
.nothumb { display:grid; place-items:center; height:100%; color:var(--muted); }
.tile footer { display:flex; justify-content:space-between; gap:.5rem; padding:.4rem .6rem; font-size:12px; }
.tile .who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tick { position:absolute; top:.4rem; left:.4rem; z-index:2; }
.tick input { width:18px; height:18px; accent-color:var(--accent); }
.badges { position:absolute; right:.4rem; top:.4rem; display:flex; gap:.25rem; align-items:center; }
.badge { background:rgba(0,0,0,.65); border-radius:6px; padding:.1rem .4rem; font-size:11px; color:#fff; }
.badge.dead { background:var(--dead); }
.dot { width:10px; height:10px; border-radius:50%; border:1px solid #000; }
.dot.none { background:#c0392b; } .dot.requested { background:var(--warn); } .dot.granted { background:var(--ok); }

.selection { position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.6rem 1rem; display:flex; gap:.75rem; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:6; }

.toast { position:fixed; right:1rem; bottom:1rem; background:#222a38; border:1px solid var(--line); border-radius:10px; padding:.6rem .9rem; z-index:9; }

.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.75); display:grid; place-items:center; z-index:8; padding:1rem; }
/* position:relative is load-bearing: `.modal .close` is absolutely positioned,
   and without a positioned ancestor here it resolves against `.modal-backdrop`,
   which is fixed and viewport-sized — putting the close button in the top-right
   corner of the SCREEN, directly over the status bar's Sign out button. */
.modal { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px; width:min(1100px, 100%); max-height:95vh; display:grid; grid-template-columns:minmax(0,3fr) minmax(280px,2fr); overflow:hidden; }
.modal .media { background:#000; display:grid; place-items:center; position:relative; min-height:320px; }
.modal .media img, .modal .media video { max-width:100%; max-height:95vh; display:block; }
.modal .nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6); border:none; color:#fff; font-size:1.5rem; padding:.5rem .8rem; cursor:pointer; border-radius:8px; }
.modal .nav.prev { left:.5rem; } .modal .nav.next { right:.5rem; }
.modal .side { padding:1rem; overflow:auto; display:flex; flex-direction:column; gap:.8rem; }
.modal .caption { white-space:pre-wrap; max-height:12rem; overflow:auto; }
.modal .close { position:absolute; top:.5rem; right:.5rem; }
.permission { border-top:1px solid var(--line); padding-top:.8rem; display:flex; flex-direction:column; gap:.5rem; }
/* font:inherit — a textarea otherwise defaults to monospace, so the consent
   note renders in a different typeface from every other field beside it. */
.permission input, .permission textarea, .permission select { width:100%; font:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; }
.permission img { max-width:100%; border-radius:8px; border:1px solid var(--line); }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.hashtags { padding:.75rem 1rem; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:.6rem; }
.hashtags form { display:flex; gap:.5rem; }
.hashtags input { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; }
.hashtags ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.hashtags li { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:.25rem .4rem .25rem .8rem; display:flex; gap:.5rem; align-items:center; }
/* The synced tick and the remove control sit side by side in the same pill, so
   they must not read as the same thing. The tick is dimmed status; the button
   gets a real affordance — a hover target and a warning colour — so it is
   obviously the destructive action rather than a second status glyph. */
.hashtags li .synced { opacity:.45; cursor:default; }
.hashtags li button { background:none; border:none; cursor:pointer; color:var(--muted); border-radius:50%; width:1.4rem; height:1.4rem; line-height:1; display:grid; place-items:center; }
.hashtags li button:hover, .hashtags li button:focus-visible { background:rgba(255,255,255,.12); color:#fff; outline:none; }

@media (max-width: 800px) { .modal { grid-template-columns:1fr; max-height:100vh; } .modal .media { min-height:240px; } }