/* tabre_glass */
/* TabRe Glass — liquid-glass components.
 * Tokens in plugin.php carry every colour and surface; this file adds the frost, depth and motion.
 * Prefix for new classes/variables: .tabre-glass-* / --tabre-glass-*. Logical properties only. */

/* ---------- page atmosphere ---------- */
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 720px at 8% -12%, var(--tabre-glass-aurora-1), transparent 62%),
    radial-gradient(1000px 680px at 98% 4%, var(--tabre-glass-aurora-2), transparent 60%),
    radial-gradient(950px 760px at 48% 112%, var(--tabre-glass-aurora-3), transparent 64%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 2px; }
body { caret-color: var(--brand); }
a { text-underline-offset: 2px; text-decoration-thickness: 1px; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--text) 24%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 38%, transparent); background-clip: padding-box; }

/* ---------- floating frosted header ---------- */
.topbar { top: 0; height: auto; padding: 10px 0 0; background: transparent; border-bottom: 0; }
.topbar-inner {
  min-height: 64px;
  padding: 6px 10px 6px 16px;
  border: 1px solid var(--topbar-line);
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--topbar-bg) 72%, var(--tabre-glass-highlight)), var(--topbar-bg));
  box-shadow: 0 18px 40px -26px var(--tabre-glass-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(var(--tabre-glass-blur)) saturate(185%);
  backdrop-filter: blur(var(--tabre-glass-blur)) saturate(185%);
}
.logo { font-weight: 750; letter-spacing: -.03em; }
.logo .logo-mark { border-radius: 13px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--brand) 34%, transparent)); }
.topnav { gap: 2px; }
.topnav a {
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-muted);
  font-weight: 600;
  transition: color .16s, background .16s, border-color .16s, box-shadow .16s;
}
.topnav a .icon { width: 15px; height: 15px; opacity: .9; }
.topnav a:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); border-color: var(--tabre-glass-edge); color: var(--text); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.topnav a.active {
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 10%, transparent));
  border-color: color-mix(in srgb, var(--brand) 34%, var(--tabre-glass-edge));
  color: var(--brand);
  box-shadow: inset 0 1px 0 var(--tabre-glass-highlight), 0 6px 18px -12px var(--brand);
}
.topbar .icon-btn,
.topbar .qp-btn { border-radius: 50%; border: 1px solid transparent; }
.topbar .icon-btn:hover,
.topbar .qp-btn:hover { border-color: var(--tabre-glass-edge); background: color-mix(in srgb, var(--panel) 60%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.topbar .dropdown-toggle { border-radius: 50%; }
.search-form {
  height: 38px;
  border: 1px solid var(--tabre-glass-edge);
  background: color-mix(in srgb, var(--input-bg) 82%, transparent);
  box-shadow: inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.search-form:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, var(--tabre-glass-edge)); background: color-mix(in srgb, var(--input-bg) 94%, transparent); }

/* ---------- frosted surfaces ---------- */
.card,
.list-card,
.category-head,
.post,
.composer,
.empty,
.category-list,
.notif-list,
.tag-card,
.review-item,
.profile-section > .card,
.settings-index .settings-menu .side-link {
  background: linear-gradient(155deg, color-mix(in srgb, var(--card-bg) 76%, var(--tabre-glass-highlight)), var(--card-bg));
  border-color: var(--card-line);
  box-shadow: var(--card-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
}
.card,
.list-card,
.category-head,
.post,
.composer,
.empty,
.category-list,
.notif-list {
  -webkit-backdrop-filter: blur(var(--tabre-glass-blur)) saturate(155%);
  backdrop-filter: blur(var(--tabre-glass-blur)) saturate(155%);
}
.card { border-radius: var(--card-radius, var(--radius)); }
.card-head { border-bottom-color: color-mix(in srgb, var(--text) 7%, transparent); }
.card-head h3 { letter-spacing: -.01em; }
.list-card { border-radius: var(--radius); overflow: hidden; }
.list-card > .topic-rows,
.list-card > .post-rows,
.list-card > .category-list { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.empty { border-style: solid; color: var(--text-muted); }

/* ---------- category strip and category cards ---------- */
.cat-bar {
  gap: 4px;
  margin-bottom: 16px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--card-bg) 70%, var(--tabre-glass-highlight)), var(--card-bg));
  box-shadow: var(--card-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(var(--tabre-glass-blur)) saturate(155%);
  backdrop-filter: blur(var(--tabre-glass-blur)) saturate(155%);
  scrollbar-width: none;
}
.cat-item { margin: 0; padding: 9px 13px; border: 1px solid transparent; border-radius: 12px; font-weight: 600; }
.cat-item .icon { width: 16px; height: 16px; opacity: .9; }
.cat-item:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); border-color: var(--tabre-glass-edge); color: var(--text); }
.cat-item.active { border-color: color-mix(in srgb, var(--brand) 30%, var(--tabre-glass-edge)); background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.category-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
}
.category-head::after {
  content: "";
  position: absolute;
  inset-block-start: -70px;
  inset-inline-end: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 20%, transparent), transparent 68%);
  pointer-events: none;
}
.category-head .cat-main { position: relative; z-index: 1; }
.category-head .cat-icon-lg {
  width: 58px;
  height: 58px;
  border: 1px solid var(--tabre-glass-edge);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 7%, transparent));
  color: var(--brand);
  box-shadow: inset 0 1px 0 var(--tabre-glass-highlight), 0 14px 26px -18px var(--brand);
}
.category-head .cat-icon-lg .icon { width: 30px; height: 30px; }
.category-head h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
.category-list { border-radius: var(--radius); overflow: hidden; }
.category-row { border-bottom-color: color-mix(in srgb, var(--text) 6%, transparent); transition: background .16s; }
.category-row:hover { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.category-row .cat-icon { border: 1px solid var(--tabre-glass-edge); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent); color: var(--brand); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }

