/* ==========================================================================
   SNESH TECHNO — Client Portal styles (auth, dashboard, card builder, card view)
   Builds on style.css design tokens.
   ========================================================================== */
.portal-main { min-height: calc(100vh - var(--nav-h) - 90px); padding: calc(var(--nav-h) + 2.4rem) 0 3rem; }
/* The public card page renders without the navbar, so it drops the offset. */
.pubcard-main { padding-top: 2.4rem; }
.portal-user { color: var(--text-soft); font-size: .92rem; font-weight: 500; }
.portal-foot { border-top: 1px solid var(--glass-brd); padding: 1.6rem 0; }
.portal-foot .container-wide { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.portal-foot a:hover { color: var(--sky); }

/* ---- Auth (login / register / payment) ---- */
.auth-wrap { width: min(100% - 2.6rem, 1080px); margin-inline: auto; }
.auth-narrow { max-width: 480px; }
.auth-card { padding: 2.6rem; }
.auth-head { text-align: center; margin-bottom: 1.8rem; }
.auth-head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.auth-head p { color: var(--muted); margin-top: .5rem; }
.auth-alt { text-align: center; color: var(--muted); margin-top: 1.4rem; font-size: .95rem; }
.auth-alt a { color: var(--sky); font-weight: 600; }
.form-error { background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.3); color: #ff9a9a;
  padding: .85rem 1.1rem; border-radius: var(--r-sm); margin-bottom: 1.2rem; font-size: .92rem; }
.form-ok { background: rgba(19,217,163,.12); border: 1px solid rgba(19,217,163,.3); color: var(--emerald-2);
  padding: .85rem 1.1rem; border-radius: var(--r-sm); margin-bottom: 1.2rem; font-size: .92rem; }

/* ---- Split login / auth layout ---- */
.auth-split { width: min(100% - 2.6rem, 1040px); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }

/* Left — brand showcase */
.auth-showcase { position: relative; padding: 3rem 3rem 2.6rem; overflow: hidden;
  background: linear-gradient(155deg, rgba(46,124,246,.20), rgba(11,46,122,.30) 55%, rgba(19,217,163,.12));
  border: 1px solid var(--glass-brd); border-right: 0;
  display: flex; flex-direction: column; gap: 1.6rem; }
.auth-showcase::before { content: ""; position: absolute; width: 340px; height: 340px; top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(76,155,255,.5), transparent 68%); filter: blur(20px); pointer-events: none; }
.auth-showcase::after { content: ""; position: absolute; width: 300px; height: 300px; bottom: -130px; left: -90px;
  background: radial-gradient(circle, rgba(19,217,163,.34), transparent 68%); filter: blur(20px); pointer-events: none; }
.auth-showcase > * { position: relative; z-index: 1; }
.auth-brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.auth-brand svg { width: 40px; height: 40px; }
.auth-brand span b { color: #fff; }
.auth-brand span i { color: var(--sky); font-style: normal; }
.auth-showcase h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.15; margin-top: auto; }
.auth-showcase .lede { color: var(--text-soft); font-size: 1rem; max-width: 34ch; }
.auth-feats { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-top: .4rem; }
.auth-feats li { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--text-soft); }
.auth-feats .fic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-content: center;
  background: linear-gradient(150deg, rgba(46,124,246,.28), rgba(19,217,163,.16));
  border: 1px solid var(--glass-brd-hi); color: var(--emerald-2); }
.auth-feats .fic svg { width: 15px; height: 15px; }
.auth-trust { margin-top: auto; display: flex; align-items: center; gap: .7rem; padding-top: 1.2rem;
  border-top: 1px solid var(--glass-brd); color: var(--muted); font-size: .85rem; }
.auth-trust b { color: var(--text); font-family: var(--font-display); }

/* Right — form panel */
.auth-panel { padding: 3rem 2.8rem; background: linear-gradient(180deg, rgba(12,18,32,.86), rgba(6,10,20,.9));
  border: 1px solid var(--glass-brd); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; justify-content: center; }
.auth-panel .auth-head { text-align: left; margin-bottom: 1.6rem; }
.auth-panel .auth-head h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); }

/* Input with leading icon + trailing action */
.field .input-wrap { position: relative; display: flex; align-items: center; }
.field .input-wrap .lead { position: absolute; left: 1rem; color: var(--muted); pointer-events: none; display: grid; place-content: center; }
.field .input-wrap .lead svg { width: 17px; height: 17px; }
.field .input-wrap input { width: 100%; padding-left: 2.7rem; }
.field .input-wrap:has(.pw-toggle) input { padding-right: 3rem; }
.field .input-wrap input:focus ~ .lead { color: var(--sky); }
.pw-toggle { position: absolute; right: .6rem; background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: .4rem; border-radius: 8px; display: grid; place-content: center; transition: color .2s, background .2s; }
.pw-toggle:hover { color: var(--sky); background: rgba(120,170,255,.1); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.is-on .eye { display: none; }
.pw-toggle.is-on .eye-off { display: block; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.3rem 0 1.3rem; }
.auth-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--text-soft); font-size: .9rem; user-select: none; }
.auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check .box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--glass-brd-hi);
  display: grid; place-content: center; color: transparent; background: var(--glass); transition: .2s; }
.auth-check .box svg { width: 12px; height: 12px; }
.auth-check input:checked + .box { background: var(--grad-brand); border-color: transparent; color: #04140f; }
.auth-forgot { font-size: .9rem; color: var(--sky); font-weight: 600; }
.auth-forgot:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .auth-split { grid-template-columns: 1fr; width: min(100% - 2rem, 460px); }
  .auth-showcase { display: none; }
  .auth-panel { padding: 2.4rem 1.7rem; border-radius: var(--r-xl); }
}

/* ---- Payment: UPI QR + bank transfer + card (3-up grid) ---- */
.pay-wrap { width: min(100% - 2.6rem, 1160px); margin-inline: auto; }
.pay-top { text-align: center; margin-bottom: 1.9rem; }
.pay-top h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.pay-top > p { color: var(--muted); margin-top: .5rem; }
.pay-plan-bar { display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.2rem; padding: .6rem 1.3rem; border: 1px solid var(--glass-brd); border-radius: var(--r-pill);
  background: var(--glass); font-size: .92rem; }
.pay-plan-bar b { font-family: var(--font-display); font-weight: 700; }
.pay-plan-bar .sep { color: var(--faint); }
.pay-plan-bar .dim { color: var(--muted); }
.pay-plan-bar .amt { font-family: var(--font-display); font-weight: 800; color: var(--emerald-2); margin-left: .3rem; }
.pay-plan-bar .amt small { color: var(--muted); font-weight: 500; font-size: .78rem; }

.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; align-items: stretch; }
.pay-grid-1 { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
.pay-col { padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.pay-col-h { display: flex; align-items: center; gap: .7rem; }
.pay-col-h h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; display: flex; align-items: center; gap: .5rem; }
.pay-col-h .tag { font-family: var(--font-body); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--emerald-2); background: rgba(19,217,163,.14); border: 1px solid rgba(19,217,163,.3); padding: .12rem .45rem; border-radius: var(--r-pill); }
.pc-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-content: center;
  background: linear-gradient(150deg, rgba(46,124,246,.24), rgba(19,217,163,.14)); border: 1px solid var(--glass-brd-hi); color: var(--sky); }
