/* ═══════════════════════════════════════════════════════════════════════
   Oracolo.ai — Direction B theme (design handoff 2026-08).
   Token sheet + componenti condivisi, dual theme via :root[data-theme].
   Dark e' il default (matcha la landing); light e' il toggle utente
   e il tema forzato negli export PDF/PPTX.
   Fonte: design_handoff_direction_b/README.md — valori "final intent".
   ═══════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="dark"] {
    --bg:            #06080F;
    --surface-nav:   #06080F;
    --panel:         rgba(255,255,255,.035);
    --panel-solid:   #0B0E17;
    --line:          rgba(255,255,255,.08);
    --line-strong:   rgba(255,255,255,.14);
    /* Contrast pass (handoff v5, turn 12): tutto il testo leggibile su dark
       alzato — mute .62→.78, low .42→.62, faint .32→.5. Floor: mai testo
       leggibile sotto il 50% di bianco; sotto solo elementi decorativi. */
    --text:          #FFFFFF;
    --text-mute:     rgba(255,255,255,.78);
    --text-low:      rgba(255,255,255,.62);
    --text-faint:    rgba(255,255,255,.5);

    --accent:        #4DE5E5;          /* cyan: actuals, azioni primarie, nav attiva */
    --accent-text:   #4DE5E5;
    --accent-dim:    rgba(77,229,229,.35);
    --accent-bg:     rgba(77,229,229,.08);
    --accent-bg-2:   rgba(77,229,229,.16);

    --predict:       #B86CFF;          /* purple: predizioni, versioni piano */
    --predict-text:  #B86CFF;
    --predict-dim:   rgba(184,108,255,.45);
    --predict-bg:    rgba(184,108,255,.08);
    --predict-band:  rgba(184,108,255,.14);

    --pos:           #5EE49A;
    --neg:           #FF7A6E;
    --neg-dim:       rgba(255,122,110,.35);
    --neg-bg:        rgba(255,122,110,.06);
    --warn:          #FFC24D;          /* budget, stati warning */

    --glow-accent:   0 0 0 1px rgba(77,229,229,.35), 0 0 18px rgba(77,229,229,.25);
    --glow-dot:      0 0 10px #4DE5E5;
    --glow-serif:    0 0 18px rgba(77,229,229,.55), 0 0 40px rgba(77,229,229,.32);
    --glow-serif-p:  0 0 14px rgba(184,108,255,.5);
    --panel-shadow:  none;
    --hover-row:     rgba(255,255,255,.03);
    --input-bg:      rgba(255,255,255,.04);
    --backdrop:
        radial-gradient(50% 30% at 80% 10%, rgba(184,108,255,.12), transparent 70%),
        radial-gradient(60% 40% at 12% 30%, rgba(77,229,229,.10), transparent 70%);
}

:root[data-theme="light"] {
    --bg:            #F7F8FA;
    --surface-nav:   #FFFFFF;
    --panel:         #FFFFFF;
    --panel-solid:   #FFFFFF;
    --line:          rgba(10,13,23,.08);
    --line-strong:   rgba(10,13,23,.14);
    --text:          #0A0D17;
    --text-mute:     rgba(10,13,23,.62);
    --text-low:      rgba(10,13,23,.42);
    --text-faint:    rgba(10,13,23,.32);

    --accent:        #0FB5B5;
    --accent-text:   #0B8A8A;
    --accent-dim:    rgba(15,181,181,.45);
    --accent-bg:     rgba(15,181,181,.06);
    --accent-bg-2:   rgba(15,181,181,.12);

    --predict:       #9D4FE8;
    --predict-text:  #7A3BC0;
    --predict-dim:   rgba(157,79,232,.45);
    --predict-bg:    rgba(157,79,232,.06);
    --predict-band:  rgba(157,79,232,.14);

    --pos:           #12A150;
    --neg:           #C2372B;
    --neg-dim:       rgba(217,72,58,.4);
    --neg-bg:        rgba(217,72,58,.05);
    --warn:          #B26A00;

    --glow-accent:   none;             /* light: flat, nessun glow */
    --glow-dot:      none;
    --glow-serif:    none;
    --glow-serif-p:  none;
    --panel-shadow:  0 1px 2px rgba(10,13,23,.04);
    --hover-row:     rgba(10,13,23,.02);
    --input-bg:      #FFFFFF;
    --backdrop:      none;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ob-app {
    background: var(--bg);
    color: var(--text);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
body.ob-app::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    pointer-events: none; background: var(--backdrop);
}
.ob-app a { color: inherit; text-decoration: none; }
.ob-app :focus { outline: none; }
.ob-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-app ::selection { background: var(--accent-bg-2); }

.mono {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}
.mono-label {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-low);
}
.mono-eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent-text);
}
.mono-eyebrow.predict { color: var(--predict-text); }
.serif-accent {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic; font-weight: 400;
    color: var(--accent); text-shadow: var(--glow-serif);
}
.serif-accent.predict { color: var(--predict); text-shadow: var(--glow-serif-p); }

