/* =====================================================================
   style.css - DeskPilot landing
   ---------------------------------------------------------------------
   Caricato DOPO bootstrap.min.css: sovrascrive Bootstrap senza !important.
   Direzione visiva: ink #0E1116 su crema #F4F1EA, JetBrains Mono ovunque,
   accento elettrico cyan in oklch.
   ===================================================================== */

:root {
    --ink: #0E1116;
    --ink-2: #2A2E36;
    --ink-3: #5B6068;
    --paper: #F4F1EA;
    --paper-2: #ECE7DC;
    --line: #1f232b;
    --rule: rgba(14, 17, 22, 0.12);
    --accent: oklch(0.72 0.16 230);
    --accent-ink: oklch(0.40 0.12 230);
    --sans: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --serif: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.rule { height: 1px; background: var(--rule); width: 100%; }
.pill {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-2); background: rgba(255, 255, 255, .4);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent); }

/* ====== NAV ====== */
nav.top {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    border-bottom: 1px solid var(--rule);
}
nav.top .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.brand .mark { width: 26px; height: 26px; display: block; }
.navlinks { display: flex; gap: 28px; }
.navlinks a { font-size: 14px; color: var(--ink-2); }
.navlinks a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px;
    border-radius: 999px;
    font-size: 14px; font-weight: 500;
    border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translate(2px, -2px); }

/* ====== HERO ====== */
.hero { padding: 88px 0 64px; position: relative; overflow: hidden; }
.hero h1 {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(36px, 5.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 24px 0 0;
    max-width: 18ch;
}
.hero h1 em { font-style: italic; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.hero .lead { margin-top: 28px; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); max-width: 56ch; line-height: 1.45; }
.hero-cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-meta { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.hero-meta .cell { padding: 22px 24px 22px 0; border-right: 1px solid var(--rule); }
.hero-meta .cell:last-child { border-right: none; padding-right: 0; }
.hero-meta .k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hero-meta .v { margin-top: 8px; font-size: 15px; color: var(--ink); letter-spacing: -0.005em; }

/* ====== SECTION SHELL ====== */
section.block { padding: 96px 0; border-top: 1px solid var(--rule); }
.section-head { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; margin-bottom: 56px; }
.section-head h2 {
    grid-column: 2;
    font-weight: 500;
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin: 0;
    max-width: 26ch;
}
.section-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.section-head .lbl { display: flex; flex-direction: column; gap: 6px; }

/* ====== PROBLEM ====== */
.problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.problem { padding: 36px 28px 36px 0; border-right: 1px solid var(--rule); }
.problem:last-child { border-right: none; padding-right: 0; }
.problem .num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.problem h3 { font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; margin: 12px 0 12px; }
.problem p { color: var(--ink-2); margin: 0; font-size: 15px; line-height: 1.5; max-width: 38ch; }

/* ====== HOW IT WORKS - Flow ====== */
.flow { position: relative; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper-2); padding: 28px; overflow: hidden; }
.flow-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.step {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px 20px 24px;
    min-height: 220px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
}
.step .badge {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--ink); color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 12px; font-weight: 500;
}
.step h4 { margin: 16px 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.step .tag { margin-top: 16px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.step.accent .badge { background: var(--accent); color: var(--ink); }

/* ====== FEATURES GRID ====== */
.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.feat { grid-column: span 2; padding: 36px 28px 36px 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.feat:nth-child(3n) { border-right: none; padding-right: 0; }
.feat .icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--paper-2); border: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.feat .icon::after { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--ink); }
.feat.i-2 .icon::after { border-radius: 50%; }
.feat.i-3 .icon::after { transform: rotate(45deg); border-radius: 2px; }
.feat.i-4 .icon::after { width: 16px; height: 4px; border-radius: 2px; }
.feat.i-5 .icon::after { background: var(--accent); }
.feat.i-6 .icon::after { width: 4px; height: 16px; border-radius: 2px; }
.feat h4 { margin: 0 0 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.feat p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; max-width: 36ch; }

/* ====== ARCHITECTURE / multi-tenant ====== */
.arch { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.arch h2 {
    font-weight: 500; font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.1; letter-spacing: -0.035em; margin: 16px 0 20px;
    max-width: 20ch;
}
.arch h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.arch p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 52ch; margin: 0 0 14px; }
.arch ul { list-style: none; padding: 0; margin: 20px 0 0; }
.arch li {
    display: grid; grid-template-columns: 28px 1fr; align-items: start;
    padding: 16px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.arch li:last-child { border-bottom: 1px solid var(--rule); }
.arch li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; background: var(--ink); border-radius: 2px; }
.arch li b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; font-size: 14.5px; letter-spacing: -0.01em; }
.arch li .dash { display: none; }

