/* MyOneClick v2 — base theme (indigo/violet). Light by default; dark via
   prefers-color-scheme when no explicit choice, or [data-theme] override. */

:root {
  --primary:   #4F46E5;
  --primary-600:#4338CA;
  --primary-fg:#FFFFFF;
  --accent:    #7C3AED;
  --bg:        #F8FAFC;
  --surface:   #FFFFFF;
  --surface-2: #F1F5F9;
  --text:      #0F172A;
  --muted:     #64748B;
  --border:    #E2E8F0;
  --danger:    #DC2626;
  --success:   #059669;
  --radius:    12px;
  --shadow:    0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --maxw:      min(80vw, 2000px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:#818CF8; --primary-600:#6366F1; --primary-fg:#0B1020; --accent:#A78BFA;
    --bg:#0F172A; --surface:#1E293B; --surface-2:#172033;
    --text:#E2E8F0; --muted:#94A3B8; --border:#334155;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary:#818CF8; --primary-600:#6366F1; --primary-fg:#0B1020; --accent:#A78BFA;
  --bg:#0F172A; --surface:#1E293B; --surface-2:#172033;
  --text:#E2E8F0; --muted:#94A3B8; --border:#334155;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Site footer: centered logo + copyright + developer credit */
.site-footer {
  margin-top: 2rem; padding: 1.5rem 1rem;
  background: #FFFDE7; border-top: 1px solid #F0E68C;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem;
  text-align: center;
}
.site-footer-brand {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-decoration: none; color: var(--text);
}
.site-footer-brand:hover { text-decoration: none; }
.site-footer-logo { height: auto; max-height: 60px; width: auto; display: block; }
.site-footer-copy { font-size: .8rem; font-weight: 600; color: var(--muted); }
.site-footer-credit { margin: 0; font-size: .82rem; font-weight: 600; color: var(--muted); }
.site-footer-credit a { color: var(--primary); font-weight: 700; }
.site-footer-cmark { display: block; line-height: 0; }
.site-footer-cmark-logo { height: auto; max-height: 36px; width: auto; display: block; border-radius: 50%; }

/* Admin — reported issues list */
.issue-list { display: flex; flex-direction: column; gap: .75rem; }
.issue-card { padding: .85rem 1rem; }
.issue-card.issue-resolved { opacity: .7; }
.reply-box { margin: .5rem 0; }
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-form { margin-top: .6rem; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, #0f172a); max-width: 560px; }
.reply-form .field { margin-bottom: .5rem; }
.issue-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.issue-summary { font-size: 1rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.issue-date { font-size: .78rem; white-space: nowrap; }
.issue-status { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .5rem; border-radius: 999px; }
.issue-status-open { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.issue-status-resolved { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); }
.issue-details { font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; margin-bottom: .5rem; }
.issue-meta { font-size: .8rem; overflow-wrap: anywhere; margin-bottom: .55rem; }
.issue-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: #FFFDE7;
  border-bottom: 1px solid #F0E68C;
}
/* Full-width header; left padding reserves the gutter for the fixed logo. */
.site-header .bar {
  margin: 0; padding: .4rem 1rem;
  display: flex; align-items: stretch; gap: .8rem;
}
.header-stack { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .35rem; min-width: 0; }
.header-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.header-row .search-input { flex: 0 1 260px; min-width: 0; }
/* Web search = one inline pill: [engine ▾ | query | Go], never wraps. */
.header-websearch {
  display: flex; align-items: stretch; flex: 0 0 auto; flex-wrap: nowrap;
  border: 1px solid var(--border); border-radius: 999px; background: #FFE5B4; overflow: hidden;
}
.header-websearch #websearch-engine,
.header-websearch #websearch-q { border: none; background: transparent; border-radius: 0; color: #000 !important; }
.header-websearch #websearch-engine option { background: #fff; color: #000; }
.header-websearch #websearch-engine:focus,
.header-websearch #websearch-q:focus { outline: none; }
.header-websearch #websearch-engine { width: auto; flex: 0 0 auto; }
.header-websearch #websearch-q { flex: 0 0 150px; width: 150px; }
.header-websearch .btn { border-radius: 0; border: none; }
.hspace { flex: 1; }

/* Header app links (right of web search): editable inline via the ✎ toggle. */
.header-links { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.hl-item { display: inline-flex; align-items: center; position: relative; }
.hl-del, .hl-handle, .hl-edit-only, .hl-edit-btn { display: none; }
.header-links[data-editing="1"] .hl-del,
.header-links[data-editing="1"] .hl-handle,
.header-links[data-editing="1"] .hl-edit-btn { display: inline-flex; }
.header-links[data-editing="1"] .hl-edit-only { display: inline-flex; }
.header-links[data-editing="1"] .hl-item { outline: 1px dashed var(--border); border-radius: 8px; cursor: grab; }
.header-links[data-editing="1"] .hl-item.dragging { opacity: .45; }
.hl-handle { cursor: grab; color: var(--muted); padding: 0 .1rem; font-size: 1rem; line-height: 1; user-select: none; }
.hl-del {
  cursor: pointer; border: none; background: var(--danger); color: #fff;
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin-left: -.35rem;
  border-radius: 50%; font-size: .65rem; line-height: 1;
  align-items: center; justify-content: center; position: relative; z-index: 1;
}
.hl-edit-btn {
  cursor: pointer; border: none; background: #5CB3FF; color: #003366;
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin-left: -.15rem;
  border-radius: 50%; font-size: .65rem; line-height: 1;
  align-items: center; justify-content: center; position: relative; z-index: 1;
}
#hl-edit-toggle { color: var(--muted); }
#hl-edit-toggle:hover { color: var(--text); }
.hl-link { background: #D6EEFF; border-color: #A8D4F5; color: #003366; }
.hl-link:hover { background: #5CB3FF; border-color: #3a9fe8; color: #003366; text-decoration: none; }
.header-nav-main { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }

/* Hamburger dropdown menu (nav + account + logout) */
.navmenu-wrap { position: relative; }
.navmenu { position: fixed; right: 1rem; top: 4.5rem; min-width: 220px;
  background: #5CB3FF; border: 1px solid #3a9fe8; border-radius: 10px;
  box-shadow: var(--shadow); padding: .25rem; display: none; z-index: 9999;
  max-height: calc(100vh - 5rem); overflow-y: auto; }
.navmenu-toggle:checked ~ .navmenu { display: block; }
.navmenu a, .navmenu button { display: flex; align-items: center; gap: .4rem; width: 100%;
  box-sizing: border-box; text-align: left; padding: .3rem .55rem; border-radius: 6px;
  color: var(--text); background: none; border: none; font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; }
.navmenu a:hover, .navmenu button:hover { background: var(--surface-2); text-decoration: none; }
.navmenu hr { border: none; border-top: 1px solid var(--border); margin: .2rem 0; }
.navmenu-organize { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; }
.navmenu-organize-label { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.navmenu-organize select { flex: 1; min-width: 0; padding: .25rem .4rem; font-size: .82rem; }
.navmenu form { margin: 0; }
.navmenu-accounts { display: flex; flex-direction: column; gap: .25rem; padding: .35rem .55rem; }
.navmenu-accounts-label { font-weight: 600; font-size: .82rem; }
.navmenu-accounts select { width: 100%; padding: .3rem .4rem; font-size: .82rem; }
/* Account Overview — plan catalogue cards */
.acct-overview { max-width: 1100px; margin: 0 auto; padding: 1rem 0 2rem; }
.plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan-card { position: relative; display: flex; flex-direction: column; border: 1px solid #cbd5e1; border-radius: 12px; padding: 1.1rem 1.1rem 1rem; background: #fff; color: #000; }
.plan-card .plan-name, .plan-card .plan-feats li, .plan-card .plan-desc { color: #000; }
.plan-card-current { border-color: #5CB3FF; border-width: 2px; background: #eef6ff; box-shadow: 0 0 0 3px rgba(92,179,255,.45); }
.plan-badge { position: absolute; top: -.65rem; right: .9rem; background: #5CB3FF; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; }
.plan-name { margin: 0; font-size: 1.25rem; font-weight: 700; }
.plan-price { margin: .15rem 0 .5rem; font-size: 1.35rem; font-weight: 700; color: #5CB3FF; }
.plan-desc { margin: 0 0 .6rem; font-size: .85rem; }
.plan-feats { list-style: none; margin: 0 0 1rem; padding: 0; flex: 1; }
.plan-feats li { position: relative; padding: .18rem 0 .18rem 1.35rem; font-size: .88rem; line-height: 1.3; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: #22c55e; font-weight: 700; }
.plan-action { margin-top: auto; }
.navmenu-acct { color: var(--muted); }
.header-bottom { gap: .5rem; justify-content: flex-start; }
/* Toggle light/dark + hamburger, centered on the header's bottom row. */
.header-controls { gap: .6rem; justify-content: center; }
.header-quick { gap: .35rem; flex-wrap: wrap; padding: .1rem 0; }
/* Quick-links wrapper: no box of its own, so its items flow into the row that
   hosts it (the search row on board pages, or a standalone row elsewhere). */
.ql-contents { display: contents; }
/* Compact nav row (quick links + view tabs): shrink the link buttons and gaps
   so all of them stay visible on the single row. */
.header-navrow { gap: .25rem; }
.header-navrow .ql-btn { font-size: .72rem; padding: .12rem .4rem; }
.header-navrow .ql-label { font-size: .72rem; padding-right: .1rem; }
.header-navrow .view-tab { padding: .3rem .55rem; font-size: .85rem; }
.ql-label { font-size: .78rem; color: var(--muted); white-space: nowrap; padding-right: .15rem; font-weight: 600; }
.ql-btn { font-size: .8rem; padding: .25rem .55rem; background: #D6EEFF; border-color: #A8D4F5; color: #003366; }
.ql-btn:hover { background: #5CB3FF; border-color: #3a9fe8; color: #003366; }
.ql-edit { font-size: .78rem; opacity: .55; padding: .25rem .45rem; }
.ql-edit:hover { opacity: 1; }
.ql-item { display: inline-flex; align-items: center; position: relative; }
.ql-ctrl { display: none; }
#ql-bar[data-editing="1"] .ql-ctrl { display: inline-flex; }
#ql-bar[data-editing="1"] .ql-item { outline: 1px dashed var(--border); border-radius: 8px; }
.ql-item-del {
  cursor: pointer; border: none; background: var(--danger); color: #fff;
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin-left: -.35rem;
  border-radius: 50%; font-size: .65rem; line-height: 1;
  align-items: center; justify-content: center; position: relative; z-index: 1;
}
.ql-item-edit {
  cursor: pointer; border: none; background: #5CB3FF; color: #003366;
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin-left: -.15rem;
  border-radius: 50%; font-size: .65rem; line-height: 1;
  align-items: center; justify-content: center; position: relative; z-index: 1;
}
#ql-edit-toggle { color: var(--muted); }
#ql-edit-toggle:hover { color: var(--text); }
.ql-row-head { display: flex; gap: .45rem; align-items: center; margin-bottom: .2rem; padding: 0 .1rem; }
.ql-row { display: flex; gap: .45rem; margin-bottom: .45rem; align-items: center; flex-wrap: wrap; }
.ql-row[hidden] { display: none; }
.ql-row-ghost { opacity: .4; background: var(--surface-2); }
.ql-handle { cursor: grab; color: var(--muted); font-size: 1.15rem; flex: 0 0 auto; padding: 0 .1rem; line-height: 1; user-select: none; }
.ql-handle:active { cursor: grabbing; }
.ql-handle-head { flex: 0 0 1.4rem; }
.ql-inp-label { flex: 0 1 150px !important; min-width: 80px !important; }
.ql-inp-url   { flex: 1 1 180px !important; min-width: 120px !important; }
.ql-icon-inp { flex: 0 1 70px !important; min-width: 50px !important; }
.ql-color { flex: 0 0 50px; height: 36px; width: 50px; padding: .1rem; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; }
.ql-search-bar { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.ql-search-bar #ql-engine { flex: 0 0 auto; width: auto; }
.ql-search-bar #ql-search { flex: 1; min-width: 140px; }
.gap-lg { flex: 0 0 100px; }
.navicon { margin-right: .3rem; font-size: .95em; line-height: 1; }
@media (max-width: 640px) { .gap-lg { flex-basis: 0; } }
/* Logo sits in the header, flush left. Colors kept as-is in every theme. */
.brand { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; gap: .1rem; text-decoration: none; }
.brand-logo { height: 100%; width: auto; display: block; max-height: 120px; }
.brand-copy { font-size: 1rem; font-weight: 700; line-height: 1; opacity: .85; }
.brand-preview-link { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: #5CB3FF; border-radius: 4px; padding: .2rem .5rem; white-space: nowrap; text-decoration: none; line-height: 1; }
.brand-preview-link:hover { background: #3a9fe8; text-decoration: none; }
.auth-logo { height: 80px; width: auto; display: block; margin: 0 auto 1rem; }
.auth-tabs { display: flex; gap: .5rem; justify-content: center; margin-bottom: .75rem; }
.auth-tab { padding: .45rem 1.5rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  text-decoration: none; color: var(--muted); background: transparent;
  border: 2px solid transparent; transition: color .15s, border-color .15s; }
.auth-tab:hover { color: var(--fg); border-color: var(--border); }
.auth-tab.active { color: #fff; background: #5CB3FF; border-color: #5CB3FF; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; background: var(--surface-2);
  color: var(--text); transition: background .15s, border-color .15s, transform .02s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-600); }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-back { background: #5CB3FF; color: #fff !important; border-color: #3a9fe8; font-weight: 700; text-decoration: none !important; }
.btn-back:hover { background: #3a9fe8; border-color: #2a8fd8; }
.btn-icon { padding: .5rem; width: 2.3rem; height: 2.3rem; border-radius: 999px; border-color: var(--border); background: transparent; }
#theme-toggle { width: 3rem; height: 3rem; font-size: 1.5rem; padding: .4rem; }
label.btn-icon[for="navmenu-toggle"] { background: #5CB3FF; border-color: #5CB3FF; color: #003366; font-size: 1.1rem; }
label.btn-icon[for="navmenu-toggle"]:hover { background: #3a9fe8; border-color: #3a9fe8; }
.btn-block { width: 100%; }
.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0; font: inherit; }

/* Layout containers */
.container { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem; }
.center-narrow { max-width: 460px; margin: 6vh auto; padding: 0 1rem; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem;
}
.card h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
.card .sub { color: var(--muted); margin: 0 0 1.25rem; }

/* Forms */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.input {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--text); font: inherit;
}
.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.help { color: var(--muted); font-size: .85rem; }
.field-error { color: var(--danger); font-size: .85rem; margin-top: .3rem; }

/* Alerts */
.alert { padding: .7rem .9rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--border); }
.alert-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: var(--danger); }
.alert-success { background: color-mix(in srgb, var(--success) 14%, var(--surface)); border-color: var(--success); }

.muted { color: var(--muted); }
.refresh-count { font-size: .95rem; color: var(--muted); text-decoration: none; line-height: 1; padding: 0 .2rem; transition: color .15s; }
.refresh-count:hover { color: var(--accent); }
/* Edit buttons beside the category / sub-category counts. */
.count-edit {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; border-radius: 6px; font-size: .8rem; line-height: 1;
  width: 1.5rem; height: 1.5rem; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.count-edit:hover { color: var(--text); border-color: var(--primary); }
/* Manage categories / sub-categories modal */
.manage-new { align-items: flex-end; margin-bottom: .6rem; }
.manage-new .btn { flex-shrink: 0; }
.manage-list { display: flex; flex-direction: column; gap: .3rem; max-height: 50vh; overflow-y: auto; margin-top: .6rem; }
.manage-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.manage-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.manage-acts { display: flex; gap: .3rem; flex-shrink: 0; }

/* Categories + sub-categories + links counts: pill backgrounds in the header. */
#category-total, #subcategory-total, #bookmark-total {
  background: color-mix(in srgb, #5CB3FF 18%, var(--surface));
  color: var(--text); font-weight: 600;
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #5CB3FF 35%, var(--border));
}
.mt { margin-top: 1rem; }
.text-center { text-align: center; }
.stack > * + * { margin-top: .5rem; }

/* Simple stat tiles (authed home placeholder) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.tile .n { font-size: 1.8rem; font-weight: 700; }
.tile .l { color: var(--muted); font-size: .9rem; }

/* ---------- Board ---------- */
.inline-form { display: inline; }

.toolbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.toolbar-inner { display: flex; align-items: center; gap: .75rem; padding-top: .7rem; padding-bottom: .7rem; flex-wrap: wrap; }
.search-input {
  flex: 1 1 260px; min-width: 200px; padding: .55rem .8rem .55rem 2.1rem;
  border: 1px solid var(--border); border-radius: 999px; background-color: #FFE5B4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .65rem center; background-size: 16px;
  color: #000 !important; font: inherit;
}
.search-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
/* Bookmark search as one pill with a flush "Go" button — identical look to the
   web-search bar (.header-websearch): rounded outer pill, peach background, the
   input transparent inside, and a primary "Go" button hugging the right end. */
.board-search-bar {
  display: inline-flex; align-items: stretch; flex-wrap: nowrap; flex: 0 1 320px; min-width: 0;
  border: 1px solid var(--border); border-radius: 999px; background: #FFE5B4; overflow: hidden;
}
.board-search-bar .search-input {
  flex: 1 1 auto; min-width: 0;
  border: none; border-radius: 0; background-color: transparent;
}
.board-search-bar .search-input:focus { outline: none; border-color: transparent; }
.board-search-bar .btn { border-radius: 0; border: none; align-self: stretch; }
.view-tabs { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.view-tab { padding: .4rem .8rem; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.view-tab:hover { background: var(--surface-2); text-decoration: none; }
.view-tab.active { background: var(--primary); color: var(--primary-fg); }

/* Company name + department (Super User+), shown centered above the name. */
.company-header-wrap { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 0 .15rem; flex-wrap: wrap; text-align: center; }
.board-clock { flex-basis: 100%; width: 100%; text-align: center; letter-spacing: .02em; color: #FF6A00; font-weight: 800; margin: 0 0 .1rem; }
.board-clock-date, .board-clock-time { color: #FF6A00; font-weight: 800; }
.board-clock-date { display: block; font-size: 1.05rem; font-weight: 700; }
.board-clock-time { display: block; font-size: .95rem; font-weight: 600; }
.company-name { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: #90EE90; overflow-wrap: anywhere; }
.company-dept { font-size: 1.05rem; font-weight: 600; line-height: 1.1; color: #FFD700; overflow-wrap: anywhere; }
.company-name + .company-dept::before { content: "·"; margin-right: .4rem; color: var(--muted); }
.company-add { font-size: 1rem; font-weight: 600; color: var(--muted); }
.company-add:hover { text-decoration: underline; }
.company-edit, .company-del { opacity: .45; }
.company-header-wrap:hover .company-edit, .company-header-wrap:hover .company-del { opacity: 1; }
.company-form { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 560px; }
.company-input { flex: 1 1 200px; min-width: 150px; font-weight: 600; }

/* The user's name, shown large and light-blue above the columns. */
.board-title-wrap { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; text-align: center; }
.board-title { margin: 0; font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: #5CB3FF; overflow-wrap: anywhere; }
.board-title-add { font-size: 1.4rem; font-weight: 700; color: #5CB3FF; }
.board-title-add:hover { text-decoration: underline; }
.board-title-edit, .board-title-del { opacity: .55; }
.board-title-wrap:hover .board-title-edit, .board-title-wrap:hover .board-title-del { opacity: 1; }
.board-title-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; width: 100%; max-width: 520px; }
.board-title-input { flex: 1; min-width: 180px; font-size: 1.4rem; font-weight: 700; color: #5CB3FF; }

/* Pinned SHARED board: centered between the customer name and the columns,
   permanently above every other category. */
.shared-row { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 1rem; margin: 0 auto 1.1rem; flex-wrap: wrap; }
.shared-row .cat-card { flex: 1 1 300px; max-width: 560px; }
.import-board-wrap { flex: 1 1 300px; max-width: 560px; display: flex; flex-direction: column; gap: .5rem; }
.import-board-wrap .cat-card { flex: none; max-width: none; }
.import-board-cta { padding: .5rem .6rem .25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.import-board-cta-hint { font-size: .78rem; color: var(--muted); margin: 0; }

.board { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .board { grid-template-columns: 1fr; } }

/* ── Mobile phone layout (≤640px) ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Header scrolls away with the page on phones (NOT sticky/pinned), so the
     full screen height is available for browsing categories. Desktop keeps the
     sticky header (this rule only applies at phone widths). */
  .site-header { position: static; top: auto; }

  /* Full-width container, tighter padding */
  .container { max-width: 100%; padding: .6rem .5rem; }

  /* Compact header bar — let the brand + controls stack/wrap on a phone */
  .site-header .bar { padding: .3rem .5rem; gap: .4rem; align-items: center; flex-wrap: wrap; }

  /* Smaller brand logo */
  .brand-logo { max-height: 44px; height: auto; }
  .brand-copy { font-size: .85rem; }

  /* Show "Search the web" in the header, sized to fit the phone: the pill
     takes the full width and the query field flexes to fill the space. */
  #websearch-form { display: flex !important; flex: 1 1 100%; order: 99; width: 100%; }
  .header-websearch { flex: 1 1 100%; width: 100%; }
  .header-websearch #websearch-q { flex: 1 1 auto; width: auto; min-width: 0; }
  .header-websearch #websearch-engine { flex: 0 0 auto; max-width: 38%; font-size: .85rem; }
  .header-websearch .btn { flex: 0 0 auto; }

  /* Compact header rows */
  .header-row { gap: .2rem; flex-wrap: wrap; }

  /* Show only the + icon on the Add button; hide the label */
  .btn-add-label { display: none; }
  .btn-add .navicon { margin-right: 0; font-size: 1.1rem; }
  .btn-add { padding: .4rem .5rem; }

  /* Board: force a single column so every category stacks top-to-bottom and
     all of them are reachable by scrolling. Columns flow into one stream. */
  .board { grid-template-columns: 1fr !important; gap: .6rem; }
  .board-col { gap: .6rem; }
  .board-col .add-cat-btn { width: 100%; }

  /* Each category card spans the full phone width for easy reading/tapping */
  .cat-card { width: 100%; }

  /* Shared / Import row: stack vertically, full width */
  .shared-row { flex-direction: column; align-items: stretch; gap: .6rem; margin-bottom: .6rem; }
  .shared-row .cat-card { max-width: 100%; flex: none; }
  .import-board-wrap { max-width: 100%; flex: none; }

  /* Tighter category cards + larger tap targets for the link rows */
  .cat-head { padding: .55rem .6rem .45rem; }
  .cat-body { padding: .3rem .35rem .5rem; }
  .link { padding: .5rem .5rem; }
  .row-actions .ic { padding: .35rem; }

  /* Sub-categories: reduce the big left indent so they use the full width */
  .subcat { margin-left: .4rem; }

  /* Compact board title */
  .board-title { font-size: 1.5rem; }

  /* View tabs: icon-only, no labels */
  .view-tab .tab-label { display: none; }
  .view-tab .navicon { margin-right: 0; font-size: 1.05rem; }
  .view-tab { padding: .35rem .45rem; }

  /* Hide category/sub-category counts on very narrow header */
  #category-total, #subcategory-total { display: none; }

  /* Compact bookmark count */
  #bookmark-total { font-size: .75rem; }
}

/* Compact density */
body.density-compact .board { gap: .6rem; }
body.density-compact .board-col, body.density-compact .col-cards { gap: .6rem; }
body.density-compact .cat-head { padding: .45rem .6rem; }
body.density-compact .cat-body { padding: .25rem .35rem .4rem; }
body.density-compact .link { padding: .2rem .45rem; }
body.density-compact .link-name { font-size: .9rem; }
.board-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* Links/images are natively draggable and would hijack the SortableJS row/card
   drag — disable their native drag so only Sortable handles dragging. */
.board a, .board img { -webkit-user-drag: none; user-drag: none; }

.cat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .14);
  border-color: color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 45%, var(--border));
}
.cat-head {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .3rem; row-gap: 0;
  padding: .8rem .85rem .7rem;
  border-bottom: 1px solid color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 28%, var(--border));
  background: linear-gradient(135deg,
    color-mix(in srgb, hsl(var(--tile-h, 250) 75% 55%) 16%, var(--surface)),
    color-mix(in srgb, hsl(var(--tile-h, 250) 75% 55%) 4%, var(--surface)));
}
/* colored accent strip across the top of each category card */
.cat-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    hsl(var(--tile-h, 250) 70% 56%), hsl(var(--tile-h, 250) 70% 70%));
}
/* Show the full category name on every card: wrap at word boundaries so the
   text reads horizontally (break-word keeps whole words intact instead of
   stacking single characters when the header is narrow). */
.cat-name { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; flex: 1; min-width: 0; overflow-wrap: break-word; }
.cat-count {
  color: color-mix(in srgb, hsl(var(--tile-h, 250) 60% 45%) 70%, var(--text));
  background: color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 20%, var(--surface));
  font-weight: 700; font-size: .78rem; padding: .12rem .55rem; border-radius: 999px;
  flex-shrink: 0; align-self: flex-start; margin-left: .15rem;
}
.cat-body { padding: .4rem .5rem .6rem; }

/* Sub-categories are colorful mini-boards nested inside the category card.
   Each gets its own hue (--tile-h, set per element) and adapts to the theme. */
.subcat {
  margin: .55rem .3rem .2rem 1.2rem;
  border: 1px solid color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 22%, var(--border));
  border-left: 3px solid hsl(var(--tile-h, 250) 65% 58%);
  border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, hsl(var(--tile-h, 250) 75% 55%) 5%, var(--surface));
  transition: box-shadow .18s ease, border-color .18s ease;
}
.subcat:hover {
  box-shadow: 0 6px 18px rgba(2, 6, 23, .1);
  border-color: color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 45%, var(--border));
}
.subcat-title {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; row-gap: 0; margin: 0;
  padding: .4rem .5rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, hsl(var(--tile-h, 250) 75% 55%) 15%, var(--surface)),
    color-mix(in srgb, hsl(var(--tile-h, 250) 75% 55%) 3%, var(--surface)));
  border-bottom: 1px solid color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 18%, var(--border));
  font-size: .78rem; text-transform: none; letter-spacing: 0;
}
/* Show the full sub-category name: take the available width and wrap at word
   boundaries so it reads horizontally instead of being squeezed by the buttons. */
.subcat-name { flex: 1; min-width: 0; overflow-wrap: break-word; font-weight: 700; color: var(--text); font-size: .98rem; }
.subcat-count {
  color: color-mix(in srgb, hsl(var(--tile-h, 250) 60% 45%) 70%, var(--text));
  background: color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 18%, var(--surface));
  font-weight: 700; font-size: .7rem; padding: .05rem .45rem; border-radius: 999px;
}
.subcat .link-list { padding: .15rem .2rem .3rem; }

/* Friends list (Friends page) */
.friend-list { list-style: none; margin: 0; padding: 0; }
.friend-item { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.friend-item:last-child { border-bottom: none; }
.friend-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.friend-id { min-width: 0; overflow-wrap: anywhere; }
.friend-id .muted { margin-left: .4rem; }
.friend-edit { margin-top: .4rem; }
.friend-edit-summary { display: inline-block; cursor: pointer; font-size: .85rem; font-weight: 600;
  color: var(--primary); list-style: none; user-select: none; padding: .1rem 0; }
.friend-edit-summary::-webkit-details-marker { display: none; }
.friend-edit-summary:hover { text-decoration: underline; }
.friend-edit[open] .friend-edit-summary { margin-bottom: .5rem; }
.friend-edit-form { padding: .5rem .75rem .25rem; background: var(--surface-2); border-radius: 8px; }
.friend-edit-form .field { margin-bottom: .5rem; }
.friend-edit-form label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }

/* Priority Planner bulk-delete bar */
.plan-bulkbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0 0 .6rem; margin-bottom: .4rem; border-bottom: 1px solid var(--border); }
.plan-all-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; cursor: pointer; }
.plan-del-check, #plan-all { accent-color: #dc2626; cursor: pointer; vertical-align: middle; }

/* Each link gets its own background chip; rows are separated by ~2 spaces.
   Plain block list (not flex) so SortableJS native drag/drop positions cleanly. */
.link-list { list-style: none; margin: 0; padding: 0; }
/* Outline indent: sub-category names sit 2 spaces in, link rows 4 spaces in. */
.link-row {
  border-radius: 8px; padding-left: 4ch; margin-bottom: .45rem;
  background: var(--surface-2); border: 1px solid var(--border);
}
.link-row[hidden] { display: none; }
.link-row:hover {
  background: color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 12%, var(--surface-2));
  border-color: color-mix(in srgb, hsl(var(--tile-h, 250) 70% 55%) 35%, var(--border));
}
.link { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; row-gap: .1rem; align-items: start; padding: .35rem .5rem; color: var(--text); min-width: 0; }
.link:hover { text-decoration: none; }
.link > .fav-tile { grid-column: 1; grid-row: 1; }
/* Name spans the full card width (column 2) and wraps to show the whole
   description; the host drops to its own line beneath it. The card — and thus
   the name's available space — gets wider as fewer columns are selected. */
.link-name { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
/* Domain/URL is intentionally hidden under link names (still used for search). */
.link-host { display: none; }
/* Shared-link provenance shown just below the link name (Shared board). */
.link-shared { grid-column: 2; display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.link-shared-line { font-size: .68rem; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }

/* The 📝 note button: dimmed by default; bright with a YELLOW background when a
   note exists. The note text itself is never shown inline — it appears in a
   hover popup (see .note-hover) or the click-to-edit modal. */
.note-btn { filter: grayscale(1) opacity(.55); }
.note-btn.on { filter: none; background: #FFEB3B; border-radius: 6px; }
.note-btn:hover { filter: none; }

/* Hover preview of a note. JS appends it to <body> with fixed positioning so the
   category card's overflow:hidden can't clip it. */
.note-hover {
  position: fixed; z-index: 9999; max-width: 280px;
  background: #FFFBEA; color: #1f2937;
  border: 1px solid #F0D000; border-left: 4px solid #FFD700; border-radius: 8px;
  box-shadow: var(--shadow); padding: .5rem .6rem;
  font-size: .82rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
  pointer-events: none;
}
/* Read-only provenance block inside the inline link-edit form. */
.inline-shared {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid var(--border); border-radius: 8px;
  padding: .4rem .55rem; margin-bottom: .15rem;
}
.inline-shared-title { font-size: .72rem; font-weight: 700; color: var(--primary); margin-bottom: .15rem; }
.inline-shared .link-shared-line { font-size: .72rem; }

.fav-tile, .cat-ico, .subcat-ico {
  position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; line-height: 1;
  background: hsl(var(--tile-h, 250) 70% 90%); color: hsl(var(--tile-h, 250) 55% 32%);
}
.subcat-ico { font-weight: 800; }
.cat-ico {
  width: 26px; height: 26px; border-radius: 8px; font-size: .9rem;
  box-shadow: 0 1px 4px color-mix(in srgb, hsl(var(--tile-h, 250) 70% 45%) 40%, transparent);
}
/* favicon image sits on top of the letter tile; tile shows if image is absent */
.fav-tile .fav-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
:root[data-theme="dark"] .fav-tile, :root[data-theme="dark"] .cat-ico, :root[data-theme="dark"] .subcat-ico {
  background: hsl(var(--tile-h, 250) 35% 24%); color: hsl(var(--tile-h, 250) 75% 78%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fav-tile, :root:not([data-theme="light"]) .cat-ico, :root:not([data-theme="light"]) .subcat-ico {
    background: hsl(var(--tile-h, 250) 35% 24%); color: hsl(var(--tile-h, 250) 75% 78%);
  }
}

.page-title { margin-top: 0; }
.empty { color: var(--muted); padding: 2rem 0; }

/* ---------- Editing controls ---------- */
.link-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: .25rem; row-gap: 0; position: relative; }
.link-row > .link { flex: 1; }
.tags { display: inline-flex; gap: .25rem; flex-wrap: wrap; flex-shrink: 0; }
.tag { font-size: .68rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 0 .4rem; border-radius: 999px; }

.row-actions, .card-actions, .sub-actions { display: inline-flex; gap: .1rem; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
/* Row actions (the hover menu) sit on their own line BELOW the link name,
   indented to line up under the name. They stay collapsed (zero height) until
   the row is hovered or focused, so they never reserve vertical space. */
.row-actions {
  order: 5; flex-basis: 100%; width: 100%;
  margin-left: calc(32px + 1.6rem);
  background: none; border: none; border-radius: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height .15s ease, opacity .12s;
}
.link-row:hover .row-actions, .link-row:focus-within .row-actions,
.cat-head:hover .card-actions, .cat-head:focus-within .card-actions,
.subcat-title:hover .sub-actions, .subcat-title:focus-within .sub-actions { opacity: 1; }
.link-row:hover .row-actions, .link-row:focus-within .row-actions,
.cat-head:hover .card-actions, .cat-head:focus-within .card-actions,
.subcat-title:hover .sub-actions, .subcat-title:focus-within .sub-actions { max-height: 2.2rem; margin-bottom: .15rem; }
@media (hover: none) {
  .row-actions, .card-actions, .sub-actions { opacity: 1; max-height: 2.2rem; margin-bottom: .15rem; }
}

.ic {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  width: 1.55rem; height: 1.55rem; border-radius: 6px; font-size: .85rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ic:hover { background: var(--surface-2); color: var(--text); }
.ic.star.on { color: #F59E0B; }
/* Category actions (the hover menu) sit on their own line BELOW the category
   name, indented past the collapse caret. Collapsed to zero height until the
   header is hovered/focused, so the name keeps the full first row. */
.card-actions {
  order: 5; flex-basis: 100%; width: 100%; margin-left: 1.8rem;
  background: none; border: none; border-radius: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height .15s ease, opacity .12s;
}
/* Sub-category actions (create-link / move / rename / delete) stay inline at
   the right of the sub-category name and are ALWAYS visible — not hover-only. */
.sub-actions {
  flex: 0 0 auto; margin-left: auto;
  background: none; border: none; border-radius: 0; padding: 0;
  opacity: 1; max-height: none; overflow: visible;
}

/* Inline add/edit forms */
.inline-edit, .add-link-form, .add-subcat-form, .add-cat-form {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .5rem; margin: .3rem .25rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; width: 100%;
}
.input.sm { padding: .35rem .5rem; font-size: .9rem; border-radius: 8px; }
.btn.sm { padding: .3rem .6rem; font-size: .85rem; }
.inline-actions { display: flex; gap: .4rem; }
.link-row.editing { display: block; }

.add-cat-btn {
  border: 1px dashed var(--border); color: var(--muted);
  /* Frosted glass: a translucent backing + blurred backdrop so any page
     background photo behind the blank "Add category" board is blurred. */
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: .6rem; cursor: pointer; font: inherit; font-weight: 600;
}
.add-cat-btn:hover { color: var(--primary); border-color: var(--primary); }

/* Undo toast */
.toast-region { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 50; }
.toast {
  display: flex; align-items: center; gap: .9rem; background: #111827; color: #F9FAFB;
  padding: .6rem .9rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  font-size: .9rem; opacity: 1; transition: opacity .3s;
}
.toast.hide { opacity: 0; }
.toast-undo { background: none; border: none; color: #A5B4FC; font-weight: 700; cursor: pointer; font: inherit; }

/* ---------- Drag & drop ---------- */
.col-cards { display: flex; flex-direction: column; gap: 1rem; min-height: 8px; }
.cat-head, .subcat-title { cursor: grab; }
.cat-head:active, .subcat-title:active { cursor: grabbing; }
.cat-head .ic, .subcat-title .ic { cursor: pointer; }       /* buttons stay clickable */
.link-row { cursor: grab; }
.link-row:active { cursor: grabbing; }
.link-row .link, .link-row .ic { cursor: pointer; }
.drag-ghost { opacity: .4; background: var(--surface-2); border: 1px dashed var(--primary); border-radius: 8px; }
.drag-chosen { box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.sortable-drag { opacity: .9; }

/* ---------- Web search + tools bar ---------- */
.websearch { background: var(--surface); border-bottom: 1px solid var(--border); }
.websearch-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.websearch-form { display: flex; gap: .5rem; flex: 1 1 320px; }
#websearch-engine { width: auto; flex: 0 0 auto; }
#websearch-q { flex: 1; }
.tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.tool { padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: .85rem; }
.tool:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- Bulk select + dead-link checker ---------- */
.link-check { display: inline-block; margin-right: .3rem; width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; accent-color: var(--primary); opacity: .35; transition: opacity .15s; pointer-events: auto; }
.link-check:hover, .link-check:checked { opacity: 1; }
body.selecting .link-check { opacity: 1; }
body.selecting .link-row > .link, body.selecting .row-actions { pointer-events: none; }
body.selecting .link-row { cursor: pointer; }
.link-row.selected { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); outline: 1px solid var(--primary); }
.bulk-bar {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: .6rem; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 999px; padding: .5rem .8rem;
  flex-wrap: wrap; max-width: 95vw;
}
.bulk-bar[hidden] { display: none; }
.bulk-all-label { display: flex; align-items: center; gap: .3rem; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.link-row.dead { opacity: .7; }
.link-row.dead .link-name { text-decoration: line-through; }
.dead-badge { color: var(--danger); font-size: .7rem; border: 1px solid var(--danger); border-radius: 999px; padding: 0 .4rem; flex-shrink: 0; }

/* ---------- Check-links modal ---------- */
.check-all-label { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; cursor: pointer; margin: .25rem 0 .5rem; }
.check-cat-list, .check-dead-list { display: flex; flex-direction: column; gap: .15rem; max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem; }
.check-cat-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem; border-radius: 6px; cursor: pointer; }
.check-cat-item:hover { background: var(--surface-2); }
.check-cat-name { flex: 1 1 auto; font-size: .9rem; }
.check-cat-count { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.check-dead-item { display: flex; align-items: flex-start; gap: .5rem; padding: .4rem .45rem; border-radius: 6px; cursor: pointer; }
.check-dead-item:hover { background: var(--surface-2); }
.check-dead-item > input { margin-top: .2rem; flex-shrink: 0; }
.check-dead-info { flex: 1 1 auto; min-width: 0; }
.check-dead-top { display: flex; align-items: baseline; gap: .5rem; }
.check-dead-name { display: block; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-dead-name:hover { color: var(--primary); text-decoration: underline; }
.check-dead-cat { font-size: .7rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 .4rem; white-space: nowrap; flex-shrink: 0; }
.check-dead-url { display: block; font-size: .72rem; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-dead-url:hover { color: var(--primary); text-decoration: underline; }
.check-ok { font-size: 1rem; color: var(--success, #16a34a); font-weight: 600; text-align: center; padding: 1rem 0; }
.check-progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: .6rem; }
.check-progress-fill { height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }

/* ---------- Header nav + admin table ---------- */
.navlink { padding: .4rem .55rem; color: var(--muted); font-weight: 600; font-size: .9rem; border-radius: 8px; }
.navlink:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.navlink { display: inline-flex; align-items: center; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table th { color: var(--muted); font-weight: 600; }
.user-del-check { margin-right: .5rem; vertical-align: middle; cursor: pointer; accent-color: #dc2626; }

/* Users panel: a viewport-tall, internally-scrolling box that uses the maximum
   real estate. All columns stay reachable via an always-visible horizontal bar
   (overflow-x: scroll) pinned near the bottom of the screen, while the rows
   scroll vertically inside the box and the header row stays stuck on top. */
.admin-table-wrap { height: max(340px, calc(100vh - 230px)); padding: 0;
  overflow-x: scroll; overflow-y: auto;
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--muted) var(--surface-2); }
.admin-table-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.admin-table-wrap::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 8px; }
.admin-table-wrap::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 8px;
  border: 3px solid var(--surface-2); }
.admin-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text); }
/* Header stays visible while rows scroll within the bounded box. */
.admin-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border); }
.share-form { gap: .5rem; }
/* Email-users panel: a self-contained checklist of recipients. */
.email-pick-list { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: .35rem; }
.email-pick { display: flex; gap: .5rem; align-items: center; padding: .25rem .35rem; border-radius: 4px; cursor: pointer; }
.email-pick:hover { background: var(--surface-2); }
.email-pick input { cursor: pointer; flex: 0 0 auto; }
.email-pick-name { font-weight: 600; }
.email-pick-email { font-size: .82rem; }
.email-pick-role { font-size: .72rem; }
.email-selected-box { font-size: .84rem; max-height: 150px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: .5rem; line-height: 1.5; }
.email-selected-box div { padding: .05rem 0; }
/* Compose row: Subject/Message on the left, previous-emails viewer on the right. */
.email-compose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .email-compose-grid { grid-template-columns: 1fr; } }
.email-history-panel { min-width: 0; }
.email-history-view { border: 1px solid var(--border); border-radius: 6px; padding: .6rem; max-height: 260px; overflow: auto; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.email-history-subject { font-weight: 700; margin-bottom: .4rem; }
.email-hist-list { max-height: 200px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: .35rem; }
.email-hist { display: flex; gap: .5rem; align-items: flex-start; padding: .25rem .35rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.email-hist:hover { background: var(--surface-2); }
.email-hist input { cursor: pointer; flex: 0 0 auto; margin-top: .15rem; }
.email-hist-label { word-break: break-word; }

/* Trial account banners */
.trial-banner { padding: .5rem 1rem; text-align: center; font-size: .875rem; border-bottom: 1px solid transparent; }
.trial-banner a { font-weight: 600; }
.trial-expired { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.trial-expired a { color: #991b1b; }
.trial-active  { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.trial-active a { color: #1e40af; }
.pay-pending   { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.pay-pending a { color: #92400e; }

/* Impersonation banner */
.impersonate-banner {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: #B45309; color: #fff; padding: .5rem 1rem; font-size: .9rem;
}
.impersonate-banner .btn { background: #fff; color: #7C2D12; border: none; }

/* Background photo picker */
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.bg-thumb { position: relative; cursor: pointer; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; display: block; }
.bg-thumb input { position: absolute; opacity: 0; pointer-events: none; }
.bg-thumb img, .bg-thumb .bg-none { display: block; width: 100%; height: 68px; object-fit: cover; }
.bg-thumb .bg-none { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); }
.bg-thumb > span:not(.bg-none) { display: block; font-size: .72rem; padding: .2rem .35rem; color: var(--muted); }
.bg-thumb:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
/* Delete (✕) on a saved/uploaded photo thumbnail. */
.bg-thumb-del {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 20px; height: 20px; padding: 0; border: none; cursor: pointer;
  border-radius: 50%; background: rgba(15,23,42,.6); color: #fff;
  font-size: .7rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  opacity: .8;
}
.bg-thumb-upload:hover .bg-thumb-del { opacity: 1; }
.bg-thumb-del:hover { background: var(--danger); opacity: 1; }

/* Avatars */
.avatar-xs, .avatar-lg { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; }
.avatar-xs { width: 22px; height: 22px; font-size: .8rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 2.2rem; }
.avatar-letter { background: var(--primary); color: var(--primary-fg); font-weight: 700; }
.avatar-row { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.avatar-video { width: 100%; max-width: 320px; border-radius: 10px; background: #000; display: block; }

/* Font-size control: small A — slider — big A, with a live % readout */
.fontsize-control { display: flex; align-items: center; gap: .6rem; }
.fontsize-control input[type="range"] { flex: 1; min-width: 0; }
.font-a { font-weight: 700; color: var(--muted); line-height: 1; }
.font-a-sm { font-size: .85rem; }
.font-a-lg { font-size: 1.5rem; }
.font-a-val { font-size: .85rem; min-width: 3.5ch; text-align: right; }

/* Admin Users page: use (nearly) the full viewport width for maximum real estate. */
.admin-wide { max-width: min(98vw, 2400px); padding-top: 1rem; padding-bottom: .5rem; }

/* Admin left sidebar */
.admin-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.admin-sidebar { flex: 0 0 200px; position: sticky; top: 1rem; }
.admin-side-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .5rem; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: .25rem; }
.admin-side-link { padding: .5rem .7rem; border-radius: 8px; color: var(--text); font-weight: 600; font-size: .9rem; }
.admin-side-link:hover { background: var(--surface-2); text-decoration: none; }
.admin-side-link.active { background: var(--primary); color: var(--primary-fg); }
.admin-content { flex: 1; min-width: 0; }

/* Mobile preview (device frame around an iframe of the live site) */
.preview-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.preview-stage { display: flex; justify-content: center; padding: 1.25rem; background: var(--surface-2); border-radius: var(--radius); overflow: auto; }
.phone-frame { width: 390px; height: 844px; max-width: 100%; border: 12px solid #111827; border-radius: 38px; overflow: hidden; box-shadow: var(--shadow); background: #000; flex-shrink: 0; }
.phone-frame iframe, .pwa-body iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }

/* Simulated installed-PWA desktop window (app titlebar, no browser bar) */
.seg { display: inline-flex; gap: .25rem; }
.pwa-window {
  width: 1100px; max-width: 100%; height: 720px; max-height: 78vh;
  display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface);
}
.pwa-titlebar { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: var(--primary); color: var(--primary-fg); }
.pwa-ico { width: 18px; height: 18px; border-radius: 4px; background: #fff; }
.pwa-title { font-weight: 600; font-size: .85rem; }
.pwa-winbtns { margin-left: auto; display: flex; gap: .45rem; }
.pwa-winbtns i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.6); }
.pwa-body { flex: 1; min-height: 0; }

/* Compact layout for the installed app (display-mode: standalone) or the preview (?pwa=1) */
.pwa-mode .site-header .bar { padding: .25rem .6rem; }
.pwa-mode .brand-logo { max-height: 42px; }
.pwa-mode #websearch-form { display: none; }
.pwa-mode #theme-toggle { display: none; } /* installed app uses the system theme */
.pwa-mode #search-count { display: none; }
.pwa-mode .header-bottom { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
.pwa-mode .header-bottom .gap-lg { flex-basis: .75rem; }
.pwa-mode .view-tabs { flex-wrap: nowrap; gap: .15rem; }
/* compact icon-only view tabs in the installed app */
.pwa-mode .view-tab { padding: .35rem .5rem; }
.pwa-mode .view-tab .tab-label { display: none; }
.pwa-mode .view-tab .navicon { margin-right: 0; font-size: 1.1rem; }
/* bookmark search collapses to a clickable magnifier icon; expands when focused */
.pwa-mode .header-bottom .search-input { flex: 0 0 2.5rem; width: 2.5rem; min-width: 0; padding-right: .3rem; cursor: pointer; }
.pwa-mode .header-bottom .search-input:focus { flex-basis: 230px; width: 230px; cursor: text; }
@media (max-width: 720px) { .admin-layout { flex-direction: column; } .admin-sidebar { position: static; flex-basis: auto; width: 100%; } }

/* ---------- Quick-Add button + modal ---------- */
.btn-add { display: inline-flex; align-items: center; }
.btn-add .navicon { margin-right: .3rem; font-weight: 700; }
/* In the installed app the header is tight: show the ＋ icon only. */
.pwa-mode .btn-add .btn-add-label { display: none; }
.pwa-mode .btn-add .navicon { margin-right: 0; font-size: 1.1rem; }

body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-card {
  position: relative; z-index: 1; width: min(440px, 100%);
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 1.05rem; }
.modal-head .btn-icon { margin-left: auto; }
.modal-body { padding: 1rem; }
.modal-body .field { display: flex; flex-direction: column; margin-bottom: .8rem; }
/* A hidden field must stay hidden — the flex rule above otherwise beats the
   browser's default [hidden] (so the New category / sub-category name inputs
   only appear when their "➕ New…" option is chosen). */
.modal-body .field[hidden] { display: none; }
.modal-body .field > span { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.modal-body .field > span em { font-weight: 400; font-style: normal; }
.field-row { display: flex; gap: .7rem; }
.field-row .field { flex: 1; min-width: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }
.qa-search-row { display: flex; gap: .5rem; align-items: center; }
.qa-search-row .input { flex: 1; min-width: 0; }
.qa-search-row .btn { flex: 0 0 auto; white-space: nowrap; }
#qa-error { margin: 0 0 .6rem; }

/* ---------- collapse / expand a category ---------- */
.cat-collapse {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 2rem; font-weight: 900; line-height: 1; padding: .15rem .3rem; flex-shrink: 0;
  transition: transform .15s ease;
}
.cat-collapse:hover { color: var(--text); }
.cat-card.collapsed .cat-collapse { transform: rotate(-90deg); }
.cat-card.collapsed .cat-body { display: none; }
/* While searching, reveal the body of any collapsed card that holds a match so
   bookmarks under every category & sub-category surface in the results. */
body.searching .cat-card.search-open.collapsed .cat-body { display: block; }

/* While dragging, reveal every collapsed category body and highlight the drop
   zones (link lists) so a Link, Sub-category or Category can be dropped anywhere
   on the board — the maximum reachable real estate. Auto-scroll (board-dnd.js)
   lets the page scroll to off-screen targets during the drag. */
body.dragging .cat-card.collapsed .cat-body { display: block; }
body.dragging .link-list { min-height: 1.5rem; }
body.dragging .cat-links,
body.dragging .subcat .link-list {
  outline: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset: 2px; border-radius: 6px;
}
body.dragging .cat-card { outline: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); }

/* ── Import page ─────────────────────────────────────────────────────────── */
.browser-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin-bottom: .5rem; }
.browser-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; }
.browser-icon { font-size: 1.8rem; display: block; margin-bottom: .3rem; }
.browser-steps { margin: .4rem 0 0 1.1rem; padding: 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.browser-steps li { margin-bottom: .15rem; }

/* Preview table */
.import-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.import-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem 0; }
.import-check-all-label { display: flex; align-items: center; gap: .35rem; font-size: .875rem; cursor: pointer; user-select: none; }
.import-sel-count { font-size: .8rem; color: var(--muted); }
.import-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.import-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.import-table thead th { background: var(--surface-2); padding: .45rem .6rem; text-align: left; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--border); }
.import-table tbody tr.imp-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.import-table tbody tr.imp-row:last-child { border-bottom: 0; }
.import-table tbody tr.imp-row:hover { background: var(--surface-2); }
.import-table tbody tr.imp-row:has(.imp-cb:checked) { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.import-table td { padding: .4rem .6rem; vertical-align: middle; }
.col-chk { width: 36px; text-align: center; }
.col-name { min-width: 140px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-cat { min-width: 110px; }
.col-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-cat-badge { display: inline-block; background: var(--primary); color: #fff; font-size: .7rem; border-radius: 4px; padding: .1rem .35rem; margin-right: .2rem; }
.imp-sub-badge { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); font-size: .7rem; border-radius: 4px; padding: .1rem .35rem; }
.imp-url-link { color: var(--muted); text-decoration: none; font-size: .75rem; }
.imp-url-link:hover { text-decoration: underline; }

/* master collapse/expand toggle, sits left of the Board tab */
.view-tabs .collapse-all {
  align-self: center; background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1;
  padding: .3rem .5rem; margin-right: .15rem; flex-shrink: 0;
}
.view-tabs .collapse-all:hover { background: var(--surface-2); }

/* ---------- per-link share menu ---------- */
.share-menu {
  position: fixed; left: 0; top: 0; z-index: 1100;
  display: flex; flex-direction: column; gap: .1rem; min-width: 190px; max-width: 240px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: .35rem;
}
.share-item {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: .45rem .5rem; border-radius: 7px;
}
.share-item:hover { background: var(--surface-2); }
.share-ic { width: 1.2em; text-align: center; flex-shrink: 0; }
.share-menu .input.sm { width: 100%; }
.share-menu .btn { margin-top: .35rem; width: 100%; }
.share-empty { padding: .4rem .5rem; font-size: .9rem; color: var(--muted); }
.share-cat-label { padding: .35rem .5rem .2rem; font-size: .85rem; font-weight: 600; }
.share-cat-menu { min-width: 210px; }
.share-friend-list { max-height: 200px; overflow-y: auto; margin: .1rem 0 .35rem; }
.share-friend { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem; border-radius: 7px; cursor: pointer; font-size: .92rem; }
.share-friend:hover { background: var(--surface-2); }
.share-friend input { cursor: pointer; flex: 0 0 auto; }
.share-cat-note { width: 100%; margin: .1rem 0 .35rem; resize: vertical; }

/* On a phone the modal becomes a bottom sheet that's easy to reach. */
@media (max-width: 560px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { width: 100%; max-height: 92dvh; border-radius: var(--radius) var(--radius) 0 0; }
}