.ob-h2 { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.ob-h2.md { font-size: 32px; }
.ob-h2.sm { font-size: 28px; }

/* ── Top nav ── */
.ob-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 36px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-nav);
    gap: 16px;
    flex-wrap: wrap; /* mobile: brand su riga 1, links a capo se serve */
}
.ob-nav-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob-nav-brand .brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.ob-nav-brand .brand-name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.ob-nav-brand .brand-name .tld { color: var(--text-low); font-weight: 400; }
.ob-nav-links { display: flex; align-items: center; gap: 26px; font-size: 13px; }
.ob-nav-links a { color: var(--text-mute); transition: color .15s ease; white-space: nowrap; }
.ob-nav-links a:hover { color: var(--text); }
.ob-nav-links a.active { color: var(--accent-text); font-weight: 500; }
.ob-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--predict));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; flex-shrink: 0;
    color: #06080F;
}
:root[data-theme="light"] .ob-avatar { color: #fff; }
.ob-nav-prop {
    border-left: 1px solid var(--line-strong);
    padding: 4px 8px 4px 16px; font-size: 13px; color: var(--text-mute);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ── Header unificato (16a): switcher property, campanella, avatar ──
   Erano inline in site.php; qui perche' li usa ogni sezione loggata. */
.prop-switch { position: relative; border-left: 1px solid var(--line-strong); padding-left: 16px; margin-left: 4px; }
.prop-switch-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-mute); font-size: 13px; font-family: inherit; cursor: pointer; }
.prop-switch-btn:hover { color: var(--text); }
.prop-switch-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); z-index: 300; padding: 6px; }
.prop-switch-menu.open { display: block; }
.prop-switch-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text-mute); }
.prop-switch-menu a:hover { background: var(--hover-row); color: var(--text); }
.prop-switch-menu a.cur { color: var(--accent-text); font-weight: 600; }
.studio-cta { margin-left: 8px; }
/* 10b: switcher ricco */
.prop-switch-menu { min-width: 320px; padding: 10px; }
.psw-search { width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 8px; border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--text); border-radius: 10px; font-size: 13px; font-family: inherit; }
.psw-search:focus { outline: none; border-color: var(--accent); }
.psw-all { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--predict-bg); border: 1px solid var(--predict-dim); margin-bottom: 6px; }
.psw-all .sigma { width: 26px; height: 26px; border-radius: 8px; background: var(--predict); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.psw-all .nm { font-weight: 600; font-size: 13px; color: var(--text); }
.psw-all .sb { font-size: 11px; color: var(--text-low); }
.psw-all .ro { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .1em; color: var(--predict-text); text-transform: uppercase; }
.psw-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; }
.psw-row:hover { background: var(--hover-row); }
.psw-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.psw-row.cur .dot { background: var(--accent); box-shadow: var(--glow-dot); }
.psw-row .nm { font-weight: 600; font-size: 13px; color: var(--text); }
.psw-row .u { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-low); }
.psw-row .dv { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; }
.psw-row .dv.pos { color: var(--pos); } .psw-row .dv.neg { color: var(--neg); }
.psw-row .curtag { border: 1px solid var(--accent-dim); color: var(--accent-text); border-radius: 999px; padding: 2px 8px; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; }
.psw-manage { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); margin-top: 6px; font-size: 12px; color: var(--text-mute); border-radius: 0; }
.psw-manage:hover { color: var(--text); }

