/* ===========================================================================
   Componenti copiati da Guild Keeper.

   Le dichiarazioni qui sotto sono quelle del suo `style.css`, nell'ordine in
   cui stanno la'. L'ordine e' tutto: il suo pulsante NON e' quello del primo
   blocco. Piu' avanti nel foglio arrivano regole a selettore multiplo che gli
   cambiano corpo (13px), peso (600) e tolgono lo spostamento al passaggio del
   mouse. Le prime due estrazioni le avevano perse perche' cercavano il
   selettore esatto: qui la classe viene cercata come token, ovunque compaia
   nell'elenco dei selettori.

   Le variabili arrivano da `tokens.css`, copiato identico.
   =========================================================================== */

.metric {
  border: 1px solid var(--line-soft);
  background: var(--card2);
  padding: 13px 14px
}

.metric .ml {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--muted)
}

.metric .mv {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold2);
  margin: 4px 0 8px;
  font-variant-numeric: tabular-nums
}

.metric {
  position: relative;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow .34s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, padding .34s cubic-bezier(.4, 0, .2, 1), border-color .15s
}

.metric .mv {
  transition: font-size .3s cubic-bezier(.4, 0, .2, 1)
}

.metric .spark {
  transition: height .3s cubic-bezier(.4, 0, .2, 1)
}

.metric:hover {
  border-color: var(--line-gold-soft)
}

.metrics.zoom .metric:not(.open),
.m-metrics.zoom .metric:not(.open) {
  flex-grow: 0;
  flex-basis: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  pointer-events: none
}

.metric.open {
  flex-grow: 1;
  cursor: default
}

.metric.open .mv {
  font-size: 34px
}

.phone .metric.open .mv {
  font-size: 26px
}

.metric.open .spark {
  height: 38px
}

.metric.open .mdetail {
  max-height: 260px;
  opacity: 1;
  margin-top: 14px;
  padding-top: 13px;
  border-top-color: var(--line-soft)
}

.pcard.hide,
.grid.hide,
.m-grid.hide,
.m-sect.hide,
.banner.hide,
.mainsec.hide {
  display: none
}

.pcard {
  border: 4px double var(--line);
  background: var(--card);
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 150px
}

.pcard.wide {
  grid-column: span 2
}

.pcard.featured {
  border-color: var(--gold);
  background: radial-gradient(120% 100% at 100% 0, var(--fill-gold-2) 0, var(--card) 55%)
}

.tile {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.tile svg {
  width: 21px;
  height: 21px
}

.pcard h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--gold2);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px
}

.pcard p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  flex: 1
}

.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 13px;
  cursor: pointer;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line-gold-soft);
  color: var(--gold);
  box-shadow: 3px 3px 0 rgba(var(--gold-rgb), 0.26);
  transition: transform .08s, box-shadow .08s
}

.btn:hover {
  color: var(--gold2);
  border-color: var(--gold);
  box-shadow: 3px 3px 0 rgba(var(--gold2-rgb), 0.45)
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0)
}

.btn svg {
  width: 13px;
  height: 13px
}

.phone .metric {
  padding: 10px 11px
}

.phone .metric .mv {
  font-size: 18px;
  margin: 3px 0 6px
}

.phone .pcard.wide {
  grid-column: auto
}

.field {
  width: 100%;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 11px
}

.field::placeholder {
  color: var(--muted)
}

.field:focus {
  outline: none;
  border-color: var(--gold)
}

.field.foc {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.14)
}

textarea.field {
  resize: vertical;
  min-height: 62px;
  line-height: 1.45
}

.btn.red {
  color: var(--danger);
  border-color: rgba(var(--danger-rgb), 0.26);
  box-shadow: 3px 3px 0 rgba(var(--danger-rgb), 0.26)
}

.btn.red:hover {
  color: var(--danger);
  border-color: var(--danger-dim);
  box-shadow: 3px 3px 0 rgba(var(--danger-rgb), 0.45)
}

.dd.field {
  border: none;
  background: transparent;
  padding: 0
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid var(--ok);
  background: var(--card);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-2)
}

.toast .ti {
  display: flex;
  color: var(--ok);
  flex: none
}

.toast .ti svg {
  width: 16px;
  height: 16px
}

.cfg-title .tile {
  width: 38px;
  height: 38px
}

