/* bins — minimal mobile-first stylesheet */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-display: "Black Ops One", system-ui;
  --bg: #f8f7f4;
  --surface: #fff;
  --border: #e2e0db;
  --text: #1a1917;
  --muted: #7a786f;
  --accent: #2a6ef5;
  --accent-hover: #1d5cde;
  --danger: #d9362b;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --header-h: 56px;
}

html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
}

/* ── Site header ────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
}

/* Logo / menu trigger */
/* logo-wrap stretches to fill the full header height; button fills it entirely
   so the whole left column is a single, easy-to-hit tap target on mobile. */
.logo-wrap { position: relative; flex-shrink: 0; align-self: stretch; display: flex; }
.logo-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 0 12px;      /* height comes from align-self: stretch, not padding */
  align-self: stretch;
  border-radius: 0;
  font-family: var(--font-display); font-size: 1.25rem;
  color: var(--text); letter-spacing: .03em; line-height: 1;
  white-space: nowrap;
}
.logo-btn:hover  { background: var(--bg); }
.logo-hamburger { font-size: 1.3rem; color: var(--muted); }

/* Verbose dropdown menu */
.logo-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 500; min-width: 260px; padding: 4px 0;
  max-height: calc(100dvh - var(--header-h) - 12px); overflow-y: auto;
}
.logo-menu-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; text-decoration: none; color: var(--text);
  font-size: 0.9rem; background: none; border: none;
  width: 100%; cursor: pointer; text-align: left;
}
.logo-menu-item:hover    { background: var(--bg); }
.logo-menu-item--btn     { font-family: inherit; }
.lmi-icon     { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0;
                color: var(--muted); margin-top: 1px; line-height: 1; }
.lmi-body     { display: flex; flex-direction: column; gap: 1px; }
.lmi-body strong { font-size: 0.88rem; font-weight: 600; }
.lmi-desc     { font-size: 0.74rem; color: var(--muted); line-height: 1.3; }
.logo-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.logo-menu-user    { display: block; padding: 6px 14px; font-size: 0.78rem; color: var(--muted); }
.logo-menu-build   { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.logo-menu-signout { margin: 0; }

/* Search */
.search-bar { flex: 1; position: relative; }
.search-bar input {
  width: 100%; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.93rem; background: var(--bg); outline: none; line-height: 1.4;
}
.search-bar input:focus { border-color: var(--accent); }
#search-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); z-index: 200;
}
.search-suggest-list { list-style: none; }
.search-suggest-list a {
  display: block; padding: 10px 14px;
  text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-suggest-list a:hover { background: var(--bg); }

/* Quick-nav icons */
.site-nav {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  text-decoration: none; color: var(--muted); font-size: 1.25rem; line-height: 1;
}
.nav-icon:hover { color: var(--text); background: var(--bg); }
.nav-icon-img   { width: 1.1rem; height: 1.1rem; display: block; object-fit: contain; opacity: 0.7; }
.nav-icon:hover .nav-icon-img { opacity: 1; }

/* Display font — page titles, bin names, section display headers */
#main-content h1,
.page-title,
.bin-name-display,
.item-title-display {
  font-family: var(--font-display);
  font-weight: 400; /* Black Ops One has only weight 400 */
  letter-spacing: .02em;
}

/* Connect / QR page */
.connect-page { max-width: 700px; margin: 0 auto; }
.connect-header { margin-bottom: 28px; }
.connect-header h1 { font-size: 1.5rem; margin-bottom: 6px; }
.connect-header p { color: var(--muted); }
.qr-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.qr-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow);
}
.qr-code canvas, .qr-code img { display: block; border-radius: 4px; }
.qr-url {
  font-family: monospace; font-size: 0.95rem;
  color: var(--accent); word-break: break-all; text-align: center;
}
.qr-hint { color: var(--muted); font-size: 0.8rem; text-align: center; }
.connect-notice {
  margin-top: 28px; padding: 14px 18px;
  background: #fff8e1; border: 1px solid #ffe082;
  border-radius: var(--radius); font-size: 0.9rem;
}
.connect-notice code {
  background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; font-size: 0.85rem;
}

/* Main content */
#main-content { max-width: 960px; margin: 0 auto; padding: 20px 16px 80px; }

