/* ============================================================================
   Muse Doc — design system
   Warm archival palette, print-ready report furniture, responsive shell.
   ========================================================================== */

:root {
  --ink: #2a2140;
  --muted: #6b6178;
  --faint: #9c95a3;
  --line: #ecdfcb;
  --line-soft: #f5ecdd;
  --bg: #fcf7ef;
  --surface: #ffffff;
  --surface-2: #fff9f0;
  --accent: #b65d12;
  --accent-ink: #8a4409;
  --accent-soft: #fcefd9;
  --indigo: #3a3f86;
  --indigo-soft: #ecedf8;
  --gold: #e8a317;
  --gold-soft: #fdf3d6;
  --good: #2f7a4f;
  --good-soft: #e7f4ec;
  --warn: #a8720f;
  --warn-soft: #fdf2dd;
  --bad: #b4392f;
  --bad-soft: #fbe9e7;
  --info: #2d5f8a;
  --info-soft: #e7f0f8;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(31, 27, 36, .06), 0 8px 24px rgba(31, 27, 36, .06);
  --shadow-lg: 0 18px 48px rgba(31, 27, 36, .18);
  --side-w: 252px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--font);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
img { max-width: 100%; }
.mono, .cell-link.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.pad { padding: 0 26px 6px; }
.wide { width: 100%; }
.hidden { display: none !important; }
.grow { flex: 1 1 auto; min-width: 180px; }
.spacer { flex: 1; }

/* ------------------------------- splash -------------------------------- */

.boot-splash {
  height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: var(--muted);
}
.boot-mark, .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--accent)); color: #fff;
  font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.boot-splash .boot-mark { width: 60px; height: 60px; font-size: 22px; border-radius: 16px; }
.boot-mark svg, .brand-mark svg, .platform-mark svg { width: 100%; height: 100%; display: block; }
.platform-mark { background: none; }
.boot-error { padding: 60px 30px; max-width: 560px; margin: 0 auto; }
.boot-error h2 { color: var(--bad); }

/* -------------------------------- shell -------------------------------- */

.shell { display: flex; min-height: 100vh; }
.shell[hidden] { display: none; }

.sidebar {
  width: var(--side-w); flex: 0 0 var(--side-w);
  background: #fffaf2; color: var(--ink);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-top { padding: 18px 16px 14px; border-bottom: 4px solid transparent;
  border-image: repeating-linear-gradient(90deg, #b65d12 0 14px, #e8a317 14px 22px, #3a3f86 22px 36px) 1; }
.brand { display: flex; gap: 11px; align-items: center; color: inherit; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 9px; background: #fff; padding: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-family: var(--serif); font-size: 15.5px; color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 11.5px; color: var(--muted); }

.side-nav { flex: 1; padding: 8px 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.nav-group {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--indigo); opacity: .7; padding: 16px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px;
  color: var(--ink); font-size: 14px;
}
.nav-item:hover { background: var(--accent-soft); text-decoration: none; }
.nav-item.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
.nav-ico { width: 18px; text-align: center; opacity: .85; }

.side-foot { border-top: 1px solid var(--line); padding: 12px 14px 16px; }
.side-user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.side-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-user-text strong { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-text span { font-size: 11px; color: var(--muted); }
.side-foot .icon-btn { color: var(--muted); }
.side-legal { font-size: 10.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.4; }

.main { flex: 1; min-width: 0; padding-bottom: 60px; }
.main.bare { padding: 0; }
body.gallery-mode .sidebar { display: none; }

/* ------------------------------- buttons ------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: 9px; border: 1px solid transparent;
  background: var(--surface); color: var(--ink);
  font: 600 13.5px/1.2 var(--font); cursor: pointer;
  transition: .14s; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(77, 36, 64, .25); }
.btn.primary:hover { background: var(--accent-ink); }
.btn.secondary { background: var(--surface); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.btn.danger, .btn.danger-ghost { color: var(--bad); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger-ghost { background: transparent; border-color: transparent; }
.btn.danger-ghost:hover { background: var(--bad-soft); }
.btn.small { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.icon-btn {
  border: none; background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: 7px;
  color: var(--muted); font-size: 15px; line-height: 1;
}
.icon-btn:hover { background: rgba(0, 0, 0, .07); color: var(--ink); }
.icon-btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
.link-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--accent); font: 600 13px var(--font);
}
.link-btn:hover { text-decoration: underline; }

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-actions.center { justify-content: center; }

/* ------------------------------- fields -------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.half { flex: 1 1 calc(50% - 6px); }
.field.full { flex: 1 1 100%; }
.field-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.field-label .req { color: var(--bad); }
.input {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: 14.5px var(--font);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input.select { appearance: none; padding-right: 36px; min-height: 40px; cursor: pointer;
  text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6a61' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.input.select:hover { border-color: #d3ccbf; }
.input.select:focus { box-shadow: 0 0 0 3px rgba(182, 93, 18, .14); }
.input.select option { color: var(--ink); background: var(--surface); }
.input.select option[value=""] { color: #a39d92; }
.input.select optgroup { font-weight: 800; color: var(--muted); }
.input.select:disabled { background-color: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.input.select.small { padding: 6px 26px 6px 9px; font-size: 13px; }
.input.search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.6' stroke='%236f6a61' stroke-width='1.6' fill='none'/%3E%3Cpath d='M9.5 9.5L13 13' stroke='%236f6a61' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 11px center; padding-left: 33px;
}
.textarea { min-height: 84px; resize: vertical; }
.help { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; line-height: 1.5; }
.field-msg { font-size: 12px; color: var(--bad); }
.field.has-error .input, .field.has-error .combo-input { border-color: var(--bad); }

/* searchable combo-box (categories, materials, colours…) */
.combo { position: relative; }
.combo-box { position: relative; }
.combo-input {
  display: block; width: 100%; padding: 9px 40px 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: 14.5px var(--font); text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
}
.combo-input::placeholder { color: #a39d92; opacity: 1; }
.combo-input:hover { border-color: #d3ccbf; }
.combo-input:focus, .combo.is-open .combo-input {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(182, 93, 18, .14);
}
.combo-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s, background .15s, color .15s;
}
.combo-toggle:hover { background: var(--surface-2); color: var(--ink); }
.combo.is-open .combo-toggle { transform: translateY(-50%) rotate(180deg); color: var(--accent); }
.combo-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(29, 27, 24, .16);
}
.combo-pop[hidden] { display: none; }
.combo-list { list-style: none; margin: 0; padding: 0; }
.combo-group {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.combo-item {
  padding: 8px 10px; border-radius: 7px; font-size: 14px; color: var(--ink);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-item.is-active { background: #f5eef3; }
.combo-item[aria-selected="true"] { color: var(--accent); font-weight: 700; }
.combo-item mark { background: #f3e2b3; color: inherit; border-radius: 3px; padding: 0 1px; }
.check-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.readonly-value {
  padding: 9px 12px; background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted);
}

.grid { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------- pills --------------------------------- */

.pill {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: #eee9e0; color: var(--muted); white-space: nowrap;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.neutral { background: #eee9e0; color: var(--muted); }

.meter {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: var(--bad-soft); color: var(--bad);
}
.meter.mid { background: var(--warn-soft); color: var(--warn); }
.meter.good { background: var(--good-soft); color: var(--good); }
.tiny-flag { font-size: 11px; color: var(--faint); font-style: italic; }

/* ------------------------------ view head ------------------------------ */

.view-head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between;
  padding: 26px 26px 18px; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 1px 1px, rgba(182, 93, 18, .16) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(180deg, #fff6e8, transparent);
}
.view-head-main { min-width: 0; }
.view-title { margin: 4px 0 4px; font-size: 26px; }
.view-sub { margin: 0; color: var(--muted); font-size: 13.5px; }
.view-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--muted); }
.crumb { color: var(--muted); }
.crumb.now { color: var(--accent); font-weight: 700; }
.sep { color: var(--faint); }
.title-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acc-chip {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-ink);
  padding: 3px 9px; border-radius: 6px;
}
.err-badge { background: var(--bad-soft); color: var(--bad); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.complete-host { display: inline-flex; gap: 7px; align-items: center; margin-top: 4px; }
.complete-label { font-size: 12px; color: var(--muted); }

/* -------------------------------- tabs --------------------------------- */

.tabbar {
  display: flex; gap: 3px; padding: 0 26px;
  border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--surface);
}
.tab {
  border: none; background: none; cursor: pointer;
  padding: 13px 14px; font: 600 13.5px var(--font);
  color: var(--muted); border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--accent); border-bottom-color: var(--gold); }
.tab-badge { font-size: 10.5px; background: var(--bad-soft); color: var(--bad); border-radius: 999px; padding: 1px 6px; }

/* -------------------------------- panels ------------------------------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.panel-head h2 { margin: 0; font-size: 16.5px; }
.panel-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.sub-head h3 { margin: 0; font-size: 15px; }

/* -------------------------------- stats -------------------------------- */

.stat-row, .admin-stat-row {
  display: grid; gap: 12px; padding: 20px 26px 4px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.admin-stat-row { padding: 0 0 16px; }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow);
}
.stat.link:hover { border-color: var(--accent); text-decoration: none; }
.stat-value { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; }
.stat-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stat-sub { font-size: 11.5px; color: var(--faint); }
.stat.good .stat-value { color: var(--good); }
.stat.warn .stat-value { color: var(--warn); }
.stat.bad .stat-value { color: var(--bad); }
.stat.info .stat-value { color: var(--info); }

.quick-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 26px 0; }
.quick {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; color: var(--ink); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow);
}
.quick:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.quick-ico { opacity: .8; }

/* ------------------------------- dashboard ----------------------------- */

.dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; padding: 18px 26px 0; }
@media (max-width: 980px) { .dash-cols { grid-template-columns: 1fr; } }
/* Signed-in dashboard header: bunting edge, warm gradient, indigo greeting. */
.view-head.dash-head {
  background: repeating-linear-gradient(90deg, #b65d12 0 14px, #e8a317 14px 22px, #3a3f86 22px 36px) left bottom / 100% 4px no-repeat,
    radial-gradient(circle at 1px 1px, rgba(182, 93, 18, .16) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(135deg, #fff1d6, #fffaf2 70%);
}
.view-head.dash-head .view-title { color: var(--indigo); }

.mini-list { display: flex; flex-direction: column; }
.mini-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
.mini-row:last-child { border-bottom: none; }
.mini-row:hover { text-decoration: none; background: var(--surface-2); }
.mini-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mini-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-thumb {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px;
  object-fit: cover; background: var(--accent-soft); border: 1px solid var(--line);
}
.mini-thumb.sm { width: 34px; height: 34px; flex-basis: 34px; border-radius: 6px; font-size: 10px; }
.mini-thumb.empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 11px; font-weight: 700;
}

.att-block {
  border: 1px solid var(--line); border-left: 4px solid var(--faint);
  border-radius: var(--radius-sm); padding: 13px 15px; background: var(--surface-2);
}
.att-block strong { display: block; font-size: 14px; margin-bottom: 3px; }
.att-block p { margin: 0 0 9px; font-size: 13px; color: var(--muted); }
.att-block.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.att-block.warn { border-left-color: var(--warn); background: var(--warn-soft); }

.banner {
  margin: 16px 26px 0; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; display: flex; gap: 8px; flex-wrap: wrap;
}
.banner.warn { background: var(--warn-soft); border: 1px solid #efd9a8; color: #6d4a08; }

/* ------------------------------ catalogue ------------------------------ */

.list-toolbar { display: flex; gap: 10px; padding: 16px 26px; flex-wrap: wrap; align-items: center; }
.table-host { padding: 0 26px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13.5px; }
.data-table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover td { background: var(--accent-soft); }
.data-table tr.muted-row td { opacity: .62; }
.data-table .cell-link { font-weight: 700; }
.data-table td.row-actions { white-space: nowrap; text-align: right; }
.cat-table td:nth-child(2) { white-space: nowrap; }

/* ------------------------------ empty state ---------------------------- */

.empty-state {
  text-align: center; padding: 54px 24px; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  margin: 18px 0;
}
.empty-glyph { font-size: 40px; color: var(--accent); opacity: .55; margin-bottom: 6px; }
.empty-state h3 { margin: 6px 0; color: var(--ink); font-size: 18px; }
.empty-state p { margin: 0 auto 14px; max-width: 460px; font-size: 13.5px; }

/* -------------------------------- forms -------------------------------- */

.form-body { padding: 20px 26px; display: flex; flex-direction: column; gap: 18px; }
.panel .grid { gap: 12px; }
.help.wide, p.help.wide { padding: 16px 26px 0; }

.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--surface-2); text-align: center;
  padding: 30px 20px; transition: .15s;
}
.dropzone:focus, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dz-glyph { font-size: 30px; color: var(--accent); }
.dz-lead { margin: 8px 0 12px; font-size: 14.5px; }
.dz-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.dz-help { margin: 12px 0 0; font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }

.media-summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sum-item { font-size: 13px; font-weight: 700; }
.ingest-progress { display: flex; flex-direction: column; gap: 7px; }
.progress { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
.gallery-empty {
  grid-column: 1 / -1; text-align: center; padding: 34px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted);
}
.gallery-empty-glyph { font-size: 30px; color: var(--accent); opacity: .5; }
.media-tile {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface); cursor: pointer; transition: .14s; position: relative;
}
.media-tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.media-tile.is-primary { outline: 2px solid var(--accent); }
.media-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--accent-soft); }
.media-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; color: var(--accent); font-size: 26px;
}
.media-tile-bar { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; font-size: 11.5px; }
.media-kind {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  color: var(--info); background: var(--info-soft); border-radius: 4px;
  padding: 1px 5px; align-self: flex-start;
}
.media-kind.video, .media-kind.model3d { color: var(--accent-ink); background: var(--accent-soft); }
.media-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.media-size { color: var(--faint); }
.media-add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2);
  aspect-ratio: 4/3; cursor: pointer; color: var(--muted); font-size: 12.5px;
}
.media-add-tile .plus { font-size: 24px; color: var(--accent); }
.media-add-tile:hover { border-color: var(--accent); color: var(--accent); }

