/* ============================================================
   portal.css — app-shell + responsive layer for the real app.
   admin.css is the design system. This file supplies runtime shell and page layers:
   - makes the device-frame stages fill the real viewport;
   - adds loading/skeleton states;
   - adds tablet/desktop-first responsive rules (mobile = graceful).
   TODO Capacitor: self-host Bricolage Grotesque + Hanken Grotesk
   (currently @import'ed from Google Fonts in admin.css) for offline use.
   ============================================================ */

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page-gradient, linear-gradient(135deg, #FDE7F3 0%, #EAE9FF 50%, #DFFFEE 100%));
  font-family: var(--font-text, 'Hanken Grotesk', sans-serif);
  color: var(--ink, #222222);
  -webkit-font-smoothing: antialiased;
}

.errbanner[hidden] { display: none !important; }

/* admin.css makes auth cards flex containers, which otherwise wins over the
   browser's `[hidden]` rule and renders every reset-password step at once. */
.auth-form .card[hidden] { display: none !important; }

/* The full-viewport equivalent of the prototype's device ".screen". */
.app-screen {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--page-gradient, linear-gradient(135deg, #FDE7F3 0%, #EAE9FF 50%, #DFFFEE 100%));
}

/* small fade-in once the page has hydrated */
.adm-body[data-loading="true"] { opacity: .6; }
.adm-body { transition: opacity .2s ease; }

/* ---- skeleton / loading ---- */
.rc-skeleton {
  background: linear-gradient(90deg, var(--line-2,#F0EAE1) 25%, var(--line-3,#F6F1E8) 37%, var(--line-2,#F0EAE1) 63%);
  background-size: 400% 100%;
  animation: rc-shimmer 1.3s ease infinite;
  border-radius: 8px;
  color: transparent !important;
}
@keyframes rc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.rc-empty {
  padding: 28px; text-align: center; color: var(--ink-3, #938678);
  font-weight: 700; font-size: 14px;
}

/* ---- generic responsive grids used by portal pages ---- */
.rc-grid { display: grid; gap: var(--gap, 14px); min-height: 0; }
.rc-grid.cols-2 { grid-template-columns: 1.5fr 1fr; }
.rc-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* real <input>/<select> inside design .field rows (admin.css styles a span) */
.field .row input.val,
.field .row select.val {
  border: none; outline: none; background: transparent; padding: 0; margin: 0;
  font-family: var(--font-text, sans-serif); width: 100%;
}
.field .row input.val::placeholder { color: var(--ink-3, #938678); font-weight: 500; }
.bigbtn[disabled] { opacity: .6; pointer-events: none; }

/* Password-reset OTP boxes are real inputs. Explicitly allow grid tracks to
   shrink below the browser's intrinsic input width; otherwise the six fields
   overflow and only the first one or two are visible. */
#fp-otp { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#fp-otp input.box {
  box-sizing: border-box; display: block; width: 100%; min-width: 0; padding: 0;
  text-align: center; outline: none; -webkit-appearance: none; appearance: none;
}
#fp-otp input.box:focus { border-color: var(--primary, #5840EF); box-shadow: 0 0 0 4px var(--focus-ring, rgba(88,64,239,.18)); }

/* mobile nav controls (hidden on desktop) */
body:not(.rc-ready) [data-perm],
body:not(.rc-ready) [data-perm-any],
body:not(.rc-ready) [data-loyalty],
body:not(.rc-ready) [data-workspace],
body:not(.rc-ready) .sb-section {
  display: none !important;
}

.rc-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  border: 1px solid var(--line, #E7DFD4); background: #fff; cursor: pointer; color: var(--ink, #211A15);
}
.rc-scrim { display: none; }

/* ============================================================
   RESPONSIVE — tablet/desktop first; mobile is "don't break".
   ============================================================ */

/* Auth: drop the brand panel on narrow screens */
@media (max-width: 900px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
}

/* Workspace: stack the two cards */
.ws-card,
.ws-card .enterbtn,
.ws-remember-option { touch-action: manipulation; }
.ws-card:focus-visible {
  outline: 3px solid rgba(255,255,255,.96);
  outline-offset: -7px;
}
.ws-remember-option {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer;
}
.ws-remember-option .checkbox { margin: 0; flex: none; }
.ws-remember-input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.ws-remember-input:focus-visible + .checkbox {
  outline: 3px solid var(--focus-ring, rgba(88,64,239,.18));
  outline-offset: 3px;
}
.ws-mobile-hint { display: none; }

@media (max-width: 860px) {
  .workspace-page .app-screen {
    height: auto; min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  }
  .workspace-page .ws-stage {
    flex: 0 0 auto; width: 100%; min-height: 100vh; min-height: 100dvh;
    box-sizing: border-box; padding: 24px 20px 28px;
  }
  .workspace-page .ws-cards {
    flex: none; grid-template-columns: minmax(0, 1fr); gap: 16px;
  }
  .workspace-page .ws-card { min-width: 0; }
  .workspace-page .ws-greet h1 { font-size: 32px; }
  .workspace-page .ws-bottom { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 560px) {
  .workspace-page .ws-stage {
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
  .workspace-page .ws-top { align-items: flex-start; gap: 12px; }
  .workspace-page .ws-top .brand { min-width: 0; gap: 10px; }
  .workspace-page .ws-top .brand .brandmark { width: 40px; height: 40px; flex: none; }
  .workspace-page .ws-top .biz { font-size: 16px; line-height: 1.1; }
  .workspace-page .ws-top .biz .sub { font-size: 10px; letter-spacing: .07em; }
  .workspace-page .ws-top .usermenu {
    width: 44px; height: 44px; box-sizing: border-box; padding: 7px;
    justify-content: center;
  }
  .workspace-page .ws-top .usermenu > div:not(.av) { display: none; }
  .workspace-page .ws-greet { margin: 28px 0 20px; text-align: left; }
  .workspace-page .ws-greet h1 {
    max-width: 12ch; margin-top: 8px;
    font-size: clamp(31px, 9vw, 38px); line-height: 1.04;
  }
  .workspace-page .ws-greet .sub { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  .workspace-page .ws-card { border-radius: 22px; padding: 22px; gap: 16px; }
  .workspace-page .ws-card .glyph { width: 48px; height: 48px; border-radius: 15px; }
  .workspace-page .ws-card .glyph svg { width: 24px; height: 24px; }
  .workspace-page .ws-card .tag { padding: 6px 9px; font-size: 10px; letter-spacing: .08em; }
  .workspace-page .ws-card h2 { font-size: 30px; }
  .workspace-page .ws-card h2 br { display: none; }
  .workspace-page .ws-card .sub { font-size: 14px; }
  .workspace-page .ws-card .featgrid { gap: 7px; }
  .workspace-page .ws-card .feat { min-width: 0; padding: 8px; gap: 7px; font-size: 12px; }
  .workspace-page .ws-card .enterbtn {
    min-height: 48px; box-sizing: border-box; padding: 13px 15px; margin-top: 2px;
  }
  .workspace-page .ws-card.sel,
  .workspace-page .ws-card.dim { transform: none; }
  .workspace-page .ws-bottom {
    margin-top: 18px; flex-direction: column; align-items: stretch; gap: 4px;
    text-align: center; font-size: 12.5px;
  }
  .workspace-page .ws-remember-option {
    justify-content: center; padding: 4px 10px; border-radius: 12px;
  }
  .workspace-page .ws-bottom-separator,
  .workspace-page .ws-desktop-hint { display: none; }
  .workspace-page .ws-mobile-hint { display: block; }

  .workspace-page .ws-loading {
    padding:
      max(20px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }
  .workspace-page .ws-loading-rings { width: 620px; height: 620px; }
  .workspace-page .ws-loading-rings .r2 { inset: 80px; }
  .workspace-page .ws-loading-rings .r3 { inset: 160px; }
  .workspace-page .ws-loading-brand .brandmark { width: 40px; height: 40px; }
  .workspace-page .ws-loading-brand .biz { font-size: 16px; }
  .workspace-page .ws-loading-center { gap: 10px; min-height: 0; }
  .workspace-page .ws-loading-title { font-size: clamp(44px, 15vw, 62px); }
  .workspace-page .ws-loading-sub { font-size: 14px; }
  .workspace-page .ws-loading-progress { width: min(280px, 100%); margin-top: 12px; }
  .workspace-page .ws-loading-steps {
    width: min(220px, 100%); margin-top: 10px;
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
}

@media (max-width: 380px) {
  .workspace-page .ws-card .featgrid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) and (orientation: landscape) and (max-height: 560px) {
  .workspace-page .ws-stage { min-height: 0; }
  .workspace-page .ws-greet { margin: 18px 0; }
  .workspace-page .ws-greet h1 { max-width: none; font-size: 30px; }
}

/* Admin shell + page grids */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .rc-grid.cols-2, .rc-grid.cols-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .rc-nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-3);
  }
  .sidebar.open { transform: translateX(0); }
  /* RTL: off-canvas sidebar docks to and slides in from the right */
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  .rc-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(33,26,21,.42); opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .rc-scrim.show { opacity: 1; pointer-events: auto; }
  .adm-topbar .crumbs { display: none; }
  .adm-topbar .search.rc-global-search {
    display: flex; flex: 1 1 auto; max-width: none; min-width: 120px;
    padding: 8px 10px; gap: 8px;
  }
  .adm-topbar .search.rc-global-search .kbd { display: none; }
  .adm-topbar .search.rc-global-search input { font-size: 13px; }
}

@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .adm-pagehead { flex-direction: column; align-items: stretch; }
  .adm-body { padding: 14px; }
}

/* ============================================================
   Admin team implementation — faithful wrappers around Claude design assets.
   ============================================================ */
.rc-table-surface { padding: 0; flex: 1; min-height: 0; overflow: hidden; }
.rc-table-scroll { flex: 1; min-height: 0; }
.rc-row-actions { color: var(--ink-3, #938678); }

/* Employee row action dropdown menu */
.emp-row-menu {
  position: fixed; z-index: 60;
  min-width: 168px; padding: 5px;
  background: var(--card, #fff); border: 1px solid var(--line, #E7DFD4);
  border-radius: 14px; box-shadow: 0 8px 28px rgba(33,26,21,.14);
  display: flex; flex-direction: column; gap: 1px;
}
.emp-row-menu[hidden] { display: none; }
.emp-row-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 11px; border: 0; background: transparent; border-radius: 9px;
  font-family: var(--font-text, sans-serif); font-weight: 700; font-size: 13px;
  color: var(--ink-2, #5A4F46); cursor: pointer;
}
.emp-row-menu button:hover { background: var(--paper-2, #F2ECE2); color: var(--ink, #211A15); }
.emp-row-menu button.danger { color: var(--rose, #C8455B); }
.emp-row-menu button.danger:hover { background: var(--rose-soft, #FAE4E8); }
.emp-row-menu hr { border: 0; border-top: 1px solid var(--line-2, #F0EAE1); margin: 3px 4px; }

/* Employee / rewards modal wider form */
.emp-modal-wide { width: 520px; max-width: 96vw; }
.emp-modal-wide .mbody { padding-bottom: 2px; }

/* Team member form — grouped layout matching the portal's newer card and drawer
   patterns while keeping the legacy field IDs/API contract untouched. */
.emp-form-modal {
  width: min(700px, 94vw);
  max-height: min(760px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
}
.emp-form-modal .mhead {
  flex: 0 0 auto;
  align-items: center;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line-2, #F0EAE1);
  background: linear-gradient(180deg, var(--card-bg, #fff), var(--paper, #F8F4EE));
}
.emp-form-modal .mhead .mic {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, var(--teal, #1F8A6D), #267076);
  color: #fff; box-shadow: 0 10px 20px rgba(31,138,109,.2);
}
.emp-form-modal .mhead .mic svg { width: 24px; height: 24px; }
.emp-modal-heading { flex: 1; min-width: 0; }
.emp-modal-heading h3 { margin: 0; }
.emp-modal-state {
  align-self: flex-start; flex: none; padding: 5px 8px; border-radius: 8px;
  background: var(--teal-soft, #E4F5ED); color: var(--teal, #1F8A6D);
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
}
.emp-form-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 18px 26px 20px !important; background: var(--paper, #F8F4EE);
}
.emp-form-section {
  min-width: 0; padding: 16px; border: 1px solid var(--line, #E7DFD4);
  border-radius: 16px; background: var(--card-bg, #fff); box-shadow: 0 5px 14px rgba(33,26,21,.035);
  display: flex; flex-direction: column; gap: 13px;
}
.emp-form-section:first-child { grid-row: span 2; }
.emp-security-section { grid-column: 2; }
.emp-section-heading { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 11px; border-bottom: 1px solid var(--line-2, #F0EAE1); }
.emp-section-index { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--teal-soft, #E4F5ED); color: var(--teal, #1F8A6D); font-size: 10px; font-weight: 900; }
.emp-section-heading h4 { margin: 0; color: var(--ink, #211A15); font-family: var(--font-disp, sans-serif); font-size: 15px; line-height: 1.2; }
.emp-section-heading p { margin: 3px 0 0; color: var(--ink-3, #938678); font-size: 11px; font-weight: 600; line-height: 1.45; }
.emp-form-section .formgrp { gap: 6px; }
.emp-form-section .formgrp.tworow { gap: 10px; }
.emp-form-section .label { font-size: 10.5px; letter-spacing: .055em; }
.emp-form-section .input, .emp-form-section .select { min-height: 44px; padding: 10px 12px; }
.emp-access-note { display: flex; gap: 9px; align-items: flex-start; padding: 10px; border-radius: 11px; background: var(--sky-soft, #EAF4FF); border: 1px solid #CFE0F2; color: #1F4A86; font-size: 11px; font-weight: 600; line-height: 1.45; }
.emp-access-note b { font-weight: 900; }
.emp-access-note-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 7px; background: var(--sky, #2D6CC0); color: #fff; }
.emp-access-note-icon svg { width: 14px; height: 14px; }
.emp-field-hint { color: var(--ink-3, #938678); font-size: 11px; font-weight: 600; line-height: 1.4; }
.emp-form-modal .mfoot { flex: 0 0 auto; padding: 14px 26px 18px; border-top: 1px solid var(--line-2, #F0EAE1); background: var(--card-bg, #fff); }
html.dark .emp-form-modal .mhead, html.dark .emp-form-modal .mfoot { background: var(--card); }
html.dark .emp-form-body { background: var(--paper); }
html.dark .emp-form-section { background: var(--card); }
html.dark .emp-access-note { background: rgba(45,108,192,.16); border-color: rgba(142,205,251,.28); color: #B8D9F6; }

@media (max-width: 680px) {
  .emp-form-modal { max-height: calc(100vh - 20px); }
  .emp-form-modal .mhead { padding: 18px 18px 15px; }
  .emp-form-body { grid-template-columns: 1fr; padding: 14px 18px 16px !important; }
  .emp-form-section:first-child, .emp-security-section { grid-row: auto; grid-column: auto; }
  .emp-form-modal .mfoot { padding: 12px 18px 15px; }
}
@media (max-width: 420px) {
  .emp-form-section .formgrp.tworow { grid-template-columns: 1fr; }
  .emp-modal-state { display: none; }
}

/* Reward icon upload row */
.rwd-icon-row { display: flex; align-items: center; gap: 14px; }
.rwd-icon-preview {
  width: 64px; height: 64px; border-radius: 14px; flex: none;
  border: 1.5px solid var(--line, #E7DFD4); background: var(--paper-2, #F2ECE2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--ink-3, #938678);
}
.rwd-icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.rwd-icon-hint { font-size: 11.5px; color: var(--ink-3, #938678); font-weight: 700; margin-top: 6px; }

/* Reward table icon */
.rwd-tbl-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none; overflow: hidden;
  border: 1px solid var(--line, #E7DFD4);
}
.rwd-tbl-icon img { width: 100%; height: 100%; object-fit: cover; }

/* Gift tier filter chips host — chips lay out directly in the filterbar */
#gft-tier-filters { display: contents; }

/* Gift table tier tags */
.gft-tier-tags { display: flex; flex-wrap: wrap; gap: 5px; max-width: 320px; }
.gft-tier-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--paper, #F8F4EE); border: 1px solid var(--line, #E7DFD4);
  font-size: 11.5px; font-weight: 800; color: var(--ink-2, #5A4F46);
  white-space: nowrap;
}
.gft-tier-tag i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ink-3, #938678);
}

/* Dark overrides for gift tier tags */
html.dark .gft-tier-tag { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }

/* Blocked avatar dim */
.tbl .who .av.emp-blocked { opacity: .55; filter: grayscale(.6); }

/* Form required marker */
.label .req { color: var(--rose, #C8455B); font-weight: 800; }

/* Dark overrides for employee menu */
html.dark .emp-row-menu { background: var(--card); border-color: var(--line); }
html.dark .emp-row-menu button:hover { background: var(--paper-2); }

.filterbar .fbsearch input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-text, sans-serif); font-size: 13.5px; font-weight: 600;
  color: var(--ink, #211A15);
}
.filterbar .fbsearch input::placeholder { color: var(--ink-3, #938678); opacity: 1; }
.fchip { border: 1px solid var(--line, #E7DFD4); }
button.fchip { font-family: var(--font-text, sans-serif); }

.tbl .who .av.rose { background: linear-gradient(135deg, #C8455B, #54394F); }
.tbl .who .av.violet { background: linear-gradient(135deg, #6B4E9E, #3A2A3C); }
.tbl .who .av.sky { background: linear-gradient(135deg, #2D6CC0, #15405F); }
.tbl .who .av.teal { background: linear-gradient(135deg, #1F8A6D, #154A3B); }
.tbl .who .av.line { background: linear-gradient(135deg, var(--primary, #5840EF), var(--accent-pink, #E46DCE)); }

.rc-role-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap, 14px);
}
.rc-role-card { padding: 14px; gap: 6px; }
.rc-role-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-role-card-top > span:last-child {
  font-family: var(--font-disp, sans-serif); font-weight: 800; font-size: 18px;
}
.rc-role-desc {
  font-size: 12px; color: var(--ink-3, #938678); font-weight: 700; line-height: 1.45;
}

.permgrid {
  overflow: auto;
  max-height: min(66vh, 720px);
  overscroll-behavior: contain;
}
.permgrid .pg-row {
  grid-template-columns: minmax(260px, 1.4fr) repeat(var(--perm-cols, 5), minmax(122px, 1fr));
  min-width: calc(260px + (var(--perm-cols, 5) * 122px));
}
.permgrid .pg-row.head {
  position: sticky;
  top: 0;
  z-index: 4;
}
.permgrid .pg-cell:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}
.permgrid .pg-row.head .pg-cell {
  background: var(--paper, #F7F1E8);
}
.permgrid .pg-row.head .pg-cell:first-child {
  z-index: 5;
}
.permgrid .pg-row.pg-group .pg-cell:first-child {
  background: var(--paper-3, #EFE6DA);
}
.permgrid::-webkit-scrollbar { width: 10px; height: 10px; }
.permgrid::-webkit-scrollbar-thumb {
  background: #D6C9B8;
  border-radius: 999px;
  border: 2px solid #fff;
}
.permgrid::-webkit-scrollbar-track { background: var(--paper, #F7F1E8); border-radius: 999px; }
.permgrid .pg-row.pg-group { background: var(--paper-3, #EFE6DA); }
.permgrid .pg-row.pg-group .pg-cell.cat {
  font-family: var(--font-disp, sans-serif); color: var(--primary-hover, #462DE6);
  letter-spacing: .08em; font-size: 11px;
}
.permgrid .pg-cell.rc-perm-name { justify-content: flex-start; }
.rc-perm-name b { display: block; font-weight: 800; font-size: 13px; }
.rc-perm-name span { display: block; margin-top: 2px; color: var(--ink-3, #938678); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-legend {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2, #5A4F46); font-weight: 700;
}
.rc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rc-legend .dotmark {
  width: 18px; height: 18px; border-radius: 6px; background: var(--teal-soft, #DCF1E9);
  color: var(--teal, #1F8A6D); display: inline-flex; align-items: center; justify-content: center;
}
.rc-legend .dotmark.no { background: var(--paper-2, #F2ECE2); color: var(--ink-4, #B8A99B); }
.rc-legend .dotmark svg { width: 11px; height: 11px; }

.rc-branch-layout {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap, 14px);
  flex: 1; min-height: 0;
}
.rc-map-surface { padding: 0; overflow: hidden; }
.rc-map-surface > .head { padding: 14px 18px; border-bottom: 1px solid var(--line, #E7DFD4); }
.rc-map-surface .mapbox { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.rc-leaflet-map { min-height: 520px; z-index: 1; }
.rc-leaflet-picker { min-height: 250px; border-radius: 14px; }
.rc-leaflet-map .leaflet-control,
.rc-leaflet-picker .leaflet-control { font-family: var(--font-text, sans-serif); }
.rc-map-empty {
  position: absolute; inset: 18px; z-index: 420;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 18px; border-radius: 16px;
  background: rgba(255,255,255,.78); border: 1px dashed var(--line, #E7DFD4);
  color: var(--ink-3, #938678); font-size: 13px; font-weight: 800;
  pointer-events: none;
}
.rc-map-label {
  position: absolute; top: 18px; left: 18px; padding: 8px 12px;
  background: #fff; border: 1px solid var(--line, #E7DFD4); border-radius: 10px;
  box-shadow: var(--shadow-1); font-size: 12px; font-weight: 800;
}
.mapbox .pin .lab span { color: var(--ink-3, #938678); font-weight: 700; margin-left: 6px; }
.rc-branch-list { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.rc-branch-list::-webkit-scrollbar { width: 0; }
.rc-branch-card {min-height: 75px; padding: 14px; gap: 8px; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.rc-branch-card:hover { transform: translateY(-1px); }
.rc-branch-card.selected {
  border-color: var(--ember, #F26B3A);
  box-shadow: 0 0 0 4px var(--ember-soft, #FCE7DC), var(--shadow-1);
}
.rc-branch-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.rc-branch-ic {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--ember-soft, #FCE7DC); color: var(--ember-deep, #C8501F);
  display: flex; align-items: center; justify-content: center;
}
.rc-branch-ic svg { width: 20px; height: 20px; }
.rc-branch-copy { flex: 1; min-width: 0; }
.rc-branch-copy > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-branch-copy strong { font-weight: 800; font-size: 15px; }
.rc-branch-copy p { margin: 1px 0 0; font-size: 12px; color: var(--ink-3, #938678); font-weight: 700; line-height: 1.35; }
.rc-branch-rank {
  font-family: var(--font-disp, sans-serif);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--paper-2, #F2ECE2);
  color: var(--ink-2, #5A4F46);
  white-space: nowrap;
  align-self: start;
}
.rc-branch-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-2, #5A4F46);
  font-weight: 700;
  flex-wrap: wrap;
  min-width: 0;
}
.rc-branch-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.rc-branch-meta-info > span { min-width: 0; }
.rc-branch-actions {
  margin-left: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rc-branch-actions .btn { padding: 5px 10px; font-size: 11.5px; }
.rc-branch-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.danger { background: var(--card-bg, #fff); color: var(--rose, #C8455B); border-color: #F0BFC8; }
.btn.danger:hover { background: var(--rose-soft, #FAE4E8); border-color: var(--rose, #C8455B); }
.btn.danger:active { background: #F3CCD3; border-color: var(--rose, #C8455B); }
.brn-empty-card .rc-empty h3 { margin: 0 0 6px; color: var(--ink); font-family: var(--font-disp, sans-serif); }
.brn-empty-card .rc-empty p { margin: 0 0 14px; }
/* The branch dialogs cover the whole viewport. Base .scrim is position:absolute, which anchors it
   to the scrolled .adm-body content (so the dialog drifts off-screen once the page is scrolled);
   fixed resolves against the viewport. The padding keeps the dialog off the top/bottom edges. */
#brn-modal, #brn-delete-modal {
  position: fixed; inset: 0; z-index: 1000;
  padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain;
}
#brn-modal[hidden], #brn-delete-modal[hidden] { display: none !important; }
.brn-modal-wide {
  width: min(1080px, 97vw);
  max-width: 97vw;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brn-modal-wide .mhead { flex: 0 0 auto; padding-top: 16px; }
.brn-modal-wide .mfoot { flex: 0 0 auto; padding-top: 12px; padding-bottom: 14px; }
.brn-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px 10px 22px;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
  gap: 9px 14px;
  align-items: start;
}
.brn-form-body .formgrp { gap: 5px; }
.brn-form-body .formgrp .input,
.brn-form-body .formgrp .select {
  min-height: 36px;
  padding: 8px 10px;
}
.brn-form-body .formgrp textarea.textarea {
  min-height: 46px;
  max-height: 68px;
  padding: 8px 10px;
  resize: vertical;
}
.brn-form-body > :nth-child(1) { grid-column: 1; grid-row: 1; }
.brn-form-body > :nth-child(2) { grid-column: 1; grid-row: 2; }
.brn-form-body > :nth-child(3) { grid-column: 1; grid-row: 3; }
.brn-form-body > :nth-child(4) { grid-column: 1; grid-row: 4; }
.brn-form-body > :nth-child(5) { grid-column: 1; grid-row: 5; }
.brn-form-body > :nth-child(6) { grid-column: 1; grid-row: 6; }
.brn-form-body > :nth-child(7) { grid-column: 2; grid-row: 1; }
.brn-form-body > :nth-child(8) { grid-column: 2; grid-row: 2; }
.brn-form-body > :nth-child(9) { grid-column: 2; grid-row: 3 / span 3; }
.brn-form-body > :nth-child(10) { grid-column: 2; grid-row: 6; }
.brn-form-body > .hint {
  margin-top: -6px;
  color: var(--ink-3, #938678);
  font-size: 11.5px;
  font-weight: 700;
}
.brn-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line, #E7DFD4);
  border-radius: 12px; background: #fff; cursor: pointer;
}
.brn-check input { width: 18px; height: 18px; accent-color: var(--ember, #F26B3A); }
.brn-check b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.brn-check small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.brn-review-fields { grid-column: 1 / -1; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary, #F26B3A) 18%, var(--line, #E7DFD4)); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #F26B3A) 7%, #fff), #fff 58%); }
.brn-review-heading { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.brn-review-mark { width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--primary, #F26B3A); background:color-mix(in srgb, var(--primary, #F26B3A) 12%, #fff); }
.brn-review-mark svg { width:18px; height:18px; }
.brn-review-heading h4 { margin:1px 0 2px; color:var(--ink); font-size:13px; font-weight:850; }
.brn-review-heading p { margin:0; color:var(--ink-3); font-size:11.5px; font-weight:650; line-height:1.4; }
.brn-marker-host { background: transparent; border: 0; }
.brn-map-pin {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
}
.brn-map-pin .marker,
.brn-picker-marker .marker {
  width: 30px; height: 36px; background: var(--ember, #F26B3A); color: #fff;
  border-radius: 18px 18px 18px 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp, sans-serif); font-weight: 800; font-size: 12px;
  box-shadow: 0 6px 14px rgba(var(--primary-rgb),.30);
  transform: rotate(-45deg);
}
.brn-map-pin .marker span,
.brn-picker-marker .marker span { transform: rotate(45deg); display: block; }
.brn-map-pin .lab {
  margin-top: 8px; margin-left: 2px;
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: #fff; padding: 3px 8px;
  border-radius: 7px; border: 1px solid var(--line); box-shadow: var(--shadow-1); white-space: nowrap;
}
.brn-map-pin .lab span { color: var(--ink-3); font-weight: 800; margin-left: 6px; }
.brn-map-pin.selected .marker {
  background: var(--ink, #211A15);
  box-shadow: 0 0 0 5px var(--ember-soft, #FCE7DC), 0 10px 20px rgba(33,26,21,.22);
}
.brn-map-pin.selected .lab { border-color: var(--ember, #F26B3A); }

@media (max-width: 1100px) {
  .rc-branch-layout { grid-template-columns: 1fr; overflow: visible; }
  .rc-map-surface .mapbox { min-height: 320px; }
}
@media (max-width: 760px) {
  .adm-pagehead .right { flex-wrap: wrap; }
  .tbl { min-width: 820px; }
  .permgrid .pg-row { min-width: calc(240px + (var(--perm-cols, 5) * 112px)); }
  .rc-branch-meta { flex-direction: column; align-items: flex-start; }
  .rc-branch-meta-info { width: 100%; }
  .rc-branch-actions { width: 100%; justify-content: flex-start; }
  #brn-modal, #brn-delete-modal { padding: 16px 12px; }
  .brn-modal-wide { max-width: 94vw; }
  .brn-form-body {
    display: flex !important;
    padding-right: 16px;
  }
  .brn-form-body .formgrp.tworow { grid-template-columns: 1fr; }
}

/* Short viewports (landscape phones, split screens): keep the gutter and let the
   map picker shrink instead of forcing the dialog past the screen edges. */
@media (max-height: 620px) {
  #brn-modal, #brn-delete-modal { padding: 12px; }
  .brn-modal-wide .mhead { padding-top: 12px; padding-bottom: 0; }
  .brn-modal-wide .mhead .mic { width: 38px; height: 38px; }
  .brn-modal-wide .mfoot { padding-top: 10px; padding-bottom: 12px; }
  .brn-form-body .rc-leaflet-picker { min-height: 190px; }
}

/* ============================================================
   Tier Management — API-backed implementation of Claude admin-tiers.jsx.
   ============================================================ */
.rc-tier-model {
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  font-size:12.5px; font-weight:800; color:var(--ink-2);
}
.rc-tier-model b { color:var(--ember-deep); }
.rc-tier-model span { width:1px; height:14px; background:var(--line); }
.rc-tier-model em { font-style:normal; color:var(--ink-3); font-weight:700; }
.rc-tier-sequence {
  padding:18px 18px 20px;
  flex: 0 0 auto;
  overflow: visible;
}
.rc-tier-sequence .tier-strip {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 14px);
  overflow: visible;
}
.tier-row {
  display: grid;
  align-items: stretch;
  gap: 0;
}
.rc-tier-loading { grid-template-columns:minmax(240px,1fr) 38px minmax(240px,1fr) 38px minmax(240px,1fr); }
.rc-tier-drawer, .rc-tier-settings { width:480px; z-index:35; }
.rc-tier-drawer form { display:flex; flex-direction:column; min-height:0; height:100%; }
.rc-tier-drawer-ic { width:36px; height:36px; background:var(--gold-soft); color:var(--gold-deep); border-color:#F0DCAE; }
.rc-drawer-sub { font-size:12px; color:var(--ink-3); font-weight:700; margin-top:1px; }
.formgrp input.input,
.formgrp select.select,
.formgrp textarea.textarea {
  width:100%; box-sizing:border-box; outline:none; resize:vertical;
  background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:10px 12px;
  font-family:var(--font-text); font-weight:600; font-size:14px; color:var(--ink);
}
.formgrp textarea.textarea { min-height:56px; line-height:1.45; }
.input-affix { position:relative; }
.input-affix .input { padding-inline-end:58px; }
.input-affix-label {
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:11px; font-weight:800; letter-spacing:.04em;
  pointer-events:none;
}
.ps-rules-surface input[type="number"] {
  appearance:textfield;
  -moz-appearance:textfield;
}
.ps-rules-surface input[type="number"]::-webkit-inner-spin-button,
.ps-rules-surface input[type="number"]::-webkit-outer-spin-button {
  margin:0;
  -webkit-appearance:none;
}
.formgrp input.input:focus,
.formgrp select.select:focus,
.formgrp textarea.textarea:focus { border-color:var(--ember); box-shadow:0 0 0 4px var(--ember-soft); }
.formgrp .label span { color:var(--ink-4); font-weight:700; text-transform:none; letter-spacing:0; }
.rulefield.compact { margin-top:8px; }
.rc-rule-ic {
  width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; margin-right:8px;
}
.rc-rule-ic svg { width:12px; height:12px; }
.rc-rule-ic.up { background:var(--teal-soft); color:var(--teal); }
.rc-rule-ic.down { background:var(--rose-soft); color:var(--rose); }
.swatchgrid button.sw { border:2px solid transparent; padding:0; }
.swatchgrid button.sw.on { border-color:var(--ink); }
.swatchgrid button.sw svg { width:14px; height:14px; }
.segctl button.seg { border:0; background:transparent; font-family:var(--font-text); }
.rc-tier-actions {
  margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:6px;
  border-top:1px solid var(--line-2); padding-top:10px;
}
.rc-tier-actions button {
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 8px;
  font-family:var(--font-text); font-weight:800; font-size:11.5px; color:var(--ink-2); cursor:pointer;
}
.rc-tier-actions button:hover { border-color:var(--ink-3); color:var(--ink); }
.rc-tier-actions button:disabled { opacity:.45; cursor:not-allowed; }
.rc-tier-actions button.danger { color:var(--rose); border-color:#F0BFC8; }
.rc-danger { background:var(--rose); color:#fff; border-color:var(--rose); }
.strat-grid .strat-opt { text-align:left; }
.strat-grid button.strat-opt { font-family:var(--font-text); color:var(--ink); }
.rc-tags { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.tier-card .tc-glyph svg { width:22px; height:22px; }
.tier-card .tc-foot .btn svg { width:12px; height:12px; }
#tier-delete-modal[hidden],
#tier-drawer[hidden],
#tier-settings[hidden],
#tier-empty[hidden],
#tier-strip[hidden],
#tier-loading[hidden],
#tier-error[hidden],
#tier-strategy-banner[hidden] { display:none; }

@media (max-width: 1200px) {
  .tier-row { overflow-x:auto; overflow-y:visible; padding-bottom:8px; }
  .tier-row .tier-card { min-width:240px; }
}
@media (max-width: 900px) {
  .rc-tier-drawer, .rc-tier-settings { position:fixed; width:min(480px, 100vw); z-index:70; }
  .adm-body { padding-right:14px !important; }
  .rc-tier-model { width:100%; justify-content:center; }
}

/* Tier modals + live preview refinements. */
.rc-modal-scrim {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; background: rgba(33, 26, 21, .46);
  backdrop-filter: blur(7px);
}
.rc-modal-scrim[hidden] { display: none; }
.rc-tier-modal {
  width: min(1120px, 96vw); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.rc-tier-modal form { display: flex; flex-direction: column; min-height: 0; }
.rc-tier-modal .dhead {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.rc-tier-modal .dbody {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px 18px;
}
.rc-tier-modal .dbody > .formgrp,
.rc-tier-modal .dbody > .divider,
.rc-tier-modal .dbody > .explain,
.rc-tier-modal .dbody > .callout { grid-column: 1; }
.rc-tier-modal .dfoot {
  padding: 14px 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px;
}
.rc-tier-live-preview {
  grid-column: 2; grid-row: 1 / span 20;
  position: sticky; top: 0; align-self: start;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper-2); padding: 12px;
}
.rc-tier-live-preview > .label { margin-bottom: 10px; }
.rc-preview-shell .tier-card { min-width: 0; width: 100%; }
.rc-preview-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 10px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-deep);
  font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.rc-color-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center;
}
.rc-color-row input[type="color"] {
  min-height: 44px; padding: 4px; cursor: pointer;
}
.rc-color-row span {
  font-size: 12px; line-height: 1.45; color: var(--ink-3); font-weight: 700;
}
#tier-modal[hidden] { display: none; }

/* Tier Gem — shared gem/shield renderer states (markup from resources/js/tier-gem.js, 32 merged styles). */
.rc-gem {
  position: relative; display: inline-flex; flex: 0 0 auto;
  filter: drop-shadow(0 3px 5px rgba(24, 17, 12, .28));
}
.rc-gem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rc-gem.active {
  filter: drop-shadow(0 0 5px var(--gem-glow)) drop-shadow(0 0 16px var(--gem-glow-soft)) drop-shadow(0 4px 8px rgba(24, 17, 12, .3));
}
.rc-gem.active .rc-gem-aura {
  transform-box: fill-box; transform-origin: center;
  animation: rcGemAura 2.4s ease-in-out infinite;
}
.rc-gem.active .rc-gem-rim { animation: rcGemRim 2.4s ease-in-out infinite; }
.rc-gem.active .rc-gem-sparkle { opacity: 0; animation: rcGemTwinkle 2.1s ease-in-out infinite; }
.rc-gem.active .rc-gem-sparkle.s2 { animation-delay: .7s; }
.rc-gem.active .rc-gem-sparkle.s3 { animation-delay: 1.3s; }
@keyframes rcGemAura { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes rcGemRim { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
@keyframes rcGemTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
  45%, 60% { opacity: .95; transform: scale(1); transform-box: fill-box; transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-gem.active .rc-gem-aura,
  .rc-gem.active .rc-gem-rim,
  .rc-gem.active .rc-gem-sparkle { animation: none; opacity: .85; }
}

/* Tier Gem picker inside the tier form. */
.rc-gem-section .rc-gem-color-label { margin-top: 12px; }
.rc-gem-options {
  margin-top: 10px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px;
}
.rc-gem-opt {
  appearance: none; min-width: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper-2); padding: 10px 6px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rc-gem-opt:hover { transform: translateY(-1px); border-color: var(--gold-deep); }
.rc-gem-opt:focus-visible { outline: 3px solid var(--ember-soft); outline-offset: 2px; border-color: var(--ember); }
.rc-gem-opt .nm {
  font-size: 10.5px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; overflow-wrap: anywhere;
}
.rc-gem-opt.on {
  border-color: var(--gold-deep);
  background: var(--gold-soft);
  box-shadow: 0 0 0 2px var(--gold-soft), 0 4px 10px rgba(24, 17, 12, .1);
}
.rc-gem-opt.on .nm { color: var(--gold-deep); }
.rc-gem-preview {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.rc-gem-stage {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper-2); padding: 18px 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 150px; justify-content: center;
}
.rc-gem-stage .cap {
  font-size: 10.5px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}
/* The active stage is dark so the unlocked glow reads like a game reveal. */
.rc-gem-stage.lit {
  background: radial-gradient(120% 90% at 50% 32%, #322A24 0%, #1B1512 68%, #140F0C 100%);
  border-color: #3B3028;
}
.rc-gem-stage.lit .cap { color: #D8C6A8; }
@media (max-width: 420px) {
  .rc-gem-preview { grid-template-columns: 1fr; }
}

/* Gem replaces the flat icon in tier card glyphs. */
.tier-card .tc-identity { display: inline-flex; align-items: center; gap: 4px; }
.tier-card .tc-identity .tc-glyph { width: 34px; height: 34px; border-radius: 10px; }
.tier-card .tc-glyph .rc-gem svg { width: 100%; height: 100%; }
.tier-card .tc-glyph .rc-gem { filter: drop-shadow(0 2px 3px rgba(24, 17, 12, .35)); }

@media (max-width: 620px) {
  .rc-gem-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .rc-tier-modal .dbody { grid-template-columns: 1fr; }
  .rc-tier-live-preview { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 620px) {
  .rc-modal-scrim { padding: 10px; align-items: stretch; }
  .rc-tier-modal { width: 100%; max-height: calc(100vh - 20px); }
  .rc-tier-modal .dhead,
  .rc-tier-modal .dbody,
  .rc-tier-modal .dfoot { padding-left: 14px; padding-right: 14px; }
}

/* Inline Leveling Strategy page, matching Claude StrategyPage instead of modal. */
.rc-strategy-page {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 14px);
  flex: 0 0 auto;
}
.rc-strategy-page[hidden] { display: none; }
.rc-strategy-page > .strat-grid.lg {
  flex: 0 0 auto;
}
.rc-strategy-page .strat-opt.lg {
  min-height: 300px;
}
.rc-strategy-compare {
  flex: 0 0 auto;
}
.rc-strategy-page .jobnote {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .rc-strategy-page > .strat-grid.lg { grid-template-columns: 1fr; }
  .rc-strategy-page .strat-opt.lg { min-height: 0; }
  .rc-strategy-compare .cmp { overflow-x: auto; }
  .rc-strategy-compare .cmp-row { min-width: 760px; }
}

/* Explicitly hide tier-list sections when the inline strategy page is active. */
[data-tier-list][hidden],
#tier-strategy-view[hidden] {
  display: none !important;
}

/* ============================================================
   Dark mode — toggled via html.dark class, persisted in localStorage.
   ============================================================ */
html.dark {
  --page-gradient-start: #241A2D;
  --page-gradient-mid: #1D1B31;
  --page-gradient-end: #172A26;
  --paper: #171622;
  --paper-2: #211F31;
  --paper-3: #29263C;
  --card: #222032;
  --card-bg: #222032;
  --input-bg: #211F31;
  --sidebar-bg: #1C1A2A;
  --header-bg: #1C1A2A;
  --ink: #F3F1FA;
  --ink-2: #C2BED1;
  --ink-3: #918BA5;
  --ink-4: #666078;
  --line: #3B3850;
  --line-2: #302D43;
  --line-3: #29263A;
  --primary-soft: rgba(var(--primary-rgb),.20);
  --secondary-action-bg: #29263C;
  --secondary-action-hover: #332F4A;
}
html.dark body {
  background: var(--paper);
  color: var(--ink);
}
html.dark .sidebar,
html.dark .adm-topbar,
html.dark .modal,
html.dark .drawer,
html.dark .permgrid,
html.dark .atimeline .aev { background: var(--card); }
html.dark .btn:not(.primary):not(.danger),
html.dark .bigbtn.ghost,
html.dark .filterbar .fbsearch,
html.dark .filterbar .select,
html.dark .fchip,
html.dark .field,
html.dark .formgrp input.input,
html.dark .formgrp select.select,
html.dark .formgrp textarea.textarea,
html.dark .rule .pill,
html.dark .segctl .seg.on,
html.dark .tbl .ck,
html.dark .checkbox { background: var(--paper-2); border-color: var(--line); }
html.dark .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
html.dark .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
html.dark .btn.primary:active { background: var(--primary-active); border-color: var(--primary-active); }
html.dark .adm-topbar .search.rc-global-search:focus-within,
html.dark .adm-topbar .search.rc-global-search.is-open { background: var(--paper-2); }
html.dark .adm-topbar .search .kbd { background: var(--paper-3); }
html.dark .rc-global-search-panel {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 22px 55px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.22);
}
html.dark .rc-gs-item:hover,
html.dark .rc-gs-item.is-active {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.20), rgba(228,109,206,.10));
}
html.dark .rc-gs-badge,
html.dark .rc-gs-group-head b { background: var(--paper-2); }
html.dark .rc-gs-title mark { background: rgba(233,139,84,.32); }
html.dark .permgrid .pg-cell:first-child { background: var(--card); }
html.dark .permgrid .pg-row.head .pg-cell,
html.dark .permgrid .pg-row.head .pg-cell:first-child { background: var(--paper-2); }
html.dark .permgrid::-webkit-scrollbar-thumb { background: #4A3F38; }
html.dark .permgrid::-webkit-scrollbar-track { background: var(--paper-2); }
html.dark .rc-skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 37%, var(--paper-2) 63%);
  background-size: 400% 100%;
}
html.dark .rc-map-empty,
html.dark .brn-map-pin .lab,
html.dark .brn-check { background: var(--card); border-color: var(--line); }
html.dark .brn-review-fields { background:color-mix(in srgb, var(--primary, #F26B3A) 10%, var(--card)); }
html.dark .rc-branch-card.selected { box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.20), var(--shadow-1); }
html.dark .brn-map-pin.selected .marker { background: var(--ember); }

/* Tier page + kpi cards */
html.dark .kpi-card,
html.dark .tier-card,
html.dark .surface,
html.dark .stratbox,
html.dark .strat-banner,
html.dark .empty-tier,
html.dark .jobnote,
html.dark .qrtile,
html.dark .integ { background: var(--card); border-color: var(--line); }
html.dark .tier-strip .tier-arrow .ic { background: var(--paper-2); border-color: var(--line); }
html.dark .rc-tier-actions button { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }
html.dark .rc-tier-actions button:hover { background: var(--paper-3); border-color: var(--ink-4); color: var(--ink); }
html.dark .rc-tier-actions button.danger { color: var(--rose); border-color: #5A2A2E; }
html.dark .rc-tier-model { background: var(--paper-2); border-color: var(--line); }

/* Tags, pills, chips */
html.dark .tag.line { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }
html.dark .pillsel,
html.dark .otp .box,
html.dark .tfrow .tf { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }

/* Strategy option — selected state */
html.dark .strat-opt.on { background: var(--card); }
html.dark .strat-opt .so-eg { background: var(--paper-3); }

/* QR tiles */
html.dark .qrtile .qrimg { background: var(--paper-2); border-color: var(--line); }
html.dark .qrtile .acts .ab { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }

/* Map pin label */
html.dark .mapbox .pin .lab { background: var(--card); border-color: var(--line); }

/* Mobile nav toggle */
html.dark .rc-nav-toggle { background: var(--paper-2); border-color: var(--line); }

/* Map overlay label */
html.dark .rc-map-label { background: var(--card); border-color: var(--line); }

/* Quickmenu dropdown */
html.dark .quickmenu { background: var(--card); border-color: var(--line); }
html.dark .quickmenu .qmi:hover { background: var(--paper-2); }

/* Dark mode toggle icon visibility */
.dm-sun { display: none; }
html.dark .dm-moon { display: none; }
html.dark .dm-sun { display: block; }

/* Roles matrix editing. */
#emp-modal[hidden],
#emp-delete-modal[hidden],
#emp-pwd-modal[hidden],
#rwd-modal[hidden],
#rwd-delete-modal[hidden],
#rwd-row-menu[hidden],
#gft-modal[hidden],
#gft-delete-modal[hidden],
#gft-row-menu[hidden],
#brn-modal[hidden],
#brn-delete-modal[hidden],
#brn-qr-modal[hidden],
#sc-delete-modal[hidden],
#sc-empty[hidden],
#roles-save[hidden],
#role-create-modal[hidden],
#role-delete-modal[hidden] {
  display: none !important;
}
.rc-role-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
}
.rc-role-users {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); font-size: 12px; font-weight: 900;
  padding: 4px 7px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
}
.rc-role-users svg { width: 14px; height: 14px; color: var(--ink-3); }
.rc-role-users b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-role-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
.rc-role-actions .btn {
  padding: 6px 10px; min-height: 0; font-size: 12px;
}
.rc-role-actions .btn svg {
  width: 14px; height: 14px;
}
.permgrid button.pg-cell {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; border-left: 1px solid var(--line-2);
  cursor: pointer; font-family: var(--font-text);
}
.permgrid button.pg-cell:hover { background: var(--paper-2); }
.permgrid button.pg-cell:focus-visible {
  outline: 3px solid var(--ember-soft); outline-offset: -3px;
}
.permgrid button.pg-cell[disabled] { cursor: not-allowed; opacity: .55; }
#role-add[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.rc-role-modal .mic { background: var(--violet-soft); color: var(--violet); }
.rc-role-modal .mic.danger { background: var(--rose-soft); color: var(--rose); }
.rc-role-modal textarea.textarea { min-height: 86px; }
.rc-delete-copy {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}
.rc-delete-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--rose-soft);
  color: var(--rose);
  font-size: 12.5px;
  font-weight: 800;
}

/* ============================================================
   LOYALTY PROGRAM MODULE — overview hub, stamp cards, points
   setup, tier conversion, reward eligibility.
   Visual intent from the Claude Design loyalty files, normalized
   to the live portal (html.dark, /resources assets, vanilla JS).
   ============================================================ */

/* ---------- overview hero ---------- */
.loy-hero {
  position: relative; overflow: hidden; border-radius: 20px; padding: 22px 24px;
  color: #fff; display: flex; align-items: center; gap: 22px;
  box-shadow: var(--shadow-2); flex: none;
}
.loy-hero.stamp { background: linear-gradient(150deg, #4B2E22, #7A4A30 65%, #9A5E37); }
.loy-hero.points { background: linear-gradient(150deg, #2E2030, #4A2F45 60%, #6E3F57); }
/* Per-feature overview heroes. */
.loy-hero.benefits { background: linear-gradient(150deg, #16302A, #1F6E58 62%, #2C8F6E); }
.loy-hero.occasions { background: linear-gradient(150deg, #44241A, #B0532A 60%, #E07B3C); }
.loy-hero.missions { background: linear-gradient(150deg, #1B2740, #29456E 60%, #356092); }
.loy-hero.games { background: linear-gradient(150deg, #2E2040, #4A2F6E 60%, #6E3F9A); }
.loy-hero.referrals { background: linear-gradient(150deg, #142C3A, #1C6E74 58%, #2FA38C); }
.loy-hero.menu { background: linear-gradient(150deg, #3A2C18, #8A6A2A 60%, #B89038); }
.loy-hero.fields { background: linear-gradient(150deg, #38202A, #7A3550 60%, #9A4468); }
.loy-hero.users { background: linear-gradient(150deg, #203247, #267076 62%, #359A84); }
.loy-hero.roles { background: linear-gradient(150deg, #2A253F, #4C3D72 60%, #7562A8); }
.loy-hero.branches { background: linear-gradient(150deg, #1D2D26, #2E6F55 62%, #4C9868); }
.loy-hero.customers { background: linear-gradient(150deg, #25314A, #2D6CC0 62%, #4B95D8); }
.loy-hero.tiers { background: linear-gradient(150deg, #25314A, #5A4778 60%, #8A68A8); }
.loy-hero.tier-strategy { background: linear-gradient(150deg, #1F2F3A, #31606E 60%, #458B8A); }
.loy-hero.stampcards { background: linear-gradient(150deg, #3B2B1F, #906231 62%, #B8843C); }
.loy-hero.stampform { background: linear-gradient(150deg, #2A3144, #536281 60%, #7585A8); }
.loy-hero.pointprogram { background: linear-gradient(150deg, #2D2F22, #6B7040 62%, #9A9A52); }
.loy-hero.pointconversion { background: linear-gradient(150deg, #1F3440, #2F6F7D 62%, #48A0A6); }
.loy-hero.rewards { background: linear-gradient(150deg, #23384B, #3C6A8E 60%, #5B95B5); }
.loy-hero.gifts { background: linear-gradient(150deg, #382637, #765071 60%, #9A6C8E); }
.loy-hero.reports { background: linear-gradient(150deg, #203243, #486985 60%, #6C94A8); }
.loy-hero.integrations { background: linear-gradient(150deg, #243536, #4F7772 60%, #78A095); }
.loy-hero.audit { background: linear-gradient(150deg, #332D27, #6D5A45 60%, #9A8060); }
.loy-hero.account { background: linear-gradient(150deg, #29204F, #51408C 60%, #7655B8); }
.loy-hero.appearance { background: linear-gradient(150deg, #41243F, #87466F 60%, #BA6791); }
.loy-hero .sheen { position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%); pointer-events: none; }
.loy-hero .lh-ic {
  width: 64px; height: 64px; border-radius: 18px; flex: none; position: relative;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.loy-hero .lh-ic svg { width: 30px; height: 30px; }
.loy-hero .lh-main { flex: 1; min-width: 0; position: relative; }
.loy-hero .lh-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.loy-hero .lh-type { font-family: var(--font-disp); font-weight: 700; font-size: 30px; letter-spacing: -.022em; line-height: 1.04; margin: 3px 0 0; }
.loy-hero .lh-sub { font-size: 13.5px; opacity: .8; margin-top: 5px; font-weight: 600; max-width: 520px; line-height: 1.45; }
.loy-hero .lh-badge {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.loy-hero .lh-badge .d { width: 8px; height: 8px; border-radius: 50%; background: #7ECBA0; }
.loy-hero .lh-badge.off .d { background: var(--rose-soft); }
.loy-hero .lh-badge b { color: #fff; }
.loy-hero .lh-badge em { font-style: normal; opacity: .72; }
.loy-hero .lh-side {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  flex: none; max-width: 46%;
}
.loy-hero .lh-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.loy-hero .loy-backchip { color: rgba(255,255,255,.78); margin-bottom: 6px; }
.loy-hero .loy-backchip:hover { color: #fff; }
.loy-hero .lh-actions .btn {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); color: #fff;
  box-shadow: none; height: 40px; min-height: 40px; box-sizing: border-box;
  padding-top: 0; padding-bottom: 0; line-height: 1;
}
.loy-hero .lh-actions .btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.36); }
.loy-hero .lh-actions .btn.primary {
  background: #fff; border-color: #fff; color: var(--ink, #211A15);
}
.loy-hero .lh-actions .btn.primary:hover { background: rgba(255,255,255,.9); }
.loy-hero .lh-actions .btn.danger {
  background: rgba(200,69,91,.22); border-color: rgba(255,255,255,.28); color: #fff;
}
.loy-hero .lh-actions .segctl {
  height: 40px; min-height: 40px; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22);
  box-shadow: none; box-sizing: border-box;
}
.loy-hero .lh-actions .segctl .seg { height: 32px; color: #fff; }
.loy-hero .lh-actions .segctl .seg.on { background: #fff; color: var(--ink, #211A15); }

/* Strategy settings is the only entry point to the leveling-strategy page,
   so it gets a gold accent to stand out from the frosted hero buttons. */
.loy-hero .lh-actions .btn#tier-settings-btn {
  background: var(--gold, #E0A43B); border-color: var(--gold, #E0A43B);
  color: #3A2A10; font-weight: 800; box-shadow: 0 6px 16px rgba(224,164,59,.42);
}
.loy-hero .lh-actions .btn#tier-settings-btn:hover {
  background: var(--gold-deep, #B97F1E); border-color: var(--gold-deep, #B97F1E); color: #fff;
}

/* ---------- quick actions ---------- */
.quickact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap, 14px); flex: none; }
.quickact {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.quickact:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.quickact .qa-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.quickact .qa-ic svg { width: 20px; height: 20px; }
.quickact.ember .qa-ic { background: var(--ember-soft); color: var(--ember-deep); }
.quickact.gold .qa-ic { background: var(--gold-soft); color: var(--gold-deep); }
.quickact.teal .qa-ic { background: var(--teal-soft); color: var(--teal); }
.quickact.violet .qa-ic { background: var(--violet-soft); color: var(--violet); }
.quickact .qa-nm { font-family: var(--font-disp); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.quickact .qa-sub { font-size: 12px; color: var(--ink-3); font-weight: 600; line-height: 1.4; }
.quickact .qa-go { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ember-deep); }
.quickact .qa-go svg { width: 13px; height: 13px; }

/* ---------- split layout + back chip ---------- */
.loy-split { display: grid; grid-template-columns: 2.2fr 1fr; gap: var(--gap, 14px); align-items: start; }
.loy-backchip {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 12px; font-weight: 800; color: var(--ink-3); text-decoration: none;
}
.loy-backchip:hover { color: var(--ink); }
.loy-backchip svg { width: 13px; height: 13px; }

/* ---------- tier chips / tier badges ---------- */
.tierchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 7px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 800; color: var(--ink);
}
.tierchip .dot { width: 18px; height: 18px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tierchip .lv { font-size: 10px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tierbadge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 5px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.tierbadge .d { width: 14px; height: 14px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tierbadge.muted { opacity: .55; }
.tierbadge.all { background: var(--teal-soft); border-color: #BFE5D7; color: var(--teal); }

/* ---------- thumbnail rows + health bars (hub) ---------- */
.thumb-list { display: flex; flex-direction: column; gap: 8px; }
.thumb-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.thumb-row .th-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-family: var(--font-disp); font-weight: 800; }
.thumb-row .th-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.thumb-row .th-nm { font-weight: 800; font-size: 13px; line-height: 1.15; }
.thumb-row .th-sub { font-size: 11px; color: var(--ink-3); font-weight: 700; margin-top: 1px; }
.thumb-row .th-end { margin-left: auto; text-align: right; }
.health-list { display: flex; flex-direction: column; gap: 12px; }
.health-row .hr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: 12.5px; font-weight: 800; }
.health-row .hr-top .v { color: var(--ink-3); font-weight: 700; }
.health-bar { height: 8px; background: var(--line-2); border-radius: 5px; overflow: hidden; }
.health-bar i { display: block; height: 100%; border-radius: 5px; }

/* ---------- stamp card management grid ---------- */
.stampmgmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap, 14px); }
.stamp-tile { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.stamp-tile.off { opacity: .62; }
.stamp-tile .st-cover { position: relative; padding: 18px; color: #fff; min-height: 260px; display: flex; flex-direction: column; gap: 10px; }
.stamp-tile .st-cover .sheen { position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%); pointer-events: none; }
.stamp-tile .st-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stamp-tile .st-title-stack { min-width: 0; flex: 1; }
.stamp-tile .st-brand { font-size: 10px; font-weight: 900; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; opacity: .82; max-width: 70%; }
.stamp-tile .st-title-stack .st-brand { max-width: none; }
.stamp-tile .st-gly { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-weight: 900; font-size: 21px; flex: none; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.stamp-tile .st-gly img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.stamp-tile .st-vis { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.16); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.stamp-tile .st-nm { position: relative; font-family: var(--font-disp); font-weight: 800; font-size: 25px; line-height: 1.04; letter-spacing: -.02em; margin-top: 12px; }
.stamp-tile .st-title-stack .st-nm { margin-top: 7px; }
.stamp-tile .st-perk { position: relative; font-size: 12.5px; opacity: .78; font-weight: 700; line-height: 1.38; margin-top: -2px; }
.stamp-tile .st-counter { position: relative; display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.stamp-tile .st-counter b { font-family: var(--font-disp); font-weight: 900; font-size: 44px; line-height: .95; letter-spacing: -.04em; }
.stamp-tile .st-counter span { font-size: 18px; font-weight: 900; opacity: .62; }
.stamp-tile .st-dots { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.stamp-tile .st-dots .sd { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.42); }
.stamp-tile .st-dots .sd.full { border-style: solid; border-color: rgba(255,255,255,.94); background: rgba(255,255,255,.94); color: #7A4A30; display: flex; align-items: center; justify-content: center; font-size: 13px; overflow: hidden; box-shadow: 0 5px 12px rgba(0,0,0,.15); }
.stamp-tile .st-dots .sd.full img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.stamp-tile .st-dots .sd.last { border-style: solid; border-color: rgba(255,211,124,.9); background: rgba(224,164,59,.28); color: #FFD37C; display: flex; align-items: center; justify-content: center; font-size: 13px; }
/* Custom stamp icons on list tiles: drop the circle chrome entirely. */
.stamp-tile .st-dots .sd.has-icon { background: none; border: none; border-radius: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; }
.stamp-tile .st-dots .sd.has-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.stamp-tile .st-dots .sd.empty.has-icon img { opacity: .45; }
/* The list remains compact, but un-uploaded stamps retain the Slot shape set
   in Card Studio. Tenant-provided artwork stays un-clipped. */
.stamp-tile[data-stamp-shape="SQUIRCLE"] .st-dots .sd:not(.has-icon) { border-radius: 30%; }
.stamp-tile[data-stamp-shape="HEX"] .st-dots .sd:not(.has-icon) { clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
.stamp-tile[data-stamp-shape="TICKET"] .st-dots .sd:not(.has-icon) { clip-path: polygon(0% 0%,100% 0%,100% 38%,88% 50%,100% 62%,100% 100%,0% 100%,0% 62%,12% 50%,0% 38%); }
.stamp-tile[data-stamp-shape="STAR"] .st-dots .sd:not(.has-icon) { clip-path: polygon(50% 0%,63% 34%,99% 35%,71% 57%,80% 92%,50% 71%,20% 92%,29% 57%,1% 35%,37% 34%); }
.stamp-tile[data-stamp-shape="SHIELD"] .st-dots .sd:not(.has-icon) { clip-path: polygon(50% 0%,100% 16%,100% 58%,50% 100%,0% 58%,0% 16%); }
.stamp-tile .st-reward-callout { position: relative; margin-top: auto; border-radius: 16px; padding: 10px 12px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
.stamp-tile .st-reward-callout .rc-gi { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex: none; }
.stamp-tile .st-reward-callout b { display: block; font-size: 11.5px; line-height: 1.2; }
.stamp-tile .st-reward-callout em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 800; opacity: .7; }
.stamp-tile .st-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.stamp-tile .st-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stamp-tile .st-stats .k { font-size: 9.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; }
.stamp-tile .st-stats .v { font-family: var(--font-disp); font-weight: 800; font-size: 17px; letter-spacing: -.02em; margin-top: 1px; }
.stamp-tile .st-stats .st-stat-sm { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; line-height: 1.15; padding-top: 3px; }
.stamp-tile .st-gifts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.stamp-tile .st-foot { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); margin-top: auto; }
.stamp-tile .st-foot .btn { flex: 1; justify-content: center; padding: 7px 8px; font-size: 12px; border-radius: 9px; }
.stamp-tile .st-foot .iconbtn { flex: none; }
.stamp-tile .st-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: var(--ink-2); cursor: pointer; }

/* small toggle switch */
.tg { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .15s; cursor: pointer; border: 0; padding: 0; }
.tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.tg.on { background: var(--primary); }
.tg.on::after { left: 16px; }
.tg[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- gradient & icon pickers ---------- */
.gradgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.gradgrid .gd { height: 46px; border-radius: 12px; cursor: pointer; position: relative; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
.gradgrid .gd.on { border-color: var(--ink); }
.gradgrid .gd svg { width: 15px; height: 15px; display: none; }
.gradgrid .gd.on svg { display: block; }
.gradgrid .gd-custom { position: relative; overflow: hidden; }
.gradgrid .gd-custom input[type="color"] { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border: 0; padding: 0; cursor: pointer; background: transparent; }
.rc-sc-color-row { margin-top: 10px; }
.iconpick { display: flex; gap: 8px; flex-wrap: wrap; }
.iconpick .ip { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer; padding: 0; }
.iconpick .ip.on { border-color: var(--ember); background: var(--ember-soft); box-shadow: 0 0 0 3px var(--ember-soft); }

/* ---------- tier visibility selector ---------- */
.tiervis-row { display: flex; flex-direction: column; gap: 7px; }
.tiervis-opt {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s;
  font-family: var(--font-text); text-align: left; width: 100%;
}
.tiervis-opt:hover { border-color: var(--ink-3); }
.tiervis-opt.on { border-color: var(--ember); background: var(--ember-soft); }
.tiervis-opt .tv-dot { width: 26px; height: 26px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tiervis-opt .tv-nm { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.tiervis-opt .tv-ar { font-size: 12px; color: var(--ink-3); font-weight: 700; direction: rtl; margin-left: 6px; }
.tiervis-opt .tv-sum { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.tiervis-opt.on .tv-sum { color: var(--ember-deep); }
.tiervis-opt .tv-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; }
.tiervis-opt.on .tv-radio { border-color: var(--ember); background: var(--ember); }
.tiervis-opt.on .tv-radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

/* ---------- gift/reward picker with conflict tooltip ---------- */
.giftpick-list { display: flex; flex-direction: column; gap: 8px; }
.giftpick {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
}
.giftpick.on { border-color: var(--teal); background: var(--teal-soft); }
.giftpick .gp-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); background: #fff; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.giftpick .gp-check svg { width: 12px; height: 12px; display: none; }
.giftpick.on .gp-check { background: var(--teal); border-color: var(--teal); }
.giftpick.on .gp-check svg { display: block; }
.giftpick .gp-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--paper-2); font-size: 18px; overflow: hidden; }
.giftpick .gp-ic img { width: 100%; height: 100%; object-fit: cover; }
.giftpick .gp-main { flex: 1; min-width: 0; }
.giftpick .gp-nm { font-weight: 800; font-size: 13.5px; line-height: 1.15; }
.giftpick .gp-meta { font-size: 11px; color: var(--ink-3); font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ps-reward-row { flex-wrap: wrap; }
.ps-reward-row .gp-main { min-width: 180px; }
.ps-tier-costs {
  width: 100%; margin-left: 31px; padding: 10px 11px; border-radius: 12px;
  background: rgba(255,255,255,.68); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px;
}
.ps-tier-cost-head { font-size: 10px; font-weight: 900; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.ps-tier-cost {
  display: grid; grid-template-columns: minmax(0, 1fr) 122px; gap: 10px; align-items: center;
  padding: 8px 9px; border-radius: 11px; background: var(--paper); border: 1px solid var(--line);
}
.ps-tier-cost .tc-tier { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ps-tier-cost .tc-tier i { width: 24px; height: 24px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ps-tier-cost .tc-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ps-tier-cost .tc-tier b { font-size: 12.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tier-cost .tc-ratio { color: var(--ink-3); font-size: 10.5px; font-weight: 800; line-height: 1.25; }
.ps-tier-cost .tc-input { display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 8px; }
.ps-tier-cost .tc-input:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }
.ps-tier-cost .tc-input input { border: 0; background: transparent; outline: 0; min-width: 0; height: 36px; padding: 0; font-weight: 850; text-align: right; }
.ps-tier-cost .tc-input em { font-style: normal; font-size: 10.5px; font-weight: 900; color: var(--ink-3); }
@media (max-width: 620px) {
  .ps-tier-costs { margin-left: 0; }
  .ps-tier-cost { grid-template-columns: 1fr; }
}
.giftpick.sc-gift-elig-row { align-items: flex-start; cursor: default; }
.giftpick.sc-gift-elig-row .gp-check,
.giftpick.sc-gift-elig-row .gp-ic,
.giftpick.sc-gift-elig-row .gp-main { cursor: pointer; }
.sc-gift-elig { margin-left: auto; min-width: min(430px, 48%); display: flex; flex-direction: column; gap: 6px; }
.sc-gift-elig .er-rulelab { font-size: 9.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; }
.sc-gift-elig .er-avail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-gift-elig-readonly .tierbadge { cursor: default; }
.gft-elig-field { gap: 8px; }
.gft-elig-mode {
  display: inline-flex; width: fit-content; max-width: 100%; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px;
}
.gft-elig-mode button {
  border: 0; background: transparent; padding: 7px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 800; color: var(--ink-3); cursor: pointer; font-family: var(--font-text);
}
.gft-elig-mode button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.gft-elig-editor {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}
.gft-elig-editor .select { max-width: 360px; background: #fff; }
.gft-elig-summary { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.gft-tier-picks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gft-tier-picks .tierbadge { border: 0; font-family: var(--font-text); cursor: pointer; }
.gft-tier-picks .tierbadge.pick { opacity: .45; }
.gft-tier-picks .tierbadge.pick.on { opacity: 1; box-shadow: 0 0 0 2px var(--ember-soft); border-color: var(--ember); background: #fff; }
.gft-elig-empty { width: 100%; padding: 9px; }
.giftpick.disabled { background: var(--paper); border-color: var(--line); border-style: dashed; cursor: not-allowed; }
.giftpick.disabled .gp-ic, .giftpick.disabled .gp-nm, .giftpick.disabled .gp-meta { filter: grayscale(.4); opacity: .6; }
.giftpick.disabled .gp-check { border-style: dashed; opacity: .5; }
.gp-warn { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--rose); color: #fff; display: flex; align-items: center; justify-content: center; position: relative; cursor: help; }
.gp-warn svg { width: 14px; height: 14px; }
.warn-tip {
  position: absolute; bottom: calc(100% + 9px); right: -4px; width: 248px; z-index: 60;
  background: #7A2030; color: #fff; border-radius: 11px; padding: 10px 12px;
  font-size: 11.5px; font-weight: 600; line-height: 1.45; box-shadow: var(--shadow-2);
  display: none; text-transform: none; letter-spacing: normal; text-align: left;
}
.warn-tip b { font-weight: 800; color: #FFD9DF; }
.warn-tip::after { content: ""; position: absolute; top: 100%; right: 14px; border: 7px solid transparent; border-top-color: #7A2030; }
.gp-warn:hover .warn-tip, .gp-warn:focus .warn-tip, .gp-warn:focus-within .warn-tip { display: block; }

/* ---------- right-docked loyalty drawer ---------- */
.rc-loy-drawer-scrim {
  position: fixed; inset: 0; background: rgba(33,26,21,.45); z-index: 800;
  display: flex; justify-content: flex-end;
}
.rc-loy-drawer-scrim[hidden] { display: none; }
.rc-loy-drawer { position: relative; top: auto; right: auto; bottom: auto; width: 480px; max-width: 100vw; height: 100%; }
.rc-loy-drawer .dbody { overflow-y: auto; }
.rc-loy-drawer .dhead .mic { flex: none; }
.rc-loy-drawer .dfoot { justify-content: flex-end; }
.rc-loy-drawer .dfoot .left { margin-right: auto; display: flex; gap: 8px; }
.rc-loy-section { font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.rc-loy-minipreview { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; align-self: center;
  max-width: 314px;}

/* ===================== CARD STUDIO (stamp card appearance) =================
   The card itself is styled by card-art.css and rendered by card-art.js —
   the same pair the customer webview uses. Only the editor chrome is here.

   Chrome backgrounds are var(--card), not var(--surface): the portal never
   defines --surface, so those rules resolved to transparent and the theme tiles
   fell back to the UA's black label on the dark theme's near-black panel. */
.sc-studio { display: grid; gap: 10px; font-size: 12px; }
/* .hint is only sized inside .formgrp, and the panel is not one — every hint in
   here was inheriting the 16px body size, which put the explanatory copy a
   size ABOVE the 12px labels it was explaining. */
.sc-studio .hint { font-size: 11.5px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
.sc-studio-top { display: grid; gap: 9px; padding: 0 2px 2px; }
.sc-scope-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-scope-note { margin: 0; }

/* ---- collapsible sections --------------------------------------------------
   Thirty controls in flat lists put every decision on screen at once, which
   read as a wall rather than as a tool. Each section is a closed card until it
   is asked for, and its head keeps two things visible while it is closed: how
   many of its fields this card sets itself, and whether anything inside it was
   clamped — the two facts the panel exists to report. */
.sc-acc { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.sc-acc.is-open { border-color: var(--ink-4); box-shadow: var(--shadow-1); }
.sc-acc-head { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .15s; }
.sc-acc-head:hover { background: var(--paper-2); }
.sc-acc-head:focus-visible { outline: 2px solid var(--ember); outline-offset: -3px; }
.sc-acc-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 9px; background: var(--paper-2); color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; }
.sc-acc.is-open .sc-acc-ic { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sc-acc-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sc-acc-t .n { font-size: 13px; font-weight: 780; letter-spacing: -.005em; color: var(--ink); }
.sc-acc-t .s { font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Solid ink rather than a tinted pill: the count has to stay legible on both
   themes, and --ink/--paper are the only pair that flips with them. */
.sc-acc-n { flex: none; min-width: 19px; height: 19px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 10.5px; font-weight: 800; }
.sc-acc-flag { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.sc-acc-chev { flex: none; color: var(--ink-3); transition: transform .18s ease; }
.sc-acc.is-open .sc-acc-chev { transform: rotate(180deg); }
.sc-acc-body { display: grid; gap: 16px; padding: 13px 12px 15px; border-top: 1px solid var(--line-2); }

/* A labelled run of related fields inside a section. */
.sc-part { display: grid; gap: 12px; }
.sc-part-h { font-size: 10px; font-weight: 800; color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; }

.sc-ctrl { display: grid; gap: 7px; }
.sc-ctrl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-ctrl-head .label { font-size: 12px; font-weight: 750; }

/* The inheritance state of one field. A button when the scope sets the value
   (click to clear it), plain text when it is inherited — so "can I reset this?"
   is answerable at a glance without opening anything. */
.sc-inh { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; }
button.sc-inh { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); color: var(--ink-2); cursor: pointer; }
button.sc-inh:hover { border-color: var(--ink-4); color: var(--ink); }

.sc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-seg-b { min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.sc-seg-b:hover { border-color: var(--ink-4); }
.sc-seg-b.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.sc-range { display: flex; align-items: center; gap: 12px; }
.sc-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ink); }
.sc-range output { flex: none; min-width: 46px; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-align: end; }

/* -- background art -- */
.sc-bg-empty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-bg-empty .hint { margin: 0; flex: 1 1 220px; }
.sc-bg-editor { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; align-items: start; }
/* 16:9 so the frame reads as a wide card band rather than a square thumbnail. */
.sc-bg-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); cursor: grab; touch-action: none; }
.sc-bg-frame.dragging { cursor: grabbing; }
.sc-bg-frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sc-bg-side { display: grid; gap: 9px; }
.sc-bg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-bg-side .hint { margin: 0; }

/* The contrast warning, and the wallet-ratio notice. Advisory, never blocking —
   the tenant may have artwork we cannot reason about — but never silent. */
.sc-contrast { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line)); border-radius: 11px; background: var(--warning-soft); color: var(--warning); font-size: 11.5px; font-weight: 700; }
.sc-contrast b { font-family: var(--mono, ui-monospace, monospace); }

.sc-color-row { display: flex; align-items: center; gap: 10px; }
.sc-color-row input[type="color"] { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
.sc-color-row .hint { margin: 0; }

@media (max-width: 720px) {
  /* Stack the crop editor. Its side column holds a slider, three buttons and a
     status line whose combined min-content width is ~190px; beside a 168px frame
     that cannot fit a narrow panel, and minmax(0,1fr) let the COLUMN shrink while
     the children spilled past the viewport edge. */
  .sc-bg-editor { grid-template-columns: 1fr; }
  .sc-bg-frame { max-width: 260px; }
}

/* ---- launcher --------------------------------------------------------------
   Stands in for the studio on the form. It states how much of the card's design
   has been customised, so the section still answers "what does my card look
   like?" without opening anything. */
.sc-studio-launcher { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }
.sc-studio-launch { display: grid; align-content: center; gap: 8px; min-width: 0; padding: 2px 3px; }
.sc-launch-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.sc-launch-chip { display: grid; gap: 2px; min-width: 0; }
.sc-launch-chip .k { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sc-launch-chip .v { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 750; color: var(--ink); }
.sc-studio-launch .hint { margin: 0; }
.btn.sc-studio-open { align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding-inline: 16px; white-space: nowrap; }

@media (max-width: 620px) {
  .sc-studio-launcher { grid-template-columns: 1fr; gap: 12px; }
  .btn.sc-studio-open { width: 100%; }
}

/* ---- full-page studio overlay ---------------------------------------------
   A design tool wants the card large and the rest of the form gone, which the
   inline panel could not give: it made this page several screens long and left
   the card in a 360px rail. Controls scroll on the left, the card sits on a
   neutral stage on the right. Below toasts (z 9999) on purpose — the studio
   confirms saves through them. */
.sc-studio-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; }
.sc-studio-overlay[hidden] { display: none; }
/* Descendant [hidden] must keep winning against the display rules below. */
.sc-studio-overlay [hidden] { display: none !important; }
.sc-studio-shell { width: 100vw; height: 100dvh; background: var(--paper); display: flex; flex-direction: column; overflow: hidden; }

.sc-studio-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.sc-studio-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sc-studio-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-2); color: var(--ink-2); }
.sc-studio-id-text { display: grid; gap: 1px; min-width: 0; }
.sc-studio-id-text b { font-family: var(--font-disp); font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; }
.sc-studio-id-text span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.sc-studio-header-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.sc-studio-x { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-3); cursor: pointer; transition: background .15s, color .15s; }
.sc-studio-x:hover { background: var(--paper-2); color: var(--ink); }

.sc-studio-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
.sc-studio-config { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 30px; background: var(--card); border-inline-end: 1px solid var(--line); }
/* The panel is the whole column now, so its own card chrome would be a second
   frame inside a frame. */
.sc-studio-config .sc-studio { gap: 10px; }
/* Artwork shares the Studio's accordion language, but remains permanently
   expanded: uploads are operational controls, so hiding a currently selected
   card/stamp icon behind a second click makes its active state too easy to miss. */
.sc-studio-artwork { margin-top: 10px; }
.sc-studio-artwork .sc-acc-head { align-items: flex-start; cursor: default; }
.sc-studio-artwork .sc-acc-head:hover { background: transparent; }
.sc-studio-artwork .sc-acc-body { gap: 16px; }
/* Unlike the compact labels on collapsible Studio sections, artwork needs its
   full file guidance visible. Let this one description use its second line. */
.sc-studio-artwork .sc-acc-t .s { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }

/* The stage. Deliberately its own palette rather than the portal's: a card is
   judged against the customer's wallet, not against this page, and the two
   backdrops are the two the webview actually has. */
.sc-studio-stage {
  --sc-stage-bg: radial-gradient(130% 120% at 50% -10%, #4a4a52, #2f2f36 72%);
  --sc-stage-ink: rgba(255, 255, 255, .74);
  --sc-stage-line: rgba(255, 255, 255, .14);
  --sc-stage-chip: rgba(255, 255, 255, .08);
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--sc-stage-bg);
}
.sc-studio-stage[data-stage="light"] {
  --sc-stage-bg: linear-gradient(180deg, #f7f6f3, #e8e6e1);
  --sc-stage-ink: rgba(28, 26, 23, .68);
  --sc-stage-line: rgba(28, 26, 23, .12);
  --sc-stage-chip: rgba(28, 26, 23, .05);
}
.sc-stage-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--sc-stage-line); }
.sc-stage-tiers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sc-stage-tier { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px; border: 1px solid var(--sc-stage-line); border-radius: 999px; background: var(--sc-stage-chip); color: var(--sc-stage-ink); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sc-stage-tier:hover { border-color: var(--sc-stage-ink); }
.sc-stage-tier .d { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.sc-stage-tier.is-on { border-color: transparent; background: var(--ember); color: #fff; }
/* Two swatches, not a switch: spaced far enough apart that they do not read as
   one pill with a knob in it. */
.sc-stage-swatches { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.sc-stage-sw { width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--sc-stage-line); border-radius: 50%; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.sc-stage-sw:hover { border-color: var(--sc-stage-ink); }
.sc-stage-sw[data-sc-stage="dark"] { background: #2f2f36; }
.sc-stage-sw[data-sc-stage="light"] { background: #f2f0ec; }
.sc-stage-sw.is-on { border-color: transparent; box-shadow: 0 0 0 2px var(--ember); }
/* Replays the card's "when a stamp is earned" animation on the preview. Sits with
   the backdrop swatches because both answer the same question — what does this
   card look like in the moment a customer sees it? */
.sc-stage-play { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-inline-end: 4px; padding: 0; border: 1px solid var(--sc-stage-line); border-radius: 50%; background: var(--sc-stage-chip); color: var(--sc-stage-ink); cursor: pointer; transition: border-color .15s, color .15s, transform .12s; }
.sc-stage-play:hover { border-color: var(--sc-stage-ink); }
.sc-stage-play:active { transform: scale(.92); }

/* margin:auto rather than align-items:center — auto margins collapse to 0 once
   the card is taller than the stage, so a tall card scrolls from its top edge
   instead of having it clipped away. */
.sc-stage-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; padding: 32px 24px 40px; }
.sc-stage-card { width: min(420px, 100%); margin: auto;max-width: 314px }

@media (max-width: 1080px) {
  /* Stage first: on one column the card must stay in sight while the controls
     under it scroll, or every change means scrolling back up to see it. */
  .sc-studio-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  /* Capped so the card never takes half the screen and pushes every control
     below the fold; the stage scrolls inside the cap. */
  .sc-studio-stage { order: -1; max-height: 44dvh; }
  .sc-studio-config { border-inline-end: 0; border-top: 1px solid var(--line); }
  .sc-stage-scroll { padding: 20px 16px 24px; }
  .sc-stage-card { width: min(320px, 100%); }
}
@media (max-width: 640px) {
  .sc-studio-header { padding: 10px 14px; }
  .sc-studio-header-actions { gap: 8px; }
  .sc-studio-config { padding: 14px 14px 26px; }
  .sc-stage-card { width: min(280px, 100%); }
}
.rc-sc-modal {
  width: min(1120px, 96vw); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.rc-sc-modal .dhead {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.rc-sc-modal .dbody {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px 18px;
}
.rc-sc-modal .dbody > .formgrp,
.rc-sc-modal .dbody > .rc-loy-section { grid-column: 1; }
.rc-sc-modal .dfoot {
  padding: 14px 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px;
}
.rc-sc-modal .dfoot .left { margin-right: auto; display: flex; gap: 8px; }
.rc-sc-live-preview {
  grid-column: 2; grid-row: 1 / span 20;
  position: sticky; top: 0; align-self: start;
}
.rc-sc-live-preview > .label { margin-bottom: 10px; }
.sc-upload-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-bg, #fff);
}
.sc-upload-preview {
  width: 58px; height: 58px; border-radius: 16px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-3);
  font-size: 11px; font-weight: 900; text-align: center; overflow: hidden;
}
.sc-upload-preview.stamp { border-radius: 50%; font-size: 18px; }
.sc-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.sc-upload-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sc-icon-source-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sc-icon-source-wrap.is-disabled { opacity: .48; }
.sc-icon-source { width: fit-content; }
.sc-icon-source .seg { padding: 6px 9px; font-size: 11.5px; }
.sc-checkline {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-size: 12.5px; font-weight: 800; color: var(--ink-2); cursor: pointer;
}
.sc-checkline input { width: 17px; height: 17px; accent-color: var(--ember); }
.sc-checkline.is-disabled { opacity: .48; }
.sc-rule-toggle { min-height: 44px; margin-bottom: 8px; }
.sc-rule-toggle + .input { min-height: 44px; }
.sc-rule-toggle + .input:disabled { cursor: not-allowed; opacity: .55; }
.sc-terms-conditions { gap: 14px; }
.sc-terms-conditions textarea.textarea { min-height: 118px; }
.stampcard-preview .gly img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
/* Custom stamp icons render as-is: no circle background, ring or clipping. */
.stampcard-preview .st.full.has-icon,
.stampcard-preview .st.empty.has-icon,
.stampcard-preview .st.reward.has-icon {
  background: none; border: none; border-radius: 0; box-shadow: none;
}
.stampcard-preview .st.has-icon img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 0; display: block;
}
.stampcard-preview .st.empty.has-icon img { opacity: .45; }
/* "Invert to white" — flips dark line-art icons for dark card backgrounds. */
.stampcard-preview .st.empty.has-icon.inv img,
.stamp-tile .st-dots .sd.empty.has-icon.inv img { filter: invert(1); }

/* ---------- card media uploads (stamp-card form) ---------- */
.sc-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.sc-media-row { align-items: flex-start; }
.sc-media-title { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sc-media-title span { font-weight: 700; color: var(--ink-3); margin-left: 4px; }
.sc-upload-preview.stamp img { object-fit: contain; padding: 5px; }
.sc-upload-preview.stamp.empty-slot { border-style: dashed; }
/* Inverted empty-stamp thumbnail: dark backdrop so the white art stays visible. */
.sc-upload-preview.stamp.empty-slot.inv { background: #2A2118; border-color: #2A2118; }
.sc-upload-preview.stamp.empty-slot.inv img { filter: invert(1); }
.sc-upload-preview.stamp.reward-slot { border-color: var(--gold, #E0A43B); color: var(--gold, #E0A43B); background: rgba(224,164,59,.12); }
.sc-media-status.ok { color: var(--teal); }
.sc-media-status.err { color: var(--rose); }
.sc-media-status.uploading { color: var(--ink-2); }
.sc-media-status.uploading::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  vertical-align: -1px; animation: sc-media-spin .7s linear infinite;
}
@keyframes sc-media-spin { to { transform: rotate(360deg); } }
.stampcard-preview .title-stack { position: relative; flex: 1; min-width: 0; }
.stampcard-preview .title-stack .brand { max-width: none; }
.stampcard-preview .title-stack .nm { margin-top: 7px; max-width: 100%; }
.point-preview-card .point-counter { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 2px; }
.point-preview-card .point-counter b { font-size: 58px; }
.point-preview-card .point-counter span { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.point-preview-card .point-worth { margin-top: 8px; font-size: 12.5px; font-weight: 800; opacity: .78; }
.point-preview-card .point-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 12px; font-weight: 900; position: relative; }
.point-preview-card .point-progress { position: relative; height: 8px; border-radius: 999px; margin-top: 8px; background: rgba(255,255,255,.28); overflow: hidden; }
.point-preview-card .point-progress i { display: block; height: 100%; border-radius: inherit; background: rgba(255,255,255,.94); }
.point-preview-card .reward-callout svg { width: 16px; height: 16px; }

/* ---------- account management ---------- */
#acct-form .adm-pagehead { margin-bottom: 18px; }
#acct-form .adm-pagehead .sub {
  max-width: 760px;
  line-height: 1.45;
}
#acct-form .adm-pagehead .right { flex: none; }
#acct-save {
  min-height: 42px;
  padding-inline: 18px;
}
.acct-stack { --acct-gap: 18px; display: flex; flex-direction: column; gap: var(--acct-gap); }
.acct-stack .surface {
  --surf-pad: 20px;
  gap: 18px;
  box-shadow: var(--shadow-2);
}
.acct-stack .surface .head {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.acct-stack .surface .head h3 { letter-spacing: 0; }
.acct-stack .surface .head .sub {
  max-width: 64ch;
  line-height: 1.45;
}
.acct-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(330px, .92fr);
  gap: var(--acct-gap);
  align-items: stretch;
}
.acct-grid-top .surface { min-height: 100%; }
.acct-surface-identity {
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb),.09), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,252,.98));
  border-color: rgba(var(--primary-rgb),.22);
}
.acct-surface-identity .formgrp.tworow { gap: 12px; }
.acct-stack .formgrp .input,
.acct-stack .formgrp .textarea {
  min-height: 46px;
  border-radius: 13px;
}
.acct-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.54);
  overflow: hidden;
}
.acct-summary-card {
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.acct-summary-card + .acct-summary-card { border-left: 1px solid var(--line); }
.acct-summary-card strong {
  font-family: var(--font-disp);
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.acct-summary-card .sub { margin: 0; min-height: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.acct-logo-box { border-radius: 16px; }
.acct-grid .sc-upload-preview img { object-fit: contain; padding: 4px; }
.acct-stack .sc-upload-row {
  align-items: stretch;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card-bg, #fff), var(--primary-soft));
}
.acct-stack .sc-upload-preview {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: var(--card-bg, #fff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.acct-stack .sc-upload-main { justify-content: center; gap: 10px; }
.acct-stack .sc-media-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13.5px;
}
.acct-stack .sc-media-title span { margin-left: 0; }
.acct-stack .sc-upload-actions .btn { min-height: 36px; }
.acct-reach-intro {
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 800;
}
.acct-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.acct-social-item {
  display: grid;
  grid-template-columns: 44px minmax(118px, .66fr) minmax(210px, 1.34fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--line);
  border-radius: 15px;
  cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.acct-social-item:focus-within {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-soft);
  background: rgba(255,255,255,.96);
}
.acct-social-icon {
  width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink); background: var(--paper);
}
.acct-social-icon svg, .acct-social-icon img { width: 22px; height: 22px; }
.acct-social-icon img { object-fit: contain; }
.acct-social-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-social-copy strong { font-size: 13.5px; line-height: 1.15; overflow-wrap: anywhere; }
.acct-social-copy small { color: var(--ink-3); font-size: 11px; font-weight: 700; line-height: 1.35; }
.acct-social-item .input {
  grid-column: 3;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 9px 11px;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.acct-social-item .input::placeholder { color: var(--ink-3); opacity: 1; }
.acct-social-item .input:focus {
  border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft);
  outline: 0;
}
.acct-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.acct-contact-address { grid-column: 1 / -1; }
.acct-contact-grid .textarea { min-height: 98px; resize: vertical; }

/* Customer onboarding method picker (radio cards) */
.acct-onboarding-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acct-onb-card { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.acct-onb-card:hover { border-color: var(--primary); }
.acct-onb-card input { margin-top: 2px; accent-color: var(--primary); }
.acct-onb-card:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); box-shadow: 0 0 0 1px var(--primary) inset; }
.acct-onb-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.acct-onb-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 820px) { .acct-onboarding-grid { grid-template-columns: 1fr; } }
html.dark .acct-stack .surface { box-shadow: 0 18px 38px rgba(0,0,0,.16); }
html.dark .acct-surface-identity {
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb),.16), transparent 42%),
    linear-gradient(180deg, var(--card), var(--paper-2));
  border-color: rgba(var(--primary-rgb),.34);
}
html.dark .acct-summary {
  background: rgba(36,32,25,.7);
  border-color: var(--line);
}
html.dark .acct-summary-card + .acct-summary-card { border-left-color: var(--line); }
html.dark .acct-stack .sc-upload-row,
html.dark .acct-social-item,
html.dark .acct-social-item:focus-within {
  background: var(--paper-2);
  border-color: var(--line);
}
html.dark .acct-stack .sc-upload-preview,
html.dark .acct-social-icon,
html.dark .acct-social-item .input {
  background: var(--paper-3);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
html.dark .acct-social-item:focus-within {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.22);
}
html.dark .acct-social-item .input:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.18);
}
@media (max-width: 980px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-summary { grid-template-columns: 1fr; }
  .acct-summary-card + .acct-summary-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  html.dark .acct-summary-card + .acct-summary-card { border-top-color: var(--line); }
}
@media (max-width: 720px) {
  .acct-stack { --acct-gap: 14px; }
  .acct-stack .surface { --surf-pad: 16px; gap: 16px; }
  .acct-social-grid,
  .acct-contact-grid { grid-template-columns: 1fr; }
  .acct-social-item { grid-template-columns: 44px minmax(0, 1fr); }
  .acct-social-item .input { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  #acct-form .adm-pagehead .right,
  #acct-save { width: 100%; }
  .acct-stack .sc-upload-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .acct-stack .sc-upload-preview {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }
  .acct-stack .sc-upload-actions .btn { flex: 1 1 108px; justify-content: center; }
}

/* ---------- points setup preview rail ---------- */
.preview-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }

/* ---------- point tier conversion ---------- */
.conv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap, 14px); }
.conv-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.conv-card.off { opacity: .62; }
.conv-card .cc-head { position: relative; padding: 12px 14px; color: #fff; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.conv-card .cc-head .sheen { position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%); pointer-events: none; }
.conv-card .cc-dot { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; position: relative; }
.conv-card .cc-nm { position: relative; line-height: 1.1; }
.conv-card .cc-nm .en { font-family: var(--font-disp); font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.conv-card .cc-nm .ar { font-size: 11.5px; opacity: .8; font-weight: 700; direction: rtl; margin-top: 1px; }
.conv-card .cc-lv { position: relative; margin-left: auto; font-family: var(--font-disp); font-weight: 800; font-size: 13px; opacity: .85; background: rgba(0,0,0,.2); padding: 3px 8px; border-radius: 8px; }
.conv-card .cc-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.conv-card .cc-rate { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.conv-card .cc-fld .k { font-size: 9.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.conv-card .cc-input { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.conv-card .cc-input:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }
.conv-card .cc-input input { border: 0; outline: 0; width: 100%; min-width: 0; font-family: var(--font-text); font-weight: 800; font-size: 14px; color: var(--ink); background: transparent; }
.conv-card .cc-input .cur, .conv-card .cc-input .pts { font-size: 11px; color: var(--ink-3); font-weight: 800; flex: none; }
.conv-card .cc-eq { font-family: var(--font-disp); font-weight: 800; font-size: 18px; color: var(--ink-3); padding-bottom: 6px; }
.conv-card .cc-sum { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.conv-card .cc-sum .eqn { font-family: var(--font-disp); font-weight: 800; color: var(--ink); }
.conv-card .cc-sum .spark { margin-left: auto; color: var(--gold-deep); }
.conv-card .cc-sum .spark svg { width: 15px; height: 15px; }
.conv-card .cc-section { display: flex; flex-direction: column; gap: 8px; }
.conv-card .cc-section + .cc-section { padding-top: 11px; border-top: 1px dashed var(--line); }
.conv-card .cc-seclabel { display: flex; align-items: center; gap: 7px; font-family: var(--font-disp); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.conv-card .cc-seclabel .d { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); flex: none; }
.conv-card .cc-section.redeem .cc-seclabel .d { background: var(--ember); }

/* ---------- reward eligibility ---------- */
.elig-list { display: flex; flex-direction: column; gap: 9px; }
.elig-row {
  position: relative; display: grid; grid-template-columns: auto 1.3fr 1.6fr auto auto; gap: 14px; align-items: center;
  padding: 13px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
}
.elig-row.disabled { background: var(--paper); border-style: dashed; }
.elig-row.disabled .er-ic, .elig-row.disabled .er-nm, .elig-row.disabled .er-avail { filter: grayscale(.4); opacity: .55; }
.elig-row .er-ic { width: 46px; height: 46px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #F8F4EE, #F2ECE2 60%, #FBEFD7); font-size: 24px; border: 1px solid var(--line); overflow: hidden; }
.elig-row .er-ic img { width: 100%; height: 100%; object-fit: cover; }
.elig-row .er-nm { font-weight: 800; font-size: 14.5px; line-height: 1.15; }
.elig-row .er-type { font-size: 11.5px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.elig-row .er-rule { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.elig-row .er-rulelab { font-size: 9.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; }
.elig-row .er-avail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.elig-row .er-avail .select { padding: 6px 9px; font-size: 12px; border-radius: 9px; }
.elig-row .er-cost { text-align: right; }
.elig-row .er-cost .k { font-size: 9.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.elig-row .er-cost .v { font-family: var(--font-disp); font-weight: 800; font-size: 16px; letter-spacing: -.02em; margin-top: 1px; white-space: nowrap; }
.elig-row .er-cost input { width: 84px; text-align: right; }
.elig-row .er-end { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.elig-row .er-modes { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; }
.elig-row .er-modes button { border: 0; background: transparent; padding: 5px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; color: var(--ink-3); cursor: pointer; font-family: var(--font-text); white-space: nowrap; }
.elig-row .er-modes button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.elig-row .er-tiersel { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.elig-row .er-tiersel .tierbadge { cursor: pointer; }
.elig-row .er-tiersel .tierbadge.pick { opacity: .45; }
.elig-row .er-tiersel .tierbadge.pick.on { opacity: 1; box-shadow: 0 0 0 2px var(--ember-soft); border-color: var(--ember); }
.elig-eg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.elig-eg .eg { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.elig-eg .eg .et { font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.elig-eg .eg .ed { font-size: 12.5px; color: var(--ink-2); font-weight: 600; line-height: 1.45; margin-top: 7px; }
.elig-eg .eg .ed b { color: var(--ink); font-weight: 800; }

/* EN/AR language toggle */
.langtoggle { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.langtoggle .lt { padding: 7px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); cursor: pointer; border: 0; background: transparent; font-family: var(--font-text); }
.langtoggle .lt.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- dark mode parity ---------- */
html.dark .quickact,
html.dark .stamp-tile,
html.dark .conv-card,
html.dark .elig-row,
html.dark .giftpick,
html.dark .tiervis-opt,
html.dark .iconpick .ip,
html.dark .sc-upload-row,
html.dark .conv-card .cc-input,
html.dark .thumb-row,
html.dark .tierchip,
html.dark .tierbadge,
html.dark .langtoggle .lt.on,
html.dark .elig-row .er-modes button.on,
html.dark .gft-elig-mode button.on,
html.dark .gft-tier-picks .tierbadge.pick.on,
html.dark .gft-elig-editor .select { background: #221A14; }
html.dark .rc-loy-minipreview { background: #231813; }
html.dark .elig-row .er-ic { background: #2A2018; }
html.dark .gradgrid .gd.on { border-color: #F2ECE2; }
html.dark .ps-tier-costs { background: rgba(34,26,20,.68); }
html.dark .ps-tier-cost,
html.dark .ps-tier-cost .tc-input { background: #221A14; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .quickact-grid { grid-template-columns: repeat(2, 1fr); }
  .stampmgmt-grid, .conv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .loy-split { grid-template-columns: 1fr; }
  .preview-rail { position: static; }
  .rc-sc-modal .dbody { grid-template-columns: 1fr; }
  .rc-sc-live-preview { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 760px) {
  .stampmgmt-grid, .conv-grid, .elig-eg { grid-template-columns: 1fr; }
  .elig-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; }
  .elig-row .er-rule { grid-column: 1 / -1; }
  .elig-row .er-cost { text-align: left; }
  .elig-row .er-cost input { text-align: left; }
  .elig-row .er-end { grid-column: 1 / -1; justify-content: flex-start; }
  .loy-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .loy-hero .lh-badge { position: relative; }
  .loy-hero .lh-side { align-items: stretch; max-width: none; width: 100%; }
  .loy-hero .lh-actions { justify-content: flex-start; }
  .loy-hero .lh-actions .btn { flex: 1 1 160px; justify-content: center; }
}
@media (max-width: 620px) {
  .quickact-grid { grid-template-columns: 1fr; }
  .rc-sc-modal { width: 100%; max-height: calc(100vh - 20px); }
  .rc-sc-modal .dhead,
  .rc-sc-modal .dbody,
  .rc-sc-modal .dfoot { padding-left: 14px; padding-right: 14px; }
  .rc-sc-modal .dfoot { flex-wrap: wrap; }
  .rc-sc-modal .dfoot .left { width: 100%; margin-right: 0; }
  .sc-upload-row { align-items: flex-start; }
  .warn-tip { width: 200px; right: -60px; }
  .warn-tip::after { right: 70px; }
}
/* ---------- full-page stamp card editor ---------- */
.sc-form-page { display: flex; flex-direction: column; gap: var(--gap, 14px); flex: none; }
.sc-form-head { flex-shrink: 0; }
.sc-form-actions { flex-wrap: wrap; justify-content: flex-end; }
.sc-editor-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(360px, 4fr); gap: var(--gap, 14px); align-items: start; }
.sc-editor-main { display: flex; flex-direction: column; gap: var(--gap, 14px); min-width: 0; }
.sc-section-card { gap: 14px; }
.sc-section-card > summary.head {
  min-height: 44px; gap: 12px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.sc-section-card > summary.head::-webkit-details-marker { display: none; }
.sc-section-card > summary.head::after {
  content: ""; width: 9px; height: 9px; flex: none; margin: 0 4px 5px auto;
  border-right: 1.75px solid var(--ink-3); border-bottom: 1.75px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease;
}
.sc-section-card[open] > summary.head::after {
  margin-bottom: -5px; border-color: var(--primary); transform: rotate(225deg);
}
.sc-section-card > summary.head:focus-visible {
  outline: 3px solid var(--focus-ring, rgba(88,64,239,.18)); outline-offset: 4px; border-radius: 8px;
}
.sc-validation-rail { position: sticky; top: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap, 14px); }
.sc-validation-card { gap: 12px; }
.sc-rail-preview-card { gap: 12px; }
.sc-tier-config-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-tier-config-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-tier-config { border: 1.5px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
.sc-tier-config.on { border-color: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft); }
.sc-tier-config-head { width: 100%; border: 0; background: transparent; padding: 12px 14px; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; font-family: var(--font-text); color: var(--ink); }
.sc-tier-config-head .tv-dot { width: 32px; height: 32px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sc-tier-config-head b { display: block; font-size: 14px; line-height: 1.1; }
.sc-tier-config-head em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 2px; }
.sc-tier-config-head .tag { margin-left: auto; }
.sc-tier-config-body { border-top: 1px solid var(--line-2); padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sc-tier-color { width: 58px; height: 42px; padding: 4px; flex: none; cursor: pointer; }
.sc-coverage { display: flex; align-items: flex-start; gap: 10px; border-radius: 13px; padding: 11px 13px; font-size: 12.5px; font-weight: 800; line-height: 1.45; }
.sc-coverage .ic { width: 24px; height: 24px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.sc-coverage .ic svg { width: 14px; height: 14px; }
.sc-coverage.ok { background: var(--teal-soft); color: var(--teal); border: 1px solid #BFE5D7; }
.sc-coverage.ok .ic { background: var(--teal); color: #fff; }
.sc-coverage.warn { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid #F0DCAE; }
.sc-coverage.warn .ic { background: var(--gold); color: #fff; }
.sc-coverage.bad { background: var(--rose-soft); color: var(--rose); border: 1px solid #F0BFC8; }
.sc-coverage.bad .ic { background: var(--rose); color: #fff; }
.sc-req-warning { display: flex; align-items: flex-start; gap: 10px; border-radius: 13px; padding: 11px 13px; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; line-height: 1.45; background: var(--gold-soft); color: var(--gold-deep); border: 1px solid #F0DCAE; }
.sc-req-warning .ic { flex: none; }
.sc-validation-ok { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); font-weight: 800; font-size: 12.5px; }
.sc-validation-ok .ic { width: 24px; height: 24px; border-radius: 8px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.sc-validation-ok .ic svg { width: 14px; height: 14px; }
.sc-validation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-validation-list li { position: relative; padding: 10px 11px 10px 30px; border-radius: 12px; background: var(--rose-soft); color: #7A2535; border: 1px solid #F0BFC8; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.sc-validation-list li::before { content: ""; position: absolute; left: 12px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
html.dark .sc-tier-config { background: #221A14; }
html.dark .sc-validation-list li { color: #F2BDC7; }
html.dark .sc-validation-ok { background: rgba(31,138,109,.18); }
@media (max-width: 900px) {
  .sc-editor-grid { grid-template-columns: 1fr; }
  .sc-validation-rail { position: static; }
}
@media (max-width: 760px) {
  .sc-form-head .right { width: 100%; justify-content: flex-start; }
  .sc-tier-config-body { grid-template-columns: 1fr; }
  .formgrp.tworow { grid-template-columns: 1fr; }
  .giftpick.sc-gift-elig-row { flex-wrap: wrap; }
  .sc-gift-elig { width: 100%; min-width: 0; margin-left: 31px; }
}

/* ============================================================
   Profile page (My Profile + employee profile) — adapted from
   the claude-design admin-profile.css on top of admin.css vocab.
   ============================================================ */
.me-head {
  position: relative; background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; flex: none;
}
.me-head .cover {
  height: 96px; position: relative;
  background:
    radial-gradient(120% 180% at 12% -40%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(115deg, var(--primary), var(--accent-pink) 70%, var(--accent-yellow));
}
.me-head .cover::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 14px 14px;
}
.me-head .hbody { padding: 16px 22px 20px; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.me-head .pic {
  width: 96px; height: 96px; border-radius: 28px; flex: none; margin-top: -60px;
  background: linear-gradient(135deg, #5A3A85, #8E5FB0); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-weight: 800; font-size: 38px;
  border: 4px solid var(--card, #fff); box-shadow: 0 10px 24px rgba(90,58,133,.32);
  position: relative;
}
.me-head .pic .pm {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 24px; overflow: hidden;
}
.me-head .pic .pm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-cam {
  position: absolute; right: -6px; bottom: -6px; z-index: 2; width: 30px; height: 30px;
  border-radius: 10px; background: var(--ember); color: #fff;
  border: 2px solid var(--card, #fff); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,.12));
}
.pic-cam:hover { filter: brightness(1.06); }
.pic-cam svg { width: 15px; height: 15px; }
.me-head .htext { flex: 1; min-width: 220px; padding-top: 2px; }
.me-head .htext .nm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-disp); font-weight: 700; font-size: 26px;
  letter-spacing: -.02em; line-height: 1.05;
}
.me-head .youchip {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--card, #fff); padding: 3px 8px; border-radius: 999px;
}
.me-head .meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12.5px; color: var(--ink-2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.me-head .meta .mi { display: inline-flex; align-items: center; gap: 6px; }
.me-head .meta .mi svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.me-head .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.me-head .hacts { display: flex; gap: 8px; align-self: flex-start; padding-top: 2px; flex-wrap: wrap; }

/* ---- layout ---- */
.me-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--gap, 14px); align-items: start; flex: none; }
.me-grid.two { grid-template-columns: 1.2fr 1fr; }
.me-col { display: flex; flex-direction: column; gap: var(--gap, 14px); min-width: 0; }
.me-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.me-kpis .kpi-card .val.txt { font-size: 19px; margin-top: 8px; }

/* ---- info rows (key/value with optional action) ---- */
.inforow {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
}
.inforow:last-child { border-bottom: 0; padding-bottom: 0; }
.inforow:first-child { padding-top: 0; }
.inforow .ico {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.inforow .ico svg { width: 16px; height: 16px; }
.inforow .kv { flex: 1; min-width: 0; }
.inforow .kv .k { font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.inforow .kv .v { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }

/* ---- access / role banner / branch chips ---- */
.accessbox { display: flex; flex-direction: column; gap: 10px; }
.accessbox .grouplab {
  font-size: 11px; font-weight: 800; color: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}
.rolebanner {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: 14px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #C8455B, #E0A43B);
}
.rolebanner.violet { background: linear-gradient(120deg, #5A3A85, #8E5FB0); }
.rolebanner.sky { background: linear-gradient(120deg, #2C6E91, #4FA3C7); }
.rolebanner.teal { background: linear-gradient(120deg, #1F8A6D, #3FB394); }
.rolebanner.ink { background: linear-gradient(120deg, #3A3027, #5A4F46); }
.rolebanner .ri {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
}
.rolebanner .ri svg { width: 20px; height: 20px; }
.rolebanner .rt { min-width: 0; }
.rolebanner .rt .rl { font-family: var(--font-disp); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.rolebanner .rt .rs { font-size: 11.5px; font-weight: 700; opacity: .92; margin-top: 1px; }
.branchgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.branchchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  font-size: 12.5px; font-weight: 800; color: var(--ink-2);
}
.branchchip svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }

/* ---- session rows ---- */
.sesslist { display: flex; flex-direction: column; gap: 8px; }
.sess {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 13px;
}
.sess.current { background: var(--teal-soft); border-color: #BFE3D6; }
.sess .dv {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--card, #fff); border: 1px solid var(--line); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.sess.current .dv { border-color: #BFE3D6; color: var(--teal); }
.sess .dv svg { width: 18px; height: 18px; }
.sess .si { flex: 1; min-width: 0; }
.sess .si .sn { font-size: 13.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess .si .sm { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.sess .signout {
  font-size: 12px; font-weight: 800; color: var(--rose); cursor: pointer;
  padding: 5px 9px; border-radius: 8px; border: 1px solid #F0BFC8; background: var(--card, #fff); flex: none;
}
.sess .signout:hover { background: var(--rose-soft, #FAE4E8); }
.sess .badgenow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal); background: var(--card, #fff); border: 1px solid #BFE3D6;
  padding: 3px 8px; border-radius: 999px; flex: none;
}

/* ---- avatar edit row in the modal ---- */
.pf-avatar-row { display: flex; align-items: center; gap: 14px; }
.pf-avatar-row .pic.sm {
  width: 64px; height: 64px; border-radius: 20px; flex: none; position: relative;
  background: linear-gradient(135deg, #5A3A85, #8E5FB0); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-weight: 800; font-size: 26px; overflow: hidden;
}
.pf-avatar-row .pic.sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar-row .btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- small shared helpers ---- */
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 9px; }
.btn.center { justify-content: center; }
.av .rc-avimg { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.usermenu .av, .tbl .who .av { overflow: hidden; }
.tbl .who a.nm { color: inherit; text-decoration: none; }
.tbl .who a.nm:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- dark mode parity ---- */
html.dark .inforow .ico,
html.dark .branchchip,
html.dark .sess { background: var(--paper-2); border-color: var(--line); }
html.dark .sess .dv,
html.dark .sess .signout,
html.dark .sess .badgenow { background: var(--card); border-color: var(--line); }
html.dark .sess.current { background: rgba(31,138,109,.16); border-color: #2E5A4C; }
html.dark .sess.current .dv,
html.dark .sess.current .badgenow { border-color: #2E5A4C; }
html.dark .sess .signout { border-color: #5A2A2E; }
html.dark .sess .signout:hover { background: rgba(200,69,91,.16); }

/* ---- responsive ---- */
@media (max-width: 1280px) {
  .me-grid { grid-template-columns: 1fr 1fr; }
  .me-grid > #pf-col-mid { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1100px) {
  .me-grid, .me-grid.two { grid-template-columns: 1fr; }
  .me-grid > #pf-col-mid { grid-column: auto; grid-row: auto; }
}
@media (max-width: 700px) {
  .me-head .hbody { padding: 14px 16px 16px; gap: 12px; }
  .me-head .pic { width: 76px; height: 76px; border-radius: 22px; font-size: 30px; margin-top: -46px; }
  .me-head .pic .pm { border-radius: 18px; }
  .me-head .htext .nm { font-size: 22px; }
  .me-head .hacts { width: 100%; padding-top: 4px; }
}
@media (max-width: 560px) {
  .me-kpis { grid-template-columns: 1fr 1fr; }
  .me-head .meta { gap: 8px; }
  .me-head .meta .dot { display: none; }
  .me-head .meta .mi { width: 100%; }
}

/* hidden-attribute support for profile components that set their own display */
.me-col[hidden],
.me-head .hacts .btn[hidden],
.pic-cam[hidden],
.btn.sm[hidden],
#pf-signout-others[hidden],
#pf-remove-avatar[hidden],
#pf-youchip[hidden],
#pf-status-tag[hidden],
#pf-edit-modal[hidden],
#pf-pwd-modal[hidden],
#pf-adm-edit-modal[hidden],
#pf-adm-pwd-modal[hidden],
#pf-adm-remove-modal[hidden] { display: none !important; }

/* ============================================================
   Branch QR — per-branch QR surfaces
   ============================================================ */
.rc-qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-content: start;
}
.rc-qr-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.rc-qr-card .rc-qr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.rc-qr-card .rc-qr-name {
  font-family: var(--font-disp, sans-serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink, #211A15);
  line-height: 1.25;
}
.rc-qr-card .rc-qr-loc {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3, #938678);
}
.rc-qr-imgwrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line, #E7DFD4);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 4px;
}
.rc-qr-noimg {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3, #938678);
  padding: 14px;
  line-height: 1.5;
}
.rc-qr-noimg svg { width: 26px; height: 26px; opacity: .5; margin-bottom: 6px; }
.rc-qr-url {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper, #F8F4EE);
  border: 1px solid var(--line-2, #F0EAE1);
  border-radius: 9px;
  padding: 7px 9px;
}
.rc-qr-url code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2, #5A4F46);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-qr-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line, #E7DFD4);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-2, #5A4F46);
  cursor: pointer;
}
.rc-qr-copy:hover { background: var(--paper-2, #F2ECE2); color: var(--ink, #211A15); }
.rc-qr-copy svg { width: 14px; height: 14px; }
.rc-qr-actions { display: flex; gap: 8px; }
.rc-qr-actions .btn { flex: 1; justify-content: center; padding: 7px 8px; font-size: 12px; }
.rc-qr-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* .scrim sets display:flex, which overrides the bare [hidden] attribute — hide explicitly. */
#qr-modal[hidden] { display: none !important; }
.rc-qr-modal { width: min(460px, 94vw); }
.rc-qr-modal .rc-qr-imgwrap { max-width: 320px; margin: 0 auto; }
.rc-qr-modal .rc-qr-url { margin-top: 14px; }

html.dark .rc-qr-imgwrap,
html.dark .rc-qr-copy { background: #fff; }
html.dark .rc-qr-url { background: var(--paper-2); border-color: var(--line); }

@media (max-width: 560px) {
  .rc-qr-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ============================================================
   GROUPED SIDEBAR NAV — responsive + dark overrides
   ============================================================ */

/* On mobile the off-canvas sidebar is already full-height.
   Make groups tap-friendly with comfortable touch targets. */
@media (max-width: 900px) {
  .sb-group-toggle { padding: 11px 12px; min-height: 48px; }
  /* children already get margin from container; just ensure tappable height */
  .sb-group-items .sb-item { min-height: 44px; }
}

/* Density menu: ensure it never clips outside the topbar */
.density-wrap { flex: none; }

/* Sidebar group items use the standard sb-nav gap */
.sb-group + .sb-group { margin-top: 2px; }

/* Dark mode: sidebar group styling */
html.dark .sb-group-toggle:hover { background: var(--paper-3); }
html.dark .sb-group.has-active > .sb-group-toggle { color: var(--ember); }
html.dark .sb-group-subtitle { color: var(--ink-3); }

/* -- stickers (Card Studio) -- */
.sc-sticker-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-sticker-chip { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 11px; background: var(--card); font-size: 19px; line-height: 1; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sc-sticker-chip:hover { border-color: var(--ink-4); }
.sc-sticker-chip.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 20%, transparent); }
.sc-sticker-chip.is-add { color: var(--ink-3); font-size: 22px; border-style: dashed; }
.sc-sticker-edit { display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper-2); }
.sc-sticker-edit .hint { margin: 0; }
.sc-emoji-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-emoji { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: 17px; line-height: 1; cursor: pointer; }
.sc-emoji:hover { border-color: var(--ink-4); background: var(--paper-2); }
.sc-emoji-upload { color: var(--ink-3); font-weight: 800; border-style: dashed; }

/* Editor-only sticker handles.
   The stamp grid deliberately sits above both sticker layers on the real card, so
   a sticker under the grid can never be grabbed by pointing at it. These handles
   are injected into the preview by card-studio.js and sit above everything —
   editor chrome, never part of the card the customer sees. */
.sc-sticker-handle {
  position: absolute; z-index: 7;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: rgba(0, 0, 0, .22);
  cursor: grab;
  touch-action: none;
}
.sc-sticker-handle:hover { background: rgba(0, 0, 0, .34); }
.sc-sticker-handle.is-on { border-style: solid; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.sc-sticker-handle:active { cursor: grabbing; }