/* Campanella alert: 34px round outline + badge viola col conteggio */
.nav-bell {
    position: relative; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line-strong); display: inline-flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    transition: border-color .15s ease, color .15s ease;
}
.nav-bell:hover { border-color: var(--text-low); color: var(--text); }
.nav-bell svg { width: 17px; height: 17px; }
.nav-bell .bdg {
    position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--predict); color: #fff;
    font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Avatar dell'header (30px, gradiente quando non c'e' la foto Google) */
.nav-acct { position: relative; }
.nav-avatar {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line-strong); display: block; padding: 0;
    background: linear-gradient(135deg, var(--accent), var(--predict));
    transition: border-color .15s ease;
}
.nav-avatar:hover { border-color: var(--accent); }
/* Live: testo compatto accanto ai link, non una pill riquadrata (16a) */
.ob-nav .rt-wrap { position: relative; }
.ob-nav .rt-pill {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 12px; color: var(--text-mute); white-space: nowrap;
    background: none; border: none; padding: 0;
}
.ob-nav .rt-pill:hover { color: var(--text); }
.ob-nav .rt-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--pos);
    box-shadow: 0 0 8px var(--pos); flex-shrink: 0;
}
.ob-nav .rt-count { font-family: 'Geist Mono', monospace; font-weight: 600; color: var(--text); }
.ob-nav .rt-dot.stale { background: var(--text-low); box-shadow: none; }
@media (max-width: 900px) {
    .ob-nav .rt-label { display: none; }
}

/* ── Panels & cards ── */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--panel-shadow);
}
.panel.md { border-radius: 14px; }
.panel.sm { border-radius: 12px; }

.kpi-card { padding: 18px 20px; }
.kpi-card .kpi-head { display: flex; justify-content: space-between; align-items: baseline; }
.kpi-card .kpi-num { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--text-faint); }
.kpi-card .kpi-value { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-top: 8px; }
.kpi-card .kpi-value.md { font-size: 26px; }
.kpi-card .kpi-delta { font-size: 12px; margin-top: 3px; color: var(--pos); }
.kpi-card .kpi-delta .sub { color: var(--text-low); }
.kpi-card .kpi-delta.neg { color: var(--neg); }
.kpi-card .kpi-foot {
    font-size: 11px; color: var(--text-low); margin-top: 8px;
    border-top: 1px dashed var(--line-strong); padding-top: 6px;
}
.kpi-card .kpi-foot .verdict { color: var(--predict-text); }

/* ── Pills / buttons ── */
.pill-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 18px; border-radius: 999px;
    font-size: 12px; font-weight: 500; cursor: pointer;
    font-family: inherit; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; background: none; color: var(--text);
    transition: all .15s ease;
}
.pill-btn.sm { height: 32px; padding: 0 16px; }
.pill-btn.lg { height: 40px; padding: 0 24px; font-size: 13px; }
.pill-btn.primary {
    color: #fff; border-color: var(--accent);
    background: linear-gradient(180deg, rgba(77,229,229,.18), rgba(77,229,229,.06));
    box-shadow: var(--glow-accent);
}
:root[data-theme="light"] .pill-btn.primary {
    background: var(--accent); border-color: var(--accent); box-shadow: none;
}
.pill-btn.primary:hover { filter: brightness(1.1); }
.pill-btn.secondary { color: var(--text-mute); border-color: var(--line-strong); background: var(--input-bg); }
.pill-btn.secondary:hover { color: var(--text); border-color: var(--text-low); }
.pill-btn.danger { color: var(--neg); border-color: var(--neg-dim); background: var(--input-bg); }
.pill-btn:disabled, .pill-btn.disabled { color: var(--text-faint); border-color: var(--line); cursor: not-allowed; box-shadow: none; background: none; }