.events-host, .event-row { display: flex; flex-direction: column; gap: 8px; }
.event-row { flex-direction: row; gap: 8px; align-items: center; }
.input.grow { flex: 1; }

.edit-preview { display: flex; gap: 14px; align-items: center; }
.edit-preview img { width: 130px; height: 98px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.edit-preview-meta { font-size: 13px; color: var(--muted); }
.modal-inline-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ------------------------------- lightbox ------------------------------ */

.modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(24, 21, 18, .55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.modal {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
  animation: pop .16s ease-out;
}
.modal.sm { max-width: 440px; }
.modal.lg { max-width: 780px; }
.modal.xl { max-width: 1040px; }
@keyframes pop { from { transform: translateY(8px) scale(.985); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
}
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px; overflow: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 14px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-2);
  border-radius: 0 0 14px 14px;
}
.confirm-text { margin: 0; font-size: 14.5px; }
.stack { display: flex; flex-direction: column; gap: 13px; }

.lightbox {
  position: fixed; inset: 0; z-index: 95; background: #14120f;
  display: flex; flex-direction: column;
}
.lb-tools {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(255, 255, 255, .06); color: #e9e3d8;
}
.lb-tools .icon-btn { color: #d8d1c5; }
.lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-video { max-width: 100%; max-height: 100%; }
.lb-pdf { width: 100%; height: 100%; border: none; background: #fff; }
.lb-caption { padding: 12px 16px; background: rgba(255, 255, 255, .06); color: #cfc7ba; display: flex; gap: 14px; align-items: center; }
.lb-cap { margin: 0; font-size: 13.5px; flex: 1; }
.lb-counter { font-size: 12.5px; color: #98907f; }
.lb-meta { display: flex; gap: 18px; margin: 0; font-size: 12.5px; flex-wrap: wrap; }
.lb-meta dt { color: #98907f; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.lb-meta dd { margin: 2px 0 0; color: #e9e3d8; }
.lb-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .55); color: #e9e3d8; padding: 6px 13px; border-radius: 999px; font-size: 12px; }
.lb-missing { text-align: center; color: #98907f; }
.viewer-holder { position: absolute; inset: 0; }
.viewer-canvas { width: 100%; height: 100%; display: block; }
.stereo { display: flex; width: 100%; height: 100%; }
.stereo-half { flex: 1; background-size: cover; background-position: center; }
.stereo[data-mode="anaglyph"] .stereo-half.r { display: none; }
.stereo[data-mode="anaglyph"] .stereo-half.l { filter: drop-shadow(0 0 0 red); }

/* -------------------------------- toasts ------------------------------- */

.toast-host {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column; gap: 9px; max-width: 380px;
}
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  background: #26221d; color: #f4efe6; padding: 11px 15px;
  border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13.5px;
  opacity: 0; transform: translateY(8px); transition: .25s;
}
.toast.show { opacity: 1; transform: none; }
.toast-icon {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 19px;
  background: var(--good); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.toast.error .toast-icon { background: var(--bad); }
.toast.warn .toast-icon { background: var(--warn); }

/* -------------------------------- reports ------------------------------ */

.report-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 18px 26px; align-items: start; }
@media (max-width: 900px) { .report-layout { grid-template-columns: 1fr; } }
.filter-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 14px;
}
.fp-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.fp-head h3 { margin: 0; font-size: 15px; }
.fp-body { padding: 14px 15px; display: flex; flex-direction: column; gap: 13px; max-height: 70vh; overflow-y: auto; }
.fp-sub { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.col-item { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.report-main { min-width: 0; }
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 26px 0; }
.preset-chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 7px 14px; font: 600 12.5px var(--font); color: var(--muted); cursor: pointer;
}
.preset-chip:hover { border-color: var(--accent); color: var(--accent); }
.summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.saved-views { padding: 0 15px 15px; display: flex; flex-direction: column; gap: 7px; }
.saved-row { display: flex; align-items: center; gap: 7px; }
.saved-name { flex: 1; text-align: left; border: none; background: var(--surface-2); border-radius: 7px; padding: 7px 10px; font: 600 12.5px var(--font); cursor: pointer; }
.saved-name:hover { background: var(--accent-soft); }
.group-row td { background: var(--accent-soft); font-weight: 700; }
.group-name { font-family: var(--serif); font-size: 15px; }
.group-count, .group-sum { font-size: 11.5px; color: var(--muted); margin-left: 10px; font-weight: 600; }
.sort-arrow { margin-left: 5px; font-size: 9px; color: var(--accent); }
.report-foot { display: flex; flex-direction: column; gap: 3px; padding: 14px 26px 0; font-size: 12px; color: var(--muted); }
.ph-filters { font-size: 12.5px; color: var(--muted); }

/* classification banners */
.class-select { max-width: 190px; }
.class-banner {
  padding: 11px 16px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-weight: 900; letter-spacing: .18em; text-align: center; text-transform: uppercase;
  border: 2px solid transparent;
}
.class-banner.cls-sensitive { background: var(--warn-soft); color: #8a5a06; border-color: #e9c777; }
.class-banner.cls-confidential { background: var(--bad-soft); color: var(--bad); border-color: #eaa79f; }
.class-banner.cls-none { display: none; }
.classification {
  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
}
.classification.sensitive { background: var(--warn-soft); color: #8a5a06; border: 1px solid #e9c777; }
.classification.confidential { background: var(--bad-soft); color: var(--bad); border: 1px solid #eaa79f; }
.classification-demo { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------- print furniture -------------------------- */

.brand-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 2px solid var(--ink); margin-bottom: 16px;
}
.brand-id { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; }
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-family: var(--serif); font-size: 18px; }
.brand-text span { font-size: 12.5px; color: var(--muted); }
.brand-meta { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.brand-meta strong { font-family: var(--serif); font-size: 17px; }
.brand-meta span { font-size: 12px; color: var(--muted); }
.brand-foot {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 18px; padding-top: 9px;
  font-size: 10.5px; color: var(--muted);
}
.brand-owner { font-weight: 700; }
#print-host { display: none; }

/* ------------------------------- placards ------------------------------ */

.placard-sheet { padding: 6px 2px; }
.placard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.placard-card {
  margin: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.placard-qr svg { width: 100%; height: auto; max-width: 170px; }
.placard-caption { display: flex; flex-direction: column; gap: 3px; }
.placard-caption strong { font-family: var(--serif); font-size: 15px; }
.placard-acc { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--accent); }
.placard-credit { font-size: 11.5px; color: var(--muted); }
.placard-url { font-size: 10px; color: var(--faint); word-break: break-all; }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 18px 26px; }
.pick-card {
  display: flex; gap: 11px; align-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px;
}
.pick-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick-card .mini-thumb { flex: 0 0 44px; }
.pick-text { display: flex; flex-direction: column; min-width: 0; }
.pick-text strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------- gallery ------------------------------ */

.gallery-mode .main { padding: 0; }
.gallery-head {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 24px 26px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.gallery-logo { height: 54px; width: 54px; object-fit: contain; border-radius: 9px; border: 1px solid var(--line); }
.gallery-id h1 { margin: 0; font-size: 24px; }
.gallery-id p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.gallery-brand { margin-left: auto; font-size: 11.5px; color: var(--faint); letter-spacing: .06em; }
.gallery-tools { display: flex; gap: 10px; padding: 16px 26px; flex-wrap: wrap; align-items: center; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding: 0 26px 30px; }
.g-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: .16s;
}
.g-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.g-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: flex;
  align-items: center; justify-content: center; background: var(--accent-soft);
  color: var(--accent); font-family: var(--serif); font-size: 26px;
}
.g-card-body { padding: 13px 15px; }
.g-card-body h3 { margin: 0 0 4px; font-size: 15.5px; }
.g-card-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.g-card-share { display: flex; gap: 6px; margin-top: 10px; }
.g-ico {
  width: 27px; height: 27px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; font-weight: 800;
  color: var(--muted); cursor: pointer;
}
.g-ico:hover { border-color: var(--accent); color: var(--accent); }
.gallery-foot { padding: 18px 26px 30px; color: var(--faint); font-size: 11.5px; text-align: center; }
.g-detail { padding: 20px 26px 40px; max-width: 1000px; margin: 0 auto; }
.g-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0; }
.g-facts dt { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.g-facts dd { margin: 3px 0 0; font-size: 14px; }

/* --------------------------- share modal bits -------------------------- */

.share-body { display: flex; flex-direction: column; gap: 14px; }
.share-url { display: flex; gap: 8px; }
.share-url .input { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.share-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); font: 700 13px var(--font); cursor: pointer; color: var(--ink);
}
.share-btn:hover { text-decoration: none; border-color: var(--accent); }
.share-btn.wa { background: #e9f7ee; color: #1f7a45; border-color: #c9e9d5; }
.share-btn.fb { background: #eaf1fb; color: #2b5ba8; border-color: #cfdcf3; }
.share-btn.ig { background: #fbeef6; color: #a13a76; border-color: #f1d8e8; }
.share-btn.x { background: #eef0f2; color: #333; border-color: #dde1e5; }

/* -------------------------------- login -------------------------------- */

.login-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 880px) { .login-wrap { grid-template-columns: 1fr; } }
.login-art {
  background: radial-gradient(1200px 600px at 20% 10%, #fff1d6, #fcf7ef 70%);
  color: var(--ink); padding: 60px 54px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.login-art h2 { font-size: 40px; line-height: 1.15; margin: 0; color: var(--indigo); }
.login-art p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 460px; }
.login-art-brand { font-size: 12.5px !important; letter-spacing: .06em; color: var(--accent-ink) !important; margin-top: 20px !important; }
.login-card {
  align-self: center; margin: 40px 34px; padding: 34px 32px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 15px; max-width: 460px; width: calc(100% - 68px);
}
.login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.login-brand img { height: 56px; }
.login-brand h1 { margin: 4px 0 0; font-size: 27px; }
.login-brand p { margin: 0; color: var(--muted); font-size: 13.5px; }
.login-hint { border-top: 1px solid var(--line-soft); padding-top: 13px; }
.login-hint p { margin: 0 0 5px; font-size: 12px; color: var(--faint); }

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; color: var(--faint);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------- OTP flow ----------------------------- */

.otp-channels { display: flex; flex-direction: column; gap: 9px; }
.otp-channel {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); font: 600 13.5px var(--font); color: var(--ink); cursor: pointer;
  transition: .14s;
}
.otp-channel:hover { border-color: var(--accent); background: var(--accent-soft); }
.otp-channel-ico { font-size: 16px; }
.otp-box {
  font: 700 26px/1.2 ui-monospace, Menlo, monospace;
  letter-spacing: .42em; text-align: center; padding: 12px;
}
.otp-demo {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  background: var(--warn-soft); border: 1px dashed #e2c183;
  border-radius: var(--radius-sm); padding: 10px 13px;
}
.otp-demo-code {
  font: 800 21px/1 ui-monospace, Menlo, monospace; letter-spacing: .18em;
  color: var(--accent-ink);
}

/* --------------------- contact change requests ------------------------ */

.change-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.change-row {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 4px solid var(--faint);
  border-radius: var(--radius-sm); padding: 9px 13px; background: var(--surface-2);
  font-size: 13px;
}
.change-row.pending { border-left-color: var(--warn); background: var(--warn-soft); }
.change-row.approved { border-left-color: var(--good); background: var(--good-soft); }
.change-row.rejected { border-left-color: var(--bad); background: var(--bad-soft); }
.change-field { font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.change-vals { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; flex: 1; min-width: 160px; }

.change-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.change-move {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: ui-monospace, Menlo, monospace; font-size: 13.5px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.change-old { color: var(--muted); text-decoration: line-through; }
.change-arrow { color: var(--accent); font-weight: 800; }
.change-new { color: var(--ink); font-weight: 700; }
.change-card.rejected .change-new { text-decoration: line-through; color: var(--muted); }
.login-card .side-legal { color: var(--faint); text-align: center; }

/* -------------------------------- admin -------------------------------- */

.admin-body { padding: 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.admin-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.admin-toolbar .input { max-width: 340px; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.admin-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow);
}
.admin-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-card h3 { margin: 0; font-size: 17px; }
.admin-card .card-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grant-row { display: flex; gap: 6px; flex-wrap: wrap; }
.warn-line { margin: 0; font-size: 12.5px; color: var(--warn); font-weight: 700; }
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity-list li {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.act-time { color: var(--faint); font-size: 12px; min-width: 145px; }
.act-kind {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-ink); padding: 2px 7px; border-radius: 5px;
}
.act-kind.pause, .act-kind.credential-reset { background: var(--bad-soft); color: var(--bad); }
.act-kind.resume, .act-kind.grant { background: var(--good-soft); color: var(--good); }
.act-tenant { font-weight: 700; }
.act-detail { color: var(--muted); }

/* ------------- two-tier login / invitation / confirmation ------------- */

.login-col {
  display: flex; flex-direction: column; gap: 18px;
  align-self: center; margin: 40px 34px; max-width: 460px; width: calc(100% - 68px);
}
.login-col .login-card { margin: 0; max-width: none; width: 100%; align-self: stretch; }

.super-login { background: var(--bg); border: 1px dashed var(--line); box-shadow: none; padding: 20px 22px; gap: 12px; }
.super-login-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.super-login-head strong { font-size: 14.5px; letter-spacing: .02em; }
.super-login-head span {
  font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase;
}
.super-login-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.super-login-grid .btn { height: 42px; }
.super-login .help { margin: 0; font-size: 12px; }
@media (max-width: 620px) { .super-login-grid { grid-template-columns: 1fr; } }

/* invitation links opened from email */
.join-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 34px 18px; width: 100%;
  background: radial-gradient(1200px 600px at 20% 10%, #fff1d6, #fcf7ef 70%);
}
.join-card {
  width: 100%; max-width: 520px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 32px 30px; display: flex; flex-direction: column; gap: 16px;
}
.join-body { display: flex; flex-direction: column; gap: 13px; }
.join-body .btn { text-align: center; justify-content: center; }
.join-body .field-msg { margin: 0; }
.join-card input[readonly] { background: var(--bg); color: var(--muted); }

.link-demo { flex-direction: column; align-items: flex-start; gap: 7px; }
.link-url {
  font: 600 12.5px/1.45 ui-monospace, Menlo, monospace;
  color: var(--accent-ink); word-break: break-all; text-decoration: underline;
}

.confirm-ok {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border: 1px solid #bfe0cc; background: var(--good-soft);
  border-radius: var(--radius-sm);
}
.confirm-ok strong { color: var(--good); font-size: 15px; }
.confirm-ok p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* Super Admin console — invitation list */
.invite-panel { margin-bottom: 18px; }
.invite-row {
  display: grid; grid-template-columns: minmax(180px, 1.5fr) auto auto 1fr;
  gap: 12px; align-items: center; padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.invite-row:first-child { border-top: 0; padding-top: 0; }
.invite-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite-who strong { font-size: 14px; }
.invite-who span { font-size: 12.5px; }
.invite-row .row-actions { justify-content: flex-end; }
.invite-row.expired, .invite-row.revoked { opacity: .62; }
@media (max-width: 780px) {
  .invite-row { grid-template-columns: 1fr; }
  .invite-row .row-actions { justify-content: flex-start; }
}

/* ------------- pricing pane, signup & payment wizard ----------------- */

.price-pane { justify-content: flex-start; padding-top: 44px; padding-bottom: 44px; overflow-y: auto; }
.price-head h2 { font-size: 34px; }
.price-head p { font-size: 14.5px; }
.price-pane > .price-head {
  padding: 18px 20px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, #b65d12 0 14px, #e8a317 14px 22px, #3a3f86 22px 36px) left bottom / 100% 4px no-repeat,
    radial-gradient(circle at 1px 1px, rgba(182, 93, 18, .16) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    linear-gradient(180deg, #fff6e8, #ffffff);
}
.price-pane .service-icon { background: linear-gradient(135deg, var(--gold-soft), var(--accent-soft)); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-top: 6px; }
.plan-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 13px 14px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 12px;
  color: var(--ink); cursor: pointer; font: inherit; transition: .15s;
}
.plan-card:hover { border-color: var(--gold); background: var(--surface-2); transform: translateY(-1px); }
.plan-card.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-term { font: 700 14px/1.2 var(--font); letter-spacing: .02em; }
.plan-price { font: 800 22px/1.1 var(--font); color: var(--accent-ink); }
.plan-note { font-size: 11.5px; color: var(--muted); }

.proceed-btn { margin-top: 4px; }
.price-hint, .price-renew { margin: 0; font-size: 12.5px; color: var(--muted); }
.benefits-host { overflow-x: auto; margin-top: 4px; }
.benefits-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.benefits-table th, .benefits-table td {
  border-bottom: 1px solid var(--line); padding: 6px 7px;
  text-align: left; color: var(--muted); vertical-align: top;
}
.benefits-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--indigo);
}
.benefits-table th:first-child { width: 36%; font-weight: 600; color: var(--ink); }
.benefits-table .is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

/* ---------------------------- signup wizard --------------------------- */

.signup-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 34px 18px; width: 100%;
  background: radial-gradient(1200px 600px at 20% 10%, #fff1d6, #fcf7ef 70%);
}
.signup-card { max-width: 560px; }
.signup-head { display: flex; flex-direction: column; gap: 4px; }
.signup-title { margin: 0; font-size: 24px; }
.signup-sub { margin: 0; color: var(--muted); font-size: 13.5px; }

.step-dots { display: flex; gap: 7px; flex-wrap: wrap; }
.step-dot {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); background: var(--bg);
  padding: 5px 9px; border-radius: 999px;
}
.step-dot.is-on { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.step-dot.is-done { color: var(--good); border-color: #bfe0cc; background: var(--good-soft); }

.plan-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.plan-summary strong { font-size: 15px; }
.plan-summary span { color: var(--muted); font-size: 13px; }
.plan-summary .link-btn { margin-left: auto; }

.free-note {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  border: 1px solid #bfe0cc; background: var(--good-soft); border-radius: var(--radius-sm);
}
.free-note strong { color: var(--good); font-size: 15px; }
.free-note p { margin: 0; color: var(--muted); font-size: 13.5px; }

.wide-link { display: block; text-align: center; }

/* ------------------------------ payment ------------------------------ */

.pay-amount-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--accent-ink);
}
.pay-amount-line strong { font-size: 18px; }
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-tab {
  padding: 11px 10px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); font: 600 13.5px var(--font); color: var(--ink); cursor: pointer;
}
.pay-tab:hover { border-color: var(--accent); }
.pay-tab.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.pay-pane { display: flex; flex-direction: column; gap: 12px; }

.upi-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 16px; border: 1px dashed var(--line); background: var(--bg);
  border-radius: var(--radius-sm);
}
.qr-box { background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.qr-svg { display: block; }
.qr-box .qr-svg svg { display: block; width: 184px; height: 184px; }
.upi-id { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.upi-id strong { font: 700 15px ui-monospace, Menlo, monospace; }
.pay-amount { font: 800 20px/1 var(--font); color: var(--accent-ink); }

.card-form { display: flex; flex-direction: column; gap: 12px; }
.card-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------- online / offline choice on the home page -------------- */
.mode-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 6px; border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--radius-sm);
}
.mode-btn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 13px; border: 1px solid transparent; background: transparent;
  border-radius: calc(var(--radius-sm) - 3px); cursor: pointer; font: inherit; text-align: left;
}
.mode-btn strong { font-size: 14px; color: var(--ink); }
.mode-btn span { font-size: 11.5px; color: var(--faint); }
.mode-btn:hover { background: var(--surface); }
.mode-btn.is-on {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 1px 4px rgba(60,40,20,.08);
}
.mode-btn.is-on strong { color: var(--accent-ink); }

.offline-feats { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.offline-feats li { font-size: 12.8px; color: var(--muted); }
.offline-feats li::marker { color: var(--accent); }

.offline-points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.offline-points li { display: flex; flex-direction: column; gap: 2px; }
.offline-points strong { font-size: 14.5px; color: var(--indigo); }
.offline-points span { font-size: 13px; color: var(--muted); max-width: 470px; }
.offline-os {
  margin-top: 14px !important; font-size: 12.5px !important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted) !important;
}
.compat-box {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.compat-box > strong { font-size: 14px; color: var(--indigo); }
.compat-list { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 8px; }
.compat-list li { display: grid; grid-template-columns: 74px 1fr; gap: 2px 10px; font-size: 13px; }
.compat-os { font-weight: 600; color: var(--ink); }
.compat-status { color: var(--accent-ink); font-size: 12px; }
.compat-note { grid-column: 2; color: var(--muted); font-size: 12px; }

.plan-card.light {
  border-color: var(--line); background: var(--surface); color: var(--ink);
}
.plan-card.light:hover { border-color: var(--accent); background: var(--accent-soft); }
.plan-card.light.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-card.light .plan-price { color: var(--accent-ink); }
.plan-card.light .plan-note { color: var(--faint); }

.licence-box {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 16px; border: 1px dashed var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.licence-key { font: 800 21px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--accent-ink); word-break: break-all; }
.lic-key { font: 700 12.5px ui-monospace, Menlo, monospace; background: var(--bg); border: 1px solid var(--line-soft); padding: 2px 6px; border-radius: 6px; }

/* ------------- backup vault table in Settings ------------------------ */
.vault-host { overflow-x: auto; margin-top: 10px; }
.vault-host .data-table { font-size: 13px; }

.email-preview {
  display: flex; flex-direction: column; gap: 7px; padding: 13px 15px;
  border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-sm);
}
.email-body {
  margin: 0; white-space: pre-wrap; overflow: auto; max-height: 250px;
  font: 12.5px/1.5 ui-monospace, Menlo, monospace; color: var(--ink);
  background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px;
}

/* ------------------- dashboard membership / admin pricing ------------- */

.membership-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 6px 26px 0;
}
.pricing-panel { margin-bottom: 18px; }
.price-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 8px 0; }
.card-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---------- catalogue form: numbered section stepper ---------- */

.form-head + .tabbar {
  gap: 6px; padding: 10px 22px; background: var(--surface-2);
}
.form-head + .tabbar .tab {
  flex: 0 1 auto; align-items: center; gap: 9px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); border-bottom: 2px solid var(--line);
  transition: .13s;
}
.form-head + .tabbar .tab:hover {
  color: var(--ink); border-color: #d6cfc2; transform: translateY(-1px);
}
.form-head + .tabbar .tab.is-on {
  color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 2px 8px rgba(106, 53, 88, .12);
}
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  background: #f3f0ea; border: 1px solid var(--line);
  font: 700 12px/1 var(--font); color: var(--muted);
}
.tab.is-on .step-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab.is-filled .step-no { background: var(--good-soft); border-color: #bfe0cc; color: var(--good); }
.form-head + .tabbar .tab.has-error .step-no { background: var(--bad-soft); border-color: #eec4c4; color: var(--bad); }
.tab-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.tab-label { font: 700 12.5px/1.2 var(--font); }
.tab-hint {
  font-size: 10.5px; font-weight: 500; color: var(--faint);
  max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-done { color: var(--good); font-weight: 800; font-size: 13px; }
@media (max-width: 1100px) { .tab-hint { display: none; } }

.form-panel-head { justify-content: flex-start; gap: 14px; }
.panel-step {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font: 800 17px/1 var(--font); box-shadow: 0 3px 10px rgba(106, 53, 88, .28);
}
.panel-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-panel > .grid { padding: 16px 18px 4px; }
/* let the category / material dropdowns open over the panel below */
.form-panel { overflow: visible; }
.form-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px 4px; margin-top: 12px;
  border-top: 1px dashed var(--line-soft);
}
.form-nav .btn { min-width: 120px; }

/* ---------- duplicate-record prompt ---------- */

.dup-warn {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--warn-soft); border: 1px solid #e8cf9a;
}
.dup-warn strong { color: #8a5a12; font-size: 14.5px; }
.dup-warn p { margin: 0; font-size: 13px; color: #6c5a37; }
.dup-candidates { display: flex; flex-direction: column; gap: 7px; }
.dup-cand {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.dup-cand-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dup-cand-main strong { font: 700 13px var(--font); }
.dup-cand-main span { font-size: 12.5px; }
.dup-cand-main span.muted { font-size: 11.5px; }

/* ---------- reports: repeat-entry cleanup ---------- */

.dup-bar-host:empty { display: none; }
.dup-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 0 0 12px; padding: 12px 15px;
  background: var(--bad-soft); border: 1px solid #eec4c4; border-radius: var(--radius-sm);
}
.dup-bar-text { display: flex; flex-direction: column; gap: 2px; }
.dup-bar-text strong { color: var(--bad); }
.dup-bar-text span { font-size: 12.5px; }

/* ---------- user guide ---------- */

.guide-body {
  padding: 20px 26px 44px; max-width: 1020px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.guide-toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  position: sticky; top: 0; z-index: 6; padding: 10px 0;
  background: var(--bg);
}
.toc-chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font: 600 12.5px var(--font); color: var(--ink); cursor: pointer;
  transition: .12s;
}
.toc-chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.guide-card { scroll-margin-top: 60px; }
.guide-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
.guide-items { gap: 10px; }
.guide-h { margin: 10px 0 0; font-size: 14.5px; color: var(--accent-ink); }
.guide-p { margin: 0; font-size: 13.8px; line-height: 1.6; color: #3a3a42; }
.guide-ul {
  margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px;
  font-size: 13.5px; line-height: 1.55; color: #3a3a42;
}

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  .view-head, .form-body, .report-layout, .table-host, .list-toolbar,
  .dash-cols, .admin-body, .gallery-grid, .gallery-tools { padding-left: 16px; padding-right: 16px; }
  .stat-row, .quick-row, .preset-row { padding-left: 16px; padding-right: 16px; }
  .field.half { flex: 1 1 100%; }
}

/* --------------------------------- print -------------------------------- */

@media print {
  body { background: #fff; }
  .sidebar, .view-head, .tabbar, .toast-host, .modal-overlay, .list-toolbar,
  .quick-row, .preset-row, .filter-panel, .gallery-tools, .btn, .row-actions { display: none !important; }
  .main { padding: 0; }
  .panel, .data-table { box-shadow: none; border-color: #bbb; }
  .data-table th { position: static; background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .classification, .class-banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .brand-head, .brand-foot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-host { display: block; }
  #app { display: none !important; }
  .placard-grid { grid-template-columns: repeat(3, 1fr); }
  .placard-card { break-inside: avoid; }
  a[href]::after { content: ''; }
  .guide-print-sec { break-inside: avoid-page; margin-bottom: 12px; }
  .guide-print-sec h2 { font-size: 15px; margin: 0 0 2px; }
  .guide-print-sub { margin: 0 0 6px; font-size: 11.5px; color: #555; }
  .guide-print-sec h3 { font-size: 12.5px; margin: 8px 0 2px; }
  .guide-print-sec p, .guide-print-sec li { font-size: 11.5px; line-height: 1.45; }
}

/* ---------- home page: services on top, membership on demand ---------- */
.service-grid { display: grid; gap: 10px; margin: 6px 0 4px; }
.service-card {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  text-align: left; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow);
  font: inherit;
}
.service-card:hover { border-color: var(--gold); background: var(--surface-2); }
.service-card.featured { padding: 20px 18px; background: linear-gradient(135deg, var(--gold-soft), var(--accent-soft)); border-color: var(--gold); }
.service-card.is-open { box-shadow: inset 0 0 0 2px var(--accent); }
.service-icon { font-size: 30px; line-height: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--indigo-soft); }
.service-card.featured .service-icon { font-size: 40px; width: 64px; height: 64px; background: var(--gold-soft); }
.service-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.service-text strong { font-size: 15px; color: var(--indigo); }
.service-card.featured .service-text strong { font-size: 17px; }
.service-text span { font-size: 12.5px; color: var(--muted); }
.service-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.service-tag.live { background: var(--accent); color: #fff; }
.service-tag.soon { background: var(--line-soft); color: var(--muted); }
.service-notice { margin: 10px 0 0; font-size: 13px; color: var(--accent-ink); }
.membership-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------- service palette: one colour per service, by prominence ------ */
.service-card.rank-1 { --rank-ink: var(--accent-ink); --rank-soft: var(--gold-soft); --rank-line: var(--gold); }
.service-card.rank-2 { --rank-ink: var(--accent-ink); --rank-soft: var(--accent-soft); --rank-line: var(--accent); }
.service-card.rank-3 { --rank-ink: var(--good);       --rank-soft: var(--good-soft);   --rank-line: var(--good); }
.service-card.rank-4 { --rank-ink: var(--indigo);    --rank-soft: var(--indigo-soft); --rank-line: var(--indigo); }
.service-card.rank-5 { --rank-ink: var(--info);      --rank-soft: var(--info-soft);   --rank-line: var(--info); }
.service-card.rank-6 { --rank-ink: var(--warn);      --rank-soft: var(--warn-soft);   --rank-line: var(--warn); }
.service-card.rank-7 { --rank-ink: #6b4fa3;          --rank-soft: #efeaf7;            --rank-line: #6b4fa3; }

.service-card.rank-1, .service-card.rank-2, .service-card.rank-3, .service-card.rank-4,
.service-card.rank-5, .service-card.rank-6, .service-card.rank-7 {
  border-left: 3px solid var(--rank-line);
  background: linear-gradient(180deg, var(--rank-soft), var(--surface) 58%);
}
.service-card.rank-1:hover, .service-card.rank-2:hover, .service-card.rank-3:hover,
.service-card.rank-4:hover, .service-card.rank-5:hover, .service-card.rank-6:hover,
.service-card.rank-7:hover { border-color: var(--rank-line); background: var(--rank-soft); }

.service-card.rank-1 .service-text strong, .service-card.rank-2 .service-text strong,
.service-card.rank-3 .service-text strong, .service-card.rank-4 .service-text strong,
.service-card.rank-5 .service-text strong, .service-card.rank-6 .service-text strong,
.service-card.rank-7 .service-text strong { color: var(--rank-ink); }

.service-card.rank-1 .service-tag.live, .service-card.rank-2 .service-tag.live,
.service-card.rank-3 .service-tag.live, .service-card.rank-4 .service-tag.live,
.service-card.rank-5 .service-tag.live, .service-card.rank-6 .service-tag.live,
.service-card.rank-7 .service-tag.live { background: var(--rank-line); }
.service-card.rank-1 .service-tag.soon, .service-card.rank-2 .service-tag.soon,
.service-card.rank-3 .service-tag.soon, .service-card.rank-4 .service-tag.soon,
.service-card.rank-5 .service-tag.soon, .service-card.rank-6 .service-tag.soon,
.service-card.rank-7 .service-tag.soon { background: var(--rank-soft); color: var(--rank-ink); }

/* Size steps follow the same order — a small difference only (14.5→18px
   padding, 51→60px icon, 14.5→17px title), so prominence reads without the
   cards looking like different components. */
.service-card.rank-1 { padding: 18px 18px; }
.service-card.rank-2 { padding: 17px 17px; }
.service-card.rank-3 { padding: 16.5px 17px; }
.service-card.rank-4 { padding: 16px 16px; }
.service-card.rank-5 { padding: 15.5px 16px; }
.service-card.rank-6 { padding: 15px 16px; }
.service-card.rank-7 { padding: 14.5px 16px; }
.service-card.rank-1 .service-icon { width: 60px; height: 60px; font-size: 38px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-2 .service-icon { width: 57px; height: 57px; font-size: 34px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-3 .service-icon { width: 56px; height: 56px; font-size: 32px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-4 .service-icon { width: 54px; height: 54px; font-size: 31px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-5 .service-icon { width: 53px; height: 53px; font-size: 30px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-6 .service-icon { width: 52px; height: 52px; font-size: 30px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-7 .service-icon { width: 51px; height: 51px; font-size: 29px; background: #fff; box-shadow: inset 0 0 0 2px var(--rank-soft); }
.service-card.rank-1 .service-text strong { font-size: 17px; }
.service-card.rank-2 .service-text strong { font-size: 16px; }
.service-card.rank-3 .service-text strong { font-size: 15.5px; }
.service-card.rank-4 .service-text strong { font-size: 15px; }
.service-card.rank-5 .service-text strong { font-size: 15px; }
.service-card.rank-6 .service-text strong { font-size: 14.5px; }
.service-card.rank-7 .service-text strong { font-size: 14.5px; }


/* ---------- institutional bundle offer (login column) ---------------- */
.bundle-offer { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft) inset; }
.login-col .bundle-offer { align-self: stretch; width: 100%; padding: 16px 18px; }
.login-col .bundle-offer .panel-head { padding: 0 0 10px; border-bottom: 1px solid var(--line-soft); background: none; }
.login-col .bundle-offer .panel-body { padding: 12px 0 0; gap: 10px; }
.login-col .bundle-offer h2 { font-size: 16px; }
.bundle-row { gap: 14px; }
.bundle-row .row-actions { gap: 10px; }
.bundle-was { color: var(--faint); font-size: 13px; text-decoration: line-through; }

/* ---------- sidebar publication banner ------------------------------- */
.side-promo {
  display: flex; flex-direction: column; gap: 3px; margin: 8px 6px 4px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--gold-soft), var(--accent-soft));
  color: var(--ink); text-decoration: none;
}
.side-promo:hover { text-decoration: none; border-color: var(--accent); }
.side-promo-kicker { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.side-promo-text { font-size: 12px; line-height: 1.4; color: var(--muted); }
.side-promo-go { font-size: 12px; color: var(--accent-ink); font-weight: 600; }

/* ---------- networking: premium aptitude-test promo ------------------- */
.net-promo {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin: 14px 0; padding: 20px 22px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-soft), var(--accent-soft) 60%, #fff);
  border: 1px solid var(--gold); box-shadow: var(--shadow);
}
.net-promo-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.net-promo-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.net-promo h2 { margin: 0; font-size: 20px; color: var(--indigo); }
.net-promo p { margin: 0; font-size: 13.5px; color: var(--ink); }
.net-promo-note { font-size: 12px !important; color: var(--muted) !important; }
.net-promo-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) { .net-promo { flex-direction: column; } }

/* ---------- register / become member popup (login page) ----------- */
.reg-intro { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.reg-list { display: flex; flex-direction: column; gap: 8px; }
.reg-row {
  display: grid; grid-template-columns: 30px 1fr auto 16px; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
a.reg-row:hover { border-color: var(--gold); background: var(--surface-2); text-decoration: none; }
.reg-row.is-off { opacity: .62; }
.reg-icon { font-size: 21px; line-height: 1; text-align: center; }
.reg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reg-text strong { font-size: 13.5px; color: var(--indigo); }
.reg-text span { font-size: 12px; color: var(--muted); }
.reg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.reg-price { font-size: 12px; color: var(--muted); white-space: nowrap; }
.reg-go { color: var(--faint); }
.bundle-price { font-family: var(--serif); font-size: 19px; color: var(--accent-ink); }

/* ---------- trial banner, trial buttons, key lookup ---------- */
.trial-banner {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  background: #fbf3e2; border: 1px solid #e7b86b; color: #5a3b14;
}
.trial-banner.ended { background: #fbe9e6; border-color: #d98a7c; color: #6b2a1d; }
.trial-banner span { font-size: 13px; }
.trial-cta { margin-top: 12px; }
.find-results { display: grid; gap: 8px; margin-top: 12px; }
.find-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}

/* ============================================================================
   Networking
   ========================================================================== */

.net-profile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 18px;
}
.net-cover {
  height: 92px;
  background: linear-gradient(120deg, var(--accent) 0%, #b8825a 55%, #e9d3bd 100%);
}
.net-profile-body {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 22px 16px;
  margin-top: -36px;
  flex-wrap: wrap;
}
.net-profile-text { flex: 1; min-width: 220px; padding-top: 42px; }
.net-profile-text h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--ink); }
.net-profile-text p { margin: 2px 0; }
.net-headline { color: var(--ink); font-size: .95rem; }
.net-profile-body > .btn { margin-top: 42px; }

.net-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
  border: 3px solid var(--surface);
}
.net-avatar.big { width: 84px; height: 84px; font-size: 1.6rem; }

.net-stats {
  display: flex;
  border-top: 1px solid var(--line-soft);
}
.net-stat {
  flex: 1;
  background: none;
  border: 0;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font: inherit;
  color: var(--muted);
}
.net-stat + .net-stat { border-left: 1px solid var(--line-soft); }
.net-stat:hover { background: var(--surface-2); }
.net-stat strong { font-size: 1.1rem; color: var(--ink); }
.net-stat span { font-size: .8rem; }

.net-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.net-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.net-tab.is-on { color: var(--accent-ink); border-bottom-color: var(--accent); }

.net-toolbar { margin-bottom: 12px; }
.net-search {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
.net-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.net-chips { margin-bottom: 14px; }

.net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.net-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow);
}
.net-card-top { display: flex; align-items: center; justify-content: space-between; }
.net-card-name { margin: 6px 0 0; font-size: 1rem; color: var(--ink); }
.net-card-headline { margin: 0; font-size: .9rem; color: var(--ink); min-height: 2.6em; }
.net-same {
  font-size: .72rem;
  font-weight: 600;
  background: var(--good-soft);
  color: var(--good);
  padding: 3px 8px;
  border-radius: 999px;
}
.net-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.net-skill {
  font-size: .75rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.net-card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.net-state { font-weight: 600; font-size: .85rem; color: var(--good); }
.net-note { margin-top: 14px; }
.net-empty { grid-column: 1 / -1; }

.net-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.net-section-title { font-size: .95rem; margin: 0 0 10px; color: var(--ink); }
.net-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.net-row:first-of-type { border-top: 0; }
.net-row-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.net-row-actions { display: flex; gap: 8px; }

.net-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.net-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.net-field:nth-child(n+6), .net-field:has(textarea) { grid-column: 1 / -1; }
.net-field input, .net-field select, .net-field textarea {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}
.net-field textarea { resize: vertical; }

@media (max-width: 640px) {
  .net-form { grid-template-columns: 1fr; }
  .net-field:nth-child(n+6) { grid-column: auto; }
  .net-profile-body > .btn { margin-top: 0; }
  .net-profile-text { padding-top: 8px; }
}

/* Networking: plan tier card and location filter */
.net-plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.net-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.net-plan-head h2 { margin: 0 0 2px; font-size: 1.05rem; color: var(--ink); }
.net-plan-head p { margin: 0; }
.net-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.net-perk {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px;
  font-size: .85rem; color: var(--muted);
}
.net-perk strong { color: var(--ink); font-weight: 600; }
.net-perk.is-locked strong { color: var(--muted); }
.net-location { display: inline-flex; align-items: center; gap: 6px; }
.net-select {
  font: inherit; font-size: .85rem; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.net-select:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Raw materials marketplace ---------- */
.rm-hero { margin: 8px 0 14px; }
.rm-hero h1 { margin: 0 0 4px; }
.rm-body { margin-top: 14px; }
.rm-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-search { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; }
.rm-select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rm-card.is-paid { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft) inset; }
.rm-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rm-badge { font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
.rm-name { margin: 2px 0 0; font-size: 16px; }
.rm-desc { margin: 0; min-height: 1.2em; }
.rm-price { font-size: 15px; }
.rm-stock { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rm-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.rm-row-head p { margin: 0; }
.rm-pay { margin-top: 10px; }
.rm-pay > .btn { margin-top: 10px; }
.rm-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.rm-panel h2 { margin: 0 0 6px; font-size: 17px; }
.rm-seller-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.rm-seller-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.rm-field input, .rm-field select { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--surface); }
.rm-upload { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rm-actions { display: flex; gap: 10px; margin-top: 8px; }
.rm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rm-notice { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--good-soft); color: var(--good); }
.rm-notice.is-warn { background: var(--warn-soft); color: var(--warn); }
.rm-notice[hidden] { display: none; }
.rm-notice.is-good { background: var(--good-soft); color: var(--good); }
.rm-quote { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.rm-quote .rm-form { margin: 8px 0; }
.rm-card .rm-actions { flex-wrap: wrap; align-items: center; }
.rm-recs { border-color: var(--accent); }
.rm-recs .rm-grid { margin-top: 10px; }
.rm-card .field-msg[hidden] { display: none; }
.rm-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.rm-choice { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.rm-choice span { display: flex; flex-direction: column; gap: 4px; }
.rm-choice input { margin-top: 4px; }
.rm-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.rm-check-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.rm-editor-fields { border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 6px; }
.rm-editor-fields[hidden] { display: none; }
.pub-review { border-top: 1px dashed var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.pub-page { padding-left: 28px; padding-right: 28px; }
@media (max-width: 720px) { .pub-page { padding-left: 16px; padding-right: 16px; } }
.pub-page .rm-hero .link-btn { display: inline-block; margin-top: 4px; }

/* Publication — profiles, directory and photo editor */
.pub-avatar { border-radius: 50%; object-fit: cover; background: var(--line); flex: none; }
.pub-avatar-fallback { display: inline-block; text-align: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--accent)); }
.pub-profile-head { align-items: flex-start; gap: 16px; }
.pub-profile-head .rm-seller-side { flex-wrap: wrap; justify-content: flex-end; }
.pub-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pub-dir-grid { align-items: stretch; }
.pub-dir-card { display: flex; flex-direction: column; gap: 10px; }
.pub-dir-head { display: flex; gap: 12px; align-items: center; }
.pub-dir-head .rm-name { margin: 0; }
.pub-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; margin-top: 10px; }
.pub-detail { margin: 0; }
.pub-detail-label { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pub-text { margin-top: 12px; }
.pub-text h3 { margin-bottom: 4px; }
.pub-pub-row { border-top: 1px dashed var(--line); padding: 10px 0; display: flex; gap: 12px;
  align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pub-pub-row .rm-stock { flex-wrap: wrap; justify-content: flex-end; }
.pub-photo-row { display: flex; align-items: center; gap: 16px; margin: 10px 0 4px; }
.pub-editor-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(20, 14, 8, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.pub-editor { background: var(--card, #fff); border-radius: 14px; padding: 18px; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 10px; max-height: 92vh; overflow: auto; }
.pub-editor-canvas { width: 260px; height: 260px; max-width: 100%; align-self: center; border-radius: 10px;
  background: repeating-conic-gradient(#e8e2d8 0% 25%, #f5f1ea 0% 50%) 50% / 20px 20px;
  cursor: grab; touch-action: none; }
.pub-editor-canvas:active { cursor: grabbing; }
.pub-editor-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pub-editor-zoom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 140px; }
.pub-editor-zoom input[type='range'] { flex: 1; }
.pub-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pub-file-label { position: relative; overflow: hidden; cursor: pointer; }
/* ------------- networking membership tiers ---------------------------- */
.net-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 10px; }
.net-tier { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  background: var(--card, #fff); }
.net-tier.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.net-tier.is-top { background: linear-gradient(180deg, rgba(176, 125, 74, 0.08), var(--card, #fff) 55%); }
.net-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.net-tier-head h3 { margin: 0; }
.net-tier-price { font-family: var(--serif); font-size: 22px; font-weight: 700; margin: 0; }
.net-tier-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1; }
.net-tier-cta-wrap { margin-top: 6px; }
.net-tier-cta.is-current { font-weight: 600; color: var(--accent); }
.net-panel { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 14px 0; background: var(--card, #fff); }
.net-panel h2 { margin-bottom: 8px; }
.net-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.net-insight { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.net-insight strong { font-size: 22px; font-family: var(--serif); }
.net-insight span { font-size: 12px; color: var(--muted); }
.net-upsell { border: 1px dashed var(--accent); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.net-plan-notes { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }

/* Networking, two halves: membership on the left, people, network and the aptitude test on the right. */
.net-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 16px; align-items: start; margin-top: 12px; }
.net-split-left, .net-split-right { min-width: 0; }
.net-split-right { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.net-tiers-stack { grid-template-columns: 1fr; }
.net-tiers-stack .net-tier { padding: 12px 14px; }
.net-tiers-stack .net-tier-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
@media (max-width: 900px) { .net-split { grid-template-columns: 1fr; } .net-tiers-stack .net-tier-list { grid-template-columns: 1fr; } }
.net-plan-notes p { margin: 0; }
.net-list { display: flex; flex-direction: column; gap: 6px; }
.net-card-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.net-card-contact { font-size: 12px; color: var(--accent); margin: 4px 0 0; }
.net-quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.net-quiz-q { font-size: 16px; font-weight: 600; margin: 12px 0; }
.net-quiz-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.net-quiz-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; }
.net-quiz-opt:hover { border-color: var(--accent); }
.net-quiz-opt input { margin-top: 3px; }

/* ------------- Super Admin service previews --------------------------- */
.service-preview-grid { display: grid; gap: 10px; }
.service-preview-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); }
.service-preview-card .service-icon { font-size: 22px; line-height: 1; }
.service-preview-card .service-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.service-preview-card .service-text span { color: var(--muted); font-size: 12px; }

/* ------------- tax invoice (Super Admin → Memberships) ---------------- */
.invoice-doc { color: #1c1710; font-size: 13px; max-width: 640px; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  border-bottom: 2px solid #3a3f86; padding-bottom: 12px; }
.invoice-logo { max-width: 220px; max-height: 90px; }
.invoice-logo-text strong { display: block; font-family: var(--serif, Georgia, serif); font-size: 26px; color: #3a3f86; }
.invoice-logo-text span { font-size: 12px; color: #6b5f52; }
.invoice-title { text-align: right; }
.invoice-title h1 { font-size: 20px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.invoice-title p { margin: 2px 0; }
.invoice-parties { display: flex; gap: 40px; margin: 14px 0; flex-wrap: wrap; }
.invoice-parties h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6b5f52; margin-bottom: 4px; }
.invoice-parties p { margin: 2px 0; }
.invoice-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.invoice-table th, .invoice-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #d9cfc0; }
.invoice-table th { background: #f3ede3; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.invoice-table .inv-amount { text-align: right; }
.invoice-table tfoot td { font-weight: 700; border-top: 2px solid #3a3f86; border-bottom: none; }
.invoice-foot { margin-top: 18px; border-top: 1px solid #d9cfc0; padding-top: 8px; }

.pub-member-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.pub-member-toolbar .input { flex: 1; min-width: 200px; }
.pub-member-text { min-width: 0; }
.pub-member[hidden] { display: none; }
.pub-pw-row { display: flex; gap: 8px; align-items: center; }
.pub-pw-row .input { flex: 1; }
@media (max-width: 640px) { .rm-grid { grid-template-columns: 1fr; } }

/* ------------- welcome / benefits popup (post-payment) ---------------- */
.wel-modal { max-width: 520px; overflow: hidden; }
.wel-modal .modal-body { padding: 0; }
.wel-modal .modal-head.wel-head {
  display: flex; gap: 14px; align-items: center; text-align: left;
  padding: 20px 20px 16px; border-bottom: none;
  background:
    radial-gradient(120px 90px at 92% -10%, rgba(240, 185, 90, .35), transparent 70%),
    radial-gradient(160px 120px at -10% 120%, rgba(106, 53, 88, .16), transparent 70%),
    linear-gradient(135deg, var(--accent-soft), #fbf6ef 70%);
  position: relative;
}
.wel-modal .modal-head.wel-head::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5;
}
.wel-glyph {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; font-size: 26px; color: #fff;
  background: linear-gradient(140deg, var(--accent), #b07d4a);
  box-shadow: 0 6px 18px rgba(182, 93, 18, .35), 0 0 0 4px rgba(255, 255, 255, .55);
  animation: wel-float 3.2s ease-in-out infinite;
}
@keyframes wel-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
.wel-head-text { flex: 1; min-width: 0; }
.wel-kicker { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.wel-title { margin: 2px 0 0; font-size: 21px; line-height: 1.2; }
.wel-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.wel-badge {
  flex: none; align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #f0b95a, #d99a2e); color: #3d2a08;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(217, 154, 46, .4);
  animation: wel-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes wel-pop { from { transform: scale(.4); opacity: 0; } }
.wel-modal .wel { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 14px; }
.wel-sec {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface-2, #fbf9f5);
  animation: wel-rise .45s ease-out both; animation-delay: calc(var(--wel-i, 0) * 90ms + 80ms);
}
@keyframes wel-rise { from { transform: translateY(10px); opacity: 0; } }
.wel-sec-title { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.wel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.wel-list li { display: flex; gap: 9px; align-items: flex-start; }
.wel-list li.dim { color: var(--faint); }
.wel-check {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--good-soft); color: var(--good);
}
.wel-list li.dim .wel-check { background: var(--line-soft); color: var(--faint); }
.wel-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.wel-modal .modal-foot { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .wel-glyph, .wel-badge, .wel-sec { animation: none; }
}
@media (max-width: 560px) {
  .wel-modal .modal-head.wel-head { flex-wrap: wrap; }
  .wel-badge { order: 3; }
}

/* ---------- Opportunities: hero, cards, requirement form ---------- */
.opp-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 28px; margin: 6px 0 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #5a3519 0%, #8a5a2e 55%, #c99a5b 100%); box-shadow: 0 10px 30px rgba(60, 35, 15, 0.18); }
.opp-hero-text { min-width: 260px; flex: 1 1 320px; }
.opp-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.opp-hero-title { color: #fff; margin: 6px 0 8px; font-size: 28px; line-height: 1.2; }
.opp-hero-sub { margin: 0; opacity: 0.9; max-width: 560px; }
.opp-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.opp-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.opp-stat { background: rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 10px 14px; min-width: 110px; }
.opp-stat strong { display: block; font-size: 22px; }
.opp-stat span { font-size: 12px; opacity: 0.9; }
.opp-hero-cta { background: #fff; color: #5a3519; font-weight: 700; border: none; }
.opp-disclaimer { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px;
  border-radius: 12px; background: #fff7e6; border: 1px solid #f0d9a8; color: #5c4312; font-size: 13px; line-height: 1.5; }
.opp-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); }
.opp-notice p { margin: 0; }
.opp-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.opp-tab { background: none; border: none; padding: 10px 14px; font: inherit; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; }
.opp-tab.is-on { color: inherit; font-weight: 700; border-bottom-color: #8a5a2e; }
.opp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.opp-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.opp-chip.is-on { background: #5a3519; color: #fff; border-color: #5a3519; }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.opp-empty { grid-column: 1 / -1; text-align: center; padding: 36px 16px; border: 1px dashed var(--line); border-radius: 14px; }
.opp-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
.opp-card.is-ended, .opp-card.is-closed, .opp-card.is-withdrawn { opacity: 0.78; }
.opp-card-band { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; background: #7a4b28; }
.opp-card[data-type="0"] .opp-card-band { background: linear-gradient(90deg, #2f6f5e, #4fa38c); }
.opp-card[data-type="1"] .opp-card-band { background: linear-gradient(90deg, #3a6ea5, #6fa0d6); }
.opp-card[data-type="2"] .opp-card-band { background: linear-gradient(90deg, #7a4b28, #b07a4a); }
.opp-card[data-type="3"] .opp-card-band { background: linear-gradient(90deg, #b5651d, #e09f4a); }
.opp-card[data-type="4"] .opp-card-band { background: linear-gradient(90deg, #6b4fa0, #9b82cc); }
.opp-card[data-type="5"] .opp-card-band { background: linear-gradient(90deg, #2d7d46, #63b07c); }
.opp-card[data-type="6"] .opp-card-band { background: linear-gradient(90deg, #9b3d5c, #cf6f8e); }
.opp-card[data-type="7"] .opp-card-band { background: linear-gradient(90deg, #4a5568, #7c8799); }
.opp-card[data-type="8"] .opp-card-band { background: linear-gradient(90deg, #0f766e, #2dd4bf); }
.opp-card[data-type="9"] .opp-card-band { background: linear-gradient(90deg, #a16207, #facc15); }
.opp-type { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.opp-state { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.opp-card-body { padding: 14px 16px; flex: 1; }
.opp-cat { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.opp-card-title { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.opp-org { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.opp-meta { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.opp-meta li { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #f4ebe0; color: #5a3519; }
.opp-desc { font-size: 13px; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.opp-reason { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fdecec; color: #8a1c1c; font-size: 13px; }
.opp-card-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.opp-deadline { font-size: 12px; color: var(--muted); }
.opp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.opp-danger { color: #8a1c1c; }
.opp-card-disclaimer { margin: 0; padding: 0 16px 10px; font-size: 11px; color: var(--muted); }
.opp-form { display: flex; flex-direction: column; gap: 18px; }
.opp-section { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0; background: var(--surface); }
.opp-legend { font-weight: 700; padding: 0 6px; }
.opp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.opp-field { display: flex; flex-direction: column; gap: 6px; }
.opp-field.wide, .opp-wide { grid-column: 1 / -1; }
.opp-label { font-size: 13px; font-weight: 600; }
.opp-hint { font-size: 12px; color: var(--muted); }
.opp-types { font-size: 13px; }
.opp-types summary { cursor: pointer; color: #5a3519; font-weight: 600; }
.opp-types ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.opp-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f0d9a8; }
.opp-submit-row { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Premium: highlighted benefit, dashboard card, search ---------- */
.net-tier-list li.is-highlight { font-weight: 700; color: #5a3519; list-style: none; margin: 6px -8px; padding: 8px 10px;
  border-radius: 10px; background: linear-gradient(90deg, #fff3dc, #fffdf7); border: 1px solid #f0d9a8; }
.net-tier-list li.is-highlight::before { content: "\2726  "; color: #b8860b; }
.opp-kicker.dark { color: #8a5a2e; opacity: 1; }
.opp-dash { border-radius: 18px; padding: 22px 24px; margin: 6px 0 18px; background: linear-gradient(135deg, #fff8ec 0%, #fffdf8 60%, #f6e7d2 100%);
  border: 1px solid #ecd6b4; box-shadow: 0 8px 24px rgba(90, 53, 25, 0.08); }
.opp-dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.opp-dash-title { margin: 4px 0 4px; font-size: 22px; color: #3d2412; }
.opp-dash-sub { margin: 0; color: #6b5340; font-size: 14px; }
.opp-dash-cta { background: #5a3519; color: #fff; border: none; font-weight: 700; }
.opp-dash-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.opp-dash-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #efe1cc; }
.opp-dash-type { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #5a3519; color: #fff; }
.opp-search { display: flex; flex-direction: column; gap: 16px; padding: 20px; margin-bottom: 18px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); }
.opp-search-main { position: relative; }
.opp-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #8a5a2e; pointer-events: none; }
.opp-input, .opp-select { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; box-sizing: border-box; }
.opp-search-main .opp-input { padding-left: 42px; font-size: 15px; }
.opp-input:focus, .opp-select:focus { outline: 2px solid #c99a5b; outline-offset: 1px; }
.opp-search-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.opp-search-types { display: flex; flex-direction: column; gap: 8px; }
.opp-search-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.opp-count { margin: 0; font-weight: 700; color: #5a3519; }

/* Networking hub (networking-hub.js): Muse colours, same tokens as the rest of the app. */
.nh-host { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.nh-landing { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.nh-hero { background: linear-gradient(135deg, var(--accent-soft), #fffaf2); border: 1px solid var(--line, #eadfce); border-radius: 14px; padding: 28px; }
.nh-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.nh-title { margin: 0 0 10px; font-size: 26px; line-height: 1.2; color: var(--ink); }
.nh-lead { margin: 0 0 16px; font-size: 15px; color: var(--ink); }
.nh-benefits { display: flex; flex-direction: column; gap: 12px; }
.nh-benefit { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid var(--gold); }
.nh-join .panel-body { gap: 14px; }
.nh-tabs { display: flex; gap: 8px; }
.nh-form-title { margin: 0; font-size: 17px; color: var(--ink); }
.nh-submit { align-self: flex-start; }
.nh-fine { margin: 0; font-size: 12px; }
.nh-welcome .panel-body { gap: 6px; }
.nh-actions { display: flex; gap: 8px; margin-top: 6px; }
.nh-list { display: flex; flex-direction: column; }
.nh-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, #eadfce); }
.nh-row:last-child { border-bottom: 0; }
.nh-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nh-row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nh-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
@media (max-width: 760px) { .nh-landing { grid-template-columns: 1fr; } .nh-title { font-size: 22px; } }