/* The full menus (the dialog: settings, help, you, hosting, people…) and the welcome (#onboard): frosted glass that
   follows the theme (light frosted in light mode, smoked in dark), over the world. Linked after hud.css. The tokens
   below are remapped inside, so the shared components (buttons, chips, inputs, cards, switches) turn frosted too;
   then the menu's own parts: the header, grouped settings rows, segmented choices, sliders, keycaps, stamps.
   Solid instead of see-through with "See-through panels" off, reduced transparency, more contrast or high contrast. */

:root{
  --m-bg:rgba(247,248,255,.8);--m-bg-solid:#F6F7FE;--m-line:rgba(22,26,64,.1);--m-line-2:rgba(22,26,64,.17);--m-hi:inset 0 1px 0 rgba(255,255,255,.75);
  --m-shadow:0 34px 90px -24px rgba(16,20,60,.5),0 10px 28px -10px rgba(16,20,60,.28);--m-back:rgba(12,14,38,.26);
  --m-card:rgba(255,255,255,.68);--m-card-2:rgba(255,255,255,.44);--m-card-hover:rgba(255,255,255,.92);--m-input:rgba(255,255,255,.7);--m-btn:rgba(255,255,255,.72);--m-btn-hover:#fff;
  --m-ink:#121530;--m-ink-2:#545A7E;--m-ink-3:#7A80A3;--m-accent:#4B3FD6;--m-accent-2:#7B5CFF;--m-on-accent:#fff;--m-accent-soft:rgba(75,63,214,.11);
  --m-track:rgba(22,26,64,.16);--m-seg:rgba(22,26,64,.06);--m-seg-on:#fff;--m-key-top:#fff;--m-key-bot:#ECEEF7;--m-key-edge:rgba(22,26,64,.2);
  --m-blur:28px;--m-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545A7E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --m-bg:rgba(19,22,47,.76);--m-bg-solid:#161935;--m-line:rgba(255,255,255,.1);--m-line-2:rgba(255,255,255,.17);--m-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --m-shadow:0 34px 90px -24px rgba(0,0,0,.75),0 10px 28px -10px rgba(0,0,0,.5);--m-back:rgba(3,4,16,.42);
  --m-card:rgba(255,255,255,.06);--m-card-2:rgba(255,255,255,.035);--m-card-hover:rgba(255,255,255,.1);--m-input:rgba(255,255,255,.06);--m-btn:rgba(255,255,255,.07);--m-btn-hover:rgba(255,255,255,.13);
  --m-ink:#EEF0FF;--m-ink-2:#AAB0DB;--m-ink-3:#8389B5;--m-accent:#A193FF;--m-accent-2:#C7BDFF;--m-on-accent:#130F38;--m-accent-soft:rgba(161,147,255,.16);
  --m-track:rgba(255,255,255,.16);--m-seg:rgba(255,255,255,.06);--m-seg-on:rgba(255,255,255,.16);--m-key-top:rgba(255,255,255,.15);--m-key-bot:rgba(255,255,255,.06);--m-key-edge:rgba(0,0,0,.5);
  --m-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAB0DB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}}
:root[data-theme="dark"]{
  --m-bg:rgba(19,22,47,.76);--m-bg-solid:#161935;--m-line:rgba(255,255,255,.1);--m-line-2:rgba(255,255,255,.17);--m-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --m-shadow:0 34px 90px -24px rgba(0,0,0,.75),0 10px 28px -10px rgba(0,0,0,.5);--m-back:rgba(3,4,16,.42);
  --m-card:rgba(255,255,255,.06);--m-card-2:rgba(255,255,255,.035);--m-card-hover:rgba(255,255,255,.1);--m-input:rgba(255,255,255,.06);--m-btn:rgba(255,255,255,.07);--m-btn-hover:rgba(255,255,255,.13);
  --m-ink:#EEF0FF;--m-ink-2:#AAB0DB;--m-ink-3:#8389B5;--m-accent:#A193FF;--m-accent-2:#C7BDFF;--m-on-accent:#130F38;--m-accent-soft:rgba(161,147,255,.16);
  --m-track:rgba(255,255,255,.16);--m-seg:rgba(255,255,255,.06);--m-seg-on:rgba(255,255,255,.16);--m-key-top:rgba(255,255,255,.15);--m-key-bot:rgba(255,255,255,.06);--m-key-edge:rgba(0,0,0,.5);
  --m-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAB0DB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* ---------- the shell ---------- */
#modal{--surface:var(--m-card);--surface-2:var(--m-card-2);--ink:var(--m-ink);--ink-2:var(--m-ink-2);--line:var(--m-line);--accent-soft:var(--m-accent-soft);
  background:var(--m-bg);-webkit-backdrop-filter:blur(var(--m-blur)) saturate(1.6);backdrop-filter:blur(var(--m-blur)) saturate(1.6);border:1px solid var(--m-line);box-shadow:var(--m-hi),var(--m-shadow);
  border-radius:26px;width:min(620px,calc(100vw - 2rem));max-width:none;max-height:min(880px,calc(100dvh - 2rem));color:var(--m-ink);overflow:hidden}