/* Architecture visual - diagram */
.diagram {
    aspect-ratio: 1 / 1.05;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 24px;
    padding: 28px;
    position: relative;
    display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
}
.diagram-head { display: flex; justify-content: space-between; align-items: center; }
.diagram-head .dots { display: flex; gap: 6px; }
.diagram-head .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.diagram-body { display: grid; grid-template-rows: 1fr auto 1fr auto 1fr; gap: 10px; }
.lane {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
}
.lane .ll { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.lane .lt { font-size: 14px; letter-spacing: -0.01em; }
.lane.accent { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lane.accent .ll { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.lane.accent .lt { color: var(--paper); }
.lane.accent .lt em { color: var(--accent); font-style: normal; font-family: var(--serif); }
.connector {
    height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-3);
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
}
.connector::before, .connector::after { content: ""; flex: 1; height: 1px; background: var(--rule); margin: 0 10px; }
.diagram-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chip {
    border: 1px solid var(--rule); background: var(--paper);
    border-radius: 999px; padding: 8px 10px;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.chip .sq { width: 8px; height: 8px; background: var(--accent); border-radius: 2px; }

/* ====== TICKET PREVIEW ====== */
.preview {
    margin-top: 64px;
    border: 1px solid var(--rule);
    border-radius: 20px;
    background: var(--paper-2);
    overflow: hidden;
    display: grid; grid-template-columns: 260px 1fr;
    min-height: 460px;
}
.preview .side { background: var(--ink); color: var(--paper); padding: 22px 18px; display: flex; flex-direction: column; gap: 20px; }
.preview .side .mini-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.preview .side .mini-mark { width: 20px; height: 20px; display: block; }
.preview .side .menu { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.preview .side .menu a { padding: 8px 10px; border-radius: 8px; font-size: 13px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.preview .side .menu a.active { background: rgba(255, 255, 255, 0.08); color: var(--paper); }
.preview .side .menu .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: color-mix(in srgb, var(--paper) 45%, transparent); padding: 14px 10px 4px; text-transform: uppercase; }
.preview .main { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.preview .topbar { display: flex; align-items: center; justify-content: space-between; }
.preview .topbar .title { font-size: 15px; font-weight: 500; }
.preview .topbar .right { display: flex; gap: 8px; align-items: center; }
.preview .topbar .right .pill { background: var(--paper); }
.preview .ticket {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 18px 18px 16px;
    display: grid; grid-template-columns: 1fr auto; gap: 8px 18px;
}
.preview .ticket .t-id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }
.preview .ticket .t-title { font-size: 16px; letter-spacing: -0.01em; font-weight: 500; margin-top: 2px; }
.preview .ticket .t-desc { font-size: 14px; color: var(--ink-2); margin-top: 6px; max-width: 56ch; }
.preview .ticket .t-status {
    align-self: start;
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    background: color-mix(in oklch, var(--accent) 30%, var(--paper));
    color: var(--accent-ink);
    border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--rule));
    padding: 4px 10px; border-radius: 999px;
}
.ai-card { border: 1px solid var(--rule); background: var(--paper); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ai-card .head { display: flex; align-items: center; gap: 10px; }
.ai-card .ai-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent); }
.ai-card .head .h { font-size: 13px; font-weight: 500; }
.ai-card .head .h em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.ai-card .match { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.ai-card .match .ml { display: flex; flex-direction: column; gap: 4px; }
.ai-card .match .mt { font-size: 14px; letter-spacing: -0.005em; }
.ai-card .match .mm { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .08em; }
.ai-card .match .score { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2); }
.ai-card .match .score.high { background: color-mix(in oklch, var(--accent) 25%, var(--paper)); border-color: color-mix(in oklch, var(--accent) 35%, var(--rule)); color: var(--accent-ink); }

/* ====== CTA ====== */
.cta { border-top: 1px solid var(--rule); padding: 120px 0 120px; text-align: center; }
.cta h2 { font-weight: 500; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.045em; margin: 18px auto 0; max-width: 18ch; }
.cta h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.cta p { color: var(--ink-2); margin: 22px auto 32px; max-width: 56ch; font-size: 17px; }
.cta-actions { display: inline-flex; gap: 10px; }

/* ====== FOOTER ====== */
footer.site { border-top: 1px solid var(--rule); padding: 36px 0 40px; color: var(--ink-3); font-size: 13px; }
footer.site .inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer.site .links { display: flex; gap: 24px; }

/* ====== SETTINGS TABS ====== */
.app-body .tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--rule);
    margin: 16px 0 24px;
    flex-wrap: wrap;
}
.app-body .tabs .tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 13px;
    transition: color .15s ease, border-color .15s ease;
}
.app-body .tabs .tab i { font-size: 13px; }
.app-body .tabs .tab:hover:not(.tab-disabled) { color: var(--ink); }
.app-body .tabs .tab.active {
    color: var(--ink); font-weight: 500;
    border-bottom-color: var(--ink);
}
.app-body .tabs .tab.tab-disabled {
    color: color-mix(in srgb, var(--ink) 30%, transparent);
    cursor: not-allowed;
}
.app-body .tabs .tab.tab-disabled .soon {
    background: var(--paper-2); color: var(--ink-3);
    padding: 1px 6px; border-radius: 999px; font-size: 9px;
    margin-left: 4px; letter-spacing: .08em; text-transform: uppercase;
}

/* checkbox row dentro admin-form (per SSO) */
.admin-form .admin-grid .checkbox-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
    cursor: pointer;
}
.admin-form .admin-grid .checkbox-row input[type=checkbox] {
    flex: 0 0 auto;
    margin-top: 2px;
}
.admin-form .admin-grid .checkbox-row strong { color: var(--ink); font-weight: 500; }
.admin-form .admin-grid .checkbox-row code {
    background: var(--paper); border: 1px solid var(--rule);
    padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 11.5px;
}

/* redirect URI da copiare (con cursor select-all) */
.redirect-uri-box {
    margin-top: 6px;
    padding: 10px 14px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ink);
    word-break: break-all;
    user-select: all;
}

/* Microsoft login button */
.microsoft-btn {
    width: 100%;
    background: #ffffff;
    color: var(--ink);
    border: 1px solid #d2d2d2;
    justify-content: center;
    gap: 12px;
    font-weight: 500;
}
.microsoft-btn:hover {
    background: #f6f6f6;
    border-color: #b0b0b0;
}
.microsoft-btn svg { flex-shrink: 0; }

/* Divider "oppure" tra Microsoft btn e form email/password */
.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0 14px;
    color: var(--ink-3); font-size: 11px;
    text-transform: uppercase; letter-spacing: .12em;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--rule);
}