.pc-ico svg { width: 20px; height: 20px; }
.pay-col-sub { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.pay-col-sub b { color: var(--text-soft); }
.pay-demo-note { background: rgba(46,124,246,.1); border-color: var(--glass-brd-hi); color: var(--sky);
  font-size: .82rem; line-height: 1.5; margin: 0; }
.pay-col form { margin-top: auto; }
.pay-done { margin-top: auto; padding-top: .3rem; }

.pay-qr { width: 172px; height: 172px; margin: .2rem auto; border-radius: 14px; background: #fff; padding: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(120,170,255,.25); display: grid; place-content: center; }
.pay-qr svg { display: block; width: 100%; height: 100%; }

.pay-bank { display: flex; flex-direction: column; gap: .6rem; }

@media (max-width: 900px) {
  .pay-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pay-col form { margin-top: 0; }
}

/* ---- Premium centered Razorpay checkout card ---- */
.pay-wrap-solo { display: flex; flex-direction: column; justify-content: center; min-height: min(78vh, 640px); }
.checkout { width: min(100% - 1.6rem, 460px); margin: 0 auto; }
.checkout-card { padding: 2rem 1.9rem; }
.co-head { text-align: center; padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--glass-brd); }
.co-badge { display: inline-block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--emerald-2); background: rgba(19,217,163,.12); border: 1px solid rgba(19,217,163,.28); padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem; }
.co-plan { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.co-sub { color: var(--muted); font-size: .88rem; margin-top: .4rem; }
.co-feats { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .65rem; }
.co-feats li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; color: var(--text-soft); }
.co-feats li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-content: center;
  font-style: normal; font-size: .72rem; font-weight: 800; color: #04140f; background: linear-gradient(135deg, var(--emerald-2), #13d9a3); }
.co-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem;
  padding-bottom: 1.3rem; border-bottom: 1px solid var(--glass-brd); }
.co-total-l { display: flex; flex-direction: column; gap: .15rem; }
.co-total-l span { color: var(--text); font-weight: 600; font-size: .98rem; }
.co-total-l small { color: var(--muted); font-size: .72rem; }
.co-total b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; white-space: nowrap;
  background: linear-gradient(120deg, #fff 0%, var(--sky) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-total b small { font-size: .82rem; font-weight: 500; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.co-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 1.2rem; }
.co-methods span { font-size: .68rem; font-weight: 600; color: var(--muted); padding: .3rem .6rem;
  border: 1px solid var(--glass-brd); border-radius: 8px; background: var(--glass); }
.co-secure { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; color: var(--muted); font-size: .76rem; }
.co-secure svg { width: 15px; height: 15px; color: var(--emerald-2); }
@media (max-width: 520px) {
  .checkout-card { padding: 1.5rem 1.3rem; }
  .co-feats li { font-size: .88rem; }
}
.pay-copy { position: relative; display: block; padding: .6rem .9rem;
  border: 1px solid var(--glass-brd); border-radius: var(--r-sm); background: var(--glass); }
.pay-copy .pc-lbl { display: block; color: var(--muted); font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .15rem; }
.pay-copy .pc-val { display: block; padding-right: 2rem; font-family: var(--font-mono); font-weight: 600; font-size: .96rem;
  color: var(--text); word-break: break-all; letter-spacing: .01em; }
.pay-copy .pc-btn { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--muted);
  padding: .35rem; border-radius: 7px; display: grid; place-content: center; transition: color .2s, background .2s; }
.pay-copy .pc-btn:hover { color: var(--sky); background: rgba(120,170,255,.12); }
.pay-copy .pc-btn svg { width: 16px; height: 16px; }
.pay-copy.copied { border-color: rgba(19,217,163,.5); }
.pay-copy.copied::after { content: "Copied ✓"; position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  background: var(--grad-brand); color: #04140f; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--r-pill); }
.pay-copy.copied .pc-btn { opacity: 0; }

.pay-sep { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0; color: var(--faint);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; }
.pay-sep::before, .pay-sep::after { content: ""; flex: 1; height: 1px; background: var(--glass-brd); }
.pay-note { color: var(--muted); font-size: .84rem; line-height: 1.5; margin-top: 1rem; text-align: center; }

@media (max-width: 520px) {
  .pay-qr-wrap { justify-content: center; text-align: center; }
  .pay-qr-hint { flex-basis: 100%; }
  .pay-copy { flex-wrap: wrap; }
  .pay-copy .pc-lbl { min-width: 0; flex-basis: 100%; }
}

/* Plan picker (register) */
.plan-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: .3rem 0 .6rem; }
.plan-opt { position: relative; cursor: pointer; }
.plan-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 2; }
.plan-opt .po-box { position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--glass-brd); border-radius: var(--r-md); padding: 1.2rem; background: var(--glass);
  transition: .25s; height: 100%; }