#modal.wide{width:min(900px,calc(100vw - 2rem))}
#modal::backdrop{background:var(--m-back);-webkit-backdrop-filter:blur(3px) saturate(1.15);backdrop-filter:blur(3px) saturate(1.15)}
#modal[open]{animation:m-in .24s cubic-bezier(.2,.8,.2,1)}#modal[open]::backdrop{animation:m-fade .24s ease}
@keyframes m-in{from{opacity:0;transform:translateY(10px) scale(.985)}}@keyframes m-fade{from{opacity:0}}
:root[data-motion="reduce"] #modal,:root[data-motion="reduce"] #modal::backdrop{animation:none}
@media (prefers-reduced-motion:reduce){#modal,#modal::backdrop{animation:none!important}}
#modal .m-inner{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:inherit}
#modal .m-head{display:flex;align-items:center;gap:.85rem;padding:1.15rem 1.1rem .8rem 1.35rem;position:relative;transition:box-shadow .2s}
#modal[data-scrolled] .m-head{box-shadow:0 1px 0 var(--m-line)}
#modal .m-ic{width:2.6rem;height:2.6rem;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:var(--m-accent-soft);flex:none}
#modal .m-ic .ic{width:1.3rem;height:1.3rem;color:var(--m-accent)}
#modal .m-titles{flex:1;min-width:0}
#mTitle{font:800 1.34rem/1.15 var(--display);letter-spacing:-.012em;outline:none;overflow-wrap:anywhere}
#modal .m-sub{color:var(--m-ink-2);font-size:.9rem;margin-top:.15rem;line-height:1.35}
#modal .m-close{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--m-line);background:var(--m-card);display:grid;place-items:center;cursor:pointer;color:var(--m-ink-2);flex:none;padding:0;transition:background .15s,color .15s,transform .15s}
#modal .m-close:hover{background:var(--m-card-hover);color:var(--m-ink)}#modal .m-close:active{transform:scale(.94)}
#modal .m-close .ic{width:1.05rem;height:1.05rem}
#modal .m-body{padding:.3rem 1.35rem 1.4rem;overflow-y:auto;display:grid;gap:1rem;align-content:start;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--m-line-2) transparent}
#modal .m-foot{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;align-items:center;padding:.85rem 1.35rem max(.85rem,env(safe-area-inset-bottom));border-top:1px solid var(--m-line)}
#modal .m-foot .grow{flex:1}
/* Phones: a sheet from the bottom, with its handle. */
@media (max-width:560px){
  #modal{width:100vw;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:92dvh;border-bottom:0}
  #modal[open]{animation:m-up .3s cubic-bezier(.2,.8,.2,1)}@keyframes m-up{from{transform:translateY(48px);opacity:.3}}
  #modal .m-head{padding-top:1.45rem}#modal .m-head::before{content:"";position:absolute;top:.5rem;left:50%;width:2.5rem;height:.3rem;margin-left:-1.25rem;border-radius:3px;background:var(--m-line-2)}
  #modal .m-body{padding:.2rem 1.05rem max(1.3rem,env(safe-area-inset-bottom))}
}
/* Solid when see-through is off or the device asks for less transparency or more contrast. */
:root[data-glass="solid"] #modal,:root[data-contrast="high"] #modal{background:var(--m-bg-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-contrast="high"] #modal{border:2px solid var(--m-ink)}
@media (prefers-reduced-transparency:reduce){#modal{background:var(--m-bg-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media (prefers-contrast:more){#modal{background:var(--m-bg-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:2px solid var(--m-ink)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#modal{background:var(--m-bg-solid)}}

/* ---------- the shared parts, inside a menu or the welcome ---------- */
:is(#modal,#onboard) :focus-visible{outline:2px solid var(--m-accent);outline-offset:2px;border-radius:10px}
:root[data-contrast="high"] :is(#modal,#onboard) :focus-visible{outline:3px solid var(--focus)}
:is(#modal,#onboard) h3{font:800 1.02rem/1.25 var(--display);letter-spacing:-.005em}
:is(#modal,#onboard) fieldset legend,:is(#modal,#onboard) .field>label,:is(#modal,#onboard) .field>span{font-weight:700;font-size:.92rem}
:is(#modal,#onboard) .small.muted,:is(#modal,#onboard) .muted{color:var(--m-ink-2)}
:is(#modal,#onboard) a{color:var(--m-accent);font-weight:700;text-underline-offset:2px}
:is(#modal,#onboard) .btn{border:1px solid var(--m-line-2);background:var(--m-btn);color:var(--m-ink);min-height:2.65rem;padding:.45em 1.1em;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
:is(#modal,#onboard) .btn:hover{background:var(--m-btn-hover);border-color:var(--m-line-2)}:is(#modal,#onboard) .btn:active{transform:scale(.975)}
:is(#modal,#onboard) .btn.primary{background:linear-gradient(135deg,var(--m-accent),var(--m-accent-2));border-color:transparent;color:var(--m-on-accent);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--m-accent) 80%,transparent)}
:is(#modal,#onboard) .btn.primary:hover{filter:brightness(1.06)}
:is(#modal,#onboard) .btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 8%,transparent)}
:is(#modal,#onboard) .btn.ghost{background:transparent;border-color:transparent}:is(#modal,#onboard) .btn.ghost:hover{background:var(--m-card)}
:is(#modal,#onboard) .btn.small{min-height:2.2rem;padding:.3em .9em;font-size:.88rem}
:is(#modal,#onboard) .btn[disabled]{opacity:.45;filter:saturate(.4)}
:is(#modal,#onboard) .icon-btn{border:1px solid var(--m-line-2);background:var(--m-btn)}
:is(#modal,#onboard) .chip{border-radius:999px;border:1px solid var(--m-line-2);background:var(--m-btn);min-height:2.3rem;padding:.25em .9em;font-size:.88rem;transition:background .15s,border-color .15s}
:is(#modal,#onboard) .chip:hover{background:var(--m-btn-hover)}
:is(#modal,#onboard) .chip:has(input:checked),:is(#modal,#onboard) .chip[aria-pressed="true"]{background:var(--m-accent-soft);border-color:color-mix(in srgb,var(--m-accent) 60%,transparent)}
:is(#modal,#onboard) .vibes .chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--m-accent),var(--m-accent-2));border-color:transparent;color:var(--m-on-accent)}
:is(#modal,#onboard) .chip:has(input:checked)::before{content:"✓";font-weight:800;color:var(--m-accent);margin-right:.05em}
:is(#modal,#onboard) .chip:has(input:focus-visible){outline:2px solid var(--m-accent);outline-offset:2px}
:is(#modal,#onboard) .input{background:var(--m-input);border:1px solid var(--m-line-2);border-radius:13px;min-height:2.8rem;padding:.55em .85em;color:var(--m-ink);transition:border-color .15s,box-shadow .15s}
:is(#modal,#onboard) .input::placeholder{color:var(--m-ink-3)}
:is(#modal,#onboard) .input:focus{border-color:var(--m-accent);box-shadow:0 0 0 4px var(--m-accent-soft);outline:none}
:is(#modal,#onboard) select.input{appearance:none;-webkit-appearance:none;padding-right:2.5rem;background-image:var(--m-chev);background-repeat:no-repeat;background-position:right .85rem center;background-size:1rem;cursor:pointer}
:is(#modal,#onboard) textarea.input{line-height:1.45;resize:vertical}
:is(#modal,#onboard) .card{background:var(--m-card);border:1px solid var(--m-line);border-radius:18px;padding:.9rem 1rem}
:is(#modal,#onboard) .card.soft{background:var(--m-card-2)}
:is(#modal,#onboard) .tag{background:var(--m-card);border-color:var(--m-line-2)}
/* Switches: a track that fills with the accent, a thumb that slides. */
:is(#modal,#onboard) .switch input{width:2.95rem;height:1.8rem;border-radius:1rem;background:var(--m-track);transition:background .2s}
:is(#modal,#onboard) .switch input::after{top:.2rem;left:.2rem;width:1.4rem;height:1.4rem;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.06);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
:is(#modal,#onboard) .switch input:checked{background:linear-gradient(135deg,var(--m-accent),var(--m-accent-2))}
:is(#modal,#onboard) .switch input:checked::after{transform:translateX(1.15rem)}
:is(#modal,#onboard) .switch input:focus-visible{outline:2px solid var(--m-accent);outline-offset:3px}
/* Sliders: the part already slid filled with the accent (--p, set as it moves). */
:is(#modal,#onboard) input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1.8rem;background:transparent;--p:50%;cursor:pointer}
:is(#modal,#onboard) input[type=range]::-webkit-slider-runnable-track{height:.42rem;border-radius:.21rem;background:linear-gradient(90deg,var(--m-accent) 0 var(--p),var(--m-track) var(--p) 100%)}
:is(#modal,#onboard) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.08);margin-top:-.49rem}
:is(#modal,#onboard) input[type=range]::-moz-range-track{height:.42rem;border-radius:.21rem;background:var(--m-track)}
:is(#modal,#onboard) input[type=range]::-moz-range-progress{height:.42rem;border-radius:.21rem;background:var(--m-accent)}
:is(#modal,#onboard) input[type=range]::-moz-range-thumb{width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35)}
:is(#modal,#onboard) input[type=range]:focus-visible{outline:none}:is(#modal,#onboard) input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--m-accent-soft),0 0 0 2px var(--m-accent)}
/* Keycaps. */
:is(#modal,#onboard) :is(.kbd,kbd){display:inline-grid;place-items:center;min-width:2.05em;height:2.05em;padding:0 .5em;border-radius:8px;font:700 .8rem/1 var(--font);color:var(--m-ink);background:linear-gradient(180deg,var(--m-key-top),var(--m-key-bot));border:1px solid var(--m-line-2);box-shadow:0 2px 0 var(--m-key-edge),0 4px 8px -4px rgba(0,0,0,.3);white-space:nowrap}

/* ---------- grouped rows (settings and lists of things to change) ---------- */
.m-sec{display:grid;gap:.5rem}
.m-group-h{font:800 .72rem/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--m-ink-3);padding:0 .3rem}
.m-group{display:grid;border-radius:18px;background:var(--m-card);border:1px solid var(--m-line);overflow:hidden}
.m-group>*+*{border-top:1px solid var(--m-line)}
.m-row{display:flex;align-items:center;gap:.9rem;padding:.75rem .95rem;min-height:3.3rem}
.m-row.col{display:grid;gap:.55rem;align-items:stretch}
.m-row .m-l{flex:1;min-width:0;display:grid;gap:.12rem}
.m-row .m-t{font-weight:700;display:flex;align-items:center;gap:.5rem;justify-content:space-between}
.m-row .m-t output,.m-row .m-t .val{font-weight:700;font-size:.85rem;color:var(--m-ink-2);font-variant-numeric:tabular-nums}
.m-row .m-d{font-size:.84rem;color:var(--m-ink-2);line-height:1.38;font-weight:400}
.m-row.switch{cursor:pointer;justify-content:space-between}.m-row.switch:hover{background:var(--m-card-2)}
.m-row .m-emo{width:2.1rem;height:2.1rem;border-radius:10px;display:grid;place-items:center;flex:none;font-size:1.05rem;background:var(--m-accent-soft)}
.m-note{font-size:.84rem;color:var(--m-ink-2);padding:0 .3rem}
/* A slider between two ends (A, A; quiet, loud). */
.m-range{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center}.m-range>span{color:var(--m-ink-2);font-weight:800}
/* Segmented choices: one of a few, the chosen one lifted. */
.seg{display:flex;gap:.2rem;padding:.22rem;border-radius:14px;background:var(--m-seg);border:1px solid var(--m-line)}
.seg label{flex:1 1 0;position:relative;min-width:0}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.seg span{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.35rem;padding:.3rem .45rem;border-radius:10px;font-weight:700;font-size:.86rem;color:var(--m-ink-2);text-align:center;line-height:1.15;transition:background .18s,color .18s,box-shadow .18s}
.seg span .ic{width:1rem;height:1rem;flex:none}.seg span i{font-style:normal}.seg span small{font-size:.74rem;opacity:.7;font-weight:700}
.seg label:hover span{color:var(--m-ink)}
.seg input:checked+span{background:var(--m-seg-on);color:var(--m-ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -3px rgba(16,20,60,.22)}
.seg input:focus-visible+span{outline:2px solid var(--m-accent);outline-offset:1px}
@media (max-width:420px){.seg span{font-size:.8rem;padding:.3rem .3rem}}

/* ---------- help: shortcuts in groups, with a filter ---------- */
.k-find{position:relative}.k-find .ic{position:absolute;left:.85rem;top:50%;width:1.05rem;height:1.05rem;margin-top:-.525rem;color:var(--m-ink-3)}.k-find .input{padding-left:2.5rem}
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.85rem;align-items:start}
.k-row{display:grid;grid-template-columns:7.6rem 1fr;gap:.8rem;align-items:center;padding:.55rem .85rem;min-height:2.9rem}
.k-row .k-keys{display:flex;flex-wrap:nowrap;gap:.22rem;align-items:center;color:var(--m-ink-3);font-weight:800;font-size:.8rem}
.k-row .k-d{font-size:.9rem;line-height:1.35}
.k-row[hidden],.m-sec[hidden]{display:none!important}
.k-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem}
.k-tip{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;padding:.75rem .85rem;border-radius:16px;background:var(--m-card);border:1px solid var(--m-line);font-size:.88rem;line-height:1.38}.k-tip b{display:block;font-size:.92rem}
.k-tip .m-emo{width:2.1rem;height:2.1rem;border-radius:10px;display:grid;place-items:center;font-size:1.05rem;background:var(--m-accent-soft)}

/* ---------- you: the card at the top, the numbers, the passport ---------- */
.me-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:22px;border:1px solid var(--m-line);
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--m-accent) 22%,transparent),transparent 60%),radial-gradient(120% 140% at 100% 100%,color-mix(in srgb,#FF5C93 16%,transparent),transparent 55%),var(--m-card)}
.me-av{width:5.6rem;height:5.6rem;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#7B5CFF,#22D3EE,#34D399,#FFB347,#FF5C93,#7B5CFF);flex:none}
.me-av img{width:100%;height:100%;border-radius:50%;background:var(--m-bg-solid);display:block;object-fit:cover}
.me-name{font:800 1.5rem/1.1 var(--display);letter-spacing:-.015em;overflow-wrap:anywhere}
.me-meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.m-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;background:var(--m-card);border:1px solid var(--m-line);font-size:.78rem;font-weight:700;color:var(--m-ink-2)}
.me-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.me-stat{padding:.7rem .8rem;border-radius:16px;background:var(--m-card);border:1px solid var(--m-line);display:grid;gap:.15rem}
.me-stat b{font:800 1.45rem/1 var(--display);font-variant-numeric:tabular-nums}.me-stat span{font-size:.78rem;color:var(--m-ink-2);font-weight:700}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.4rem,1fr));gap:.65rem}
.stamp{--c:#4B3FD6;display:grid;gap:.2rem;justify-items:center;align-content:center;text-align:center;min-height:6.4rem;padding:.7rem .5rem;border-radius:16px;color:var(--m-ink);
  border:2px dashed color-mix(in srgb,var(--c) 65%,transparent);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%),var(--m-card);transform:rotate(var(--r,0deg));transition:transform .2s}
.stamp:hover{transform:rotate(0deg) scale(1.03)}
.stamp .st-ic{font-size:1.55rem;line-height:1}.stamp b{font:800 .92rem/1.15 var(--display);overflow-wrap:anywhere}.stamp small{font-size:.68rem;color:var(--m-ink-2);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.stamp.new{border-style:solid;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.me-empty{display:grid;justify-items:center;gap:.4rem;text-align:center;padding:1.1rem;border-radius:18px;border:1.5px dashed var(--m-line-2);color:var(--m-ink-2)}
/* The sections other parts of the app fill in (your properties, pins, home). */
#modal :is(#meProps,#mePins,#meHome){padding:1rem;border-radius:20px;background:var(--m-card-2);border:1px solid var(--m-line)}
#modal :is(#meProps,#mePins,#meHome) .card{background:var(--m-card)}
#modal #mePins .card.row{border-radius:16px}

/* ---------- a person ---------- */
.p-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.5rem}
.p-act{display:grid;justify-items:center;gap:.3rem;padding:.7rem .4rem;border-radius:16px;border:1px solid var(--m-line);background:var(--m-card);color:var(--m-ink);font-weight:700;font-size:.84rem;cursor:pointer;text-align:center;transition:background .15s,transform .12s,border-color .15s}
.p-act:hover{background:var(--m-card-hover);border-color:var(--m-line-2)}.p-act:active{transform:scale(.97)}.p-act span{font-size:1.45rem;line-height:1}
.p-act.primary{background:linear-gradient(135deg,var(--m-accent),var(--m-accent-2));color:var(--m-on-accent);border-color:transparent}
.p-safety{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:.2rem}

/* ---------- hosting a corner: a live preview, theme tiles, colours ---------- */
.cf-prev{--c:#E4572E;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;padding:1rem 1.1rem;border-radius:22px;color:#fff;
  background:radial-gradient(130% 160% at 0% 0%,color-mix(in srgb,var(--c) 95%,#fff 5%),color-mix(in srgb,var(--c) 70%,#000 30%));box-shadow:0 14px 36px -16px var(--c)}
.cf-prev::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:140%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.cf-prev .cf-emo{width:3.4rem;height:3.4rem;border-radius:18px;display:grid;place-items:center;font-size:1.9rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.cf-prev b{font:800 1.25rem/1.15 var(--display);display:block;overflow-wrap:anywhere}.cf-prev small{opacity:.88;font-weight:700}
#modal .theme-grid{grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr));gap:.55rem}
#modal .theme-opt span{--c:#4B3FD6;display:grid;gap:.4rem;align-content:space-between;min-height:5.4rem;padding:.75rem .8rem;border-radius:18px;border:1.5px solid var(--m-line);font-weight:700;font-size:.9rem;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%),var(--m-card);transition:transform .15s,border-color .15s,box-shadow .15s}
#modal .theme-opt span b{font-size:1.6rem;line-height:1}
#modal .theme-opt:hover span{transform:translateY(-1px)}
#modal .theme-opt input:checked+span{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent),0 10px 24px -14px var(--c)}
#modal .theme-opt input:focus-visible+span{outline:2px solid var(--m-accent);outline-offset:2px}
.cols{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.col-sw{width:2.35rem;height:2.35rem;border-radius:50%;border:3px solid var(--m-bg-solid);box-shadow:0 0 0 1.5px var(--m-line-2);cursor:pointer;padding:0;transition:transform .12s,box-shadow .15s}
.col-sw:hover{transform:scale(1.08)}.col-sw[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--m-accent)}
.col-any{position:relative;width:2.35rem;height:2.35rem;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#FF4D4D,#FFC93D,#5EE39C,#3DD6FF,#6B7BFF,#E05CFF,#FF4D4D);box-shadow:0 0 0 1.5px var(--m-line-2);cursor:pointer;transition:transform .12s}
.col-any:hover{transform:scale(1.08)}.col-any span{font:800 1.15rem/1 var(--font);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.col-any input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}.col-any:has(input:focus-visible){outline:2px solid var(--m-accent);outline-offset:2px}
#modal .linkrow .input{min-height:2.55rem}