.btn.gold {
  background: linear-gradient(135deg, var(--fill-gold-3), var(--fill-gold-2));
  border-color: var(--gold);
  color: var(--gold2);
  box-shadow: 3px 3px 0 rgba(var(--gold2-rgb), 0.26)
}

select.field {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none
}

select.field {
  padding-right: 28px;
  /* ⚠️  Il colore sta dentro un data URI, dove `var(--ink)` non entra: va
         scritto due volte, una per tema. Con il solo oro di Guild Keeper, sul
         chiaro la freccia faceva 1,72:1 contro l'incavo — cioè non si vedeva.
         Con l'inchiostro del tema: 14,9:1 sullo scuro e 9,1:1 sul chiaro. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23e8dcc8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px
}

[data-theme="light"] select.field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233a3644' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

select.field:disabled {
  opacity: .4;
  cursor: default
}

.crit .field {
  min-width: 0
}

.crit-body>.field {
  min-width: 0
}

.nitem .tile {
  width: 30px;
  height: 30px;
  flex: none
}

.nitem .tile svg {
  width: 16px;
  height: 16px
}

.kpi {
  background: var(--card2);
  padding: 13px 14px
}

.kpi .kl {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--muted)
}

.kpi .kv {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold2);
  margin: 5px 0 6px;
  font-variant-numeric: tabular-nums
}

.kpi .kd {
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums
}

.kpi .kd.good {
  color: var(--ok)
}

.kpi .kd.bad {
  color: var(--danger)
}

.brklbl .tile {
  width: 24px;
  height: 24px;
  flex: none
}

.brklbl .tile svg {
  width: 14px;
  height: 14px
}

.field.err {
  border-color: var(--danger-dim)
}

.pod {
  position: relative;
  background: var(--card2);
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center
}

.pod .prank {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--serif);
  font-size: 11px;
  color: var(--muted)
}

.pod .pmedal {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1
}

.pod .pav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line)
}

.pod .pnm {
  font-family: var(--serif);
  color: var(--gold2);
  font-size: 13px;
  overflow-wrap: anywhere
}

.pod .plv {
  font-size: 11.5px;
  color: var(--muted)
}

.pod .pxp {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 13px;
  font-variant-numeric: tabular-nums
}

.pod.first {
  border-color: var(--gold);
  background: radial-gradient(120% 100% at 50% 0, var(--fill-gold-2), var(--card2) 62%);
  padding-top: 26px
}

.pod.first .pmedal {
  color: var(--gold2)
}

.pod.second .pmedal {
  color: #c9cdd4
}

.pod.third .pmedal {
  color: #c08457
}

.pod.first .pav {
  width: 56px;
  height: 56px
}

.auto-row>.field {
  flex: 1;
  min-width: 120px
}

.fieldvar>.field {
  flex: 1;
  min-width: 0
}

.act-hd>.field {
  flex: 1;
  min-width: 0
}

.fb-fieldvar .field {
  flex: 1
}

.fb-node,
.fb-card,
.kpi {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 46%)
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 24px;
  background: #0a0a14;
  margin: 0 -24px 22px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}

h1,
h2,
h3,
h4,
.brand b,
.switcher,
.m-switch,
.usr-nm,
.srv-nm,
.srv-ico,
.srv-wrap>h2,
.pcard h3,
.module-card h3,
.cfg-title h2,
.login-card h2,
.login-btn,
.metric .mv,
.kpi .kv,
.feat-stat b,
.pod .pmedal,
.pod .pnm,
.pod .pxp,
.cmd-name,
.cmd-slash,
.modal h4,
.oved-hd h4,
.ov-row .ov-val,
.budget .bamt,
.propill,
.savebar .sv-l,
.brkval,
.p-main b,
.pc-nm,
.frow .fl b,
.mig-deep-hd b,
.switch,
.fb-name,
.fb-ntitle,
.fb-att-tx,
.fb-stepbtn,
.fb-card .fb-ctxt,
.fb-reccard .fb-rectx b {
  font-family: var(--display);
}

.btn,
.um-btn,
.cfg-back,
.errbox .eact,
.crit-add,
.ov-add,
.varbtn,
.tagx,
.srv-invite,
.fb-abtn,
.notif-clear {
  font-size: var(--fs-ui);
  letter-spacing: var(--tr-caps);
}

.seclabel,
.metric .ml,
.pc-off,
.badge,
.mig-conf,
.mig-done,
.feat-stat span,
.tag,
.m-lbl,
.m-tab,
.gtile .gl,
.tbl th,
.pill-ok,
.pill-no,
.ov-base .ov-tag,
.rule-when .wl,
.rule-then .tl,
.andor,
.sim-f label,
.simv,
.prov,
.andor-seg .ao,
.oved-prev .pl,
.nbadge,
.kpi .kl,
.growth text,
.hours text,
.audtbl th,
.apill,
.provrow .st,
.srv-badge,
.oved-lbl .opt-tag,
.cmd-avail,
.vcat,
.save-pill,
.p-tag,
.p-badge,
.fb-savestate,
.fb-pill,
.fb-optnote,
.fb-join,
.fb-eyebrow,
.fb-chg,
.fb-flabel,
.aic-jhead,
.aic-jt small,
.fb-substepbtn,
.fb-gtitle,
.fb-card .fb-startag,
.fb-preview .pl,
.field label,
.ss-select-arrow,
.cmd-lvl {
  font-size: var(--fs-micro);
}

.pc-sub,
.ov-base .ov-note,
.chartbox .csub,
.ctip,
.budget .bfoot,
.pod .plv,
.hstat,
.pool-legal,
.fb-aicheck,
.faq-qa small,
.aic-hint,
.fb-reccard .fb-rectx small,
.mig-det summary {
  font-size: var(--fs-ui);
}

.propill,
.mdrow,
.mig-res,
.banner,
.tabpane,
.tbl,
.modal p,
.toast,
.nores,
.savebar .sv-l,
.cfg-toast,
.ov-intro,
.ov-vals,
.ov-row .k,
.nitem .ntxt,
.usr-i,
.audtbl,
.aud-none,
.brklbl,
.brkval,
.errbox,
.srv-wrap>p,
.pool-count,
.faq-empty,
.aic-empty,
.aic-ct b,
.fb-stepbtn,
.fb-card .fb-ctxt,
.fb-empty,
.cmd-desc {
  font-size: var(--fs-body);
}

.phone .metric .mv,
.oved-x,
.srv-ico,
.fb-add .pl {
  font-size: var(--fs-lg);
}

.budget .bamt b,
.login-card h2,
.pod .pmedal,
.fb-addtrigger .pl {
  font-size: var(--fs-xl);
}

.metric.open .mv {
  font-size: var(--fs-display);
}

.board>h1,
.board>.sub strong,
.mdrow b,
.pcard h3,
.pc-nm,
.btn,
.mig-tx b,
.cfg-title h2,
.ov-intro b,
.chip-cond b,
.rule-then .chg b,
.oved-hd h4,
.nbadge,
.nitem .ntxt b,
.chartbox h3,
.adetail b,
.login-card h2,
.login-btn,
.srv-wrap>h2,
.srv-nm,
.varctx b,
.pool-legal b,
.fb-pill,
.fb-subttl,
.fb-reccard .fb-rectx b,
.module-card h3,
.um-btn.sm.feature-back,
.section-title,
.um-btn,
.cmd-name {
  font-weight: var(--w-strong);
}

.pcard {
  padding: var(--sp-5);
  gap: var(--sp-3);
}

.pcard .rowend {
  gap: var(--sp-3);
}

.pcard {
  border-color: var(--line-soft);
}

.pcard {
  border-width: 1px;
  border-style: solid;
}

#featGrid .pcard .btn {
  border-color: transparent;
  background: transparent;
}

#featGrid .pcard .btn:hover,
#featGrid .pcard .btn:focus-visible {
  border-color: var(--line-gold-soft);
  background: rgba(0, 0, 0, .5);
}

.tile.tg {
  background: var(--fill-gold-1);
}

.tile.tl {
  background: var(--fill-ok-1);
}

.tile.ts {
  background: var(--fill-cat-blue-1);
}

.tile.tc {
  background: var(--fill-cat-copper-1);
}

.tile.tv {
  background: var(--fill-cat-violet-1);
}

.cap,
.switcher .av,
.si .ct,
.chip,
.dname,
.feat-delta,
.m-switch .av,
.tab,
.rng .val,
.cfg-sec>h3,
.sim-h,
.sim-hint,
.oved-lbl,
.notif-hd .nh,
.nitem .ntime,
.usr-rl,
.kpi .kd,
.h-plab,
.budget .bt,
.field-err,
.login-foot,
.pod .prank,
.mainsec,
.varitem small,
.varctx,
.act-no,
.p-main small,
.fb-node.fb-incompat::before,
.fb-att-tx small,
.fb-varbtn,
.fb-flabel.ai-hint,
.faq-hint,
.aic-ct small,
.fb-collapse,
.fb-rectoggle,
.fb-chip,
.fb-mv,
.fb-preview .fb-pv b,
.section-title,
.um-toggle .tg-label,
.cmd-catlabel,
.cmd-sub {
  font-size: var(--fs-micro);
}

.pcard p,
.mig-skip,
.banner a,
.tags input,
.pag span,
.cfg-title p,
.frow .fl small,
.rule-no,
.chip-cond,
.rule-then .chg,
.rule-warn,
.sim-active-row,
.crit-body .crit-expr,
.notif-ft a,
.chartbox h3,
.provrow,
.pod .pnm,
.srv-sub,
.varitem b,
.p-x,
.pool-note,
.fb-name .ed,
.fb-hint,
.fb-crit-row .fb-expr,
.aic-note,
.aic-jt b,
.fb-add,
.fb-subttl,
.module-card .m-desc,
.mig-det {
  font-size: var(--fs-ui);
}

.board>.sub,
.switcher,
.si,
.search span,
.search input,
.pc-nm,
.mig-intro,
.mig-tx b,
.mig-deep-hd b,
.m-switch,
.field,
.dd-btn,
.dd-opt,
.opt,
.modal h4,
.frow .fl b,
.then-row .thk,
.oved-prev .pv,
.usr-nm,
.login-card p,
.login-btn,
.pod .pnm,
.pod .pxp,
.act-del,
.pool-row .drag,
.p-main b,
.fb-toast,
.fb-selfield,
.faq-qa b,
.faq-add input,
.faq-add textarea,
.aic-msg.user,
.aic-reply,
.aic-ci,
.aic-input textarea,
.fb-subdel,
.fb-reccard .fb-rectx b,
.fb-chip button,
.fb-pop-item,
.fb-preview .fb-pv,
input,
textarea,
.ss-select-trigger,
.ss-select-option,
.switch {
  font-size: var(--fs-body);
}

.brand b,
.pcard h3,
.tagx b,
.rule-act .ic,
.rule-act .drag,
.ov-row .ov-val,
.oved-hd h4,
.budget .bamt,
.srv-nm,
.fb-att-tx,
.fb-del,
.fb-gtitle .fb-gx {
  font-size: var(--fs-sm);
}

.metric .mv,
.phone .metric.open .mv,
.kpi .kv {
  font-size: var(--fs-display);
}

#featGrid .pcard p,
.pcard>p {
  font-size: var(--fs-body);
}

.plugin-card:hover,
.fb-reccard:hover,
.fb-card:hover,
.btn:hover,
.um-btn:hover,
.login-btn:hover,
.pcard:hover {
  transform: none;
}

.kpi,
.metric {
  background-image: none;
}

.pcard.featured {
  background: var(--card);
}

.btn,
.um-btn,
.login-btn,
.switcher,
.icobtn {
  transition-property: color, background-color, border-color;
  transition-duration: .12s;
}

#featGrid .pcard .btn {
  background: var(--fill-gold-2);
  border-color: transparent;
  color: var(--gold2);
}

#featGrid .pcard .btn:hover,
#featGrid .pcard .btn:focus-visible {
  background: var(--fill-gold-3);
  border-color: transparent;
  color: var(--gold2);
}

#featGrid .pcard.featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

#featGrid .pcard.featured .phead {
  flex: 0 0 auto;
  margin: 0;
}

#featGrid .pcard.featured>p {
  flex: 1 1 320px;
  margin: 0;
}

#featGrid .pcard.featured .feat-stat {
  flex: 0 0 auto;
  margin: 0;
}

#featGrid .pcard.featured .rowend {
  flex: 0 0 auto;
  margin: 0;
  gap: var(--sp-4);
  width: auto;
}

.pod.first {
  background: var(--card2);
}

textarea,
.field textarea {
  background: var(--well-2);
}

.field,
input[type="text"],
input[type="number"],
select {
  background: var(--well-1);
}

#featGrid .pcard .tile {
  background: transparent;
}

.tile.tg {
  color: var(--gold);
}

.tile.tl {
  color: var(--tone-green);
}

.tile.ts {
  color: #6f9fd8;
}

.tile.tc {
  color: #d1794f;
}

.tile.tv {
  color: #9d86e0;
}

#featGrid .pcard .btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold2);
}

#featGrid .pcard .btn:hover,
#featGrid .pcard .btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #14140f;
}

.tgl.on .th,
.opt.on .rd::after,
.rng .kn,
.btn.gold,
.sim,
.budget,
.bmeter .bfill,
.brkbar i,
.clabar i,
.fb-scroll,
.fb-pill.when,
.fb-pill.iff,
.fb-pill.dothis,
.fb-dot.branch,
.fb-reccard,
.fb-node,
.fb-card,
.kpi,
input[type="checkbox"]::before,
.notif::after,
.usrmenu::after,
.dtrack,
.dknob,
.skel::after {
  background-image: none;
}

.btn.gold {
  background-color: var(--gold);
  color: #14140f;
}

.module-head {
  background: var(--card2);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
}

.field>label {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
}

.field input,
.field textarea,
.field .ss-select-trigger,
.field select {
  width: 100%;
  padding: 9px 11px;
  background: var(--well-1);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: var(--fs-body);
}

.field input:focus,
.field textarea:focus,
.field .ss-select-trigger:hover {
  border-color: var(--line-gold-soft);
}

.module-card .field {
  margin-bottom: var(--sp-4);
}

.module-card .field-inline .field {
  margin-bottom: 0;
}

.field>label {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-ui);
  color: var(--text-2);
}

.toast {
  border-left: none;
  border: 1px solid var(--line-gold);
  background: var(--card2);
  color: var(--ink);
  font-size: var(--fs-ui);
  padding: 11px var(--sp-4);
}

.toast .ti {
  color: var(--ok);
}

.toast.err {
  border-color: var(--danger);
}

.toast.err .ti {
  color: var(--danger);
}

/* Il campo colore restava largo 355px: `.field input {width:100%}

` batteva
   la regola sul tipo. Qui la specificità è pari e vince l'ultima. */
.field input[type="color"] {
  width: 46px;
  flex: 0 0 auto;
}

input.field,
textarea.field,
select.field {
  display: block;
  width: 100%;
  padding: 9px 11px;
  /* ⚠️  `background-color`, NON la scorciatoia `background`: quella azzera anche
         `background-image`, e trenta righe più su c'è la freccia dei `select`.
         Stesso selettore, stessa specificità, questa regola più avanti nel
         foglio: i cinque menu della finestra «Nuova News» si vedevano identici
         ai campi di testo, mentre le tendine del pannello profilo — che sono
         nostre — la freccia ce l'avevano. */
  background-color: var(--well-1);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-ui);
}