/* FAB */
.fab {
  position: fixed; bottom: 24px; right: 20px; z-index: 50;
  width: 56px; height: 56px;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(42,110,245,.35);
}
.fab:hover { background: var(--accent-hover); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-large { padding: 14px 24px; font-size: 1.05rem; }

/* Dashboard */
.dashboard { display: flex; flex-direction: column; gap: 24px; }
.stats-bar {
  display: flex; gap: 20px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat { color: var(--muted); font-size: 0.9rem; }
.stat strong { color: var(--text); }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Dashboard reminders widget */
.dashboard-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.dashboard-section-title a { color: inherit; text-decoration: none; }
.dashboard-section-title a:hover { text-decoration: underline; }
.dashboard-reminders-count { font-size: 0.72rem; font-weight: 700; background: var(--accent); color: #fff; border-radius: 20px; padding: 1px 7px; }
.dashboard-reminder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dashboard-reminder-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dashboard-reminder-item:last-child { border-bottom: none; }
.dashboard-reminder-item--overdue { background: #fff5f5; }
.dashboard-reminder-item--today   { background: #fffbeb; }
.dashboard-reminder-thumb { flex-shrink: 0; }
.dashboard-reminder-thumb img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; display: block; }
.dashboard-reminder-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dashboard-reminder-name  { font-size: 0.88rem; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-reminder-name:hover { text-decoration: underline; }
.dashboard-reminder-note  { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-reminder-date  { flex-shrink: 0; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dashboard-reminder-date--overdue { color: #dc2626; font-weight: 700; }
.dashboard-reminder-date--today   { color: #d97706; font-weight: 700; }

.recent-items h2 { font-size: 1rem; color: var(--muted); margin-bottom: 12px; }
.item-strip {
  display: flex; gap: 12px; overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.item-card-small {
  flex: 0 0 120px;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--text);
}
.item-card-small img, .item-card-small .no-photo {
  width: 120px; height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.item-name { font-size: 0.85rem; line-height: 1.3; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bin-badge {
  font-size: 0.75rem; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
  align-self: flex-start;
}

/* Stub pages */
.stub-page { padding: 40px 0; }
.stub-page h1 { margin-bottom: 8px; }
.stub-page p { color: var(--muted); margin-bottom: 20px; }

/* Empty state */
.empty-state { text-align: center; padding: 48px 0; color: var(--muted); }
.empty-state a { color: var(--accent); }

/* Capture page */
.capture-page { max-width: 480px; margin: 0 auto; }
.capture-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.capture-header h1 { font-size: 1.5rem; }
.back-link { color: var(--accent); text-decoration: none; font-size: 0.9rem; }

.capture-form { display: flex; flex-direction: column; gap: 20px; }

/* Photo picker */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.photo-pick-label { display: block; cursor: pointer; }
.photo-pick-area {
  height: 220px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: var(--surface);
  transition: border-color 0.15s;
}
.photo-pick-area:hover, .photo-pick-label:focus-within .photo-pick-area {
  border-color: var(--accent);
}
.photo-pick-icon { font-size: 2.5rem; }
.photo-pick-hint { color: var(--muted); font-size: 0.9rem; }
.photo-preview-img {
  width: 100%; max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius);
  background: #000;
}
.hidden { display: none !important; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.9rem; font-weight: 500; }
.field input, .field select {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--surface);
  width: 100%;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,110,245,.12);
}
.required { color: var(--danger); }

/* Tag chips */
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.tag-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.12s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* Action buttons */
.capture-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.btn-full { width: 100%; justify-content: center; }
.btn-secondary { background: var(--surface); }

/* Social / OAuth buttons — shared base */
.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 16px; margin-bottom: 0.55rem;
  font-size: 0.95rem; font-weight: 500; text-decoration: none;
  border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
}
.btn-oauth:last-of-type { margin-bottom: 0; }
/* Google */
.btn-google {
  background: #fff; color: #3c4043; border-color: #dadce0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn-google:hover  { background: #f8f9fa; box-shadow: 0 2px 6px rgba(0,0,0,.12); color: #3c4043; text-decoration: none; }
/* GitHub */
.btn-github { background: #24292f; color: #fff; border-color: #24292f; }
.btn-github:hover  { background: #32383f; color: #fff; text-decoration: none; }
/* Apple */
.btn-apple  { background: #000;    color: #fff; border-color: #000; }
.btn-apple:hover   { background: #1a1a1a; color: #fff; text-decoration: none; }
/* Facebook */
.btn-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn-facebook:hover { background: #166fe5; color: #fff; text-decoration: none; }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.25rem; color: var(--muted); font-size: 0.82rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Wiki ───────────────────────────────────────────────────────────────── */
.wiki-wrap {
  display: flex; align-items: flex-start;
  max-width: 1100px; margin: 0 auto; padding: 0 16px 60px;
  gap: 32px;
}

/* Sidebar */
.wiki-sidebar {
  flex: 0 0 180px; position: sticky; top: calc(var(--header-h) + 16px);
  padding-top: 24px;
}
.wiki-sidebar-head {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding: 0 8px 8px;
}
.wiki-sidebar-link {
  display: block; padding: 5px 8px; border-radius: 5px;
  font-size: 0.875rem; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiki-sidebar-link:hover         { background: var(--bg); color: var(--text); text-decoration: none; }
.wiki-sidebar-link--active       { background: var(--bg); font-weight: 600; color: var(--accent); }
.wiki-sidebar-divider            { height: 1px; background: var(--border); margin: 8px 0; }

/* Main content */
.wiki-content { flex: 1; min-width: 0; padding-top: 24px; }

/* Prose — styles for markdown-it output */
.prose h1 { font-size: 1.7rem; font-weight: 700; margin: 0 0 0.6rem; line-height: 1.2; }
.prose h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.prose h3 { font-size: 1rem;   font-weight: 600; margin: 1.5rem 0 0.4rem; }
.prose p  { margin: 0 0 1rem; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 1rem 1.4rem; }
.prose li { margin-bottom: 0.3rem; line-height: 1.55; }
.prose a  { color: var(--accent); }
.prose a:hover { text-decoration: underline; }
.prose code {
  font-family: ui-monospace, monospace; font-size: 0.84em;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.prose pre {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  overflow-x: auto; margin: 0 0 1.2rem;
}
.prose pre code { background: none; border: none; padding: 0; font-size: 0.85rem; }
.prose blockquote {
  border-left: 3px solid var(--accent); margin: 0 0 1rem;
  padding: 4px 0 4px 16px; color: var(--muted);
}
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.prose table { border-collapse: collapse; width: 100%; margin-bottom: 1.2rem; font-size: 0.9rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; }
.prose th { background: var(--bg); font-weight: 600; }
.prose strong { font-weight: 600; }

/* Comments & feedback */
.wiki-comments-intro { color: var(--muted); margin-bottom: 1.5rem; }
.wiki-feedback-form  { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 2rem; }
.wiki-feedback-form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.wiki-feedback-select { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 0.9rem; }
.wiki-feedback-name   { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 0.9rem; }
.wiki-feedback-msg    { display: block; width: 100%; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 0.9rem; resize: vertical; font-family: inherit; }
.wiki-feedback-list   { display: flex; flex-direction: column; gap: 12px; }
.wiki-feedback-item   { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.wiki-feedback-meta   { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.wiki-feedback-badge  { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; }
.wiki-feedback-badge--comment { background: #e8f0fe; color: #1a56db; }
.wiki-feedback-badge--request { background: #fef3c7; color: #92400e; }
.wiki-feedback-badge--bug     { background: #fee2e2; color: #991b1b; }
.wiki-feedback-author { font-size: 0.85rem; font-weight: 600; }
.wiki-feedback-date   { font-size: 0.78rem; color: var(--muted); margin-left: auto; }
.wiki-feedback-message { margin: 0; font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.wiki-empty { color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }

/* Replies (threaded comments) */
.wiki-replies         { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.wiki-reply           { font-size: 0.88rem; }
.wiki-reply--admin    { border-left: 2px solid var(--accent); padding-left: 10px; margin-left: -12px; }
.wiki-reply-meta      { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.wiki-reply-admin-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 7px; border-radius: 20px; }
.wiki-sidebar-admin-link { color: var(--muted); }
.wiki-badge-pending   { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: middle; margin-left: 4px; }

/* ── Wiki admin panel ───────────────────────────────────────────────────── */
.wadmin-card            { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.wadmin-section-title   { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }

/* Approval toggle */
.wadmin-toggle-form     { margin: 0; }
.wadmin-toggle-label    { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.wadmin-toggle-desc     { font-size: 0.82rem; color: var(--muted); margin: 2px 0 0; }
.wadmin-toggle-btn      { flex-shrink: 0; padding: 8px 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); font-weight: 700; font-size: 0.85rem; color: var(--muted); cursor: pointer; min-width: 60px; text-align: center; }
.wadmin-toggle-btn--on  { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Grant editor */
.wadmin-grant-form    { display: flex; flex-direction: column; gap: 10px; }
.wadmin-grant-input   { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; background: var(--bg); }
.wadmin-grant-actions { display: flex; gap: 8px; }

/* Comment cards in admin */
.wadmin-comment            { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; background: var(--bg); }
.wadmin-comment--pending   { border-color: #f59e0b; background: #fffbeb; }
.wadmin-comment--admin-reply { opacity: 0.75; }
.wadmin-comment-meta       { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.wadmin-comment-author     { font-size: 0.85rem; font-weight: 600; }
.wadmin-comment-date       { font-size: 0.75rem; color: var(--muted); margin-left: auto; }
.wadmin-comment-body       { margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* Action buttons */
.wadmin-actions        { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.wadmin-btn            { padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--text); }
.wadmin-btn--approve   { background: #16a34a; color: #fff; border-color: #16a34a; }
.wadmin-btn--delete    { background: #ef4444; color: #fff; border-color: #ef4444; }
.wadmin-btn--reply     { background: var(--bg); color: var(--accent); border-color: var(--accent); list-style: none; }
.wadmin-btn--sm        { padding: 4px 10px; font-size: 0.78rem; }
.wadmin-reply-details  { display: inline; }
.wadmin-reply-details summary { display: inline-flex; align-items: center; }
.wadmin-reply-form     { margin-top: 6px; }

/* Nested replies in admin */
.wadmin-nested-replies      { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.wadmin-nested-reply        { font-size: 0.85rem; }
.wadmin-nested-reply--admin { border-left: 2px solid var(--accent); padding-left: 8px; margin-left: -12px; }
.wadmin-nested-author       { font-weight: 600; font-size: 0.82rem; margin-right: 6px; }

/* Mobile: stack sidebar above content */
@media (max-width: 640px) {
  .wiki-wrap    { flex-direction: column; gap: 0; padding: 0 12px 40px; }
  .wiki-sidebar { position: static; flex: none; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
  .wiki-sidebar-head    { display: none; }
  .wiki-sidebar-divider { display: none; }
  .wiki-sidebar-link    { padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; font-size: 0.8rem; white-space: nowrap; }
  .wiki-sidebar-link--active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .wiki-content { padding-top: 0; }
}

/* Photo gallery (item detail) */
.gallery-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.gallery-item {
  flex: 0 0 auto;
  border: none; background: none; padding: 0; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden;
}
.gallery-item img {
  display: block;
  height: 200px; width: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Lightbox */
.lightbox {
  border: none; background: transparent;
  padding: 0; margin: 0;
  width: 100vw; height: 100dvh;
  max-width: 100vw; max-height: 100dvh;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(0,0,0,.92); }

.lightbox-viewport {
  width: 100vw;
  height: calc(100dvh - 52px); /* leave room for toolbar */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: default;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.lightbox-viewport img {
  display: block;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.05s linear;
  pointer-events: none;
  border-radius: 4px;
}

/* Toolbar */
.lightbox-toolbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.lb-btn {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lb-btn:hover { background: rgba(255,255,255,.3); }
.lb-close { margin-left: 16px; background: rgba(220,50,50,.4); }
.lb-close:hover { background: rgba(220,50,50,.7); }

/* Webcam */
.webcam-section { display: flex; flex-direction: column; gap: 12px; }
.webcam-video { width: 100%; border-radius: var(--radius); background: #000; }
.webcam-controls { display: flex; gap: 10px; }
.webcam-shutter { flex: 1; }

/* Photo gallery item wrap (context toggles) */
.gallery-item-wrap { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; position: relative; }
.photo-actions { display: flex; gap: 4px; justify-content: center; }
.btn-micro {
  padding: 3px 8px; font-size: 0.75rem;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); cursor: pointer; white-space: nowrap;
}
.btn-micro:hover { border-color: var(--accent); }
.btn-micro.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-danger-micro { color: var(--danger); border-color: var(--danger); background: none; }
.btn-danger-micro:hover { background: var(--danger); color: #fff; }

/* Photo context badge (overlaid on thumbnail) */
.photo-context-badge {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 7px; border-radius: 10px;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  pointer-events: none;
}
.photo-context-inside  { background: #e8f4fd; color: #1565c0; }
.photo-context-outside { background: #e8f5e9; color: #2e7d32; }

/* Quantity badge */
.quantity-badge {
  font-size: 1rem; color: var(--muted); font-weight: 400; margin-left: 6px;
}
.qty-badge {
  font-size: 0.75rem; color: var(--muted); margin-left: 4px; font-weight: 400;
}

/* Edit mode photo grid */
.edit-photos { margin-bottom: 24px; }
.edit-photos h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.edit-photo-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.edit-photo-card { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.edit-photo-card img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius); }
.edit-photo-controls { display: flex; gap: 4px; }

/* Voice recordings */
.recordings-list { display: flex; flex-direction: column; gap: 10px; }
.recording-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recording-item audio { flex: 1; min-width: 0; }
.rec-label { font-size: 0.85rem; color: var(--muted); }
.rec-label-row { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 120px; }
.rec-label-input {
  flex: 1; font-size: 0.85rem; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 4px; padding: 2px 5px;
  transition: border-color 0.15s;
}
.rec-label-input:hover  { border-color: var(--border); }
.rec-label-input:focus  { border-color: var(--accent, #4f8ef7); outline: none; background: var(--surface); }
.rec-label-input::placeholder { color: var(--muted); font-style: italic; }
.rec-label-saved { font-size: 0.8rem; color: var(--success, #2a9d2a); white-space: nowrap; }
.voice-controls { display: flex; align-items: center; gap: 10px; }
.record-timer { font-variant-numeric: tabular-nums; color: var(--danger); font-weight: 600; }
.playback-preview { width: 100%; margin-bottom: 8px; }
.form-row { display: flex; gap: 10px; margin-top: 8px; }
.field-input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.95rem; background: var(--surface); width: 100%; margin-bottom: 6px;
}

/* QR code SVG (server-generated, no JS needed) */
.qr-code svg { display: block; border-radius: 4px; }

/* ── Browse page ────────────────────────────────────────── */
.browse-page        { display: flex; flex-direction: column; gap: 14px; }
.filter-bar         { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.filter-form        { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; }
.filter-search      { flex: 1; min-width: 140px; padding: 7px 12px;
                      border: 1px solid var(--border); border-radius: var(--radius);
                      font-size: 0.9rem; background: var(--bg); }
.filter-select      { min-width: 130px; padding: 7px 10px;
                      border: 1px solid var(--border); border-radius: var(--radius);
                      background: var(--surface); font-size: 0.9rem; }
.filter-checkbox    { display: flex; align-items: center; gap: 5px; font-size: 0.88rem;
                      color: var(--muted); cursor: pointer; white-space: nowrap; }
.filter-chips       { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip        { display: inline-flex; align-items: center; gap: 4px;
                      padding: 4px 10px; background: var(--accent);
                      color: #fff; border-radius: 999px; font-size: 0.82rem;
                      text-decoration: none; }
.chip-remove        { font-size: 0.9rem; opacity: 0.7; }
.browse-expand-btn  { flex-shrink: 0; }

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* ── Item card ─────────────────────────────────────────────── */
.item-card          { display: flex; flex-direction: column;
                      background: var(--surface); border: 1px solid var(--border);
                      border-radius: var(--radius); overflow: hidden;
                      text-decoration: none; color: var(--text);
                      transition: box-shadow 0.15s; }
.item-card:hover    { box-shadow: 0 3px 10px rgba(0,0,0,.1); }

/* Name always at top */
.item-card-name     { padding: 7px 10px 5px; font-size: 0.88rem; font-weight: 600;
                      line-height: 1.3; overflow: hidden; display: -webkit-box;
                      -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Photo containers ──────────────────────────────────────── */
/* Default: show "all" container, hide mode-specific ones */
.icp-outside,
.icp-inside         { display: none; }

/* Primary image in any container */
.icp-main           { aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.icp-main img       { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Remaining images for gallery items (2-col strip below primary) */
.icp-rest           { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
                      gap: 2px; margin-top: 2px; }
.icp-rest img       { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Placeholder when no photo exists for the current mode */
.icp-empty          { aspect-ratio: 1; display: flex; align-items: center;
                      justify-content: center; font-size: 2rem;
                      background: var(--bg); }
.icp-empty--dim     { font-size: 0.72rem; color: var(--muted); }

/* ── Photo mode overrides (class set by JS on #item-grid) ───── */
.item-grid--outside .icp-all,
.item-grid--outside .icp-inside  { display: none; }
.item-grid--outside .icp-outside { display: block; }

.item-grid--inside .icp-all,
.item-grid--inside .icp-outside  { display: none; }
.item-grid--inside .icp-inside   { display: block; }

.item-grid--none .icp-all,
.item-grid--none .icp-outside,
.item-grid--none .icp-inside     { display: none; }

/* ── Card footer: tags + bin ───────────────────────────────── */
.item-info          { padding: 5px 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.item-bin           { font-size: 0.75rem; color: var(--muted); }
/* Tags: always reserve one line of space; expands naturally with more tags */
.item-tags          { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px;
                      align-content: flex-start; }

/* ── Tag pills (shared) ────────────────────────────────────── */
.tag-pill           { font-size: 0.72rem; padding: 2px 7px;
                      background: var(--bg); border: 1px solid var(--border);
                      border-radius: 20px; color: var(--muted); }
.tag-pills          { display: flex; flex-wrap: wrap; gap: 4px; }
a.tag-pill--link,
.tag-pill--link     { text-decoration: none; cursor: pointer;
                      transition: background 0.12s, color 0.12s, border-color 0.12s; }
a.tag-pill--link:hover,
.tag-pill--link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-pill--more     { cursor: default; font-style: italic; }

.load-more-container { text-align: center; padding: 16px 0; }

/* Insurance button — active state (has_insurance = 1) */
.btn-insurance-active {
  background: #b8860b;
  color: #fff;
  border-color: #8a6408;
  font-weight: 700;
}
.btn-insurance-active:hover {
  background: #9a7009;
}

/* ── Location picker combobox ───────────────────────────────── */
.location-input-row { display: flex; align-items: center; gap: 6px; }
.loc-text-input     { flex: 1; }
.loc-clear-btn      { flex: none; background: none; border: 1px solid var(--border, #ccc);
                      border-radius: 4px; padding: 4px 8px; cursor: pointer;
                      color: var(--text-muted, #666); font-size: 0.85rem;
                      display: none; align-items: center; justify-content: center; }
.loc-clear-btn:hover { background: var(--danger-light, #fee); color: var(--danger, #c00); }
.location-hint      { color: var(--text-muted, #888); font-size: 0.78rem; margin: 4px 0 0; }
.location-hint kbd  { background: var(--surface, #f0f0f0); border: 1px solid var(--border, #ccc);
                      border-radius: 3px; padding: 1px 4px; font-size: 0.85em; }

/* QR context notice inside item form */
.qr-assign-notice   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                      background: var(--surface, #f4f4f4); border: 1px solid var(--border, #ddd);
                      border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; }
.qr-number-chip     { background: var(--primary, #333); color: #fff;
                      font-weight: 700; font-size: 1rem;
                      padding: 3px 10px; border-radius: 12px; }

/* Inside/outside context buttons in edit-photo-card */
.edit-photo-context { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.edit-photo-context-row { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }

/* Out-of-DOM forms used only for HTML5 form= attribute cross-referencing */
.hidden-form { display: none; }

/* ── Photo timeline mode (item-detail + qr/found) ───────────── */
.photo-timeline     { display: flex; flex-direction: column; gap: 8px; }

.tl-main-wrap       { position: relative; background: #000; border-radius: 8px; overflow: hidden;
                      cursor: zoom-in; }
.tl-main-img        { display: block; width: 100%; max-height: 480px;
                      object-fit: contain; border-radius: 8px; }

/* Date + counter overlay on main image */
.tl-overlay         { position: absolute; bottom: 0; left: 0; right: 0;
                      display: flex; justify-content: space-between; align-items: center;
                      padding: 6px 10px;
                      background: linear-gradient(transparent, rgba(0,0,0,0.55));
                      pointer-events: none; }
.tl-date            { color: #fff; font-size: 0.78rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.tl-counter         { color: rgba(255,255,255,0.85); font-size: 0.75rem; }
.tl-expand          { pointer-events: all; background: rgba(0,0,0,0.45); border: none;
                      color: #fff; font-size: 1rem; width: 32px; height: 32px;
                      border-radius: 4px; cursor: pointer; display: flex;
                      align-items: center; justify-content: center; }
.tl-expand:hover    { background: rgba(0,0,0,0.7); }

/* ‹ › nav buttons */
.tl-nav             { display: flex; align-items: center; gap: 8px;
                      justify-content: center; margin-top: 4px; }
.tl-prev,
.tl-next            { background: var(--surface, #f0f0f0); border: 1px solid var(--border, #ddd);
                      border-radius: 6px; padding: 6px 14px; font-size: 1.2rem;
                      cursor: pointer; line-height: 1; }
.tl-prev:hover,
.tl-next:hover      { background: var(--surface-hover, #e0e0e0); }
.tl-prev:disabled,
.tl-next:disabled   { opacity: 0.35; cursor: default; }

/* Horizontal scrollable thumbnail strip */
.tl-strip           { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px;
                      scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tl-strip::-webkit-scrollbar { height: 4px; }
.tl-strip::-webkit-scrollbar-thumb { background: var(--border, #ccc); border-radius: 2px; }

.tl-thumb           { flex: none; display: flex; flex-direction: column; align-items: center;
                      gap: 3px; background: none; border: 2px solid transparent;
                      border-radius: 6px; padding: 2px; cursor: pointer;
                      scroll-snap-align: start; transition: border-color 0.15s; }
.tl-thumb img       { width: 64px; height: 64px; object-fit: cover;
                      border-radius: 4px; display: block; }
.tl-thumb.tl-active { border-color: var(--primary, #333); }
.tl-thumb:hover:not(.tl-active) { border-color: var(--border, #ccc); }

.tl-label           { font-size: 0.65rem; color: var(--text-muted, #888);
                      white-space: nowrap; max-width: 64px;
                      overflow: hidden; text-overflow: ellipsis; }

/* "Newest" hint shown below main image when only one photo */
.tl-hint            { font-size: 0.78rem; color: var(--text-muted, #888);
                      text-align: center; padding: 2px 0; }

/* ── QR found page — compact timeline ────────────────────────── */
.qr-tl-wrap         { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.qr-tl-main-wrap    { position: relative; background: #000; border-radius: 8px; overflow: hidden;
                      cursor: zoom-in; }
.qr-tl-main         { display: block; width: 100%; max-height: 360px;
                      object-fit: contain; border-radius: 8px; }

.qr-tl-nav          { display: flex; align-items: center; gap: 8px;
                      justify-content: center; margin-top: 4px; }
.qr-tl-btn          { background: var(--surface, #f0f0f0); border: 1px solid var(--border, #ddd);
                      border-radius: 6px; padding: 5px 12px; font-size: 1.2rem;
                      cursor: pointer; line-height: 1; }
.qr-tl-btn:hover    { background: var(--surface-hover, #e0e0e0); }
.qr-tl-counter      { font-size: 0.8rem; color: var(--text-muted, #888); min-width: 48px;
                      text-align: center; }

.qr-tl-strip        { display: flex; gap: 5px; overflow-x: auto; padding: 3px 0 5px;
                      -webkit-overflow-scrolling: touch; }
.qr-tl-strip::-webkit-scrollbar { height: 3px; }
.qr-tl-strip::-webkit-scrollbar-thumb { background: var(--border, #ccc); border-radius: 2px; }

.qr-tl-thumb        { flex: none; background: none; border: 2px solid transparent;
                      border-radius: 5px; padding: 1px; cursor: pointer;
                      transition: border-color 0.15s; }
.qr-tl-thumb img    { width: 52px; height: 52px; object-fit: cover;
                      border-radius: 3px; display: block; }
.qr-tl-thumb.qr-tl-active { border-color: var(--primary, #333); }
.qr-tl-thumb:hover:not(.qr-tl-active) { border-color: var(--border, #ccc); }

/* Item edit — sticky action bar */
.item-form-actions { margin-bottom: 12px; }

/* Label badge — shown on /items/new?label=N */
.label-badge-row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                     padding: 10px 14px; margin-bottom: 12px;
                     background: var(--surface-alt, #f4f6f8);
                     border: 1px solid var(--border, #ddd); border-radius: 10px; }
.label-badge       { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.label-badge-hint  { font-size: 0.82rem; color: var(--muted, #888); }

/* Photo display mode toggle (item-edit form) */
.mode-toggle-row    { display: flex; gap: 12px; flex-wrap: wrap; }
.mode-option        { display: flex; align-items: center; gap: 6px; cursor: pointer;
                      padding: 8px 12px; border: 1px solid var(--border, #ddd);
                      border-radius: 6px; transition: border-color 0.15s; }
.mode-option:has(input:checked) { border-color: var(--primary, #333);
                                   background: var(--surface, #f8f8f8); }
.mode-option input  { margin: 0; }
.mode-option-label  { display: flex; align-items: center; gap: 5px; }
.mode-icon          { font-size: 1.1rem; }
.field-hint         { display: block; font-size: 0.78rem; color: var(--text-muted, #888);
                      margin-top: 5px; line-height: 1.4; }

/* ── QR new-item creation form ───────────────────────────────── */
.qr-new-page        { max-width: 600px; margin: 0 auto; padding-bottom: 80px; }
.qr-name-row        { border: 2px solid var(--primary, #333); border-radius: 8px;
                      padding: 12px 14px; margin-bottom: 12px;
                      background: var(--surface, #fafafa); }
.qr-name-row input  { font-size: 1.1rem; font-weight: 600; }

/* Reorderable section cards — no overflow:hidden so datalist popups aren't clipped */
.qr-section         { border: 1px solid var(--border, #ddd); border-radius: 10px;
                      margin-bottom: 10px;
                      transition: box-shadow 0.15s, border-color 0.15s; }
.section-header     { display: flex; align-items: center; gap: 8px;
                      padding: 10px 14px; background: var(--surface, #f5f5f5);
                      border-bottom: 1px solid var(--border, #ddd);
                      border-radius: 10px 10px 0 0; }
.section-title      { flex: 1; font-weight: 600; font-size: 0.95rem; }
.section-body       { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* Collapsible sections */
.collapse-toggle    { background: none; border: none; cursor: pointer;
                      color: var(--muted); font-size: 0.65rem; padding: 0 2px;
                      line-height: 1; flex-shrink: 0; }
.collapse-toggle:hover { color: var(--text); }
.section-collapsed .section-body { display: none; }
.section-collapsed .section-header { border-bottom: none; border-radius: 10px; }
.section-note       { color: var(--text-muted, #888); font-size: 0.82rem; margin: 0; }

/* Photo count badge next to section title */
.photo-count-badge  { font-weight: 400; color: var(--text-muted, #888); font-size: 0.85em; }

/* Reorder mode */
.reorder-btns       { display: none; gap: 2px; }
#qr-sections.reorder-mode .reorder-btns { display: flex; }
#qr-sections.reorder-mode .qr-section   { border-color: var(--primary, #333);
                                           border-style: dashed; }
.reorder-btn        { background: var(--surface, #eee); border: 1px solid var(--border, #ccc);
                      border-radius: 4px; width: 28px; height: 28px; font-size: 0.75rem;
                      cursor: pointer; display: flex; align-items: center; justify-content: center; }
.reorder-btn:hover  { background: var(--primary, #333); color: #fff; border-color: var(--primary, #333); }
.btn-active         { background: var(--primary, #333) !important; color: #fff !important;
                      border-color: var(--primary, #333) !important; }

/* Mic / dictation button */
.mic-btn            { background: var(--surface, #f0f0f0); border: 1px solid var(--border, #ccc);
                      border-radius: 20px; padding: 4px 10px; font-size: 1rem;
                      cursor: pointer; line-height: 1; flex: none; }
.mic-btn:hover      { background: var(--surface-hover, #e4e4e4); }
.mic-btn.listening  { background: #fee; border-color: #e00; color: #c00;
                      animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,0,0,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(200,0,0,0); }
}

/* Photo section tabs */
.psec-tabs          { display: flex; gap: 4px; flex-wrap: wrap; }
.psec-tab-btn       { background: var(--surface, #f0f0f0); border: 1px solid var(--border, #ccc);
                      border-radius: 6px; padding: 5px 12px; font-size: 0.85rem; cursor: pointer; }
.psec-tab-btn.active{ background: var(--primary, #333); color: #fff; border-color: var(--primary, #333); }
.psec-tab-pane      { display: none; }
.psec-tab-pane.active { display: block; }

/* Camera take-photo button */
.camera-take-btn    { display: block; width: 100%; padding: 14px;
                      background: var(--surface, #f0f0f0); border: 2px dashed var(--border, #ccc);
                      border-radius: 8px; font-size: 1rem; cursor: pointer; text-align: center;
                      color: var(--text, #333); }
.camera-take-btn:hover { border-color: var(--primary, #333); background: var(--surface-hover, #e8e8e8); }

/* File choose button (styled label) */
.file-choose-btn    { display: inline-block; padding: 10px 18px; cursor: pointer;
                      background: var(--surface, #f0f0f0); border: 1px solid var(--border, #ccc);
                      border-radius: 6px; font-size: 0.9rem; }
.file-choose-btn:hover { background: var(--surface-hover, #e4e4e4); }

/* Staged photo preview strip */
.staged-photos      { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.staged-photo       { position: relative; }
.staged-photo-img   { width: 80px; height: 80px; object-fit: cover;
                      border-radius: 6px; display: block;
                      border: 2px solid var(--border, #ddd); }
.staged-photo-remove{ position: absolute; top: -6px; right: -6px;
                      background: #c00; color: #fff; border: none;
                      border-radius: 50%; width: 20px; height: 20px;
                      font-size: 0.65rem; cursor: pointer; line-height: 1;
                      display: flex; align-items: center; justify-content: center; }
.staged-photo-remove:hover { background: #900; }

/* Auth nav */
.btn-link           { background: none; border: none; padding: 0; cursor: pointer;
                      color: var(--color-link, inherit); font-size: inherit;
                      font-family: inherit; text-decoration: none; }
.btn-link:hover     { text-decoration: underline; }
.nav-user           { cursor: default; }

/* ── Unified photo picker ───────────────────────────────── */
.photo-picker           { display: flex; flex-direction: column; gap: 10px; }

/* Existing saved photos */
.picker-existing        { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-existing-photo  { position: relative; }
.picker-existing-photo img { width: 80px; height: 80px; object-fit: cover;
                             border-radius: 6px; display: block;
                             border: 2px solid var(--border, #ddd); }
.picker-existing-controls { position: absolute; bottom: 0; left: 0; right: 0;
                             display: flex; justify-content: center; gap: 3px;
                             background: rgba(0,0,0,0.55); border-radius: 0 0 5px 5px;
                             padding: 3px; }

/* Staged (new) photos */
.staged-photos.picker-preview-empty { display: none; }

/* Picker buttons */
.picker-btns            { display: flex; gap: 8px; flex-wrap: wrap; }
.picker-btns--nowrap    { flex-wrap: nowrap; }
.picker-btns--nowrap .btn { flex: 1; text-align: center; white-space: nowrap; min-width: 0; font-size: 0.85rem; padding-left: 6px; padding-right: 6px; }
.picker-cam-btn,
.picker-upload-label    { flex: 1; text-align: center; cursor: pointer; }
.picker-btn-disabled,
.picker-btn-disabled:hover { opacity: 0.38; cursor: not-allowed; filter: grayscale(1); }

/* GPS status line */
.picker-gps             { font-size: 0.8rem; color: var(--muted, #888); min-height: 1.2em; }

/* ── Webcam / cam modal (shared across all pages) ───────── */
.cam-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.cam-modal-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.75rem;
  padding: 1.25rem;
  width: min(90vw, 640px);
}
/* Video wrapped so the tap-hint can overlay it */
.cam-video-wrap {
  position: relative; width: 100%; cursor: pointer;
}
.cam-video {
  width: 100%; max-height: 60vh;
  border-radius: 10px; background: #000; display: block;
}
/* "Tap to snap" hint fades out after first snap */
.cam-click-hint {
  position: absolute; bottom: 10px; left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.75); font-size: 0.82rem;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  transition: opacity 0.3s;
}
/* Thumbnail strip — scrolls horizontally */
.cam-strip {
  display: flex; gap: 6px; overflow-x: auto;
  width: 100%; min-height: 0; padding: 2px 0;
  scroll-behavior: smooth;
}
.cam-strip:empty { display: none; }
.cam-strip-thumb {
  height: 60px; width: 60px; flex-shrink: 0;
  object-fit: cover; border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.3);
}
.cam-modal-btns { display: flex; gap: 0.75rem; width: 100%; justify-content: center; }
.cam-snap-btn {
  padding: 0.7rem 2rem; background: var(--accent, #0ea5e9); color: #fff;
  border: none; border-radius: 999px; font-size: 1rem;
  cursor: pointer; font-weight: 600;
}
.cam-snap-btn:hover  { opacity: 0.88; }
.cam-done-btn {
  padding: 0.7rem 1.5rem; background: rgba(255,255,255,0.15); color: #fff;
  border: none; border-radius: 999px; font-size: 1rem; cursor: pointer;
}
.cam-done-btn:hover  { background: rgba(255,255,255,0.25); }

/* ── Photo picker upload states ─────────────────────────── */
.picker-uploading        { opacity: 0.55; }
.picker-uploading::after { content: '⏳'; position: absolute; bottom: 2px; right: 2px;
                           font-size: 0.75rem; }
.picker-upload-error     { outline: 2px solid var(--danger, #c00); }
.picker-upload-error::after { content: '!'; position: absolute; bottom: 2px; right: 4px;
                               font-size: 0.8rem; color: var(--danger, #c00); font-weight: bold; }

/* ── Recordings auto-save styles ───────────────────────── */
.rec-saving              { font-size: 0.85rem; color: var(--muted, #888); font-style: italic; }

/* Recording mode toggle pill */
.rec-mode-toggle         { display: inline-flex; border: 1px solid var(--border, #ccc); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.btn-toggle-pill         { padding: 5px 14px; font-size: 0.85rem; background: var(--surface, #f5f5f5); border: none; cursor: pointer; color: var(--text, #333); transition: background 0.15s, color 0.15s; }
.btn-toggle-pill + .btn-toggle-pill { border-left: 1px solid var(--border, #ccc); }
.btn-toggle-pill.rec-toggle-active  { background: var(--primary, #333); color: #fff; }
.rec-new-label-input     { width: 100%; margin-bottom: 8px; }

/* ── Dev hints (localhost only, toggled in Settings) ─────────────────────── */
[data-dev-hint] {
  display: none; /* shown only when <html> has .dev-active */
}
html.dev-active [data-dev-hint] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #6d28d9;
  color: #fff;
  font-size: 11px;
  padding: 4px 6px 4px 10px;
  margin: 4px 0 2px;
  border-radius: 5px;
  cursor: default;
  user-select: none;
  line-height: 1.4;
}
.dev-hint__icon { font-size: 13px; flex-shrink: 0; }
.dev-hint__title { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.dev-hint__file { font-family: monospace; opacity: 0.85; flex: 1; }
.dev-hint__close {
  background: none; border: none; color: #fff;
  font-size: 16px; line-height: 1; padding: 0 2px;
  cursor: pointer; opacity: 0.5; margin-left: 4px; flex-shrink: 0;
}
.dev-hint__close:hover { opacity: 1; }

/* ── Reminders section (partial + page) ─────────────────── */
.reminders-section       { display: flex; flex-direction: column; gap: 10px; }
.reminders-section h3    { font-size: 0.95rem; font-weight: 600; margin: 0; }
.reminders-list          { display: flex; flex-direction: column; gap: 6px; }
.reminder-row            { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                           padding: 8px 10px; border-radius: var(--radius);
                           border: 1px solid var(--border); background: var(--surface); }
.reminder-row--overdue   { border-left: 3px solid var(--danger); }
.reminder-row--today     { border-left: 3px solid var(--accent); }
.reminder-row--done      { opacity: 0.5; }
.reminder-date           { font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.reminder-note           { font-size: 0.82rem; color: var(--muted); flex: 1; }
.reminder-actions        { display: flex; gap: 4px; margin-left: auto; }
.add-reminder-fields     { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-date-input          { width: 150px; flex-shrink: 0; }
.rem-note-input          { flex: 1; min-width: 160px; }
/* On narrow screens the note drops to its own line automatically via flex-wrap */

/* ── Auto-save indicator ────────────────────────────────────── */
.autosave-indicator          { font-size: 0.8rem; align-self: center; min-width: 72px; }
.autosave-indicator--saving  { color: var(--muted); }
.autosave-indicator--ok      { color: #16a34a; }
.autosave-indicator--err     { color: var(--danger); }

/* ── Scan page Done button ──────────────────────────────────── */
.scan-done-btn {
  margin-left: auto;
  white-space: nowrap;
}

/* ── Watched tags (dashboard) ───────────────────────────────── */
.watched-tags-section       { margin: 24px 0; }
.watched-tags-header        { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.watched-tags-header h2     { margin: 0; }
.watch-add-panel            {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 10px;
  margin-bottom: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.watch-panel-inner          { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.watch-tag-search           { flex: 1; }
.btn-icon                   {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--muted); padding: 4px 6px; border-radius: 4px; line-height: 1;
}
.btn-icon:hover             { color: var(--danger); background: var(--surface); }
.watch-tag-options          { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; }
.watch-tags-loading,
.watch-tags-empty           { font-size: 0.84rem; color: var(--muted); padding: 4px 0; }
.watch-tag-option           {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; font-size: 0.84rem;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.watch-tag-option:hover               { border-color: var(--accent); background: var(--surface); }
.watch-tag-option--watching           {
  opacity: 0.5; cursor: default;
  background: var(--surface); border-style: dashed;
}

.watched-section            { margin-bottom: 28px; }
.watched-section-header     { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.watched-section-title      { margin: 0; font-size: 1rem; font-weight: 600; }
.watched-section-tag-link   { color: inherit; text-decoration: none; }
.watched-section-tag-link:hover { text-decoration: underline; }
.watched-section-actions    { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.watched-section-see-all    { font-size: 0.82rem; color: var(--accent); text-decoration: none; }
.watched-section-see-all:hover { text-decoration: underline; }
.watched-section-unwatch    {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--muted);
  padding: 2px 4px; border-radius: 4px;
}
.watched-section-unwatch:hover { color: var(--danger); background: var(--surface); }

.watched-section-empty      {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px dashed var(--border); color: var(--muted);
  font-size: 0.88rem;
}
.watched-empty-add          { margin-left: auto; color: var(--accent); text-decoration: none; font-size: 0.82rem; }
.watched-empty-add:hover    { text-decoration: underline; }

.watched-item-strip         { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.watched-item-card          {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
  flex-shrink: 0; width: 110px;
}
.watched-item-thumb         {
  width: 110px; height: 90px; object-fit: cover;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border);
}
.watched-item-thumb--empty  {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--muted);
}
.watched-item-name          { font-size: 0.78rem; line-height: 1.3; font-weight: 500; }
.watched-section-loading    {
  padding: 10px 0; color: var(--muted); font-size: 0.88rem;
}
.watched-loading-label::before { content: '⏳ '; }

/* ── Preset tag categories (tags page) ─────────────────────── */
.preset-section             { margin: 32px 0 0; border-top: 1px solid var(--border); padding-top: 24px; }
.preset-section-title       { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.preset-section-hint        { font-size: 0.84rem; color: var(--muted); margin: 0 0 18px; }

.preset-categories          { display: flex; flex-direction: column; gap: 10px; }

.preset-cat-btn             {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  width: 100%; text-align: left;
  transition: border-color 0.15s;
}
.preset-cat-btn:hover       { border-color: var(--accent); }
.preset-cat-btn.open        { border-color: var(--accent); }
.preset-cat-count           { font-size: 0.8rem; font-weight: 400; color: var(--accent); margin-left: auto; }

.preset-tag-list            {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 4px 4px;
}
.preset-tag-list.hidden     { display: none; }

.preset-tag                 {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px;
  font-size: 0.84rem; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.preset-tag:hover           { border-color: var(--accent); }
.preset-tag.active          {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 500;
}

.preset-enabled-summary     {
  font-size: 0.82rem; color: var(--muted);
  margin-top: 16px; font-style: italic;
}

.preset-search-wrap         { margin-bottom: 14px; }
.preset-search-input        {
  width: 100%; padding: 8px 12px; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  box-sizing: border-box;
}
.preset-search-input:focus  { outline: none; border-color: var(--accent); }

/* Crafting subcategories get a subtle left-accent so they're visually grouped */
.preset-category--major .preset-cat-btn {
  border-left: 3px solid var(--accent);
}

/* ── Quick-jump category nav (tags page) ───────────────────── */
.preset-cat-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.preset-nav-pill {
  padding: 4px 10px; font-size: 0.78rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer; color: var(--text);
  white-space: nowrap; transition: background 0.12s, border-color 0.12s;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.preset-nav-pill:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ── Category filter bar above chip row (item-edit) ─────────── */
.tag-chips-catbar {
  display: flex; flex-wrap: nowrap; gap: 5px;
  overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 8px;
  scrollbar-width: none;
}
.tag-chips-catbar::-webkit-scrollbar { display: none; }
.tag-chips-catpill {
  flex-shrink: 0;
  padding: 3px 10px; font-size: 0.77rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; cursor: pointer; color: var(--muted);
  white-space: nowrap; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tag-chips-catpill:hover  { border-color: var(--accent); color: var(--text); }
.tag-chips-catpill.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 500;
}

/* ── Preset chips in tag input areas ────────────────────────── */
.tag-chip--preset           { opacity: 0.8; }
.tag-chip--preset.active    { opacity: 1; }

/* ── Tag browser cascading menu ──────────────────────────────── */
.tagmenu-wrap {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}
.tagmenu-trigger {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.4;
}
.tagmenu-trigger:hover { border-color: var(--accent); color: var(--accent); }
.tagmenu-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(42,110,245,.05);
}
.tagmenu-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.13);
  min-width: 230px;
  max-width: 290px;
  overflow: hidden;
}
.tagmenu-pane {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* author display:flex overrides UA [hidden]{display:none} — re-assert it */
.tagmenu-pane[hidden] { display: none; }
.tagmenu-pane::-webkit-scrollbar { width: 4px; }
.tagmenu-pane::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.tagmenu-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}
.tagmenu-back:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tagmenu-subtitle {
  padding: 6px 12px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 37px;
  z-index: 1;
  flex-shrink: 0;
}
.tagmenu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.tagmenu-item:last-child { border-bottom: none; }
.tagmenu-item:hover { background: var(--bg); }
.tagmenu-arrow { color: var(--muted); font-size: 0.7rem; flex-shrink: 0; }
.tagmenu-tag-btn {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
}
.tagmenu-tag-btn:last-child { border-bottom: none; }
.tagmenu-tag-btn:hover { background: var(--bg); }
.tagmenu-tag-btn.active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(42,110,245,.06);
}
.tagmenu-tag-btn.active::after { content: ' ✓'; font-size: 0.78rem; float: right; opacity: .7; }
.tagmenu-letter-head {
  padding: 5px 12px 3px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: sticky;
  top: 37px;  /* below the back button */
  z-index: 1;
  flex-shrink: 0;
}
.tagmenu-letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  flex-shrink: 0;
}
.tagmenu-letter-count {
  flex: 1;
  font-size: 0.8rem;
  color: var(--muted);
  padding-left: 6px;
}

/* ── Tag presets editor (/settings/tag-presets) ──────────────────── */
.presets-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.presets-source-toggle { display: flex; gap: 20px; flex-wrap: wrap; }
.source-opt { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }
.presets-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
}
.presets-save-status { font-size: 0.82rem; color: var(--muted); min-width: 110px; }
.presets-save-status.unsaved { color: #d97706; }
.presets-save-status.saving  { color: var(--muted); }
.presets-save-status.saved   { color: #16a34a; }
.presets-save-status.error   { color: #dc2626; }

/* paste panel */
.paste-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.paste-panel h3 { margin: 0 0 6px; font-size: 1rem; }
.paste-hint { font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }
.paste-example {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 14px; font-size: 0.82rem; line-height: 1.6;
  margin-bottom: 12px; white-space: pre; overflow-x: auto;
}
.paste-textarea {
  width: 100%; font-family: monospace; font-size: 0.88rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; resize: vertical; background: var(--bg); box-sizing: border-box;
}
.paste-actions { display: flex; gap: 8px; margin-top: 12px; }

/* system notice */
.presets-system-notice, .presets-empty {
  padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--muted); font-size: 0.9rem;
}

/* ── master-detail container ── */
.presets-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* ── top: compact category list ── */
.presets-editor-top {
  border-bottom: 2px solid var(--border);
}
.presets-cat-list {
  display: flex;
  flex-direction: column;
}
/* each compact row */
.pec-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.pec-row:last-child { border-bottom: none; }
.pec-row:hover      { background: var(--bg); }
.pec-row.selected   { background: rgba(42,110,245,.07); border-left: 3px solid var(--accent); padding-left: 9px; }
.pec-row-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: pointer;
}
.pec-row-count {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pec-row.selected .pec-row-count { background: rgba(42,110,245,.1); border-color: rgba(42,110,245,.25); }

/* move / delete buttons shared */
.pec-move, .pec-delete {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.pec-move {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
}
.pec-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pec-move:disabled { opacity: 0.25; cursor: default; }
.pec-delete {
  background: none;
  border: 1px solid #fca5a5;
  color: #dc2626;
}
.pec-delete:hover { background: #fee2e2; }

/* ── bottom: detail panel ── */
.presets-detail {
  padding: 16px;
  min-height: 180px;
}
.presets-detail-placeholder {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 24px 0;
  text-align: center;
}
.presets-detail-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.presets-detail-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
.detail-cat-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.detail-tag-count {
  font-size: 0.78rem;
  color: var(--muted);
}
.pec-hint { font-size: 0.75rem; color: var(--muted); }
.pec-tags-textarea, .detail-textarea {
  width: 100%;
  font-family: monospace;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  resize: none;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
  min-height: 120px;
  overflow: hidden;
  line-height: 1.6;
}
.pec-tags-textarea:focus, .detail-textarea:focus {
  border-color: var(--accent); outline: none; background: var(--surface);
}