/* RCMarket tokens and component recipes. ONE accent: the logo's red means a primary action or a
   selected state, nothing else. Hover and focus are neutral. Stars have their own amber. Inter 14px. */
:root{
  --brand:#f42200; --brand-hover:#d81d00; --brand-lite:#ff6a4d; --brand-soft:#fff1ec; --brand-line:#f6c8bc; --brand-ink:#b81a05;
  --gray:#686868; --star:#e6a817; --bar:#0e1116;
  --charcoal:#1a1d23; --ink:#1f2329; --muted:#6b7280; --faint:#9aa0aa;
  --page:#f3f4f6; --card:#ffffff; --line:#e6e7ea; --line-2:#d7d9dd; --chip:#f6f7f9;
  --danger:#c0392b; --live:#1f9254; --live-bg:#e9f5ee; --live-line:#bfe0cd;
  --warn:#a4690f; --warn-bg:#fdf6e7; --warn-line:#f0dfb8;
  --tint:#FFF7F4; --tint-line:#F1DDD6; --tint-line-2:#E4C6BB;
  --hover-line:#C9CDD6; --ring:#AEB4BE;
  --r-chip:8px; --r-btn:9px; --r-card:11px; --r-panel:14px; --r-modal:16px;
  --shadow:0 1px 3px rgba(20,22,26,.06),0 6px 18px rgba(20,22,26,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* the pwa-kit components take the brand (public/assets/pwa-ui.css) */
:root{--pwa-brand:var(--brand);--pwa-ink:var(--ink);--pwa-mut:var(--muted);--pwa-card:var(--card);--pwa-line:var(--line);--pwa-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
h1,h2,h3{margin:0;letter-spacing:-.02em}
h1{font-size:24px;font-weight:800;text-wrap:balance}
h2{font-size:20px;font-weight:800}
h3{font-size:15px;font-weight:700}
p{margin:0;text-wrap:pretty}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.eyebrow{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media (max-width:720px){.wrap{padding:0 16px}}

/* ---- buttons: 38px, never wrap ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--ink);line-height:1}
.btn:hover{border-color:var(--hover-line)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(174,180,190,.45)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.danger{color:var(--danger)}
.btn.wide{width:100%}
.btn.quiet{border-color:transparent;background:transparent;color:var(--muted)}
.btn:disabled{opacity:.5;cursor:default}
.btn.icon{width:38px;padding:0}
.btn svg{width:16px;height:16px;flex:0 0 auto}

/* ---- chips: 31px; selected = the wash ---- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.mchip.trade{background:#eef4ff;color:#2f4fa8}   /* 009: Trades, blue so it never reads as a deal badge or the brand */
.mchip.biz{background:var(--brand-soft);color:var(--brand-ink)}   /* 012: Business seller on a tile */
/* 012: the seller badge (ad page, profile, inbox). Private = quiet gray; Business = brand outline + storefront */
.sbadge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap;flex:0 0 auto;line-height:1}
.sbadge svg{width:12px;height:12px;flex:0 0 12px}
.sbadge.biz{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-ink)}
.mchip.want{background:#fff4d6;color:#7a5200}    /* 009: Wanted, amber, a hue nothing else on the site uses */
.chip{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-chip);background:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--hover-line)}
.chip.on{background:rgba(244,34,0,.1);border-color:rgba(244,34,0,.55);color:var(--brand-ink)}
.chip .n{font-weight:500;color:var(--muted)}
.chip.on .n{color:var(--brand-ink)}
.mchip{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;background:var(--chip);font-size:10.5px;font-weight:700;white-space:nowrap;color:var(--muted)}
.mchip.live{background:var(--live-bg);color:var(--live)}
.mchip.warn{background:var(--warn-bg);color:var(--warn)}
.mchip.ink{background:rgba(21,23,27,.82);color:#fff}

/* ---- the deal badge: one hue, three strengths, so the brand red keeps its meaning ---- */
.deal{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:10.5px;font-weight:700;white-space:nowrap;border:1px solid transparent;line-height:1}
.deal.decent{background:#f3efe6;border-color:#e3dccb;color:#6b5a3a}
.deal.good{background:var(--live-bg);border-color:var(--live-line);color:var(--live)}
.deal.great{background:var(--live);border-color:var(--live);color:#fff}
.deal.lg{height:24px;font-size:12px;padding:0 9px}

/* ---- forms: never a bare native input ---- */
.pform label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.pform input[type=text],.pform input[type=password],.pform input[type=email],.pform input[type=number],.pform input[type=search],.pform input[type=tel],.pform select,.pform textarea{width:100%;height:38px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:#fff;font:inherit;font-size:13.5px;color:var(--ink)}
.pform textarea{height:auto;min-height:96px;padding:9px 11px;line-height:1.5;resize:vertical}
.pform input:hover,.pform select:hover,.pform textarea:hover{border-color:var(--hover-line)}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(244,34,0,.18)}
.pform input::placeholder,.pform textarea::placeholder{color:var(--faint)}
.hint{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.45}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
@media (max-width:720px){.pform input,.pform select,.pform textarea{font-size:16px !important}}
/* THE 16px FLOOR (pwa-kit). iOS zooms the page on focus of any input, select or textarea under 16px,
   and it lingers; the rule above only covered .pform at phone width, so the header search (14px),
   the ZIP box (13px) and every field on an iPad at desktop width still zoomed. Keyed on a TOUCH
   pointer, not a width, so the desktop design keeps its sizes and every iPhone and iPad gets the
   floor. !important because a scoped rule always outranks a generic one. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea{font-size:16px !important}}
.pref{position:relative}
.pref input{padding-left:26px !important}
.pref .sym{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;font-size:13.5px}
.unit{display:inline-flex;align-items:center;gap:8px}
.unit input{width:96px !important}
.unit span{font-size:12.5px;color:var(--muted)}
/* the setting box: label above, control, note under */
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.setgrid > .setbox.wide{grid-column:1 / -1}   /* a box that spans the row, however many columns the grid has */
.setbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px 11px;min-width:0}
.set-h{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
.set-note{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.4}
/* Super Admin > Payments: two groups side by side, one Save each */
.paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start;max-width:980px}
.paygrid .setbox{padding:16px 18px 18px}
.paygrid .set-h{align-items:center}
.payrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.pform .payrow label{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.payrow label span{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.dollar{position:relative;flex:0 0 96px}
.dollar i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:14px}
.pform .dollar input{padding-left:22px;width:100%}
.payact{display:flex;justify-content:flex-end;margin-top:16px}
.keynow{display:grid;gap:6px;margin-bottom:16px;padding:12px 14px;background:var(--chip);border-radius:10px;font-size:12.5px}
.keynow div{display:flex;justify-content:space-between;gap:12px}
.keynow span{color:var(--muted)}
.keynow code{font:600 12px/1.4 ui-monospace,Menlo,monospace}
.keynow p{margin:4px 0 0;color:var(--muted);line-height:1.45}
.setband{background:var(--chip);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--muted);line-height:1.5}
.setband b{color:var(--ink)}
.kpi{background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:10px;padding:12px 14px}
.kpi .v{font-size:22px;font-weight:800;color:var(--ink)}
.fgcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.fgcols{grid-template-columns:1fr}}

/* ---- switch ---- */
.sw,.pform label.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:0}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .tr{width:34px;height:20px;border-radius:10px;background:#cfd3da;position:relative;transition:background .15s;flex:0 0 auto}
.sw .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.sw input:checked + .tr{background:var(--brand)}
.sw input:checked + .tr::after{left:16px}
.sw .lb{font-size:13.5px;font-weight:600}
.swbox{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.swbox .set-note{margin-top:4px}

/* ---- panels ---- */
.panel{background:#fff;border:1px solid #EAEAEA;border-radius:var(--r-panel);box-shadow:var(--shadow);overflow:hidden}
.panelhead{background:#E5E5E5;border-bottom:1px solid #C2C2C2;padding:11px 16px 12px;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.panelhead h2,.panelhead h3{font-size:14px;font-weight:800;letter-spacing:-.01em}
.panelbody{background:#F8F8F8;padding:13px}
.panel + .panel{margin-top:18px}
/* Two panels SIDE BY SIDE (.fgcols) are one block: tops level (the stacked-panel margin above pushed the second one
   18px down), equal height, each body filling its panel, and a closing row of buttons pinned to the foot so both
   columns end on one line. */
.fgcols > .panel{margin-top:0;display:flex;flex-direction:column}
.fgcols > .panel > .panelbody{flex:1 1 auto;display:flex;flex-direction:column}
.fgcols > .panel > .panelbody > .pfoot{margin-top:auto;padding-top:10px;display:flex;gap:8px}
.panel.tint{background:var(--tint);border-color:var(--tint-line)}
.panel.tint .panelhead{background:#EFEAE0;border-color:var(--tint-line-2)}
.panel.tint .panelbody{background:var(--tint)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px}
.card + .card{margin-top:10px}

/* ---- modals: close ONLY via buttons ---- */
.scrim{position:fixed;inset:0;background:rgba(20,22,26,.42);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:var(--r-modal);width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(20,22,26,.25)}
.modal .mh{padding:18px 20px 0}
.modal .mh h2{font-size:18px}
.modal .mb{padding:14px 20px;overflow:auto;flex:1 1 auto}
.modal .mf{padding:12px 20px 18px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line)}
/* the hobby picker: nine buttons, small footprint, no pictures */
.scrim.pick .modal{max-width:440px}
.scrim.pick .mh{padding:20px 20px 0}
.scrim.pick .mh h2{font-size:19px;text-align:center}
.scrim.pick .mb{padding:16px 20px 22px}
/* the founder's welcome: over the hobby picker, cart on top, his letter, signature */
.scrim.welcome{z-index:70}
.scrim.welcome .modal{max-width:520px}
.scrim.welcome .mh{padding:24px 24px 0;text-align:center}
.scrim.welcome .wcart{display:block;width:88px;height:auto;margin:0 auto 12px}
.scrim.welcome .mh h2{font-size:21px;line-height:1.25}
.scrim.welcome .mb{padding:14px 24px 18px;font-size:15px;line-height:1.6;color:var(--ink)}
.scrim.welcome .mb p{margin:0 0 12px}
.scrim.welcome .mb a{color:var(--brand-ink);font-weight:700}
.scrim.welcome .nw{white-space:nowrap}
.scrim.welcome .wsig{margin:18px 0 0;display:flex;flex-direction:column;gap:2px}
.scrim.welcome .wsig span{color:var(--muted);font-size:13.5px}
.scrim.welcome .mf{padding:14px 24px 20px}
@media (max-width:600px){.scrim.welcome .mh{padding:20px 18px 0}.scrim.welcome .wcart{width:68px}.scrim.welcome .mh h2{font-size:19px}.scrim.welcome .mb{padding:12px 18px 14px}.scrim.welcome .mf{padding:12px 18px 16px}.scrim.welcome .mf .btn{flex:1}}
.pickgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.pickgrid a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 8px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.2;text-decoration:none}
.pickgrid a:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
/* "All" fills the last row beside Boats (ten types, three to a row) */
.pickgrid a.all{grid-column:span 2;font-weight:700}
/* one line per tile (his rule): the full name where it fits, the short one (Scale Helis, 3D Helis) on a phone */
.pickgrid a{white-space:nowrap}.pickgrid a .s{display:none}
@media (max-width:420px){.pickgrid{gap:6px}.pickgrid a{font-size:11.5px;min-height:42px}}
@media (max-width:480px){.pickgrid a .l{display:none}.pickgrid a .s{display:inline}}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;max-height:88%;display:flex;flex-direction:column;z-index:61;box-shadow:0 -10px 40px rgba(20,22,26,.2)}
.sheet .mb{overflow:auto;padding:14px 16px;flex:1 1 auto}
.sheet .mf{padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:8px;border-top:1px solid var(--line)}
.sheet .mf .btn{flex:1}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--charcoal);color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:600;z-index:70;box-shadow:0 8px 24px rgba(20,22,26,.3);max-width:calc(100% - 32px);text-align:center}
.toast a{color:var(--brand-lite);font-weight:700}

/* ---- savebar ---- */
.savebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
.savebar .st{font-size:13px;color:var(--muted)}
.savebar .acts{display:flex;gap:8px}

/* ---- avatar ---- */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:800;font-size:15px;flex:0 0 auto}
.avatar.lg{width:64px;height:64px;font-size:22px}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.img{background:#eceef2;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---- ratings: five stars with a partial fill, the number, the count ---- */
.rating{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.rating b{color:var(--ink);font-weight:700}
.stars{position:relative;display:inline-block;font-size:14px;line-height:1;letter-spacing:1px;color:#d9dbe0}
.stars .on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--star)}
.norate{font-size:12.5px;color:var(--faint)}
/* 025: a rating is two percents, "98% fair dealing · 95% as represented" */
.rating .rq + .rq::before{content:"\00b7";margin:0 6px 0 1px;color:var(--faint);font-weight:400}

/* ---- empty state stays put ---- */
.empty{background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-panel);padding:36px 22px;text-align:center}
.empty b{display:block;font-size:15px;margin-bottom:6px}
.empty span{color:var(--muted);font-size:13.5px}
.empty .btn{margin-top:16px}
.empty.ok{border-style:solid;border-color:var(--live-line);background:var(--live-bg);color:var(--live)}

/* ---- drag ---- */
/* The ghost is a clone of the row, so it carries the row's own classes, and a later sheet's rule for that class can
   outrank a plain .drag-ghost: the photo strip's .thumb{position:relative} (sell.css) did, and the picture being
   dragged was drawn at the bottom of the page instead of under the pointer (his report 2026-10-05). The properties
   that make it a ghost are therefore !important. */
.drag-ghost{position:fixed !important;margin:0 !important;pointer-events:none;z-index:80;opacity:.95 !important;transform:rotate(2deg);box-shadow:0 14px 34px rgba(20,22,26,.28);border-radius:10px;overflow:hidden}
.drop-zone{border:2px dashed rgba(244,34,0,.6);background:rgba(244,34,0,.06);border-radius:10px}
/* The row being dragged leaves the flow entirely, so the drop zone is the only thing holding its place. It is
   taken out with position:absolute, not height:0: a zero-height item still owns a CELL in a grid (the photo strip),
   which pushed the last photo onto a new row for the length of the drag, and still earns a gap in a flex list. It
   stays rendered (never display:none) so the press that started the drag keeps its pointer. */
.drag-source{position:absolute !important;width:0 !important;height:0 !important;min-width:0 !important;min-height:0 !important;padding:0 !important;margin:0 !important;border:0 !important;opacity:0 !important;overflow:hidden !important;pointer-events:none}
body.dragging,body.dragging *{cursor:grabbing !important;-webkit-user-select:none;user-select:none}
.pform label .opt{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
/* Super Admin > Members */
.mtools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mfind{flex:1 1 260px;max-width:420px}
.mfind input{width:100%;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-btn);font:inherit;font-size:13.5px;background:#fff}
.mtools .chip .n{color:var(--muted);font-weight:500;margin-left:2px}
.mlist{background:#fff;border:1px solid var(--line);border-radius:12px}
.mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow.banned{background:#fbfbfc}
/* Super Admin > Countries: one row per country, the two switches on the right */
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);font-size:13.5px}
.crow:first-child{border-top:0}
.crow.off .cn{color:var(--muted)}
.crow .cc{font-size:11px;color:var(--faint);margin-left:8px;letter-spacing:.04em}
.crow .sw .lb{font-size:12px;color:var(--muted);font-weight:600;min-width:26px}
.mrow.banned .mwho{opacity:.7}
.mwho .t{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mwho .noname{font-style:italic;font-weight:500;color:var(--muted)}
.mwho .m{font-size:12.5px;color:var(--muted);margin-top:3px}
.mrow .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mchip.modchip{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:640px){.mrow{grid-template-columns:auto minmax(0,1fr)}.mrow .acts{grid-column:1 / -1;justify-content:flex-start}}
/* a moderator's unpublish, as the seller sees it */
.modnote{margin-top:8px;padding:10px 12px;border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
.modnote.big{margin:0 0 18px;padding:14px 16px;font-size:14px}
/* the sign-in agreement line, every sign-in form */
.agree{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.agree a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
/* "Log in with your RCPilot account" on /signin (render.js rcpButton) */
.sso-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:20px 0 14px}
.sso-or::before,.sso-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sso-note{margin:8px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
/* the pwa-kit dialogs and strips wear the brand, not the kit's indigo (html:root beats pwa-ui.css's :root whatever the load order) */
html:root{--pwa-brand:var(--brand);--pwa-ink:var(--ink,#26262a);--pwa-font:Inter,system-ui,sans-serif}
/* the app icon in the kit dialogs: centered, drawn as a rounded app tile (the PNG's white ground hides its own corners) */
.pwa-dlg .pwa-dlg-ic{display:flex;justify-content:center;margin:2px 0 14px}
.pwa-dlg .pwa-dlg-ic img{width:72px;height:72px;margin:0;border-radius:18px;border:1px solid var(--line-2,#d9dce1);box-shadow:0 4px 14px rgba(20,22,26,.12);background:#fff}
.pwa-dlg h3{text-align:center}

/* the share modal: opened from an ad page, any board tile or a wanted ad */
.shareicons{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:2px}
.sico{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-decoration:none;font:inherit;min-width:0}
.sico .sq{width:52px;height:52px;border:1px solid var(--line-2);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.sico:hover .sq{border-color:var(--hover-line)}
.sico:focus{outline:none}
.sico:focus-visible .sq{border-color:var(--ink)}
.sico .sq svg{width:22px;height:22px}
.sico .lb{font-size:11.5px;color:var(--muted);white-space:nowrap}
.sharecard-h{font-size:14px;font-weight:700;margin:22px 0 4px}
.cardimg{display:block;width:100%;max-width:400px;border-radius:12px;margin:12px auto 0;visibility:hidden}
.cardimg.on{visibility:visible}
.cardacts{display:flex;gap:8px;margin-top:10px}
.cardacts .btn{flex:1}
@media (max-width:420px){.sico .sq{width:46px;height:46px;border-radius:12px}.sico .lb{font-size:11px}}