input.field:focus,
textarea.field:focus,
select.field:focus {
  outline: none;
  border-color: var(--gold);
}

input.field::placeholder,
textarea.field::placeholder {
  color: var(--muted);
}

.module-head {
  flex-wrap: nowrap;
  gap: var(--sp-3);
}

.module-head>div {
  min-width: 0;
  flex: 1 1 auto;
}

.pcard {
  min-height: 178px;
  background: var(--card);
  cursor: pointer;
  transition: background .12s, color .12s;
}

#featGrid .pcard .tile,
.pcard .tile {
  width: 52px;
  height: 52px;
  background: var(--surface-2);
  color: var(--gold);
  transition: color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pcard .tile svg {
  width: 26px;
  height: 26px;
}

.pcard h3 {
  font-family: var(--display);
  font-size: var(--fs-md);
  color: var(--ink);
  letter-spacing: .01em;
}

.pcard p {
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--muted);
}

.pcard:hover {
  background: var(--well-2);
}

.pcard:hover h3 {
  color: var(--gold2);
}

.pcard:hover p {
  color: var(--text-2);
}

#featGrid .pcard:hover .btn {
  background: var(--gold);
  color: #14140f;
}

.pcard.is-on {
  border-color: var(--gold) !important;
}

.pcard .rowend {
  justify-content: flex-end;
}