.pill-tag {
    display: inline-flex; align-items: center;
    font-family: 'Geist Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 3px 12px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--line-strong); color: var(--text-mute);
}
.pill-tag.sm { font-size: 9px; padding: 2px 8px; }
.pill-tag.accent { border-color: var(--accent-dim); color: var(--accent-text); background: var(--accent-bg); }
.pill-tag.predict { border-color: var(--predict-dim); color: var(--predict-text); background: var(--predict-bg); }
.pill-tag.neg { border-color: var(--neg-dim); color: var(--neg); background: var(--neg-bg); }
.pill-tag.pos { border-color: var(--pos); color: var(--pos); }

/* ── Segmented control (pill) ── */
.seg-pill {
    display: inline-flex; border: 1px solid var(--line-strong);
    border-radius: 999px; overflow: hidden; background: var(--input-bg);
}
.seg-pill .seg-opt {
    padding: 8px 22px; font-size: 12px; cursor: pointer; color: var(--text-mute);
    border: none; background: none; font-family: inherit; transition: all .15s ease;
}
.seg-pill .seg-opt + .seg-opt { border-left: 1px solid var(--line); }
.seg-pill .seg-opt.active { background: var(--accent-bg-2); color: var(--accent-text); font-weight: 600; }
.seg-pill.sm .seg-opt { padding: 4px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Toggle switch (34×20) ── */
.ob-toggle {
    width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
    position: relative; cursor: pointer;
    background: var(--input-bg); border: 1px solid var(--line-strong);
    transition: all .15s ease; padding: 0;
}
.ob-toggle .knob {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; transition: left .15s ease;
    box-shadow: 0 1px 2px rgba(10,13,23,.2);
}
.ob-toggle.on { background: var(--accent-bg-2); border-color: var(--accent-dim); }
.ob-toggle.on .knob { left: 16px; background: var(--accent); }

/* ── Tables ── */
.ob-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ob-table th {
    padding: 14px 20px; text-align: left;
    font-family: 'Geist Mono', monospace; font-weight: 500; font-size: 10px;
    text-transform: uppercase; letter-spacing: .14em; color: var(--text-low);
    border-bottom: 1px solid var(--line);
}
.ob-table th.r, .ob-table td.r { text-align: right; }
.ob-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); }
.ob-table tbody tr:hover { background: var(--hover-row); }
.ob-table tbody tr:last-child td { border-bottom: none; }
.ob-table td.mono-cell { font-family: 'Geist Mono', monospace; font-size: 13px; }

/* ── Inputs ── */
.ob-input {
    padding: 6px 10px; font-family: 'Geist Mono', monospace; font-size: 12px;
    border: 1px solid var(--line-strong); background: var(--input-bg);
    color: var(--text); border-radius: 8px; transition: all .15s ease;
}
.ob-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg-2); }
.ob-input.edited { border-color: var(--accent-dim); background: var(--accent-bg); }

/* ── Alert banner ── */
.alert-banner {
    border: 1px solid var(--neg-dim); background: var(--neg-bg);
    border-radius: 12px; padding: 13px 18px;
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: var(--text-mute);
}
.alert-banner strong { color: var(--text); }
.alert-banner a { color: var(--neg); font-weight: 500; }

/* ── Accuracy chip ── */
.accuracy-chip {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--accent-dim); border-radius: 999px;
    padding: 9px 18px; font-size: 12px; color: var(--text-mute);
    background: var(--accent-bg);
}
:root[data-theme="dark"] .accuracy-chip { box-shadow: 0 0 24px rgba(77,229,229,.15); }
.accuracy-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow-dot); }
.accuracy-chip strong { color: var(--text); }