.plan-opt:hover .po-box { border-color: var(--glass-brd-hi); }
.plan-opt input:checked + .po-box { border-color: var(--royal); background: rgba(46,124,246,.12); box-shadow: var(--glow-blue); }
.po-box .po-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.po-box .po-price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin: .3rem 0; }
.po-box .po-price sub { font-size: .8rem; font-weight: 500; color: var(--muted); }
.po-box .po-lim { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.po-box .po-lim b { color: var(--sky); }
.plan-opt .po-check { position: absolute; top: .8rem; right: .8rem; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--glass-brd-hi); display: grid; place-content: center; color: transparent; }
.plan-opt input:checked ~ .po-check, .plan-opt input:checked + .po-box .po-check { }
.plan-opt input:checked + .po-box .po-check { background: var(--grad-brand); color: #04140f; border-color: transparent; }
.po-check svg { width: 13px; height: 13px; }

/* ---- Dashboard ---- */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dash-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.dash-head p { color: var(--muted); margin-top: .4rem; }
.usage { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.usage .u { padding: 1.4rem 1.6rem; }
.usage .u .k { color: var(--muted); font-size: .85rem; }
.usage .u .v { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; margin-top: .3rem; }
.usage .u .v small { font-size: .95rem; font-weight: 500; color: var(--muted); }
.usage .bar { height: 6px; border-radius: 6px; background: rgba(120,160,230,.16); margin-top: .8rem; overflow: hidden; }
.usage .bar span { display: block; height: 100%; background: var(--grad-brand); border-radius: 6px; }
.plan-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(19,217,163,.12); border: 1px solid rgba(19,217,163,.28); color: var(--emerald-2); font-weight: 600; font-size: .9rem; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 1.4rem; }
.mini-card { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.mini-top { display: flex; align-items: center; gap: 1rem; }
.mini-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-content: center;
  font-family: var(--font-display); font-weight: 800; color: #04140f; font-size: 1.15rem; flex: 0 0 auto; }
.mini-card h3 { font-size: 1.1rem; } .mini-card .role { color: var(--muted); font-size: .85rem; }
.mini-link { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; color: var(--sky);
  background: var(--glass); border: 1px solid var(--glass-brd); padding: .5rem .8rem; border-radius: var(--r-sm); word-break: break-all; }
.mini-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.mini-meta { display: flex; gap: 1rem; color: var(--muted); font-size: .82rem; }
.add-card { display: grid; place-content: center; text-align: center; gap: .8rem; min-height: 220px;
  border: 1.5px dashed var(--glass-brd-hi); border-radius: var(--r-lg); color: var(--sky); transition: .25s; }
.add-card:hover { background: rgba(46,124,246,.08); border-color: var(--royal); }
.add-card.disabled { opacity: .5; pointer-events: none; border-style: solid; }
.add-card .plus { width: 54px; height: 54px; border-radius: 50%; display: grid; place-content: center; margin: 0 auto;
  background: rgba(46,124,246,.14); font-size: 1.6rem; }

/* ==========================================================================
   CARD BUILDER — stepper layout

   The builder used to be one tall two-column form: on a phone that meant four
   or five screens of scrolling before the save button appeared. It is now a
   stepper — a tab strip, ONE visible panel, and a sticky action bar — so no
   step is taller than a screen and Save is always reachable.

   Every panel lives inside the same <form> and is hidden with display:none,
   which still submits its fields. One submit saves the whole card.
   ========================================================================== */
.builder-wrap { max-width: 900px; }
.builder-head { margin-bottom: 1rem; }
.builder-head h1 { font-size: 1.7rem; }

/* Catches Enter-to-submit so a destructive button further down the form can't
   become the implicit default. Off-screen rather than display:none — a hidden
   button is not a valid default submit. */
.sr-submit { position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Step tabs ---- */
.bsteps { display: flex; gap: .4rem; margin-bottom: 1rem; overflow-x: auto;
  scrollbar-width: none; padding-bottom: .2rem; }
.bsteps::-webkit-scrollbar { display: none; }
.bstep-tab { flex: 1 1 0; min-width: 84px; display: flex; align-items: center; justify-content: center;
  gap: .45rem; padding: .62rem .7rem; border-radius: var(--r-sm); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-brd); color: var(--muted);
  font-family: inherit; font-size: .84rem; font-weight: 600; white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s; }
.bstep-tab:hover { color: var(--text-soft); border-color: var(--glass-brd-hi); }
.bstep-tab.active { color: #fff; border-color: var(--royal); background: rgba(46,124,246,.12); box-shadow: var(--glow-blue); }
.bstep-tab.done { color: var(--sky); }
.bstep-tab .bs-ic { font-size: .95rem; line-height: 1; }

/* ---- Panels ---- */
.builder-panel { padding: 1.6rem; }
.bstep { display: none; }
.bstep.active { display: block; animation: bstepIn .22s var(--ease); }
@keyframes bstepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bstep h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .bstep.active { animation: none; } }

/* ---- Sticky action bar ---- */
.bbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  background: rgba(9,13,22,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -8px 30px -18px #000; }
.bbar .bbar-pos { flex: 1; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.bbar .btn:disabled { opacity: .35; pointer-events: none; }
.bbar .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .bbar { gap: .4rem; padding: .7rem; }
  .bbar-cancel, .bbar .bbar-pos { display: none; }
  .bbar .btn { flex: 1; justify-content: center; padding-inline: .6rem; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.link-head { display: grid; grid-template-columns: minmax(160px,1fr) 1.5fr 44px; gap: .6rem;
  padding: 0 .7rem; margin-bottom: .4rem; color: var(--muted); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; }
.link-row { display: grid; grid-template-columns: minmax(160px,1fr) 1.5fr 44px; gap: .6rem; margin-bottom: .7rem;
  align-items: start; padding: .7rem; border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  background: rgba(120,160,230,.045); transition: border-color .25s, background .25s; }
.link-row:hover { border-color: var(--glass-brd-hi); background: rgba(120,160,230,.07); }
.link-type { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.link-row select, .link-row input { width: 100%; padding: .8rem .9rem; border-radius: var(--r-sm); color: #fff;
  font-size: .95rem; background: rgba(6,10,20,.6); border: 1px solid var(--glass-brd);
  transition: border-color .3s, box-shadow .3s; }
.link-row select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237FBAFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right .85rem center; }
.link-row select:focus, .link-row input:focus { outline: none; border-color: var(--glass-brd-hi); box-shadow: var(--glow-blue); }
.link-row select option, .link-row optgroup { background: #0C1220; color: #fff; }
.link-row optgroup { font-weight: 700; color: var(--sky); }
.link-row .rm { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--glass-brd); color: #ff9a9a;
  background: rgba(255,80,80,.1); display: grid; place-content: center; cursor: pointer; transition: background .2s, border-color .2s; }
.link-row .rm:hover { background: rgba(255,80,80,.2); border-color: rgba(255,80,80,.4); }
.link-hint { color: var(--muted); font-size: .82rem; margin: .3rem 0 1rem; }
.add-link { font-size: .92rem; color: var(--sky); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border: 1px dashed var(--glass-brd-hi); border-radius: var(--r-sm); margin-top: .2rem; transition: background .2s; }
.add-link:hover { background: rgba(120,170,255,.08); }
.add-link.disabled { color: var(--faint); border-color: var(--glass-brd); cursor: not-allowed; background: none; }

/* Select2-style searchable dropdown */
.builder-panel { overflow: visible; }        /* let dropdown panels escape the card */
.builder-panel::after { display: none; }     /* (its hover glow relied on overflow:hidden) */
.ss-native { display: none !important; }
.ss { position: relative; }
.ss-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem .9rem; border-radius: var(--r-sm); background: rgba(6,10,20,.6); border: 1px solid var(--glass-brd);
  color: #fff; font-size: .95rem; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .3s, box-shadow .3s; }
.ss.open .ss-trigger, .ss-trigger:focus { outline: none; border-color: var(--glass-brd-hi); box-shadow: var(--glow-blue); }
.ss-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-cur.ss-ph { color: var(--muted); }
.ss-chev { width: 16px; height: 16px; color: var(--sky); flex: 0 0 auto; transition: transform .25s; }
.ss.open .ss-chev { transform: rotate(180deg); }
.ss-panel { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0;
  background: #0C1220; border: 1px solid var(--glass-brd-hi); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); overflow: hidden; }
.ss-search { padding: .55rem; border-bottom: 1px solid var(--glass-brd); }
.ss-search input { width: 100%; padding: .55rem .7rem; border-radius: var(--r-sm); background: rgba(6,10,20,.7);
  border: 1px solid var(--glass-brd); color: #fff; font-size: .9rem; }
.ss-search input:focus { outline: none; border-color: var(--glass-brd-hi); }
.ss-list { max-height: 244px; overflow-y: auto; padding: .3rem; }
.ss-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--sky);
  font-weight: 700; padding: .55rem .6rem .25rem; }
.ss-opt { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; font-size: .92rem; cursor: pointer; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-opt .ss-ico { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-content: center; }
.ss-opt .ss-ico svg { width: 18px; height: 18px; }
.ss-opt:hover { background: rgba(120,170,255,.12); color: #fff; }
.ss-custom { border-top: 1px solid var(--glass-brd); margin-top: .25rem; color: var(--sky); }
.ss-cur { display: flex; align-items: center; gap: .5rem; }
.ss-cur-icon { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-content: center; }
.ss-cur-icon svg { width: 18px; height: 18px; }
.ss-empty { padding: .8rem; text-align: center; color: var(--muted); font-size: .85rem; }

/* ---- Template picker (card builder) ---- */
.tpl-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.tpl-opt { position: relative; cursor: pointer; }
.tpl-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tpl-opt .tpl-box { display: block; border: 1px solid var(--glass-brd); border-radius: var(--r-md); padding: .7rem;
  background: var(--glass); transition: .2s; }
.tpl-opt:hover .tpl-box { border-color: var(--glass-brd-hi); }
.tpl-opt input:checked + .tpl-box { border-color: var(--royal); box-shadow: var(--glow-blue); }
.tpl-opt.locked { cursor: not-allowed; }
.tpl-opt.locked .tpl-box { opacity: .5; }
.tpl-name { display: flex; align-items: center; gap: .3rem; font-family: var(--font-display); font-weight: 600; font-size: .84rem; }
.tpl-name .lock { width: 12px; height: 12px; color: var(--muted); }

/* ==========================================================================
   TEMPLATE THUMBNAILS — a miniature of the real card

   These live HERE, not in templates.css: the builder page loads style.css +
   portal.css only, so per-slug thumb rules kept in templates.css never
   applied. Only tpl-centered / tpl-left / tpl-linksfirst had sizes, which is
   why every template except Aurora, Emerald and Violet showed an empty box.

   Structure mirrors the card: a coloured header band, the avatar on the seam,
   and a row of action tiles. Each template then moves those three pieces the
   way its layout actually moves them (avatar right on Corporate, full-bleed
   header on Gradient, arch on Botanic, and so on), so the picker previews the
   design instead of just its colour.

   --thumb-grad is the template's own gradient, set inline from the DB row.
   Deliberately the same 48px height as before — this is a reference, not a
   feature, and 25 taller tiles would put the Design step back into scrolling.
   ========================================================================== */
.tpl-thumb {
  --tt-bg: #12151C;                       /* card surface */
  --tt-bar: rgba(255,255,255,.24);        /* action tiles */
  --tt-head: var(--thumb-grad, linear-gradient(135deg,#4C9BFF,#0B2E7A));
  display: block; position: relative; overflow: hidden;
  height: 48px; border-radius: 8px; margin-bottom: .35rem;
  background: var(--tt-bg);
}
.tt-head { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: var(--tt-head); }
.tt-av {
  position: absolute; left: 50%; top: 46%; z-index: 2;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%,-50%);
  background: #fff; box-shadow: 0 0 0 1.5px var(--tt-bg);
}
.tt-body { position: absolute; left: 5px; right: 5px; bottom: 4px; display: flex; gap: 2px; }
.tt-body i { flex: 1; height: 7px; border-radius: 2px; background: var(--tt-bar); }

/* Light-surfaced templates: pale card, dark tiles. */
.tpl-minimal, .tpl-frost, .tpl-dune, .tpl-botanic,
.tpl-coral, .tpl-paper, .tpl-terrazzo { --tt-bar: rgba(20,24,32,.2); }
.tpl-minimal  { --tt-bg: #F6F3EE; --tt-head: #16181C; }
.tpl-frost    { --tt-bg: #E9F1FA; }
.tpl-dune     { --tt-bg: #FBEFE0; }
.tpl-botanic  { --tt-bg: #F7F4EC; }
.tpl-coral    { --tt-bg: #FFF4F1; }
.tpl-paper    { --tt-bg: #EFE4CF; --tt-head: transparent; }
.tpl-terrazzo { --tt-bg: #FBF7F0; }

/* Dark-surfaced templates that differ from the default charcoal.
   Aurora is listed too even though it is the base layout — it still has its
   own surface colour, and an entry here keeps "every slug is accounted for"
   true rather than relying on the default. */
.tpl-aurora    { --tt-bg: #0B1220; }
.tpl-carbon    { --tt-bg: #0E0F11; }
.tpl-slate     { --tt-bg: #12161C; }
.tpl-ocean     { --tt-bg: #04212F; }
.tpl-midnight  { --tt-bg: #060812; }
.tpl-blueprint { --tt-bg: #0A1F3D; }
.tpl-neon      { --tt-bg: #05070B; }
.tpl-elegant   { --tt-bg: #14080A; }
.tpl-marble    { --tt-bg: #0B0B0D; }
.tpl-velvet    { --tt-bg: #1A0A12; }
.tpl-chrome    { --tt-bg: #191B1F; }
.tpl-bento     { --tt-bg: #0D0F14; }
.tpl-prism     { --tt-bg: #0A0A12; }
.tpl-violet    { --tt-bg: #120C1F; }
.tpl-emerald   { --tt-bg: #06120E; }

/* ---- Per-template layout ----
   These mirror the archetypes in templates.css. A thumbnail that still showed
   a centred avatar for a template whose avatar is now hard left, or a top band
   for one whose colour is now at the bottom, would be worse than no preview. */

/* Emerald: asymmetric wave, avatar hard left. */
.tpl-emerald .tt-head { border-radius: 0 0 72% 28% / 0 0 34% 34%; }
.tpl-emerald .tt-av { left: 12px; transform: translate(0,-50%); }

/* Dune: sun half-sunk BEHIND the ridge, so the ridge paints over it. */
.tpl-dune .tt-head { height: 62%; }
.tpl-dune .tt-av { top: 44%; }
.tpl-dune::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 46%; bottom: 0; z-index: 3;
  background: var(--tt-bg); border-radius: 62% 38% 0 0 / 100% 100% 0 0;
}

/* Ocean: inverted — identity strip on top, swell at the bottom. */
.tpl-ocean .tt-head { top: auto; bottom: 0; height: 46%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .65; }
.tpl-ocean .tt-av { top: 12px; left: auto; right: 9px; transform: none; }
.tpl-ocean .tt-body { bottom: auto; top: 26px; }

/* Full-bleed colour: no seam at all. */
.tpl-gradient .tt-head,
.tpl-velvet .tt-head,
.tpl-prism .tt-head { height: 100%; }
.tpl-prism .tt-head {
  background: conic-gradient(from 200deg at 50% 30%, #FF6FD8,#7B8CFF,#4FE8E0,#7CFFA8,#FFE96F,#FF8A5B,#FF6FD8);
  opacity: .75;
}
.tpl-gradient .tt-av, .tpl-velvet .tt-av, .tpl-prism .tt-av { box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); }
.tpl-gradient .tt-body i, .tpl-velvet .tt-body i, .tpl-prism .tt-body i { background: rgba(255,255,255,.3); }

/* Avatar off to one side — the left/right-aligned headers. */
.tpl-corporate .tt-av, .tpl-carbon .tt-av { left: auto; right: 9px; transform: translate(0,-50%); top: 42%; }
.tpl-compact .tt-av, .tpl-bento .tt-av, .tpl-slate .tt-av { left: 11px; transform: translate(0,-50%); top: 42%; }
.tpl-midnight .tt-av, .tpl-prism .tt-av { left: auto; right: 8px; top: 9px; transform: none; }

/* Carbon: the seam is a slope, not a line. */
.tpl-carbon::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 34%; height: 22px; z-index: 1;
  background: var(--tt-bg); transform: skewY(-7deg);
}

/* Minimal: type only — no avatar, no colour band, just ruled lines. */
.tpl-minimal .tt-head { height: 0; }
.tpl-minimal .tt-av { display: none; }
.tpl-minimal::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 9px; height: 9px; border-radius: 2px;
  background: rgba(20,24,32,.5);
}
.tpl-minimal .tt-body { flex-direction: column; gap: 3px; }
.tpl-minimal .tt-body i { height: 1px; border-radius: 0; background: rgba(20,24,32,.28); }

/* Frost: three separated panes with gaps. */
.tpl-frost .tt-head { left: 4px; right: 4px; top: 4px; height: 8px; border-radius: 3px; opacity: .5; }
.tpl-frost::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 15px; height: 17px; border-radius: 4px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85);
}
.tpl-frost .tt-av { top: 23px; z-index: 2; }

/* Blueprint: identity in a title block, lower right. No portrait medallion. */
.tpl-blueprint .tt-head { height: 26%; }
.tpl-blueprint .tt-av { display: none; }
.tpl-blueprint::after {
  content: ""; position: absolute; right: 5px; left: 34%; top: 44%; height: 13px;
  border: 1px solid rgba(120,200,255,.65); background: rgba(120,200,255,.12);
}

/* Marble: a monogram plaque, not a face. */
.tpl-marble .tt-av { width: 15px; height: 15px; border-radius: 2px; top: 40%;
  background: transparent; box-shadow: 0 0 0 1px rgba(216,192,138,.75); }

/* Velvet: ribbon banner across the top. */
.tpl-velvet .tt-head { top: 7px; height: 9px; opacity: 1; }
.tpl-velvet .tt-av { top: 60%; box-shadow: 0 0 0 1.5px var(--tt-bg), 0 0 0 2.5px rgba(232,168,148,.55); }

/* Prism: a landscape payment panel with a chip. */
.tpl-prism .tt-head { left: 4px; right: 4px; top: 4px; height: 58%; border-radius: 5px; }
.tpl-prism::after {
  content: ""; position: absolute; left: 9px; top: 15px; width: 8px; height: 6px; border-radius: 1px;
  background: linear-gradient(135deg,#F7DFA0,#B8912F); z-index: 2;
}

/* Terrazzo: one tile floating on the card, name below it. */
.tpl-terrazzo .tt-head { left: 4px; right: 4px; top: 4px; height: 50%; border-radius: 6px; }
.tpl-terrazzo .tt-av { top: 54%; border-radius: 3px; }

/* Neon: the name sits in a lit sign box. */
.tpl-neon::after {
  content: ""; position: absolute; left: 7px; right: 7px; top: 46%; height: 11px; border-radius: 2px;
  border: 1px solid rgba(34,211,238,.75); background: rgba(34,211,238,.12);
}
.tpl-neon .tt-av { top: 32%; width: 9px; height: 9px; }

/* Paper: punched notches bite into both edges. */
.tpl-paper .tt-av { top: 34%; }
.tpl-paper .tt-body::before,
.tpl-paper .tt-body::after {
  content: ""; position: absolute; top: -12px; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(8,12,22,.5);
}
.tpl-paper .tt-body::before { left: -9px; }
.tpl-paper .tt-body::after { right: -9px; }

/* Square / rounded-square avatars. */
.tpl-carbon .tt-av, .tpl-slate .tt-av, .tpl-chrome .tt-av,
.tpl-bento .tt-av, .tpl-marble .tt-av { border-radius: 3px; }
.tpl-paper .tt-av, .tpl-blueprint .tt-av { border-radius: 2px; }

/* Slate: a thin accent rule is the only colour. */
.tpl-slate .tt-head { height: 3px; }
.tpl-slate::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 40%; background: #1B212A; }
.tpl-slate .tt-av { z-index: 3; }

/* Carbon: weave + a lit seam. */
.tpl-carbon .tt-head {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.5) 0 2px, transparent 2px 4px), #20242A;
  border-bottom: 2px solid; border-image: var(--thumb-grad, linear-gradient(90deg,#FFA53B,#7A3B06)) 1;
}

/* Coral: inset rounded block rather than a full-width band. */
.tpl-coral .tt-head { left: 4px; right: 4px; top: 4px; height: 54%; border-radius: 5px 5px 9px 9px; }
.tpl-coral .tt-av { top: 58%; }

/* Paper: dashed edge, no header band. */
.tpl-paper::after {
  content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(90,68,40,.5); border-radius: 4px;
}
.tpl-paper .tt-av { top: 40%; background: #C9B48C; box-shadow: 0 0 0 1.5px var(--tt-bg); }

/* Violet: tall gradient panel, sheet lifted over it. */
.tpl-violet .tt-head { height: 62%; }
.tpl-violet .tt-av { top: 34%; }
.tpl-violet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: var(--tt-bg); border-radius: 7px 7px 0 0;
}
.tpl-violet .tt-body { z-index: 2; }

/* Botanic: arch, inset from the paper edge. */
.tpl-botanic .tt-head { left: 13%; right: 13%; top: 3px; height: 64%; border-radius: 99px 99px 0 0; }
.tpl-botanic .tt-av { top: 60%; }

/* Blueprint: drafting grid behind everything. */
.tpl-blueprint {
  background:
    repeating-linear-gradient(0deg, rgba(120,200,255,.22) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(120,200,255,.22) 0 1px, transparent 1px 7px), var(--tt-bg);
}
.tpl-blueprint .tt-head { height: 40%; opacity: .8; }

/* Marble: veining across the whole card. */
.tpl-marble .tt-head {
  height: 100%;
  background: repeating-linear-gradient(63deg, transparent 0 8px, rgba(216,192,138,.4) 8px 9px, transparent 9px 14px), #121214;
}
.tpl-marble .tt-body i { background: rgba(216,192,138,.28); }

/* Chrome: brushed grain in the header. */
.tpl-chrome .tt-head {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#3A414B,#23272E);
  border-bottom: 1px solid rgba(255,255,255,.7);
}

/* Midnight: ribbons read as light, so they are blurred. */
.tpl-midnight .tt-head { height: 60%; filter: blur(4px); opacity: .75; }

/* Terrazzo: chips scattered over the floating tile (not the whole header). */
.tpl-terrazzo::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 50%; z-index: 1;
  border-radius: 6px; overflow: hidden;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(2px 3px at 74% 22%, rgba(0,0,0,.28), transparent 70%),
    radial-gradient(3px 2px at 46% 62%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(2px 2px at 88% 58%, rgba(255,255,255,.6), transparent 70%);
}

/* Neon: lit edge. */
.tpl-neon { box-shadow: inset 0 0 0 1px rgba(34,211,238,.5); }
.tpl-neon .tt-head { height: 40%; background: linear-gradient(180deg, rgba(34,211,238,.45), transparent); }
.tpl-neon .tt-av { box-shadow: 0 0 0 1.5px #22D3EE, 0 0 7px rgba(34,211,238,.8); }

/* Elegant: gold frame, no header band. */
.tpl-elegant .tt-head { height: 3px; }
.tpl-elegant::after {
  content: ""; position: absolute; inset: 4px; border: 1px solid rgba(217,180,91,.5); border-radius: 4px;
}
.tpl-elegant .tt-av { top: 38%; background: #D9B45B; }
.tpl-elegant .tt-body i { background: rgba(217,180,91,.26); }

/* Bento: the header is a floating tile. */
.tpl-bento .tt-head { left: 4px; right: 4px; top: 4px; height: 48%; border-radius: 6px; }
.tpl-bento .tt-av { top: 28%; }
.tpl-bento .tt-body i { border-radius: 4px; }
/* ...and its first action tile is double width. */
.tpl-bento .tt-body i:first-child { flex: 2; }
.tpl-neon .tt-body i:first-child { flex: 2; }

/* Frost's ::after (the identity pane) is defined with the other archetypes
   above — a second one here would win on source order and undo it. */
.tpl-frost .tt-av { box-shadow: 0 0 0 1.5px #fff; }

/* ---- Card colour picker (card-edit) ---- */
.cc-toggle { display: flex; align-items: center; gap: .6rem; cursor: pointer; margin-bottom: .9rem; font-weight: 500; }
.cc-toggle input { width: auto; }
.cc-body { display: grid; gap: .9rem; transition: opacity .2s; }
.cc-field.cc-off .cc-body { opacity: .4; pointer-events: none; filter: grayscale(.5); }
.cc-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc-swatch { width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: .18s; }
.cc-swatch:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.55); }
.cc-pickers { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.cc-pick { display: flex; flex-direction: column; gap: .35rem; font-size: .76rem; color: var(--muted); font-weight: 600; }
.cc-pick input[type=color] { width: 58px; height: 40px; padding: 0; border: 1px solid var(--glass-brd); border-radius: 10px; background: none; cursor: pointer; }
.cc-prev { width: 54px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 6px 16px rgba(0,0,0,.35); }

/* ---- Card background: template / colour / gradient / image ---- */
.bg-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .9rem; }
.bg-mode { position: relative; cursor: pointer; display: block; padding: .6rem .55rem;
  border: 1px solid var(--glass-brd); border-radius: var(--r-sm); background: var(--glass);
  transition: border-color .2s, background .2s; }
.bg-mode input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bg-mode:hover { border-color: var(--glass-brd-hi); }
.bg-mode.on { border-color: var(--royal); background: rgba(46,124,246,.12); box-shadow: var(--glow-blue); }
.bg-mode .bgm-lb { display: block; font-size: .82rem; font-weight: 600; }
.bg-mode .bgm-ds { display: block; font-size: .68rem; color: var(--muted); line-height: 1.3; margin-top: .12rem; }
.bg-pane { border: 1px solid var(--glass-brd); border-radius: var(--r-md); padding: .9rem;
  background: rgba(120,160,230,.04); display: grid; gap: .9rem; }
.bg-pane[hidden] { display: none; }

.bgi-row { display: flex; gap: .9rem; align-items: flex-start; }
/* 3:4 keeps the thumb honest: a card is portrait, so a landscape preview would
   promise a crop the live card never uses. */
.bgi-thumb { flex: 0 0 72px; width: 72px; aspect-ratio: 3 / 4; border-radius: 10px;
  border: 1px solid var(--glass-brd-hi); background: rgba(6,10,20,.6) center/cover no-repeat;
  display: grid; place-content: center; overflow: hidden; }
.bgi-thumb .bgi-empty { font-size: .66rem; color: var(--faint); }
.bgi-actions { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.bgi-actions .link-hint { margin: 0; }
.bg-dim { display: block; font-size: .8rem; color: var(--muted); }
.bg-dim > span { display: flex; justify-content: space-between; margin-bottom: .35rem; }
.bg-dim b { color: var(--sky); }
.bg-dim input[type=range] { width: 100%; accent-color: var(--royal); }
@media (max-width: 560px) {
  .bg-modes { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Logo picker (card builder) ---- */
.logo-section { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.2rem; padding: 1rem;
  border: 1px solid var(--glass-brd); border-radius: var(--r-md); background: rgba(120,160,230,.04); }
.logo-preview { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-content: center; border: 2px solid var(--glass-brd-hi); }
.logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.logo-initials { width: 100%; height: 100%; display: grid; place-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: #fff; }
.logo-actions { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.logo-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.logo-actions .link-hint { margin: 0; }
.btn.danger { color: #ff8f8f; border-color: rgba(255,80,80,.32); }
.btn.danger:hover { background: rgba(255,80,80,.14); }
@media (max-width: 480px) { .logo-section { flex-direction: column; text-align: center; align-items: center; } }

/* ==========================================================================
   CONTENT TABS + ATTACHMENTS

   Neither had any CSS at all. `.ctab-panel` therefore never hid, so Links and
   Files rendered stacked at once, and the unstyled dropzone fell back to a
   block <svg> at its 300x150 intrinsic size — which is why the PDF box
   dominated the form. Both are fixed here, at a deliberately small scale.
   ========================================================================== */
.content-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.ctab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .7rem; border-radius: var(--r-sm); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-brd); color: var(--muted);
  font-family: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s; }
.ctab:hover { color: var(--text-soft); border-color: var(--glass-brd-hi); }
.ctab.active { color: #fff; border-color: var(--royal); background: rgba(46,124,246,.12); }
.ctab i { font-style: normal; font-size: .72rem; font-weight: 400; color: var(--faint); }
.ctab-panel { display: none; }
.ctab-panel.active { display: block; }

/* ---- Saved attachments: one compact row each ---- */
.att-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .9rem; }
.att-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
  border: 1px solid var(--glass-brd); border-radius: var(--r-sm); background: rgba(120,160,230,.045); }
.att-row:hover { border-color: var(--glass-brd-hi); }
.att-icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-content: center;
  background: rgba(46,124,246,.14); color: var(--sky); }
/* Explicit sizing: an unsized inline SVG falls back to 300x150. */
.att-icon svg { width: 15px; height: 15px; }
.att-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta { font-size: .68rem; color: var(--muted); }
.att-view, .att-rm { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: grid; place-content: center; font-size: .8rem; line-height: 1;
  border: 1px solid var(--glass-brd); background: transparent; color: var(--muted); }
.att-view:hover { color: #fff; border-color: var(--glass-brd-hi); }
.att-rm { color: #ff9a9a; }
.att-rm:hover { background: rgba(255,80,80,.16); border-color: rgba(255,80,80,.4); }

/* ---- Dropzone: a single short row, not a hero panel ---- */
.att-dropzone { width: 100%; display: flex; align-items: center; gap: .7rem; text-align: left;
  padding: .7rem .85rem; border: 1px dashed var(--glass-brd-hi); border-radius: var(--r-sm);
  background: rgba(120,160,230,.04); color: var(--text-soft); cursor: pointer;
  font-family: inherit; transition: background .2s, border-color .2s; }
.att-dropzone:hover, .att-dropzone.dragover { background: rgba(46,124,246,.09); border-color: var(--royal); }
.att-dropzone svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--sky); }
.att-dropzone .attz-main { font-size: .86rem; font-weight: 600; }
.att-dropzone .attz-sub { margin-left: auto; font-size: .7rem; color: var(--muted); white-space: nowrap; }

/* ---- Queued (not yet uploaded) files ---- */
.att-preview { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.att-preview:empty { margin-top: 0; }
.att-file-card { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem;
  border: 1px solid var(--glass-brd); border-radius: var(--r-sm); background: rgba(120,160,230,.045); }
.att-file-thumb { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; overflow: hidden;
  background: rgba(46,124,246,.14) center/cover no-repeat; display: grid; place-content: center;
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; color: var(--sky); }
.att-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-file-name { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file-size { font-size: .68rem; color: var(--muted); }
.att-labels { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.att-labels:empty { margin-top: 0; }
.att-lbl-input { width: 100%; padding: .55rem .7rem; border-radius: var(--r-sm); color: #fff;
  font-size: .86rem; background: rgba(6,10,20,.6); border: 1px solid var(--glass-brd); }
.att-lbl-input:focus { outline: none; border-color: var(--glass-brd-hi); box-shadow: var(--glow-blue); }

/* ==========================================================================
   SHARE STEP (edit only)
   ========================================================================== */
.share-grid { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; align-items: start; }
.share-preview { text-align: center; }
.share-preview h3 { font-size: 1.15rem; margin-top: .4rem; }
.share-preview .pv-role { color: var(--sky); font-size: .86rem; }
.share-preview .pv-company { color: var(--muted); margin-top: .15rem; }
.preview-toggle { width: 132px; height: 132px; margin: 0 auto; position: relative; cursor: pointer; }
.preview-avatar, .preview-qr { width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: #fff; overflow: hidden;
  transition: opacity .3s, transform .3s; }
.preview-avatar { background: var(--grad-brand); }
.preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.preview-qr { position: absolute; top: 0; left: 0; background: #fff; padding: 8px; border-radius: 50%; }
.preview-qr img { width: 100%; height: 100%; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { flex: 1; min-width: 0; }
.share-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.pv-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.pv-link { font-size: .78rem; color: var(--sky); padding: .28rem .6rem; border-radius: 99px;
  border: 1px solid var(--glass-brd); background: rgba(46,124,246,.08); }
@media (max-width: 620px) {
  .share-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   Public digital card (card.php) — LUXURY EDITION.
   Charcoal + champagne-gold. Deliberately NOT the template blue/emerald/violet:
   the card carries its own metal palette so it reads like an engraved calling
   card rather than a SaaS screen. --tpl-* still exists for the editor preview.
   Every inline <svg> is explicitly sized — an unsized one falls back to its
   300x150 intrinsic box and destroys the layout.
   ========================================================================== */
.pubcard {
  width: min(100% - 2rem, 412px); margin: 0 auto;
  /* champagne → gold → antique bronze */
  --au-1: #F4E7C3; --au-2: #D9BE7E; --au-3: #B08D46; --au-4: #7A5E2B;
  --au-grad: linear-gradient(135deg, #F4E7C3 0%, #D9BE7E 38%, #B08D46 72%, #8A6C33 100%);
  --au-line: rgba(217,190,126,.22);
  --au-line-soft: rgba(217,190,126,.12);
  --au-glow: rgba(217,190,126,.28);
  /* near-black charcoal, warm not navy */
  --pc-surface: #0C0C0E; --pc-raised: #141416; --pc-ink: #F3EFE6; --pc-mute: #8C8578;
  --font-luxe: "Cormorant Garamond", Georgia, serif;
}

/* ---- Shell ---- */
.pubcard-inner {
  overflow: hidden; padding: 0; position: relative; border-radius: 22px;
  background: linear-gradient(180deg, #131315 0%, #0C0C0E 55%, #09090B 100%);
  border: 1px solid var(--au-line);
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(244,231,195,.10);
}

/* ---- Cover: charcoal with a raking gold light ---- */
.pubcard-cover {
  position: relative; height: 128px; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(217,190,126,.20), transparent 62%),
    linear-gradient(160deg, #1A1913 0%, #101012 48%, #0B0B0D 100%);
}
/* hairline of gold along the bottom edge — the "gilt edge" */
.pubcard-cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--au-2) 22%, var(--au-1) 50%, var(--au-2) 78%, transparent);
  opacity: .75;
}
.cover-shine {
  position: absolute; top: -60%; left: -40%; width: 42%; height: 220%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244,231,195,.22), transparent);
  transform: rotate(18deg); filter: blur(8px); animation: pcSheen 7s var(--ease) infinite;
}
@keyframes pcSheen { 0%, 74% { left: -40%; } 100% { left: 130%; } }

.pubcard-brand {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .32rem .8rem .32rem .32rem;
  background: rgba(10,10,12,.55); border: 1px solid var(--au-line); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pubcard-brand img { width: 24px; height: 24px; object-fit: contain; border-radius: 7px; flex-shrink: 0; }
.pubcard-brand span {
  font-family: var(--font-display); font-weight: 600; font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Hero ---- */
.pubcard-hero { position: relative; z-index: 2; text-align: center; padding: 0 1.7rem 1.2rem; margin-top: -50px; }
.pubcard-av {
  width: 100px; height: 100px; border-radius: 50%; margin: 0 auto .95rem;
  display: grid; place-content: center; overflow: hidden; position: relative;
  font-family: var(--font-luxe); font-weight: 600; font-size: 2.5rem; letter-spacing: .04em;
  color: var(--au-1);
  background:
    linear-gradient(#121214, #0C0C0E) padding-box,
    var(--au-grad) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 6px var(--pc-surface), 0 0 34px -6px var(--au-glow),
              0 18px 40px -16px rgba(0,0,0,.9);
}
.pubcard-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit !important; }

.pubcard-hero h1 {
  font-family: var(--font-luxe); font-size: 2.15rem; font-weight: 500;
  line-height: 1.08; letter-spacing: .01em; color: var(--pc-ink);
}
.pubcard-hero .role {
  margin-top: .5rem; font-family: var(--font-display); font-size: .64rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  background: var(--au-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pubcard-hero .company {
  margin-top: .55rem; color: var(--pc-mute); font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}
/* Engraved-stationery rule: a tapered gold hairline under the name. */
.pubcard-hero::after {
  content: ""; display: block; width: 78px; height: 1px; margin: 1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--au-3) 30%, var(--au-1) 50%, var(--au-3) 70%, transparent);
}

/* left-aligned template variant */
.pubcard.tpl-left .pubcard-hero { display: flex; align-items: flex-end; gap: 1rem; text-align: left; }
.pubcard.tpl-left .pubcard-hero::after { display: none; }
.pubcard.tpl-left .pubcard-av { margin: 0; width: 80px; height: 80px; font-size: 1.9rem; }
.pubcard.tpl-left .hero-info { flex: 1; min-width: 0; padding-bottom: .3rem; }
.pubcard.tpl-left .hero-info h1 { font-size: 1.75rem; }

.pubcard-body { padding: 0 1.35rem 1.5rem; }

/* ---- Icon tiles ---- */
.pubcard-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .5rem; }
.pubcard-actions a {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .85rem .4rem .7rem; border-radius: 12px; text-align: center;
  color: var(--pc-mute); background: var(--pc-raised);
  border: 1px solid var(--au-line-soft);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
}
.pubcard-actions a:hover {
  transform: translateY(-3px); border-color: var(--au-line);
  background: #17171A; box-shadow: 0 14px 30px -14px rgba(0,0,0,.9), 0 0 24px -10px var(--au-glow);
}
.pubcard-actions .pa-ic {
  width: 38px; height: 38px; display: grid; place-content: center; border-radius: 11px;
  color: var(--au-2); background: rgba(217,190,126,.07);
  border: 1px solid var(--au-line-soft); transition: .25s;
}
.pubcard-actions a:hover .pa-ic {
  color: #0C0C0E; background: var(--au-grad); border-color: transparent;
  box-shadow: 0 6px 16px -6px var(--au-glow);
}
.pubcard-actions svg { width: 18px; height: 18px; }
.pubcard-actions .pa-lb {
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pc-mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pubcard-actions a:hover .pa-lb { color: var(--au-1); }
/* links carry longer labels than the fixed quick actions */
.pubcard-actions.linkgrid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }

/* ---- Section headings ---- */
.pubcard-sec { margin-top: 1.6rem; }
.sec-label {
  display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem;
  font-family: var(--font-display); font-size: .58rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--au-3);
}
.sec-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--au-line), transparent);
}

.pubcard-about {
  color: #B9B3A6; line-height: 1.75; font-size: .88rem; margin: 0;
  padding: 1rem 1.1rem; border-radius: 12px;
  background: var(--pc-raised); border: 1px solid var(--au-line-soft);
  border-left: 2px solid var(--au-3);
}

/* ---- Row-style links (list templates) ---- */
.pubcard-links { display: flex; flex-direction: column; gap: .5rem; }
.pubcard-links a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .9rem 1.05rem; border-radius: 12px; font-size: .9rem; font-weight: 500;
  color: var(--pc-ink); background: var(--pc-raised);
  border: 1px solid var(--au-line-soft); transition: .25s var(--ease);
}
.pubcard-links a:hover { border-color: var(--au-line); transform: translateX(4px); background: #17171A; }
.pubcard-links a .link-icon {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-content: center;
  color: var(--au-2); background: rgba(217,190,126,.07);
  border: 1px solid var(--au-line-soft); border-radius: 10px;
}
.pubcard-links a .link-icon svg { width: 17px; height: 17px; }
.pubcard-links a .link-label { flex: 1; text-align: left; }
.pubcard-links a .arr { color: var(--au-3); transition: transform .25s, color .25s; }
.pubcard-links a:hover .arr { color: var(--au-1); transform: translateX(3px); }

/* ---- QR ---- */
.pubcard-qr { margin-top: 1.6rem; text-align: center; }
.qr-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  padding: .85rem 1rem; border-radius: 12px; cursor: pointer; font-family: var(--font-display);
  font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--au-2); background: transparent; border: 1px solid var(--au-line);
  transition: .25s var(--ease);
}
.qr-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.qr-toggle:hover {
  color: #0C0C0E; background: var(--au-grad); border-color: transparent;
  box-shadow: 0 10px 26px -12px var(--au-glow);
}
/* Plain display toggle, NOT a max-height/grid-rows collapse: those keep the
   block in layout and leave a blank gap where the QR should be. */
.qr-reveal { display: none; }
.pubcard-qr.open .qr-reveal { display: block; margin-top: 1rem; animation: qrIn .34s var(--ease) both; }
@keyframes qrIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pubcard-qr .qbox {
  width: 168px; height: 168px; margin: 0 auto; background: #F3EFE6;
  border-radius: 12px; padding: 11px;
  box-shadow: 0 0 0 1px var(--au-line), 0 18px 36px -16px rgba(0,0,0,.9);
}
.pubcard-qr .qbox img, .pubcard-qr .qbox canvas { width: 100% !important; height: 100% !important; display: block; }
.pubcard-tag {
  display: block; margin-top: .8rem; font-family: var(--font-display); font-size: .56rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--au-3);
}

.pubcard-foot { text-align: center; margin-top: 1.3rem; color: var(--pc-mute); font-size: .72rem; letter-spacing: .04em; }
.pubcard-foot a { color: var(--au-2); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .cover-shine { animation: none; } }

/* ==========================================================================
   COMPACT — fit the whole card on one phone screen (no scroll needed).
   ========================================================================== */
@media (max-width: 640px), (max-height: 820px) {
  /* Only the public card tightens here. This used to target .portal-main with
     !important, which also hit the dashboard/login/editor — every page that
     DOES have a fixed navbar — so their content slid under it on any viewport
     shorter than 820px (i.e. most laptops). */
  .pubcard-main { padding-top: 1rem; }
  .pubcard { width: min(100% - 1.4rem, 400px); }
  .pubcard-cover { height: 96px; }
  .pubcard-brand { margin-top: .7rem; }
  .pubcard-brand img { width: 20px; height: 20px; }
  .pubcard-hero { margin-top: -40px; padding: 0 1.4rem .9rem; }
  .pubcard-av { width: 78px; height: 78px; font-size: 1.95rem; }
  .pubcard-hero h1 { font-size: 1.68rem; }
  .pubcard-hero .role { font-size: .58rem; margin-top: .4rem; }
  .pubcard-hero .company { font-size: .7rem; margin-top: .4rem; }
  .pubcard-hero::after { margin-top: .75rem; }
  .pubcard-body { padding: 0 1.05rem 1.1rem; }
  .pubcard-actions { gap: .42rem; }
  .pubcard-actions a { padding: .62rem .2rem .55rem; border-radius: 11px; }
  .pubcard-actions .pa-ic { width: 32px; height: 32px; border-radius: 9px; }
  .pubcard-actions svg { width: 16px; height: 16px; }
  .pubcard-actions .pa-lb { font-size: .58rem; }
  .pubcard-sec { margin-top: 1.1rem; }
  .sec-label { margin-bottom: .6rem; font-size: .54rem; }
  .pubcard-about { padding: .8rem .9rem; font-size: .83rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pubcard-links a { padding: .74rem .9rem; font-size: .86rem; }
  .pubcard-qr { margin-top: 1.1rem; }
  .qr-toggle { padding: .72rem 1rem; font-size: .6rem; }
}

/* Body sections gently stagger in */
.pubcard-body > * { animation: pcFade .6s ease both; }
.pubcard-body > *:nth-child(1) { animation-delay: .06s; }
.pubcard-body > *:nth-child(2) { animation-delay: .12s; }
.pubcard-body > *:nth-child(3) { animation-delay: .18s; }
.pubcard-body > *:nth-child(4) { animation-delay: .24s; }
.pubcard-body > *:nth-child(5) { animation-delay: .30s; }
.pubcard-body > *:nth-child(6) { animation-delay: .36s; }
@keyframes pcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pubcard, .pubcard-body > *, .cover-shine { animation: none !important; } }

/* Layout: LINKS-FIRST — the custom links section is promoted above the fixed
   quick actions. Every child needs an explicit order: unset children default
   to 0 and would otherwise jump ahead of the ordered ones. Matched on
   .linkgrid (the links block), not .pubcard-links, which this markup no
   longer uses. */
.tpl-linksfirst .pubcard-body { display: flex; flex-direction: column; }
.tpl-linksfirst .pubcard-body > .pubcard-sec:has(.linkgrid)      { order: 1; }
.tpl-linksfirst .pubcard-body > .pubcard-actions                 { order: 2; }
.tpl-linksfirst .pubcard-body > .pubcard-sec:has(.pubcard-about) { order: 3; }
.tpl-linksfirst .pubcard-body > .pubcard-qr                      { order: 4; }

@media (max-width: 900px) {
  .plan-picker { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .link-head { display: none; }
  .link-row { grid-template-columns: 1fr 44px; }
  .link-row .link-type { grid-column: 1 / -1; }
}

/* ==========================================================================
   COMPACT LAYOUT
   The portal pages were tall enough to need a lot of scrolling: the shell
   reserved almost a full viewport even for a single card, and the builder
   form stacked full-height fields. These overrides tighten the vertical
   rhythm without changing any structure. Loaded after style.css, so plain
   specificity wins — no !important needed.
   ========================================================================== */

/* --- Shell: was `min-height: calc(100vh - nav - 90px)` + 2.4rem/3rem padding,
       which left a large dead band under short pages. --- */
.portal-main { min-height: 0; padding: calc(var(--nav-h) + 1.5rem) 0 2rem; }

/* --- Dashboard --- */
.dash-head { margin-bottom: 1.3rem; }
.usage { gap: .9rem; margin-bottom: 1.4rem; }
.usage .u { padding: 1rem 1.2rem; }
.usage .u .v { font-size: 1.5rem; margin-top: .15rem; }
.usage .bar { margin-top: .6rem; }
.cards-grid { gap: 1rem; }
.mini-card { padding: 1.25rem; gap: .8rem; }
.add-card { min-height: 170px; }

/* --- Card builder: the single biggest source of scrolling --- */
.field { margin-bottom: .85rem; }
.field label { margin-bottom: .35rem; }
/* 130px of empty textarea for a one-line tagline was pure scroll. */
.field textarea { min-height: 84px; }
.grid-2 { gap: .85rem; }

/* Template picker: with 15 templates a 3-column grid is five tall rows on its
   own. Small thumbs in a dense auto-fill grid keep the Design step to about a
   screen; the blurb moved into the tile's title attribute. */
.tpl-picker { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.tpl-opt .tpl-box { padding: .45rem; }
.tpl-name { font-size: .74rem; line-height: 1.2; }

@media (max-width: 700px) {
  /* Phones get a swipeable strip instead of a grid — 15 tiles stacked three
     to a row would be the tallest thing in the whole form. */
  .tpl-picker { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .tpl-picker::-webkit-scrollbar { height: 5px; }
  .tpl-picker::-webkit-scrollbar-thumb { background: var(--glass-brd-hi); border-radius: 99px; }
  .tpl-opt { flex: 0 0 106px; scroll-snap-align: start; }
}

@media (max-width: 900px) {
  .portal-main { padding-top: calc(var(--nav-h) + 1rem); }
  .builder-panel { padding: 1.2rem; }
  .builder-head h1 { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  /* The icon alone identifies the step once the strip gets tight. */
  .bstep-tab { min-width: 0; padding: .55rem .4rem; font-size: .74rem; }
  .bstep-tab .bs-lb { display: none; }
  .bstep-tab.active .bs-lb { display: inline; }
}