.row,
.set-row,
.set-none,
.notif-hd,
.notif-page .nitem,
.catsec-hd,
.cfg-group .section-title,
.sim-out,
.usr-hd,
.set-hd,
.srv-head,
.module-head,
.rule-warn,
.notif-ft,
details[open]>summary {
  border-color: var(--line-soft) !important;
}

#featGrid .pcard .btn {
  border-color: var(--gold) !important;
}

#featGrid .pcard:hover .btn,
#featGrid .pcard .btn:hover {
  border-color: var(--gold) !important;
}

.module-head {
  background: transparent;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-4);
  gap: var(--sp-4);
}

.module-head .um-toggle {
  gap: var(--sp-3);
  flex: 0 0 auto;
}

.module-head .um-toggle .tg-track {
  width: 62px;
  height: 32px;
  background: var(--well-3);
}

.module-head .um-toggle .tg-thumb {
  width: 24px;
  height: 24px;
  top: 3px;
  left: 3px;
  background: var(--muted);
  transition: left .14s cubic-bezier(.4, 0, .2, 1), background .14s;
}

.module-head .um-toggle input:checked+.tg-track {
  background: var(--gold);
}

.module-head .um-toggle input:checked+.tg-track .tg-thumb {
  left: 35px;
  background: var(--bg);
}