/* ── Progress bar (channels) ── */
.ob-bar {
    flex: 1; height: 8px; border-radius: 999px; position: relative; overflow: hidden;
    background: var(--line);
}
.ob-bar .fill {
    position: absolute; inset: 0; right: auto;
    background: linear-gradient(90deg, var(--accent), var(--predict));
}

/* ── Utility ── */
.page-pad { padding: 36px; display: flex; flex-direction: column; gap: 24px; }
.hair-row { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--text-low); }
.hair-row .rule { flex: 1; border-top: 1px solid var(--line); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ── Mobile ── */

/* iOS Safari zooma su qualsiasi input con font-size < 16px: regola
 * globale anti-zoom (stessa che era in _brand.php). I componenti che
 * vogliono testo piu' piccolo la overridano localmente. */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px; }
}

@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .page-pad { padding: 18px; gap: 16px; }
    .ob-nav { padding: 12px 18px; }
    .ob-nav-links { gap: 14px; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
}
@media (max-width: 560px) {
    .grid-3 { grid-template-columns: 1fr; }
    .ob-h2 { font-size: 26px; }
    .ob-h2.sm { font-size: 22px; }
    .page-pad { padding: 14px; gap: 14px; }
    .ob-nav { padding: 10px 14px; }
    .ob-nav-links { gap: 10px; font-size: 12px; }
    .ob-nav-brand .brand-name { font-size: 16px; }
    .ob-nav-brand .brand-mark { width: 24px; height: 24px; }
    /* Elementi marcati come solo-desktop nella nav */
    .ob-nav .nav-hide-mobile { display: none; }
    .kpi-card { padding: 14px 16px; }
    .kpi-card .kpi-value { font-size: 24px; }
    .accuracy-chip { width: 100%; }
    .alert-banner { align-items: flex-start; }
    .ob-table th, .ob-table td { padding: 10px 12px; }
    .pill-btn { height: 34px; padding: 0 14px; }
    .panel, .panel.md { border-radius: 12px; }
}

/* ── Account panel dell'header (menu utente, ogni pagina loggata) ── */
.ga-account-wrap { position: relative; }
.ga-account-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 300px; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08); z-index: 600; overflow: hidden; font-size: 13px; }
.ga-account-panel.open { display: block; }
.ga-account-info { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.ga-account-info img { width: 40px; height: 40px; border-radius: 50%; }
.ga-account-info-text { min-width: 0; }
.ga-account-info-text .name { font-weight: 500; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-account-info-text .email { color: var(--text-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-account-section { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.ga-account-section label { display: block; font-size: 11px; font-weight: 500; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.ga-account-section .ga-account-help { font-size: 11px; color: var(--text-low); margin-top: 4px; }
.ga-account-country-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; outline: none; box-sizing: border-box; }
.ga-account-country-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg-2); }
.ga-account-save { display: inline-block; margin-top: 8px; padding: 6px 16px; background: var(--accent-bg-2); color: var(--accent-text); border: 1px solid var(--accent-dim); border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.ga-account-save:hover { filter: brightness(1.1); }
.ga-account-save:disabled { opacity: 0.5; cursor: default; }
.ga-account-toast { display: none; font-size: 11px; color: var(--pos); margin-top: 6px; font-weight: 500; }
.ga-account-links { padding: 8px 0; }
.ga-account-links a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--text); text-decoration: none; font-size: 13px; transition: background 0.1s; }
.ga-account-links a:hover { background: var(--hover-row); }
.ga-account-links a svg { width: 18px; height: 18px; fill: var(--text-mute); flex-shrink: 0; }

select.ga-account-country-input { background: var(--input-bg); color: var(--text); cursor: pointer; }
.ga-account-country-input option { background: var(--panel-solid); color: var(--text); }

/* ── Dimensione testo (accessibilita'): zoom proporzionale dell'app.
 * Impostata dal menu account, salvata su users.font_size. ── */
html[data-fontsize="l"] body { zoom: 1.12; }
html[data-fontsize="xl"] body { zoom: 1.25; }