/* ---------- topic rows ---------- */
.topic-rows { border-radius: 0; background: transparent; }
.topic-row { position: relative; padding-block: 13px; border-bottom-color: color-mix(in srgb, var(--text) 6%, transparent); transition: background .16s, transform .16s; }
.topic-row:last-child { border-bottom: 0; }
.topic-row:hover { background: color-mix(in srgb, var(--panel) 42%, transparent); }
.topic-row .row-title { font-size: var(--font-size-lg); letter-spacing: -.012em; }
.topic-row .row-title a { color: var(--text); }
.topic-row .row-title a:hover { color: var(--brand); }
.topic-row.pinned { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 55%); }
.topic-row .row-icon-pin { color: var(--brand); }
.row-new { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--brand); color: var(--brand-text); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.row-cat { display: none; }
.list-head { padding: 10px 14px; border-bottom-color: color-mix(in srgb, var(--text) 7%, transparent); background: color-mix(in srgb, var(--panel) 24%, transparent); }
.tabs { gap: 4px; }
.tab { padding: 7px 12px; border: 1px solid transparent; border-radius: 11px; }
.tab:hover { border-color: var(--tabre-glass-edge); background: color-mix(in srgb, var(--panel) 50%, transparent); }
.tab.active { border-color: color-mix(in srgb, var(--brand) 30%, var(--tabre-glass-edge)); background: color-mix(in srgb, var(--brand) 13%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.tab .badge { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.pagination a, .pagination span { border-color: var(--card-line); background: color-mix(in srgb, var(--card-bg) 72%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pagination .page-cur { border-color: var(--brand); background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 78%, #000)); color: var(--brand-text); box-shadow: 0 10px 22px -14px var(--brand); }

/* ---------- topic page ---------- */
.breadcrumbs { padding: 2px 4px 10px; color: var(--text-subtle); font-size: var(--font-size-sm); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--brand); }
.topic-page { display: flex; flex-direction: column; gap: 12px; }
.post-stream { gap: 14px; }
.post { padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius); }
.post.first { border-color: color-mix(in srgb, var(--brand) 22%, var(--card-line)); }
.topic-head .topic-title { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.035em; }
.topic-bar { border-bottom-color: color-mix(in srgb, var(--text) 7%, transparent); }
.cat-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--tabre-glass-edge)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-size: var(--font-size-xs); font-weight: 650; }
.cat-badge .icon { width: 13px; height: 13px; }
.post-content { font-size: 15.5px; }
.post-content img { border-radius: var(--radius-sm); box-shadow: 0 18px 36px -24px var(--tabre-glass-shadow); }
.post-content blockquote { border-inline-start-color: var(--brand); background: color-mix(in srgb, var(--panel) 38%, transparent); }
.composer { border-radius: var(--radius); }
.composer textarea, .composer .editor { border-radius: var(--radius-sm); }
.reply-denied { border: 1px solid var(--card-line); border-radius: var(--radius); background: color-mix(in srgb, var(--card-bg) 72%, transparent); }

/* ---------- side columns ---------- */
.side-link { border: 1px solid transparent; border-radius: 11px; }
.side-link:hover { border-color: var(--tabre-glass-edge); background: color-mix(in srgb, var(--panel) 55%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.side-link.active { border-color: color-mix(in srgb, var(--brand) 28%, var(--tabre-glass-edge)); background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.side-link .icon { color: currentColor; opacity: .9; }
.side-group, .side-section > h4 { color: var(--text-subtle); letter-spacing: .08em; }
.card-stack .card { border-radius: 18px; }
.card-me .me-name { letter-spacing: -.02em; }

/* ---------- forms & buttons ---------- */
.btn {
  border-color: var(--card-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn:hover { border-color: color-mix(in srgb, var(--text) 18%, var(--card-line)); background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight), 0 10px 20px -18px var(--tabre-glass-shadow); }
.btn-primary { border-color: color-mix(in srgb, var(--brand) 56%, transparent); background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 82%, #000)); color: var(--brand-text); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), 0 12px 24px -16px var(--brand); }
.btn-primary:hover { background: linear-gradient(145deg, var(--brand-hover), color-mix(in srgb, var(--brand) 76%, #000)); border-color: var(--brand-hover); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--panel) 50%, transparent); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: color-mix(in srgb, var(--danger) 40%, var(--card-line)); background: var(--danger-soft); }
input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="file"], select, textarea {
  border-color: var(--card-line);
  background: var(--input-bg);
  box-shadow: inset 0 1px 0 var(--tabre-glass-highlight);
}
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--brand) 55%, var(--card-line)); outline: 3px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.flash { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.flag { padding: 2px 9px; }
.avatar { box-shadow: inset 0 0 0 1px var(--tabre-glass-edge); }
.newest-item .avatar { border-radius: 50%; }

/* ---------- dropdowns & menus ---------- */
.dropdown-menu {
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 78%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
  box-shadow: 0 30px 60px -30px var(--tabre-glass-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
.dropdown-menu a, .dropdown-menu button { border-radius: 10px; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.um-stats { background: color-mix(in srgb, var(--panel) 40%, transparent); border: 1px solid var(--tabre-glass-edge); }
.um-group { border-top-color: color-mix(in srgb, var(--text) 7%, transparent); }

/* ---------- notifications, profile, admin readability ---------- */
.notif { border-bottom-color: color-mix(in srgb, var(--text) 6%, transparent); }
.notif:hover { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.notif.unread { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.admin .card, .admin-full .card { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
.admin table, .table-wrap table { background: var(--panel); }
.admin input, .admin select, .admin textarea { background: var(--input-bg); }

/* ---------- footer ---------- */
.footer { margin-top: 28px; border-top-color: var(--footer-line); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--footer-bg) 80%, transparent)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.footer-inner { padding-block: 20px; }
.footer-links a { padding: 3px 8px; border-radius: 8px; }
.footer-links a:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.powered { color: var(--text-subtle); }

/* ---------- TabRe Support portal: glass edition ---------- */
body.page-tabre-portal .page-grid,
body.page-tabre-portal.no-left.no-right .page-grid { max-width: 1180px; padding-top: 24px; }
.tabre-support-portal { gap: 24px; }
.tabre-support-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  background:
    radial-gradient(720px 360px at 4% 0%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 66%),
    radial-gradient(620px 320px at 100% 8%, color-mix(in srgb, var(--tabre-glass-violet) 20%, transparent), transparent 62%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 72%, transparent), color-mix(in srgb, var(--panel-2) 54%, transparent));
  box-shadow: 0 40px 90px -50px var(--tabre-glass-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}
.tabre-support-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -120px;
  inset-inline-start: 28%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tabre-glass-cyan) 18%, transparent), transparent 68%);
  pointer-events: none;
}
.tabre-support-hero-main, .tabre-support-hero-side { position: relative; z-index: 1; }
@keyframes tabre-glass-rise { from { opacity: 0; transform: translateY(10px); } }
.tabre-support-hero { animation: tabre-glass-rise .55s cubic-bezier(.16, 1, .3, 1) both; }
.tabre-support-portal .tabre-support-hero h1 { margin-top: 0; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.045em; }
.tabre-support-lead { color: var(--text-muted); }
.tabre-support-portal .tabre-support-facts { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tabre-support-fact { border-bottom-color: color-mix(in srgb, var(--text) 9%, transparent); }
.tabre-support-hero-link { border: 1px solid var(--card-line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 52%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tabre-support-hero-link:hover { border-color: color-mix(in srgb, var(--brand) 42%, var(--card-line)); background: color-mix(in srgb, var(--panel) 72%, transparent); }

/* service directory: one glass panel with rows, not four lookalike cards */
.tabre-support-portal .tabre-support-services {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, color-mix(in srgb, var(--card-bg) 74%, var(--tabre-glass-highlight)), var(--card-bg));
  box-shadow: var(--card-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}
.tabre-support-portal .tabre-support-service {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "icon title more" "icon desc more";
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: background .16s;
}
.tabre-support-portal .tabre-support-service:last-child { border-bottom: 0; }
.tabre-support-portal .tabre-support-service:hover { transform: none; border-color: transparent; background: color-mix(in srgb, var(--brand) 6%, transparent); box-shadow: none; }
.tabre-support-portal .tabre-support-service-icon { grid-area: icon; width: 56px; height: 56px; border: 1px solid var(--tabre-glass-edge); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 20%, transparent), color-mix(in srgb, var(--brand) 6%, transparent)); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.tabre-support-portal .tabre-support-service h3 { grid-area: title; align-self: end; margin: 0; font-size: var(--font-size-lg); letter-spacing: -.01em; }
.tabre-support-portal .tabre-support-service p { grid-area: desc; align-self: start; flex: none; max-width: 72ch; margin: 0; font-size: var(--font-size-sm); }
.tabre-support-portal .tabre-support-service-more { grid-area: more; align-self: center; margin: 0; white-space: nowrap; }
.tabre-support-news-col,
.tabre-support-steps-main,
.tabre-support-contact {
  border: 1px solid var(--card-line);
  background: linear-gradient(155deg, color-mix(in srgb, var(--card-bg) 74%, var(--tabre-glass-highlight)), var(--card-bg));
  box-shadow: var(--card-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}
.tabre-support-news-col,
.tabre-support-steps-main,
.tabre-support-contact { border-radius: 20px; }
.tabre-support-news-head, .tabre-support-news-item { border-bottom-color: color-mix(in srgb, var(--text) 6%, transparent); }
.tabre-support-news-item:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.tabre-support-contact-list a { border-color: var(--card-line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 38%, transparent); }
.tabre-support-contact-list a:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--card-line)); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.tabre-support-page-head h1 { letter-spacing: -.04em; }
.tabre-support-list,
.tabre-support-filter-search,
.tabre-support-form,
.tabre-support-msg,
.tabre-support-private,
.tabre-support-closed {
  border-color: var(--card-line);
  background: color-mix(in srgb, var(--card-bg) 76%, transparent);
  box-shadow: var(--card-shadow), inset 0 1px 0 var(--tabre-glass-highlight);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}
.tabre-support-list, .tabre-support-form, .tabre-support-msg { border-radius: var(--radius); }
.tabre-support-row { border-bottom-color: color-mix(in srgb, var(--text) 6%, transparent); }
.tabre-support-row:hover { background: color-mix(in srgb, var(--panel) 42%, transparent); }
.tabre-support-row.is-unread { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.tabre-support-kind-body { border-color: var(--card-line); background: color-mix(in srgb, var(--panel) 40%, transparent); }
.tabre-support-kind input:checked + .tabre-support-kind-body { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 11%, transparent); box-shadow: inset 0 1px 0 var(--tabre-glass-highlight); }
.tabre-support-msg.is-staff { border-color: color-mix(in srgb, var(--brand) 26%, var(--card-line)); }
.tabre-support-staff { background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 78%, #000)); }
.tabre-support-status { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.tabre-support-stat { border-color: var(--card-line); background: color-mix(in srgb, var(--card-bg) 74%, transparent); box-shadow: var(--card-shadow), inset 0 1px 0 var(--tabre-glass-highlight); }
.tabre-support-compose .tabre-support-form-actions { background: color-mix(in srgb, var(--panel) 34%, transparent); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .topbar { top: 0; padding-top: 8px; }
  .topbar-inner { min-height: 60px; }
  .topnav a { padding-inline: 10px; }
}
@media (max-width: 992px) {
  .topbar-inner { border-radius: 18px; }
  body.page-tabre-portal .topbar-inner { flex-wrap: wrap; padding-bottom: 6px; }
  body.page-tabre-portal .topbar-right { order: 1; }
  body.page-tabre-portal .topnav {
    display: flex;
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    padding-top: 5px;
    overflow-x: auto;
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    scrollbar-width: none;
  }
  body.page-tabre-portal .topnav::-webkit-scrollbar { display: none; }
  body.page-tabre-portal .topnav a { padding: 6px 10px; }
  .col-left { background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 24px 0 60px -30px var(--tabre-glass-shadow); }
  .drawer-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
@media (max-width: 640px) {
  .topbar { top: 0; padding-top: 6px; }
  .topbar-inner { min-height: 56px; padding: 5px 8px 5px 12px; border-radius: 16px; }
  .topbar .logo-text { font-size: var(--font-size-md); }
  .page-grid { padding-top: 14px; }
  .cat-bar { margin-inline: 0; padding: 5px; border-radius: 15px; }
  .category-head { padding: 16px; border-radius: 18px; }
  .category-head .cat-icon-lg { width: 48px; height: 48px; border-radius: 14px; }
  .topic-row .row-title { font-size: var(--font-size-md); }
  .post { border-radius: 18px; }
  .tabre-support-hero { border-radius: 22px; }
  .tabre-support-hero h1 { font-size: 32px; }
  .tabre-support-portal .tabre-support-services,
  .tabre-support-news-col, .tabre-support-steps-main, .tabre-support-contact { border-radius: 16px; }
  .tabre-support-portal .tabre-support-service { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 16px; }
  .tabre-support-portal .tabre-support-service-icon { width: 46px; height: 46px; border-radius: 14px; }
  .tabre-support-portal .tabre-support-service-more { font-size: 0; }
  .tabre-support-portal .tabre-support-service-more .icon { width: 18px; height: 18px; }
  .footer { margin-top: 18px; }
}
@media (max-width: 768px) {
  /* phones, and a phone held sideways: below 992px the layout is one column, so the right column would sit under a long
     list. It is hidden instead — the header (search, new topic, account menu) and the drawer already carry what it shows. */
  .col-right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms; }
}

/* ================================================================= profile ================================ */
.profile-card {
  gap: 18px;
  padding: 22px 24px;
  background-color: var(--card-bg, var(--panel));
  background-image:
    radial-gradient(560px 220px at 6% -18%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 72%),
    radial-gradient(460px 200px at 100% -10%, var(--tabre-glass-aurora-3), transparent 74%);
  background-repeat: no-repeat;
}
.profile-head { gap: 6px 20px; }
.profile-avatar { position: relative; }
.profile-avatar .avatar { width: 112px; height: 112px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--brand) 28%, var(--card-line, var(--line))); background: var(--panel); box-shadow: 0 22px 44px -26px var(--tabre-glass-shadow); }
.profile-avatar .online-dot { width: 20px; height: 20px; top: 6px; inset-inline-start: 6px; border-width: 3px; }
.profile-id { padding-top: 6px; gap: 6px; }
.profile-side { padding-top: 6px; }
.profile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.profile-name { font-size: var(--font-size-3xl); letter-spacing: -.02em; }
.profile-handle { margin-top: -2px; }
.profile-meta > span:not([data-slot]) { padding: 3px 11px; border: 1px solid var(--tabre-glass-edge); border-radius: 999px; background: color-mix(in srgb, var(--panel-2) 68%, transparent); }
.profile-meta .icon { width: 13px; height: 13px; margin-inline-end: 5px; }
.profile-stats { padding-top: 16px; gap: 10px; }
.profile-stats .pstat { padding: 12px 14px; border: 1px solid var(--tabre-glass-edge); border-radius: 16px; background: color-mix(in srgb, var(--panel-2) 72%, transparent); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.profile-stats a.pstat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 38%, var(--tabre-glass-edge)); box-shadow: 0 16px 30px -22px var(--tabre-glass-shadow); }
.profile-stats .pstat b { font-size: var(--font-size-xl); }
.profile-main .list-head { padding: 10px 12px; }
.profile-main .tabs .tab { border-radius: 999px; }
.profile-aside { top: calc(var(--topbar-h) + 24px); }
@media (max-width: 700px) {
  .profile-card { padding: 16px 14px; gap: 14px; }
  .profile-head { gap: 10px 14px; }
  .profile-avatar .avatar { width: 76px; height: 76px; border-width: 3px; }
  .profile-id, .profile-side { padding-top: 0; }
  .profile-side { justify-content: flex-start; }
  .profile-name { font-size: var(--font-size-2xl); }
  .profile-meta > span:not([data-slot]) { padding: 2px 9px; }
}

/* ================================================================= settings ================================ */
.settings { display: flex; flex-direction: column; gap: 16px; max-width: 960px; margin: 0 auto; }
/* ---------- hero panels (settings, points) ---------- */
.settings-hero,
.points-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 24px;
  border: 1px solid var(--card-line, var(--line));
  border-radius: var(--card-radius, var(--radius));
  background:
    radial-gradient(560px 240px at 4% -40%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 66%),
    radial-gradient(480px 220px at 100% 130%, var(--tabre-glass-aurora-3), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 90%, transparent), var(--panel));
  box-shadow: var(--card-shadow, var(--shadow)), inset 0 1px 0 var(--tabre-glass-highlight);
}
.settings-hero { display: flex; align-items: center; gap: 16px; }
.settings-hero-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 16px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 28%, transparent), color-mix(in srgb, var(--brand) 12%, transparent));
  color: var(--brand);
  box-shadow: inset 0 1px 0 var(--tabre-glass-highlight);
}
.settings-hero-icon .icon { width: 24px; height: 24px; }
.settings-hero-copy h1 { margin: 0 0 3px; font-size: var(--font-size-3xl); letter-spacing: -.025em; }
.settings-hero-copy p { margin: 0; max-width: 62ch; }
.points-hero { border-color: color-mix(in srgb, var(--brand) 22%, var(--card-line, var(--line))); }
.points-hero-balance { font-size: 42px; letter-spacing: -.03em; }
.settings-grid { grid-template-columns: 262px minmax(0, 1fr); gap: var(--gap); }
.settings-menu {
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--card-line, var(--line));
  border-radius: var(--card-radius, var(--radius));
  background: var(--card-bg, var(--panel));
  box-shadow: var(--card-shadow, var(--shadow));
  top: calc(var(--topbar-h) + 20px);
}
.settings-menu h4 { display: flex; align-items: center; gap: 7px; margin: 14px 0 4px; padding: 0 8px; color: var(--text-subtle); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.settings-menu h4:first-child { margin-top: 2px; }
.settings-menu h4 .icon { width: 13px; height: 13px; }
.settings-menu .side-link { padding: 8px 11px; border-radius: 11px; color: var(--text); font-weight: 550; }
.settings-menu .side-link:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); }
.settings-menu .side-link.active { background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 20%, transparent), color-mix(in srgb, var(--brand) 10%, transparent)); color: var(--brand); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.settings-menu .settings-chev { width: 14px; height: 14px; opacity: .45; }
.settings-menu .side-link.active .settings-chev { opacity: 1; }
.settings-body { min-width: 0; padding: 20px 22px; border: 1px solid var(--card-line, var(--line)); border-radius: var(--card-radius, var(--radius)); background: var(--card-bg, var(--panel)); box-shadow: var(--card-shadow, var(--shadow)); }
.settings-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.settings-current { margin: 0; font-size: var(--font-size-xl); }
.settings-body .settings-form { max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; }
.settings-body .form-row { margin-bottom: 14px; }
.settings-body .form-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.settings-body textarea { min-height: 96px; }
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-body { padding: 16px; }
}