.module-head .um-toggle .tg-label {
  font-family: var(--ui);
  font-size: var(--fs-ui);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--muted);
}

.module-head .um-toggle input:checked~.tg-label {
  color: var(--gold2);
}

.mv,
.ct,
.catsec-ct,
.nbadge,
.feat-stat b,
.ov-row .ov-val,
.rule-no,
.hstat b,
.brkval,
.metric .mv,
.sim-res b,
.m-stat b {
  font-family: var(--display) !important;
}

#featGrid .pcard .btn {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--gold) 14%, var(--well-2));
  color: var(--gold2);
}

#featGrid .pcard:hover .btn,
#featGrid .pcard .btn:hover,
#featGrid .pcard .btn:focus-visible {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--gold) 30%, var(--well-2));
  color: var(--gold2);
}

#featGrid .pcard .tile,
.pcard .tile {
  --tile-bg: var(--surface-2);
  --tile-glow: color-mix(in srgb, var(--gold) 42%, var(--surface-2));
  background: var(--tile-bg);
  color: var(--gold);
  /* Una sola durata e una sola curva per tutte e tre: il quadrato si
     restringe, il suo fondo si dissolve e l'alone compare esattamente
     insieme, quindi non si legge come tre cose che succedono in fila.
     `transform` e `box-shadow` vanno elencate a mano: il blocco «piatto»
     anima solo colore, sfondo, bordo e opacita', e senza questa riga il
     quadrato salterebbe di scatto alla misura ridotta. */
  transition: transform .18s cubic-bezier(.4, 0, .2, 1),
              background-color .18s cubic-bezier(.4, 0, .2, 1),
              box-shadow .18s cubic-bezier(.4, 0, .2, 1),
              color .18s cubic-bezier(.4, 0, .2, 1);
}

