/* ═══════════════════════════════════════════════════════════════
   CONSOLE — App-nav, dashboard, profile, admin, panel, chat
   Dark theme variant: slightly lighter than public (#0f0f11)
   ═══════════════════════════════════════════════════════════════ */

/* ── APP NAV ── */
.app-nav {
    position: sticky; top: 0; z-index: 300;
    background: rgba(24,24,27,.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    font-family: var(--sans);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-nav-in {
    max-width: var(--mw); margin: 0 auto;
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; height: 52px;
}
.app-nav .logo { color: #fff; font-size: .98rem; font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.app-nav .logo span { color: var(--cyan); }
/* Freccia ‹ di ritorno: bottone circolare con contorno, a destra del logo. */
.app-nav .mv-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    margin-left: .8rem;
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, transform .15s ease, background .15s ease;
}
.app-nav .mv-back svg { display: block; }
/* Dashboard: slot fantasma identico (la navbar non si sposta tra le pagine). */
.app-nav .mv-back--ghost { visibility: hidden; pointer-events: none; }
.app-nav .mv-back:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(6,182,212,.08); text-decoration: none; transform: translateX(-2px); }
.app-nav-burger {
    display: none; background: none; border: none; color: rgba(255,255,255,.5);
    cursor: pointer; padding: .3rem; border-radius: var(--r-sm);
}
.app-nav-burger:hover { color: #fff; }
.app-nav-links { display: flex; flex: 1; justify-content: center; gap: .15rem; }
.app-nav-a {
    display: flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; font-size: .82rem; font-weight: 500;
    color: var(--nav-text); border-radius: var(--r-sm);
    text-decoration: none; transition: all .15s var(--ease);
}
.app-nav-a:hover { color: var(--nav-text-hover); background: var(--nav-hover); text-decoration: none; }
.app-nav-a.act  { color: var(--nav-text-hover); background: var(--nav-active); }
.app-nav-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
/* Console lang dropdown — outside collapsible links, always visible */
.nav-lang-dd--console { flex-shrink: 0; }
/* Desktop: link ancorati a destra accanto a Esci,
   lingua sempre ultima a destra, nome utente nascosto. */
@media (min-width: 769px) {
    .app-nav-links { flex: 1 1 auto; justify-content: flex-end; margin-right: 1.25rem; }
    .app-nav-right { margin-left: var(--space-6); }
    .app-nav-user { display: none; }
}
.app-nav-user { font-size: .78rem; color: rgba(255,255,255,.4); }
.app-nav-exit {
    font-size: .78rem; color: #ef4444; text-decoration: none;
    padding: .22rem .6rem; border: 1px solid rgba(239,68,68,.25);
    border-radius: var(--r-sm); transition: all .15s var(--ease);
}
.app-nav-exit:hover { color: #fca5a5; border-color: rgba(239,68,68,.5); text-decoration: none; }

/* Console language dropdown alignment */
.nav-lang-dd--console .nav-lang-btn {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    font-size: var(--fs-xs);
}
.nav-lang-dd--console .nav-lang-btn svg {
    width: 12px; height: 12px;
}
/* Lingua: ultima a destra in ogni contesto (desktop in barra, mobile nel burger). */

/* ── APP PAGE (dark variant) ── */
.app-page { background: #0f0f11; min-height: 100vh; position: relative; }
.app-page::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(34,211,238,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(6,182,212,.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: bgShift 20s ease-in-out infinite alternate;
}
@keyframes bgShift {
    0%   { opacity: 1; }
    50%  { opacity: .7; }
    100% { opacity: 1; }
}
.app-page .con-hero {
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-main { max-width: var(--mw); margin: 0 auto; padding: 2.5rem 1.5rem; position: relative; z-index: 1; }
.app-main h1 { font-size: 1.4rem; color: #fff; margin-bottom: .25rem; }

/* ── PANEL CONSOLE ── */
.con-hero {
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 2rem 0 0;
}
.con-hero-inner { display: flex; align-items: flex-start; gap: 1.25rem; }
.con-icon { font-size: 2rem; flex-shrink: 0; }
.con-hero h1 { font-size: 1.45rem; margin-bottom: .2rem; color: #fff; }
.con-hero p { color: rgba(255,255,255,.45); font-size: .88rem; }
.con-metrics { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.con-met {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-md);
    padding: .5rem .75rem; text-align: center; min-width: 85px;
}
.con-met b { display: block; font-size: 1.05rem; color: var(--blue); font-weight: 700; }
.con-met small { font-size: .68rem; color: rgba(255,255,255,.35); }
.con-tabs { display: flex; gap: 0; margin-top: 1.25rem; }
.con-tab {
    padding: .6rem 1.1rem; font-size: .84rem; font-weight: 500;
    color: rgba(255,255,255,.4); border-bottom: 2px solid transparent;
    text-decoration: none; transition: all .15s var(--ease);
}
.con-tab:hover { color: #fff; text-decoration: none; }
.con-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.con-body { max-width: var(--mw); margin: 0 auto; padding: 2rem 1.5rem; }
.con-section { margin-bottom: 2rem; }
.con-section h2 { font-size: 1.08rem; margin-bottom: .75rem; color: #fff; }
.con-card {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    background: rgba(255,255,255,.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.con-card canvas { max-width: 100%; }
.con-card h3 { color: #fff; }
.con-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.con-ex {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-md); padding: 1.15rem;
    background: rgba(255,255,255,.03);
    transition: all var(--dur) var(--ease);
}
.con-ex:hover { background: rgba(255,255,255,.05); border-color: rgba(34,211,238,.2); }
.con-ex h4 { font-size: .88rem; margin-bottom: .3rem; color: #fff; }
.con-ex p { font-size: .83rem; color: rgba(255,255,255,.4); }
.con-status {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; padding: .3rem .8rem; border-radius: var(--r-full); margin-bottom: 1rem;
    font-weight: 500;
}
.con-status-on { background: rgba(22,163,74,.12); color: #86efac; }
.con-status-off { background: rgba(220,38,38,.12); color: #fca5a5; }
.con-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.con-stat {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 1.25rem; text-align: center;
    background: rgba(255,255,255,.04);
}
.con-stat b { display: block; font-size: 1.6rem; color: var(--blue); font-weight: 700; }
.con-stat small { font-size: .76rem; color: rgba(255,255,255,.35); }

/* ── PAY STATUS BADGES ── */
.pay-status-badge {
    display: inline-block; border-radius: var(--r-full); font-weight: 600;
}
.pay-status-badge.in-progress {
    background: rgba(59,130,246,.12);
    color: #3b82f6;
    border: 1px solid rgba(59,130,246,.25);
}

/* Billing table: right-align action/status columns */
.billing-table th:last-child,
.billing-table td:last-child { text-align: right; }
.billing-table th:nth-last-child(2),
.billing-table td:nth-last-child(2) { text-align: right; }

/* ── CHAT ── */
.chat-wrap {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    overflow: hidden; max-width: 760px;
}
.chat-messages {
    height: 400px; overflow-y: auto; padding: 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.msg { display: flex; }
.msg-user { justify-content: flex-end; }
.msg-bubble {
    max-width: 72%; padding: .65rem 1rem; border-radius: var(--r-md);
    font-size: .88rem; line-height: 1.55; white-space: pre-wrap;
}
.msg-user .msg-bubble {
    background: var(--blue); color: #fff;
    border-bottom-right-radius: 4px;
}
.msg-ai .msg-bubble {
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
    border-bottom-left-radius: 4px;
}
.msg-loading { opacity: .45; font-style: italic; }
.chat-input-row {
    display: flex; gap: .7rem; padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.chat-input-row textarea { flex: 1; resize: none; }

/* ── FORM / UPLOAD PANEL ── */
.form-wrap, .upload-wrap {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 2rem; max-width: 640px;
}
.result-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-md);
    padding: 1.25rem; margin-top: 1.5rem;
}
.result-box h3 { font-size: .93rem; margin-bottom: .7rem; color: #fff; }
.result-box pre { font-size: .82rem; white-space: pre-wrap; word-break: break-all; color: rgba(255,255,255,.5); }
.upload-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; text-align: center;
    border: 2px dashed rgba(255,255,255,.12); border-radius: var(--r-lg);
    padding: 3rem 2rem; cursor: pointer;
    transition: all .18s var(--ease); color: rgba(255,255,255,.4);
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--blue); background: rgba(34,211,238,.08);
}
.upload-zone .up-icon { font-size: 1.8rem; opacity: .6; }
.panel-placeholder {
    text-align: center; padding: 4rem 2rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    max-width: 500px;
}
.panel-placeholder h3 { font-size: 1.1rem; margin-bottom: .4rem; color: #fff; }
.panel-placeholder p { font-size: .88rem; color: rgba(255,255,255,.4); }

/* ── ADMIN ── */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.admin-grid > .admin-card { margin-bottom: 0; }
.admin-card, .admin-section {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 1.5rem; margin-bottom: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
.admin-section { margin-bottom: 2rem; }
.admin-card h2, .admin-section h2 { font-size: .98rem; margin-bottom: 1.2rem; color: #fff; }
/* Dark form fields in console */
.app-page .field label { color: rgba(255,255,255,.5); font-size: .78rem; }
.app-page input:not([type]),
.app-page input[type=text], .app-page input[type=email],
.app-page input[type=password], .app-page input[type=url],
.app-page input[type=number], .app-page input[type=search],
.app-page input[type=datetime-local],
.app-page textarea, .app-page select {
    background: #111318; border-color: rgba(255,255,255,.14); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.app-page input::placeholder,
.app-page textarea::placeholder { color: rgba(255,255,255,.22); }
.app-page select {
    background-color: #111318;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
}
.app-page input:focus, .app-page textarea:focus, .app-page select:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}
.app-page select option { background: #18181b; color: #fff; }
.app-page .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.admin-table th {
    text-align: left; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: rgba(255,255,255,.35); padding: .5rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-table td {
    padding: .55rem .75rem; border-bottom: 1px solid rgba(255,255,255,.06);
    vertical-align: middle; color: rgba(255,255,255,.5);
}
.admin-table tr:last-child td { border-bottom: none; }
.row-disabled td { opacity: .4; }
.status-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
}
.status-on { color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25); }
.status-off { color: #fca5a5; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.22); }
.admin-actions { display: inline-flex; align-items: center; gap: .4rem; }
.admin-actions form { display: inline-flex; margin: 0; }
.admin-back {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-bottom: 1.2rem; padding: .35rem .7rem .35rem .5rem;
    color: rgba(255,255,255,.55); text-decoration: none; font-size: .82rem;
    border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md);
    background: rgba(255,255,255,.03);
    transition: all .15s var(--ease);
}
.admin-back:hover { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); text-decoration: none; }
.admin-back svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
/* Page title row: back arrow + h1 on same line */
.page-title-row {
    display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem;
}
.page-title-row .admin-back { margin-bottom: 0; }
.page-title-row h1 { margin-bottom: 0; }
/* Mobile exit link inside burger dropdown */
.app-nav-exit-mobile {
    display: none; color: #ef4444; font-size: .82rem;
    padding: .5rem .6rem; text-decoration: none; border-top: 1px solid rgba(239,68,68,.2);
    margin-top: .25rem;
}
.app-nav-exit-mobile:hover { color: #fca5a5; text-decoration: none; }
/* Action pill buttons in admin tables */
.btn-action {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .6rem; font-size: .72rem; font-weight: 500;
    border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04); color: rgba(255,255,255,.5);
    cursor: pointer; transition: all .15s var(--ease);
    text-decoration: none; font-family: var(--sans); line-height: 1.4;
}
.btn-action:hover { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); text-decoration: none; }
.btn-action-blue:hover { color: #38bdf8; border-color: rgba(56,189,248,.3); background: rgba(34,211,238,.1); }
.btn-action-red { color: rgba(248,113,113,.6); }
.btn-action-red:hover { color: #f87171; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.btn-action-green:hover { color: #4ade80; border-color: rgba(74,222,128,.3); background: rgba(34,197,94,.08); }
.btn-action.is-copied { color: #4ade80; border-color: rgba(74,222,128,.45); background: rgba(34,197,94,.12); }

/* Console form buttons are more compact than the public-site .btn */
.app-page .btn { padding: .45rem 1.05rem; font-size: .82rem; border-width: 1px; }
.app-page .btn-sm { padding: .3rem .7rem; font-size: .76rem; }

/* ── RIFERIMENTI — card view ── */
.ref-group { margin-bottom: 2rem; }
.ref-group-title {
    font-size: 1rem; color: #fff; margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
}
.ref-group-count {
    font-size: .7rem; color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px; padding: .05rem .5rem;
}
.ref-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.ref-card {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem;
    height: 240px;                     /* fixed rectangle — wider cards, 2 per row */
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
}
.ref-card:hover { border-color: rgba(34,211,238,.25); box-shadow: 0 6px 28px rgba(34,211,238,.08); }
/* Nascosta = freezata: desaturata, tratteggiata, senza hover luminoso. */
.ref-card-hidden {
    opacity: .6;
    filter: grayscale(.85);
    border-style: dashed;
    border-color: rgba(255,255,255,.16);
}
.ref-card-hidden:hover { border-color: rgba(255,255,255,.25); box-shadow: none; transform: none; }
.ref-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ref-card-label { font-weight: 600; color: #fff; font-size: .92rem; word-break: break-word; }
.ref-card-user { font-size: .74rem; color: rgba(255,255,255,.45); }
.ref-card-value {
    font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: .75rem; color: rgba(255,255,255,.6);
    background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px; padding: .4rem .55rem;
    /* fixed height: scroll horizontally, never expands the card */
    height: 2.2rem;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
}
.ref-card-value::-webkit-scrollbar { height: 6px; }
.ref-card-value::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.ref-card-meta { font-size: .7rem; color: rgba(255,255,255,.32); }
.ref-card-actions {
    display: flex; align-items: center; gap: .4rem;
    padding-top: .5rem;
}
/* Card riferimenti (layout 2026-09-23): titolo + campi separati */
.ref-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; min-width: 0; }
.ref-card-title .ref-label { font-weight: 700; font-size: .95rem; color: #fff; word-break: break-word; min-width: 0; }
.ref-meta-row { display: flex; align-items: baseline; gap: .5rem; font-size: .76rem; color: rgba(255,255,255,.62); flex-wrap: wrap; }
.ref-meta-k { min-width: 92px; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.35); flex-shrink: 0; }
.ref-meta-row .ref-badge { font-size: .68rem; }
.ref-sep { color: rgba(255,255,255,.25); }
/* Bottone copia: pillola sobria con icona, conferma verde */
.js-copy {
    display: inline-flex; align-items: center; gap: .32rem; flex-shrink: 0;
    padding: .28rem .6rem; font-size: .7rem; font-weight: 500;
    color: rgba(255,255,255,.6); background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12); border-radius: 9999px; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.js-copy svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.js-copy:hover { color: #38bdf8; border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.08); }
.js-copy.copied { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
@media (max-width: 500px) { .ref-cards { grid-template-columns: 1fr; } }
/* Icon-only action buttons for admin tables (edit / copy / toggle visibility) */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; flex-shrink: 0;
    border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04); color: rgba(255,255,255,.55);
    cursor: pointer; transition: all .15s var(--ease);
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    font-size: .9rem; line-height: 1;
}
.btn-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.btn-icon:hover { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); text-decoration: none; }
.btn-icon-blue:hover { color: #38bdf8; border-color: rgba(56,189,248,.3); background: rgba(34,211,238,.1); }
.btn-icon-green { color: #4ade80; border-color: rgba(74,222,128,.28); }
.btn-icon-green:hover { color: #4ade80; border-color: rgba(74,222,128,.45); background: rgba(34,197,94,.1); }
.btn-icon-hidden { color: #f87171; border-color: rgba(248,113,113,.38); background: rgba(127,29,29,.22); }
.btn-icon-hidden:hover { color: #fecaca; border-color: rgba(248,113,113,.55); background: rgba(127,29,29,.34); }
.btn-icon-red { color: rgba(248,113,113,.7); }
.btn-icon-red:hover { color: #f87171; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); }
.btn-icon.is-copied { color: #4ade80; border-color: rgba(74,222,128,.5); background: rgba(34,197,94,.14); }
.btn-icon.is-copied svg { display: none; }
.btn-icon.is-copied::after { content: '✓'; font-size: .82rem; font-weight: 700; }

/* Empty-state row inside admin tables */
.table-empty {
    text-align: center; color: rgba(255,255,255,.35);
    font-size: .84rem; padding: 1.75rem 1rem !important;
}

/* Inline value reveal in the references table (Mostra) */
.ref-reveal-field {
    width: 100%; max-width: 320px; margin-top: .4rem;
    padding: .4rem .55rem; border-radius: var(--r-sm);
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8); font-size: .78rem;
    font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace);
}

/* Tooltip (info icon) */
.info-tip {
    position: relative; display: inline-flex; align-items: center; cursor: help;
    color: rgba(255,255,255,.3); font-size: .72rem; margin-left: .35rem; vertical-align: middle;
}
.info-tip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.info-tip .tip-text {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%); white-space: normal; min-width: 200px; max-width: 280px;
    background: #1e1e2e; border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
    padding: .45rem .75rem; font-size: .72rem; color: rgba(255,255,255,.7);
    box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 50; pointer-events: none;
    font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5;
}
.info-tip:hover .tip-text, .info-tip:focus .tip-text, .info-tip.open .tip-text { display: block; }
.info-tip:focus { outline: none; }

/* Mobile-hide utility */
.mobile-hide { }
/* Danger zone */
.danger-zone { border-color: rgba(239,68,68,.2); }

/* ── PROFILE ── */
.profile-page-grid { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; }
.profile-page-left { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.pp-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 1.75rem; text-align: center;
}
.pp-avatar {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem;
    margin: 0 auto .75rem;
    box-shadow: 0 2px 8px rgba(34,211,238,.2);
}
.pp-name { font-size: 1.15rem; margin-bottom: .25rem; color: #fff; }
.pp-details { text-align: left; margin-top: 1.25rem; }
.pp-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .83rem; gap: .5rem;
}
.pp-row:last-child { border-bottom: none; }
.pp-label { font-weight: 500; color: rgba(255,255,255,.35); flex-shrink: 0; font-size: .78rem; }
.pp-row a { color: #38bdf8; font-size: .83rem; text-align: right; }
.pp-row span:last-child { text-align: right; color: rgba(255,255,255,.5); }
.pp-bio { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); text-align: left; }
.pp-bio p { font-size: .86rem; color: rgba(255,255,255,.4); }
.pp-section { margin-bottom: 2rem; }
.pp-section h2 { font-size: 1.08rem; margin-bottom: 1rem; color: #fff; }
.pp-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }

/* ── PROFILE PAGE (redesigned) ── */
.pp-header {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 2rem; padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.pp-avatar {
    width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem;
    box-shadow: 0 4px 20px rgba(34,211,238,.3);
}
.pp-name { font-size: 1.3rem; color: #fff; margin-bottom: .25rem; }
.pp-bio { font-size: .84rem; color: rgba(255,255,255,.4); margin-top: .5rem; }
.pp-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1rem; margin-bottom: 2rem;
}
.pp-content-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.pp-card {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg); padding: 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
    /* Stacking dedicato: evita glitch di compositing col backdrop-filter
       (testo invisibile ma selezionabile a certe larghezze su Chrome). */
    isolation: isolate;
}
/* Account card: il footer (GitHub) resta inchiodato in fondo alla card. */
.pp-card-account { display: flex; flex-direction: column; }
.pp-card-account .pp-details { flex: 0 1 auto; }
.pp-account-foot { margin-top: auto; padding-top: .9rem; }
.pp-section-title { font-size: .95rem; color: #fff; margin-bottom: 1rem; }
.pp-details { display: flex; flex-direction: column; }
.pp-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .83rem; padding: .45rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06); gap: .5rem;
}
.pp-row:last-child { border-bottom: none; }
.pp-label { color: rgba(255,255,255,.35); font-weight: 500; font-size: .78rem; flex-shrink: 0; }
.pp-row span:last-child { color: rgba(255,255,255,.55); text-align: right; }
.pp-row--favorite { align-items: center; margin-top: .35rem; padding-top: .8rem; }
.pp-favorite-select {
    min-width: 0; max-width: 58%; padding: .4rem 1.65rem .4rem .65rem;
    font: inherit; font-size: .8rem; color: rgba(255,255,255,.82);
    background-color: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center;
    transition: border-color .15s ease, background-color .15s ease;
}
.pp-favorite-select:hover { border-color: rgba(255,255,255,.25); background-color: rgba(255,255,255,.07); }
.pp-favorite-select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pp-favorite-select:disabled { opacity: .55; cursor: wait; }
.pp-favorite-select option { color: #fff; background: #18181b; }
.pp-activity-list { display: flex; flex-direction: column; gap: .5rem; }
.pp-activity-row {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.pp-activity-row:last-child { border-bottom: none; }
.pp-act-icon { font-size: .85rem; flex-shrink: 0; padding-top: .1rem; }
.pp-act-action { display: block; font-size: .82rem; color: rgba(255,255,255,.6); font-weight: 500; }
.pp-act-meta { display: block; font-size: .72rem; color: rgba(255,255,255,.3); margin-top: .1rem; }
.pp-act-meta code { font-size: .7rem; background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 3px; }

/* Legacy compat */
.prof-grid { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }

/* ── DASHBOARD ── */
.dash-section { margin-bottom: 2.5rem; }
.dash-section h2 { font-size: 1.08rem; margin-bottom: 1rem; color: #fff; }
.dash-toggle {
    display: flex; align-items: center; gap: .5rem;
    cursor: pointer; user-select: none; margin-bottom: 1rem;
}
.dash-toggle h2 { margin-bottom: 0; font-size: 1.02rem; }
.dash-arrow {
    font-size: .72rem; color: rgba(255,255,255,.35);
    transition: transform var(--dur) var(--ease); display: inline-block;
}
.dash-arrow.open { transform: rotate(90deg); }
.dash-collapsible { display: none; overflow: hidden; }
.dash-collapsible.open { display: block; }
.fav-btn {
    position: absolute; top: .75rem; right: .75rem;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .82rem; color: rgba(255,255,255,.35);
    transition: all .15s var(--ease); z-index: 1;
}
.fav-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(34,211,238,.1); }
.fav-btn.is-fav { background: var(--blue); color: #fff; border-color: var(--blue); }
.panel-card-rel { position: relative; }

/* ── TOPBAR (non-logged panel view, scoped to .app-page) ── */
.app-page .topbar {
    background: rgba(15,15,17,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-page .topbar .topbar-back { color: rgba(255,255,255,.4); }
.app-page .topbar .topbar-back:hover { color: #38bdf8; }
.app-page .topbar .logo { color: #fff; }

/* ── F1-specific table ── */
.f1-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.f1-tbl th {
    text-align: left; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; color: rgba(255,255,255,.35);
    padding: .4rem .5rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.f1-tbl td { padding: .35rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.5); }
.ok { color: #4ade80; }
.no { color: #f87171; }

/* ── CODE in dark console ── */
.app-page code {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.6);
}

/* ── TESTING PANEL ── */
.testing-endpoint-info {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
}
.testing-ep-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .84rem;
}
.testing-ep-row:last-child { border-bottom: none; }
.testing-ep-label { color: rgba(255,255,255,.35); font-weight: 500; font-size: .78rem; }
.testing-ep-val { color: rgba(255,255,255,.6); }
.testing-ep-val code { font-size: .8rem; word-break: break-all; }

.testing-editor-wrap {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-md);
    overflow: hidden;
}
.testing-editor {
    width: 100%; min-height: 260px; padding: 1rem 1.25rem;
    background: rgba(255,255,255,.03); color: rgba(255,255,255,.7);
    border: none; outline: none; resize: vertical;
    font-family: 'Menlo', 'Consolas', monospace; font-size: .82rem;
    line-height: 1.6; tab-size: 2;
}
.testing-editor:focus { box-shadow: inset 0 0 0 1px var(--blue); }

.testing-timing {
    font-size: .84rem; color: rgba(255,255,255,.4); font-weight: 500;
    font-family: 'Menlo', 'Consolas', monospace;
}
.testing-result {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: 1.25rem;
}
.testing-result h3 { font-size: .95rem; color: #fff; margin-bottom: .75rem; }
.testing-status-row { margin-bottom: .75rem; }
.testing-badge {
    display: inline-block; padding: .2rem .6rem;
    border-radius: var(--r-sm); font-size: .75rem; font-weight: 600;
}
.testing-badge-ok { background: rgba(74,222,128,.12); color: #4ade80; }
.testing-badge-err { background: rgba(248,113,113,.12); color: #f87171; }
.testing-response-pre {
    background: rgba(0,0,0,.25); border-radius: var(--r-md);
    padding: 1rem 1.25rem; font-size: .8rem; line-height: 1.6;
    white-space: pre-wrap; word-break: break-all;
    color: rgba(255,255,255,.55); max-height: 500px; overflow-y: auto;
    font-family: 'Menlo', 'Consolas', monospace;
}

/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM & VISUAL UPGRADES
   ═══════════════════════════════════════════════════════════════ */

/* Glassmorphism base for all console cards */
.admin-card, .admin-section, .prof-card, .prof-stat-card,
.prof-activity, .con-card, .con-stat, .con-ex, .panel-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
    transition: all .3s cubic-bezier(.22,1,.36,1);
}

/* Hover glow */
.admin-card:hover, .prof-stat-card:hover, .con-stat:hover, .con-ex:hover {
    border-color: rgba(34,211,238,.2);
    box-shadow: 0 8px 32px rgba(34,211,238,.1), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-2px);
}

/* Gradient accent bar on stat cards */
.prof-stat-card, .con-stat {
    position: relative;
    overflow: hidden;
}
.prof-stat-card::before, .con-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #3b82f6);
    opacity: 0;
    transition: opacity .3s;
}
.prof-stat-card:hover::before, .con-stat:hover::before {
    opacity: 1;
}

/* Gradient text for stat values */
.prof-stat-card b, .con-stat b {
    background: linear-gradient(135deg, #38bdf8, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Profile avatar gradient border */
.prof-avatar {
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    box-shadow: 0 4px 20px rgba(34,211,238,.3);
}

/* Admin table row hover */
.admin-table tbody tr {
    transition: background .15s;
}
.admin-table tbody tr:hover td {
    background: rgba(34,211,238,.04);
}

/* Animated entrance for dashboard sections */
.dash-section, .admin-grid, .prof-grid {
    animation: fadeInUp .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes consoleCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.panels-grid .panel-card {
    animation: consoleCardIn .4s cubic-bezier(.16,1,.3,1) both;
}
.panels-grid .panel-card:nth-child(1) { animation-delay: 0s; }
.panels-grid .panel-card:nth-child(2) { animation-delay: .06s; }
.panels-grid .panel-card:nth-child(3) { animation-delay: .12s; }
.panels-grid .panel-card:nth-child(4) { animation-delay: .18s; }

/* ── DASHBOARD STATS ROW ── */
.dash-stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-bottom: 2.5rem;
}
.dash-stat-card {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    padding: 1.25rem; text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative; overflow: hidden;
    transition: all .3s cubic-bezier(.22,1,.36,1);
}
.dash-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #3b82f6);
    opacity: 0;
    transition: opacity .3s;
}
.dash-stat-card:hover {
    border-color: rgba(34,211,238,.2);
    box-shadow: 0 8px 32px rgba(34,211,238,.1), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-2px);
}
.dash-stat-card:hover::before { opacity: 1; }
.dash-stat-card b {
    display: block; font-size: 1.6rem; font-weight: 700;
    background: linear-gradient(135deg, #38bdf8, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dash-stat-card b[style*="color:"] {
    -webkit-text-fill-color: unset;
    background: none;
}
.dash-stat-card small { font-size: .76rem; color: rgba(255,255,255,.35); }

/* ── ADMIN STATS ROW ── */
.admin-stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-bottom: 2rem;
}
.admin-stat-card {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    padding: 1.25rem; text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative; overflow: hidden;
    transition: all .3s cubic-bezier(.22,1,.36,1);
}
.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #3b82f6);
    opacity: 0;
    transition: opacity .3s;
}
.admin-stat-card:hover {
    border-color: rgba(34,211,238,.2);
    box-shadow: 0 8px 32px rgba(34,211,238,.1), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-2px);
}
.admin-stat-card:hover::before { opacity: 1; }
.admin-stat-card b {
    display: block; font-size: 1.6rem; font-weight: 700;
    background: linear-gradient(135deg, #38bdf8, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.admin-stat-card b[style*="color:"] {
    -webkit-text-fill-color: unset;
    background: none;
}
.admin-stat-card small { font-size: .76rem; color: rgba(255,255,255,.35); }

/* ══ Table scroll wrapper ══ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ══ Billing modal multipliers ══ */
.pm-multipliers {
    display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.pm-multipliers > div { flex: 1; min-width: 120px; }
@media (max-width: 480px) {
    .pm-multipliers { flex-direction: column; }
    .pm-multipliers > div { min-width: 0; }
}