.auth-sub-warn {
    text-align: center; color: var(--ink-3); font-size: 11px;
    margin: -4px 0 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* ====== KB — tag stato ====== */
.tag-kbstatus.tag-kbstatus-draft     { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tag-kbstatus.tag-kbstatus-published { color: #14532d; background: #dcfce7; border-color: #bbf7d0; }
.tag-kbstatus.tag-kbstatus-archived  { color: #374151; background: #f3f4f6; border-color: #e5e7eb; }

/* search bar KB */
.kb-search {
    display: flex; gap: 10px; align-items: center;
    margin: 18px 0 14px;
}
.kb-search-input {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--paper-2);
    transition: border-color .15s ease, background .15s ease;
}
.kb-search-input:focus-within { border-color: var(--ink); background: var(--paper); }
.kb-search-input i { color: var(--ink-3); font-size: 14px; }
.kb-search-input input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 11px 0;
    font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.kb-results-meta { color: var(--ink-3); margin: 0 0 12px; }

/* card risultato KB (search) */
.kb-results {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.kb-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px;
    border: 1px solid var(--rule); border-radius: 14px;
    background: var(--paper);
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .12s ease;
}
.kb-card:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.kb-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-card-head .mono { color: var(--ink-3); font-size: 11px; }
.kb-score { margin-left: auto; color: var(--ink-3); font-size: 10px; }
.kb-card-title { font-weight: 500; font-size: 16px; letter-spacing: -0.015em; margin: 0; line-height: 1.3; }
.kb-card-summary { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.kb-card-meta { font-size: 10.5px; color: var(--ink-3); margin: 0; letter-spacing: .04em; }

@media (max-width: 880px) {
    .kb-results { grid-template-columns: 1fr; }
}

/* banner "bozza da ticket" */
.kb-source-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: color-mix(in oklch, var(--accent) 8%, var(--paper));
    border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--rule));
    border-radius: 8px;
    color: var(--accent-ink); font-size: 12px;
    margin-bottom: 14px;
}
.kb-source-banner i { font-size: 12px; }
.kb-source-banner a { color: var(--accent-ink); font-weight: 500; }

/* editor markdown: textarea sx, preview dx */
.md-editor {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    align-items: stretch;
}
.md-editor textarea {
    font-family: var(--mono); font-size: 13px; line-height: 1.5;
    resize: vertical; min-height: 360px;
}
.md-preview {
    border: 1px solid var(--rule); border-radius: 8px;
    background: var(--paper-2); padding: 16px 18px;
    overflow-y: auto; max-height: 600px;
    font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.md-preview h1, .md-preview h2, .md-preview h3,
.kb-body h1, .kb-body h2, .kb-body h3 {
    font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
    margin: 18px 0 10px; line-height: 1.25;
}
.md-preview h1, .kb-body h1 { font-size: 22px; margin-top: 0; }
.md-preview h2, .kb-body h2 { font-size: 18px; }
.md-preview h3, .kb-body h3 { font-size: 15px; }
.md-preview p, .kb-body p { margin: 0 0 12px; }
.md-preview ul, .md-preview ol,
.kb-body ul, .kb-body ol { margin: 0 0 14px; padding-left: 22px; }
.md-preview li, .kb-body li { margin: 4px 0; }
.md-preview code, .kb-body code {
    font-family: var(--mono); font-size: 12.5px;
    background: var(--paper-2); padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--rule); color: var(--ink);
}
.md-preview pre, .kb-body pre {
    background: var(--ink); color: var(--paper);
    padding: 14px 16px; border-radius: 8px;
    overflow-x: auto; margin: 12px 0 16px;
    font-size: 12.5px;
}
.md-preview pre code, .kb-body pre code {
    background: transparent; border: none; color: inherit;
    font-size: inherit; padding: 0;
}
.md-preview a, .kb-body a {
    color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}
.md-hint { display: block; color: var(--ink-3); font-size: 11px; margin-top: 6px; }
.md-hint code {
    background: var(--paper-2); border: 1px solid var(--rule);
    padding: 1px 5px; border-radius: 3px; font-size: 10.5px;
}

/* dettaglio KB: header card + body */
.kb-header-card {
    border: 1px solid var(--rule); border-radius: 16px;
    background: var(--paper); padding: 22px 24px;
}
.kb-summary {
    font-size: 15px; color: var(--ink-2); line-height: 1.55;
    margin: 6px 0 0;
}
.kb-body {
    border: 1px solid var(--rule); border-radius: 16px;
    background: var(--paper); padding: 24px 28px;
    font-size: 15px; line-height: 1.65; color: var(--ink);
}

@media (max-width: 980px) {
    .md-editor { grid-template-columns: 1fr; }
    .md-preview { max-height: 400px; }
}

/* ====== TICKETS — tag stato + priorita' ====== */
.tag-tstatus { color: var(--ink-2); }
.tag-tstatus.tag-tstatus-open         { color: #1e3a8a; background: #dbeafe; border-color: #bfdbfe; }
.tag-tstatus.tag-tstatus-triage_ai    { color: var(--accent-ink); background: color-mix(in oklch, var(--accent) 18%, var(--paper)); border-color: color-mix(in oklch, var(--accent) 30%, var(--rule)); }
.tag-tstatus.tag-tstatus-in_progress  { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tag-tstatus.tag-tstatus-waiting_user { color: #6b21a8; background: #f3e8ff; border-color: #e9d5ff; }
.tag-tstatus.tag-tstatus-resolved     { color: #14532d; background: #dcfce7; border-color: #bbf7d0; }
.tag-tstatus.tag-tstatus-closed       { color: #374151; background: #f3f4f6; border-color: #e5e7eb; }

.tag-prio { color: var(--ink-2); }
.tag-prio.tag-prio-low    { color: #374151; background: #f3f4f6; border-color: #e5e7eb; }
.tag-prio.tag-prio-normal { color: #1e3a8a; background: #dbeafe; border-color: #bfdbfe; }
.tag-prio.tag-prio-high   { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tag-prio.tag-prio-urgent { color: #7f1d1d; background: #fee2e2; border-color: #fecaca; }

/* riga tabella ticket: hover */
.ticket-list tbody tr { transition: background .1s ease; }
.ticket-list tbody tr:hover { background: var(--paper-2); }

/* dashboard widget */
.dashboard-section { margin: 24px 0 28px; }
.dashboard-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
}
.dashboard-section-head h3 {
    font-weight: 500; font-size: 18px; letter-spacing: -0.015em;
    margin: 0; display: flex; align-items: baseline; gap: 10px;
}
.dashboard-section-head h3 .mono { color: var(--ink-3); font-size: 11px; }
.small-link { color: var(--ink-3); text-decoration: none; font-size: 11px; }
.small-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.empty-state {
    border: 1px dashed var(--rule); border-radius: 14px;
    padding: 36px 24px; text-align: center;
    background: var(--paper-2); color: var(--ink-3);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-state i { font-size: 32px; color: var(--ink-3); }
.empty-state p { margin: 0; font-size: 14px; }
.empty-state .btn { margin-top: 6px; }
.empty-state-inline {
    border: 1px dashed var(--rule); border-radius: 10px;
    padding: 16px 18px; color: var(--ink-3); font-size: 13.5px;
    text-align: center; margin: 12px 0;
}

/* page-head: layout flessibile per inserire CTA a destra */
.app-body .page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 24px;
}
.app-body .page-head .ticket-code {
    color: var(--ink-3); font-size: 12px;
}

/* ====== TICKET DETAIL (show.php) ====== */
.ticket-show .ticket-grid {
    display: grid; grid-template-columns: 1fr 320px; gap: 28px;
    align-items: start;
}
.ticket-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ticket-side { display: flex; flex-direction: column; gap: 16px; }

/* header card del ticket (titolo + body iniziale) */
.ticket-header-card {
    border: 1px solid var(--rule); border-radius: 16px;
    background: var(--paper); padding: 22px 24px;
}
.ticket-header-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    margin-bottom: 10px;
}
.ticket-header-meta .tag { margin-left: 8px; }
.ticket-header-meta strong { font-weight: 500; color: var(--ink-2); }
.ticket-title {
    font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em;
    margin: 0 0 14px;
}
.ticket-body-md {
    color: var(--ink-2); font-size: 14.5px; line-height: 1.6;
    white-space: pre-wrap; word-wrap: break-word;
}

/* sidebar ticket */
.ticket-side-section {
    border: 1px solid var(--rule); border-radius: 14px;
    background: var(--paper); padding: 16px 18px;
}
.ticket-side-section h4 {
    font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
    margin: 0 0 12px; color: var(--ink-3);
}
.kv.compact th, .kv.compact td { padding: 6px 8px; font-size: 12.5px; }
.kv.compact th { font-size: 10px; width: 110px; background: transparent; padding-left: 0; }
.kv.compact td { padding-right: 0; }
.kv.compact tr { border-bottom: none; }
.admin-form.compact { display: flex; flex-direction: column; gap: 8px; }
.admin-form.compact select,
.admin-form.compact input { font-size: 12.5px; padding: 8px 10px; }
.admin-form.compact .btn { align-self: flex-start; }

/* timeline messaggi */
.ticket-timeline {
    display: flex; flex-direction: column; gap: 12px;
}
.ticket-timeline h3 {
    font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
    margin: 4px 0 8px; color: var(--ink-3);
}
.msg {
    border: 1px solid var(--rule); border-radius: 12px;
    padding: 14px 16px; background: var(--paper);
}
.msg-user  { border-left: 3px solid #93c5fd; }
.msg-agent { border-left: 3px solid #fcd34d; }
.msg-admin { border-left: 3px solid #c4b5fd; }
.msg-ai    { border-left: 3px solid var(--accent); }
.msg-system{ border-left: 3px solid #d1d5db; background: var(--paper-2); }
.msg-internal {
    background: color-mix(in srgb, #fde68a 18%, var(--paper));
    border-left-color: #f59e0b;
}
.msg-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px; font-size: 12px;
}
.msg-kind {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--paper-2);
}
.msg-author { font-weight: 500; color: var(--ink); font-size: 13px; }
.msg-flag {
    font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    background: #f59e0b; color: #fff;
    padding: 2px 8px; border-radius: 999px;
}
.msg-time { color: var(--ink-3); margin-left: auto; font-size: 11px; }
.msg-body {
    color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
    white-space: pre-wrap; word-wrap: break-word;
}

/* form reply */
.ticket-reply { margin-top: 4px; }
.ticket-reply h3 {
    font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
    margin: 0 0 12px; color: var(--ink-3);
}
.ticket-reply .admin-form { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.ticket-reply textarea { font-family: var(--mono); }
.ticket-reply label.checkbox {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2); margin-top: 8px;
}
.ticket-reply label.checkbox .mono { color: var(--ink-2); }

/* form nuovo ticket */
.ticket-new-form .admin-grid label.span-2 textarea { font-family: var(--mono); resize: vertical; }

/* responsive */
@media (max-width: 1024px) {
    .ticket-show .ticket-grid { grid-template-columns: 1fr; }
    .ticket-side { order: -1; }
}

/* ====== AUTH PAGES (login) ====== */
.auth-shell {
    min-height: calc(100vh - 64px);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px;
}
.auth-card {
    width: 100%; max-width: 480px;
    border: 1px solid var(--rule); border-radius: 20px;
    background: var(--paper); padding: 40px 40px 32px;
}
.auth-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.auth-head h1 {
    font-weight: 500; font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1; letter-spacing: -0.035em; margin: 8px 0 6px;
}
.auth-head .sub { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.auth-error {
    border: 1px solid color-mix(in srgb, #c62828 30%, var(--rule));
    background: color-mix(in srgb, #c62828 6%, var(--paper));
    color: #8a1f1f;
    padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
    margin-bottom: 18px;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label .mono { color: var(--ink-3); }
.auth-form input {
    font-family: var(--mono); font-size: 14px;
    padding: 11px 14px;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--paper-2); color: var(--ink);
    outline: none; transition: border-color .15s ease, background .15s ease;
}
.auth-form input:focus {
    border-color: var(--ink); background: var(--paper);
}
.auth-submit { justify-content: center; margin-top: 6px; height: 44px; font-size: 15px; }
.auth-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 11px; }

/* Workspace selector: input + suffisso .deskpilotapp.cloud */
.workspace-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--paper-2); overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.workspace-input:focus-within { border-color: var(--ink); background: var(--paper); }
.workspace-input input {
    flex: 1; border: none; background: transparent;
    padding: 11px 14px; font-family: var(--mono); font-size: 14px; color: var(--ink);
    outline: none; min-width: 0;
}
.workspace-input .suffix {
    display: flex; align-items: center; padding: 0 14px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    background: var(--paper-2); border-left: 1px solid var(--rule);
}

.auth-foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.auth-foot a:hover { color: var(--ink); }

/* ====== DEMO PAGE (form richiesta demo) ====== */
.demo-page { padding: 56px 0 96px; }
.demo-page h1 {
    font-weight: 500; font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.05; letter-spacing: -0.045em;
    margin: 18px 0 14px; max-width: 22ch;
}
.demo-page h1 em { font-style: italic; }
.demo-page .lead { color: var(--ink-2); font-size: 17px; max-width: 60ch; line-height: 1.55; margin: 0 0 36px; }
.demo-form {
    border: 1px solid var(--rule); border-radius: 20px;
    background: var(--paper); padding: 36px;
}
.demo-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px;
}
.demo-grid label { display: flex; flex-direction: column; gap: 6px; }
.demo-grid label.span-2 { grid-column: span 2; }
.demo-grid label .mono { color: var(--ink-3); }
.demo-grid input,
.demo-grid select,
.demo-grid textarea {
    font-family: var(--mono); font-size: 14px;
    padding: 11px 14px;
    border: 1px solid var(--rule); border-radius: 10px;
    background: var(--paper-2); color: var(--ink);
    outline: none; transition: border-color .15s ease, background .15s ease;
    width: 100%;
}
.demo-grid textarea { resize: vertical; font-family: var(--mono); }
.demo-grid input:focus,
.demo-grid select:focus,
.demo-grid textarea:focus { border-color: var(--ink); background: var(--paper); }
.demo-grid .has-error input,
.demo-grid .has-error select,
.demo-grid .has-error textarea {
    border-color: #c62828;
    background: color-mix(in srgb, #c62828 5%, var(--paper));
}
.demo-grid .field-err {
    color: #8a1f1f; font-size: 12px;
    font-family: var(--mono);
}
.demo-grid .field-status {
    font-family: var(--mono); font-size: 12px;
    min-height: 16px;
    color: var(--ink-3);
}
.demo-grid .field-status.fs-ok       { color: #15803d; }
.demo-grid .field-status.fs-err      { color: #8a1f1f; }
.demo-grid .field-status.fs-checking { color: var(--ink-3); font-style: italic; }
.demo-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid var(--rule);
}
.demo-disclaimer {
    margin-top: 18px; color: var(--ink-3); font-size: 11px;
}
.demo-disclaimer a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* Success page */
.demo-success {
    margin-top: 24px;
    padding: 36px;
    border: 1px solid var(--rule); border-radius: 20px;
    background: var(--paper);
}
.demo-success h1 { margin-top: 8px; }
.demo-success .lead { font-size: 16px; max-width: 56ch; }
.demo-success a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-success .cta-actions { display: flex; margin-top: 28px; }

@media (max-width: 720px) {
    .demo-grid { grid-template-columns: 1fr; gap: 16px; }
    .demo-grid label.span-2 { grid-column: span 1; }
    .demo-form { padding: 24px; }
}

/* ====== APP SHELL (post-login, layout fisso) ======
   - .app-topbar  : fisso in alto (full width)
   - .app-side    : fissa a sinistra, scrollabile internamente
   - .app-main    : centro, scrollabile internamente
   - footer del sito NASCOSTO via body.is-app (gia' in PHP)
   ----------------------------------------------------------------- */

:root {
    --app-topbar-h: 64px;
    --app-side-w:   260px;
    --app-footer-h: 40px;
}

body.is-app { overflow: hidden; }   /* niente scroll esterno; scrollano solo side e main */

.app-shell {
    position: relative;
    height: 100vh; width: 100%;
}

/* ---- Topbar fisso (full width, sopra a tutto) ---- */
.app-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--app-topbar-h);
    z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.app-topbar .left { display: flex; align-items: center; gap: 14px; }
.app-topbar .left .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
    font-size: 15px;
}
.app-topbar .left .brand img { width: 24px; height: 24px; display: block; }
.app-topbar .left .divider {
    width: 1px; height: 22px; background: var(--rule);
}
.app-topbar .left .tenant-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3);
}
.app-topbar .left .tenant-pill strong { color: var(--ink-2); font-weight: 500; }
.app-topbar .right { display: flex; align-items: center; gap: 12px; }
.app-topbar .right .u-name { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.app-topbar .btn-logout {
    height: 32px; padding: 0 12px; font-size: 12.5px;
    background: transparent; color: var(--ink-2);
    border-color: var(--rule);
}
.app-topbar .btn-logout:hover { background: var(--paper-2); color: var(--ink); }
.app-topbar .btn-logout i { font-size: 13px; }

/* ---- Sidebar fissa (sotto la topbar, sopra il footer, scrollabile internamente) ---- */
.app-side {
    position: fixed;
    top: var(--app-topbar-h);
    left: 0;
    bottom: var(--app-footer-h);
    width: var(--app-side-w);
    background: var(--ink);
    color: var(--paper);
    padding: 22px 14px 22px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
    /* scrollbar discreta */
    scrollbar-width: thin;
    scrollbar-color: rgba(244,241,234,0.18) transparent;
}
.app-side::-webkit-scrollbar { width: 8px; }
.app-side::-webkit-scrollbar-thumb { background: rgba(244,241,234,0.18); border-radius: 4px; }
.app-side::-webkit-scrollbar-thumb:hover { background: rgba(244,241,234,0.3); }

.app-side-section { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 50%, transparent);
    padding: 10px 12px 4px;
}
.app-side-section:first-child { padding-top: 0; }

.app-side-menu { display: flex; flex-direction: column; gap: 2px; }
.app-side-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px;
    /* schiarita: era 75%, ora 88% */
    color: color-mix(in srgb, var(--paper) 88%, transparent);
    transition: background .12s ease, color .12s ease;
    text-decoration: none;
}
.app-side-menu a i {
    /* Icone Flaticon: dimensione e baseline allineata al testo */
    font-size: 16px;
    line-height: 1;
    width: 18px; text-align: center;
    color: color-mix(in srgb, var(--paper) 75%, transparent);
    transition: color .12s ease;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.app-side-menu a:hover:not(.disabled) {
    background: rgba(255,255,255,0.07);
    color: var(--paper);
}
.app-side-menu a:hover:not(.disabled) i { color: var(--paper); }
.app-side-menu a.active {
    background: rgba(255,255,255,0.12);
    color: var(--paper);
}
.app-side-menu a.active i { color: var(--accent); }
.app-side-menu a.disabled {
    color: color-mix(in srgb, var(--paper) 35%, transparent);
    cursor: not-allowed;
}
.app-side-menu a.disabled i { color: color-mix(in srgb, var(--paper) 25%, transparent); }
.app-side-menu a .soon {
    margin-left: auto;
    font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 40%, transparent);
}

/* ---- Main scrollabile (tra topbar e footer, a destra della sidebar) ---- */
.app-main {
    position: absolute;
    top: var(--app-topbar-h);
    left: var(--app-side-w);
    right: 0;
    bottom: var(--app-footer-h);
    overflow-y: auto;
    background: var(--paper);
    /* scrollbar discreta */
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.app-main::-webkit-scrollbar { width: 10px; }
.app-main::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; }

/* ---- Footer fisso (full width, sotto sidebar e main) ---- */
.app-footer {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--app-footer-h);
    z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
    color: var(--ink-3);
}
.app-footer .left  { display: flex; gap: 14px; align-items: center; }
.app-footer .right { display: flex; gap: 18px; align-items: center; }
.app-footer a { color: var(--ink-2); text-decoration: none; }
.app-footer a:hover { color: var(--ink); }
.app-footer .sep { width: 1px; height: 12px; background: var(--rule); }

.app-body { padding: 36px 32px 48px; }
.app-body .page-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin-bottom: 24px;
}
.app-body h2 {
    font-weight: 500; font-size: clamp(26px, 3.4vw, 42px);
    line-height: 1.1; letter-spacing: -0.04em; margin: 14px 0 12px;
    max-width: 22ch;
}
.app-body h2 em { font-style: italic; }
.app-body .lead { color: var(--ink-2); font-size: 16px; max-width: 60ch; line-height: 1.55; }
.app-body code {
    font-family: var(--mono); font-size: 13px;
    background: var(--paper-2); border: 1px solid var(--rule);
    padding: 2px 6px; border-radius: 4px; color: var(--ink);
}
.app-body .hero-meta { margin-top: 32px; }

@media (max-width: 880px) {
    :root { --app-side-w: 100%; }
    body.is-app { overflow: auto; }
    .app-shell { height: auto; min-height: 100vh; }
    .app-topbar { position: static; }
    .app-side {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row; flex-wrap: wrap; gap: 6px;
        padding: 12px 14px;
    }
    .app-side-section { display: none; }
    .app-side-menu { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .app-side-menu a { padding: 7px 10px; font-size: 12.5px; }
    .app-side-menu a .soon { display: none; }
    .app-main { position: static; height: auto; }
    .app-topbar .left .tenant-pill { display: none; }
    .app-footer { position: static; height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
}

/* ====== ADMIN CONSOLE (admin.deskpilotapp.cloud) ====== */
.admin-login .auth-head h1 em { font-style: italic; }
.admin-login .google-btn {
    display: inline-flex; align-items: center; gap: 10px;
    width: 100%; justify-content: center;
    background: #fff; color: #1f1f1f;
    border: 1px solid #d0d7de; border-radius: 8px;
    height: 44px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
    transition: background .15s ease, box-shadow .15s ease;
    text-decoration: none;
}
.admin-login .google-btn:hover { background: #f6f8fa; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transform: none; }
.admin-login code { font-family: var(--mono); font-size: 12px; background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }

/* ====== ADMIN AUTH DENIED ====== */
.denied-card {
    max-width: 540px;
    border-color: color-mix(in srgb, #c62828 30%, var(--rule));
}
.denied-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: color-mix(in srgb, #c62828 8%, var(--paper));
    border: 1px solid color-mix(in srgb, #c62828 25%, var(--rule));
    display: flex; align-items: center; justify-content: center;
    color: #c62828;
}
.denied-icon i { font-size: 32px; line-height: 1; }
.denied-card .auth-head h1 {
    font-size: clamp(24px, 3vw, 32px);
    margin-top: 4px;
}
.denied-account {
    margin: 20px 0 4px;
    padding: 14px 16px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    text-align: center;
}
.denied-account .mono { color: var(--ink-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.denied-account-email {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 8px;
}
.denied-account-email strong { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.denied-account-email .mono { font-size: 13px; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.denied-body {
    margin: 20px 0 24px;
    font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.denied-body p { margin: 0 0 12px; }
.denied-body p:last-child { margin-bottom: 0; }
.denied-body .muted { color: var(--ink-3); font-size: 13.5px; }
.denied-body code {
    font-family: var(--mono); font-size: 12px;
    background: var(--paper-2); padding: 2px 6px; border-radius: 4px;
}
.denied-actions {
    display: flex; flex-direction: column; gap: 10px;
    margin: 0 0 22px;
}
.denied-actions .btn { justify-content: center; height: 42px; }
.denied-actions .btn i { font-size: 13px; }

/* avatar superadmin nel topbar */
.admin-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--rule);
}

/* tabelle admin */
.admin-table-wrap {
    border: 1px solid var(--rule); border-radius: 12px;
    overflow: hidden; background: var(--paper);
    margin: 18px 0 28px;
}
.admin-table {
    width: 100%; border-collapse: collapse;
    font-size: 13.5px;
}
.admin-table th, .admin-table td {
    text-align: left; padding: 12px 14px; vertical-align: middle;
    border-bottom: 1px solid var(--rule);
}
.admin-table thead th {
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500; background: var(--paper-2);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: color-mix(in srgb, var(--paper-2) 60%, var(--paper)); }
.admin-table .num { text-align: right; font-family: var(--mono); }
.admin-table .empty { text-align: center; color: var(--ink-3); padding: 28px 14px; font-style: italic; }
.admin-table .tenant-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink); font-weight: 500; text-decoration: none;
}
.admin-table .tenant-link i { color: var(--ink-3); font-size: 14px; }
.admin-table .tenant-link:hover { color: var(--accent-ink); }
.admin-table .tenant-link:hover i { color: var(--accent); }

/* tag (piano / stato / ruolo) */
.tag {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    background: var(--paper-2); color: var(--ink-2);
}
.tag-plan { color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 35%, var(--rule)); background: color-mix(in oklch, var(--accent) 12%, var(--paper)); }
.tag-status.tag-active    { color: #14532d; background: #dcfce7; border-color: #bbf7d0; }
.tag-status.tag-suspended { color: #7c2d12; background: #ffedd5; border-color: #fed7aa; }
.tag-status.tag-deleted   { color: #7f1d1d; background: #fee2e2; border-color: #fecaca; }
.tag-status.tag-invited   { color: #1e3a8a; background: #dbeafe; border-color: #bfdbfe; }
.tag-status.tag-disabled  { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
.tag-role.tag-role-admin { color: #581c87; background: #f3e8ff; border-color: #e9d5ff; }
.tag-role.tag-role-agent { color: #1e3a8a; background: #dbeafe; border-color: #bfdbfe; }
.tag-role.tag-role-user  { color: #374151; background: #f3f4f6; border-color: #e5e7eb; }

/* tag stati lead */
.tag-lead.tag-lead-new        { color: #1e3a8a; background: #dbeafe; border-color: #bfdbfe; }
.tag-lead.tag-lead-contacted  { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tag-lead.tag-lead-qualified  { color: #14532d; background: #dcfce7; border-color: #bbf7d0; }
.tag-lead.tag-lead-converted  { color: #581c87; background: #f3e8ff; border-color: #e9d5ff; }
.tag-lead.tag-lead-rejected   { color: #7f1d1d; background: #fee2e2; border-color: #fecaca; }

/* filter chips (filtro stato lead) */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.filter-chips .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--paper);
    font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-2); text-decoration: none;
}
.filter-chips .chip:hover { border-color: var(--ink-3); color: var(--ink); }
.filter-chips .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-chips .chip .n {
    background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 999px;
    font-size: 10px;
}
.filter-chips .chip.active .n { background: rgba(255,255,255,0.18); }

/* badge contatore sidebar */
.app-side-menu a .badge-n {
    margin-left: auto;
    background: var(--accent); color: var(--ink);
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    padding: 1px 7px; border-radius: 999px;
}

/* tabella key/value (dettaglio lead) */
.kv {
    width: 100%; border-collapse: collapse;
    font-size: 13.5px;
}
.kv th, .kv td {
    text-align: left; padding: 10px 14px; vertical-align: top;
    border-bottom: 1px solid var(--rule);
}
.kv tr:last-child th, .kv tr:last-child td { border-bottom: none; }
.kv th {
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500; width: 200px;
    background: var(--paper-2);
}
.kv td a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* credentials box (post-conversion) */
.credentials-box {
    border: 2px solid var(--accent);
    background: color-mix(in oklch, var(--accent) 8%, var(--paper));
}
.credentials-box h3 i, .credentials-box h3 { color: var(--accent-ink); }
.credentials-box table.creds {
    width: 100%; border-collapse: collapse; margin: 16px 0;
    background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
}
.credentials-box table.creds th,
.credentials-box table.creds td {
    padding: 10px 14px; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--rule); font-size: 13.5px;
}
.credentials-box table.creds tr:last-child th,
.credentials-box table.creds tr:last-child td { border-bottom: none; }
.credentials-box table.creds th {
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); width: 160px; font-weight: 500;
}
.credentials-box table.creds code {
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    background: var(--paper-2); padding: 4px 10px; border-radius: 4px;
    user-select: all; /* facile copia */
}

/* admin-form inline (es. cambio stato lead) */
.admin-form.inline { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.admin-form.inline label { flex: 0 1 220px; }
.admin-form.inline .btn { height: 38px; }

/* form admin (riusa workspace-input e demo-grid pattern) */
.admin-section {
    margin: 32px 0 12px;
    padding: 24px;
    border: 1px solid var(--rule); border-radius: 16px;
    background: var(--paper);
}
.admin-section h3 {
    font-weight: 500; font-size: 18px; letter-spacing: -0.015em;
    margin: 0 0 18px;
}
.admin-section h4 {
    font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.admin-section h4.mt-32 { margin-top: 32px; }

.admin-form .admin-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
}
.admin-form .admin-grid label.span-2 { grid-column: span 2; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; }
.admin-form label .mono { color: var(--ink-3); }
.admin-form input, .admin-form select, .admin-form textarea {
    font-family: var(--mono); font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--rule); border-radius: 8px;
    background: var(--paper-2); color: var(--ink);
    outline: none; width: 100%;
}
.admin-form input:disabled { background: color-mix(in srgb, var(--paper-2) 50%, transparent); color: var(--ink-3); }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
    border-color: var(--ink); background: var(--paper);
}
.admin-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.admin-actions .btn i { font-size: 13px; }
.admin-actions .btn.danger {
    color: #7c2d12; border-color: #fed7aa; background: transparent;
}
.admin-actions .btn.danger:hover { background: #fff7ed; }

/* btn xs (azioni di riga) */
.btn.xs { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.xs i { font-size: 12px; }
.btn.danger { color: #7c2d12; border-color: #fed7aa; background: transparent; }

/* row actions (details/summary) */
.row-actions {
    position: relative;
}
.row-actions summary {
    list-style: none; cursor: pointer;
    width: 32px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.row-actions summary::-webkit-details-marker { display: none; }
.row-actions-body {
    position: absolute; right: 0; top: calc(100% + 6px);
    z-index: 20;
    min-width: 280px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(14,17,22,0.10);
    padding: 14px;
    display: flex; flex-direction: column; gap: 12px;
}
.mini-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--rule); }
.mini-form:first-child { border-top: none; padding-top: 0; }
.mini-form label { display: flex; flex-direction: column; gap: 4px; }
.mini-form .mono { color: var(--ink-3); font-size: 10.5px; }
.mini-form input, .mini-form select {
    font-family: var(--mono); font-size: 12.5px;
    padding: 7px 10px; border: 1px solid var(--rule); border-radius: 6px;
    background: var(--paper-2); color: var(--ink); width: 100%;
}
.mini-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* user cell (nome + email mono) */
.u-cell { display: flex; flex-direction: column; gap: 2px; }
.u-cell strong { font-weight: 500; font-size: 13.5px; letter-spacing: -0.01em; }
.u-cell .mono { font-size: 11px; color: var(--ink-3); }

/* back link / flash */
.back-link { color: var(--ink-3); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.auth-success {
    border: 1px solid #bbf7d0; background: #dcfce7; color: #14532d;
    padding: 10px 14px; border-radius: 10px; font-size: 13.5px;
    margin: 0 0 18px;
}

/* h2 nel dettaglio tenant con icona inline */
.app-body h2 i.fi { font-size: 22px; color: var(--ink-3); vertical-align: -2px; margin-right: 6px; }
.app-body h2 .tag { font-size: 11px; margin-left: 8px; vertical-align: middle; }

@media (max-width: 880px) {
    .admin-form .admin-grid { grid-template-columns: 1fr; }
    .admin-form .admin-grid label.span-2 { grid-column: 1; }
    .row-actions-body { right: auto; left: 0; min-width: 240px; }
    .admin-table-wrap { overflow-x: auto; }
    .admin-table { min-width: 700px; }
}

/* ====== COOKIE BANNER ====== */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    z-index: 100;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 16px;
    padding: 18px 22px;
    display: none;
    align-items: center; justify-content: space-between; gap: 20px;
    box-shadow: 0 12px 40px rgba(14, 17, 22, 0.18);
    font-size: 14px; line-height: 1.5;
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner p { margin: 0; max-width: 70ch; color: color-mix(in srgb, var(--paper) 88%, transparent); }
.cookie-banner p a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner p a:hover { color: var(--accent); }
.cookie-banner .actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cookie-banner .btn.ghost { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.cookie-banner .btn:hover { transform: translateY(-1px); }

/* ====== POLICY PAGE ====== */
.policy { padding: 64px 0 96px; }
.policy h1 {
    font-weight: 500; font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05; letter-spacing: -0.045em; margin: 24px 0 12px;
    max-width: 22ch;
}
.policy h1 em { font-style: italic; }
.policy .updated { color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.policy .grid {
    display: grid; grid-template-columns: 220px 1fr; gap: 48px;
    margin-top: 64px; align-items: start;
}
.policy aside.toc { position: sticky; top: 88px; }
.policy aside.toc .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.policy aside.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: toc; }
.policy aside.toc li { counter-increment: toc; font-size: 13.5px; line-height: 1.4; }
.policy aside.toc li a { color: var(--ink-2); display: flex; gap: 10px; }
.policy aside.toc li a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.policy aside.toc li a:hover { color: var(--ink); }
.policy .body { max-width: 70ch; }
.policy .body section { padding: 32px 0 8px; border-top: 1px solid var(--rule); }
.policy .body section:first-of-type { border-top: none; padding-top: 0; }
.policy .body h2 { font-weight: 500; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.025em; margin: 0 0 16px; }
.policy .body h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.policy .body h3 { font-weight: 500; font-size: 16px; letter-spacing: -0.01em; margin: 24px 0 8px; }
.policy .body p, .policy .body li { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.policy .body p { margin: 0 0 14px; }
.policy .body ul { padding-left: 18px; margin: 0 0 14px; }
.policy .body li { margin: 4px 0; }
.policy .body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.policy .body a:hover { text-decoration-color: var(--accent); }
.policy .body table {
    width: 100%; border-collapse: collapse; margin: 16px 0 24px;
    font-size: 13.5px;
}
.policy .body table th, .policy .body table td {
    text-align: left; padding: 12px 14px; vertical-align: top;
    border-bottom: 1px solid var(--rule);
}
.policy .body table th {
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500; background: var(--paper-2);
}
.policy .body table td { color: var(--ink-2); }
.policy .body table code {
    font-family: var(--mono); font-size: 12px; color: var(--ink);
    background: var(--paper-2); padding: 2px 6px; border-radius: 4px;
}
.reset-box {
    margin-top: 18px;
    border: 1px solid var(--rule); background: var(--paper-2);
    border-radius: 14px; padding: 22px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.reset-box .info { display: flex; flex-direction: column; gap: 4px; max-width: 50ch; }
.reset-box .info .ttl { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.reset-box .info .sub { font-size: 13px; color: var(--ink-2); }
.reset-status { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-left: 8px; opacity: 0; transition: opacity .2s ease; }
.reset-status.is-visible { opacity: 1; }

/* ====== HELP / DOCS ====== */
.help-list { list-style: none; padding: 0; margin: 0; }
.help-list li { padding: 10px 0; border-bottom: 1px dashed var(--rule); }
.help-list li:last-child { border-bottom: none; }
.help-list li a { color: var(--ink); text-decoration: none; }
.help-list li a:hover strong { text-decoration: underline; }
.help-summary { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.help-article { color: var(--ink); line-height: 1.65; font-size: 14.5px; max-width: 860px; }
.help-article h1 { font-size: 22px; margin: 28px 0 12px; }
.help-article h2 { font-size: 18px; margin: 24px 0 10px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.help-article h3 { font-size: 15px; margin: 20px 0 8px; color: var(--ink-2); }
.help-article p { margin: 0 0 12px; }
.help-article ul, .help-article ol { margin: 0 0 12px 20px; }
.help-article li { margin: 4px 0; }
.help-article code { background: var(--paper-2); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: 12.5px; }
.help-article pre { background: var(--ink); color: var(--paper); padding: 14px 16px; border-radius: 6px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; margin: 0 0 16px; }
.help-article pre code { background: transparent; padding: 0; color: inherit; }
.help-article a { color: var(--accent-ink); }
.help-article blockquote { border-left: 3px solid var(--accent-ink); padding: 8px 14px; margin: 0 0 14px; background: var(--paper-2); color: var(--ink-2); font-size: 13.5px; }
.help-article strong { color: var(--ink); }

/* ====== SWEETALERT2 THEME (.dp-theme) ====== */
.swal2-container.dp-theme { font-family: var(--sans, ui-sans-serif, system-ui, sans-serif); }
.swal2-popup.dp-theme {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(14, 17, 22, 0.18);
    padding: 28px 28px 22px;
    max-width: 460px;
}
.swal2-popup.dp-theme .swal2-title {
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
    font-family: var(--sans, system-ui);
    letter-spacing: -0.01em;
    padding: 0 0 10px;
}
.swal2-popup.dp-theme .swal2-html-container {
    color: var(--ink-2, #4b5563);
    font-size: 14px;
    line-height: 1.55;
    margin: 6px 0 0;
    padding: 0;
}
.swal2-popup.dp-theme .swal2-html-container code,
.swal2-popup.dp-theme .swal2-html-container .mono { font-family: var(--mono); font-size: 12.5px; }
.swal2-popup.dp-theme .swal2-icon { border-width: 2px; margin: 0 auto 18px; width: 56px; height: 56px; }
.swal2-popup.dp-theme .swal2-icon .swal2-icon-content { font-size: 28px; }
.swal2-popup.dp-theme .swal2-icon.swal2-warning { border-color: #b8860b; color: #b8860b; }
.swal2-popup.dp-theme .swal2-icon.swal2-question { border-color: var(--ink); color: var(--ink); }
.swal2-popup.dp-theme .swal2-icon.swal2-success { border-color: #15803d; color: #15803d; }
.swal2-popup.dp-theme .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #15803d; }
.swal2-popup.dp-theme .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(21, 128, 61, .3); }
.swal2-popup.dp-theme .swal2-icon.swal2-error { border-color: #8a1f1f; color: #8a1f1f; }
.swal2-popup.dp-theme .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #8a1f1f; }

.swal2-popup.dp-theme .swal2-actions { gap: 8px; margin: 20px 0 0; padding: 0; }
.swal2-popup.dp-theme .swal2-styled {
    font-family: var(--sans, system-ui);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.01em;
    height: 38px;
    padding: 0 18px;
    border-radius: 6px;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease;
}
.swal2-popup.dp-theme .swal2-styled:focus { box-shadow: none !important; outline: 2px solid var(--accent-ink, var(--accent)); outline-offset: 2px; }
.swal2-popup.dp-theme .swal2-confirm {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border: 1px solid var(--ink) !important;
}
.swal2-popup.dp-theme .swal2-confirm:hover { background: #000 !important; }
.swal2-popup.dp-theme.dp-danger .swal2-confirm {
    background: #8a1f1f !important;
    border-color: #8a1f1f !important;
}
.swal2-popup.dp-theme.dp-danger .swal2-confirm:hover { background: #6b1717 !important; }
.swal2-popup.dp-theme .swal2-cancel {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
}
.swal2-popup.dp-theme .swal2-cancel:hover { background: rgba(14, 17, 22, 0.04) !important; }
.swal2-backdrop-show { background: rgba(14, 17, 22, 0.35) !important; }

/* ====== RESPONSIVE ====== */
@media (max-width: 980px) {
    .section-head { grid-template-columns: 1fr; gap: 18px; }
    .section-head h2 { grid-column: 1; }
    .hero-meta { grid-template-columns: repeat(2, 1fr); }
    .hero-meta .cell { border-right: none; border-bottom: 1px solid var(--rule); padding: 18px 0; }
    .hero-meta .cell:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 16px; }
    .hero-meta .cell:nth-child(even) { padding-left: 16px; }
    .problems { grid-template-columns: 1fr; }
    .problem { border-right: none; border-bottom: 1px solid var(--rule); padding: 24px 0; }
    .problem:last-child { border-bottom: none; }
    .flow-grid { grid-template-columns: repeat(2, 1fr); }
    .features { grid-template-columns: 1fr; }
    .feat { grid-column: span 1; border-right: none !important; padding-right: 0 !important; padding: 24px 0; }
    .arch { grid-template-columns: 1fr; gap: 32px; }
    .preview { grid-template-columns: 1fr; }
    .preview .side { display: none; }
    .navlinks { display: none; }
    .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; }
    .cookie-banner .actions { justify-content: flex-end; }
    .policy .grid { grid-template-columns: 1fr; gap: 32px; }
    .policy aside.toc { position: static; }
    .reset-box { flex-direction: column; align-items: flex-start; }
}