#featGrid .pcard:hover .tile,
.pcard:hover .tile {
  /* Il fondo se ne va del tutto e al suo posto si accende la macchia
     quadrata qui sotto, che essendo piena non lascia il buco al centro. */
  background: transparent;
  color: #fff;
  /* Piu' stretto di prima: a .94 il bordo restava in mezzo all'alone e si
     leggeva ancora come un riquadro. */
  transform: scale(.86);
}

#featGrid .pcard .tile,
.pcard .tile { position: relative; }

#featGrid .pcard .tile > svg,
.pcard .tile > svg {
  position: relative;
  z-index: 1;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

#featGrid .pcard:hover .tile > svg,
.pcard:hover .tile > svg { transform: scale(1.372); }

#featGrid .pcard .tile::before,
.pcard .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tile-glow);
  filter: blur(11px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s cubic-bezier(.4, 0, .2, 1),
              transform .18s cubic-bezier(.4, 0, .2, 1);
}

#featGrid .pcard:hover .tile::before,
.pcard:hover .tile::before {
  opacity: 1;
  transform: scale(1.163);
}

#modMetrics .metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-5) 0;
  background: var(--card2);
  overflow: hidden;
  /* Non si apre piu' al clic: la variazione che prima stava nascosta
     dentro l'espansione adesso e' sempre a schermo, quindi il clic non
     aveva piu' niente da rivelare. */
  cursor: default;
}

#modMetrics .metric[data-kpi="members"] .mspark-wrap { height: 0; margin-top: 0; }

#modMetrics .metric[data-kpi="members"] { padding-bottom: var(--sp-4); }

#myPluginsGrid .pcard.plugin-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

#myPluginsGrid .pcard.plugin-card > p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

#myPluginsGrid .pcard.plugin-card h3 {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: var(--w-strong);
}

#myPluginsGrid .pcard.plugin-card .pc-off { margin-left: auto; }

#myPluginsGrid .pcard.plugin-card.is-off .tile { color: var(--muted); }