/* UniFi Voucher Manager – single stylesheet
   Palette: network ink + "signal" blue
   ---------------------------------------------- */
:root {
    --ink:        #10202b;   /* main text */
    --ink-soft:   #51636f;   /* secondary text */
    --paper:      #f3f6f8;   /* page background */
    --card:       #ffffff;
    --line:       #dde5ea;
    --signal:     #0a6ed1;   /* action blue */
    --signal-ink: #084f96;
    --ok-bg:      #e3f4e8;  --ok-ink:  #1d7a3a;
    --warn-bg:    #fdf3dd;  --warn-ink:#8a6410;
    --err-bg:     #fbe7e7;  --err-ink: #a52a2a;
    --mono: "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
    --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The hidden attribute always wins: .panel.open (display:block) used to
   override it and the Google/SMTP panels of the Email tab stayed visible
   both at once, whatever method was selected. */
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
}
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 15px; margin: 20px 0 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
a  { color: var(--signal); }
code { font-family: var(--mono); font-size: 13px; background: #eef2f5; padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--ink-soft); }
small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 4px; font-weight: normal; }

/* ------------------------------------------------------------ logo */
.logo-mark {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(145deg, var(--signal), var(--signal-ink));
    color: #fff; font-weight: 700; font-family: var(--mono);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.logo-mark.sm { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; }

/* --------------------------------------------------------- installer */
.install-page { display: flex; flex-direction: column; align-items: center; padding: 6vh 16px; }
.install-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 28px; width: 100%; max-width: 560px;
    box-shadow: 0 10px 30px rgba(16,32,43,.08);
}
.install-card.narrow { max-width: 400px; }
.install-card label { display: block; margin: 12px 0 0; font-weight: 600; font-size: 13px; }
.install-card input[type="text"], .install-card input[type="password"],
.install-card input[type="email"], .install-card input[type="number"] {
    display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
    font: inherit; background: var(--card); color: var(--ink);
}
.install-card .check-label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.install-card .check-label input { width: auto; margin: 0; }
.install-card .btn.wide { width: 100%; margin-top: 14px; }
.install-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.install-head p { margin: 2px 0 0; }
.req-list ul { list-style: none; padding: 0; margin: 0 0 10px; }
.req-list li { padding: 4px 0; font-size: 14px; }
.req-ok   { color: var(--ok-ink); }
.req-fail { color: var(--err-ink); font-weight: 600; }

/* passi dell'installer */
.steps {
    list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 18px;
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
}
.steps li { flex: 1; text-align: center; padding: 7px 4px; border-radius: 7px; background: #eef2f5; }
.steps li.current   { background: var(--signal); color: #fff; }
.steps li.done-step { background: var(--ok-bg); color: var(--ok-ink); }

.hint-box {
    background: #f0f6fd; border: 1px solid #cfe0f3; border-radius: 10px;
    padding: 12px 16px; font-size: 13px; margin-bottom: 16px;
}
.hint-box ul { margin: 8px 0 8px 18px; padding: 0; }
.hint-box li { margin-bottom: 4px; }
.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.btn-row .btn { margin: 0; }
button.btn { font: inherit; line-height: inherit; }

/* authentication mode selector */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 600px) { .mode-switch { grid-template-columns: 1fr; } }
.mode-option {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
    font-weight: normal; font-size: 13px; cursor: pointer; margin: 0;
}
.mode-option:has(input:checked) { border-color: var(--signal); background: #f0f6fd; }
.mode-option input { width: auto; margin: 3px 0 0; }
.auth-fields { margin-bottom: 4px; }

/* --------------------------------------------------------------- form */
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 13px; }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=email],
input[type=url], input[type=tel], input[type=date], input[type=time], select, textarea {
    display: block; width: 100%; margin-top: 5px;
    padding: 9px 11px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
select { -webkit-appearance: none; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px; }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input:focus, select:focus { outline: 2px solid var(--signal); outline-offset: 0; border-color: var(--signal); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
.joined { display: flex; gap: 6px; margin-top: 5px; }
.joined input, .joined select { margin-top: 0; }
.check-label { display: flex; gap: 8px; align-items: center; font-weight: normal; font-size: 14px; }
.check-label input { width: auto; margin: 0; }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ buttons */
.btn {
    display: inline-block; padding: 9px 16px; font-size: 14px; font-weight: 600;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
    cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn:hover { border-color: var(--signal); color: var(--signal); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.primary:hover { background: var(--signal-ink); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--signal); }
.link-btn.danger { color: var(--err-ink); }
.btn.danger { background: #b93434; border-color: #b93434; color: #fff; }
.btn.danger:hover:not(:disabled) { background: #a12c2c; }
.hidden-form { display: none; }

/* -------------------------------------------------------------- alert */
.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alert.ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.alert.warn { background: var(--warn-bg); color: var(--warn-ink); }
.alert.err  { background: var(--err-bg);  color: var(--err-ink); }

/* ------------------------------------------------------------- topbar */
.topbar {
    display: flex; align-items: center;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 10px 22px; position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.nav-links { display: flex; gap: 12px 18px; align-items: center; flex: 1 1 auto; min-width: 0; margin-left: 28px; flex-wrap: wrap; }
.topbar .nav-tools { flex: none; }
.nav-spacer { flex: 1; }   /* separates the "work" group from the "administration" group */
.nav-links a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14px; white-space: nowrap; }
/* intermediate widths (tablet, small windows): the items stayed on one
   line but two-word labels broke; here the app name gives way to the
   items, which all stay whole */
@media (max-width: 1060px) and (min-width: 861px) {
    .brand-name { display: none; }
    .nav-links { gap: 12px; margin-left: 16px; }
    .nav-links a { font-size: 13.5px; }
    .nav-tools { margin-left: 10px; }
}
.nav-links a.active { color: var(--signal); }
.nav-links a:hover { color: var(--signal); }
.nav-tools { display: flex; align-items: center; gap: 10px; margin-left: 18px; }

.container { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
.narrow-container { max-width: 680px; }

/* ------------------------------------------------------------ toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.stats { display: flex; gap: 26px; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-size: 22px; line-height: 1.1; }
.stat span { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.stat .sm-text { font-size: 14px; }
.toolbar-actions { display: flex; gap: 10px; }
.inline { display: inline-flex; vertical-align: middle; margin: 0 8px 8px 0; }
.inline .btn { margin: 0; }

/* -------------------------------------------------------------- panel */
.panel {
    display: none; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 4px 20px 20px; margin-bottom: 18px;
}
.panel.open { display: block; }
.advanced { margin: 4px 0 14px; }
.advanced summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; }

/* ------------------------------------------------------------- filtri */
.filters { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tabs { display: flex; gap: 4px; background: #e8eef2; border-radius: 9px; padding: 3px; }
.tab { padding: 6px 13px; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tab.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.search input { width: 240px; margin: 0; }

/* ------------------------------------------------------------ table */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.voucher-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.voucher-table th {
    text-align: left; padding: 11px 12px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-soft); border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.voucher-table td { padding: 10px 12px; border-bottom: 1px solid #edf1f4; vertical-align: middle; }
.voucher-table tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) { .voucher-table tbody tr:hover { background: #f7fafc; } }
.col-check { width: 34px; text-align: center; }
.code { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.note { color: var(--ink-soft); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; color: var(--ink-soft); padding: 34px 12px !important; }
.row-actions { text-align: right; white-space: nowrap; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok     { background: var(--ok-bg);   color: var(--ok-ink); }
.badge.active { background: #e3edfb;        color: var(--signal-ink); }
.badge.used   { background: #ececec;        color: #666; }
.badge.gone   { background: var(--err-bg);  color: var(--err-ink); }

/* ---------------------------------------------------------- print bar */
.print-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 16px; margin-top: 14px; position: sticky; bottom: 12px;
    box-shadow: 0 6px 20px rgba(16,32,43,.10);
}
.inline-label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13px; }
.inline-label input { width: 200px; margin: 0; }
.print-bar .print-tpl-pick { margin: 0; display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.print-bar .print-tpl-pick select { margin: 0; width: auto; }
.print-bar .btn { margin-left: auto; }
.print-bar .btn ~ .btn { margin-left: 0; }   /* the following buttons stay side by side with the first */

/* --------------------------------------------- intestazioni ordinabili */
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--signal); }
.th-sort.sorted { color: var(--signal); }

/* --------------------------- one-line form: field + button aligned */
.form-grid-end { display: grid; grid-template-columns: 1fr auto; gap: 14px;
    align-items: end; margin-bottom: 14px; }
.form-grid-end label { margin-bottom: 0; }
.form-grid-end .btn { white-space: nowrap; }

/* ----------------------------------------------- activity log */
.log-filters { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0 14px; margin-bottom: 6px; }
@media (max-width: 800px) { .log-filters { grid-template-columns: 1fr; } }
.log-table td.log-details { font-size: 13px; color: var(--ink-soft); word-break: break-word; }
.nowrap { white-space: nowrap; }
.log-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

/* ------------------------------------------------- users table */
.users-table .col-mail { text-align: center; width: 46px; font-size: 19px; line-height: 1; }
.users-table td.col-mail input[type=checkbox] { width: 17px; height: 17px; margin: 0 auto; display: block; cursor: pointer; }

/* --------------------------------------------- settings tabs */
/* settings tabs: one row only, width shared out; when they really do not
   fit (long languages, narrow windows) they scroll instead of wrapping */
.settings-tabs { display: flex; flex-wrap: nowrap; gap: 2px; margin-bottom: 16px; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs .tab { flex: 1 0 auto; text-align: center; white-space: nowrap; padding: 6px 10px; }

/* --------------------------------------------------------- statistics */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stats-grid section:first-child { grid-column: 1 / -1; }
.stats-grid > section { min-width: 0; }   /* the heatmap scrolls inside its box instead of widening the page */
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: 6px; }
.bar-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar-slot .bar { width: 100%; background: var(--signal); border-radius: 3px 3px 0 0; }
.chart-labels { display: flex; gap: 3px; margin-top: 4px; }
.chart-labels span { flex: 1; font-size: 10px; color: var(--ink-soft); text-align: center; overflow: visible; white-space: nowrap; }
.hbar { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 9px; }
.hbar-label { font-size: 13px; color: var(--ink-soft); text-align: right; }
.hbar-track { background: #e8eef2; border-radius: 6px; height: 16px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--signal); border-radius: 6px; }
.hbar-value { font-size: 13px; font-weight: 700; }
.stat-warn strong { color: #b93434; }

/* ------------------------------------------------- template management */
.tpl-manager { display: flex; align-items: end; gap: 10px; flex-wrap: wrap;
               padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tpl-picker { flex: 1; min-width: 200px; margin: 0 !important; }
.tpl-picker select { margin-bottom: 0; }
.tpl-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.sm { padding: 7px 11px; font-size: 12.5px; }
.btn.danger-outline { color: var(--err-ink); border-color: var(--err-ink); background: var(--card); }
.btn.danger-outline:hover:not(:disabled) { background: var(--err-bg); }

/* ===================================================== TEMPLATE EDITOR */
.editor-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; margin-top: 22px; }
@media (max-width: 900px) { .editor-layout { grid-template-columns: 1fr; } }

.preview-ticket { background: var(--card); max-width: 320px; }
textarea { resize: vertical; font-family: inherit; }
input[type=range] { width: 100%; margin-top: 8px; }
input[type=color] { display: block; width: 100%; height: 38px; margin-top: 5px; padding: 3px 5px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
input[type=file] { margin-top: 6px; font-size: 13px; }
.period { white-space: nowrap; color: var(--ink-soft); font-size: 13px; }

/* loading overlay */
.loading-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(255, 255, 255, .92);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    transition: opacity .25s ease;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid var(--line); border-top-color: var(--signal);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-weight: 700; font-size: 16px; }
.loading-sub { font-size: 13px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: var(--line); }
    .loading-overlay { transition: none; }
}

/* ===================================================== PRINT PAGE */
.print-page { background: var(--card); padding: 20px; }
.print-toolbar {
    display: flex; gap: 12px; align-items: center; margin-bottom: 20px;
    padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.print-toolbar span { margin-right: auto; font-weight: 600; }

.ticket-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
}
.ticket {
    color: var(--tink, var(--ink));
    border: 0.35px solid #b8c6d1;      /* cutting line: a hairline, the thinnest a printer draws (D-M325) */
    padding: 14px 16px; text-align: center;
    break-inside: avoid; page-break-inside: avoid;
    display: flex; flex-direction: column; gap: 6px;
}
.ticket.no-cut { border-color: transparent; }

/* dense layouts (15+ per sheet): texts and code reduced */
.ticket-grid.compact .ticket { padding: 8px 9px; gap: 3px; }
.ticket-grid.compact .ticket-code { font-size: calc(18px * var(--tscale, 1) * var(--cscale, 1)); padding: 4px 0; }
.ticket-grid.compact .ticket-brand { font-size: calc(8.5px * var(--tscale, 1)); letter-spacing: .18em; }
.ticket-grid.compact .ticket-ssid { font-size: calc(10px * var(--tscale, 1)); }
.ticket-grid.compact .ticket-custom { font-size: calc(9.5px * var(--tscale, 1)); line-height: 1.25; }
.ticket-grid.compact .ticket-meta { font-size: calc(10px * var(--tscale, 1)); gap: 8px; }
.ticket-grid.compact .ticket-period,
.ticket-grid.compact .ticket-limits { font-size: calc(9px * var(--tscale, 1)); }
.ticket-grid.compact .ticket-note { font-size: calc(9px * var(--tscale, 1)); }
.ticket-grid.compact .ticket-foot { font-size: calc(8px * var(--tscale, 1)); }
.ticket-grid.compact .ticket-logo { max-height: 40px; width: auto !important; }
.ticket-logo { align-self: center; max-width: 100%; height: auto; }
.ticket-custom { font-size: calc(12px * var(--tscale, 1)); line-height: 1.35; }
.ticket-period { font-size: calc(11.5px * var(--tscale, 1)); color: var(--tink-soft, var(--ink-soft)); }
.ticket-head { display: flex; flex-direction: column; gap: 2px; }
.ticket-brand { font-size: calc(10px * var(--tscale, 1)); letter-spacing: .25em; font-weight: 700; color: var(--tink-soft, var(--ink-soft)); }
.ticket-ssid { font-size: calc(12px * var(--tscale, 1)); }
.ticket-code {
    font-family: var(--mono); font-size: calc(26px * var(--tscale, 1) * var(--cscale, 1)); font-weight: 800; letter-spacing: .08em;
    padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ticket-meta { display: flex; justify-content: center; gap: 14px; font-size: calc(12px * var(--tscale, 1)); }
.ticket-limits { display: flex; justify-content: center; gap: 10px; font-size: calc(11px * var(--tscale, 1)); color: var(--tink-soft, var(--ink-soft)); }
.ticket-note { font-size: calc(11px * var(--tscale, 1)); color: var(--tink-soft, var(--ink-soft)); }
.ticket-foot { font-size: calc(9.5px * var(--tscale, 1)); color: var(--tink-soft, var(--ink-soft)); }

@media print {
    .no-print { display: none !important; }
    .print-page { padding: 0; }
    body { background: var(--card); }
    .ticket { border-color: #999; }
    .ticket.no-cut { border-color: transparent; }
    .sheet { break-after: page; page-break-after: always; }
    .sheet:last-of-type { break-after: auto; page-break-after: auto; }
    @page { margin: 10mm; }
}
.sheet + .sheet { margin-top: 24px; }   /* visual separation on screen */

/* ------------------------------------------------------------ footer */
.app-footer { text-align: center; color: var(--ink-soft); font-size: 12px;
    padding: 26px 0 18px; }

/* ------------------------------------------------------------ what's new */
.app-footer { color: #5a6377; }   /* measured 556: 2.95:1 on the warm paper → 6:1 */
.app-footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
.app-footer a { color: #5a6377; border-bottom-color: #5a6377; display: inline-block; padding: 5px 4px; margin: -5px -4px; }   /* measured 556: 15 px links → 25 px tap area, nothing moves */
.app-footer a:hover { color: var(--signal); border-color: var(--signal); }
.cl-version { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.cl-version:first-of-type { border-top: 0; }
.cl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; }
.cl-items { margin: 0 0 10px 18px; padding: 0; }
.cl-items li { margin-bottom: 6px; font-size: 14px; color: var(--ink); }

/* ------------------------------------------------------- dark theme */
[data-theme="dark"] {
    --ink:        #e6edf3;
    --ink-soft:   #93a4b3;
    --paper:      #10161c;
    --card:       #18212a;
    --line:       #2a3642;
    --signal:     #4da3ff;
    --signal-ink: #82bfff;
    --ok-bg:      #12301c;  --ok-ink:  #6fce8f;
    --warn-bg:    #33290f;  --warn-ink:#e3bc5a;
    --err-bg:     #391b1b;  --err-ink: #ef8f8f;
}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: #0d1319; color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .btn { background: #1f2a35; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .btn.primary { background: var(--signal); color: #0b1622; border-color: var(--signal); }
[data-theme="dark"] .topbar { background: #141c24; border-color: var(--line); }
[data-theme="dark"] .voucher-table th { background: #141c24; }
[data-theme="dark"] .voucher-table tr:hover td { background: #1d2833; }
[data-theme="dark"] .sheet, [data-theme="dark"] .ticket { background: #ffffff; color: #10202b; }
[data-theme="dark"] img.ticket-logo, [data-theme="dark"] .logo-thumb { background: #ffffff; border-radius: 4px; padding: 2px; }
/* print always stays on a light background */
@media print { :root, [data-theme="dark"] { --paper: #fff; --card: #fff; --ink: #10202b; } }

/* ------------------------------------------ light/dark switch
 * "Day/night" pill: sun and moon at the ends, a knob that slides,
 * a sky that changes colour and little stars that appear in dark mode. */
.theme-toggle { position: relative; width: 52px; height: 28px; flex: 0 0 52px;
    border: 1px solid var(--line); border-radius: 14px; cursor: pointer; padding: 0;
    background: linear-gradient(180deg, #cde9ff, #eef7ff); overflow: hidden;
    transition: background .35s ease, border-color .35s ease; }
.theme-toggle:hover { border-color: var(--signal); }
[data-theme="dark"] .theme-toggle { background: linear-gradient(180deg, #0b1220, #1d2c4d); }
.tt-ico { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px;
    line-height: 1; transition: opacity .3s ease; }
.tt-sun  { left: 6px; }
.tt-moon { right: 6px; opacity: .45; }
.tt-ico svg { display: block; width: 13px; height: 13px; }   /* D-M1159: the sun and moon are glyphs now */
[data-theme="dark"] .tt-sun  { opacity: .35; }
[data-theme="dark"] .tt-moon { opacity: 1; }
.tt-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
    border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe27a, #ffb52e);
    box-shadow: 0 1px 3px rgba(16,32,43,.35);
    transition: left .28s cubic-bezier(.55,1.6,.4,1), background .35s ease; }
[data-theme="dark"] .tt-knob { left: 26px;
    background: radial-gradient(circle at 62% 38%, #f4f7fb, #b9c6d6); }
.tt-stars { position: absolute; inset: 0; font-size: 7px; color: #cfe0ff;
    opacity: 0; transition: opacity .4s ease .1s; pointer-events: none; }
.tt-stars       { padding: 3px 0 0 18px; letter-spacing: 5px; }
.tt-stars i     { font-style: normal; font-size: 5px; vertical-align: 6px; }
[data-theme="dark"] .tt-stars { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
    .theme-toggle, .tt-knob, .tt-ico, .tt-stars { transition: none; }
}
.code-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
.code-link:hover { color: var(--signal); border-color: var(--signal); }
[data-theme="dark"] .conn-box, [data-theme="dark"] .mode-option:has(input:checked) { background: #14212e; border-color: #29415a; }
[data-theme="dark"] .voucher-table tbody tr:hover { background: #1d2833; }

/* logo thumbnail in the template form */
.logo-current { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.logo-thumb { max-height: 48px; max-width: 160px; border: 1px solid var(--line);
    border-radius: 6px; padding: 4px; background: #fff; }

.flash-field { outline: 2px solid var(--signal); border-radius: 6px; }

/* topbar on narrow screens: brand and theme switch on the first row,
   menu items in a horizontally scrolling strip on the second
   (the active item is centred by a script in nav.php) */
@media (max-width: 860px) {
    .topbar { flex-wrap: wrap; padding: 8px 12px 0; gap: 0; }
    .brand { flex: 1; min-width: 0; font-size: 15px; }
    .brand .logo-mark.sm { flex: 0 0 28px; }
    .nav-tools { margin-left: 8px; }
    .nav-links { order: 3; flex: 0 0 100%; margin: 4px -12px 0; padding: 0 6px;
        gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { flex: 0 0 auto; padding: 9px 9px 8px; font-size: 13.5px; white-space: nowrap;
        border-bottom: 2px solid transparent; -webkit-tap-highlight-color: transparent; }
    .nav-links a.active { border-bottom-color: var(--signal); }
    .nav-spacer { display: none; }
}

/* tables wider than the panel: they scroll inside it, never out of it */
.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table-scroll .voucher-table { min-width: 560px; }
.voucher-table td.break { word-break: break-word; }
/* table row border consistent with the theme (it used to be a fixed light colour) */
[data-theme="dark"] .voucher-table td { border-bottom-color: var(--line); }

/* --------------------------------------------- user management cards
 * Every user is a card with labelled fields: it replaces the old
 * 6-column table, which squeezed the fields and overflowed the box. */
.user-card { border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 16px 12px; margin-bottom: 12px; background: var(--card); }
.user-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.user-card label { display: block; font-size: 12px; font-weight: 600;
    color: var(--ink-soft); margin-top: 8px; }
.user-card input, .user-card select { width: 100%; box-sizing: border-box; margin-top: 4px; }
.user-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.user-actions .check-label { font-size: 13px; color: var(--ink-soft); }
.user-actions-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* the "send credentials" checkbox stayed in line with its label (the
   generic .user-card label/input rule stretched it to the full row) */
.user-card label.check-label { display: flex; align-items: center; margin-top: 0; font-size: 13px; }
.user-card .check-label input { width: auto; margin: 0; }
@media (max-width: 720px) { .user-actions-right { margin-left: 0; } }

/* red badge: two-step verification missing */
.badge.off { background: var(--err-bg); color: var(--err-ink); }

/* --------------------------------------------- voucher session cards
 * One card per device: everything readable at any width, no
 * horizontal scrolling. The coloured thread on the left flags the
 * sessions still active at a glance. */
.ses-card { border: 1px solid var(--line); border-left: 3px solid var(--line);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; background: var(--card); }
.ses-card.live { border-left-color: var(--signal); }
.ses-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ses-top .break { word-break: break-word; }
.ses-traffic { margin-left: auto; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.ses-meta { color: var(--ink-soft); font-size: 13px; margin-top: 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ses-kick { margin-left: auto; }

/* ============================================== statistics: sessions
 * Day×hour heatmap, counting KPIs, a 30-day curve that draws itself,
 * device ranking with growing bars. Every animation honours
 * prefers-reduced-motion. */
.hm-section h3.hm-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-soft); margin: 26px 0 10px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; text-align: center; }
.kpi-num { display: block; font-size: 26px; font-weight: 700; color: var(--signal);
    font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-num.kpi-text { font-size: 20px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
@media (max-width: 720px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.hm-wrap { overflow-x: auto; }
.hm-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)) 30px;
    gap: 3px; min-width: 550px; align-items: center; }
.hm-total { font-size: 10px; color: var(--ink-soft); text-align: left; padding-left: 3px;
    font-variant-numeric: tabular-nums; opacity: 0; animation: ses-fade .4s ease forwards;
    animation-delay: var(--d); }
.hm-hour { font-size: 10px; color: var(--ink-soft); text-align: center; }
.hm-day  { font-size: 11px; color: var(--ink-soft); padding-right: 4px; text-align: right; }
.hm-cell { aspect-ratio: 1; border-radius: 3px;
    background: color-mix(in srgb, var(--signal) calc(var(--lv) * 88%), var(--paper));
    opacity: 0; transform: scale(.6);
    animation: hm-pop .45s cubic-bezier(.3,1.4,.5,1) forwards; animation-delay: var(--d);
    cursor: default; transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) { .hm-cell:hover { transform: scale(1.25); box-shadow: 0 2px 8px rgba(16,32,43,.25); z-index: 2; position: relative; } }
.hm-cell.peak { outline: 2px solid var(--signal); outline-offset: 1px; }
@keyframes hm-pop { to { opacity: 1; transform: scale(1); } }
.hm-legend { display: flex; align-items: center; gap: 8px; font-size: 11px;
    color: var(--ink-soft); margin-top: 10px; justify-content: flex-end; }
.hm-scale { width: 110px; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, var(--paper), var(--signal)); border: 1px solid var(--line); }

.ses-chart { width: 100%; height: 130px; margin-top: 4px; }
.ses-line { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linejoin: round;
    stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: ses-draw 1.4s ease-out .15s forwards; }
@keyframes ses-draw { to { stroke-dashoffset: 0; } }
.ses-area { fill: color-mix(in srgb, var(--signal) 14%, transparent);
    opacity: 0; animation: ses-fade .8s ease .9s forwards; }
@keyframes ses-fade { to { opacity: 1; } }
.ses-dot { fill: var(--card); stroke: var(--signal); stroke-width: 2;
    opacity: 0; animation: ses-fade .3s ease forwards; animation-delay: var(--d); }
.ses-dot:hover { r: 5; }

.dev-bars { display: flex; flex-direction: column; gap: 8px; }
.dev-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 74px;
    gap: 12px; align-items: center; font-size: 13px; }
.dev-name { word-break: break-word; }
.dev-track { height: 12px; background: var(--paper); border: 1px solid var(--line);
    border-radius: 6px; overflow: hidden; }
.dev-fill { display: block; height: 100%; width: 0; border-radius: 6px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 55%, var(--paper)), var(--signal));
    animation: dev-grow .9s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: var(--d); }
@keyframes dev-grow { to { width: var(--w); } }
.dev-mb { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .hm-cell { animation: none; opacity: 1; transform: none; }
    .ses-line { animation: none; stroke-dashoffset: 0; }
    .ses-area, .ses-dot { animation: none; opacity: 1; }
    .dev-fill { animation: none; width: var(--w); }
}

/* ------------------- heatmap: tooltip istantaneo, profilo orario, punta */
.hm-tip { position: absolute; z-index: 40; background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
    box-shadow: 0 10px 28px rgba(16,32,43,.28); font-size: 13px; pointer-events: none;
    display: flex; flex-direction: column; gap: 3px; min-width: 175px;
    animation: tip-in .14s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(5px); } }
.hm-tip strong { font-size: 13px; margin-bottom: 2px; }
.hm-tip .tip-row { display: flex; align-items: baseline; gap: 6px; color: var(--ink-soft); }
.hm-tip .tip-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hm-tip .tip-row em { font-style: normal; font-size: 11px; }
.hm-tip .tip-peak { margin-top: 3px; font-size: 12px; color: var(--signal-ink); font-weight: 600; }

.hm-cell.peak { animation: hm-pop .45s cubic-bezier(.3,1.4,.5,1) forwards,
    peak-glow 2.2s ease-in-out 1.2s infinite; animation-delay: var(--d), 1.2s; }
@keyframes peak-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(77,163,255,0); }
    50%      { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--signal) 65%, transparent); }
}

.hour-profile { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px;
    align-items: end; height: 44px; margin: 14px 0 2px; padding-left: 34px; }
.hp-bar { display: block; height: 0; min-height: 2px; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--signal), color-mix(in srgb, var(--signal) 45%, var(--paper)));
    animation: hp-grow .7s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: var(--d); }
@keyframes hp-grow { to { height: max(2px, var(--h)); } }

/* ------------------- dark theme: contrast of the blues in the statistics */
[data-theme="dark"] .kpi-num { color: var(--signal-ink); }
[data-theme="dark"] .hm-cell { background: color-mix(in srgb, #58aaff calc(14% + var(--lv) * 78%), #0d1319); }
[data-theme="dark"] .hm-scale { background: linear-gradient(90deg, #0d1319, #58aaff); }
[data-theme="dark"] .ses-line { stroke: var(--signal-ink); }
[data-theme="dark"] .ses-dot { stroke: var(--signal-ink); }
[data-theme="dark"] .ses-area { fill: color-mix(in srgb, var(--signal-ink) 18%, transparent); }
[data-theme="dark"] .dev-fill { background: linear-gradient(90deg, #2c5d94, var(--signal-ink)); }
[data-theme="dark"] .hp-bar { background: linear-gradient(180deg, var(--signal-ink), #24405f); }

@media (prefers-reduced-motion: reduce) {
    .hp-bar { animation: none; height: max(2px, var(--h)); }
    .hm-total { animation: none; opacity: 1; }
    .hm-cell.peak { animation: none; opacity: 1; transform: none; }
    .hm-tip { animation: none; }
}

/* ------------------------------------------------- ricerca globale */
.nav-search { display: flex; }
.nav-search input[type="search"] { width: 170px; padding: 6px 12px; font-size: 13px;
    border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
    color: var(--ink); margin: 0; transition: width .25s ease, border-color .2s ease; }
.nav-search input[type="search"]:focus { width: 230px; border-color: var(--signal); outline: none; }
@media (max-width: 860px) { .nav-search { flex-basis: 100%; }
    .nav-search input[type="search"], .nav-search input[type="search"]:focus { width: 100%; } }

/* the search field lives next to the dashboard tabs */
.tabs-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tabs-bar .search { margin-left: auto; }

/* ============================================== "live" template editor
 * Preview on a sticky stage that follows the scroll, flashes on the
 * elements just edited, zoom, sheet minimap, toggle switches and a
 * save bar that lights up with the changes. */
.preview-col { position: sticky; top: 74px; align-self: start; }

.pv-toolbar { display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; }
.zoom-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
    overflow: hidden; }
.zoom-seg button { border: 0; background: var(--card); color: var(--ink-soft);
    font-size: 12px; padding: 5px 10px; cursor: pointer; }
.zoom-seg button + button { border-left: 1px solid var(--line); }
.zoom-seg button.on { background: var(--signal); color: #fff; }

.pv-stage { --zoom: 1; display: flex; justify-content: center; padding: 30px 16px;
    border-radius: 14px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%,
        color-mix(in srgb, var(--signal) 10%, var(--paper)), var(--paper) 70%);
    border: 1px solid var(--line); }
.pv-stage .preview-ticket { transform: scale(var(--zoom)) rotate(-1deg);
    transform-origin: top center; transition: transform .25s ease;
    box-shadow: 0 22px 44px rgba(16,32,43,.22), 0 3px 8px rgba(16,32,43,.12);
    animation: tkt-in .5s cubic-bezier(.3,1.3,.4,1); }
.pv-stage .preview-ticket:hover { transform: scale(var(--zoom)) rotate(0deg); }
@keyframes tkt-in { from { opacity: 0; transform: scale(calc(var(--zoom) * .92)) rotate(-4deg); } }

/* flash on the element just edited */
.pv-flash { animation: pv-glow .7s ease-out; border-radius: 4px; }
@keyframes pv-glow {
    0%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 55%, transparent);
          background: color-mix(in srgb, var(--signal) 14%, transparent); }
    100%{ box-shadow: 0 0 0 3px transparent; background: transparent; }
}

/* minimap of the A4 sheet */
.sheet-map { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sheet-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-soft); }
.sheet-a4 { width: 74px; aspect-ratio: 210 / 297; background: var(--card);
    border: 1px solid var(--line); border-radius: 4px; padding: 5px;
    display: grid; gap: 3px; box-shadow: 0 2px 6px rgba(16,32,43,.12);
    grid-template-columns: repeat(var(--cols, 2), 1fr);
    grid-template-rows: repeat(var(--rows, 4), 1fr); }
.sheet-a4 span { background: color-mix(in srgb, var(--signal) 28%, var(--paper));
    border-radius: 2px; opacity: 0; animation: hm-pop .3s ease forwards; }

/* section headings of the form */
.f-sec { display: flex; align-items: center; gap: 8px; margin-top: 26px;
    padding-top: 14px; border-top: 1px dashed var(--line); }
.f-ico { font-size: 15px; }

/* quick colour palette */
.swatch-row { display: inline-flex; gap: 7px; margin: 6px 8px 6px 0; vertical-align: middle; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--card);
    background: var(--sw); cursor: pointer; box-shadow: 0 0 0 1px var(--line);
    transition: transform .12s ease; padding: 0; }
.swatch:hover { transform: scale(1.22); box-shadow: 0 0 0 2px var(--signal); }

/* interruttori a levetta */
.switch-label { user-select: none; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.sw { width: 36px; height: 20px; border-radius: 10px; background: var(--line);
    position: relative; flex: 0 0 36px; transition: background .2s ease; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,32,43,.3);
    transition: left .2s cubic-bezier(.4,1.4,.5,1); }
.switch-label input:checked + .sw { background: var(--signal); }
.switch-label input:checked + .sw::after { left: 18px; }
.switch-label input:focus-visible + .sw { outline: 2px solid var(--signal); outline-offset: 2px; }

/* live save bar */
.save-bar { position: sticky; bottom: 10px; display: flex; align-items: center;
    justify-content: flex-end; gap: 12px; margin-top: 18px; padding: 10px 14px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px;
    transition: border-color .25s ease, box-shadow .25s ease; }
.save-hint { font-size: 12.5px; color: var(--ink-soft); }
.save-bar.dirty { border-color: var(--signal);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--signal) 28%, transparent); }
.save-bar.dirty .save-hint { color: var(--signal-ink); font-weight: 600; }
.save-bar.dirty .btn.primary { animation: save-pulse 1.6s ease-in-out infinite; }
@keyframes save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent); }
    50%      { box-shadow: 0 0 0 7px transparent; }
}

@media (max-width: 980px) { .preview-col { position: static; } }
@media (prefers-reduced-motion: reduce) {
    .pv-stage .preview-ticket, .pv-flash, .sheet-a4 span, .save-bar.dirty .btn.primary,
    .sw::after { animation: none; transition: none; opacity: 1; }
}

/* ------------------- template editor: second act of animations */
/* imperceptible float of the ticket on the stage (stops on hover) */
.pv-stage .preview-ticket { animation: tkt-in .5s cubic-bezier(.3,1.3,.4,1),
    tkt-float 6s ease-in-out 1.2s infinite; }
.pv-stage .preview-ticket:hover { animation-play-state: paused, paused; }
@keyframes tkt-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

/* a shine crossing the ticket now and then (laminated paper) */
.preview-ticket { position: relative; overflow: hidden; }
.preview-ticket::after { content: ''; position: absolute; top: -30%; bottom: -30%;
    left: -70%; width: 45%; pointer-events: none; transform: rotate(18deg);
    background: linear-gradient(90deg, transparent,
        rgba(255,255,255,.55) 50%, transparent);
    animation: tkt-sheen 7s ease-in-out 2s infinite; }
@keyframes tkt-sheen {
    0%, 78%  { left: -70%; }
    92%, 100%{ left: 130%; }
}

/* staggered entrance of the form sections */
#tpl-form > label, #tpl-form > .grid-2, #tpl-form > .f-sec,
#tpl-form > .check-label, #tpl-form > .save-bar {
    animation: sec-in .45s ease-out backwards; }
#tpl-form > *:nth-child(-n+22) { animation-delay: calc(var(--i, 0) * 1ms); }
@keyframes sec-in { from { opacity: 0; transform: translateY(9px); } }

/* soft transitions on the elements that change live */
.ticket-logo { transition: width .25s cubic-bezier(.3,1.3,.4,1); }
#pv-code { transition: font-size .22s cubic-bezier(.3,1.4,.4,1); }
.preview-ticket * { transition: color .25s ease; }

/* the sliders (range) have a plumper handle */
input[type=range] { accent-color: var(--signal); cursor: grab; }
input[type=range]:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    .pv-stage .preview-ticket { animation: none; }
    .preview-ticket::after { animation: none; display: none; }
    #tpl-form > label, #tpl-form > .grid-2, #tpl-form > .f-sec,
    #tpl-form > .check-label, #tpl-form > .save-bar { animation: none; }
    .ticket-logo, #pv-code, .preview-ticket * { transition: none; }
}

/* ============================================== live feedback page */
.fb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .fb-cards { grid-template-columns: 1fr; } }
.fb-card { position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 16px 16px 14px; border: 2px solid var(--line); border-radius: 12px;
    cursor: pointer; background: var(--card);
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.fb-card:hover { transform: translateY(-2px); }
.fb-card input { position: absolute; opacity: 0; pointer-events: none; }
.fb-emoji { font-size: 26px; line-height: 1; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.fb-check { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px;
    border-radius: 50%; background: var(--signal); color: #fff; font-size: 13px;
    display: grid; place-items: center; opacity: 0; transform: scale(.4);
    transition: opacity .2s ease, transform .25s cubic-bezier(.3,1.6,.5,1); }
.fb-card:has(input:checked) { border-color: var(--signal);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--signal) 22%, transparent); }
.fb-card:has(input:checked) .fb-emoji { transform: scale(1.25) rotate(-6deg); }
.fb-card:has(input:checked) .fb-check { opacity: 1; transform: scale(1); }

.fb-counter { display: flex; align-items: center; gap: 10px; margin: -6px 0 12px; }
#fb-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--paper);
    border: 1px solid var(--line); overflow: hidden; display: block; }
#fb-bar i { display: block; height: 100%; width: 0; background: var(--signal);
    transition: width .2s ease, background .3s ease; }
#fb-bar i.warm { background: #d99a1b; }
#fb-bar i.hot  { background: #b23b3b; }
#fb-count { font-style: normal; font-size: 11.5px; color: var(--ink-soft);
    font-variant-numeric: tabular-nums; }

.fb-previews { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; }
.fb-thumb { width: 74px; height: 74px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--line); animation: hm-pop .3s cubic-bezier(.3,1.4,.5,1); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }

.fb-send { position: relative; overflow: hidden; }
.fb-plane { display: inline-block; margin-right: 4px;
    transition: transform .6s cubic-bezier(.5,-.3,.8,.6), opacity .5s ease; }
.fb-send.flying .fb-plane { transform: translate(48px, -34px) rotate(-18deg); opacity: 0; }

form[enctype] > label, form[enctype] > .fb-cards, form[enctype] > .grid-2,
form[enctype] > .fb-counter, form[enctype] > .fb-send {
    animation: sec-in .45s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 1ms); }

@media (prefers-reduced-motion: reduce) {
    .fb-card, .fb-emoji, .fb-check, .fb-plane, .fb-thumb { transition: none; animation: none; }
    form[enctype] > * { animation: none; }
}

/* ------------------------------------------ procedura guidata SMTP */
.smtp-wiz { border: 1px solid var(--signal); border-radius: 12px; padding: 16px;
    margin-bottom: 16px; background: color-mix(in srgb, var(--signal) 5%, var(--card));
    animation: sec-in .35s ease-out; }
.wiz-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.wiz-dots span { width: 26px; height: 5px; border-radius: 3px; background: var(--line);
    transition: background .3s ease; }
.wiz-dots span.on { background: var(--signal); }
.wiz-provs .fb-card small { color: var(--ink-soft); font-family: var(--mono); font-size: 11px; }
.wiz-list { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; }
.wiz-list li { margin-bottom: 8px; animation: sec-in .4s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 1ms); }
.wiz-list a { color: var(--signal-ink); font-weight: 600; }
.wiz-recap { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
    padding: 12px 14px; }
.wiz-recap div { display: flex; justify-content: space-between; gap: 12px; }
.wiz-recap span { color: var(--ink-soft); }
.wiz-recap b { font-variant-numeric: tabular-nums; word-break: break-all; text-align: right; }
.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.wiz-nav #wiz-next, .wiz-nav #wiz-go { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .smtp-wiz, .wiz-list li { animation: none; } }

/* email sending method selector */
.mm-active { position: absolute; bottom: 10px; right: 12px; font-size: 11px;
    font-weight: 700; color: #1d7a3a; background: color-mix(in srgb, #2e9e5b 14%, var(--card));
    border: 1px solid #2e9e5b; border-radius: 10px; padding: 2px 8px; }

/* "recommended" ribbon on the Google card of the email selector */
.mm-ribbon { position: absolute; top: -9px; left: 14px; font-size: 10px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: var(--signal); color: #fff; border-radius: 8px; padding: 2px 9px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--signal) 40%, transparent); }

/* ============================== lucido globale: micro-interazioni ovunque */
/* the panels enter the scene one after the other */
main .panel { animation: sec-in .4s ease-out backwards; }
main .panel:nth-child(2) { animation-delay: 60ms; }
main .panel:nth-child(3) { animation-delay: 120ms; }
main .panel:nth-child(4) { animation-delay: 180ms; }
main .panel:nth-child(n+5) { animation-delay: 240ms; }

/* live buttons: they lift on hover, press on click */
.btn { transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
@media (hover: hover) {
    .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,32,43,.16); }
    .btn.primary:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--signal) 40%, transparent); }
    .btn.danger-outline:hover { box-shadow: 0 4px 12px rgba(178,59,59,.28); }
}

/* group titles in the Email tab: they separate transport and automatic sends */
h2.set-group { margin: 22px 0 8px 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--ink-soft); }
h2.set-group:first-of-type { margin-top: 6px; }

/* data-freshness note in the title (statistics) */
.stats-fresh { margin-left: auto; font-size: 11px; font-weight: normal; letter-spacing: 0; text-transform: none; }

/* titles with a button: tidy flex, no float */
.panel > h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel > h2 .btn, .panel > h2 a.btn { margin-left: auto; float: none !important; }

/* alerts that slide in instead of appearing at once */
.alert { animation: alert-in .35s cubic-bezier(.3,1.2,.4,1); }
@keyframes alert-in { from { opacity: 0; transform: translateY(-7px); } }

/* fields: consistent focus ring everywhere */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
    transition: border-color .15s ease, box-shadow .15s ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; border-color: var(--signal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }

/* tables: the row under the cursor lights up gently */
tbody tr { transition: background .12s ease; }
@media (hover: hover) { tbody tr:hover td { background: color-mix(in srgb, var(--signal) 5%, transparent); } }

/* tabs with a sliding underline */
.tab { position: relative; transition: color .15s ease; }
.tab::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0;
    height: 2px; background: var(--signal); transition: left .18s ease, right .18s ease; }
.tab.active::after { left: 8px; right: 8px; }
@media (hover: hover) { .tab:hover::after { left: 8px; right: 8px; } }
.tab { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    main .panel, .alert { animation: none; }
    .btn, .tab::after, tbody tr,
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { transition: none; }
    .btn:hover { transform: none; }
}

/* ---------------- collapsible panels (email tab and future uses) */
.panel.collapsible > h2 { cursor: pointer; user-select: none; }
.panel.collapsible > h2::before { content: '▸'; font-size: 13px; color: var(--signal);
    transition: transform .2s cubic-bezier(.3,1.3,.5,1); }
.panel.collapsible.open > h2::before { transform: rotate(90deg); }
.panel.collapsible:not(.open) > *:not(h2) { display: none; }
.panel.collapsible:not(.open) { padding-bottom: 12px; }
.panel.collapsible:not(.open) > h2 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .panel.collapsible > h2::before { transition: none; } }


/* ============================================================== MOBILE
 * One breakpoint (720px) for the content layout; the top bar has its
 * own at 860px (see above). Goals: no horizontal scrolling of the page,
 * tables that become cards, full-width buttons, 16px fields (below that
 * threshold iOS Safari zooms the page on focus), room for the iPhone
 * "safe area". */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: 100%; }

@media (max-width: 720px) {
    html { -webkit-text-size-adjust: 100%; }
    .container { margin: 12px auto; padding: 0 12px; }
    .panel { padding: 2px 14px 16px; border-radius: 10px; margin-bottom: 14px; }
    .alert { padding: 10px 12px; margin-bottom: 10px; }
    h2 { font-size: 13.5px; margin-top: 16px; }

    /* fields and buttons: finger-sized */
    input[type=text], input[type=password], input[type=number], input[type=search],
    input[type=email], input[type=url], select, textarea { font-size: 16px; padding: 10px 12px; }
    .btn { min-height: 42px; padding: 10px 14px; }
    .btn.sm { min-height: 36px; padding: 7px 11px; }
    .inline { display: flex; margin: 0 0 8px; }
    .inline .btn { flex: 1; }
    .btn-row .btn, .tpl-actions .btn { flex: 1 1 calc(50% - 5px); }
    .form-grid-end { grid-template-columns: 1fr; gap: 8px; }
    .form-grid-end .btn { width: 100%; }

    /* dashboard and statistics toolbar */
    .toolbar { gap: 12px; margin-bottom: 12px; }
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; width: 100%; }
    .stat strong { font-size: 20px; }
    .stat span { font-size: 10.5px; letter-spacing: .03em; }
    .stats .muted-stat { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 6px; }
    .stats .muted-stat span { font-size: 10.5px; }
    .toolbar-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .toolbar-actions .inline { display: block; margin: 0; }
    .toolbar-actions .btn { width: 100%; }

    /* tabs: one scrolling row instead of wrapping */
    .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none;
        -webkit-overflow-scrolling: touch; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
    .settings-tabs { margin: 0 -12px 14px; padding: 3px 12px; border-radius: 0; }
    .tabs-bar { gap: 8px; }
    .tabs-bar .search { margin-left: 0; width: 100%; }
    .search input { width: 100%; }
    .log-filters { gap: 0; }

    /* tables → cards (table.cards) */
    .table-wrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; }
    table.cards thead { display: none; }
    table.cards tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
        padding: 12px 14px; margin-bottom: 10px; }
    table.cards td { padding: 2px 0; border: 0; }
    table.cards td[data-label]::before { content: attr(data-label); display: inline-block;
        min-width: 74px; margin-right: 6px; font-size: 10.5px; text-transform: uppercase;
        letter-spacing: .06em; color: var(--ink-soft); }
    table.cards td.empty { padding: 24px 12px !important; }
    table.cards td:empty { display: none; }
    tbody tr:hover td { background: transparent; }

    /* dashboard: big code, tick on the right, status and duration on the same row */
    .voucher-table.cards tbody tr { display: grid; grid-template-columns: auto auto 1fr;
        grid-template-areas: "code code check" "status duration usage" "period period period"
                             "note note note" "created created actions";
        column-gap: 10px; row-gap: 4px; align-items: center; }
    .voucher-table.cards td.col-check { grid-area: check; width: auto; justify-self: end; padding: 0; }
    .voucher-table.cards td.col-check input { width: 22px; height: 22px; margin: 0; }
    .voucher-table.cards td.code { grid-area: code; font-size: 18px; padding: 0; }
    .voucher-table.cards td.status   { grid-area: status; padding: 0; }
    .voucher-table.cards td.duration { grid-area: duration; padding: 0; color: var(--ink-soft); font-size: 13px; }
    .voucher-table.cards td.usage    { grid-area: usage; padding: 0; color: var(--ink-soft); font-size: 13px; }
    .voucher-table.cards td.period  { grid-area: period; white-space: normal; }
    .voucher-table.cards td.note    { grid-area: note; max-width: none; white-space: normal; overflow: visible; }
    .voucher-table.cards td.created { grid-area: created; font-size: 13px; }
    .voucher-table.cards td.row-actions { grid-area: actions; justify-self: end; padding: 0; }
    .voucher-table.cards td.row-actions:empty { display: block; }

    /* activity log */
    .log-table.cards tbody tr { display: grid; grid-template-columns: 1fr auto;
        grid-template-areas: "when ip" "user action" "details details"; column-gap: 10px; row-gap: 5px; }
    .log-table.cards td.log-when   { grid-area: when; font-size: 12.5px; color: var(--ink-soft); }
    .log-table.cards td.log-ip     { grid-area: ip; font-size: 12.5px; }
    .log-table.cards td.log-user   { grid-area: user; }
    .log-table.cards td.log-action { grid-area: action; justify-self: end; }
    .log-table.cards td.log-details { grid-area: details; }

    /* system status */
    .sys-table.cards tbody tr { display: grid; grid-template-columns: 1fr auto;
        grid-template-areas: "label badge" "value value"; column-gap: 10px; row-gap: 3px; padding: 10px 14px; }
    .sys-table.cards td.sys-label { grid-area: label; width: auto !important; }
    .sys-table.cards td.sys-badge { grid-area: badge; width: auto !important; }
    .sys-table.cards td.sys-value { grid-area: value; font-size: 13.5px; color: var(--ink-soft); word-break: break-word; }

    /* sticky bars at the bottom: full-width buttons + safe area */
    .print-bar { position: sticky; bottom: 0; margin: 12px -12px 0; border-radius: 14px 14px 0 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
    .print-bar #sel-count { flex: 0 0 auto; font-size: 13px; }
    .print-bar .print-tpl-pick { flex: 1 1 auto; min-width: 0; }
    .print-bar .print-tpl-pick select { flex: 1; width: 100%; min-width: 0; font-size: 14px; padding: 8px 10px; }
    .print-bar .btn, .print-bar .btn ~ .btn { margin-left: 0; flex: 1 1 calc(50% - 4px); padding: 10px 8px; font-size: 13.5px; }
    .print-bar #print-all-btn { flex-basis: 100%; }
    .save-bar { bottom: 0; margin: 14px -14px -16px; border-radius: 12px 12px 0 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
    .save-bar .btn { flex: 1; }

    /* template editor: preview before the form, compact stage */
    .editor-layout { gap: 14px; }
    .editor-layout .preview-col { order: -1; position: static; }
    .pv-stage { padding: 18px 8px; }
    .pv-stage .preview-ticket { max-width: 100%; }
    .tpl-manager { gap: 8px; }
    .tpl-picker { min-width: 0; flex-basis: 100%; }
    .tpl-actions { width: 100%; }

    /* statistics */
    .kpi { padding: 12px 8px; }
    .kpi-num { font-size: 22px; }
    .hbar { grid-template-columns: 84px 1fr 40px; gap: 8px; }
    .hbar-label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stats-grid { gap: 12px; }

    /* login, installer, sessions, users, feedback */
    .install-page { padding: 3vh 12px calc(12px + env(safe-area-inset-bottom)); }
    .install-card { padding: 20px 16px; border-radius: 12px; }
    .user-card { padding: 12px 14px 10px; }
    .user-actions { gap: 10px; }
    .ses-top { gap: 6px 10px; }
    .app-footer { padding: 18px 0 calc(14px + env(safe-area-inset-bottom)); }
}

/* very narrow phones: counters on two columns */
@media (max-width: 360px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .toolbar-actions { grid-template-columns: 1fr; }
}


/* ================================================= email template editor */
.mtp > h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mtp-count { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
    background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; }
.mtp-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.mtp-layout > * { min-width: 0; }

/* galleria */
.mtp-list { display: flex; flex-direction: column; gap: 8px; }
.mtp-card { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
    color: var(--ink); font: inherit; cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.mtp-card .mtp-ico { font-size: 20px; line-height: 1.2; }
.mtp-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mtp-card b { font-size: 13px; }
.mtp-card .mtp-sub { display: block; margin: 0; font-size: 11.5px; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtp-badges .badge { font-size: 10px; padding: 1px 7px; }
.mtp-card.on { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }
@media (hover: hover) { .mtp-card:hover { border-color: var(--signal); transform: translateX(2px); } }

/* editor */
.mtp-editor label { margin-bottom: 10px; }
.mtp-editor textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5; min-height: 260px; }
.mtp-vars-wrap { margin: -4px 0 10px; }
.mtp-vars-hint { display: block; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 5px; }
.mtp-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.mtp-chip { font: inherit; font-family: var(--mono); font-size: 12px; padding: 4px 9px; border-radius: 20px;
    border: 1px dashed var(--signal); background: var(--card); color: var(--signal); cursor: pointer;
    transition: background .15s ease, transform .12s ease; }
.mtp-chip.used { border-style: solid; background: #e3edfb; color: var(--signal-ink); }
[data-theme="dark"] .mtp-chip.used { background: #1c3355; color: #9cc6ff; }
.mtp-chip:active { transform: scale(.94); }
.mtp-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-top: -4px; }
.mtp-warn { color: var(--warn-ink); background: var(--warn-bg); padding: 3px 9px; border-radius: 6px; }
.mtp-warn.bad { color: var(--err-ink); background: var(--err-bg); }
.mtp-savebar { justify-content: space-between; margin-top: 14px; }
.mtp-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* preview: "mail client" */
.mtp-preview { position: sticky; top: 74px; }
.mtp-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mtp-langs { display: flex; flex-wrap: wrap; gap: 2px; background: #e8eef2; border-radius: 8px; padding: 2px; }
[data-theme="dark"] .mtp-langs { background: #1a2632; }
.mtp-lang { font: inherit; font-size: 11px; font-weight: 700; padding: 4px 7px; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink-soft); cursor: pointer; }
.mtp-lang.on { background: var(--card); color: var(--signal); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mtp-pv-tools { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.mtp-switch { font-size: 12.5px; margin: 0; }
.mtp-mail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
    box-shadow: 0 10px 30px rgba(16,32,43,.10); }
.mtp-mail-head { padding: 12px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
    display: grid; gap: 4px; font-size: 12.5px; }
.mtp-mail-head > div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: baseline; }
.mtp-mail-head span { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.mtp-mail-head b { font-weight: 600; word-break: break-word; }
.mtp-mail-body { padding: 16px 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
    min-height: 140px; max-height: 60vh; overflow: auto; }
.mtp-v { background: #fff3c4; color: #6b4e00; border-radius: 4px; padding: 0 3px; font-family: var(--mono); font-size: .92em; }
.mtp-v.val { background: #e3f4e8; color: var(--ok-ink); font-family: inherit; font-size: inherit; }
.mtp-v.unknown { background: var(--err-bg); color: var(--err-ink); text-decoration: line-through; }
[data-theme="dark"] .mtp-v { background: #4a3a05; color: #ffe08a; }
[data-theme="dark"] .mtp-v.val { background: #143d23; color: #8fe2a8; }
.mtp-flash { animation: mtp-pulse .35s ease-out; }
@keyframes mtp-pulse { from { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--signal) 6%, transparent); } }
.mtp-note { font-size: 12px; margin: 8px 0 0; }
.mtp-teaser .btn { margin-top: 4px; }

@media (max-width: 1000px) {
    .mtp-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .mtp-preview { grid-column: 1 / -1; position: static; }
}
@media (max-width: 720px) {
    .mtp-layout { grid-template-columns: 1fr; gap: 12px; }
    .mtp-list { flex-direction: row; overflow-x: auto; gap: 8px; margin: 0; padding: 2px 0 6px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .mtp-list::-webkit-scrollbar { display: none; }
    .mtp-card { flex: 0 0 210px; }
    .mtp-mail-body { max-height: none; }
    .mtp-actions { width: 100%; }
    .mtp-actions .btn { flex: 1 1 calc(50% - 4px); }
    .mtp-savebar { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .mtp-card, .mtp-chip { transition: none; }
    .mtp-flash { animation: none; }
}


/* ===================================================== login page
 * Animated scene (floating halos, pulsing signal waves), a card that
 * enters from below and tilts with the mouse, floating labels, an eye
 * for the password, Caps Lock notice, N boxes for the 2FA code (6 by
 * email, 8 for the rescue code) with a countdown. All honours prefers-reduced-motion. */
.login-page { position: relative; min-height: 100vh; min-height: 100dvh; justify-content: center; overflow: hidden;
    background: radial-gradient(120% 80% at 20% 0%, #dff0ff 0%, var(--paper) 55%),
                radial-gradient(90% 70% at 100% 100%, #e9f6ee 0%, transparent 60%), var(--paper); }
[data-theme="dark"] .login-page { background: radial-gradient(120% 80% at 20% 0%, #10233a 0%, #0d1319 55%),
                radial-gradient(90% 70% at 100% 100%, #0f2a20 0%, transparent 60%), #0d1319; }
.lg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lg-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform;
    animation: lg-float 14s ease-in-out infinite alternate; }
.lg-blob.b1 { width: 46vw; height: 46vw; left: -10vw; top: -12vw; background: #7fc3ff; }
.lg-blob.b2 { width: 38vw; height: 38vw; right: -8vw; bottom: -10vw; background: #8fe0b0; animation-delay: -5s; animation-duration: 18s; }
.lg-blob.b3 { width: 26vw; height: 26vw; right: 18vw; top: 8vw; background: #b9c9ff; animation-delay: -9s; animation-duration: 11s; }
[data-theme="dark"] .lg-blob { opacity: .28; }
@keyframes lg-float { from { translate: 0 0; scale: 1; } to { translate: 3vw 4vh; scale: 1.08; } }
.lg-waves { position: absolute; left: 50%; top: 50%; width: min(120vw, 900px); height: auto; translate: -50% -50%;
    fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: .18; }
.lg-waves circle { transform-origin: 300px 300px; animation: lg-pulse 6s ease-out infinite; }
.lg-waves circle:nth-child(2) { animation-delay: 1.5s; }
.lg-waves circle:nth-child(3) { animation-delay: 3s; }
.lg-waves circle:nth-child(4) { animation-delay: 4.5s; }
@keyframes lg-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }

/* card */
.login-page .lg-card { position: relative; z-index: 1; --rx: 0deg; --ry: 0deg;
    background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: 0 30px 60px rgba(16,32,43,.16), 0 2px 8px rgba(16,32,43,.06);
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .25s ease, box-shadow .25s ease;
    animation: lg-in .6s cubic-bezier(.2,.9,.3,1.2) backwards; }
@keyframes lg-in { from { opacity: 0; transform: translateY(28px) scale(.97); } }
.lg-card.lg-shake { animation: lg-in .6s cubic-bezier(.2,.9,.3,1.2) backwards, lg-shake .5s .55s ease; }
@keyframes lg-shake { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -6px 0; } 40%, 60% { translate: 6px 0; } }
.lg-head { margin-bottom: 22px; }
.lg-head h1 { font-size: 19px; }
.lg-logo { position: relative; }
.lg-ring { position: absolute; inset: -6px; border-radius: 14px; border: 2px solid var(--signal); opacity: 0;
    animation: lg-ring 2.6s ease-out infinite; }
@keyframes lg-ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
.login-page .alert { margin-bottom: 16px; }
.lg-intro { font-size: 13.5px; margin: 0 0 14px; }

/* fields with a floating label */
.lg-field { position: relative; margin: 0 0 14px; }
.lg-field input { width: 100%; padding: 20px 44px 8px 40px !important; font-size: 15px !important; margin: 0 !important;
    border-radius: 10px !important; background: color-mix(in srgb, var(--paper) 70%, var(--card)) !important; }
.lg-field label { position: absolute; left: 40px; top: 14px; margin: 0; font-size: 14px; font-weight: 500;
    color: var(--ink-soft); pointer-events: none; transition: top .18s ease, font-size .18s ease, color .18s ease; }
.lg-field input:focus + label, .lg-field input:not(:placeholder-shown) + label { top: 6px; font-size: 11px; color: var(--signal); }
.lg-ico { position: absolute; left: 13px; top: 50%; translate: 0 -50%; font-size: 15px; opacity: .75; pointer-events: none; }
.lg-eye { position: absolute; right: 8px; top: 50%; translate: 0 -50%; border: 0; background: transparent; font: inherit;
    font-size: 16px; opacity: .55; cursor: pointer; padding: 6px; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.lg-eye:hover, .lg-eye.on { opacity: 1; }
.lg-eye.on { background: color-mix(in srgb, var(--signal) 14%, transparent); }
.lg-caps { position: absolute; right: 44px; top: -9px; font-size: 11px; font-weight: 700; color: var(--warn-ink);
    background: var(--warn-bg); padding: 2px 8px; border-radius: 10px; animation: alert-in .25s ease; }
.lg-links { margin: 14px 0 0; font-size: 13.5px; }

/* button: a glow that runs across and a waiting state */
.lg-submit { position: relative; overflow: hidden; margin-top: 6px !important; min-height: 44px; }
.lg-submit::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    animation: lg-shine 3.2s ease-in-out infinite; }
@keyframes lg-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.lg-submit.working { pointer-events: none; opacity: .85; }
.lg-submit.working::after { animation: none; }
.lg-submit.working::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }

/* 2FA code boxes (six for the email code, eight for the rescue code) */
.lg-otp-label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.lg-otp { display: flex; gap: 8px; justify-content: space-between; }
.lg-otp input { width: 100%; min-width: 0; text-align: center; font: 700 24px var(--mono); padding: 12px 0 !important;
    margin: 0 !important; border-radius: 10px !important; letter-spacing: 0; caret-color: var(--signal);
    transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; }
.lg-otp input.filled { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--card)) !important;
    animation: lg-pop .2s ease; }
@keyframes lg-pop { 50% { transform: scale(1.08); } }
.lg-otp input:disabled { opacity: .5; }
.lg-timer { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 12.5px; color: var(--ink-soft); }
.lg-timer-bar { flex: 0 0 90px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lg-timer-bar i { display: block; height: 100%; width: 100%; background: var(--signal); border-radius: 3px; transition: width 1s linear; }
.lg-timer.low i { background: #b93434; }
.lg-timer.over { color: var(--err-ink); font-weight: 600; }
.lg-remember { margin: 10px 0 12px; font-size: 13px; }

@media (max-width: 480px) {
    .lg-otp { gap: 6px; }
    .lg-otp input { font-size: 20px; padding: 10px 0 !important; }
    .lg-blob { filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) {
    .lg-blob, .lg-waves circle, .lg-ring, .lg-submit::after, .lg-card, .lg-card.lg-shake, .lg-otp input.filled, .lg-caps { animation: none; }
    .login-page .lg-card { transform: none; transition: none; }
}


/* ================================ interactivity layer (assets/app.js) */
/* toast */
#uv-toasts { position: fixed; top: 64px; right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.uv-toast { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 14px;
    border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(16,32,43,.18); font-size: 14px; pointer-events: auto; overflow: hidden;
    opacity: 0; transform: translateX(24px) scale(.97); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.2); }
.uv-toast.in { opacity: 1; transform: none; }
.uv-toast.out { opacity: 0; transform: translateY(-8px) scale(.97); }
.uv-toast-ico { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: #fff; background: #2e9e5b; }
.uv-toast.err .uv-toast-ico { background: #b93434; }
.uv-toast.warn .uv-toast-ico { background: #c78b2d; }
.uv-toast-msg { flex: 1; line-height: 1.4; word-break: break-word; }
.uv-toast-x { border: 0; background: transparent; color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.uv-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #2e9e5b; opacity: .7; }
.uv-toast.err .uv-toast-bar { background: #b93434; }
@media (max-width: 720px) { #uv-toasts { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); left: 14px; right: 14px; width: auto; } }

/* progress bar */
#uv-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300; background: var(--signal);
    opacity: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 70%, transparent); transition: width 1.2s cubic-bezier(.1,.7,.2,1), opacity .3s ease; }
#uv-progress.on { opacity: 1; }
#uv-progress.done { transition: width .2s ease, opacity .3s ease .2s; opacity: 0; }

/* ripple on click */
.btn, .tab, .mtp-card, .fb-card { position: relative; overflow: hidden; }
.uv-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
    background: currentColor; opacity: .18; animation: uv-ripple .6s ease-out forwards; }
@keyframes uv-ripple { to { transform: scale(1); opacity: 0; } }

/* "working" button on submit */
.btn.working { pointer-events: none; opacity: .8; }
.btn.working::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* ingresso a cascata */
.uv-stagger { animation: uv-rise .38s ease-out backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes uv-rise { from { opacity: 0; transform: translateY(6px); } }
html.uv-ready main.container { animation: uv-page .35s ease-out; }
@keyframes uv-page { from { opacity: 0; transform: translateY(4px); } }

/* "in use" badge with a breathing dot; low stock pulses */
.badge.active::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal); margin-right: 6px; vertical-align: 1px; animation: uv-breathe 1.8s ease-in-out infinite; }
@keyframes uv-breathe { 50% { opacity: .35; transform: scale(.7); } }
.stat-warn strong { animation: uv-warn 1.6s ease-in-out infinite; }
@keyframes uv-warn { 50% { opacity: .55; } }

/* dashboard: selected row, copy code, live print bar */
.voucher-table tbody tr.selected td { background: color-mix(in srgb, var(--signal) 8%, transparent); }
.voucher-table tbody tr.selected { box-shadow: inset 3px 0 0 var(--signal); }
input[type=checkbox] { accent-color: var(--signal); transition: transform .12s ease; }
input[type=checkbox]:checked { transform: scale(1.12); }
.uv-copy { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer;
    margin-left: 6px; padding: 1px 4px; border-radius: 5px; opacity: 0; transition: opacity .15s ease, color .15s ease; }
td.code:hover .uv-copy, .uv-copy:focus-visible, .uv-copy.ok { opacity: 1; }
.uv-copy:hover { color: var(--signal); }
.uv-copy.ok { color: #1d7a3a; }
@media (hover: none) { .uv-copy { opacity: .6; } }
.print-bar { transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.print-bar.has-sel { border-color: var(--signal); box-shadow: 0 10px 28px color-mix(in srgb, var(--signal) 28%, transparent); }
.print-bar.has-sel #sel-count { color: var(--signal-ink); font-weight: 700; animation: uv-pop .3s ease; }
@keyframes uv-pop { 50% { transform: scale(1.12); } }

/* top bar: underline sliding under the active item (desktop) */
@media (min-width: 861px) {
    .nav-links a { position: relative; padding: 4px 0; }
    .nav-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px;
        background: var(--signal); border-radius: 2px; transition: left .2s ease, right .2s ease; }
    .nav-links a.active::after, .nav-links a:hover::after { left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .uv-toast, .uv-stagger, html.uv-ready main.container, .badge.active::before, .stat-warn strong,
    .print-bar.has-sel #sel-count, .uv-ripple { animation: none; transition: none; }
    .uv-toast { opacity: 1; transform: none; }
    .nav-links a::after { transition: none; }
}


/* ==================================================== HOSTED: choice, panel, guided setup */
/* installation chip in the bar */
.inst-chip { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; padding: 5px 11px; border-radius: 20px;
    background: color-mix(in srgb, var(--signal) 10%, var(--card)); color: var(--signal-ink); font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.inst-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 3px color-mix(in srgb, #2e9e5b 25%, transparent); animation: uv-breathe 2s ease-in-out infinite; }
[data-theme="dark"] .inst-chip { color: #9cc6ff; }
@media (max-width: 860px) { .inst-chip { order: 2; margin-left: 0; margin-right: 8px; max-width: 46vw; } }

/* installation choice */
.hs-pick { max-width: 720px; }
.hs-pick .lg-head { position: relative; }
.hs-out { position: absolute; right: 0; top: 4px; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.hs-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px;
    border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hs-card .hs-ico { font-size: 28px; }
.hs-card b { font-size: 15px; }
.hs-card small { color: var(--ink-soft); font-size: 12px; }
.hs-card:disabled { opacity: .55; cursor: not-allowed; }
@media (hover: hover) { .hs-card:not(:disabled):hover { transform: translateY(-3px); border-color: var(--signal); box-shadow: 0 14px 30px rgba(16,32,43,.14); } }

/* procedura guidata */
.ob-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }

.ob-skip { margin-left: auto; font-size: 12.5px; }
.ob-rail { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; margin: 6px 0 22px; position: relative; }
.ob-rail::before, .ob-rail::after { content: ''; position: absolute; left: 10%; right: 10%; top: 14px; height: 3px; border-radius: 2px; background: var(--line); }
.ob-rail::after { right: auto; width: calc(80% * var(--p) / 100%); background: var(--signal); transition: width .5s ease; }
.ob-rail li { position: relative; z-index: 1; text-align: center; font-size: 11.5px; color: var(--ink-soft); }
.ob-rail li a { color: inherit; text-decoration: none; }
.ob-rail li i { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 50%; font-style: normal; font-weight: 700;
    background: var(--card); border: 2px solid var(--line); color: var(--ink-soft); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.ob-rail li.done i { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.ob-rail li.cur i { background: var(--signal); border-color: var(--signal); color: #fff; transform: scale(1.18); box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 20%, transparent); }
.ob-rail li.cur { color: var(--signal-ink); font-weight: 600; }
@media (max-width: 480px) { .ob-rail li span { display: none; } }
.ob-step { animation: ob-in .45s cubic-bezier(.2,.9,.3,1.1) backwards; }
@keyframes ob-in { from { opacity: 0; transform: translateX(28px); } }
.ob-hero { text-align: center; margin-bottom: 18px; }
.ob-emoji { display: inline-block; font-size: 44px; line-height: 1; margin-bottom: 8px; animation: ob-bounce .8s cubic-bezier(.3,1.5,.5,1); }
@keyframes ob-bounce { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.ob-hero h2 { font-size: 20px; margin: 0 0 6px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ob-hero p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 520px; margin-inline: auto; }
.ob-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.ob-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 70%, var(--card)); font-size: 14px;
    animation: uv-rise .4s ease-out backwards; }
.ob-list li:nth-child(2) { animation-delay: 80ms; } .ob-list li:nth-child(3) { animation-delay: 160ms; }
.ob-list li span { font-size: 20px; }
.ob-next { margin-top: 8px; }
.ob-howto { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.ob-howto summary { cursor: pointer; font-weight: 600; }
.ob-howto ol { margin: 8px 0 4px 18px; padding: 0; }
.ob-howto li { margin-bottom: 4px; }
.ob-two { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
@media (max-width: 640px) { .ob-two { grid-template-columns: 1fr; } }
.ob-preview { position: sticky; top: 16px; display: flex; justify-content: center; padding: 18px 10px; border-radius: 14px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--signal) 10%, var(--paper)), var(--paper) 70%); border: 1px solid var(--line); }
.ob-ticket { width: 220px; padding: 16px 14px; border: 2px dashed var(--line); border-radius: 10px; background: #fff; color: #10202b; text-align: center;
    box-shadow: 0 18px 36px rgba(16,32,43,.18); transform: rotate(-1.5deg); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ob-ticket img { max-width: 90px; max-height: 50px; object-fit: contain; }
.ob-ticket b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ob-ticket small { font-size: 12px; color: #51636f; min-height: 14px; }
.ob-ticket em { font-size: 11px; font-style: normal; color: #51636f; min-height: 13px; }
.ob-code { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: .08em; padding: 6px 10px; border-top: 1px solid #dde5ea; border-bottom: 1px solid #dde5ea; }
.ob-mail .fb-card { text-decoration: none; color: inherit; }
.ob-check { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.ob-check li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; animation: uv-rise .4s ease-out backwards; }
.ob-check li:nth-child(2) { animation-delay: 120ms; } .ob-check li:nth-child(3) { animation-delay: 240ms; }
.ob-check li i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 20px; }
.ob-check li.ok i { background: #2e9e5b; border-color: #2e9e5b; position: relative; }
.ob-check li.ok i::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.ob-check li small { margin-left: auto; color: var(--ink-soft); }
.ob-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 14px; }
.ob-confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; background: hsl(var(--h) 80% 55%);
    animation: ob-fall 2.6s var(--d) ease-in forwards; opacity: 0; }
@keyframes ob-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(110vh) rotate(720deg); } }
.ob-first { animation: alert-in .35s ease; }
@media (prefers-reduced-motion: reduce) { .ob-step, .ob-emoji, .ob-list li, .ob-check li, .ob-confetti i, .inst-dot, .pn-card { animation: none; } }


/* ============================================ guided setup: two-column layout */
.ob-page { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--paper); }
.ob-shell { display: grid; grid-template-columns: minmax(300px, 42%) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.ob-story { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 28px 30px;
    color: #fff; background: radial-gradient(120% 90% at 10% 0%, #1b5fb5 0%, #0f2d55 45%, #0b1a30 100%); }
.ob-story::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 40% at 80% 20%, rgba(127,195,255,.28), transparent 70%), radial-gradient(50% 40% at 20% 90%, rgba(143,224,176,.22), transparent 70%);
    animation: lg-float 16s ease-in-out infinite alternate; }
.ob-story > * { position: relative; z-index: 1; }
.ob-story-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ob-story .brand { color: #fff; }
.ob-counter { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 20px; }
.ob-art { flex: 1; display: grid; place-items: center; min-height: 220px; }
.ob-story-text h2 { margin: 0 0 6px; font-size: 24px; text-transform: none; letter-spacing: 0; color: #fff; }
.ob-story-text p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 380px; }
.ob-story .ob-rail { margin: 8px 0 0; }
.ob-story .ob-rail::before { background: rgba(255,255,255,.22); }
.ob-story .ob-rail::after { background: #8fe0b0; }
.ob-story .ob-rail li { color: rgba(255,255,255,.7); }
.ob-story .ob-rail li i { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.ob-story .ob-rail li.done i { background: #8fe0b0; border-color: #8fe0b0; color: #0b1a30; }
.ob-story .ob-rail li.cur i { background: #fff; border-color: #fff; color: var(--signal-ink); box-shadow: 0 0 0 5px rgba(255,255,255,.22); }
.ob-story .ob-rail li.cur { color: #fff; }

.ob-panel { display: flex; flex-direction: column; padding: 34px clamp(20px, 6vw, 72px); max-width: 720px; width: 100%; }
.ob-head { margin-bottom: 18px; }
.ob-head h1 { font-size: 22px; }
.ob-step.leaving { animation: ob-out .25s ease-in forwards; }
@keyframes ob-out { to { opacity: 0; transform: translateX(-24px); } }
.ob-panel .ob-hero { text-align: left; }
.ob-panel .ob-hero p { margin-inline: 0; }
.ob-panel .ob-emoji { display: none; }   /* the big illustration sits in the left column */

/* fields "that respond" */
.ob-panel input.ok { border-color: #2e9e5b !important; background-image: linear-gradient(transparent, transparent); }
.ob-panel label { position: relative; }
.ob-panel input.ok + small::before, .ob-panel input.ok ~ .ok-tick { content: ''; }
.ob-keywrap { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.ob-keywrap input { margin: 0 !important; flex: 1; }
.ob-mini { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font: inherit; font-size: 15px; padding: 8px 10px; cursor: pointer; }
.ob-mini:hover { border-color: var(--signal); }
.ob-panel .mode-option { transition: transform .15s ease, border-color .15s ease; }
.ob-panel .mode-option:has(input:checked) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,32,43,.10); }
.ob-panel .btn.working span { opacity: .9; }

/* --- illustrazioni animate --- */
.art-orbit { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.art-orbit span { font-size: 72px; animation: art-wave 1.6s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes art-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-10deg); } }
.art-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.35); animation: art-spin 14s linear infinite; }
.art-orbit i::after { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #8fe0b0; box-shadow: 0 0 12px #8fe0b0; }
.art-orbit i:nth-child(2) { inset: 24px; animation-duration: 9s; animation-direction: reverse; } .art-orbit i:nth-child(2)::after { background: #7fc3ff; box-shadow: 0 0 12px #7fc3ff; }
.art-orbit i:nth-child(3) { inset: 48px; animation-duration: 6s; } .art-orbit i:nth-child(3)::after { background: #ffd36b; box-shadow: 0 0 12px #ffd36b; }
@keyframes art-spin { to { transform: rotate(360deg); } }

.art-radar { position: relative; width: 210px; height: 210px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28);
    background: repeating-radial-gradient(circle, transparent 0 34px, rgba(255,255,255,.14) 34px 35px); display: grid; place-items: center; overflow: hidden; }
.art-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(143,224,176,.55), transparent 70deg, transparent 360deg); animation: art-spin 3s linear infinite; }
.art-radar b { position: relative; z-index: 1; padding: 8px 14px; border-radius: 8px; background: #fff; color: var(--signal-ink); font-size: 13px; letter-spacing: .1em; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.art-radar .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #8fe0b0; box-shadow: 0 0 10px #8fe0b0; animation: art-blip 3s ease-in-out infinite; }
.art-radar .d1 { left: 28%; top: 30%; } .art-radar .d2 { left: 68%; top: 62%; animation-delay: 1s; } .art-radar .d3 { left: 60%; top: 24%; animation-delay: 2s; }
@keyframes art-blip { 0%, 60%, 100% { opacity: .25; transform: scale(.7); } 15% { opacity: 1; transform: scale(1.3); } }

.art-tickets { position: relative; width: 220px; height: 200px; }
.art-tickets .tk { position: absolute; left: 30px; top: 40px; width: 160px; height: 96px; border-radius: 10px; background: #fff; border: 2px dashed #cfe0f3;
    box-shadow: 0 14px 30px rgba(0,0,0,.25); animation: art-shuffle 5s ease-in-out infinite; }
.art-tickets .t1 { transform: rotate(-9deg) translate(-14px, 18px); opacity: .55; animation-delay: -1s; }
.art-tickets .t2 { transform: rotate(-4deg) translate(-6px, 8px); opacity: .8; animation-delay: -2s; }
.art-tickets .t3 { display: grid; place-items: center; color: #10202b; font: 700 16px var(--mono); letter-spacing: .08em; }
.art-tickets .t3::before { content: ''; position: absolute; left: 14px; right: 14px; top: 22px; height: 6px; border-radius: 3px; background: #dde5ea; }
@keyframes art-shuffle { 50% { translate: 0 -8px; } }
.art-tickets em { position: absolute; right: 10px; bottom: 26px; font-style: normal; font-size: 28px; animation: art-cut 2.4s ease-in-out infinite; }
@keyframes art-cut { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-26px) rotate(-12deg); } }

.art-mail { position: relative; width: 220px; height: 200px; display: grid; place-items: center; }
.art-mail .env { position: relative; width: 170px; height: 110px; border-radius: 10px; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.28); overflow: hidden; }
.art-mail .env::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; border-left: 85px solid transparent; border-right: 85px solid transparent; border-top: 60px solid #e3edfb; }
.art-mail .paper { position: absolute; left: 20px; right: 20px; bottom: 8px; height: 80px; border-radius: 6px; background: #f3f6f8; color: #2e9e5b; font-size: 34px; display: grid; place-items: center; animation: art-paper 3.2s ease-in-out infinite; }
@keyframes art-paper { 0%, 20%, 100% { transform: translateY(70px); } 45%, 75% { transform: translateY(-6px); } }
.art-mail .fly { position: absolute; font-size: 26px; right: 14px; top: 18px; animation: art-fly 3.2s ease-in-out infinite; }
@keyframes art-fly { 0% { transform: translate(-60px, 40px) scale(.6); opacity: 0; } 40%, 60% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(40px, -50px) scale(.5); opacity: 0; } }

.art-done { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.art-done span { font-size: 86px; animation: ob-bounce 1s cubic-bezier(.3,1.5,.5,1); filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); }
.art-done i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ffd36b; animation: art-pop 2.2s ease-out infinite; }
.art-done i:nth-child(2) { left: 20%; top: 30%; } .art-done i:nth-child(3) { right: 18%; top: 26%; background: #7fc3ff; animation-delay: .5s; }
.art-done i:nth-child(4) { left: 26%; bottom: 22%; background: #8fe0b0; animation-delay: 1s; } .art-done i:nth-child(5) { right: 24%; bottom: 20%; background: #ff9c9c; animation-delay: 1.5s; }
@keyframes art-pop { 0% { transform: scale(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

@media (max-width: 860px) {
    .ob-shell { grid-template-columns: 1fr; }
    .ob-story { padding: 20px 18px 16px; gap: 12px; }
    .ob-art { min-height: 150px; transform: scale(.72); margin: -20px 0; }
    .ob-story-text h2 { font-size: 20px; }
    .ob-story-text p { font-size: 13.5px; }
    .ob-panel { padding: 22px 16px 32px; max-width: none; }
    .ob-story .ob-rail li span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ob-story::before, .art-orbit span, .art-orbit i, .art-sweep, .art-radar .dot, .art-tickets .tk, .art-tickets em,
    .art-mail .paper, .art-mail .fly, .art-done span, .art-done i, .ob-step.leaving { animation: none; }
}

/* guided setup: "coming soon" option visible but not selectable */
.mode-option.soon { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.mode-option.soon .mm-ribbon { background: #8a6410; }
.ob-panel .mode-option.soon:has(input:checked) { transform: none; box-shadow: none; }


/* ================================== guided setup: motion layer */
/* the story column: a breathing mesh, rising particles, a watermark */
.ob-story { background-size: 200% 200%; animation: ob-mesh 18s ease-in-out infinite alternate; }
@keyframes ob-mesh { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.ob-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ob-particles i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%;
    background: rgba(255,255,255,.55); box-shadow: 0 0 12px rgba(143,224,176,.9); animation: ob-rise var(--t) linear var(--d) infinite; opacity: 0; }
@keyframes ob-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .5; } 100% { transform: translateY(-110vh) scale(1.2); opacity: 0; } }
.ob-watermark { position: absolute; right: -10px; bottom: 90px; font-size: 220px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.05); letter-spacing: -.06em; pointer-events: none; z-index: 0; user-select: none; }
.ob-art { position: relative; }
.ob-art > * { animation: ob-art-in .7s cubic-bezier(.2,.9,.3,1.2) backwards; }
@keyframes ob-art-in { from { opacity: 0; transform: scale(.7) translateY(20px); } }
.ob-story-text h2 { animation: ob-in .5s .1s ease-out backwards; }
.ob-story-text p { animation: ob-in .5s .2s ease-out backwards; }
.ob-rail li.cur i { animation: ob-cur-pulse 2s ease-in-out infinite; }
@keyframes ob-cur-pulse { 50% { box-shadow: 0 0 0 10px rgba(255,255,255,.08); } }
.ob-rail::after { background: linear-gradient(90deg, #8fe0b0, #7fc3ff); background-size: 200% 100%; animation: ob-shimmer 3s linear infinite; }
@keyframes ob-shimmer { to { background-position: -200% 0; } }

/* form: fields entering in cascade, primary button with gradient and glow */
.ob-panel .ob-step > form > *, .ob-panel .ob-step > .ob-list, .ob-panel .ob-step > .fb-cards, .ob-panel .ob-step > .ob-check, .ob-panel .ob-step > .alert { animation: uv-rise .45s ease-out backwards; }
.ob-panel .ob-step > form > *:nth-child(2) { animation-delay: 60ms; } .ob-panel .ob-step > form > *:nth-child(3) { animation-delay: 120ms; }
.ob-panel .ob-step > form > *:nth-child(4) { animation-delay: 180ms; } .ob-panel .ob-step > form > *:nth-child(5) { animation-delay: 240ms; }
.ob-panel .ob-step > form > *:nth-child(6) { animation-delay: 300ms; } .ob-panel .ob-step > form > *:nth-child(n+7) { animation-delay: 360ms; }
.ob-panel .btn.primary.ob-next { background: linear-gradient(120deg, var(--signal), #3a8dff 35%, #2e9e5b 65%, var(--signal)); background-size: 300% 100%;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--signal) 40%, transparent); animation: ob-shimmer 6s linear infinite; font-size: 15px; min-height: 48px; }
@media (hover: hover) { .ob-panel .btn.primary.ob-next:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 34px color-mix(in srgb, var(--signal) 50%, transparent); } }
.ob-panel input:focus, .ob-panel select:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.ob-panel input.ok { box-shadow: 0 0 0 4px rgba(46,158,91,.15); }
.ob-cloud-sw { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--signal) 6%, var(--card)); border: 1px dashed color-mix(in srgb, var(--signal) 35%, transparent); }
.ob-cloud-sw:has(input:checked) { background: color-mix(in srgb, var(--signal) 12%, var(--card)); border-style: solid; }

/* console search: card list with status, version and tick */
.ob-find { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12.5px; }
.ob-consoles { display: grid; gap: 8px; margin-bottom: 12px; }
.ob-console { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 12px;
    border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; animation: uv-rise .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.ob-console .oc-ico { font-size: 22px; }
.ob-console .oc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-console b { font-size: 14px; }
.ob-console small { color: var(--ink-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-console em { font-style: normal; font-size: 11px; color: var(--warn-ink); background: var(--warn-bg); padding: 1px 7px; border-radius: 10px; width: max-content; }
.ob-console .oc-check { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: transparent; font-weight: 700; transition: all .15s ease; }
.ob-console.on { border-color: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.ob-console.on .oc-check { background: var(--signal); border-color: var(--signal); color: #fff; transform: scale(1.1); }
.ob-console.old { opacity: .6; } .ob-console.off .oc-ico { filter: grayscale(1); }
@media (hover: hover) { .ob-console:hover { transform: translateX(3px); border-color: var(--signal); } }

/* connection test in progress: fast radar, continuous blips, a "focused" page */
body.ob-testing .art-sweep { animation-duration: .7s; }
body.ob-testing .art-radar .dot { animation-duration: 1s; }
body.ob-testing .art-radar { box-shadow: 0 0 0 12px rgba(143,224,176,.08), 0 0 60px rgba(143,224,176,.25); }
body.ob-testing .ob-panel .ob-step > *:not(form) { opacity: .5; transition: opacity .3s ease; }

/* ticket: it floats and reflects the light */
.ob-ticket { animation: ob-hover 5s ease-in-out infinite; transition: transform .2s ease; }
@keyframes ob-hover { 50% { translate: 0 -6px; } }
.ob-ticket::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); background-size: 250% 100%; animation: ob-shine 4s ease-in-out infinite; }
@keyframes ob-shine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.ob-ticket { position: relative; overflow: hidden; }

/* final step: denser confetti and a summary that ticks itself one line at a time */
.ob-check li.ok i::after { animation: ob-tick .4s cubic-bezier(.3,1.5,.5,1) backwards; }
.ob-check li:nth-child(1).ok i::after { animation-delay: .3s; } .ob-check li:nth-child(2).ok i::after { animation-delay: .6s; } .ob-check li:nth-child(3).ok i::after { animation-delay: .9s; }
@keyframes ob-tick { from { transform: scale(0) rotate(-40deg); } }

@media (prefers-reduced-motion: reduce) {
    .ob-story, .ob-particles i, .ob-art > *, .ob-story-text h2, .ob-story-text p, .ob-rail li.cur i, .ob-rail::after,
    .ob-panel .ob-step > form > *, .ob-panel .ob-step > .ob-list, .ob-panel .ob-step > .fb-cards, .ob-panel .ob-step > .ob-check, .ob-panel .ob-step > .alert,
    .ob-panel .btn.primary.ob-next, .ob-console, .ob-ticket, .ob-ticket::after, .ob-check li.ok i::after { animation: none; }
}
@media (max-width: 860px) { .ob-watermark { font-size: 120px; bottom: 40px; } .ob-particles { display: none; } }

/* controller step: numbered sections, cloud/local branches */
.ob-sec { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; }
.ob-sec h3 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ob-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: #fff; font-size: 13px; font-weight: 700; flex: 0 0 26px; }
#ob-ctrl.is-cloud .only-local, #ob-ctrl.is-local .only-cloud { display: none !important; }
.ob-where .mode-option { position: relative; }
.ob-find .btn.primary { min-height: 44px; }
.ob-msg { font-size: 12.5px; color: var(--ink-soft); }
.ob-msg.ok { color: var(--ok-ink); font-weight: 600; } .ob-msg.warn { color: var(--warn-ink); font-weight: 600; } .ob-msg.bad { color: var(--err-ink); font-weight: 600; }
.ob-chosen { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok-ink); font-size: 13px; font-weight: 600; word-break: break-all; animation: uv-rise .3s ease-out; }

/* cloud key guide: always open, with a right/wrong comparison */
.ob-guide { margin: 4px 0 12px; padding: 12px 14px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line));
    background: color-mix(in srgb, var(--signal) 5%, var(--card)); font-size: 13.5px; }
.ob-guide-head { font-size: 14px; margin-bottom: 10px; }
.ob-guide-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ob-guide-cmp > div { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; }
.ob-guide-cmp > div > span { font-size: 16px; }
.ob-guide-cmp b { display: block; font-size: 13px; }
.ob-guide-cmp small { color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; }
.ob-guide-cmp .yes { background: var(--ok-bg); } .ob-guide-cmp .yes b { color: var(--ok-ink); }
.ob-guide-cmp .no { background: var(--err-bg); } .ob-guide-cmp .no b { color: var(--err-ink); }
.ob-guide-steps { margin: 0 0 10px 18px; padding: 0; display: grid; gap: 4px; }
.ob-guide-steps li::marker { color: var(--signal); font-weight: 700; }
.ob-guide .btn { margin-right: 10px; }
@media (max-width: 520px) { .ob-guide-cmp { grid-template-columns: 1fr; } }

.ob-console.notowner { opacity: .6; border-style: dashed; }

/* "Create New API Key" window redrawn: the ticks light up by themselves */
.ob-guide-body { display: grid; grid-template-columns: 1fr 250px; gap: 14px; align-items: start; }
@media (max-width: 640px) { .ob-guide-body { grid-template-columns: 1fr; } .ob-mock { max-width: 320px; } }
.ob-mock { position: relative; background: #fff; color: #1a2330; border: 1px solid #dfe5ea; border-radius: 14px; padding: 12px 14px 14px;
    box-shadow: 0 18px 40px rgba(16,32,43,.18); font-size: 12.5px; transform: rotate(1deg); }
.mk-title { text-align: center; font-weight: 700; font-size: 13px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #edf1f4; }
.mk-label { color: #6c7a86; font-size: 11px; margin: 6px 0 3px; }
.mk-field { border: 1px solid #dfe5ea; border-radius: 8px; padding: 6px 9px; background: #f7f9fb; }
.mk-select { display: flex; justify-content: space-between; }
.mk-check { position: relative; display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.mk-check i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c9d2da; display: grid; place-items: center; font-style: normal; font-size: 11px; color: transparent; transition: all .3s ease; }
.mk-check.on i { background: #1f6fe0; border-color: #1f6fe0; color: #fff; transform: scale(1.1); }
.mk-check.on { animation: mk-glow 1.6s ease-in-out infinite; border-radius: 6px; }
.mk-check.c1 { animation-delay: 0s; } .mk-check.c2 { animation-delay: .3s; }
@keyframes mk-glow { 50% { background: rgba(31,111,224,.09); box-shadow: 0 0 0 4px rgba(31,111,224,.12); } }
.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-chip { position: relative; background: #eef2f5; border-radius: 6px; padding: 3px 8px; font-size: 12px; }
.mk-chip.hot { outline: 2px solid #1f6fe0; outline-offset: 1px; animation: mk-glow 1.6s .6s ease-in-out infinite; }
.mk-chip.hot2 { outline: 2px dashed #2e9e5b; outline-offset: 1px; }
.mk-btn { margin-top: 12px; background: #1f6fe0; color: #fff; text-align: center; border-radius: 8px; padding: 7px; font-weight: 600; }
.mk-call { position: absolute; right: -8px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #e8562a; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.mk-check .mk-call { right: auto; left: 150px; top: -2px; }
.mk-check.c2 .mk-call { left: 168px; }
.ob-guide-legend { margin: 10px 0 8px; font-size: 12.5px; color: var(--ink-soft); }
.ob-guide-legend b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e8562a; color: #fff; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .mk-check.on, .mk-chip.hot { animation: none; } }

.ob-check li.todo i { border-style: dashed; }

/* guided setup: next and back on the same row */
.ob-nav { display: flex; gap: 10px; margin-top: 8px; }
.ob-nav .ob-back { flex: 0 0 auto; min-height: 48px; display: inline-flex; align-items: center; }
.ob-nav .ob-next { flex: 1; margin-top: 0 !important; }
.ob-step.leaving-back { animation: ob-out-back .25s ease-in forwards !important; }
@keyframes ob-out-back { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 480px) { .ob-nav { flex-direction: column-reverse; } .ob-nav .ob-back { justify-content: center; } }

/* no horizontal scrolling from long texts (console ID, URL) */
.ob-check li small { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-chosen, .ob-panel .alert { overflow-wrap: anywhere; }
.ob-panel { overflow-x: hidden; }

/* password strength meter */
.pw-meter { display: flex; gap: 4px; margin: 6px 0 4px; }
.pw-meter i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background .2s ease; }
.pw-meter.s1 i:nth-child(-n+1), .pw-meter.s2 i:nth-child(-n+2) { background: #b93434; }
.pw-meter.s2 i:nth-child(-n+2) { background: #c78b2d; }
.pw-meter.s3 i:nth-child(-n+3) { background: #7aa83e; }
.pw-meter.s4 i { background: #2e9e5b; }
#pw-hint.ok { color: var(--ok-ink); }


/* ===================================================== PROVIDER PANEL (dedicated page) */
.pn-page { margin: 0; background: var(--paper); }
.pn-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 22px; background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(16,32,43,.06); }
.pn-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--signal), #2e9e5b, #7fc3ff); }
.pn-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pn-ver { font-size: 11px; color: var(--ink-soft); padding: 2px 8px; border: 1px solid var(--line); border-radius: 10px; }
.pn-links { display: flex; gap: 6px; }
.pn-links a { color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.pn-links a:hover, .pn-links a.active { background: color-mix(in srgb, var(--signal) 10%, transparent); color: var(--signal-ink); }
.pn-main { max-width: 1240px; margin: 0 auto; padding: 18px 22px 40px; }
.pn-main > .alert { margin-bottom: 12px; }

/* band with the numbers */
.pn-hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: center; padding: 26px 28px; border-radius: 18px; color: #fff;
    background: radial-gradient(120% 90% at 10% 0%, #1b5fb5 0%, #0f2d55 45%, #0b1a30 100%); background-size: 200% 200%; animation: ob-mesh 18s ease-in-out infinite alternate;
    box-shadow: 0 24px 50px rgba(11,26,48,.28); position: relative; overflow: hidden; }
.pn-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 85% 20%, rgba(127,195,255,.28), transparent 70%), radial-gradient(40% 40% at 20% 100%, rgba(143,224,176,.22), transparent 70%); pointer-events: none; }
.pn-hero > * { position: relative; }
.pn-hero h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.01em; }
.pn-hero p { margin: 0 0 16px; color: rgba(255,255,255,.8); font-size: 14px; max-width: 420px; }
.pn-cta { background: #fff; color: var(--signal-ink); font-weight: 700; border: 0; padding: 12px 18px; font-size: 15px; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.pn-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
a.pn-kpi { color: inherit; text-decoration: none; }
.pn-kpi { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 10px; text-align: center; backdrop-filter: blur(6px); animation: uv-rise .5s ease-out backwards; }
.pn-kpi:nth-child(2) { animation-delay: 80ms; } .pn-kpi:nth-child(3) { animation-delay: 160ms; } .pn-kpi:nth-child(4) { animation-delay: 240ms; } .pn-kpi:nth-child(5) { animation-delay: 320ms; }
.pn-kpi b { display: block; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pn-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.pn-kpi.ok b { color: #8fe0b0; } .pn-kpi.warn b { color: #ffd36b; } .pn-kpi.warn { animation: uv-rise .5s ease-out backwards, uv-warn 2s ease-in-out infinite; }

/* strumenti */
.pn-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }
.pn-tools .tab i { font-style: normal; font-size: 11px; margin-left: 4px; opacity: .7; }
.pn-tools-right { display: flex; gap: 10px; align-items: center; }
.pn-sort { width: auto !important; margin: 0 !important; padding: 7px 28px 7px 10px !important; font-size: 13px !important; }
.pn-tools .search input { width: 220px; }

/* grid + activity column */
.pn-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.pn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.pn-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
    animation: uv-rise .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
@media (hover: hover) { .pn-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16,32,43,.14); border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); } }
.pn-card header { display: flex; align-items: center; gap: 12px; }
.pn-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 44px; background: var(--paper); position: relative; }
.pn-ring::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--line); }
.pn-ring.active::before { border-color: #2e9e5b; animation: uv-breathe 2.4s ease-in-out infinite; }
.pn-ring.suspended::before { border-color: #c78b2d; border-style: dashed; }
.pn-ring.expired::before { border-color: #b93434; border-style: dashed; }
.pn-ring i { font-style: normal; font-size: 20px; }
.pn-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-title small { color: var(--ink-soft); font-size: 11.5px; }
.pn-card.st-suspended, .pn-card.st-expired { background: color-mix(in srgb, var(--card) 85%, var(--paper)); }
.pn-facts { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-fact { font-size: 12px; padding: 3px 9px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pn-fact em { font-style: normal; color: var(--warn-ink); }
.pn-expiry { font-size: 11.5px; color: var(--ink-soft); }
.pn-expiry i { display: block; height: 4px; border-radius: 2px; background: var(--line); margin-top: 4px; position: relative; overflow: hidden; }
.pn-expiry i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: #2e9e5b; border-radius: 2px; transition: width .8s ease; }
.pn-expiry.soon { color: var(--warn-ink); font-weight: 600; } .pn-expiry.soon i::after { background: #c78b2d; }
.pn-expiry.over { color: var(--err-ink); font-weight: 600; } .pn-expiry.over i::after { background: #b93434; }
.pn-people { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.pn-people small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--signal), #2e9e5b); flex: 0 0 26px; box-shadow: 0 0 0 2px var(--card); margin-right: -6px; }
.pn-people small { margin-left: 10px; }
.pn-avatar.big { width: 40px; height: 40px; flex: 0 0 40px; font-size: 15px; margin: 0; }
.pn-notes { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.pn-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.pn-actions .inline { margin: 0; }
.pn-edit { display: none; border-top: 1px dashed var(--line); padding-top: 10px; }
.pn-card.edit .pn-edit { display: block; animation: uv-rise .25s ease-out; }
.pn-danger { margin-top: 8px; padding: 10px; border-radius: 10px; background: var(--err-bg); }
.pn-danger label { color: var(--err-ink); }
.pn-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; border: 2px dashed var(--line); border-radius: 16px; }
.pn-empty span { font-size: 44px; display: block; margin-bottom: 8px; }
.pn-empty p { color: var(--ink-soft); }
.pn-nomatch { grid-column: 1 / -1; text-align: center; padding: 20px; }

.pn-side { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; position: sticky; top: 70px; }
.pn-side h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.pn-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-feed li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; font-size: 12.5px; animation: uv-rise .4s ease-out backwards; }
.pn-feed li:nth-child(2) { animation-delay: 60ms; } .pn-feed li:nth-child(3) { animation-delay: 120ms; } .pn-feed li:nth-child(4) { animation-delay: 180ms; } .pn-feed li:nth-child(n+5) { animation-delay: 240ms; }
.pn-feed-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--paper); display: grid; place-items: center; font-size: 13px; }
.pn-feed small { color: var(--ink-soft); font-family: var(--mono); font-size: 10.5px; }
.pn-feed span { color: var(--ink-soft); word-break: break-word; }
.pn-feed time { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }

/* side panel for creation */
.pn-drawer-back { position: fixed; inset: 0; background: rgba(11,26,48,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90; backdrop-filter: blur(2px); }
.pn-drawer-back.open { opacity: 1; pointer-events: auto; }
.pn-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--card); z-index: 100; padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
    box-shadow: -20px 0 50px rgba(11,26,48,.25); transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.9,.3,1); overflow-y: auto; }
.pn-drawer.open { transform: none; }
.pn-drawer header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pn-drawer h2 { margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.pn-x { border: 0; background: var(--paper); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink-soft); }
.pn-preview { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--paper); margin: 6px 0 14px; }
.pn-preview b { display: block; font-size: 15px; } .pn-preview small { color: var(--ink-soft); font-size: 12px; }

@media (max-width: 1000px) { .pn-layout { grid-template-columns: 1fr; } .pn-side { position: static; } .pn-hero { grid-template-columns: 1fr; } .pn-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
    .pn-main { padding: 12px 12px 30px; } .pn-hero { padding: 20px 18px; border-radius: 14px; } .pn-hero h1 { font-size: 20px; }
    .pn-kpis { grid-template-columns: repeat(2, 1fr); } .pn-kpi b { font-size: 22px; }
    .pn-grid { grid-template-columns: 1fr; } .pn-tools .search input { width: 100%; } .pn-tools-right { width: 100%; }
    .pn-top { padding: 8px 12px; } .pn-links a { padding: 6px 7px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .pn-hero, .pn-kpi, .pn-card, .pn-feed li, .pn-ring.active::before { animation: none; } .pn-drawer, .pn-drawer-back { transition: none; } }

/* emails to customers */
.pm-hero { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr); }
.pm-days label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); }
.pm-days input { width: 70px !important; margin: 0 !important; padding: 6px 8px !important; }
.pm-flow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pm-flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; padding: 10px 6px; border-radius: 12px; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: transform .15s ease, background .15s ease; animation: uv-rise .5s ease-out backwards; }
.pm-flow-step:nth-child(2) { animation-delay: 70ms; } .pm-flow-step:nth-child(3) { animation-delay: 140ms; } .pm-flow-step:nth-child(4) { animation-delay: 210ms; } .pm-flow-step:nth-child(5) { animation-delay: 280ms; }
.pm-flow-step i { font-style: normal; font-size: 22px; } .pm-flow-step b { font-size: 10.5px; text-align: center; line-height: 1.2; color: rgba(255,255,255,.85); }
.pm-flow-step.on { background: #fff; transform: translateY(-3px); } .pm-flow-step.on b { color: var(--signal-ink); }
@media (hover: hover) { .pm-flow-step:hover { background: rgba(255,255,255,.18); } .pm-flow-step.on:hover { background: #fff; } }
@media (max-width: 720px) { .pm-flow { justify-content: flex-start; } .pm-flow-step { width: calc(33% - 6px); } }

/* provider panel: air between the blue band and the content below */
.pn-hero { margin-bottom: 22px; }
.pm-hero + .panel.mtp { margin-top: 26px; padding-top: 12px; }
.pn-tools { margin-top: 24px; }

/* platform email sending */
.pe-hero { grid-template-columns: minmax(280px, 1.3fr) minmax(0, 1fr); }
.pe-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.pe-status b { display: block; font-size: 15px; } .pe-status small { color: rgba(255,255,255,.75); font-size: 12.5px; }
.pe-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; background: #8fe0b0; box-shadow: 0 0 0 5px rgba(143,224,176,.25); animation: uv-breathe 2s ease-in-out infinite; }
.pe-status.warn .pe-dot { background: #ffd36b; box-shadow: 0 0 0 5px rgba(255,211,107,.25); }
.pe-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .pe-layout { grid-template-columns: 1fr; } .pe-hero { grid-template-columns: 1fr; } }
.pe-form .switch-label { margin: 8px 0 14px; }
.pe-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pe-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; animation: uv-rise .35s ease-out backwards; }
.pe-steps li:nth-child(2) { animation-delay: 60ms; } .pe-steps li:nth-child(3) { animation-delay: 120ms; } .pe-steps li:nth-child(4) { animation-delay: 180ms; } .pe-steps li:nth-child(n+5) { animation-delay: 240ms; }
.pe-steps li i { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px; display: grid; place-items: center; font-style: normal; color: #fff; font-size: 12px; font-weight: 700; }
.pe-steps li.ok i { background: #2e9e5b; } .pe-steps li.ok i::after { content: '✓'; }
.pe-steps li.bad i { background: #b93434; } .pe-steps li.bad i::after { content: '✕'; }
.pe-steps small { display: block; color: var(--ink-soft); font-size: 12px; }
.pe-tips { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 6px; color: var(--ink-soft); }

/* email sending: Google steps */
.pe-mode .mode-switch { margin-top: 6px; }
.pe-gsteps { display: grid; gap: 14px; }
.pe-gstep { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); opacity: .7; }
.pe-gstep.cur { opacity: 1; border-color: var(--signal); background: color-mix(in srgb, var(--signal) 5%, var(--card)); }
.pe-gstep.done { opacity: 1; }
.pe-gstep i { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; background: var(--line); color: var(--ink-soft); }
.pe-gstep.cur i { background: var(--signal); color: #fff; } .pe-gstep.done i { background: #2e9e5b; color: #fff; }
.pe-gstep > div { flex: 1; min-width: 0; } .pe-gstep b { font-size: 14px; } .pe-gstep p { margin: 4px 0 8px; font-size: 13px; }
.pe-uri { display: block; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--card); border: 1px dashed var(--line); word-break: break-all; margin-bottom: 8px; }
.pe-gclient { display: grid; gap: 8px; }
.pe-gclient label { margin: 0; }

/* controller blocked by the licence (hosted) */
.lic-lock { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; margin: 8px 0 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 8%, var(--card)), color-mix(in srgb, #ffd36b 14%, var(--card)));
    border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); animation: uv-rise .35s ease-out; }
.lic-lock-ico { font-size: 30px; line-height: 1; animation: lg-ring-none 0s; }
.lic-lock b { font-size: 15px; display: block; margin-bottom: 4px; }
.lic-lock p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); }
.lic-current { font-family: var(--mono); font-size: 12.5px; color: var(--ink) !important; }

/* ===================================================== SUPPORT / TICKETS */
.tk-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .tk-layout { grid-template-columns: 1fr; } }
.tk-new h2 { cursor: default; }
.tk-new.collapsed h2 { cursor: pointer; }
.tk-new.collapsed h2::after { content: ' ▾'; color: var(--ink-soft); }
.tk-new.collapsed > :not(h2) { display: none; }
.tk-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.tk-type input { display: none; }
.tk-type { display: flex; }
.tk-type span { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; text-align: center; padding: 10px 6px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; transition: all .15s ease; background: var(--card); width: 100%; min-height: 96px; }
.tk-type i { font-style: normal; font-size: 22px; line-height: 1.2; } .tk-type b { font-size: 12.5px; line-height: 1.2; } .tk-type small { font-size: 10.5px; color: var(--ink-soft); line-height: 1.25; }
.tk-type input:checked + span { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--card)); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16,32,43,.10); }
.tk-previews { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.tk-previews img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); animation: uv-rise .3s ease-out; }
.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tk-item .tk-ico { font-size: 20px; flex: 0 0 auto; }
.tk-item .tk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-item b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-item small { color: var(--ink-soft); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-item.on { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 16%, transparent); }
.tk-item.unread b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); margin-right: 6px; vertical-align: 1px; animation: uv-breathe 1.8s ease-in-out infinite; }
@media (hover: hover) { .tk-item:hover { transform: translateX(3px); border-color: var(--signal); } }
.tk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tk-head > div { flex: 1; min-width: 0; }
.tk-head h2 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); }
.tk-ico.big { font-size: 28px; }
.tk-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; padding: 8px 4px; }
.tk-msg { display: flex; }
.tk-msg.me { justify-content: flex-end; }
.tk-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); animation: uv-rise .3s ease-out backwards; }
.tk-msg.me .tk-bubble { background: color-mix(in srgb, var(--signal) 10%, var(--card)); border-color: color-mix(in srgb, var(--signal) 30%, var(--line)); border-bottom-right-radius: 4px; }
.tk-msg.them .tk-bubble { border-bottom-left-radius: 4px; }
.tk-meta { font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; }
.tk-text { font-size: 14px; line-height: 1.5; word-break: break-word; }
.tk-attach { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tk-attach img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); transition: transform .15s ease; }
.tk-attach img:hover { transform: scale(1.04); }
.tk-attach a.tk-file { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a file that is not a picture is a label, not a broken image (D-M566) */
.tk-attach a.tk-file i { font-style: normal; }
.tk-reply { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tk-reply textarea { margin-top: 0; }
.tk-reply-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tk-clip { cursor: pointer; }
.tk-closed { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--paper); color: var(--ink-soft); font-size: 13.5px; text-align: center; }
.tk-empty { text-align: center; padding: 40px 20px; }
.tk-empty span { font-size: 44px; display: block; margin-bottom: 8px; } .tk-empty b { font-size: 16px; }
/* provider side */
.tk-hero .pn-kpis { grid-template-columns: repeat(4, 1fr); }
.tk-desk { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .tk-desk { grid-template-columns: 1fr; } }
.tk-inbox { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; position: sticky; top: 70px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; }
.tk-inbox .tk-list { overflow: auto; flex: 1; padding: 2px; }
.tk-filters { margin-bottom: 10px; }
.tk-filters-row { display: flex; gap: 6px; margin-top: 8px; }
.tk-filters-row select { margin: 0 !important; width: auto !important; padding: 6px 24px 6px 8px !important; font-size: 12.5px !important; }
.tk-filters-row .search { flex: 1; } .tk-filters-row .search input { width: 100%; }
.tk-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.tk-prios { display: flex; gap: 4px; flex-wrap: wrap; }
.tk-prio { border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; transition: all .15s ease; }
.tk-prio.on { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, var(--card)); font-weight: 700; transform: scale(1.05); }
.tk-prio.p-urgent.on { border-color: #b93434; background: var(--err-bg); } .tk-prio.p-high.on { border-color: #c78b2d; background: var(--warn-bg); }
.tk-tools-right { display: flex; gap: 6px; } .tk-tools-right .inline { margin: 0; }
.tk-ai { margin: 6px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--signal) 40%, var(--line)); background: color-mix(in srgb, var(--signal) 4%, var(--card)); }
.tk-ai-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .tk-ai-head .inline { margin: 0 0 0 auto; }
.tk-ai-body { margin: 8px 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.pn-pill { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #b93434; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; margin-left: 4px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .tk-item.unread b::before, .tk-bubble, .tk-previews img { animation: none; } }

.tk-code { font-family: var(--mono); letter-spacing: .04em; color: var(--signal-ink); }

/* ticket alert (provider and customer) */
.tk-alert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; margin: 0 0 16px;
    border: 1px solid color-mix(in srgb, #c78b2d 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, #ffd36b 22%, var(--card)), var(--card));
    box-shadow: 0 10px 28px rgba(199,139,45,.15); animation: uv-rise .4s ease-out; }
.tk-alert.cust { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--signal) 12%, var(--card)), var(--card)); box-shadow: 0 10px 28px color-mix(in srgb, var(--signal) 18%, transparent); }
.tk-alert-ico { font-size: 30px; line-height: 1; animation: uv-breathe 2s ease-in-out infinite; }
.tk-alert-body { flex: 1; min-width: 0; }
.tk-alert-body > b { display: block; font-size: 15px; margin-bottom: 4px; }
.tk-alert-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tk-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.tk-chip.bug { background: var(--err-bg); color: var(--err-ink); } .tk-chip.idea { background: var(--warn-bg); color: var(--warn-ink); } .tk-chip.question { background: #e3edfb; color: var(--signal-ink); }
[data-theme="dark"] .tk-chip.question { background: #1c3355; color: #9cc6ff; }
.tk-alert-list { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.tk-alert-list a { text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tk-alert-list a:hover { text-decoration: underline; }
.tk-alert-list a.t-bug { border-left: 3px solid #b93434; padding-left: 6px; } .tk-alert-list a.t-idea { border-left: 3px solid #c78b2d; padding-left: 6px; } .tk-alert-list a.t-question { border-left: 3px solid var(--signal); padding-left: 6px; }
.tk-alert-list small { color: var(--ink-soft); }
.tk-alert .btn { flex: 0 0 auto; }
@media (max-width: 720px) { .tk-alert { flex-wrap: wrap; } .tk-alert .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tk-alert, .tk-alert-ico { animation: none; } }

/* choosing the ticket to read/open */
.tk-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.tk-pick { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: inherit; text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; animation: uv-rise .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.tk-pick .tk-ico { font-size: 26px; }
.tk-pick b { font-size: 14px; line-height: 1.3; }
.tk-pick small { color: var(--ink-soft); font-size: 12px; }
.tk-pick .btn { margin-top: auto; align-self: flex-start; }
.tk-pick.t-bug { border-color: color-mix(in srgb, #b93434 40%, var(--line)); } .tk-pick.t-idea { border-color: color-mix(in srgb, #c78b2d 45%, var(--line)); } .tk-pick.t-question { border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
@media (hover: hover) { .tk-pick:hover { transform: translateY(-3px); border-color: var(--signal); box-shadow: 0 14px 30px rgba(16,32,43,.14); } }

.tk-readclose { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok-ink); font-size: 13px; }
.tk-readclose .btn { background: var(--card); }

/* translations in the tickets */
.tk-orig { margin-top: 6px; font-size: 12.5px; }
.tk-orig summary { cursor: pointer; color: var(--ink-soft); font-size: 12px; }
.tk-orig .tk-text { margin-top: 4px; font-size: 13px; }
.tk-retr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tk-retr select { width: auto !important; margin: 0 !important; padding: 4px 22px 4px 8px !important; font-size: 12px !important; }
.tk-sendlang { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.tk-sendlang select { width: auto !important; margin: 0 !important; padding: 5px 24px 5px 8px !important; font-size: 12.5px !important; }

/* provider settings */
.ps-tabs { margin: 0 0 16px; }
.ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; } }
.ps-map { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 8px; }

/* template gallery: group headings */
.mtp-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 8px 0 2px 4px; }
.mtp-group:first-child { margin-top: 0; }

/* provider users and backup */
.pu-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pu-layout { grid-template-columns: 1fr; } }
.pu-list { display: grid; gap: 10px; }
.pu-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); display: grid; gap: 8px; animation: uv-rise .35s ease-out backwards; }
.pu-card.super { border-style: dashed; }
.pu-card header { display: flex; align-items: center; gap: 10px; }
.pu-card .pn-avatar { margin: 0; }
.pu-who { min-width: 0; } .pu-who b { font-size: 14px; } .pu-who small { color: var(--ink-soft); font-size: 12px; display: block; }
.pu-mem { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.pu-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.pu-chip.admin { border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
.pu-chip .inline { margin: 0; }
.pu-x { border: 0; background: transparent; color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.pu-x:hover { color: var(--err-ink); }
.pu-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pu-actions .inline { margin: 0; }
.pu-attach { display: flex; gap: 6px; align-items: center; }
.pu-attach select { width: auto !important; margin: 0 !important; padding: 5px 24px 5px 8px !important; font-size: 12.5px !important; }
.pb-list { display: grid; gap: 6px; margin-bottom: 12px; }

/* permissions of the panel administrators */
.pu-card .pp-form { display: none; border-top: 1px dashed var(--line); padding-top: 10px; }
.pu-card.open-perms .pp-form { display: block; animation: uv-rise .25s ease-out; }
.pp-label { font-weight: 600; font-size: 13px; margin: 10px 0 4px; }
.pp-list { display: grid; gap: 8px; margin-bottom: 10px; }
.pp-all { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--signal) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; transition: opacity .2s ease; }
.pp-grid.locked { opacity: .5; }
.pp-item { margin: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 13px; transition: border-color .15s ease, background .15s ease; }
.pp-item:has(input:checked) { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); background: color-mix(in srgb, var(--signal) 6%, var(--card)); }
.pp-ico { width: 20px; display: inline-block; text-align: center; }
.pp-count { font-size: 12px; text-align: right; }


/* ===================================================== user panel polish (2.19.2) */
.container .panel { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(16,32,43,.05); padding: 18px 20px 20px; transition: box-shadow .2s ease; }
@media (hover: hover) { .container .panel:hover { box-shadow: 0 10px 28px rgba(16,32,43,.08); } }
.container .panel > h2 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .08em; padding-left: 12px; position: relative; margin-bottom: 12px; }
.container .panel > h2::after { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--signal), #2e9e5b); }
.container .panel.collapsible > h2::after { display: none; }
.container .panel.collapsible > h2 { padding-left: 0; }
.container .panel > p.muted:first-of-type { margin-top: -4px; margin-bottom: 14px; line-height: 1.5; }
h2.set-group { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .1em; padding: 6px 12px; border-radius: 20px; border: 0;
    background: color-mix(in srgb, var(--signal) 9%, var(--card)); color: var(--signal-ink); margin: 24px 0 10px 2px; }
.container label { font-size: 13px; }
.container label > small { display: block; margin-top: 4px; color: var(--ink-soft); font-weight: 400; line-height: 1.4; }
.container .grid-2 { gap: 12px 16px; }
.container .panel form > .btn, .container .panel form > .btn-row, .container .panel form > button { margin-top: 14px; }
.container .check-label { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 70%, var(--card)); margin: 8px 0; }
.container .check-label:has(input:checked) { background: color-mix(in srgb, var(--signal) 8%, var(--card)); }
.container .alert { border-radius: 12px; }
.settings-tabs { position: sticky; top: 58px; z-index: 5; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--paper) 85%, transparent); padding: 6px 0; border-radius: 12px; }
@media (max-width: 860px) { .settings-tabs { top: 0; } }
.container .panel + .panel, .container h2.set-group + .panel { margin-top: 12px; }
@media (max-width: 720px) { .container .panel { padding: 14px 14px 16px; border-radius: 14px; } }

/* procedura guidata: passo sicurezza */
.art-shield { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.art-shield span { font-size: 80px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.35)); animation: ob-bounce 1s cubic-bezier(.3,1.5,.5,1); position: relative; z-index: 1; }
.art-shield i { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(143,224,176,.5); animation: art-pop 2.6s ease-out infinite; }
.art-shield i.r2 { animation-delay: 1.3s; }
.art-shield b { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-family: var(--mono); letter-spacing: .4em; color: #fff; background: rgba(255,255,255,.12); padding: 4px 12px 4px 16px; border-radius: 8px; font-size: 14px; }
.ob-code-in { font-family: var(--mono); font-size: 24px !important; letter-spacing: .5em; text-align: center; }

/* requirements in the welcome */
.ob-req { margin-bottom: 14px; }
.ob-reqs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ob-reqs li { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: start; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 70%, var(--card)); font-size: 12.5px; line-height: 1.3; }
.ob-reqs li::before { content: '✓'; grid-row: 1 / span 2; color: #2e9e5b; font-weight: 700; }
.ob-reqs li b { grid-column: 2; }
.ob-reqs small { grid-column: 2; color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; }
.ob-reqs li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .ob-reqs { grid-template-columns: 1fr; } .ob-reqs li:last-child { grid-column: auto; } }


/* ===================================================== LANDING AND PUBLIC PAGES */
.ld-page { margin: 0; background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
.ld-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px;
    background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ld-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.ld-nav { display: flex; align-items: center; gap: 4px; }
.ld-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; }
.ld-nav a:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); color: var(--signal-ink); }
.ld-nav .ld-login { margin-left: 6px; color: #fff; }
.ld-nav a.btn.ld-login:hover { background: var(--signal-ink); color: #fff; }
.ld-lang select { margin: 0 !important; width: auto !important; padding: 6px 26px 6px 8px !important; font-size: 12.5px !important; }
@media (max-width: 720px) { .ld-nav a:not(.ld-login) { display: none; } .ld-top { padding: 8px 12px; } }

.ld-hero { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 70px 22px 40px; }
.ld-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-ink); background: color-mix(in srgb, var(--signal) 10%, var(--card)); padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; animation: uv-rise .5s ease-out backwards; }
.ld-hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; animation: uv-rise .6s .1s ease-out backwards; }
.ld-hero p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 520px; margin: 0 0 22px; animation: uv-rise .6s .2s ease-out backwards; }
.ld-cta { display: flex; gap: 10px; flex-wrap: wrap; animation: uv-rise .6s .3s ease-out backwards; }
.ld-btn { font-size: 15px; padding: 13px 22px; min-height: 48px; }
.ld-btn.primary { background: linear-gradient(120deg, var(--signal), #3a8dff 35%, #2e9e5b 65%, var(--signal)); background-size: 300% 100%; animation: ob-shimmer 6s linear infinite; box-shadow: 0 12px 30px color-mix(in srgb, var(--signal) 40%, transparent); border: 0; }
@media (hover: hover) { .ld-btn.primary:hover { transform: translateY(-2px); } }
.ld-trust { list-style: none; display: flex; gap: 16px; flex-wrap: wrap; padding: 0; margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); animation: uv-rise .6s .4s ease-out backwards; }
.ld-hero-art { position: relative; min-height: 380px; animation: ob-art-in .8s .2s cubic-bezier(.2,.9,.3,1.2) backwards; }
.ld-mock { position: absolute; left: 0; right: 40px; top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px rgba(16,32,43,.22); overflow: hidden; transform: perspective(1200px) rotateY(-8deg) rotateX(3deg); }
.ld-mock-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ld-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ld-mock-bar i:first-child { background: #ff7b72; } .ld-mock-bar i:nth-child(2) { background: #ffd36b; } .ld-mock-bar i:nth-child(3) { background: #8fe0b0; }
.ld-mock-body { padding: 14px; }
.ld-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ld-mock-stats div { background: var(--paper); border-radius: 10px; padding: 8px 10px; } .ld-mock-stats b { display: block; font-size: 20px; } .ld-mock-stats span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.ld-mock-rows { display: grid; gap: 6px; }
.ld-mock-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; animation: uv-rise .4s ease-out backwards; animation-delay: calc(.6s + var(--i) * 90ms); }
.ld-mock-row code { font-family: var(--mono); letter-spacing: .06em; }
.ld-ticket { position: absolute; right: 0; bottom: 0; width: 170px; background: #fff; color: #10202b; border: 2px dashed #cfe0f3; border-radius: 10px; padding: 12px; text-align: center; box-shadow: 0 18px 40px rgba(16,32,43,.25); transform: rotate(4deg); animation: ob-hover 5s ease-in-out infinite; }
.ld-ticket b { display: block; font-size: 10px; letter-spacing: .14em; } .ld-ticket small { display: block; color: #51636f; font-size: 11px; margin: 2px 0 6px; } .ld-ticket span { font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.ld-cloud { position: absolute; left: 10px; bottom: 30px; background: #0f2d55; color: #fff; padding: 8px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 24px rgba(15,45,85,.35); animation: ob-hover 4s 1s ease-in-out infinite; }
@media (max-width: 860px) { .ld-hero { grid-template-columns: 1fr; padding-top: 40px; } .ld-hero-art { min-height: 320px; } .ld-mock { right: 20px; } }

.ld-section { max-width: 1180px; margin: 0 auto; padding: 56px 22px; }
.ld-section h2, .ld-final h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.02em; text-transform: none; color: var(--ink); margin: 0 0 8px; text-align: center; }
.ld-sub { text-align: center; color: var(--ink-soft); font-size: 16px; margin: 0 0 28px; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ld-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease, box-shadow .2s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.ld-card.in { opacity: 1; transform: none; }
@media (hover: hover) { .ld-card:hover { box-shadow: 0 16px 36px rgba(16,32,43,.12); } }
.ld-ico { font-size: 30px; display: block; margin-bottom: 8px; }
.ld-card h3 { margin: 0 0 6px; font-size: 16px; } .ld-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.ld-how { background: radial-gradient(120% 90% at 10% 0%, #1b5fb5 0%, #0f2d55 45%, #0b1a30 100%); color: #fff; max-width: none; padding: 60px 22px; }
.ld-how h2, .ld-how .ld-sub { color: #fff; } .ld-how .ld-sub { color: rgba(255,255,255,.75); }
.ld-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: s; }
.ld-steps li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 20px; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.ld-steps li.in { opacity: 1; transform: none; }
.ld-steps i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--signal-ink); font-style: normal; font-weight: 800; margin-bottom: 10px; }
.ld-steps b { display: block; font-size: 16px; margin-bottom: 4px; } .ld-steps p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.5; }
.ld-price-card { max-width: 440px; margin: 0 auto; background: var(--card); border: 2px solid color-mix(in srgb, var(--signal) 40%, var(--line)); border-radius: 20px; padding: 26px; box-shadow: 0 24px 60px rgba(16,32,43,.14); position: relative; opacity: 0; transform: scale(.96); transition: opacity .5s ease, transform .5s ease; }
.ld-price-card.in { opacity: 1; transform: none; }
.ld-price-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ld-price-head b { font-size: 16px; }
.ld-price { font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 10px 0 16px; }
.ld-price small { font-size: 18px; vertical-align: top; margin-right: 4px; color: var(--ink-soft); } .ld-price span { font-size: 15px; font-weight: 500; color: var(--ink-soft); margin-left: 6px; }
.ld-includes { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: 14px; }
.ld-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.ld-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.ld-faq details.in { opacity: 1; transform: none; }
.ld-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; } .ld-faq p { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.ld-final { text-align: center; padding: 60px 22px 70px; }
.ld-footer { border-top: 1px solid var(--line); padding: 18px 22px 28px; text-align: center; font-size: 12.5px; color: var(--ink-soft); display: grid; gap: 4px; }
.ld-footer a { color: var(--signal-ink); }
/* the checkout page is dark (553, measured contrast): the footer's grey and its blue links read 2.3:1 and 1.8:1 on the navy — light ink and pale links instead (≥ 9:1) */
.ck2-page .ld-footer { color: rgba(255, 255, 255, .78); border-top-color: rgba(255, 255, 255, .18); }
.ck2-page .ld-footer a { color: #bfe0ff; }
.ld-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px;
    background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(16,32,43,.22); font-size: 13px; animation: uv-rise .4s ease-out; max-width: 900px; margin: 0 auto; }
.ld-cookie a { color: inherit; }
.ld-cookie-btns { display: flex; gap: 6px; }
.ld-narrow { max-width: 980px; margin: 0 auto; padding: 30px 22px 50px; }
.ld-legal-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ld-legal h1 { text-transform: none; letter-spacing: 0; font-size: 26px; color: var(--ink); margin: 0 0 4px; }
.ld-legal h2 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink); margin: 18px 0 6px; padding: 0; }
.ld-legal h2::after { display: none; }
.ld-legal p { font-size: 14px; line-height: 1.6; color: var(--ink); }
.ld-done { text-align: center; position: relative; padding: 40px 20px; }
.ld-done-ico { font-size: 64px; display: block; margin-bottom: 8px; animation: ob-bounce .9s cubic-bezier(.3,1.5,.5,1); }
.ld-done h1 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 28px; } .ld-done p { max-width: 560px; margin: 8px auto; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
/* checkout */
.ck-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; }
.ck-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.ck-steps li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--line); font-style: normal; font-weight: 700; font-size: 12px; }
.ck-steps li.cur { border-color: var(--signal); color: var(--ink); font-weight: 600; } .ck-steps li.cur i { background: var(--signal); color: #fff; }
.ck-steps li.done i { background: #2e9e5b; color: #fff; }
.ck-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .ck-layout { grid-template-columns: 1fr; } .ck-steps li span { display: none; } }
.ck-summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--signal) 8%, var(--card)); margin: 12px 0; font-size: 15px; }
#paypal-buttons { max-width: 420px; margin: 8px auto; }

/* sales: band, checklist, cards, orders */
.sl-hero { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.1fr); }

.sl-hero-btns .inline { margin: 0; }
.sl-toggle { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.sl-toggle.on { background: #8fe0b0; color: #0b1a30; border-color: #8fe0b0; }
.sl-toggle:disabled { opacity: .5; cursor: not-allowed; }
.sl-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sl-check a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: background .15s ease; }
.sl-check a:hover { background: rgba(255,255,255,.16); }
.sl-check i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); flex: 0 0 22px; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.sl-check li.ok i { background: #8fe0b0; border-color: #8fe0b0; color: #0b1a30; } .sl-check li.ok i::after { content: '✓'; font-weight: 800; }
.sl-check li:not(.ok) i::after { content: '!'; color: #ffd36b; font-weight: 800; }
.sl-check b { display: block; font-size: 13px; } .sl-check small { color: rgba(255,255,255,.75); font-size: 11.5px; }
.sl-tabs { margin: 18px 0 12px; }
.sl-tabs .mtp-count { margin-left: 4px; }
.sl-pane { animation: uv-rise .3s ease-out; }
.sl-price-preview { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 800px) { .sl-price-preview { grid-template-columns: 1fr; } .sl-check { grid-template-columns: 1fr; } .sl-hero { grid-template-columns: 1fr; } }
.sl-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sl-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; }
.sl-steps i { width: 24px; height: 24px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; flex: 0 0 24px; }
.sl-steps b { display: block; } .sl-steps small { color: var(--ink-soft); }
.sl-group { margin-bottom: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 60%, var(--card)); }
.sl-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 6px; }
.sl-group label { margin: 0; } .sl-group .grid-2 { margin: 0; }
.sl-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; padding-bottom: 4px; }
.sl-orders-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sl-orders { display: grid; gap: 8px; }
.sl-order { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); display: grid; gap: 6px; animation: uv-rise .3s ease-out backwards; }
.sl-o-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.sl-o-main small { flex-basis: 100%; }
.sl-o-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }
.sl-o-amount { font-weight: 700; color: var(--ink); }
.sl-o-more summary { cursor: pointer; font-size: 12.5px; color: var(--signal-ink); }
.sl-o-more dl { margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; font-size: 12.5px; }
.sl-o-more dt { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .sl-o-more dd { margin: 0; word-break: break-word; }

/* contents (storefront text editor) */
.pc-main { max-width: 1400px; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.pc-title { margin: 0 0 4px; font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.pc-langs { display: flex; gap: 4px; }
.pc-langs .mtp-lang { position: relative; text-decoration: none; }
.pc-langs .mtp-lang i { position: absolute; top: -6px; right: -6px; background: var(--signal); color: #fff; font-style: normal; font-size: 9px; border-radius: 8px; padding: 0 4px; }
.pc-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(300px, 420px); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pc-layout { grid-template-columns: 170px minmax(0, 1fr); } .pc-preview { grid-column: 1 / -1; } }
@media (max-width: 720px) { .pc-layout { grid-template-columns: 1fr; } }
.pc-sections { display: grid; gap: 4px; position: sticky; top: 70px; }
.pc-sec { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; border: 1px solid transparent; font-size: 13px; }
.pc-sec small { color: var(--ink-soft); font-size: 11px; } .pc-sec small b { color: var(--signal-ink); }
.pc-sec:hover { background: var(--card); } .pc-sec.on { background: var(--card); border-color: var(--signal); font-weight: 600; }
.pc-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pc-editor-head h2 { margin: 0; }
.pc-fields { display: grid; gap: 8px; max-height: 70vh; overflow: auto; padding: 4px; }
.pc-field { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s ease, background .15s ease; }
.pc-field.changed { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); background: color-mix(in srgb, var(--signal) 4%, var(--card)); }
.pc-field-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 4px; }
.pc-field-head code { color: var(--ink-soft); }
.pc-field-head .pc-restore { margin-left: auto; font-size: 11.5px; }
.pc-field input, .pc-field textarea { margin-top: 0 !important; font-size: 13.5px !important; }
.pc-def { display: block; margin-top: 4px; font-size: 11.5px; }
.pc-preview { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; position: sticky; top: 70px; }
.pc-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.pc-frame { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 9 / 14; }
.pc-frame iframe { width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; }

.pc-autotr { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; margin: 10px 0 8px; background: color-mix(in srgb, var(--signal) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); }
.pc-autotr .check-label { margin: 0; padding: 0; background: transparent; }
body.pc-busy { cursor: progress; } body.pc-busy .pc-editor { opacity: .6; pointer-events: none; }

.pc-save-tr { background: linear-gradient(120deg, var(--signal), #2e9e5b); border: 0; }

/* coupon, annunci, referral */
/* both columns share the real page width: the form is no longer caged at 420px */
.cp-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 1.35fr); gap: 20px; align-items: start; }
@media (max-width: 1180px) { .cp-layout { grid-template-columns: 1fr; } }   /* 556 (a window of ~1040 px): two squeezed columns wrapped every tile label — one column, the list below */
.cp-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; margin-bottom: 10px; align-items: stretch; }
.cp-kind input { display: none; }
.cp-kind { display: block; }
/* twin tiles: same height whatever the label length, content centered */
.cp-kind > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; min-height: 72px; box-sizing: border-box; padding: 8px 4px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; text-align: center; transition: all .15s ease; }
.cp-kind i { font-style: normal; font-size: 18px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef2f6; } .cp-kind b { font-size: 11px; line-height: 1.2; }   /* 556: every kind in the same 28 px box (the % and € glyphs had one, the icons did not) */
.cp-kind > span { min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pn-target { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #f4f6f9; border: 1px solid var(--line); } .pn-target small { flex-basis: 100%; color: var(--ink-soft); }   /* the structure a sale converts (562) */
.cp-beta-stats { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fffbea; }   /* the beta at a glance (560) */
.cp-beta-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-beta-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .cp-beta-kpis > * { display: grid; min-width: 96px; padding: 8px 10px; border-radius: 10px; background: var(--card, #fff); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.cp-beta-kpis b { font-size: 20px; line-height: 1.1; } .cp-beta-kpis small { color: var(--ink-soft); font-size: 11.5px; } .cp-beta-kpis .full b { color: #b42318; }
.cp-beta-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cp-beta-cap label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; }
.od-flag.od-flag-beta { background: #fff3c4; color: #7a5a00; border-color: #f1dfa0; border-style: solid; }   /* two classes: the generic .od-flag rule comes later in this file and was winning (D-M541) */
.cp-invite-link { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 11.5px; word-break: break-all; color: var(--signal-ink, #1d5fa8); }   /* the invitation link stays on the row (556): the flash showed it once */
.qt-beta-invite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; background: #fffbea; } .qt-beta-invite label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0; }
.cp-kind input:checked + span { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--card)); transform: translateY(-2px); }
.cp-preview { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #2e9e5b 10%, var(--card)); color: var(--ok-ink); font-weight: 600; font-size: 13px; }
.cp-list { display: grid; gap: 8px; }
.cp-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); display: grid; gap: 6px; animation: uv-rise .3s ease-out backwards; }
.cp-card.off { opacity: .55; }
.cp-card-main { display: flex; align-items: center; gap: 10px; } .cp-card-main > div { min-width: 0; } .cp-card-main b { font-size: 14px; display: block; } .cp-card-main small { color: var(--ink-soft); font-size: 12px; }
.cp-ico { font-size: 22px; flex: 0 0 auto; }
.cp-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); } .cp-card-meta .inline { margin: 0; }
.cp-ref .check-label { margin-bottom: 6px; }
.ck-coupon { margin: 10px 0 4px; } .ck-coupon label { margin: 0; }
.ck-coupon.ok input { border-color: #2e9e5b; background: #f2fbf5; }
.ck-coupon.err input { border-color: #c05050; background: #fdf3f3; animation: ck-shake .35s ease; }
@keyframes ck-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.ck-coupon-row { display: flex; gap: 8px; align-items: stretch; } .ck-coupon-row .btn.working { opacity: .55; pointer-events: none; } .ck-coupon-row input { flex: 1; margin-top: 0; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ck-invite { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: #fff7df; border: 1px solid #f1dfa0; color: #5a4400; font-size: 13.5px; font-weight: 600; }   /* the beta invitation banner over the coupon field (550) */
.ck-coupon-msg { display: block; min-height: 0; font-size: 13px; margin-top: 8px; } .ck-coupon-msg:empty { display: none; }
.ck-coupon-msg.show { padding: 9px 12px; border-radius: 10px; font-weight: 600; animation: uv-rise .3s ease-out; }
.ck-coupon-msg.ok { background: #e9f8ee; color: #1d7a3a; border: 1px solid #bfe8cc; } .ck-coupon-msg.err { background: #fdecec; color: #a33c3c; border: 1px solid #efc4c4; }
#ck2-exp.bump { display: inline-block; animation: sn-pop .4s ease; }
.an-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--card); animation: uv-rise .35s ease-out; position: relative; }
.an-banner.info { border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); background: color-mix(in srgb, var(--signal) 7%, var(--card)); }
.an-banner.success { border-color: color-mix(in srgb, #2e9e5b 45%, var(--line)); background: color-mix(in srgb, #2e9e5b 8%, var(--card)); }
.an-banner.warn { border-color: color-mix(in srgb, #c78b2d 50%, var(--line)); background: color-mix(in srgb, #ffd36b 18%, var(--card)); }
.an-banner.promo { border-color: color-mix(in srgb, #b93434 35%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, #ff7b72 12%, var(--card)), color-mix(in srgb, #ffd36b 12%, var(--card))); }
.an-banner .an-ico { font-size: 22px; } .an-banner > div { flex: 1; min-width: 0; } .an-banner b { display: block; font-size: 14.5px; } .an-banner p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.an-banner .inline { margin: 0; }
.an-close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 4px; } .an-close:hover { color: var(--ink); }
.an-preview-wrap { margin: 8px 0; }
.ref-card { border-color: color-mix(in srgb, #2e9e5b 40%, var(--line)); }
.ref-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ref-link code { padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13px; word-break: break-all; cursor: copy; }

/* storefront analytics */
.la-period { margin-top: 10px; display: inline-flex; background: rgba(255,255,255,.1); }
.la-period .tab { color: #fff; } .la-period .tab.active { background: #fff; color: var(--signal-ink); }
.la-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.la-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .la-grid { grid-template-columns: 1fr; } }
.la-chart svg { width: 100%; height: 190px; display: block; overflow: visible; }
.la-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.la-area { fill: color-mix(in srgb, var(--signal) 14%, transparent); }
.la-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: la-draw 1.4s ease-out forwards; }
.la-line.v { stroke: var(--signal); } .la-line.u { stroke: #2e9e5b; animation-delay: .2s; } .la-line.c { stroke: #c78b2d; animation-delay: .4s; }
@keyframes la-draw { to { stroke-dashoffset: 0; } }
.la-dot { fill: var(--card); stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; animation: la-fade .4s 1.2s ease-out forwards; cursor: help; }
@keyframes la-fade { to { opacity: 1; } }
.la-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.la-legend span::before { content: ''; display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: var(--signal); }
.la-legend .u::before { background: #2e9e5b; } .la-legend .c::before { background: #c78b2d; }
.la-funnel { display: grid; gap: 8px; }
.la-fstep { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; align-items: center; animation: uv-rise .4s ease-out backwards; animation-delay: calc(var(--i) * 90ms); }
.la-fbar { height: 34px; display: flex; align-items: center; justify-content: flex-end; }
.la-fbar b { display: block; width: var(--w); min-width: 34px; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--signal), #3a8dff); color: #fff; display: grid; place-items: center; font-size: 13px; transition: width .6s ease; }
.la-flabel { font-size: 13px; } .la-flabel small { display: block; color: var(--ink-soft); font-size: 11.5px; }
.la-bars { display: grid; gap: 6px; } .la-bars.small { font-size: 12px; }
.la-bar { display: grid; grid-template-columns: 140px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 13px; }
.la-bar > div { height: 12px; border-radius: 6px; background: var(--paper); overflow: hidden; }
.la-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--signal), #2e9e5b); animation: la-grow .8s ease-out; }
.la-bar i.c { background: linear-gradient(90deg, #c78b2d, #ffd36b); }
.la-bar b { text-align: right; font-size: 12.5px; }
@keyframes la-grow { from { width: 0; } }
.la-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .la-cols { grid-template-columns: 1fr; } }
.la-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 6px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.la-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-row i { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--signal) 70%, #2e9e5b); width: var(--w); min-width: 2px; animation: la-grow .8s ease-out; }
.la-row b { text-align: right; font-size: 12px; }
.la-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 110px; align-items: end; }
.la-hour { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.la-hour i { align-self: end; display: block; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #3a8dff, var(--signal)); animation: la-up .8s ease-out; }
.la-hour span { font-size: 9px; text-align: center; color: var(--ink-soft); height: 12px; }
@keyframes la-up { from { height: 0; } }
.la-pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e04b4b; margin-left: 6px; box-shadow: 0 0 0 0 rgba(224,75,75,.6); animation: la-pulse 1.6s ease-out infinite; vertical-align: middle; }
@keyframes la-pulse { to { box-shadow: 0 0 0 10px rgba(224,75,75,0); } }
.la-live { display: grid; gap: 4px; }
.la-ev { display: grid; grid-template-columns: 44px 120px minmax(0, 1fr) 110px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--paper); font-size: 12.5px; animation: uv-rise .3s ease-out backwards; }
.la-ev time { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; } .la-ev small { color: var(--ink-soft); text-align: right; }
.la-ev.ev-checkout_done { background: color-mix(in srgb, #2e9e5b 14%, var(--card)); } .la-ev.ev-cta { background: color-mix(in srgb, var(--signal) 10%, var(--card)); }
@media (prefers-reduced-motion: reduce) { .la-line, .la-dot, .la-bar i, .la-row i, .la-hour i, .la-pulse, .la-fstep, .la-ev { animation: none; stroke-dashoffset: 0; opacity: 1; } }

.pc-ab { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, #c78b2d 8%, var(--card)); border: 1px dashed color-mix(in srgb, #c78b2d 45%, var(--line)); }
.pc-ab summary { cursor: pointer; font-size: 12px; color: var(--ink-soft); } .pc-ab input, .pc-ab textarea { margin-top: 6px !important; } .pc-ab small { display: block; margin-top: 4px; font-size: 11.5px; }

/* analytics: tabs, speed, A/B, click map */
.la-kpis { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 900px) { .la-kpis { grid-template-columns: repeat(2, 1fr) !important; } }
.la-pane { animation: uv-rise .3s ease-out; }
.la-bar i.g { background: linear-gradient(90deg, #2e9e5b, #8fe0b0); } .la-bar i.r { background: linear-gradient(90deg, #b93434, #ff7b72); }
.la-legend .o::before { display: none; } .la-legend .o { color: #b93434; }
.la-dot.has-order { fill: #b93434; stroke: #fff; }
.la-mini { display: flex; align-items: center; gap: 8px; } .la-mini i { display: block; height: 8px; width: var(--w); min-width: 3px; max-width: 120px; border-radius: 4px; background: var(--signal); }
.la-speed { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.la-speed-kpi { min-width: 160px; padding: 14px 16px; border-radius: 14px; text-align: center; background: var(--paper); }
.la-speed-kpi b { display: block; font-size: 30px; } .la-speed-kpi span { font-size: 12px; color: var(--ink-soft); } .la-speed-kpi small { display: block; font-size: 11px; color: var(--ink-soft); }
.la-speed-kpi.ok { background: color-mix(in srgb, #2e9e5b 12%, var(--card)); } .la-speed-kpi.warn { background: var(--warn-bg); } .la-speed-kpi.bad { background: var(--err-bg); }
.la-ab-tests { display: grid; gap: 8px; margin-bottom: 14px; }
.la-ab-test { padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13px; } .la-ab-test small { color: var(--ink-soft); }
.la-ab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .la-ab-pair div { display: flex; gap: 6px; } .la-ab-pair i { font-style: normal; font-weight: 800; color: var(--signal-ink); }
.la-ab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .la-ab-grid { grid-template-columns: 1fr; } }
.la-ab-card { border: 2px solid var(--line); border-radius: 14px; padding: 14px; transition: border-color .2s ease; }
.la-ab-card.win { border-color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 6%, var(--card)); }
.la-ab-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .la-ab-head i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--signal); color: #fff; font-style: normal; font-weight: 800; }
.la-ab-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .la-ab-nums div { text-align: center; } .la-ab-nums b { display: block; font-size: 18px; } .la-ab-nums span { font-size: 10.5px; color: var(--ink-soft); }
.la-heat-wrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.la-heat { position: relative; width: 300px; aspect-ratio: 2 / 3; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #eef3f8, #fff); }
.la-heat canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.la-band { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--signal) 35%, transparent); }
.la-band span { position: absolute; left: 6px; top: 4px; font-size: 10px; color: var(--ink-soft); background: rgba(255,255,255,.7); padding: 1px 5px; border-radius: 4px; }
.la-dow { height: 80px; }

.pe-status.neutral { background: rgba(255,255,255,.08); }
a.pn-ver { text-decoration: none; cursor: pointer; } .pn-ver.dim { opacity: .55; margin-left: 4px; }
.pn-sandbox { font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 2px 9px; margin-left: 8px; border-radius: 10px; text-decoration: none;
  background: rgba(199,139,45,.25); color: #ffe2a8; border: 1px solid rgba(199,139,45,.55); animation: uv-warn 2.4s ease-in-out infinite; }
a.pn-sandbox:hover { background: rgba(199,139,45,.4); color: #fff; }
.pc-head { margin: 0 0 10px; } .pc-head > div:first-child:empty { display: none; }

/* AI consultant in the analytics */
.la-ai { border: 1px dashed color-mix(in srgb, var(--signal) 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--signal) 6%, var(--card)), var(--card)); margin-bottom: 16px; }
.la-ai-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .la-ai-head h2 { margin: 0; } .la-ai-head .inline { margin: 0; }
.la-ai-summary { font-size: 14.5px; line-height: 1.55; margin: 10px 0 12px; }
.la-ai-actions { display: grid; gap: 8px; }
.la-ai-action { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); animation: uv-rise .4s ease-out backwards; animation-delay: calc(var(--i) * 70ms); }
.la-ai-n { width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: 0 0 26px; }
.la-ai-action b { font-size: 14px; } .la-ai-action p { margin: 3px 0; font-size: 13.5px; line-height: 1.45; } .la-ai-action small { font-size: 12px; }
.la-ai-variants { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #c78b2d 8%, var(--card)); border: 1px solid color-mix(in srgb, #c78b2d 40%, var(--line)); }
.la-ai-vhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .la-ai-vhead .inline { margin: 0; }
.la-ai-var { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 13px; padding: 4px 0; } .la-ai-var code { color: var(--ink-soft); font-size: 11.5px; }

.la-rw { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.la-rw-list { display: grid; gap: 8px; margin: 8px 0 12px; max-height: 420px; overflow: auto; }
.la-rw-item { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; font-size: 13px; align-items: start; }
.la-rw-item code { color: var(--ink-soft); font-size: 11.5px; }
.la-rw-old { padding: 6px 8px; border-radius: 8px; background: var(--paper); color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, #b93434 50%, transparent); }
.la-rw-new { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, #2e9e5b 10%, var(--card)); }
@media (max-width: 720px) { .la-rw-item { grid-template-columns: 1fr; } }


.pc-versions { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.pc-versions h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 6px; }
.pc-version { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 8px; margin: 0; }
.pc-version:hover { background: var(--paper); } .pc-version b { font-size: 12.5px; display: block; } .pc-version small { font-size: 11px; color: var(--ink-soft); display: block; }


/* installation health in the panel */
.hl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 11.5px; font-weight: 600; }
.hl-badge.silent { background: var(--err-bg); color: var(--err-ink); } .hl-badge.stale { background: var(--warn-bg); color: var(--warn-ink); }
.pn-card.hl-silent { border-color: color-mix(in srgb, #b93434 45%, var(--line)); box-shadow: inset 4px 0 0 #b93434; }
.tab.tab-bad { color: var(--err-ink); } .pn-kpi.bad b { color: #ff9b9b; }
.uv-copyable { cursor: copy; } .uv-copyable.copied { color: #1d7a3a !important; }

/* ===================================================== DASHBOARD: two-column layout, profiles, counters */
.vp-toolbar { align-items: stretch; }
.vp-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; flex: 1; }
.vp-stats .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.vp-stats .stat strong { font-size: 26px; } .vp-stats .stat.stat-warn strong { color: var(--warn-ink); }
.vp-sync { padding: 0 !important; overflow: hidden; }
.vp-sync-btn { width: 100%; height: 100%; text-align: left; background: transparent; border: 0; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; transition: background .15s ease; }
.vp-sync-btn:hover { background: var(--paper); } .vp-sync-btn:disabled { cursor: not-allowed; opacity: .6; }
.vp-sync-btn i { width: 10px; height: 10px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 4px rgba(46,158,91,.18); margin-bottom: 4px; }
.vp-sync.warn .vp-sync-btn i { background: #c78b2d; box-shadow: 0 0 0 4px rgba(199,139,45,.18); }
.vp-sync-btn.working i { animation: la-pulse 1s ease-out infinite; }
.vp-new-mobile { display: none; }
.vp-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.vp-right { min-width: 0; }
.vp-create { position: sticky; top: 74px; display: block; }   /* always visible on desktop; on the phone it opens with the button */
.vp-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.vp-profile { text-align: left; background: var(--paper); border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink); transition: all .15s ease; }
.vp-profile i { font-style: normal; font-size: 20px; display: block; } .vp-profile b { display: block; font-size: 13.5px; margin-top: 2px; } .vp-profile small { color: var(--ink-soft); font-size: 11.5px; display: block; }
.vp-profile.on { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--card)); transform: translateY(-2px); }
@media (hover: hover) { .vp-profile:hover { transform: translateY(-2px); } }
.vp-profedit { margin-top: 10px; font-size: 13px; } .vp-profedit summary { cursor: pointer; color: var(--ink-soft); }
.vp-profrow { display: grid; grid-template-columns: 44px 1fr 1fr 1fr; gap: 6px; margin: 6px 0; } .vp-profrow input, .vp-profrow select { margin: 0 !important; font-size: 12.5px !important; } .vp-profrow .vp-ico { text-align: center; }
.vp-profrow .joined { display: flex; } .vp-profrow .joined input { border-radius: 8px 0 0 8px; } .vp-profrow .joined select { border-radius: 0 8px 8px 0; }
.voucher-table tbody tr { cursor: pointer; }
@media (max-width: 1000px) {
    .vp-layout { grid-template-columns: 1fr; }
    .vp-create { position: static; display: none; } .vp-create.open { display: block; animation: uv-rise .25s ease-out; }
    .vp-new-mobile { display: inline-flex; }
    .vp-stats { grid-template-columns: repeat(2, 1fr); }
}

.vp-options { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.vp-options h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 0 0 6px; }
.vp-options .advanced { margin: 0; } .vp-options .advanced summary { font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.vp-options .grid-3 { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.vp-profedit { margin-top: 6px; }

/* ===================================================== RECEPTION MODE (tablet) */
.rc-page { background: radial-gradient(120% 90% at 50% 0%, #17395f 0%, #0f2d55 45%, #0b1a30 100%); color: #fff; min-height: 100vh; margin: 0; }
.rc-main { max-width: 1080px; margin: 0 auto; padding: 28px 22px 40px; min-height: 100vh; display: flex; flex-direction: column; }
.rc-head { text-align: center; margin-bottom: 22px; }
.rc-logo { max-width: 300px; max-height: 100px; width: auto; height: auto; object-fit: contain; background: #fff; padding: 12px 18px; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.rc-brand { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.rc-sub { margin: 10px 0 0; color: rgba(255,255,255,.75); font-size: 16px; }
.rc-alert { max-width: 640px; margin: 0 auto 16px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; flex: 1; align-content: center; }
.rc-tile { border: 0; border-radius: 22px; padding: 28px 22px; background: rgba(255,255,255,.1); color: #fff; font: inherit; text-align: center; cursor: pointer; border: 2px solid rgba(255,255,255,.18); transition: transform .15s ease, background .15s ease; animation: uv-rise .4s ease-out backwards; animation-delay: calc(var(--i) * 70ms); min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
.rc-tile i { font-style: normal; font-size: 46px; display: block; margin-bottom: 10px; }
.rc-tile b { display: block; font-size: 24px; line-height: 1.15; } .rc-tile small { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.72); }
.rc-tile:active, .rc-tile.working { transform: scale(.97); background: rgba(255,255,255,.2); } .rc-tile:disabled { opacity: .5; }
@media (hover: hover) { .rc-tile:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); } }
.rc-foot { text-align: center; color: rgba(255,255,255,.45); font-size: 12.5px; margin: 24px 0 0; }
.rc-result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: ob-bounce .6s cubic-bezier(.3,1.5,.5,1); }
.rc-result-title { color: #8fe0b0; font-weight: 700; font-size: 20px; margin: 0 0 14px; }
.rc-code { font-family: var(--mono); font-weight: 800; font-size: clamp(56px, 11vw, 120px); letter-spacing: .08em; line-height: 1; background: #fff; color: #10202b; padding: 22px 34px; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45); cursor: copy; }
.rc-valid { font-size: 20px; margin: 22px 0 6px; } .rc-howto { color: rgba(255,255,255,.78); font-size: 16px; max-width: 560px; margin: 0 0 26px; line-height: 1.5; }
.rc-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.rc-btn { font-size: 20px; padding: 16px 30px; border-radius: 16px; }
.rc-btn:not(.primary) { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.rc-timer { margin-top: 26px; width: min(360px, 90%); } .rc-timer i { display: block; height: 4px; border-radius: 2px; background: #8fe0b0; animation: rc-shrink var(--s) linear forwards; }
@keyframes rc-shrink { from { width: 100%; } to { width: 0; } }
.rc-timer span { display: block; font-size: 12px; color: rgba(255,255,255,.55); margin-top: 6px; }
.rc-print { display: none; }
@media print { body.rc-page { background: #fff; color: #000; } .rc-main { display: none; } .rc-print { display: block; text-align: center; padding: 20px; } .rc-print img { max-width: 220px; max-height: 80px; } .rc-print b { display: block; font-size: 18px; margin: 10px 0 4px; } .rc-print .code { display: block; font-family: var(--mono); font-size: 34px; font-weight: 800; letter-spacing: .08em; margin: 12px 0; } .rc-print em { display: block; font-size: 12px; color: #444; } }
/* settings: devices */
.rc-newlink { background: color-mix(in srgb, #2e9e5b 10%, var(--card)); border: 1px solid color-mix(in srgb, #2e9e5b 45%, var(--line)); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.rc-newlink b { display: block; margin-bottom: 6px; } .rc-newlink code { display: block; word-break: break-all; padding: 8px 10px; border-radius: 8px; background: var(--paper); font-size: 12.5px; } .rc-newlink small { display: block; margin-top: 6px; color: var(--ink-soft); }
.rc-devices { display: grid; gap: 8px; margin-bottom: 12px; }
.rc-device { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.rc-device > div { flex: 1; } .rc-device b { display: block; } .rc-device small { color: var(--ink-soft); font-size: 12px; } .rc-device .inline { margin: 0; } .rc-device-ico { font-size: 22px; }
.rc-add, .rc-opts { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; } .rc-add label, .rc-opts label { flex: 1; min-width: 200px; margin: 0; }

.rc-howbox { border: 1px solid color-mix(in srgb, var(--signal) 35%, var(--line)); background: color-mix(in srgb, var(--signal) 6%, var(--card)); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; font-size: 13.5px; }
.rc-howbox b { display: block; margin-bottom: 6px; } .rc-howbox ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; } .rc-howbox ol li::marker { font-weight: 700; color: var(--signal-ink); }
.rc-howrules { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 4px; color: var(--ink-soft); font-size: 12.5px; }

.la-ai-head form, .la-ai-vhead form, .la-ai-vhead span { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pn-hero-text .pn-cta-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .pn-hero-text .pn-cta-row form { margin: 0; display: inline-flex; }

/* reception: light theme */
.rc-page.rc-light { background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef3f8 55%, #e3ebf3 100%); color: #10202b; }
.rc-light .rc-sub, .rc-light .rc-foot { color: #51636f; } .rc-light .rc-tile { background: #fff; color: #10202b; border-color: #d9e2ec; box-shadow: 0 10px 30px rgba(16,32,43,.08); }
.rc-light .rc-tile small { color: #51636f; } .rc-light .rc-tile:active, .rc-light .rc-tile.working { background: #eef3f8; }
@media (hover: hover) { .rc-light .rc-tile:hover { background: #f7f9fc; } }
.rc-light .rc-logo { box-shadow: 0 10px 30px rgba(16,32,43,.1); border: 1px solid #d9e2ec; }
.rc-light .rc-code { background: #10202b; color: #fff; box-shadow: 0 20px 50px rgba(16,32,43,.25); }
.rc-light .rc-result-title { color: #1d7a3a; } .rc-light .rc-howto { color: #51636f; } .rc-light .rc-btn:not(.primary) { background: #fff; color: #10202b; border-color: #d9e2ec; }
.rc-light .rc-timer i { background: #2e9e5b; } .rc-light .rc-timer span { color: #51636f; }
.rc-wa { margin-top: 18px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; justify-content: center; animation: uv-rise .25s ease-out; }
.rc-wa label { margin: 0; text-align: left; font-size: 13px; color: inherit; } .rc-wa input { font-size: 20px; padding: 12px 14px; min-width: 260px; }
.rc-wa small { flex-basis: 100%; text-align: center; font-size: 12px; opacity: .7; }
.rc-wa-btn { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; }
/* settings: theme choice with preview */
.rc-themes { display: grid; grid-template-columns: repeat(2, minmax(180px, 240px)); gap: 12px; margin-bottom: 12px; }
.rc-theme input { display: none; } .rc-theme { cursor: pointer; }
.rc-theme-pv { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 14px; border: 2px solid var(--line); transition: all .15s ease; }
.rc-theme.dark .rc-theme-pv { background: radial-gradient(120% 90% at 50% 0%, #17395f, #0b1a30); } .rc-theme.light .rc-theme-pv { background: linear-gradient(#fff, #e3ebf3); }
.rc-pv-logo { display: block; width: 70px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid rgba(0,0,0,.08); }
.rc-pv-tiles { display: flex; gap: 6px; } .rc-pv-tiles b { display: grid; place-items: center; width: 42px; height: 34px; border-radius: 8px; font-size: 16px; }
.rc-theme.dark .rc-pv-tiles b { background: rgba(255,255,255,.12); } .rc-theme.light .rc-pv-tiles b { background: #fff; border: 1px solid #d9e2ec; }
.rc-theme-pv em { font-style: normal; font-family: var(--mono); font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.rc-theme.dark .rc-theme-pv em { background: #fff; color: #10202b; } .rc-theme.light .rc-theme-pv em { background: #10202b; color: #fff; }
.rc-theme-name { display: block; text-align: center; margin-top: 6px; font-size: 13px; font-weight: 600; }
.rc-theme input:checked + .rc-theme-pv { border-color: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 20%, transparent); }
.rc-optsform .grid-2 { align-items: start; }

/* reception: generation with the chosen duration */
.rc-gen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rc-gen-label { font-size: 22px; margin: 0 0 14px; opacity: .85; }
.rc-stepper { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rc-stepper input { width: 150px; text-align: center; font-size: 56px; font-weight: 800; padding: 10px; border-radius: 18px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: inherit; -moz-appearance: textfield; }
.rc-stepper input::-webkit-outer-spin-button, .rc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.rc-step { width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: inherit; font-size: 34px; font-weight: 700; cursor: pointer; }
.rc-step:active { transform: scale(.94); }
.rc-units { display: flex; gap: 10px; margin-bottom: 22px; }
.rc-unit input { display: none; } .rc-unit span { display: inline-block; padding: 12px 26px; border-radius: 30px; border: 2px solid rgba(255,255,255,.25); font-size: 18px; cursor: pointer; }
.rc-unit input:checked + span { background: #fff; color: #10202b; border-color: #fff; }
.rc-gen-btn { font-size: 26px; padding: 22px 46px; border-radius: 20px; min-width: 320px; }
.rc-gen-note { margin: 14px 0 0; font-size: 13px; opacity: .6; }
.rc-light .rc-stepper input, .rc-light .rc-step, .rc-light .rc-unit span { background: #fff; border-color: #d9e2ec; color: #10202b; }
.rc-light .rc-unit input:checked + span { background: #10202b; color: #fff; border-color: #10202b; }

.rc-net { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 16px; border-radius: 30px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 16px; }
.rc-net span { opacity: .75; } .rc-net b { font-size: 18px; letter-spacing: .02em; }
.rc-light .rc-net { background: #fff; border-color: #d9e2ec; }
.rc-idle { flex: 1; display: flex; align-items: center; justify-content: center; animation: uv-rise .5s ease-out; }
.rc-idle-btn { font-size: clamp(24px, 3.4vw, 34px); padding: 28px 44px; border-radius: 24px; box-shadow: 0 20px 50px rgba(58,141,255,.4); animation: ob-hover 5s ease-in-out infinite; }
/* dashboard: reception vouchers, visible but not printable */
.rc-lock { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; cursor: help; font-size: 14px; }
.rc-lock-tip { position: fixed; left: 0; top: 0; width: 260px; max-width: calc(100vw - 16px); padding: 8px 10px; border-radius: 8px; background: var(--ink-deep, #0b1a30); color: #fff; font-size: 12px; line-height: 1.4; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .15s ease; box-shadow: 0 8px 22px rgba(0,0,0,.25); white-space: normal; }
.rc-lock-tip.on { opacity: 1; }
tr.rc-made { cursor: default !important; background: color-mix(in srgb, var(--signal) 4%, var(--card)); } tr.rc-made:hover { background: color-mix(in srgb, var(--signal) 7%, var(--card)); }
.acc-verify { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* access recovery */
.fp-intro { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.fp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; margin: 0 0 16px; }
.fp-steps li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); padding: 6px 8px; border-radius: 10px; background: var(--paper); }
.fp-steps li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11px; background: var(--card); border: 1px solid var(--line); flex: 0 0 20px; }
.fp-steps li.cur { color: var(--ink); background: color-mix(in srgb, var(--signal) 8%, var(--card)); } .fp-steps li.cur i { background: var(--signal); color: #fff; border-color: var(--signal); }
.fp-sent { text-align: center; padding: 10px 6px 4px; animation: uv-rise .4s ease-out; }
.fp-sent-ico { font-size: 52px; display: block; animation: ob-bounce .8s cubic-bezier(.3,1.5,.5,1); }
.fp-sent b { display: block; font-size: 18px; margin: 8px 0 6px; } .fp-sent p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; } .fp-sent small { color: var(--ink-soft); font-size: 12.5px; }

.pw-hint { display: block; margin-top: 4px; font-size: 12px; min-height: 14px; } .pw-hint.ok { color: #1d7a3a; } .pw-hint.err { color: var(--err-ink); }
.pw-meter { display: block; height: 4px; border-radius: 2px; margin-top: 6px; background: var(--paper); position: relative; overflow: hidden; }
.pw-meter::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; transition: width .25s ease, background .25s ease; }
.pw-meter[data-s="1"]::after { width: 25%; background: #b93434; } .pw-meter[data-s="2"]::after { width: 50%; background: #c78b2d; } .pw-meter[data-s="3"]::after { width: 75%; background: #2e9e5b; } .pw-meter[data-s="4"]::after { width: 100%; background: #1d7a3a; }

/* invitations (customer) */
.ref-hero { background: linear-gradient(120deg, color-mix(in srgb, #2e9e5b 10%, var(--card)), var(--card)); border-color: color-mix(in srgb, #2e9e5b 40%, var(--line)); }
.ref-hero-in { display: flex; gap: 16px; align-items: center; } .ref-hero-ico { font-size: 44px; }
.ref-hero h1 { margin: 0 0 4px; font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--ink); } .ref-hero p { margin: 0; color: var(--ink-soft); }
.ref-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ref-how div { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.ref-how i { width: 22px; height: 22px; border-radius: 50%; background: #2e9e5b; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; flex: 0 0 22px; }
@media (max-width: 720px) { .ref-how { grid-template-columns: 1fr; } }
.ref-summary { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 12px; } .ref-summary b { font-size: 26px; color: #1d7a3a; } .ref-summary span { color: var(--ink-soft); font-size: 13px; }

.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 10px; max-width: 640px; margin: 8px 0; }
.tr-banner { border-color: color-mix(in srgb, #2e9e5b 45%, var(--line)) !important; background: color-mix(in srgb, #2e9e5b 8%, var(--card)) !important; } .tr-banner .btn { align-self: center; }

/* PWA */
.pwa-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.pwa-plat { padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: 13px; } .pwa-plat b { display: block; margin-bottom: 4px; } .pwa-plat ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
html.uv-standalone .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
.ht-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ht-alert .inline { margin: 0; margin-left: auto; }

.tr-topbar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: linear-gradient(90deg, #1d7a3a, #2e9e5b); color: #fff; font-size: 13px; }
.tr-topbar b { font-weight: 700; } .tr-top-btn { background: #fff !important; color: #1d7a3a !important; border-color: #fff !important; font-weight: 700; }

.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sv-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.sv-item small { display: block; font-size: 11.5px; color: var(--ink-soft); } .sv-item b { font-size: 16px; } .sv-item em { display: block; font-style: normal; font-size: 12px; color: var(--warn-ink); margin-top: 4px; }
.sv-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: 0 0 10px; background: #2e9e5b; } .sv-item.warn .sv-dot { background: #c78b2d; } .sv-item.bad .sv-dot { background: #b93434; }
.sv-item.bad { border-color: color-mix(in srgb, #b93434 45%, var(--line)); }

/* price list (panel) and seats (installations) */
.pk-list { display: grid; gap: 8px; } .pk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); } .pk-row.off { opacity: .6; }
.pk-row-main { flex: 1; } .pk-row-main small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }  .pk-row-actions .inline { margin: 0; }
.pk-form .grid-3 { gap: 10px; } .pk-form textarea { font-family: inherit; }
tr.lead-new td { background: color-mix(in srgb, var(--signal) 6%, var(--card)); }
.pk-seats { border: 1px solid color-mix(in srgb, #2e9e5b 45%, var(--line)); background: color-mix(in srgb, #2e9e5b 8%, var(--card)); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.pk-seats-head b { display: block; } .pk-seats-head small { color: var(--ink-soft); font-size: 12.5px; }
.pk-seats-form { display: flex; gap: 8px; margin-top: 8px; } .pk-seats-form input { flex: 1; margin: 0 !important; }

/* licenza e rinnovo automatico (account) */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.lic-grid > div { padding: 10px 12px; border-radius: 12px; background: var(--paper); } .lic-grid small { display: block; font-size: 11.5px; color: var(--ink-soft); } .lic-grid b { display: block; font-size: 16px; margin: 2px 0; } .lic-on { color: #1d7a3a; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* provider backup */
.bk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bk-kpis > div { padding: 10px 12px; border-radius: 12px; background: var(--paper); } .bk-kpis small { display: block; font-size: 11.5px; color: var(--ink-soft); } .bk-kpis b { display: block; font-size: 15px; margin: 2px 0; } .bk-kpis em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.bk-progress { margin-top: 12px; } .bk-bar { height: 8px; border-radius: 4px; background: var(--paper); overflow: hidden; } .bk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1d5fa8, #3a8dff); transition: width .3s ease; } .bk-progress p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.bk-tree { display: grid; grid-template-columns: 160px 120px minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.bk-col { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--card); min-height: 180px; } .bk-col > b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 6px; }
.bk-col ul { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; } .bk-col li { margin: 2px 0; } .bk-col a { display: block; padding: 5px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13px; } .bk-col a:hover { background: var(--paper); } .bk-col a.on { background: color-mix(in srgb, var(--signal) 12%, var(--card)); font-weight: 600; }
.bk-man-head { font-size: 13px; margin-bottom: 8px; } .bk-man-tools { font-size: 12.5px; margin-bottom: 6px; } .bk-man-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow: auto; } .bk-man-list li { font-size: 13px; } .bk-man-list .check-label { margin: 0; }
.bk-restore { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); } .bk-restore-list { margin: 8px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pn-backup-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(199,139,45,.2); color: #ffe2a8; font-size: 13px; } .pn-backup-warn a { color: #fff; }
.pn-sales-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(196,64,64,.28); color: #ffc9c9; font-size: 13px; } .pn-sales-warn a { color: #fff; }
.pn-sales-info { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); color: #cfd6df; font-size: 13px; } .pn-sales-info a { color: #fff; }
@media (max-width: 860px) { .bk-tree { grid-template-columns: 1fr; } }

/* the passphrase print sheet: visible only in print, and alone on the paper. The page script moves it
 * under <body> before window.print() (it lives inside <main> on screen): every other direct child of
 * <body> is hidden, the sheet is static and unbreakable, the seat's sidebar padding is dropped. */
.bk-print-sheet { display: none; }
@media print {
    body.bk-printing > *:not(.bk-print-sheet) { display: none !important; }
    body.bk-printing, html[data-hq] body.bk-printing.pn-page { padding: 0 !important; margin: 0 !important; background: #fff !important; min-height: 0 !important; }
    body.bk-printing .bk-print-sheet { display: block; position: static; font-family: Georgia, serif; padding: 30px; color: #000; break-inside: avoid; page-break-inside: avoid; break-before: avoid; page-break-before: avoid; }
    .bk-print-sheet h1 { font-size: 20px; margin: 0 0 12px; } .bk-print-sheet p { font-size: 13px; line-height: 1.5; }
    .bk-print-pass { font-family: 'Courier New', monospace; font-size: 42px; line-height: 1.35; font-weight: bold; letter-spacing: .08em; word-break: normal; overflow-wrap: anywhere; text-align: center; border: 3px dashed #000; padding: 26px 18px; margin: 22px 0; }   /* wraps at the hyphens between words, never mid-word unless a single word is wider than the paper: a sheet meant to be copied by hand */
    .bk-print-date { font-size: 12px; color: #444; } .bk-print-sheet ol { font-size: 13px; line-height: 1.6; }
}

/* Google: tre passi */
.gg-steps { display: grid; gap: 14px; }
.gg-step > h2 i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); font-style: normal; font-size: 13px; margin-right: 6px; border: 1px solid var(--line); }
.gg-step.cur > h2 i { background: var(--signal); color: #fff; border-color: var(--signal); } .gg-step.done > h2 i { background: #2e9e5b; color: #fff; border-color: #2e9e5b; }
.gg-step.done { border-color: color-mix(in srgb, #2e9e5b 40%, var(--line)); }
.gg-howto { font-size: 13px; padding-left: 20px; display: grid; gap: 4px; margin: 0 0 12px; } .gg-howto code { font-size: 12px; }
.bk-soon-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }

/* global interactivity */
th.uv-sortable { cursor: pointer; user-select: none; } th.uv-sortable:hover { color: var(--signal-ink); } th.sort-asc::after { content: ' ▲'; font-size: 9px; } th.sort-desc::after { content: ' ▼'; font-size: 9px; }
@media screen and (prefers-reduced-motion: no-preference) { html.js .panel:not(.uv-in), html.js .pn-card:not(.uv-in), html.js .kpi:not(.uv-in), html.js .stat:not(.uv-in), html.js .sv-item:not(.uv-in), html.js .bk-kpis > div:not(.uv-in), html.js .lic-grid > div:not(.uv-in) { opacity: 0; transform: translateY(6px); } html.js .panel, html.js .pn-card, html.js .kpi, html.js .stat, html.js .sv-item, html.js .bk-kpis > div, html.js .lic-grid > div { transition: opacity .35s ease, transform .35s ease; } }

/* alignments: alerts with a button inside, badges in titles, inline forms in button rows */
.alert:has(> form), .alert:has(> a.btn), .alert:has(> .btn) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert > form, .alert > form.inline { margin: 0 0 0 auto; display: inline-flex; align-items: center; }
.alert > a.btn, .alert > .btn { margin-left: auto; }
h2 .badge, h3 .badge, h1 .badge { vertical-align: middle; position: relative; top: -1px; }
.btn-row form, .btn-row form.inline { margin: 0; display: inline-flex; align-items: center; }
.ht-alert { display: flex !important; }
.pu-email { margin: 6px 0; font-size: 12.5px; } .pu-email summary { cursor: pointer; color: var(--ink-soft); } .pu-email-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .pu-email-form input { flex: 1; min-width: 180px; margin: 0 !important; }

.acc-email-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--paper); margin-bottom: 8px; } .acc-email-row > div { flex: 1; } .acc-email-row small { display: block; font-size: 11.5px; color: var(--ink-soft); } .acc-email-row b { font-size: 15px; }
.acc-email-change { display: none; } .acc-email-change.open { display: block; animation: uv-rise .25s ease-out; }
.acc-email-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 8px; }
.acc-estep { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--paper); color: var(--ink-soft); } .acc-estep i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11px; background: var(--card); border: 1px solid var(--line); flex: 0 0 22px; }
.acc-estep.cur { color: var(--ink); background: color-mix(in srgb, var(--signal) 8%, var(--card)); } .acc-estep.cur i { background: var(--signal); color: #fff; border-color: var(--signal); } .acc-estep.done { color: #1d7a3a; } .acc-estep.done i { background: #2e9e5b; color: #fff; border-color: #2e9e5b; }
@media (max-width: 720px) { .acc-email-steps { grid-template-columns: 1fr; } }

/* brand */
.brand-svg { height: 26px; width: auto; vertical-align: middle; } .brand-svg.sm { height: 24px; } .brand-svg.lg { height: 56px; } .brand-svg.xl { height: 80px; }
.brand-logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; vertical-align: middle; } .brand-logo.sm { height: 26px; } .brand-logo.lg { height: 60px; max-width: 320px; } .brand-logo.xl { height: 90px; max-width: 420px; }
.br-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .br-grid { grid-template-columns: 1fr; } }
.br-preview { padding: 14px; border-radius: 12px; background: var(--paper); display: flex; align-items: center; gap: 10px; margin: 8px 0; min-height: 70px; }

.brand-wrap { display: inline-grid; place-items: center; position: relative; } .lg-logo.brand-wrap { width: auto; height: auto; background: transparent; box-shadow: none; padding: 6px; }
.pn-brand .brand-svg, .topbar .brand-svg, .ld-brand .brand-svg { height: 26px; }
.ld2-tk-logo { background: transparent !important; width: auto !important; }

/* receipt designer */
.rd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; } @media (max-width: 1000px) { .rd-layout { grid-template-columns: 1fr; } }
.rd-form .grid-3 { align-items: end; } .rd-switches { display: grid; gap: 6px; }
.rd-preview-wrap { position: sticky; top: 76px; }
.rd-sheet { --rd-accent: #1d5fa8; background: #fff; color: #10202b; border-radius: 6px; box-shadow: 0 20px 50px rgba(16,32,43,.18), 0 1px 3px rgba(0,0,0,.1); padding: 22px 24px; font-size: 11px; line-height: 1.4; opacity: 0; transform: translateY(12px) rotate(-.6deg); transition: opacity .5s ease, transform .5s ease; }
.rd-sheet.in { opacity: 1; transform: none; }
.rd-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .rd-logo img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.rd-seller b { display: block; font-size: 14px; } .rd-seller small { display: block; color: #51636f; font-size: 10px; }
.rd-band { background: var(--rd-accent); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 3px; font-size: 12px; margin: 6px 0 8px; transition: background .3s ease; } .rd-band span { font-size: 10px; opacity: .9; }
.rd-intro { margin: 0 0 8px; } .rd-nonfiscal { border: 1.5px dashed #b93434; color: #b93434; padding: 6px 8px; font-size: 9.5px; margin-bottom: 10px; }
.rd-buyer b, .rd-buyer span { display: block; } .rd-buyer b { font-size: 10px; margin-bottom: 2px; } .rd-buyer { margin-bottom: 10px; }
.rd-table { width: 100%; border-collapse: collapse; font-size: 10.5px; } .rd-table th { text-align: left; background: #eef3f8; padding: 4px 6px; font-size: 9.5px; } .rd-table td { padding: 6px; border-bottom: 1px solid #eef3f8; }
.rd-total { display: flex; justify-content: space-between; background: var(--rd-accent); color: #fff; padding: 6px 8px; margin: 8px 0 0 auto; width: 55%; border-radius: 3px; font-size: 11px; transition: background .3s ease; }
.rd-meta { display: block; color: #51636f; font-size: 9.5px; margin: 8px 0; } .rd-footer { margin: 10px 0 0; color: #51636f; font-size: 9.5px; }
.rd-flash { animation: rd-flash .6s ease; } @keyframes rd-flash { 0% { background-color: rgba(58,141,255,.35); } 100% { background-color: transparent; } }
.rd-band.rd-flash, .rd-total.rd-flash { animation: rd-pulse .5s ease; } @keyframes rd-pulse { 0% { transform: scale(1.02); } 100% { transform: none; } }
.sp-preset select { margin-bottom: 4px; } .sp-note { display: block; color: var(--ink-soft); font-size: 12px; min-height: 1.2em; } .sp-filled { box-shadow: 0 0 0 3px rgba(58,141,255,.35) !important; transition: box-shadow .8s ease; }
.sp-guide { margin: 6px 0 12px; padding: 10px 12px 10px 30px; border-radius: 12px; background: var(--paper); font-size: 12.5px; display: grid; gap: 5px; border-left: 3px solid var(--signal); animation: uv-rise .25s ease-out; }

/* QR of the reception link */
.rc-link-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.rc-qr { width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 6px 20px rgba(16,32,43,.12); opacity: 0; transform: scale(.92); transition: opacity .4s ease, transform .4s ease; flex: 0 0 auto; }
.rc-qr.in { opacity: 1; transform: none; } .rc-qr svg { width: 100%; height: 100%; display: block; }
.rc-link-text { flex: 1; min-width: 220px; } .rc-link-text code { display: block; word-break: break-all; } .rc-link-text small { display: block; margin-top: 4px; color: var(--ink-soft); }
.pi-restart { margin: 0 0 12px; font-size: 13px; } .pi-restart form { margin-top: 6px; }

/* newsletter (panel) */
.nl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 20px; align-items: start; } @media (max-width: 1200px) { .nl-layout { grid-template-columns: 1fr; } }
.nl-form { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.nl-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; } .nl-toolbar button { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; cursor: pointer; color: var(--ink); } .nl-toolbar button:hover { background: var(--card); border-color: var(--signal); } .nl-vars { margin-left: auto; font-size: 12px; color: var(--ink-soft); } .nl-vars code { font-size: 11.5px; cursor: pointer; }
#nl-body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; }
.nl-segments { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.nl-seg { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; } .nl-seg:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--card)); }
.nl-seg span { flex: 1; } .nl-seg b { display: block; font-size: 13.5px; } .nl-seg small { color: var(--ink-soft); font-size: 11.5px; } .nl-seg em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--signal-ink); min-width: 24px; text-align: right; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.nl-actions > .btn { white-space: nowrap; } .nl-actions > .primary { margin-left: auto; } .nl-actions > .nl-schedule { flex-basis: 100%; }
.nl-schedule { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .nl-schedule input { margin: 0 !important; width: auto; min-width: 220px; height: 40px; }
.nl-preview-wrap { position: sticky; top: 76px; } .nl-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .nl-devices button { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 4px 8px; cursor: pointer; } .nl-devices button.on { border-color: var(--signal); background: var(--card); }
.nl-preview-frame { background: #e9eef4; border-radius: 14px; padding: 14px; display: flex; justify-content: center; overflow: auto; } #nl-preview { border: 0; height: 720px; max-width: 100%; background: #fff; border-radius: 10px; transition: width .3s ease; box-shadow: 0 10px 30px rgba(16,32,43,.15); }
 .nl-add input { margin: 0 !important; }
/* storefront mode (Sales) */
.lm-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; background: var(--paper); } .lm-box.soon { border-color: #e0a800; background: color-mix(in srgb, #e0a800 8%, var(--card)); }
.lm-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; } .lm-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .lm-row label { margin: 0; }
.lm-reward { border-top: 1px dashed var(--line); padding-top: 10px; margin: 10px 0; } .lm-reward-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .lm-reward-row input, .lm-reward-row select { margin: 0 !important; }
.cp-launch { border: 1px solid #e0a800; background: color-mix(in srgb, #ffd166 12%, var(--card)); border-radius: 14px; padding: 14px; margin-bottom: 16px; } .cp-launch-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .cp-launch-head .btn { margin-left: auto; }

/* price list: the preview stage */
.pk-stage { background: linear-gradient(160deg, #0f2a4a, #1d5fa8); border-radius: 18px; padding: 18px; margin-bottom: 16px; color: #fff; }
.pk-stage-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; } .pk-stage-head small { opacity: .8; font-size: 12px; }
.pk-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); gap: 14px; justify-content: center; } .pk-preview .ld-price-card { position: relative; margin: 0; max-width: none; padding: 16px; background: #fff; color: #10202b; transition: transform .3s ease, box-shadow .3s ease; animation: uv-rise .4s ease-out; }
.pk-preview .pk-live { outline: 3px solid #3be09a; outline-offset: 3px; transform: translateY(-4px); } .pk-preview .pk-live.pulse { animation: pk-pulse .5s ease; } @keyframes pk-pulse { 0% { transform: translateY(-4px) scale(1); } 50% { transform: translateY(-6px) scale(1.02); } 100% { transform: translateY(-4px) scale(1); } }
.pk-live-tag { position: absolute; top: -12px; left: 12px; background: #3be09a; color: #0f2a4a; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; } .pk-off { opacity: .45; filter: grayscale(.6); } .pk-off-tag { position: absolute; top: 10px; right: 10px; font-size: 11px; background: #b93434; color: #fff; padding: 2px 8px; border-radius: 999px; }
.pk-preview .btn { pointer-events: none; }
.pk-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 8px; } @media (max-width: 1000px) { .pk-editor { grid-template-columns: 1fr; } }
.pk-editor-side { position: sticky; top: 76px; } .pk-row.editing { border-color: #3be09a; box-shadow: 0 0 0 3px rgba(59,224,154,.25); }
.nl-gate { display: flex; gap: 12px; align-items: center; border: 1px solid #b93434; background: color-mix(in srgb, #b93434 8%, var(--card)); border-radius: 12px; padding: 10px 14px; margin-top: 14px; } .nl-gate.ok { border-color: #2e9e5b; background: color-mix(in srgb, #2e9e5b 8%, var(--card)); } .nl-gate-ico { font-size: 22px; } .nl-gate b { display: block; font-size: 13.5px; } .nl-gate small { color: var(--ink-soft); font-size: 12px; } .nl-gate.shake { animation: nl-shake .4s ease; } @keyframes nl-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.btn.accent { border-color: var(--signal); color: var(--signal-ink); font-weight: 700; }

.lic-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 14px; } .lic-summary > div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .lic-summary small { display: block; color: var(--ink-soft); font-size: 11px; } .lic-summary b { font-size: 13.5px; word-break: break-word; }
.lic-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 720px) { .lic-paths { grid-template-columns: 1fr; } }
.lic-path { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .lic-path > span { font-size: 24px; } .lic-path b { display: block; font-size: 13.5px; } .lic-path small { display: block; color: var(--ink-soft); font-size: 12px; margin: 2px 0 8px; }
.ec-note { display: block; font-size: 12px; margin-top: 4px; min-height: 0; } .ec-note.bad { color: #b93434; } .ec-note.warn { color: #b7791f; } .ec-fix { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 1px 8px; font-size: 12px; cursor: pointer; } input.ec-bad { border-color: #b93434 !important; } input.ec-warn { border-color: #e0a800 !important; }
.lm-preview { border-top: 1px dashed var(--line); padding-top: 10px; margin: 10px 0; } .lm-preview code { display: block; word-break: break-all; margin: 4px 0 8px; font-size: 12px; }

/* =====================================================================
   Provider panel: unified layout system (goal: consistent alignments in every section)
   ===================================================================== */
.pn-page .pn-main { max-width: 1180px; padding: 18px 20px 60px; }
.pn-page .pn-hero { margin-bottom: 20px; }
.pn-page .tabs.settings-tabs { margin: 0 0 18px; gap: 6px; flex-wrap: wrap; } .pn-page .tabs.settings-tabs .tab { padding: 8px 14px; border-radius: 10px; }
.pn-page .tabs.settings-tabs + .tabs.settings-tabs { margin-top: -8px; }
/* sections */
.pn-page .panel { padding: 18px 22px 20px; border-radius: 16px; margin-bottom: 18px; }
.pn-page .panel > h2 { margin: 0 0 6px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.pn-page .panel > h2 + p.muted, .pn-page .panel > h2 + .muted { margin: 0 0 14px; font-size: 13px; line-height: 1.5; }
.pn-page .panel > h2 + form, .pn-page .panel > h2 + .table-wrap, .pn-page .panel > h2 + .bk-kpis, .pn-page .panel > h2 + .sv-grid { margin-top: 10px; }
.pn-page .hm-sub { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.pn-page .hm-sub .badge { text-transform: none; letter-spacing: 0; }
/* section grids */
.pn-page .ps-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 18px; } @media (max-width: 960px) { .pn-page .ps-grid { grid-template-columns: 1fr; } }
.pn-page .ps-grid > .panel { margin-bottom: 0; height: 100%; }
/* forms */
.pn-page label { margin-bottom: 12px; } .pn-page label small { display: block; margin-top: 4px; color: var(--ink-soft); font-weight: normal; font-size: 12px; line-height: 1.4; }
.pn-page .grid-2, .pn-page .grid-3 { gap: 0 16px; } @media (max-width: 720px) { .pn-page .grid-2, .pn-page .grid-3 { grid-template-columns: 1fr; } }
.pn-page .btn-row { gap: 8px; margin-top: 12px; align-items: center; }
.pn-page form > .btn-row:last-child, .pn-page form > .btn:last-child { margin-top: 10px; }
.pn-page .check-label { margin: 6px 0 10px; }
/* finestre a scomparsa (details) */
.pn-page details.advanced { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pn-page details.advanced > summary { padding: 10px 14px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.pn-page details.advanced > summary::-webkit-details-marker { display: none; } .pn-page details.advanced > summary::before { content: '▸'; color: var(--ink-soft); transition: transform .2s; } .pn-page details.advanced[open] > summary::before { transform: rotate(90deg); }
.pn-page details.advanced[open] > summary { border-bottom: 1px solid var(--line); }
.pn-page details.advanced > :not(summary) { margin-left: 14px; margin-right: 14px; } .pn-page details.advanced > form, .pn-page details.advanced > div, .pn-page details.advanced > p, .pn-page details.advanced > ul { margin-top: 12px; margin-bottom: 14px; }
/* alerts and info boxes */
.pn-page .alert { margin: 0 0 14px; } .pn-page .panel .alert { margin: 10px 0; }
.pn-page .bk-kpis, .pn-page .sv-grid { margin: 10px 0 14px; }
.pn-page .table-wrap { margin-top: 10px; }
/* panels with storefront/preview: same height of the columns */
.pn-page .rd-layout, .pn-page .nl-layout, .pn-page .pk-editor { align-items: start; }
/* provider bar: items aligned and of the same height */
.pn-page .pn-top .pn-links a { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
/* legal-terms bar: a contract deadline must be SEEN — the brand signal blue,
 * derived from var(--signal) so it follows the theme by itself, with a touch
 * more presence than the trial bar and a periodic sheen that draws the eye
 * without nagging. Distinct from trial green and assist purple. */
.tr-topbar.lg-topbar { background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 78%, #0a1a2e), var(--signal)); font-size: 13.5px; padding: 10px 16px; position: relative; overflow: hidden; box-shadow: 0 2px 14px color-mix(in srgb, var(--signal) 45%, transparent); }
.tr-topbar.lg-topbar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); transform: translateX(-100%); animation: lg-sheen 6s ease-in-out infinite; }
@keyframes lg-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.tr-topbar.lg-topbar .tr-top-btn { background: #fff !important; color: color-mix(in srgb, var(--signal) 85%, #000) !important; border-color: #fff !important; }
/* the licence document past its exp (contract 7.4): read-only mode, amber like every warning of the family */
.tr-topbar.lc-topbar { background: linear-gradient(90deg, #9a6400, #d99114); font-size: 13.5px; padding: 10px 16px; box-shadow: 0 2px 14px rgba(217, 145, 20, .45); }
.tr-topbar.lc-topbar .tr-top-btn { background: #fff !important; color: #9a6400 !important; border-color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .tr-topbar.lg-topbar::after { animation: none; } }
/* live editor of the legal documents */
.le-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: 16px; align-items: start; margin-top: 14px; }
.le-list { display: grid; gap: 12px; }
.le-card { padding: 14px 16px; transition: box-shadow .2s, transform .2s; }
.le-card.typing { box-shadow: 0 0 0 2px var(--signal); }
.le-card.flash { animation: le-saved 1s ease; }
@keyframes le-saved { 0% { box-shadow: 0 0 0 3px rgba(46,158,91,.55); } 100% { box-shadow: none; } }
.le-card-top { display: flex; align-items: center; gap: 10px; }
.le-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.le-h { font-weight: 700; } .le-card .le-h, .le-card .le-p { margin-top: 0; }
.le-card .le-p { margin-top: 8px; resize: vertical; min-height: 90px; line-height: 1.5; }
.le-h.edited, .le-p.edited { border-color: #c78b2d; background: color-mix(in srgb, #c78b2d 6%, var(--card)); }
.le-h.le-err, .le-p.le-err { border-color: #c0392b; }
.le-state { color: #2e9e5b; font-weight: 800; animation: sn-pop2 .4s ease; } @keyframes sn-pop2 { 50% { transform: scale(1.4); } }
.le-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.le-preview { position: sticky; top: 70px; }
.le-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.le-preview iframe { width: 100%; height: calc(100vh - 170px); min-height: 480px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
@media (max-width: 1000px) { .le-layout { grid-template-columns: 1fr; } .le-preview { position: static; } .le-preview iframe { height: 60vh; } }
/* legal editor — AI translation dialog (370): results editable, applied only on request */
.le-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.le-frozen { margin-top: 12px; }
.le-card-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.le-tr-back { position: fixed; inset: 0; z-index: 120; background: rgba(11,26,48,.5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
.le-tr-back[hidden] { display: none; }
.le-tr-card { width: min(880px, 100%); max-height: 90vh; display: flex; flex-direction: column; gap: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 18px 20px; }
.le-tr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.le-tr-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; line-height: 1.45; }
.le-tr-prog { font-size: 13px; }
.le-tr-list { overflow: auto; display: grid; gap: 12px; padding-right: 4px; min-height: 60px; }
.le-tr-block { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.le-tr-block.bad { border-color: #c0392b; }
.le-tr-block.done { border-color: #2e9e5b; }
.le-tr-src { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.le-tr-block .le-tr-h { font-weight: 700; margin: 0; } .le-tr-block .le-tr-p { margin: 0; resize: vertical; min-height: 96px; line-height: 1.5; }
.le-tr-warn { color: #c0392b; font-weight: 600; }
.le-tr-bar { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
body.le-tr-open { overflow: hidden; }
/* wizard: the preview ticket is the real one, contained in the box */
.ob-preview .ob-real-ticket { margin: 0 auto; max-width: 100%; transition: transform .15s ease-out; background: var(--ticket-bg, #fff); }
/* support mode banner: always visible, unmistakable */
.imp-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 14px; background: #7a3ce8; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.imp-bar .btn { background: #fff; color: #7a3ce8; border-color: #fff; }
.acc-email-inline { display: flex; gap: 10px; align-items: flex-end; }
.acc-email-inline .btn { white-space: nowrap; margin-bottom: 2px; }
@media (max-width: 560px) { .acc-email-inline { flex-direction: column; align-items: stretch; } }
/* "Your data is safe": animated shield and trust cards */
.bk-safe-hero { display: flex; gap: 26px; align-items: center; margin-bottom: 18px; }
.bk-safe-copy h2 { margin: 0 0 6px; }
.bk-safe-badge { display: inline-block; background: color-mix(in srgb, #2e9e5b 14%, transparent); color: #1d7a3a; border: 1px solid color-mix(in srgb, #2e9e5b 40%, transparent); padding: 3px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; margin: 0 0 8px; }
.bk-shield { position: relative; flex: 0 0 150px; height: 150px; display: grid; place-items: center; }
.bk-shield-core { font-size: 54px; filter: drop-shadow(0 6px 14px rgba(58,141,255,.35)); animation: bk-breathe 3.2s ease-in-out infinite; }
@keyframes bk-breathe { 50% { transform: scale(1.07); } }
.bk-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--signal) 45%, transparent); opacity: 0; animation: bk-ring 3.4s ease-out infinite; }
.bk-ring.r2 { animation-delay: 1.1s; } .bk-ring.r3 { animation-delay: 2.2s; }
@keyframes bk-ring { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.15); opacity: 0; } }
.bk-orb { position: absolute; font-size: 19px; animation: bk-orbit 9s linear infinite; transform-origin: 75px 75px; left: calc(50% - 10px); top: calc(50% - 10px); }
.bk-orb.o2 { animation-delay: -3s; } .bk-orb.o3 { animation-delay: -6s; }
@keyframes bk-orbit { from { transform: rotate(0deg) translateX(66px) rotate(0deg); } to { transform: rotate(360deg) translateX(66px) rotate(-360deg); } }
.bk-safe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.bk-safe-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; display: grid; gap: 6px; background: color-mix(in srgb, var(--signal) 3%, var(--card, #fff)); transition: transform .18s, box-shadow .18s, border-color .18s; }
.bk-safe-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,40,70,.10); border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
.bk-safe-card > span { font-size: 22px; line-height: 1; }
.bk-safe-card b { font-size: 13.5px; }
.bk-safe-card small { color: var(--muted, #6b7c8d); font-size: 12.5px; line-height: 1.45; }
.bk-pulse { width: 12px; height: 12px; border-radius: 50%; background: #2e9e5b; position: relative; margin: 5px 0; }
.bk-pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #2e9e5b; animation: bk-ring 1.8s ease-out infinite; }
@media (max-width: 620px) { .bk-safe-hero { flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .bk-shield-core, .bk-ring, .bk-orb, .bk-pulse::after { animation: none; } }
/* controller connected: positive scene + invitation to more licences */
.lic2 { display: grid; gap: 14px; }
.lic2-hero { display: flex; gap: 16px; align-items: center; border: 1px solid color-mix(in srgb, #2e9e5b 35%, var(--line)); background: color-mix(in srgb, #2e9e5b 6%, var(--card, #fff)); border-radius: 14px; padding: 14px 16px; }
.lic2-title { color: #1d7a3a; font-size: 15px; }
.lic2-lock { margin-left: auto; font-size: 20px; opacity: .75; }
.lic2-viz { display: flex; align-items: center; gap: 6px; font-size: 26px; flex: 0 0 auto; }
.lic2-flow { display: inline-flex; gap: 4px; }
.lic2-flow b { width: 6px; height: 6px; border-radius: 50%; background: #2e9e5b; animation: lic2-dot 1.4s ease-in-out infinite; }
.lic2-flow b:nth-child(2) { animation-delay: .2s; } .lic2-flow b:nth-child(3) { animation-delay: .4s; }
@keyframes lic2-dot { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
.lic2-upsell { display: flex; gap: 18px; align-items: center; border-radius: 16px; padding: 18px 20px; color: #fff; background: linear-gradient(120deg, #123c6e, #1c5fae 55%, #3a8dff); box-shadow: 0 12px 28px rgba(18,60,110,.28); }
.lic2-upsell-copy b { font-size: 16px; }
.lic2-upsell-copy p { margin: 6px 0 8px; opacity: .92; font-size: 13.5px; }
.lic2-perks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; font-size: 13px; opacity: .95; }
.lic2-upsell .btn { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.12); }
.lic2-upsell .btn.primary.lic2-cta { background: #fff; color: #14477f; border-color: #fff; font-weight: 800; position: relative; }
.lic2-cta { animation: lic2-glow 2.6s ease-out infinite; }
@keyframes lic2-glow { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.lic2-upsell-art { margin-left: auto; display: grid; gap: 6px; font-size: 30px; flex: 0 0 auto; }
.lic2-upsell-art span { animation: uv-rise .4s ease-out both; }
.lic2-upsell-art span:nth-child(2) { animation-delay: .12s; } .lic2-upsell-art span:nth-child(3) { animation-delay: .24s; }
@media (max-width: 640px) { .lic2-upsell { flex-direction: column; align-items: flex-start; } .lic2-upsell-art { display: none; } }
@media (prefers-reduced-motion: reduce) { .lic2-flow b, .lic2-cta { animation: none; } }
/* reception mode: the tablet plays the real scene (tap → code → wait) */
.rc2-hero { display: flex; gap: 26px; align-items: center; margin-bottom: 16px; }
.rc2-copy h2 { margin: 0 0 4px; }
.rc2-live { display: inline-block; color: #1d7a3a; font-size: 12.5px; font-weight: 700; margin: 0 0 6px; animation: rc2-blink 2.2s ease-in-out infinite; }
@keyframes rc2-blink { 50% { opacity: .45; } }
.rc2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rc2-chips span { border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: 12px; background: color-mix(in srgb, var(--signal) 4%, var(--card, #fff)); }
.rc2-tabwrap { position: relative; flex: 0 0 230px; }
.rc2-glow { position: absolute; inset: -18px -24px; border-radius: 40px; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--signal) 30%, transparent), transparent 70%); filter: blur(4px); animation: rc2-glow 8s ease-in-out infinite; }
@keyframes rc2-glow { 30%, 78% { opacity: 1; } 0%, 22%, 92%, 100% { opacity: .35; } }
.rc2-tab { position: relative; border: 3px solid #223; border-radius: 20px; padding: 11px 9px; background: #101726; box-shadow: 0 16px 34px rgba(10,20,40,.32); animation: rc2-float 6s ease-in-out infinite; }
@keyframes rc2-float { 50% { transform: translateY(-7px) rotate(-.7deg); } }
.rc2-screen { position: relative; border-radius: 12px; background: linear-gradient(160deg, #17233c, #0f1a2e); padding: 12px 10px 14px; overflow: hidden; display: grid; gap: 10px; }
.rc2-screen::after { content: ''; position: absolute; top: 0; bottom: 0; width: 46px; background: linear-gradient(105deg, transparent, rgba(255,255,255,.07), transparent); left: -60px; animation: rc2-sheen 8s ease-in-out infinite; }
@keyframes rc2-sheen { 26%, 100% { left: 120%; } 0%, 24% { left: -60px; } }
.rc2-top { display: flex; align-items: center; justify-content: space-between; }
.rc2-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--signal); opacity: .9; }
.rc2-net { color: #9fb4d4; font-size: 11px; }
/* fixed-slot stage: button and code alternate in the SAME space, never overlapping anything else */
.rc2-stage { position: relative; height: 66px; }
.rc2-btn { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; color: #fff; background: var(--signal); border-radius: 99px; padding: 9px 20px; font-size: 13px; box-shadow: 0 6px 14px rgba(58,141,255,.35); animation: rc2-btn 8s ease-in-out infinite; }
@keyframes rc2-btn { 0%, 16% { opacity: 1; transform: scale(1); } 19% { transform: scale(.9); } 22% { opacity: 1; transform: scale(1.04); } 26%, 86% { opacity: 0; transform: scale(.8); } 92%, 100% { opacity: 1; transform: scale(1); } }
.rc2-tap { position: absolute; right: 16%; bottom: -4px; font-size: 26px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); opacity: 0; animation: rc2-tap 8s ease-in-out infinite; }
@keyframes rc2-tap { 0%, 6% { opacity: 0; transform: translate(16px, 18px); } 12% { opacity: 1; transform: translate(0, 4px); } 19% { transform: translate(-2px, 0) scale(.9); } 24% { opacity: 0; transform: translate(-6px, 10px); } 100% { opacity: 0; } }
.rc2-codebox { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; text-align: center; opacity: 0; animation: rc2-code 8s ease-in-out infinite; }
.rc2-codebox em { display: block; font-style: normal; font-weight: 800; letter-spacing: 2.5px; color: #fff; background: rgba(58,141,255,.22); border: 1.5px dashed rgba(139,180,255,.65); border-radius: 12px; padding: 11px 16px; font-size: 17px; }
@keyframes rc2-code { 0%, 26% { opacity: 0; transform: translateY(10px) scale(.82); } 31% { opacity: 1; transform: translateY(-2px) scale(1.06); } 34%, 84% { opacity: 1; transform: translateY(0) scale(1); } 90%, 100% { opacity: 0; transform: translateY(6px) scale(.94); } }
.rc2-spark { position: absolute; color: #8bd0ff; font-style: normal; font-size: 13px; opacity: 0; animation: rc2-spark 8s ease-out infinite; }
.rc2-spark.s1 { left: -14px; top: -8px; } .rc2-spark.s2 { right: -14px; top: 4px; animation-delay: .12s; } .rc2-spark.s3 { left: 8px; bottom: -14px; animation-delay: .22s; }
@keyframes rc2-spark { 0%, 28% { opacity: 0; transform: scale(.4) rotate(0deg); } 33% { opacity: 1; transform: scale(1.25) rotate(30deg); } 44%, 100% { opacity: 0; transform: scale(.6) rotate(60deg); } }
/* time bar: fills on tap and drains while the code is on screen (like the real hiding) */
.rc2-bar { display: block; height: 4px; border-radius: 4px; background: rgba(139,180,255,.18); overflow: hidden; }
.rc2-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3a8dff, #7fd0ff); transform-origin: left; animation: rc2-bar 8s linear infinite; }
@keyframes rc2-bar { 0%, 28% { transform: scaleX(0); } 31% { transform: scaleX(1); } 86% { transform: scaleX(0); } 100% { transform: scaleX(0); } }
.rc2-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #b9c6d4; right: -2px; top: -2px; }
.rc2-dot.on { background: #2e9e5b; } .rc2-dot.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #2e9e5b; animation: bk-ring 1.8s ease-out infinite; }
.rc-device-ico { position: relative; }
.rc2-device { transition: transform .16s, box-shadow .16s; }
.rc2-device:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,70,.10); }
@media (max-width: 600px) { .rc2-hero { flex-direction: column; } .rc2-tabwrap { flex-basis: auto; width: 210px; } }
@media (prefers-reduced-motion: reduce) { .rc2-tab, .rc2-btn, .rc2-tap, .rc2-codebox, .rc2-spark, .rc2-bar i, .rc2-glow, .rc2-screen::after, .rc2-live, .rc2-dot.on::after { animation: none; } .rc2-codebox { opacity: 1; } .rc2-btn, .rc2-tap { opacity: 0; } .rc2-bar i { transform: scaleX(.6); } }
/* "How to set it up": four steps as linked cards + folded curiosities */
.rc3-how { margin: 6px 0 16px; }
.rc3-how-title { margin: 0 0 10px; font-size: 15px; }
.rc3-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; counter-reset: rc3; }
.rc3-step { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px 13px; display: grid; gap: 6px; background: color-mix(in srgb, var(--signal) 3%, var(--card, #fff)); transition: transform .16s, box-shadow .16s, border-color .16s; }
.rc3-step:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,40,70,.10); border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
.rc3-step i { position: absolute; top: -11px; left: 13px; width: 24px; height: 24px; border-radius: 50%; background: var(--signal); color: #fff; font-style: normal; font-weight: 800; font-size: 12.5px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(58,141,255,.35); }
.rc3-ico { font-size: 24px; line-height: 1; }
.rc3-step b { font-size: 13.5px; }
.rc3-step small { color: var(--muted, #6b7c8d); font-size: 12.5px; line-height: 1.5; }
.rc3-rules { margin-top: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; }
.rc3-rules summary { cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; }
.rc3-rules summary::-webkit-details-marker { display: none; }
.rc3-rules summary::after { content: '▾'; margin-left: 8px; opacity: .6; transition: transform .2s; display: inline-block; }
.rc3-rules[open] summary::after { transform: rotate(180deg); }
.rc3-rules ul { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 16px; }
.rc3-rules li { font-size: 12.5px; color: var(--muted, #6b7c8d); line-height: 1.5; animation: uv-rise .3s ease-out both; }
/* ============================== polish 3.43: the language of the latest sections, everywhere */
.panel { border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
.panel.open:hover { border-color: color-mix(in srgb, var(--signal) 26%, var(--line)); box-shadow: 0 8px 26px rgba(20, 40, 70, .07); }
/* section titles: a shaded accent bar before the text */
.panel > h2 { display: flex; align-items: center; gap: 11px; font-size: 16.5px; letter-spacing: .1px; }
.panel > h2::before { content: ''; flex: 0 0 6px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, var(--signal), #7fd0ff); box-shadow: 0 2px 8px color-mix(in srgb, var(--signal) 35%, transparent); }
/* subtitles: an accent dot */
.hm-sub { display: flex; align-items: center; gap: 8px; }
.hm-sub::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
/* fields: a soft focus ring, consistent with the checkout */
.panel input:focus, .panel select:focus, .panel textarea:focus { outline: none; border-color: color-mix(in srgb, var(--signal) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }
/* primary buttons: they lift a little, like the cards */
.btn.primary { transition: transform .14s, box-shadow .14s, background .14s; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--signal) 35%, transparent); }
/* tables: the row under the cursor breathes */
.panel tbody tr { transition: background .12s; }
.panel tbody tr:hover { background: color-mix(in srgb, var(--signal) 5%, transparent); }
/* alerts: solid left border, read at a glance */
.alert { border-left: 4px solid transparent; }
.alert.ok { border-left-color: #2e9e5b; } .alert.err { border-left-color: #b93434; } .alert.warn { border-left-color: #c78b2d; }
/* badges: a thin tone-on-tone border */
.badge { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
/* dashed boxes (details, rules): a faintly veiled background */
.advanced, .rc3-rules { background: color-mix(in srgb, var(--signal) 2.5%, transparent); }
@media (prefers-reduced-motion: reduce) { .panel.open:hover, .btn.primary:hover { transform: none; } }
/* ============================== polish 3.43.1: the forms speak the same language */
/* fields: airier, soft corners, a veiled background and a response to hover */
.panel input[type=text], .panel input[type=password], .panel input[type=number], .panel input[type=search],
.panel input[type=email], .panel input[type=url], .panel input[type=tel], .panel input[type=date],
.panel select, .panel textarea {
    padding: 10px 13px; border-radius: 11px;
    background: color-mix(in srgb, var(--signal) 2%, var(--card));
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.panel input:hover:not(:focus):not([type=checkbox]):not([type=radio]):not([type=range]),
.panel select:hover:not(:focus), .panel textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--signal) 35%, var(--line)); }
.panel ::placeholder { color: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
/* selects: a drawn arrow, consistent on Safari and Chrome */
.panel select { -webkit-appearance: none; appearance: none; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7c8d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; }
/* labels: small, firm, with the help text tiptoeing below */
.panel form label, .panel label { font-weight: 600; font-size: 13px; }
.panel label > small { display: block; font-weight: 400; margin-top: 4px; color: var(--ink-soft); font-size: 12.3px; line-height: 1.45; }
/* checks and choices: a row that lights up, a tick that snaps */
.panel .check-label { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; transition: background .14s; cursor: pointer; }
.panel .check-label:hover { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.panel input[type=checkbox], .panel input[type=radio] { accent-color: var(--signal); width: 16px; height: 16px; }
.panel input[type=checkbox]:checked { transform: scale(1.08); }
/* file choice: a consistent little button */
.panel input[type=file]::file-selector-button { border: 1px solid var(--line); background: var(--card); color: var(--ink);
    border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; margin-right: 10px; cursor: pointer; transition: border-color .14s, transform .14s; }
.panel input[type=file]::file-selector-button:hover { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); transform: translateY(-1px); }
/* rows of buttons: uniform breathing; the secondary ones respond like the primary */
.panel .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel .btn { transition: transform .14s, box-shadow .14s, border-color .14s, background .14s; }
.panel .btn:hover:not(.primary):not(:disabled) { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); transform: translateY(-1px); }
.panel .btn:disabled { opacity: .55; }
/* invalid fields after touch: a border that warns without shouting */
.panel input:user-invalid:not(:placeholder-shown), .panel select:user-invalid { border-color: #c07070; box-shadow: 0 0 0 3px rgba(185, 52, 52, .10); }
@media (prefers-reduced-motion: reduce) { .panel .btn:hover:not(.primary), .panel input[type=file]::file-selector-button:hover { transform: none; } .panel input[type=checkbox]:checked { transform: none; } }
.st-collect { display: flex; gap: 18px; align-items: center; }
.st-collect-viz { position: relative; width: 64px; height: 64px; display: grid; place-items: center; font-size: 30px; }
/* Template page: the preview becomes a stage */
.tpl-live { font-size: 11.5px; font-weight: 700; color: #1d7a3a; animation: rc2-blink 2.2s ease-in-out infinite; vertical-align: 3px; margin-left: 6px; }
.preview-col .pv-stage { position: relative; border-radius: 18px; padding: 26px 18px; background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--signal) 6%, var(--card)), var(--card));
    border: 1px solid color-mix(in srgb, var(--signal) 18%, var(--line)); }
.preview-col .preview-ticket { animation: tpl-float 6s ease-in-out infinite; box-shadow: 0 18px 40px rgba(20, 40, 70, .18); transition: transform .18s; }
@keyframes tpl-float { 50% { transform: translateY(-6px) rotate(-.4deg); } }
.preview-col .pv-stage:hover .preview-ticket { animation-play-state: paused; }
/* zoom selector: consistent pills */
.zoom-seg { display: inline-flex; gap: 3px; background: color-mix(in srgb, var(--signal) 6%, var(--card)); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.zoom-seg button { border: 0; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 700; border-radius: 99px; padding: 5px 11px; cursor: pointer; transition: background .14s, color .14s; }
.zoom-seg button.on { background: var(--signal); color: #fff; box-shadow: 0 3px 8px color-mix(in srgb, var(--signal) 35%, transparent); }
/* A4 sheet map: a gentle frame */
.sheet-map { border: 1px dashed color-mix(in srgb, var(--signal) 30%, var(--line)); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--signal) 2.5%, transparent); }
/* ticket colours: the colour fields as tiles */
.panel input[type=color] { width: 46px; height: 34px; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--card); cursor: pointer; transition: transform .14s, box-shadow .14s; }
.panel input[type=color]:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,40,70,.14); }
@media (prefers-reduced-motion: reduce) { .preview-col .preview-ticket, .tpl-live { animation: none; } }

.btn.primary.ready { animation: ck2-ready 1.6s ease-out 2; }
/* password requirements checklist: shared between first password and Account */
.fpw-checks { list-style: none; margin: 12px 0 16px; padding: 12px 14px; display: grid; gap: 8px; background: color-mix(in srgb, var(--signal) 4%, var(--card)); border: 1px solid var(--line); border-radius: 12px; }
.fpw-checks li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); transition: color .2s; }
.fpw-checks li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink-soft) 40%, transparent); transition: all .2s; flex: 0 0 auto; display: grid; place-items: center; font-style: normal; font-size: 11px; }
.fpw-checks li.ok { color: #1d7a3a; } .fpw-checks li.ok i { background: #2e9e5b; border-color: #2e9e5b; animation: sn-pop2 .35s ease; }
.fpw-checks li.ok i::before { content: '✓'; color: #fff; font-weight: 800; }
@keyframes ck2-ready { 0% { box-shadow: 0 0 0 0 rgba(58, 141, 255, .6); } 100% { box-shadow: 0 0 0 16px rgba(58, 141, 255, 0); } }
/* sandbox band: construction-site tape on top of the whole panel */
.pn-sandbox-bar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 14px;
    color: #3a2703; font-size: 13.5px; font-weight: 800; letter-spacing: .2px; text-align: center;
    background: repeating-linear-gradient(-45deg, #ffce4d 0 22px, #f5b400 22px 44px);
    background-attachment: fixed;   /* pattern anchored to the viewport: the diagonals continue between the ribbons */
    box-shadow: 0 2px 12px rgba(120, 80, 0, .25); }
.pn-sandbox-bar .btn { background: #3a2703; color: #ffd76a; border-color: #3a2703; white-space: nowrap; }
.pn-sandbox-bar .btn:hover { background: #241800; transform: none; }
.pn-sandbox { font-size: 11px; }
@media (max-width: 640px) { .pn-sandbox-bar { flex-direction: column; gap: 8px; } }
/* Acceptances tab: explanation and counters */
.lg-how { border: 1px solid color-mix(in srgb, var(--signal) 25%, var(--line)); background: color-mix(in srgb, var(--signal) 5%, var(--card)); border-radius: 12px; padding: 12px 15px; margin: 4px 0 14px; }
.lg-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lg-stat { border-radius: 14px; padding: 12px 20px; display: grid; gap: 2px; text-align: center; border: 1px solid var(--line); min-width: 150px; }
.lg-stat b { font-size: 26px; }
.lg-stat.ok { border-color: color-mix(in srgb, #2e9e5b 40%, var(--line)); background: color-mix(in srgb, #2e9e5b 6%, var(--card)); color: #1d7a3a; }
.lg-stat.warn { border-color: color-mix(in srgb, #c78b2d 45%, var(--line)); background: color-mix(in srgb, #c78b2d 8%, var(--card)); color: #8a5b12; }
.lg-stat span { font-size: 12.5px; font-weight: 600; }
/* ============================== provider panel: the same language as the customer area */
/* top bar: glass with an accent line */
.pn-top { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--card) 88%, transparent); border-bottom: 1px solid var(--line); }
.pn-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--signal), #7fd0ff 45%, transparent 80%); opacity: .8; }
.pn-links a { border-radius: 99px; padding: 7px 14px; transition: background .14s, color .14s, transform .14s; }
.pn-links a:hover { background: color-mix(in srgb, var(--signal) 8%, transparent); transform: translateY(-1px); }
.pn-links a.active { background: var(--signal); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--signal) 40%, transparent); }
/* page heroes: motion ONLY — the colours stay the original ones (dark header, light text) */
.pe-status { transition: transform .16s, box-shadow .16s; }
.pe-status:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,70,.14); }
.pe-status .pe-dot { animation: rc2-blink 2.2s ease-in-out infinite; }
/* dashboard: motion ONLY, no backgrounds */
.pn-kpi { transition: transform .16s, box-shadow .16s; }
.pn-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,40,70,.16); }
/* installation cards: they lift, with the status on the left edge */
.pn-card { border-radius: 16px; border-left: 4px solid transparent; transition: transform .16s, box-shadow .16s, border-color .16s; }
.pn-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,40,70,.12); }
.pn-card.st-active { border-left-color: #2e9e5b; }
.pn-card.st-suspended { border-left-color: #c78b2d; }
.pn-card[data-soon="1"] { border-left-color: #c78b2d; }
.pn-card.hl-bad { border-left-color: #b93434; }
.pn-ring i { transition: transform .18s; }
.pn-card:hover .pn-ring i { transform: scale(1.12); }
/* sub-tabs (Sales, Marketing, ...): pills with the active segment raised */
.tabs { border-radius: 99px; }
.tab { border-radius: 99px; transition: background .14s, color .14s, box-shadow .14s; }
.tab.active { box-shadow: 0 3px 10px color-mix(in srgb, var(--signal) 30%, rgba(0,0,0,.08)); }
/* avatars and actions of the cards */
.pn-avatar { transition: transform .16s; }
.pn-card:hover .pn-avatar { transform: scale(1.05); }
.pn-actions .btn { transition: transform .14s, border-color .14s, box-shadow .14s; }
.pn-actions .btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .pn-kpi:hover, .pn-card:hover, .pe-status:hover, .pn-links a:hover { transform: none; } .pe-status .pe-dot { animation: none; } }
/* dashboard CTAs: identical layout paths, guaranteed alignment */
.pn-hero-text .pn-cta-row form { display: contents; }
.pn-hero-text .pn-cta-row .btn { margin: 0; }
/* Sales and kin: long forms breathe over several columns and use the page */
@media (min-width: 900px) {
    .sl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 4px 26px; align-items: start; }
    .sl-form > h3, .sl-form > p, .sl-form > .btn-row, .sl-form > .alert, .sl-form > .grid-2,
    .sl-form > .check-label, .sl-form > small, .sl-form > div, .sl-form > table { grid-column: 1 / -1; }
}
/* every panel page: the forms inside the panels flow over several columns */
@media (min-width: 900px) {
    .pn-page .panel > form:not(.inline) { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 4px 26px; align-items: start; }
    .pn-page .panel > form:not(.inline) > h3, .pn-page .panel > form:not(.inline) > p,
    .pn-page .panel > form:not(.inline) > .btn-row, .pn-page .panel > form:not(.inline) > .alert,
    .pn-page .panel > form:not(.inline) > .grid-2, .pn-page .panel > form:not(.inline) > .check-label,
    .pn-page .panel > form:not(.inline) > small, .pn-page .panel > form:not(.inline) > div,
    .pn-page .panel > form:not(.inline) > table, .pn-page .panel > form:not(.inline) > label:has(textarea) { grid-column: 1 / -1; }
}
/* hidden price-list preview = no ghost lane: the fields take the whole page */
.sl-price-preview:has(> .ld-price-card[hidden]) { grid-template-columns: 1fr; }
/* storefront legal footer + trademark note */
.ld-sitefoot { text-align: center; padding: 34px 18px 40px; color: var(--ink-soft); font-size: 13px; border-top: 1px solid var(--line); margin-top: 40px; }
.ld-sitefoot p { margin: 4px 0; }
.ld-sitefoot a { color: inherit; }
.ld-tm, .tm-note { font-size: 11.5px; opacity: .75; }
/* "Install as an app": the phone receives the icon live */
.pw2-hero { display: flex; gap: 22px; align-items: center; margin-bottom: 14px; }
.pw2-phone { flex: 0 0 96px; border: 3px solid #223; border-radius: 22px; padding: 8px 6px 12px; background: #101726; box-shadow: 0 14px 30px rgba(10,20,40,.30); animation: rc2-float 6s ease-in-out infinite; }
.pw2-screen { position: relative; border-radius: 14px; background: linear-gradient(160deg, #17233c, #0f1a2e); height: 150px; padding: 12px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: start; justify-items: center; }
.pw2-screen > i { width: 20px; height: 20px; border-radius: 6px; background: rgba(139,180,255,.22); }
.pw2-app { width: 24px; height: 24px; border-radius: 7px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(58,141,255,.5); opacity: 0; animation: pw2-drop 5.5s ease-in-out infinite; }
.pw2-app svg { width: 18px; height: 18px; }
@keyframes pw2-drop { 0%, 18% { opacity: 0; transform: translateY(-26px) scale(.6); } 30% { opacity: 1; transform: translateY(2px) scale(1.08); } 34%, 86% { opacity: 1; transform: translateY(0) scale(1); } 96%, 100% { opacity: 0; transform: scale(.8); } }
.pw2-spark { position: absolute; color: #8bd0ff; font-size: 11px; opacity: 0; animation: rc2-spark 5.5s ease-out infinite; }
.pw2-spark.s1 { right: 16px; top: 44px; animation-delay: .1s; } .pw2-spark.s2 { left: 14px; top: 62px; animation-delay: .22s; }
.pwa-box .btn[data-pwa-install]:not([hidden]) { animation: ck2-ready 1.8s ease-out 3; }
@media (max-width: 560px) { .pw2-hero { flex-direction: column; text-align: center; } .rc2-chips { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pw2-phone, .pw2-app, .pw2-spark { animation: none; } .pw2-app { opacity: 1; } }
.cl-past { margin-top: 14px; }
.cl-pastrow { margin: 6px 0; font-size: 13px; }
.cl-pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 18px; }
/* voucher table: it compacts by itself according to the space of ITS container (no horizontal scroll) */
.vp-layout .table-wrap { container-type: inline-size; }
.vp-layout .table-wrap th a { white-space: nowrap; }
@container (max-width: 920px) {
    .vp-layout table th, .vp-layout table td { padding: 8px 8px; font-size: 13px; }
    .vp-layout table th:nth-child(8), .vp-layout table td:nth-child(8) { display: none; }   /* Created: the sort order says it, not needed at a glance */
    .vp-layout table td:nth-child(7) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container (max-width: 780px) {
    .vp-layout table th:nth-child(4), .vp-layout table td:nth-child(4) { display: none; }   /* Period */
    .vp-layout table td:nth-child(7) { max-width: 90px; }
}
@container (max-width: 660px) {
    .vp-layout table th:nth-child(7), .vp-layout table td:nth-child(7) { display: none; }   /* Note: stays in the detail */
    .vp-layout table th, .vp-layout table td { padding: 7px 6px; }
}
/* Log → cleanup: label, select and button on the same baseline */
.log-prune { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.log-prune label { margin: 0; flex: 0 1 260px; }
.log-prune .btn { margin-bottom: 1px; white-space: nowrap; }
/* row revoke: red pill, twin of the "available" badge */
.revoke-one { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 600;
    color: #a12b2b; background: #fbe7e7; border: 1px solid #f0c4c4; cursor: pointer; text-decoration: none;
    transition: background .14s, color .14s, transform .14s; }
.revoke-one:hover { background: #b93434; border-color: #b93434; color: #fff; transform: translateY(-1px); }
[data-theme=dark] .revoke-one { background: rgba(185,52,52,.16); border-color: rgba(185,52,52,.45); color: #f0a0a0; }
[data-theme=dark] .revoke-one:hover { background: #b93434; color: #fff; }
/* dashboard CTAs: the same flexible body for both, identical base */
.pn-hero-text .pn-cta-row { align-items: center; }
.pn-hero-text .pn-cta-row .btn.pn-cta { margin: 0; display: inline-flex; align-items: center; gap: 7px; line-height: 1.2; }
/* price-list preview "as the customer sees it": compact cards as in the storefront (landing.css wanted it full-page) */
.pk-stage { padding: 24px 22px 26px; }
.pk-stage .pk-preview.ld2-packages { grid-template-columns: repeat(auto-fill, minmax(250px, 330px)); max-width: none; margin: 0; min-height: 300px; align-content: start; }
/* price list: pencil and bin on the same baseline */
.pk-row-actions { display: flex; gap: 8px; align-items: center; }
.pk-row-actions form.inline { display: contents; }
.pk-row-actions .btn { margin: 0; }
/* marketing: "add subscriber" form in a row */
.nl-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nl-add input { margin: 0; width: auto; }
.nl-add .btn { margin: 0; white-space: nowrap; }
/* trial: fields that use the page */
.tr-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: none; gap: 10px 18px; }
/* coupon: the live ticket */
.cpt { display: flex; align-items: stretch; margin: 16px 0 14px; max-width: 620px; border-radius: 14px; overflow: hidden;
    border: 2px dashed color-mix(in srgb, var(--signal) 55%, var(--line)); background: color-mix(in srgb, var(--signal) 4%, var(--card)); }
.cpt.pop { animation: cpt-pop .3s ease; }
@keyframes cpt-pop { 50% { transform: scale(1.015); } }
.cpt-left { display: grid; place-items: center; padding: 14px 18px; background: var(--signal); color: #fff; font-size: 26px; font-style: normal; }
.cpt-left i { font-style: normal; }
.cpt-mid { flex: 1; padding: 12px 16px; display: grid; gap: 3px; align-content: center; border-right: 2px dashed color-mix(in srgb, var(--signal) 40%, var(--line)); }
.cpt-mid b { font-size: 19px; letter-spacing: 1.5px; }
.cpt-mid span { font-weight: 700; color: var(--signal-ink, #1d5fa8); }
.cpt-mid small { color: var(--ink-soft); font-size: 12px; }
.cpt-right { padding: 12px 16px; display: grid; align-content: center; text-align: right; gap: 2px; min-width: 130px; }
.cpt-right b { font-size: 17px; }
.cpt-right small { color: var(--ink-soft); font-size: 11.5px; }

/* Sales: storefront link and sales switch on the same baseline */
.sl-hero-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sl-hero-btns form.inline { display: contents; }
.sl-hero-btns .btn { margin: 0; }
/* price-list preview: breathing room before the cards */
.pk-stage-head { margin-bottom: 22px; }
/* Support → Quotes: requests as cases */
.qt-list { display: grid; gap: 14px; }
.qt-card { border: 1px solid var(--line); border-left: 4px solid transparent; border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; background: color-mix(in srgb, var(--signal) 2.5%, var(--card)); }
.qt-card.st-new { border-left-color: var(--signal); }
.qt-card.st-contacted { border-left-color: #2e9e5b; }
.qt-card header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qt-card header b { font-size: 15px; letter-spacing: 1px; }
.qt-card header small { margin-left: auto; }
.qt-who, .qt-facts { font-size: 13px; }
.qt-msg { margin: 0; padding: 10px 14px; border-left: 3px solid color-mix(in srgb, var(--signal) 40%, var(--line)); background: color-mix(in srgb, var(--signal) 4%, transparent); border-radius: 0 10px 10px 0; white-space: pre-line; font-size: 13px; }
.qt-card footer { display: flex; gap: 10px; align-items: center; }
.qt-card footer form.inline { display: contents; }
.qt-card footer select { width: auto; margin: 0; }
/* cases: conversation and reply */
.qt-th { display: grid; gap: 3px; justify-items: end; margin-left: 12%; }
.qt-th span { background: color-mix(in srgb, var(--signal) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--signal) 25%, var(--line)); border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 13px; white-space: pre-line; }
.qt-th small { color: var(--ink-soft); font-size: 11px; }
.qt-reply { display: flex; gap: 10px; align-items: flex-end; }
.qt-reply textarea { flex: 1; margin: 0; resize: vertical; }
.qt-reply .btn { margin: 0 0 2px; white-space: nowrap; }
.qt-status { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 14px; margin-left: auto; }
.qt-status select { width: auto; margin: 0; }
.ct-reasons { margin-bottom: 6px; }
/* case: two-voice speech bubbles */
.pr-thread { display: grid; gap: 10px; }
.qt-th.in { justify-items: start; margin-left: 0; margin-right: 12%; }
.qt-th.in span { background: color-mix(in srgb, var(--ink-soft) 8%, var(--card)); border-color: var(--line); border-radius: 14px 14px 14px 4px; }
/* provider panel: every row of tabs like the customer's Settings sub-tabs
   (full row, equal-width items, scrolls instead of wrapping) */
.pn-page .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
.pn-page .tabs::-webkit-scrollbar { display: none; }
.pn-page .tabs .tab { flex: 1 0 auto; text-align: center; white-space: nowrap; }
/* exception: the statistics period selector stays compact in its row */
.pn-page .tabs.la-period { width: auto; }
.pn-page .tabs.la-period .tab { flex: 0 1 auto; }
/* tickets: customer bar with access to the installation */
.tk-cust { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--signal) 3%, var(--card)); font-size: 13px; }
.tk-cust .tk-cust-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tk-cust form.inline { display: contents; }
.tk-cust .btn { margin: 0; }
/* live support: the what's-new pill */
.tk-live-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 60; }
.tk-live-pill .btn { box-shadow: 0 10px 26px rgba(20,40,80,.25); animation: ck2-ready 1.6s ease-out 2; }
/* maintenance: the switch panel */
.mt-panel.on { border-left: 4px solid #b93434; }
.mt-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt-controls form.inline { display: contents; }
.mt-controls .btn { margin: 0; }
.mt-controls .uv-copyable { font-size: 12.5px; word-break: break-all; }
@keyframes mt-blink { 50% { opacity: .45; } }
/* maintenance ribbon: red twin of the sandbox one */
.mt-bar { position: sticky; top: 0; z-index: 71; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 14px;
    color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .2px; text-align: center;
    background: repeating-linear-gradient(-45deg, #d64541 0 22px, #b93434 22px 44px);
    background-attachment: fixed;
    box-shadow: 0 2px 12px rgba(120, 20, 20, .3); }
.mt-bar .btn { background: #5c1414; color: #ffc9c9; border-color: #5c1414; white-space: nowrap; margin: 0; }
.mt-bar span { text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* dashboard: orders up front — minimal list */
.od-box h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.od-meta { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); background: color-mix(in srgb, var(--signal) 7%, transparent); border-radius: 99px; padding: 4px 12px; }
.od-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.od-row { border-top: 1px solid var(--line); transition: background .15s; }
.od-row:first-child { border-top: 0; }
.od-row:hover { background: color-mix(in srgb, var(--signal) 3%, var(--card)); }
.od-row.od-new { animation: od-new 2.4s ease; }
@keyframes od-new { 0% { background: color-mix(in srgb, var(--signal) 22%, var(--card)); } }
.od-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.od-row.st-paid .od-dot { background: #2e9e5b; }
.od-row.st-pending .od-dot { background: #e5a53a; }
.od-row.st-refund .od-dot { background: #b93434; }
.od-kind { color: var(--ink-soft); font-size: 12px; width: 16px; text-align: center; }
.od-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: none; border: 0; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; text-align: left; }
.od-code { letter-spacing: .5px; }
.od-who { display: grid; align-content: center; line-height: 1.25; min-width: 0; min-height: 34px; }
.od-who small { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-amount { margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.od-amount.neg { color: #b93434; } .od-amount.pos { color: #1d6b3a; } .od-amount.none { color: var(--ink-soft); font-weight: 500; }
.od-date { color: var(--ink-soft); white-space: nowrap; }
.od-chev { font-style: normal; color: var(--ink-soft); transition: transform .25s; }
.od-row.open .od-chev, .pn-card.open .od-chev { transform: rotate(180deg); }
.od-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.od-row.open .od-detail, .pn-card.open .od-detail { grid-template-rows: 1fr; }
.od-inner { overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));   /* auto-FILL: identical tracks on every row, so fields line up ACROSS orders */ gap: 8px 16px; padding: 0 14px; font-size: 13px; border-top: 1px dashed transparent; transition: padding .3s ease, border-color .3s; }
.od-row.open .od-inner { padding: 10px 14px 13px; border-top-color: var(--line); }
.od-inner dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); margin-bottom: 2px; }
.od-inner dd { margin: 0; font-size: 13.5px; word-break: break-word; }
@media (max-width: 640px) { .od-date { display: none; } .od-head { flex-wrap: wrap; } }
/* installations: minimal list, twin of the orders */
.pn-grid { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.pn-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0; background: none; box-shadow: none; }
.pn-card:first-child { border-top: 0; }
.pn-card:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--signal) 3%, var(--card)); }
.in-head { font-size: 13.5px; }
.pn-card.st-active .od-dot { background: #2e9e5b; }
.pn-card.st-suspended .od-dot { background: #e5a53a; }
.pn-card.st-expired .od-dot { background: #b93434; }
.in-ico { font-style: normal; font-size: 15px; }
.in-trial { font-style: normal; font-size: 12px; }
.in-warn { color: #b98a1a; }
.in-mini { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.in-exp { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-exp.soon { color: #b98a1a; font-weight: 700; }
.in-exp.neg { color: #b93434; font-weight: 700; }
.in-inner { overflow: hidden; padding: 0 14px; transition: padding .3s ease; display: grid; gap: 10px; }
.pn-card.open .in-inner { padding: 12px 14px 14px; border-top: 1px dashed var(--line); }
.pn-card .pn-facts, .pn-card .pn-people { margin: 0; }
@media (max-width: 700px) { .in-mini, .in-exp { display: none; } .in-head { flex-wrap: wrap; } }
/* the KPI links must not look like links */
a.pn-kpi { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.pn-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 40, 80, .12); }

.ck-spec { font-size: 12.5px; }
.ck-spec input { flex: 0 0 auto; }
/* specific approval: small, aligned, not scary at all */
.ck-spec2 { margin-top: 2px; }
.check-label.ck-spec { align-items: flex-start; font-size: 12px; color: var(--ink-soft); background: none; border: 0; padding: 4px 0; }
.check-label.ck-spec input { margin-top: 2px; flex: 0 0 auto; }
.check-label.ck-spec span { line-height: 1.5; }
.ck-spec-more { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--signal-ink, #1d5fa8); cursor: pointer; text-decoration: underline dotted; }
.ck-spec-list { margin: 6px 0 4px 26px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--signal) 3%, var(--card)); font-size: 12.5px; animation: mt-in .25s ease; }
.ck-spec-list p { margin: 0 0 8px; }
.ck-spec-list ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; }
.ck-spec-list li b { display: inline-block; min-width: 20px; color: var(--signal-ink, #1d5fa8); }
.ck-spec-foot { margin: 8px 0 0 !important; }
/* consents: one typeface only, everything on the same grid, "Accept all" in sight */
.ck-consents-head { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 2px; }
.ck-consents-head small { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; }
.ck-accept-all { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--signal-ink, #1d5fa8); cursor: pointer; text-decoration: underline dotted; white-space: nowrap; }
.ck-accept-all:hover { text-decoration-style: solid; }
/* measured 554 (gtouch.js at 390 px): text-styled buttons and links of the consent block were 14–20 px tall — a padded hit area with negative margins keeps the layout and gives ≥ 26 px */
.ck-accept-all, .ck-spec-more { display: inline-block; padding: 6px 6px; margin: -6px -6px; }
.ck2-consent .check-label a, .ld-cookie a, .ld-footer a { display: inline-block; padding: 5px 4px; margin: -5px -4px; }
.ck-accept-all.done { animation: cpt-pop .3s ease; }
.ck2-consent { display: grid; gap: 0; }
.ck2-consent .check-label, .check-label.ck-spec { font-size: 13px; color: var(--ink); align-items: flex-start; line-height: 1.45; background: none; border: 0; margin: 0; padding: 3px 0; }
.ck2-consent .check-label input, .check-label.ck-spec input { margin-top: 2px; flex: 0 0 auto; }
.check-label.ck-spec { padding: 3px 0; }
.ck-spec2 { margin: 0; }
.ck-spec-list { font-size: 13px; }
/* typeable country: the field inherits the inputs' dress, the list the suggestions' one */
.ck2-cty-wrap { position: relative; display: block; }
.ck2-cty-wrap .ck2-addr-list { top: 100%; }
.ck2-cty-wrap .ck2-addr-list div.sel { background: color-mix(in srgb, var(--signal) 12%, var(--card)); }
/* country: live list, never bold (it lives inside the label, which is bold) */
.ck2-cty-wrap, .ck2-cty-wrap input { font-weight: 500; }
#ck2-cty-list { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(20, 40, 80, .14); }
#ck2-cty-list div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-weight: 400; font-size: 14px; cursor: pointer; animation: cty-in .22s ease both; transition: background .12s, padding-left .12s; }
#ck2-cty-list div:hover, #ck2-cty-list div.sel { background: color-mix(in srgb, var(--signal) 8%, var(--card)); padding-left: 16px; }
#ck2-cty-list .cty-flag { font-size: 19px; font-weight: 400; line-height: 1; }
#ck2-cty-list .cty-ok { margin-left: auto; font-style: normal; color: var(--signal-ink, #1d5fa8); font-weight: 700; }
#ck2-cty-q.picked { animation: cty-pick .45s ease; }
@keyframes cty-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cty-pick { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); } }
/* price-list preview: the tags no longer step on each other */
.pk-preview { padding-top: 14px; }
.pk-preview .mm-ribbon { left: auto; right: 12px; }   /* the live tag on the left, the featured ribbon on the right */
.pk-preview .pk-off-tag { top: auto; bottom: 10px; }  /* "off" goes down: the top corner belongs to the ribbon */
/* tailored offers */
.of-box { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--signal) 3%, var(--card)); }
.of-row { font-size: 13px; padding: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.of-link { font-size: 11.5px; word-break: break-all; color: var(--ink-soft); }
.of-new { margin-top: 10px; }
.of-new > summary { cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px dashed color-mix(in srgb, var(--signal) 35%, var(--line)); border-radius: 999px; color: var(--signal-ink, #1d5fa8); background: color-mix(in srgb, var(--signal) 6%, transparent); transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.of-new > summary::-webkit-details-marker { display: none; }
.of-new > summary:hover { background: color-mix(in srgb, var(--signal) 12%, transparent); transform: translateY(-1px); }
.of-new[open] > summary { border-style: solid; border-radius: 12px 12px 0 0; background: var(--card); border-bottom-color: transparent; transform: none; }
.of-new[open] > .of-explain, .of-new[open] > .of-form { border: 1px solid color-mix(in srgb, var(--signal) 35%, var(--line)); border-top: 0; background: var(--card); padding: 12px 14px; margin: 0; }
.of-new[open] > .of-explain { border-radius: 0; border-bottom: 0; animation: qt-in .3s ease; }
.of-new[open] > .of-form { border-radius: 0 0 12px 12px; animation: qt-in .35s ease; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; margin: 6px 0 2px; }
.of-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.of-form input, .of-form textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13.5px; background: var(--paper); transition: border-color .2s ease, box-shadow .2s ease; }
.of-form input:focus, .of-form textarea:focus { outline: 0; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 15%, transparent); }
.of-form label small { font-weight: 500; }
.of-form button { margin-top: 2px; }
.of-banner { max-width: 560px; margin: 0 auto 18px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 10px 30px rgba(20,40,80,.08); position: relative; }
.of-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #12897f; background: #e5f7f4; border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; }
.of-title { display: block; font-size: 17px; margin-bottom: 8px; }
.of-facts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.of-amount { font-size: 15px; } .of-amount b { font-size: 26px; letter-spacing: -.5px; }
.of-chip { font-size: 12.5px; background: color-mix(in srgb, var(--signal) 8%, var(--card)); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.of-banner small { color: var(--ink-soft); }
/* group seat counter: what I have, what is left, where to buy */
.seat-meter { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; background: var(--card); }
.seat-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.seat-meter-head span { color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.seat-meter-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--signal) 10%, var(--card)); margin: 8px 0; overflow: hidden; }
.seat-meter-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, #1d5fa8, #12a5a0); transition: width .8s cubic-bezier(.2,.8,.3,1); }
.seat-meter-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.seat-meter-foot small { color: var(--ink-soft); }
/* grouped bar: the panel map, always one hover away */
.pn-nav2 { display: flex; align-items: center; gap: 2px; }
.pn-group { position: relative; }
.pn-group-btn { display: inline-flex; align-items: center; gap: 5px; }
.pn-chev { font-style: normal; font-size: 10px; opacity: .6; transition: transform .2s; }
.pn-group:hover .pn-chev, .pn-group:focus-within .pn-chev { transform: rotate(180deg); }
.pn-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 35, 70, .16); padding: 6px; display: grid; gap: 1px; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1); z-index: 90; }
.pn-group:hover .pn-menu, .pn-group:focus-within .pn-menu, .pn-group.tap .pn-menu { opacity: 1; transform: none; pointer-events: auto; }
.pn-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .12s, padding-left .12s; }
.pn-menu a:hover { background: color-mix(in srgb, var(--signal) 8%, var(--card)); padding-left: 16px; }
.pn-menu a.on { background: color-mix(in srgb, var(--signal) 12%, var(--card)); font-weight: 700; }
.pn-menu a.on::after { content: "✓"; margin-left: auto; color: var(--signal-ink, #1d5fa8); font-weight: 800; }

/* forgiving dropdowns: a walkway over the gap, grace on closing, finger-sized items */
.pn-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.pn-menu { transition-delay: .16s; }                                   /* closing with forgiveness */
.pn-group:hover .pn-menu, .pn-group:focus-within .pn-menu, .pn-group.tap .pn-menu { transition-delay: 0s; }  /* apertura immediata */
.pn-menu a { padding: 10px 12px; }
.pn-pill.red { background: #b93434; color: #fff; animation: mt-tw 1.6s ease-in-out infinite; }
@media (max-width: 900px) {
    .pn-menu { position: fixed; left: 10px; right: 10px; min-width: 0; top: auto; }
}
.pp-guard { margin: 16px 0 12px; padding: 12px 16px; border: 1px solid #e8cf8a; border-radius: 12px; background: #fffaf0; }
.pp-guard-send { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-inline { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; }
.gp-inline input { width: 150px; padding: 5px 9px; font-size: 12.5px; }
/* visual hierarchy: the family bar (level 2) stands apart from the local tabs (level 3) */
.ps-tabs { border-bottom: 2px solid color-mix(in srgb, var(--signal) 22%, transparent); padding-bottom: 2px; margin-bottom: 16px; }
.ps-tabs .tab { font-size: 13px; }
.pe-main { display: grid; gap: 18px; min-width: 0; align-content: start; }
/* ============================== reception · welcome (canonical block, formerly three layers) */
.rc-welcome { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 44px 22px 16px; text-align: center; }
.rc-wifi-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 46px; border-radius: 26px; position: relative;
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 14px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15); }
.rc-page.rc-light .rc-wifi-hero { background: #fff; border-color: #d8e2ec; box-shadow: 0 14px 40px rgba(20,40,80,.12); }
.rc-wifi-hero small { font-size: 16px; letter-spacing: .09em; text-transform: uppercase; opacity: 1; font-weight: 800; color: #57b1ff; text-shadow: 0 1px 8px rgba(87, 177, 255, .35); }
.rc-page.rc-light .rc-wifi-hero small { color: #0a6ed1; text-shadow: none; }
.rc-wifi-name { font-size: clamp(34px, 8vw, 54px); font-weight: 800; letter-spacing: .01em; font-family: var(--mono, monospace); }
.rc-welcome-btn { font-size: 24px; padding: 22px 56px; border-radius: 20px; box-shadow: 0 14px 34px rgba(10, 110, 209, .38); }
.rc-welcome-btn:active { transform: scale(.98); }
.rc-welcome .rc-gen-note { font-size: 15px; opacity: .8; margin-top: -6px; }
@keyframes rc-wifi-pulse { 50% { transform: scale(1.12); opacity: .85; } }
/* reception: licence expired/paused — full screen in tablet style */
.rc-lic-off { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 28px; gap: 6px; }
.rc-lic-ico { font-size: 84px; line-height: 1; animation: rc-lic-sway 3s ease-in-out infinite; }
.rc-lic-off h1 { font-size: 34px; margin: 14px 0 2px; letter-spacing: -.5px; }
.rc-lic-name { font-size: 17px; font-weight: 700; color: var(--ink-soft, #5b6b80); margin: 0; }
.rc-lic-sub { font-size: 18px; max-width: 520px; margin: 12px 0 0; }
.rc-lic-note { font-size: 14.5px; max-width: 520px; color: var(--ink-soft, #5b6b80); margin: 6px 0 0; }
.rc-lic-retry { margin-top: 26px; font-size: 18px; padding: 14px 34px; border-radius: 14px; }
@keyframes rc-lic-sway { 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .rc-lic-ico { animation: none; } }
.rc-lic-auto { font-size: 13px; color: var(--ink-soft, #5b6b80); margin-top: 18px; opacity: .85; }
.rc-wifi-badge { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.rc-page.rc-light .rc-wifi-badge { background: radial-gradient(circle at 30% 25%, #eaf3fd, #d7e8fa); border-color: #bcd6f0; box-shadow: 0 10px 26px rgba(20,40,80,.14); color: #0a6ed1; }
.rc-wifi-svg { width: 54px; height: 54px; }
.rc-wifi-svg .w1, .rc-wifi-svg .w2, .rc-wifi-svg .w3 { opacity: .25; animation: rc-wave 2.4s ease-in-out infinite; }
.rc-wifi-svg .w1 { animation-delay: 0s; } .rc-wifi-svg .w2 { animation-delay: .3s; } .rc-wifi-svg .w3 { animation-delay: .6s; }
@keyframes rc-wave { 0%, 70%, 100% { opacity: .25; } 20%, 45% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rc-wifi-svg .w1, .rc-wifi-svg .w2, .rc-wifi-svg .w3 { animation: none; opacity: 1; } }
.tm-note-page { text-align: center; font-size: 11px; color: var(--ink-soft, #7b8a9c); opacity: .75; margin: 26px auto 18px; max-width: 640px; padding: 0 16px; }

/* ============================== on-screen order · panel (canonical block, .container perimeter) */
/* page title: clear hierarchy, aligned emoji, constant breathing room */
.container > h1 { font-size: 22px; letter-spacing: -.2px; display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.container > h1 + .muted, .container > h1 + p.muted { margin: -10px 0 16px; font-size: 13.5px; }
/* one vertical rhythm: every section breathes the same */
.container > .panel, .container > .table-wrap, .container > .card, .container > form, .container > .alert, .container > details { margin-bottom: 16px; }
.container > .panel + .panel { margin-top: 0; }
/* section subtitles: already uniform, only the first after the title is aligned */
.container > h2:first-of-type { margin-top: 4px; }
/* focus visible and consistent everywhere: the order is felt with Tab too */
.container :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--signal) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
/* service texts in one size */
.container .muted { font-size: 13px; }
/* separatori discreti e uguali */
.container hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ============================== public menu: glass, direction and life */
.ld-top { position: sticky; top: 0; z-index: 45; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--paper, #f7f9fc) 84%, transparent); border-bottom: 1px solid var(--line, #e3e9f0); transition: transform .35s ease, padding .3s ease, box-shadow .3s ease; }
.ld-top.slim { box-shadow: 0 8px 26px rgba(16,32,43,.08); }
.ld-top.slim .ld-brand svg, .ld-top.slim .ld-brand img { transform: scale(.9); }
.ld-top.away { transform: translateY(-100%); }
.ld-brand svg, .ld-brand img { transition: transform .3s ease; }
.ld-nav a[data-spy] { position: relative; }
.ld-nav a[data-spy]:not(.ld-nav-cta)::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--signal, #2f7fd4); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.ld-nav a[data-spy]:not(.ld-nav-cta):hover::after, .ld-nav a[data-spy].cur:not(.ld-nav-cta)::after { transform: scaleX(1); }
.ld-nav a.cur { color: var(--signal-ink, #1d5fa8); }
.ld-nav .ld-nav-cta { background: var(--signal, #2f7fd4); color: #fff !important; border-radius: 999px; padding: 8px 15px; font-weight: 700; box-shadow: 0 6px 16px color-mix(in srgb, var(--signal, #2f7fd4) 38%, transparent); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ld-nav .ld-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--signal, #2f7fd4) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .ld-top, .ld-nav a[data-spy]::after, .ld-nav .ld-nav-cta { transition: none; } .ld-top.away { transform: none; } }

/* cases: compact row, details on opening, closed ones in the drawer */
details.qt-card > summary.qt-sum { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 2px; }
details.qt-card > summary.qt-sum::-webkit-details-marker { display: none; }
details.qt-card > summary.qt-sum::after { content: '▸'; margin-left: auto; color: var(--ink-soft); transition: transform .2s ease; }
details.qt-card[open] > summary.qt-sum::after { transform: rotate(90deg); }
.qt-sum .qt-sum-co { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34%; }
.qt-sum .badge { margin-left: 0; }
details.qt-card > *:not(summary) { margin-top: 8px; }
.qt-archive { margin-top: 14px; }
.qt-archive > summary { cursor: pointer; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }
.qt-archive .qt-list { margin-top: 10px; }

/* offers in the case: explanation, message, talking send */
.of-explain { font-size: 12.5px; color: var(--ink-soft); }
.of-form .of-msg-label { display: block; margin-top: 8px; }
.of-form textarea { width: 100%; margin-top: 4px; font: inherit; font-size: 13px; }
.of-form .btn { margin-top: 10px; }

/* cases: styled detail — chips, directional chat, composer */
.qt-info { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.qt-chip { background: color-mix(in srgb, var(--signal) 6%, var(--card)); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; }
.qt-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.qt-b { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; animation: qt-in .35s ease backwards; }
.qt-b.in { align-self: flex-start; }
.qt-b.out { align-self: flex-end; flex-direction: row-reverse; }
.qt-b i { font-style: normal; font-size: 16px; }
.qt-b > div { border-radius: 14px; padding: 9px 12px; }
.qt-b.in > div { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.qt-b.out > div { background: linear-gradient(140deg, var(--signal), color-mix(in srgb, var(--signal) 70%, #1d5fa8)); color: #fff; border-bottom-right-radius: 5px; }
.qt-b span { display: block; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.qt-b small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .65; }
@keyframes qt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.of-row.st-cancelled { opacity: .55; }
.of-row .inline { display: inline-flex; margin: 0 0 0 6px; }
.qt-reply { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; transition: border-color .25s ease, box-shadow .25s ease; }
.qt-reply:focus-within { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); box-shadow: 0 8px 24px color-mix(in srgb, var(--signal) 12%, transparent); }
.qt-reply textarea { border: 0; background: transparent; outline: 0; }
@media (prefers-reduced-motion: reduce) { .qt-b { animation: none; } }

/* reserved offer: the seal in the checkout */
.of-reserved { font-size: 12px; color: var(--ink-soft); background: color-mix(in srgb, var(--signal) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--signal) 30%, var(--line)); border-radius: 9px; padding: 6px 10px; margin: 6px 0 2px; }
.qt-b span a, .pr-msg span a { color: inherit; text-decoration: underline; word-break: break-all; }
.pr-msg.out span a { color: #fff; }

/* offer row: one row only, in family voice */
.of-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; font-size: 13px; }
.of-code { font-weight: 800; font-size: 12.5px; letter-spacing: .02em; background: color-mix(in srgb, var(--signal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 22%, var(--line)); border-radius: 8px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.of-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.of-facts { color: var(--ink-soft); white-space: nowrap; }
.of-row .badge { white-space: nowrap; flex: 0 0 auto; }
.of-actions { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.of-copy { white-space: nowrap; }
@media (max-width: 700px) { .of-row { flex-wrap: wrap; } .of-name { flex-basis: 100%; } }

/* legal card: the two-card fork */
.lg-cfg input { width: 100%; }
.lg-switch { display: flex; gap: 9px; align-items: center; margin: 12px 0 2px; font-size: 14px; }
.lg-switch input { width: 17px; height: 17px; accent-color: var(--signal); }
.lg-switch-note { display: block; margin: 0 0 8px 26px; }
.lg-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.lg-mode { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--card); }
.lg-mode b { display: block; font-size: 13px; margin-bottom: 4px; }
.lg-mode p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.lg-mode.off { border-color: color-mix(in srgb, #8fe0b0 45%, var(--line)); background: color-mix(in srgb, #8fe0b0 7%, var(--card)); }
.lg-mode.on { border-color: color-mix(in srgb, var(--signal) 35%, var(--line)); background: color-mix(in srgb, var(--signal) 6%, var(--card)); }
@media (max-width: 700px) { .lg-modes { grid-template-columns: 1fr; } }
.lg-how { border: 1px dashed var(--line); border-radius: 12px; padding: 11px 13px; margin-top: 12px; }

/* note under the offer grid: full width, all fields aligned */
.of-inst-note { display: block; margin: 2px 0 8px; font-size: 12px; line-height: 1.5; }

/* cases: the filter tabs by kind */
.qt-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.qt-fchip { text-decoration: none; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; background: var(--card); transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease; }
.qt-fchip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--signal) 30%, var(--line)); color: var(--ink); }
.qt-fchip.cur { background: var(--signal); border-color: var(--signal); color: #fff; }
.qt-fchip em { font-style: normal; opacity: .7; font-weight: 600; }
.qt-fchip.cur em { opacity: .9; }

/* case status: the family's segmented control */
.qt-st { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.qt-st-btn { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); padding: 7px 14px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.qt-st-btn + .qt-st-btn { border-left: 1px solid var(--line); }
.qt-st-btn:hover:not(.cur) { background: color-mix(in srgb, var(--signal) 8%, transparent); color: var(--ink); }
.qt-st-btn.cur { background: var(--signal); color: #fff; cursor: default; }

/* admin composer: the reply card, clearly visible */
.qt-composer { border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--line)); box-shadow: 0 10px 30px color-mix(in srgb, var(--signal) 8%, transparent); padding: 12px 14px; }
.qt-composer-head { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; color: var(--signal-ink, #1d5fa8); }
.qt-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.qt-attach { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; border: 1px dashed var(--line); border-radius: 999px; padding: 7px 13px; transition: border-color .2s ease, color .2s ease; }
.qt-attach:hover { border-color: color-mix(in srgb, var(--signal) 35%, var(--line)); color: var(--ink); }
.qt-attach input { display: none; }
.qt-attach-note { display: block; margin-top: 6px; }
.qt-att, .pr-att { display: inline-flex; align-items: center; gap: 5px; margin: 6px 6px 0 0; font-size: 12px; font-weight: 700; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; background: color-mix(in srgb, var(--paper) 60%, transparent); }
.qt-att em { font-style: normal; opacity: .6; font-weight: 600; }
.pr-msg.out .pr-att { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.12); }

/* the signature and the time inherit the bubble colour: white on blue, never an invisible grey */
.qt-b > div small { color: inherit; opacity: .78; }

/* case composer: full column, never squeezed into a row again */
.qt-composer { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }   /* .qt-reply's flex-end (a row rule) must not shrink the column's rows: the head sat in the right corner */
.qt-composer .qt-composer-head { margin-bottom: 0; }
.qt-composer textarea { width: 100%; min-height: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: inherit; font-size: 13.5px; resize: vertical; transition: border-color .2s ease, box-shadow .2s ease; }
.qt-composer textarea:focus { outline: 0; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 15%, transparent); }
.qt-composer .qt-composer-foot { margin-top: 0; }
.qt-composer .qt-attach-note { margin-top: 0; }

/* attachments: aligned footer and animated chips of the chosen files */
.qt-composer-foot { align-items: center; }
.qt-composer-foot .qt-attach, .qt-composer-foot .btn { height: 38px; display: inline-flex; align-items: center; }
.qt-att-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.qt-att-picked:empty { display: none; }
.qt-att-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid color-mix(in srgb, var(--signal) 25%, var(--line)); background: color-mix(in srgb, var(--signal) 6%, var(--card)); border-radius: 999px; padding: 4px 6px 4px 11px; animation: qt-in .3s cubic-bezier(.2,.85,.3,1.1) backwards; animation-delay: calc(var(--i) * 60ms); max-width: 100%; }
.qt-att-chip b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.qt-att-chip em { font-style: normal; color: var(--ink-soft); font-size: 11px; }
.qt-att-x { border: 0; background: color-mix(in srgb, var(--signal) 12%, transparent); color: var(--ink-soft); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 1; display: grid; place-items: center; transition: background .2s ease, color .2s ease; }
.qt-att-x:hover { background: #b23a48; color: #fff; }
.pr-reply .qt-att-picked { margin-top: 6px; }

/* the band on dead offers, in the panel too */
.qt-b.dead > div { opacity: .82; filter: saturate(.6); }
.qt-b.dead span a { pointer-events: none; text-decoration: line-through; opacity: .7; }
.qt-ribbon { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -9px -12px 8px; padding: 6px 10px; border-radius: 14px 14px 0 0; background: linear-gradient(140deg, #b23a48, #8e2f3a); color: #fff !important; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.qt-b.in.dead > div .qt-ribbon { border-bottom-left-radius: 0; }
.qt-b.out.dead > div .qt-ribbon { border-bottom-right-radius: 0; }

/* attachment pills: eye + download; lightbox */
.qt-att .att-view:hover, .pr-att .att-view:hover { background: color-mix(in srgb, var(--signal) 12%, transparent); }
.pr-msg.out .pr-att .att-view { border-right-color: rgba(255,255,255,.3); }
.pr-note-inline { align-self: center; margin-left: 4px; }
.pr-reply-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 18, 26, .82); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 26px; cursor: zoom-out; animation: qt-in .2s ease; }
.att-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* attachments note: in the row, aligned with the pill */
.qt-attach-side { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.qt-attach-side .qt-attach { flex: none; }
.qt-attach-side .qt-attach-note { margin: 0; line-height: 1.35; }
.pr-note-inline { margin: 0; align-self: center; line-height: 1.35; }

/* inverted attachment pills: the name opens the view, the clip downloads */
.qt-att .att-dl:hover, .pr-att .att-dl:hover { background: color-mix(in srgb, var(--signal) 12%, transparent); }
.pr-msg.out .pr-att .att-dl { border-left-color: rgba(255,255,255,.3); }

/* attachment pill: one row only, name in ellipsis, size and clip always whole */
.qt-att, .pr-att { padding: 0; overflow: hidden; max-width: 100%; align-items: stretch; }
.qt-att .att-view, .pr-att .att-view { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 11px; color: inherit; text-decoration: none; min-width: 0; max-width: 300px; white-space: nowrap; transition: background .2s ease; }
.qt-att .att-dl, .pr-att .att-dl { display: inline-flex; align-items: center; flex: none; border-left: 1px solid var(--line); padding: 4px 9px; text-decoration: none; color: inherit; transition: background .2s ease; }
.att-view .att-ico { font-style: normal; flex: none; }
.att-view .att-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.att-view em { font-style: normal; opacity: .65; font-weight: 600; font-size: 11px; flex: none; white-space: nowrap; }

/* same in the panel */
.qt-b div span.qt-att { display: inline-flex; align-items: center; }

/* attachment deletion (panel only) */
.att-del-f { display: inline-flex; border-left: 1px solid var(--line); }
.att-del { border: 0; background: transparent; font: inherit; font-size: 10px; padding: 4px 8px; cursor: pointer; color: var(--ink-soft); }
.att-del:hover { background: #b23a48; color: #fff; }

/* orders on the home: amounts in a column, tabular digits, currency and price that do not wobble */
.od-list .od-amt, .od-row .od-amt, .od-list b { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; text-align: right; }
/* .od-row flex removed 01/09/2026: the article must stack head+detail — a legacy flex here pushed the expanded detail to the RIGHT of the row */

/* user card: buttons and guard fields all of the same height */
form.inline .btn.sm { height: 32px; display: inline-flex; align-items: center; gap: 5px; }
.gp-inline { display: inline-flex; align-items: center; gap: 5px; }
.gp-inline input { height: 32px; box-sizing: border-box; width: 150px; font-size: 12.5px; }

/* attachment archive in the Requests box */
.qt-allatt { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.qt-allatt summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.qt-allatt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* customer card: the two deletion rows in a column, everything on the axis */
.pu-del { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pu-del .gp-inline input { width: 200px; height: 34px; }
.pu-del .btn.sm { height: 34px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* deletions: rigid grid — elastic field, twin fixed-width buttons, zero wrapping */
.pu-del { flex-wrap: nowrap; width: 100%; max-width: 560px; }
.pu-del .gp-inline { flex: 1; min-width: 0; }
.pu-del .gp-inline input { width: 100%; min-width: 90px; }
.pu-del .btn.sm { flex: none; width: 250px; justify-content: center; }

/* sealed identity in the new-installation form from the customer card */
input.pn-locked { background: color-mix(in srgb, var(--line) 30%, var(--paper)); color: var(--ink-soft); cursor: not-allowed; }

.qt-search { width: 100%; max-width: 380px; margin: 10px 0 2px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; background: var(--paper); }
.qt-search:focus { outline: 0; border-color: var(--signal); }


/* orders on the home: the REAL classes (od-amount, not the earlier ghost) */
.od-head { display: flex; align-items: center; gap: 10px; }
.od-amount { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* case footer: attachment deletion, PDF and status in one row */
.qt-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.qt-foot .qt-status { margin-left: auto; }

/* panel buttons: uniform height and centring */
.pn-page form.inline .btn, .pn-page a.btn.sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; box-sizing: border-box; }

/* ------------------------------------------------ Customer 360° (platform_user) */
.pcu-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--line); }
.pcu-link:hover { color: var(--signal); border-bottom-color: var(--signal); }
.pcu-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pcu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.pcu-stat { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: grid; gap: 2px; text-align: center; animation: uv-rise .3s ease-out backwards; }
.pcu-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pcu-stat small { color: var(--muted); }
.pcu-insts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pcu-inst { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; display: grid; gap: 6px; animation: uv-rise .3s ease-out backwards; }
.pcu-inst header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcu-inst a.badge { text-decoration: none; }
/* buttons in a rigid grid: equal columns, same height, no snaking */
.pcu-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }
.pcu-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; box-sizing: border-box; margin: 0; }
.pcu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .pcu-stats { grid-template-columns: repeat(2, 1fr); } .pcu-two { grid-template-columns: 1fr; } }
.pcu-meta { color: var(--ink-soft); }

/* order row on a RIGID GRID: fixed columns, everything aligned in every list
 * (home, sales register, customer card). The test marker lives INSIDE the code column,
 * so the column count never wobbles. The installations row (in-head) is excluded. */
.od-list .od-head:not(.in-head) { display: grid; grid-template-columns: 10px minmax(120px, max-content) 22px minmax(0, 1fr) max-content max-content 14px; align-items: center; gap: 10px; }
.od-list .od-head:not(.in-head) .od-amount { margin-left: 0; justify-self: end; }
.od-list .od-head:not(.in-head) .od-amount small { display: inline; font-weight: 400; }
.od-list .od-head:not(.in-head) .od-date { justify-self: end; }
.od-list .od-head:not(.in-head) .od-chev { justify-self: end; }
.od-test { font-size: 12px; }
.od-inner form.inline { margin: 0; }
@media (max-width: 640px) {
    .od-list .od-head:not(.in-head) { grid-template-columns: 10px minmax(90px, max-content) 20px minmax(0, 1fr) max-content 14px; gap: 8px; }
}

/* Customer 360° — layout: two columns (personal data | installations), dl on a
 * grid, per-card edit drawer, buttons that NEVER wrap */
.pcu-cols { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.pcu-dl { display: grid; gap: 0; margin: 6px 0 0; }
.pcu-dl div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.pcu-dl div:last-child { border-bottom: 0; }
.pcu-dl dt { color: var(--ink-soft); font-size: 12.5px; }
.pcu-dl dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.pcu-inst .pn-edit { display: none; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.pcu-inst.edit .pn-edit { display: block; animation: uv-rise .25s ease-out; }
.pcu-inst + .pcu-inst { margin-top: 10px; }
.pcu-actions .btn { white-space: nowrap; }
.pcu-actions form.inline { display: contents; }
.pcu-actions form.inline .btn { width: 100%; height: 36px; }
.pcu-foot { border-top: 1px dashed var(--line); padding-top: 12px; }
.pcu-stat b { background: linear-gradient(135deg, var(--signal), color-mix(in srgb, var(--signal) 55%, var(--ink))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 980px) { .pcu-cols { grid-template-columns: 1fr; } }
.pcu-anag { position: static; }   /* sticky made the section pin at the top while "Installazioni" scrolled over it (934) */
.pcu-instbox { min-width: 0; }

/* Users: the customer list on ONE row — rigid grid, the whole row is a link to the card */
.pu-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.pu-row { display: grid; grid-template-columns: 34px minmax(120px, 1fr) minmax(0, 1.4fr) max-content minmax(0, max-content) 14px; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 13.5px; transition: background .15s; }
.pu-row:first-child { border-top: 0; }
.pu-row:hover { background: color-mix(in srgb, var(--signal) 3%, var(--card)); }
.pu-row .pn-avatar { margin: 0; }
.pu-r-who { display: grid; line-height: 1.25; min-width: 0; }
.pu-r-who small { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-r-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.pu-r-id { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pu-r-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 340px; } .pu-r-badges .badge, .pu-disp { white-space: nowrap; }
.dp-row-acts { display: inline-flex; gap: 6px; align-items: center; } .dp-row-acts .dp-act { margin: 0; }
@media (max-width: 1100px) { .pu-row { grid-template-columns: 34px minmax(120px, 1fr) max-content minmax(0, max-content) 14px; } .pu-r-mail { display: none; } }
@media (max-width: 720px) { .pu-row { grid-template-columns: 34px minmax(0, 1fr) max-content 14px; } .pu-r-mail, .pu-r-id { display: none; } }

/* card: account controls — full labelled fields, actions on a grid with a hint */
.pcu-act { display: grid; gap: 10px; margin-top: 8px; }
.pcu-act label { display: block; font-size: 12.5px; color: var(--ink-soft); }
.pcu-act label input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; height: 38px; padding: 8px 12px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.pcu-act label input:focus { outline: 0; border-color: var(--signal); }
.pcu-actgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: start; }
/* wide action buttons: labels vary by language — let them wrap to two lines
 * instead of clipping (min-height keeps single-line buttons aligned at 38px) */
.pcu-actgrid .btn.wide { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; }
.pcu-actgrid small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; }
.pcu-actrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
/* D4 (383): the Analyst's products-in-use panel — one block per product: a head line with the beat, the KPI grid, the counters */
.hq-pulse { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.hq-pulse-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; font-size: 14px; }
.hq-pulse-head small { font-size: 12px; }
.hq-pulse .bk-kpis { margin-top: 4px; }
/* 390: the export section as ONE form — the password first, the full document, then the product rows */
.pcu-xform { display: flex; flex-direction: column; gap: 10px; }
.pcu-xform .pcu-xpass { display: flex; flex-direction: column; gap: 4px; max-width: 420px; font-weight: 600; }
.pcu-xform .pcu-xpass input { font-weight: 400; }
.pcu-xdoc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.pcu-xdoc .pcu-xact { display: flex; gap: 8px; flex-wrap: wrap; }
/* D2 (383): the product-side part of the export — one row per (product, scope): status on the left, the request and the guarded raw download on the right */
.pcu-xpart { display: grid; gap: 8px; margin: 8px 0 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; }
.pcu-xrow { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; }
.pcu-xlbl { flex: 1 1 260px; min-width: 0; font-size: 13px; line-height: 1.45; }
.pcu-xact { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pcu-xact .pcu-act { margin-top: 0; }
.pcu-xact .pcu-act label { font-size: 11.5px; }
.pcu-xact .pcu-act label input { height: 34px; width: 150px; }
.pcu-actrow label { flex: 1 1 220px; min-width: 0; }
.pcu-actrow .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; box-sizing: border-box; padding: 0 16px; white-space: nowrap; }
.pcu-danger-h { color: #b93434; }
/* the bin (customer profile): parked account — the way back on top, the way out folded below */
.pcu-trash { margin: 8px 0 12px; border: 1px dashed color-mix(in srgb, var(--err-ink) 45%, var(--line)); border-radius: 14px; padding: 12px 16px; background: color-mix(in srgb, var(--err-ink) 5%, var(--card)); display: grid; gap: 8px; }
.pcu-trash > p { margin: 0; }

/* activity: grid rows on ONE line, with fading borders like the site lists */
.pcu-rowlist { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.pcu-rowlist li { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.pcu-rowlist li:first-child { border-top: 0; }
.pcu-rowlist li:hover { background: color-mix(in srgb, var(--signal) 3%, var(--card)); }
.pcu-rowlist .pcu-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcu-rowlist .tk-code { flex: none; }
.pcu-rowlist small { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcu-reg li { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.pcu-more { margin-top: 8px; }

/* suspended/expired courtesy page: login card with breathing room, actions on a rigid grid */
.uv-state { text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 520px; }
.uv-state-ico { font-size: 44px; line-height: 1; margin-top: 2px; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--signal) 25%, transparent)); animation: uv-rise .45s ease-out backwards; }
.uv-state h1 { margin: 0; font-size: 24px; }
.uv-state-name { margin: 0; font-weight: 700; color: var(--ink-soft); }
.uv-state-msg { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); max-width: 42ch; }
.uv-state-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; width: 100%; margin-top: 8px; }
.uv-state-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; white-space: nowrap; box-sizing: border-box; }
.uv-state-foot { font-size: 11.5px; max-width: 46ch; margin: 8px 0 0; }

/* support bar on the card pages (courtesy, selector, legal gate):
 * a floating pill detached from the form, not a strip glued to the edge */
.login-page .imp-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(92vw, 620px); box-sizing: border-box; border-radius: 999px; padding: 8px 10px 8px 18px; justify-content: space-between; gap: 12px; box-shadow: 0 12px 32px color-mix(in srgb, #7a3ce8 40%, transparent); }
.login-page .imp-bar { overflow: hidden; }
.login-page .imp-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-page .imp-bar form { flex: none; }
.login-page .imp-bar .btn { border-radius: 999px; flex: none; }
/* breathing room under the pill, where the browser allows it (harmless fallback) */
.login-page:has(.imp-bar) .install-card { margin-top: 72px; }
@media (max-width: 520px) { .login-page .imp-bar { top: 10px; font-size: 12.5px; padding-left: 14px; } }

/* installation card, edit drawer: fields and buttons on the same baseline */
.pcu-inst .pn-edit .form-grid-end { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.pcu-inst .pn-edit .form-grid-end .grid-2 { flex: 1 1 320px; min-width: 0; }
.pcu-inst .pn-edit .form-grid-end > label { flex: 1 1 220px; min-width: 0; }
.pcu-inst .pn-edit .form-grid-end label input { width: 100%; box-sizing: border-box; height: 38px; }
.pcu-inst .pn-edit .form-grid-end .btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; box-sizing: border-box; white-space: nowrap; }
.uv-state-page .install-card { animation: uv-rise .5s ease-out backwards; }

/* accept-terms consents: a contract signature deserves readable type and a
 * checkbox you can actually aim at (page-scoped, other check-labels untouched) */
.at-consents .check-label { font-size: 14.5px; line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; }
.at-consents .check-label:hover { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.at-consents .check-label input[type="checkbox"] { width: 19px; height: 19px; flex: none; margin-top: 1px; accent-color: var(--signal); }
.at-consents .ck-consents-head small { font-size: 12.5px; }
.at-consents .ck-spec-list { font-size: 13.5px; line-height: 1.6; }
.at-consents .ck-spec-list li { margin: 3px 0; }
.at-consents .ck-spec-more { font-size: 12.5px; }

/* enquiry thank-you badge: shown when a paid offer exists — success speaks green here */
.pr-thanks { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(90deg, #1d7a3a, #2e9e5b); color: #fff; font-size: 13.5px; box-shadow: 0 10px 26px color-mix(in srgb, #2e9e5b 40%, transparent); animation: uv-rise .45s ease-out backwards; }
.pr-thanks b { font-weight: 800; }
.pr-thanks span { opacity: .92; }

/* checkout, locked account email on enquiry offers: visibly armored, not disabled-looking */
.ck2-locked input[readonly] { background: color-mix(in srgb, var(--signal) 6%, var(--paper)); border-style: dashed; cursor: not-allowed; }

/* first-login baptism (multi-license welcome): one field, one button, zero noise */
.hs-bapt-form { display: grid; gap: 10px; width: 100%; max-width: 380px; margin-top: 6px; }
.hs-bapt-form label { text-align: left; font-size: 12.5px; color: var(--ink-soft); }
.hs-bapt-form input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; height: 44px; padding: 10px 14px; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.hs-bapt-form input:focus { outline: 0; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }
.hs-bapt-form .btn { height: 44px; font-size: 14.5px; }
.ck2-multi-note { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); background: color-mix(in srgb, var(--signal) 6%, var(--paper)); border: 1px dashed color-mix(in srgb, var(--signal) 25%, transparent); border-radius: 10px; padding: 10px 12px; }

/* coupons tab, reorganized: four bounded section-cards with a chip nav — the
 * page used to read as one long soup of four different topics */
.cp-secnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.cp-secnav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; background: var(--card); transition: border-color .15s ease, color .15s ease; }
.cp-secnav a:hover { border-color: var(--signal); color: var(--signal); }
.cp-sec { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 16px; margin-top: 14px; scroll-margin-top: 80px; }
.cp-sec-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; font-size: 15.5px; }
.cp-sec-help { font-size: 13px; margin: 0 0 12px; }
.cp-g { margin: 12px 0 6px; }
.cp-new .cp-g:first-of-type { margin-top: 0; }
@media (max-width: 560px) { .cp-kinds { grid-template-columns: repeat(3, 1fr); } }
/* coupon rows: one rigid line — icon | code+desc | chips+actions right */
.cp-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.cp-card-meta > span:not(.badge) { background: color-mix(in srgb, var(--signal) 6%, var(--card)); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 760px) { .cp-card { grid-template-columns: 1fr; } .cp-card-meta { justify-content: flex-start; } }

/* empty coupon list: an invitation, not an orphan sentence in a desert */
.cp-list > p.muted { border: 1px dashed var(--line); border-radius: 12px; padding: 28px 16px; text-align: center; margin: 0; }

/* win-back: four tiles (no 'fixed' there) — no empty fifth column hole */
.wb-form .cp-kinds { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
/* win-back fields: one full-width row instead of a 520px cage */
.wb-form .wb-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* pay step, "edit my details": a ghost pill in family voice, not a bare blue link */
.ck2-editrow { margin: 12px 0 0; }
.ck2-edit { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); text-decoration: none; transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.ck2-edit:hover { border-color: var(--signal); color: var(--signal); transform: translateX(-2px); }

/* delete-with-refund dialog: a details panel in family voice — quote lines,
 * guard password, two exits (refund+delete / delete only) */
.pd-del summary { list-style: none; display: inline-flex; cursor: pointer; }
.pd-del summary::-webkit-details-marker { display: none; }
.pd-del[open] summary { opacity: .6; }
.pd-del-box { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--err-ink) 30%, var(--line)); border-radius: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--err-ink) 4%, var(--card)); display: grid; gap: 8px; animation: uv-rise .25s ease-out backwards; }
.pd-del-title { margin: 0; font-weight: 700; font-size: 14px; }
.pd-del-line { margin: 0; font-size: 13.5px; }
.pd-del-note { margin: 0; font-size: 12.5px; }
.pd-del-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

/* ledger ("prima nota"): filters row, signed amounts, quiet references */
.lg2-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 4px 0 14px; }
.lg2-filters label { font-size: 12px; color: var(--ink-soft); display: grid; gap: 4px; }
.lg2-filters .btn { margin-bottom: 1px; }
.lg2-kpis { margin-bottom: 14px; }
.lg2-in { color: var(--ok-ink); }
.lg2-out { color: var(--err-ink); }
.lg2-table td { vertical-align: top; }
.lg2-amt { font-weight: 700; white-space: nowrap; text-align: right; vertical-align: top; }   /* NEVER display:flex on a td: it stops being a table cell and the column detaches */
.lg2-amt .lg2-refline { display: block; margin-top: 4px; }
.lg2-amt .lg2-rbform { display: flex; gap: 4px; margin-top: 6px; justify-content: flex-end; }
.lg2-amt-h { text-align: right; }
.lg2-amt.pos { color: var(--ok-ink); }
.lg2-amt.neg { color: var(--err-ink); }
.lg2-ref { font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; color: var(--ink-soft); }
.lg2-none { border: 1px dashed var(--line); border-radius: 12px; padding: 26px 16px; text-align: center; }

/* ledger, compact voice: one visual line per movement, refund mini-form on board */
.lg2-table td, .lg2-table th { padding: 11px 12px; font-size: 13.5px; }
.lg2-table td small { font-size: 13px; }
.lg2-table .badge { font-size: 11.5px; padding: 3px 10px; }
.lg2-rbform { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.lg2-rbform input { width: 80px; height: 28px; box-sizing: border-box; padding: 2px 8px; font-size: 12.5px; text-align: right; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.lg2-rbform input[type=password] { width: 118px; text-align: left; }
/* the global .btn brings its own min-height/line-height: pin every box metric */
.lg2-rbform .btn { height: 28px; min-height: 28px; box-sizing: border-box; padding: 0 8px; line-height: 1; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }

/* the amount cell tells its own story: balance line under the figure */
.lg2-refline { font-weight: 500; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.lg2-refline b { color: var(--err-ink); }
.lg2-refall { color: var(--ok-ink); }

/* FiC bookkeeping marks in the ledger */
.lg2-fic { font-size: 11px; }
.lg2-fic.ok { color: var(--ok-ink); }
.lg2-ficretry { margin-top: 4px; }
.lg2-ficretry .btn { height: 24px; min-height: 24px; padding: 0 8px; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; }
.lg2-why { font-size: 11px; color: var(--ink-soft); font-style: italic; }
.lg2-uid { font-size: 11.5px; color: var(--signal); text-decoration: none; }
.lg2-uid:hover { text-decoration: underline; }
/* the invoicing alarm bar: impossible to miss, gone when the books are clean */
.pn-ficwarn { display: block; text-align: center; padding: 9px 14px; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--err-ink) 12%, var(--paper)); color: var(--err-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--err-ink) 30%, transparent); text-decoration: none; }
.pn-ficwarn:hover { background: color-mix(in srgb, var(--err-ink) 18%, var(--paper)); }
/* voucher history card */
.vv-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0 16px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-soft); font-size: 13px; }
.vv-facts b { margin-right: 5px; font-weight: 600; color: var(--ink-soft); }
.vv-h { margin: 18px 0 8px; font-size: 15px; }
.vv-events { list-style: none; margin: 0; padding: 0; }
.vv-events li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.od-amount.pos { color: var(--ok-ink); }

/* Codemerry HQ skin (13.10): same bones, company colors. */
html[data-hq] .pn-sandbox-bar { background: #f4b942; color: #3a2f0a; }
html[data-hq] .pn-sandbox-bar a, html[data-hq] .pn-sandbox-bar b { color: #3a2f0a; }

html[data-hq] .hq-rev { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
html[data-hq] .hq-rev-card { border: 1px solid var(--line); border-left: 4px solid #f4b942; border-radius: 12px; background: var(--card); padding: 10px 14px; display: grid; gap: 2px; font-size: 12.5px; }
html[data-hq] .hq-rev-card b { font-size: 14.5px; }
html[data-hq] .hq-rev-card i { font-style: normal; font-weight: 700; color: var(--ok-ink); }

.od-prod { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: -3px; }
.od-prod .prod-mark { width: 20px; height: 16px; border-radius: 4px; }
.od-prod .prod-chip { display: inline-grid; place-items: center; width: 20px; height: 16px; border-radius: 4px; background: var(--signal); color: #fff; font-size: 9px; font-weight: 800; }

/* Order filters as small pill chips: visually distinct from the main tab bar. */
#sl-ofilter { display: inline-flex; width: auto; background: transparent; padding: 0; gap: 6px; border: 0; }
#sl-ofilter .tab { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; background: var(--card); box-shadow: none; }
#sl-ofilter .tab.active { background: var(--signal); border-color: var(--signal); color: #fff; }

html[data-hq] .hq-rev-card em { font-style: normal; color: var(--ink-soft); font-size: 11px; margin-left: 6px; }
html[data-hq] .hq-rev-card i.neg { color: #b3261e; }

/* ================= HQ DESIGN v2 — fase 1: tokens & shell =================
 * A modern ledger: deep, dense, quietly golden. Sober chrome, living data. */
html[data-hq] {
    --ink: #14202e; --ink-soft: #55677c;
    --paper: #f0f4f9; --card: #ffffff; --line: #d8e2ee;
    --signal: #1f5fa8; --signal-ink: #174a85;
    --hq-gold: #c99a2e; --hq-deep: #17324e; --hq-deep2: #1e4265;
}
/* — typography of money: tabular digits, aligned to the cent — */
html[data-hq] .od-amount, html[data-hq] .hq-rev-card i, html[data-hq] .hq-rev-card em,
html[data-hq] td, html[data-hq] .lg-stat b, html[data-hq] .bk-kpis b {
    font-variant-numeric: tabular-nums;
}
html[data-hq] h1, html[data-hq] h2 { letter-spacing: -.3px; font-weight: 750; }
/* — dense, serious tables with sticky heads — */
html[data-hq] .table-wrap { max-height: 70vh; overflow: auto; }
html[data-hq] .voucher-table thead th, html[data-hq] table.cards thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--hq-deep); color: #dde9f6;
    border-bottom: 2px solid var(--hq-gold);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
}

html[data-hq] tbody tr { transition: background .15s ease; }
html[data-hq] tbody tr:hover { background: #f3f7fc; }
/* — order rows: quiet lift, gold whisper on the left — */
html[data-hq] .od-row { transition: transform .15s ease, box-shadow .15s ease; border-left: 3px solid transparent; }
html[data-hq] .od-row:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13, 42, 36, .10); border-left-color: var(--hq-gold); }
/* — controls: deep signal, golden focus — */
/* (moved into the one .btn home below: review 932) */
html[data-hq] .btn.primary { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
html[data-hq] .btn.primary:active { transform: translateY(1px); }
html[data-hq] :focus-visible { outline: 2px solid var(--hq-gold); outline-offset: 2px; }
html[data-hq] .alert { border-left: 4px solid var(--hq-gold); }
html[data-hq] .panel, html[data-hq] .hq-rev-card { box-shadow: 0 1px 3px rgba(13, 42, 36, .06); }

/* ===== HQ v2 — the sidebar skeleton ===== */
/* the sidebar offset belongs ONLY to bodies that carry the sidebar: the login,
   forgot/reset and first-password cards have none and must stay centered */
html[data-hq] body.pn-page, html[data-hq] body:has(> .hqsb), html[data-hq] body:has(> .pn-shell .hqsb) { padding-left: 232px; }
html[data-hq] .hqsb {
    position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 50;
    display: flex; flex-direction: column; gap: 2px; padding: 14px 12px;
    background: linear-gradient(180deg, var(--hq-deep), var(--hq-deep2));
    border-right: 1px solid rgba(201, 154, 46, .45);
    overflow-y: auto;
}
html[data-hq] .hqsb-brand { display: flex; align-items: center; gap: 9px; color: #f3faf7; text-decoration: none; font-weight: 800; font-size: 17px; padding: 4px 6px 14px; }
html[data-hq] .hqsb-brand .brand-svg { width: 30px; height: 24px; }
html[data-hq] .hqsb-brand i { font-style: normal; color: var(--hq-gold); font-weight: 700; }
html[data-hq] .hqsb-sandbox { margin: 0 6px 8px; padding: 4px 10px; border-radius: 8px; background: #f4b942; color: #3a2f0a; font-size: 12px; font-weight: 700; width: fit-content; }
html[data-hq] .hqsb-sec { margin: 14px 6px 4px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(201, 154, 46, .85); }
html[data-hq] .hqsb-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: #cdddf0; text-decoration: none; font-size: 13.5px; transition: background .15s ease, color .15s ease; border-left: 2px solid transparent; }
html[data-hq] .hqsb-it i { font-style: normal; width: 18px; text-align: center; }
html[data-hq] .hqsb-it:hover { background: rgba(255, 255, 255, .06); color: #ffffff; }
html[data-hq] .hqsb-it.on { background: rgba(201, 154, 46, .14); color: #ffe9b3; border-left-color: var(--hq-gold); }
html[data-hq] .hqsb-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
/* the old horizontal chrome never renders at the seat, but belt it anyway */
html[data-hq] .pn-top { display: none; }
html[data-hq] .pn-main { max-width: 1180px; padding-top: 22px; }
/* ≤ 900 px: the sidebar is a drawer and the topbar gives way to the compact bar — see "HQ mobile shell" at the end of the file */

/* ===== HQ v2 — heroes & KPIs, one livery ===== */
html[data-hq] .pn-hero {
    background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2)) !important;
    border: 1px solid rgba(201, 154, 46, .35);
    box-shadow: 0 8px 26px rgba(20, 44, 74, .22);
}
html[data-hq] .pn-hero::before, html[data-hq] .pn-hero::after { display: none; }
html[data-hq] .pn-hero h1 { color: #f4f8fd; }
html[data-hq] .pn-hero p, html[data-hq] .pn-hero .pn-hero-text p { color: #b9c9dd; }
html[data-hq] .pn-kpi {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(201, 154, 46, .28);
    border-radius: 12px;
    transition: border-color .15s ease, background .15s ease;
}
html[data-hq] .pn-kpi b { color: #f4f8fd; font-variant-numeric: tabular-nums; }
html[data-hq] .pn-kpi span { color: #a9bcd4; letter-spacing: .5px; }
html[data-hq] .pn-kpi.warn { border-color: var(--hq-gold); background: rgba(201, 154, 46, .12); }
html[data-hq] .pn-kpi.warn b { color: #ffd987; }
html[data-hq] .pn-kpi.ok b { color: #8fd6a8; }
html[data-hq] .pn-kpi:hover { background: rgba(255, 255, 255, .09); }
/* light-side counters (ledger, trial, legal) join the family */
html[data-hq] .bk-kpis > div, html[data-hq] .lg-stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--hq-gold);
    border-radius: 12px;
}
html[data-hq] .bk-kpis b, html[data-hq] .lg-stat b { color: var(--signal-ink); font-variant-numeric: tabular-nums; }
html[data-hq] .lg-stat.warn { border-left-color: #d97706; }
html[data-hq] .lg-stat.ok { border-left-color: #2e8b57; }

/* ===== HQ v2 — page families join the livery ===== */
html[data-hq] .pu-card { border: 1px solid var(--line); border-radius: 12px; transition: box-shadow .15s ease, border-color .15s ease; }
html[data-hq] .pu-card:hover { border-color: rgba(201, 154, 46, .55); box-shadow: 0 4px 14px rgba(20, 44, 74, .10); }
html[data-hq] .pu-card.super { border-left: 3px solid var(--hq-gold); }
html[data-hq] .bk-man-head, html[data-hq] .mtp-mail-head, html[data-hq] .mtp-pv-head, html[data-hq] .qt-composer-head {
    background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2));
    color: #e7eef7; border-radius: 10px 10px 0 0;
    border-bottom: 2px solid var(--hq-gold);
}
html[data-hq] .bk-man-head b, html[data-hq] .mtp-mail-head b, html[data-hq] .qt-composer-head b { color: #ffffff; }
html[data-hq] .of-box { border: 1px solid var(--line); border-left: 3px solid var(--hq-gold); border-radius: 10px; background: var(--card); }
html[data-hq] input, html[data-hq] select, html[data-hq] textarea { border-color: var(--line); transition: border-color .15s ease, box-shadow .15s ease; }
html[data-hq] input:focus, html[data-hq] select:focus, html[data-hq] textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(31, 95, 168, .14); outline: none; }
html[data-hq] .hm-sub, html[data-hq] .sl-group-title { color: var(--signal-ink); letter-spacing: .3px; }
html[data-hq] .panel > h2:first-child { border-bottom: 1px solid var(--line); padding-bottom: 8px; }

/* ===== HQ v2 — phase 2: living badges & the topbar ===== */
html[data-hq] .hqsb-b { margin-left: auto; background: var(--hq-gold); color: #241b04; font-style: normal; font-size: 11px; font-weight: 800; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; }
html[data-hq] body { padding-top: 54px; }
html[data-hq] .hqtb { position: fixed; top: 0; left: 232px; right: 0; height: 54px; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
html[data-hq] .hqtb-search { flex: 1; max-width: 420px; }
html[data-hq] .hqtb-search input { width: 100%; margin: 0; border-radius: 999px; padding: 8px 16px; background: #f2f6fb; }
html[data-hq] .hqtb-today { margin-left: auto; display: flex; align-items: baseline; gap: 8px; }
html[data-hq] .hqtb-today span { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
html[data-hq] .hqtb-today b { font-size: 17px; color: #1e7a46; font-variant-numeric: tabular-nums; }
html[data-hq] .hqtb-today b.neg { color: #b3261e; }
/* ≤ 900 px: the topbar is hidden, the compact bar takes its place (see "HQ mobile shell") */

/* ===== HQ v2 — auto-hero & the golden pulse ===== */
html[data-hq] .hq-hero-main { padding-bottom: 0; }
html[data-hq] .hq-hero-main + .pn-main { padding-top: 10px; }
html[data-hq] .hq-toast {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2));
    color: #ffe9b3; border: 1px solid var(--hq-gold);
    padding: 12px 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
    box-shadow: 0 10px 30px rgba(20, 44, 74, .35);
    animation: hq-toast-in .25s ease, hq-toast-beat 1.2s ease .3s 3;
}
html[data-hq] .hq-toast.out { opacity: 0; transform: translateY(8px); transition: all .5s ease; }

@keyframes hq-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hq-toast-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 154, 46, .0); } 50% { box-shadow: 0 0 0 7px rgba(201, 154, 46, .28); } }

html[data-hq] .hq-cl-head { font-weight: 800; font-size: 15px; color: var(--signal-ink); border-bottom: 2px solid var(--hq-gold); padding-bottom: 8px; margin: 0 0 12px; }
/* ledger: book-only refund controls (refund already executed at the circuit) */
.lg2-rbform .lg2-ext { display: block; font-size: 11.5px; margin-top: 4px; } .lg2-rbform .lg2-extref { max-width: 180px; font-size: 12px; margin-top: 4px; }
/* refund panel: a titled box that reads top-down — amount, how (now at the circuit / book only), the licence rule, go */
.lg2-amt .lg2-rbbox, .lg2-rbbox { display: block; margin: 8px 0 0 auto; padding: 10px 12px; max-width: 380px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 12.5px; }
.lg2-rbbox .lg2-rb-head { font-weight: 700; margin-bottom: 6px; } .lg2-rbbox .lg2-rb-head small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-soft); white-space: normal; margin-top: 2px; }
.lg2-rbbox .lg2-rb-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .lg2-rbbox .lg2-rb-row > span { flex: 1; color: var(--ink-soft); } .lg2-rbbox .lg2-rb-row em { font-style: normal; color: var(--ink-soft); font-size: 12px; }
.lg2-rbbox input[name="amount"] { width: 96px; }
.lg2-rbbox .lg2-rb-opt { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12.5px; line-height: 1.35; } .lg2-rbbox .lg2-rb-opt input { width: auto; height: auto; margin-top: 2px; }
.lg2-rbbox .lg2-extref { display: none; width: 100%; max-width: none; text-align: left; margin-top: 6px; }
.lg2-rbbox:has(input[name="ext"][value="1"]:checked) .lg2-extref, .lg2-rbbox:has(input[type="hidden"][name="ext"]) .lg2-extref { display: block; }
.lg2-rbbox .lg2-rb-hint { display: block; color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; margin-top: 8px; white-space: normal; }
.lg2-rbbox .lg2-rb-go { justify-content: flex-end; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); } .lg2-rbbox .lg2-rb-go input[type=password] { flex: 1; width: auto; }

/* ===== HQ login — the company's front door, same palette as the sidebar ===== */
html[data-hq] .login-page { background: radial-gradient(120% 90% at 15% 0%, #3a3f46 0%, #2b2f35 48%, #1f2327 100%); }
html[data-hq][data-theme="dark"] .login-page { background: radial-gradient(120% 90% at 15% 0%, #33383f 0%, #262a30 48%, #1a1d21 100%); }
html[data-hq] .lg-blob.b1 { background: #2aa190; opacity: .35; }
html[data-hq] .lg-blob.b2 { background: #c99a2e; opacity: .22; }
html[data-hq] .lg-blob.b3 { background: #7ee0c9; opacity: .22; }
html[data-hq] .lg-waves { stroke: #c99a2e; opacity: .14; }
html[data-hq] .login-page .lg-card { background: #ffffff; border: 1px solid rgba(201, 154, 46, .55); border-top: 4px solid var(--hq-gold);
    box-shadow: 0 34px 70px rgba(5, 18, 32, .45), 0 2px 8px rgba(5, 18, 32, .25); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-hq][data-theme="dark"] .login-page .lg-card { background: #202429; border-color: rgba(201, 154, 46, .45); }
html[data-hq] .lg-head h1 { color: var(--hq-deep); letter-spacing: -.01em; }
html[data-hq][data-theme="dark"] .lg-head h1 { color: #f3faf7; }
html[data-hq] .lg-head .muted { color: #5b6f85; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
html[data-hq] .lg-ring { border-color: rgba(201, 154, 46, .6); }
html[data-hq] .login-page .btn.primary { background: linear-gradient(180deg, #3a3f46, #2b2f35); border-color: #2b2f35; color: #ffe9b3; }
html[data-hq] .login-page .btn.primary:hover { background: linear-gradient(180deg, #4a5058, #3a3f46); }
html[data-hq] .login-page .lg-links a { color: var(--hq-deep); }
html[data-hq][data-theme="dark"] .login-page .lg-links a { color: #ffe9b3; }
html[data-hq] .lg-hq-foot { position: relative; z-index: 1; margin-top: 18px; color: rgba(243, 250, 247, .7); font-size: 12px; text-align: center; }

/* sandbox bars: one per lung, unmistakable at the HQ */
.pn-sandbox-bar.sb-stripe { background: repeating-linear-gradient(135deg, #e9d5ff 0 14px, #d8b4fe 14px 28px); color: #3b0764; border-bottom: 2px solid #7e22ce; }
html[data-hq] .pn-sandbox-bar { position: sticky; top: 56px; font-size: 15px; font-weight: 800; letter-spacing: .02em; padding: 12px 16px; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
/* ≤ 900 px: the sandbox ribbon sits under the compact bar (see "HQ mobile shell") */
html[data-hq] .pn-sandbox-bar span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: 10px; animation: hq-sb-blink 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes hq-sb-blink { 50% { opacity: .25; } }
html[data-hq] .hqsb-sandbox { display: block; width: auto; margin: 2px 6px 6px; text-align: center; animation: hq-sb-blink 2.4s ease-in-out infinite; }
html[data-hq] .hqsb-sandbox + .hqsb-sandbox { margin-top: 0; }

/* Stripe master switch card (HQ) */
.st-switch { border-left: 6px solid #9ca3af; } .st-switch.on { border-left-color: #16a34a; } .st-switch.off { border-left-color: #9ca3af; }
.st-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .st-switch-row h2 { margin: 0 0 4px; } .st-switch-row .muted { margin: 0; }
.st-switch-row form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===== HQ — Management Analyst ===== */
.hq-dir-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 6px; }
.hq-dir-list { list-style: none; margin: 0; padding: 0; } .hq-dir-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.hq-dir-list li span { font-weight: 600; } .hq-dir-list li b { font-variant-numeric: tabular-nums; } .hq-dir-list li small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 11.5px; }
.hq-dir-lights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.hq-dir-lights li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: 13.5px; line-height: 1.45; }
.hq-dir-lights li.bad { background: #fff1f1; } .hq-dir-lights li.warn { background: #fff8e6; } .hq-dir-lights li i { font-style: normal; flex: 0 0 auto; }
[data-theme="dark"] .hq-dir-lights li.bad { background: #3a1a1a; } [data-theme="dark"] .hq-dir-lights li.warn { background: #3a2f10; }
.hq-dir-text { white-space: normal; line-height: 1.6; font-size: 14.5px; padding: 14px 16px; border-radius: 12px; background: var(--paper); border-left: 4px solid var(--hq-gold, #c99a2e); }
.hq-dir-fallback ul { margin: 8px 0 0; padding-left: 18px; } .hq-dir-fallback b { display: block; margin-bottom: 4px; }
.hq-dir-brief { border-top: 3px solid var(--hq-gold, #c99a2e); }

/* ===== HQ — bell, reconciliation, disputes, expiries, register, topbar chips ===== */
.hq-al-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .hq-al-head h2 { margin: 0; }
.hq-al-list { list-style: none; margin: 10px 0 0; padding: 0; }
.hq-al-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; background: var(--paper); border-left: 4px solid #d1a640; }
.hq-al-list li.lv-bad { border-left-color: #c0392b; background: #fff3f2; } .hq-al-list li.lv-info { border-left-color: #2b7cc0; background: #f0f6fc; }
.hq-al-list li.read { opacity: .62; border-left-color: #c9d2d9; background: var(--paper); }
.hq-al-list li i { font-style: normal; } .hq-al-list li p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
[data-theme="dark"] .hq-al-list li.lv-bad { background: #3a1a1a; } [data-theme="dark"] .hq-al-list li.lv-info { background: #152538; }
html[data-hq] .hqsb-bell { margin: 4px 0 6px; border: 1px solid rgba(201, 154, 46, .35); }
.hq-rc-matched { margin-top: 12px; } .hq-rc-matched summary { cursor: pointer; font-weight: 600; }
.hq-dir-door { text-decoration: none; font-weight: 700; margin-left: 6px; }
.hq-dir-refresh { margin-left: 8px; vertical-align: middle; }
.hq-rg-list { margin: 0; padding-left: 18px; line-height: 1.6; }
.hqtb-today .hqtb-test, .hqtb-today .hqtb-sepa { display: inline-block; margin-left: 8px; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; }
.hqtb-today .hqtb-test { background: #f4b942; color: #3a2f0a; } .hqtb-today .hqtb-sepa { background: #e9d5ff; color: #3b0764; }
.pcu-note textarea { width: 100%; min-height: 70px; border-radius: 10px; }
@media print { html[data-hq] .hqsb, html[data-hq] .hqtb, .pn-footer, .hq-toast { display: none !important; } html[data-hq] body.pn-page { padding-left: 0; } }
.hq-register .voucher-table td { vertical-align: top; }

/* ================= HQ DESIGN v3 — the boardroom =================
 * One continuous dark frame (sidebar + topbar), a single gold hairline as
 * the house signature, ledger paper underneath, tabular digits everywhere,
 * no playful gradients on the light side. Scoped to html[data-hq]: the
 * product panels do not change by one pixel. */
html[data-hq] {
    --ink: #101a26; --ink-soft: #5b6b7c;
    --paper: #eef1f5; --card: #ffffff; --line: #d6dde6;
    --signal: #17324e; --signal-ink: #17324e;
    --hq-gold: #c99a2e; --hq-gold-2: #e2bd63; --hq-deep: #2b2f35; --hq-deep2: #3a3f46;   /* graphite frame (navy felt too dark) */
    --hq-ink-2: #2a3a4d; --hq-line-2: #c9d3de; --hq-ok: #1f7a4d; --hq-warn: #b26a00; --hq-bad: #a32626;
}
html[data-hq] body {
    background: var(--paper) linear-gradient(0deg, rgba(20, 41, 63, .025) 1px, transparent 1px);
    background-size: 100% 28px;   /* ledger ruling, barely there */
    font-feature-settings: "tnum", "ss01";
    font-family: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
/* — the frame — */
html[data-hq] .hqsb { background: linear-gradient(180deg, var(--hq-deep) 0%, #24282d 100%); border-right: 1px solid rgba(201, 154, 46, .35); padding-top: 18px; }
html[data-hq] .hqsb-brand i { color: var(--hq-gold-2); }
html[data-hq] .hqsb-sec { margin: 18px 8px 6px; font-size: 10px; letter-spacing: 1.6px; color: rgba(226, 189, 99, .8); }
html[data-hq] .hqsb-it { color: #c3d2e3; font-size: 13px; padding: 7px 10px; border-radius: 6px; border-left-width: 3px; }
html[data-hq] .hqsb-it:hover { background: rgba(255, 255, 255, .05); }
html[data-hq] .hqsb-it.on { background: rgba(201, 154, 46, .16); color: #ffffff; }
html[data-hq] .hqsb-foot { border-top: 1px solid rgba(255, 255, 255, .1); }
html[data-hq] .hqsb-foot::before { content: 'Codemerry HQ · ' attr(data-tag); display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(195, 210, 227, .45); padding: 6px 10px 4px; }
html[data-hq] .hqtb {
    background: var(--hq-deep); color: #e7eef7; height: 56px;
    border-bottom: 2px solid var(--hq-gold); box-shadow: 0 4px 18px rgba(10, 24, 40, .25);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-hq] .hqtb-search input { background: rgba(255, 255, 255, .09); color: #ffffff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: 8px 14px; }
html[data-hq] .hqtb-search input::placeholder { color: rgba(231, 238, 247, .55); }
html[data-hq] .hqtb-search input:focus { border-color: var(--hq-gold); box-shadow: 0 0 0 3px rgba(201, 154, 46, .22); background: rgba(255, 255, 255, .12); }
html[data-hq] .hqtb-today span { color: rgba(231, 238, 247, .6); }
html[data-hq] .hqtb-today b { color: var(--hq-gold-2); font-size: 18px; font-weight: 800; }
html[data-hq] .hqtb-today b.neg { color: #ff9c8f; }
html[data-hq] .hqtb-today .hqtb-test { background: rgba(244, 185, 66, .22); color: #ffe1a3; border: 1px solid rgba(244, 185, 66, .5); }
html[data-hq] .hqtb-today .hqtb-sepa { background: rgba(216, 180, 254, .18); color: #e9d5ff; border: 1px solid rgba(216, 180, 254, .45); }
/* — paper: panels, headings, rules — */
html[data-hq] .pn-main { padding-top: 26px; padding-left: 28px; padding-right: 28px; }
html[data-hq] .panel, html[data-hq] .hq-rev-card, html[data-hq] .pcu-stats, html[data-hq] .pn-card {
    border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 26, 38, .05), 0 6px 20px rgba(16, 26, 38, .04);
}
html[data-hq] .panel > h2:first-child::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background: var(--hq-gold); }
html[data-hq] h1 { letter-spacing: -.02em; font-weight: 800; }
html[data-hq] .hm-sub { color: var(--hq-deep); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; border-bottom-color: var(--line); }
html[data-hq] .muted { color: var(--ink-soft); }
html[data-hq] a { color: var(--hq-deep); }
html[data-hq] a:hover { color: #1f2327; }
/* — heroes: the dark stage, one gold rule — */
html[data-hq] .pn-hero h1::before { content: 'CODEMERRY HQ'; display: block; font-size: 10px; letter-spacing: 1.8px; color: var(--hq-gold-2); font-weight: 700; margin-bottom: 6px; }
html[data-hq] .pn-kpi { border-radius: 8px; }
/* — KPIs on paper — */
html[data-hq] .bk-kpis > div, html[data-hq] .lg-stat, html[data-hq] .pcu-stat { border-radius: 8px; border-left-width: 3px; }
html[data-hq] .bk-kpis b { font-size: 21px; font-weight: 800; color: var(--hq-deep); letter-spacing: -.01em; }
html[data-hq] .bk-kpis small { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--ink-soft); }
html[data-hq] .bk-kpis em { font-style: normal; color: var(--ink-soft); }
/* — tables: dense, ruled, sortable feel — */
html[data-hq] .voucher-table, html[data-hq] table.cards { border-collapse: separate; border-spacing: 0; font-size: 13px; }
html[data-hq] .voucher-table thead th, html[data-hq] table.cards thead th { background: #24282d; color: #cfdbea; font-size: 10.5px; letter-spacing: .9px; padding: 9px 10px; border-bottom: 2px solid var(--hq-gold); }
html[data-hq] .voucher-table td, html[data-hq] table.cards td { padding: 8px 10px; border-bottom: 1px solid #e6ebf1; }
html[data-hq] tbody tr:nth-child(even) { background: #f7f9fb; }
html[data-hq] tbody tr:hover { background: #eef3f9; }
html[data-hq] code, html[data-hq] .tk-code, html[data-hq] .od-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
/* — controls — */
html[data-hq] .btn.primary { background: linear-gradient(180deg, var(--hq-deep2), var(--hq-deep)); border-color: var(--hq-deep); color: #ffe9b3; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
html[data-hq] .btn.primary:hover { background: linear-gradient(180deg, #4a5058, var(--hq-deep2)); color: #fff2cf; }
html[data-hq] .btn.danger, html[data-hq] .btn.danger-outline:hover { background: #8f1d1d; border-color: #8f1d1d; color: #fff; }
html[data-hq] .btn.danger-outline { border-color: #b23b3b; color: #8f1d1d; }
html[data-hq] .badge { border-radius: 5px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; }
html[data-hq] .badge.ok, html[data-hq] .badge.active { background: #e3f3e8; color: #1c6b3c; } html[data-hq] .badge.used { background: #fff1d6; color: #7a4d06; } html[data-hq] .badge.gone { background: #fde5e3; color: #8f1d1d; }
html[data-hq] .alert { border-radius: 8px; border-left: 4px solid var(--hq-gold); }
html[data-hq] .alert.err { border-left-color: #8f1d1d; } html[data-hq] .alert.ok { border-left-color: #1c6b3c; }
html[data-hq] .gp-inline input { border-radius: 6px; }
html[data-hq] label { font-weight: 600; font-size: 12.5px; color: var(--ink); }
html[data-hq] input, html[data-hq] select, html[data-hq] textarea { border-radius: 7px; background: #fff; }
/* — order rows and toasts — */
html[data-hq] .od-row { border-radius: 8px; }
html[data-hq] .hq-toast { border-radius: 8px; }
/* — footer — */
html[data-hq] .pn-footer, html[data-hq] footer { color: var(--ink-soft); font-size: 11.5px; letter-spacing: .02em; }

/* ===== HQ v3.1 — controls on a grid: every button the same height, every
 * inline form on the same baseline, every action cell one calm row ===== */
html[data-hq] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 14px; line-height: 1; vertical-align: middle; white-space: nowrap; border-radius: 7px; font-weight: 600; letter-spacing: .01em;  vertical-align: middle; box-sizing: border-box; white-space: nowrap; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
html[data-hq] .btn.sm { height: 32px; min-height: 32px; padding: 0 11px; font-size: 12.5px; }   /* 32 px floor (sweep 17/9) */
html[data-hq] .btn.lg { height: 44px; min-height: 44px; padding: 0 20px; font-size: 15px; }
html[data-hq] form.inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin: 0; }
html[data-hq] form.inline + form.inline, html[data-hq] form.inline + .btn, html[data-hq] .btn + form.inline { margin-left: 6px; }
html[data-hq] .gp-inline { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
html[data-hq] .gp-inline input { margin: 0; min-height: 30px; padding: 0 8px; width: 150px; font-size: 12.5px; }
html[data-hq] .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
html[data-hq] .btn-row .muted { margin-left: 4px; }
html[data-hq] .hq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html[data-hq] .hq-actions form.inline { margin: 0; }
html[data-hq] .hq-actions select { min-height: 30px; padding: 0 8px; margin: 0; font-size: 12.5px; }
html[data-hq] td .btn, html[data-hq] td form.inline { vertical-align: middle; }
html[data-hq] .panel > h2:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; letter-spacing: .01em; color: var(--hq-deep); border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: 8px; position: relative; }
html[data-hq] .panel > h2:first-child .btn { margin-left: auto; }
html[data-hq] .panel > h2:first-child .badge, html[data-hq] .panel > h2:first-child small { margin-left: 4px; }
html[data-hq] .hq-al-head form.inline, html[data-hq] .st-switch-row form { margin: 0; }
html[data-hq] .lg2-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
html[data-hq] .lg2-filters label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
html[data-hq] .lg2-filters .btn { align-self: flex-end; }
html[data-hq] .check-label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
html[data-hq] .lg2-rbform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-hq] .lg2-rbform input[type="number"], html[data-hq] .lg2-rbform input[type="password"], html[data-hq] .lg2-rbform .lg2-extref { margin: 0; min-height: 30px; }
html[data-hq] .lg2-rbform .lg2-ext { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
html[data-hq] .pe-status { align-self: center; }
html[data-hq] input[type="date"], html[data-hq] select { min-height: 36px; }
html[data-hq] .hq-dir-lights li span { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* translation preview box (desk) and customer-side translate button */
.tk-trbox { display: block; margin: 8px 0; } .tk-trbox textarea { width: 100%; margin-top: 4px; border-left: 3px solid var(--hq-gold, #c99a2e); } .tk-trbox small { display: block; margin-top: 4px; }
.tk-ai-hint { font-size: 12.5px; margin: 6px 0 0; } .pr-tr { margin-top: 6px; } .pr-orig { margin-top: 6px; font-size: 13px; }

/* ================= HQ DESIGN v4 — the signature =================
 * Own glyphs instead of emoji in the frame, a monogram, an environment pill,
 * the operator's chip, a strict type scale, quieter heroes, honest dark mode,
 * empty states that look designed. Scoped to html[data-hq] as always. */
/* — type scale — */
html[data-hq] h1 { font-size: 22px; line-height: 1.2; }
html[data-hq] h2 { font-size: 15px; line-height: 1.3; }
html[data-hq] h3 { font-size: 13.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--hq-ink-2); }
html[data-hq] p, html[data-hq] li, html[data-hq] td, html[data-hq] label { font-size: 13.5px; line-height: 1.5; }
html[data-hq] small, html[data-hq] .muted { font-size: 12.5px; }
/* — glyphs — */
html[data-hq] .hqi { width: 17px; height: 17px; display: block; }
html[data-hq] .hqsb-it i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 10px; color: rgba(195, 210, 227, .75); font-style: normal; }
html[data-hq] .hqsb-it.on i, html[data-hq] .hqsb-it:hover i { color: var(--hq-gold-2); }
/* — brand tile — */
html[data-hq] .hqsb-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 8px; }
html[data-hq] .hqsb-mono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(160deg, var(--hq-gold-2), var(--hq-gold)); color: #1a1205; font-weight: 900; font-size: 17px; letter-spacing: -.02em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 2px 8px rgba(201, 154, 46, .35); }
html[data-hq] .hqsb-word { display: flex; flex-direction: column; line-height: 1.05; }
html[data-hq] .hqsb-word b { color: #fff; font-size: 15px; letter-spacing: .01em; }
html[data-hq] .hqsb-word i { font-style: normal; color: var(--hq-gold-2); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; margin-top: 3px; }
html[data-hq] .hqsb-brand .brand-mark, html[data-hq] .hqsb-brand img { display: none; }
/* — topbar: environment + operator — */
html[data-hq] .hqtb-env { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: #e7eef7; margin-left: 12px; }
html[data-hq] .hqtb-env i { width: 7px; height: 7px; border-radius: 50%; background: #58d68d; box-shadow: 0 0 0 3px rgba(88, 214, 141, .18); }
html[data-hq] .hqtb-env.test { border-color: rgba(244, 185, 66, .6); color: #ffe1a3; } html[data-hq] .hqtb-env.test i { background: #f4b942; box-shadow: 0 0 0 3px rgba(244, 185, 66, .22); animation: hq-sb-blink 1.6s ease-in-out infinite; }
html[data-hq] .hqtb-op { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; text-decoration: none; color: #e7eef7; }
html[data-hq] .hqtb-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(160deg, var(--hq-deep2), #1f2327); border: 1px solid rgba(201, 154, 46, .6); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--hq-gold-2); }
html[data-hq] .hqtb-opn { font-size: 12.5px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-hq] .hqtb-search { max-width: 380px; }
/* — heroes: flat, disciplined — */
html[data-hq] .pn-hero { background: var(--hq-deep) !important; border: 1px solid rgba(255, 255, 255, .06); border-left: 4px solid var(--hq-gold); border-radius: 12px; box-shadow: 0 6px 22px rgba(10, 24, 40, .18); padding: 22px 24px; }
html[data-hq] .pn-hero h1 { font-size: 21px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html[data-hq] .pn-hero p { font-size: 13px; color: #a9bcd4; max-width: 70ch; }
html[data-hq] .pe-status { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 10px 14px; }
html[data-hq] .pe-status b { color: #f4f8fd; } html[data-hq] .pe-status small { color: #a9bcd4; }
html[data-hq] .pe-status.ok .pe-dot { background: #58d68d; } html[data-hq] .pe-status.warn .pe-dot { background: #f4b942; }
/* — panels: rhythm — */
html[data-hq] .panel { padding: 20px 22px; margin-bottom: 16px; }
html[data-hq] .panel .muted:first-of-type { margin-top: -2px; }
/* — tables: numbers to the right, codes in mono, first column strong — */
html[data-hq] .voucher-table th:first-child, html[data-hq] table.cards th:first-child { padding-left: 12px; }
html[data-hq] .voucher-table td code, html[data-hq] table.cards td code { background: #f0f3f7; padding: 2px 6px; border-radius: 5px; color: var(--hq-deep); }
html[data-hq] .voucher-table tbody tr:last-child td { border-bottom: 0; }
/* — badges: a system, not a palette — */
html[data-hq] .badge.ok, html[data-hq] .badge.active { background: #e4f4ea; color: var(--hq-ok); } html[data-hq] .badge.used { background: #fdf1dc; color: var(--hq-warn); } html[data-hq] .badge.gone { background: #fbe4e4; color: var(--hq-bad); }
/* — empty states — */
html[data-hq] .panel > h2:first-child + p.muted:last-child { padding: 14px; border: 1px dashed var(--hq-line-2); border-radius: 8px; text-align: center; margin-top: 10px; }
/* — dark mode: the same frame, honest surfaces — */
html[data-hq][data-theme="dark"] { --paper: #141618; --card: #202429; --line: #2f343a; --ink: #e6edf5; --ink-soft: #94a6ba; --hq-ink-2: #c8d4e2; --hq-line-2: #3a4048; }
html[data-hq][data-theme="dark"] body { background: var(--paper) linear-gradient(0deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 100% 28px; }
html[data-hq][data-theme="dark"] tbody tr:nth-child(even) { background: #1a1d21; } html[data-hq][data-theme="dark"] tbody tr:hover { background: #2a2f35; }
html[data-hq][data-theme="dark"] .voucher-table td, html[data-hq][data-theme="dark"] table.cards td { border-bottom-color: #2f343a; }
html[data-hq][data-theme="dark"] .voucher-table td code, html[data-hq][data-theme="dark"] table.cards td code { background: #1a1d21; color: #ffe1a3; }
html[data-hq][data-theme="dark"] .bk-kpis b, html[data-hq][data-theme="dark"] .lg-stat b { color: #ffe1a3; }
html[data-hq][data-theme="dark"] .panel > h2:first-child, html[data-hq][data-theme="dark"] .hm-sub, html[data-hq][data-theme="dark"] a { color: #f3f7fb; }
html[data-hq][data-theme="dark"] input, html[data-hq][data-theme="dark"] select, html[data-hq][data-theme="dark"] textarea { background: #1a1d21; color: var(--ink); border-color: var(--line); }
html[data-hq][data-theme="dark"] .hq-al-list li { background: #202429; } html[data-hq][data-theme="dark"] .hq-dir-lights li { background: #202429; } html[data-hq][data-theme="dark"] .hq-dir-text { background: #202429; }
html[data-hq][data-theme="dark"] .badge.ok, html[data-hq][data-theme="dark"] .badge.active { background: #16351f; color: #8fd6a8; } html[data-hq][data-theme="dark"] .badge.used { background: #3a2c10; color: #ffd987; } html[data-hq][data-theme="dark"] .badge.gone { background: #3a1a1a; color: #ff9c8f; }
html[data-hq][data-theme="dark"] .hqtb-search input { background: rgba(255, 255, 255, .06); }
/* hero glyph tile (seat): the emoji sits in a disciplined tile instead of floating in the title */
html[data-hq] .pn-hero-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 154, 46, .5); font-size: 20px; line-height: 1; flex: 0 0 auto; }
html[data-hq] .pn-hero h1::before { flex-basis: 100%; }

/* ================= HQ DESIGN v5 — the steel frame =================
 * A cool steel gray (#4a5568 → #3f4a5c): the tone serious management
 * panels wear — dark enough to stand off the white cards, never a night
 * theme, light type at 7:1, gold as the single accent. The topbar sits one
 * shade lighter than the sidebar for depth. Inner pages untouched. Last
 * block: wins over v3/v4. The user's dark theme keeps graphite by choice. */
html[data-hq]:not([data-theme="dark"]) { --hq-frame: #4a5568; --hq-frame-2: #3f4a5c; --hq-frame-3: #556272; --hq-frame-ink: #f3f5f8; --hq-frame-soft: #c5ccd6; --hq-gold-ink: #8a6a17; --hq-frame-line: rgba(255, 255, 255, .12); }
/* — sidebar — */
html[data-hq]:not([data-theme="dark"]) .hqsb { background: linear-gradient(180deg, var(--hq-frame) 0%, var(--hq-frame-2) 100%); border-right: 1px solid rgba(201, 154, 46, .32); }
html[data-hq]:not([data-theme="dark"]) .hqsb-word b { color: #fff; } html[data-hq]:not([data-theme="dark"]) .hqsb-word i { color: var(--hq-gold-2); }
html[data-hq]:not([data-theme="dark"]) .hqsb-brand { border-bottom-color: var(--hq-frame-line); }
html[data-hq]:not([data-theme="dark"]) .hqsb-sec { color: rgba(226, 189, 99, .92); }
html[data-hq]:not([data-theme="dark"]) .hqsb-it { color: #e8ecf1; }
html[data-hq]:not([data-theme="dark"]) .hqsb-it i { color: rgba(232, 236, 241, .68); }
html[data-hq]:not([data-theme="dark"]) .hqsb-it:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-hq]:not([data-theme="dark"]) .hqsb-it.on { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: var(--hq-gold-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-hq]:not([data-theme="dark"]) .hqsb-it.on i, html[data-hq]:not([data-theme="dark"]) .hqsb-it:hover i { color: var(--hq-gold-2); }
html[data-hq]:not([data-theme="dark"]) .hqsb-foot { border-top-color: var(--hq-frame-line); }
html[data-hq]:not([data-theme="dark"]) .hqsb-foot::before { color: rgba(232, 236, 241, .5); }
html[data-hq]:not([data-theme="dark"]) .hqsb-bell { border-color: rgba(201, 154, 46, .45); }
html[data-hq]:not([data-theme="dark"]) .hqsb-b { background: var(--hq-gold); color: #241b04; }
html[data-hq]:not([data-theme="dark"]) .hqsb-sandbox { background: #f4b942; color: #3a2f0a; }
/* — topbar: one shade lighter, gold hairline — */
html[data-hq]:not([data-theme="dark"]) .hqtb { background: var(--hq-frame-3); color: var(--hq-frame-ink); border-bottom: 2px solid var(--hq-gold); box-shadow: 0 4px 14px rgba(31, 41, 55, .22); }
html[data-hq]:not([data-theme="dark"]) .hqtb-search input { background: rgba(255, 255, 255, .13); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
html[data-hq]:not([data-theme="dark"]) .hqtb-search input::placeholder { color: rgba(243, 245, 248, .62); }
html[data-hq]:not([data-theme="dark"]) .hqtb-search input:focus { border-color: var(--hq-gold-2); box-shadow: 0 0 0 3px rgba(201, 154, 46, .25); background: rgba(255, 255, 255, .18); }
html[data-hq]:not([data-theme="dark"]) .hqtb-today span { color: var(--hq-frame-soft); }
html[data-hq]:not([data-theme="dark"]) .hqtb-today b { color: var(--hq-gold-2); }
html[data-hq]:not([data-theme="dark"]) .hqtb-today b.neg { color: #ffb4a8; }
html[data-hq]:not([data-theme="dark"]) .hqtb-today .hqtb-test { background: rgba(244, 185, 66, .22); color: #ffe1a3; border-color: rgba(244, 185, 66, .5); }
html[data-hq]:not([data-theme="dark"]) .hqtb-today .hqtb-sepa { background: rgba(216, 180, 254, .2); color: #efe4ff; border-color: rgba(216, 180, 254, .45); }
html[data-hq]:not([data-theme="dark"]) .hqtb-env { color: #fff; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .07); }
html[data-hq]:not([data-theme="dark"]) .hqtb-env.test { color: #ffe1a3; border-color: rgba(244, 185, 66, .6); background: rgba(244, 185, 66, .14); }
html[data-hq]:not([data-theme="dark"]) .hqtb-op { color: #fff; }
html[data-hq]:not([data-theme="dark"]) .hqtb-av { background: var(--hq-frame-2); border-color: var(--hq-gold); color: var(--hq-gold-2); }
/* — heroes: the frame's steel inside the page — */
html[data-hq]:not([data-theme="dark"]) .pn-hero { background: var(--hq-frame) !important; border: 1px solid rgba(255, 255, 255, .06); border-left: 4px solid var(--hq-gold); box-shadow: 0 6px 20px rgba(31, 41, 55, .18); }
html[data-hq]:not([data-theme="dark"]) .pn-hero h1 { color: #fff; }
html[data-hq]:not([data-theme="dark"]) .pn-hero h1::before { color: var(--hq-gold-2); }
html[data-hq]:not([data-theme="dark"]) .pn-hero p, html[data-hq]:not([data-theme="dark"]) .pn-hero .pn-hero-text p { color: var(--hq-frame-soft); }
html[data-hq]:not([data-theme="dark"]) .pn-hero-ico { background: rgba(255, 255, 255, .09); border-color: var(--hq-gold); }
html[data-hq]:not([data-theme="dark"]) .pe-status { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); }
html[data-hq]:not([data-theme="dark"]) .pe-status b { color: #fff; } html[data-hq]:not([data-theme="dark"]) .pe-status small { color: var(--hq-frame-soft); }
html[data-hq]:not([data-theme="dark"]) .pe-status.ok .pe-dot { background: #6ee7a0; } html[data-hq]:not([data-theme="dark"]) .pe-status.warn .pe-dot { background: #f4b942; }
html[data-hq]:not([data-theme="dark"]) .pn-kpi { background: rgba(255, 255, 255, .08); border: 1px solid rgba(201, 154, 46, .3); }
html[data-hq]:not([data-theme="dark"]) .pn-kpi b { color: #fff; } html[data-hq]:not([data-theme="dark"]) .pn-kpi span { color: var(--hq-frame-soft); }
html[data-hq]:not([data-theme="dark"]) .pn-kpi.warn { background: rgba(244, 185, 66, .14); border-color: var(--hq-gold); } html[data-hq]:not([data-theme="dark"]) .pn-kpi.warn b { color: #ffd987; }
html[data-hq]:not([data-theme="dark"]) .pn-kpi.ok b { color: #9be6b5; }
html[data-hq]:not([data-theme="dark"]) .pn-kpi:hover { background: rgba(255, 255, 255, .12); }
/* — table heads and section heads — */
html[data-hq]:not([data-theme="dark"]) .voucher-table thead th, html[data-hq]:not([data-theme="dark"]) table.cards thead th { background: var(--hq-frame-3); color: #f3f5f8; border-bottom: 2px solid var(--hq-gold); }
html[data-hq]:not([data-theme="dark"]) .bk-man-head, html[data-hq]:not([data-theme="dark"]) .mtp-mail-head, html[data-hq]:not([data-theme="dark"]) .mtp-pv-head, html[data-hq]:not([data-theme="dark"]) .qt-composer-head { background: var(--hq-frame); color: #f3f5f8; }
html[data-hq]:not([data-theme="dark"]) .bk-man-head b, html[data-hq]:not([data-theme="dark"]) .mtp-mail-head b, html[data-hq]:not([data-theme="dark"]) .qt-composer-head b { color: #fff; }
/* — primary buttons wear the frame — */
html[data-hq]:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, var(--hq-frame-3), var(--hq-frame)); border-color: var(--hq-frame-2); color: #ffe9b3; }
html[data-hq]:not([data-theme="dark"]) .btn.primary:hover { background: linear-gradient(180deg, #607084, var(--hq-frame-3)); color: #fff2cf; }
/* — login: steel stage — */
html[data-hq]:not([data-theme="dark"]) .login-page { background: radial-gradient(120% 90% at 15% 0%, #5b6a7e 0%, #4a5568 50%, #3a4453 100%); }
html[data-hq]:not([data-theme="dark"]) .lg-blob.b1 { background: #2aa190; opacity: .24; } html[data-hq]:not([data-theme="dark"]) .lg-blob.b2 { background: #c99a2e; opacity: .2; } html[data-hq]:not([data-theme="dark"]) .lg-blob.b3 { background: #7ee0c9; opacity: .16; }
html[data-hq]:not([data-theme="dark"]) .lg-waves { stroke: #c99a2e; opacity: .16; }
html[data-hq]:not([data-theme="dark"]) .login-page .lg-card { box-shadow: 0 28px 64px rgba(20, 26, 34, .38), 0 2px 8px rgba(20, 26, 34, .2); }
html[data-hq]:not([data-theme="dark"]) .login-page .btn.primary { background: linear-gradient(180deg, var(--hq-frame-3), var(--hq-frame-2)); border-color: var(--hq-frame-2); }
html[data-hq]:not([data-theme="dark"]) .lg-hq-foot { color: rgba(243, 245, 248, .78); }
/* — mobile sidebar row — */
html[data-hq] .hqsb-php { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .75); }
html[data-hq] .hq-log tr.bad td { background: #fdf0ef; } html[data-hq] .hq-log tr.warn code { color: var(--hq-gold-ink, #8a6a17); }
html[data-hq][data-theme="dark"] .hq-log tr.bad td { background: #3a1a1a; }
.pe-hqown { border-left: 4px solid #9ca3af; } .pe-hqown.on { border-left-color: #16a34a; } .pe-hqown form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.pe-profiles { margin-bottom: 6px; } .pe-profiles .tab .prod-mark { width: 16px; height: 13px; vertical-align: -2px; }
.pp-guard.open { border-color: #9ad4ae; background: #f3fbf6; }
.pp-guard-step1 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .pp-guard-step1 .pp-guard-pass { flex: 1 1 260px; margin: 0; } .pp-guard-step1 .pp-guard-pass input { margin: 0; }
.pp-guard-step2 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .pp-guard-step2 label { flex: 0 1 220px; margin: 0; } .pp-guard-step2 label input { margin: 0; letter-spacing: .2em; font-size: 16px; }
.pp-guard-ok { flex: 1 1 100%; color: #1c6b3c; font-weight: 700; font-size: 13.5px; }
/* AI page */
.ai-usage { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 120px; margin: 8px 0 4px; }
.ai-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ai-bar i { display: block; width: 100%; max-width: 46px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--signal), #7aa7dd); }
.ai-bar b { font-size: 13px; } .ai-bar span { font-size: 11px; color: var(--ink-soft); }
.ai-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.ai-feat-row { display: grid; grid-template-columns: auto 34px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.ai-feat-row.on { border-color: rgba(31, 122, 77, .4); } .ai-feat-row:hover { box-shadow: 0 4px 14px rgba(16, 26, 38, .07); }
.ai-feat-row { position: relative; }
.ai-feat-ico { font-size: 22px; line-height: 1; padding-top: 2px; } .ai-feat-body { display: flex; flex-direction: column; gap: 3px; position: relative; } .ai-feat-body small { color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.ai-feat-link { position: absolute; right: 0; top: 0; font-weight: 700; text-decoration: none; }
.ai-privacy { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); background: #f8fafc; }
.ai-demo { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .ai-demo label { flex: 1 1 320px; margin: 0; } .ai-demo label input { margin: 0; }
.ai-demo-out { flex: 1 1 100%; display: block; padding: 10px 12px; border-radius: 8px; background: #f0f3f7; font-size: 12.5px; white-space: pre-wrap; }
html[data-hq][data-theme="dark"] .ai-privacy { background: #1a1d21; } html[data-hq][data-theme="dark"] .ai-demo-out { background: #1a1d21; }
html[data-hq] .panel > h2::before { display: none; }   /* the seat signs its titles with the gold rule, not the product's blue pill */
.pe-testgrp { display: inline-flex; align-items: stretch; gap: 0; } .pe-testgrp input { margin: 0; min-width: 280px; border-radius: 10px 0 0 10px; border-right: 0; } .pe-testgrp .btn { border-radius: 0 10px 10px 0; }
/* the bell: an unread GRAVE alert = a red pulse nobody can miss; read or warn-only = the plain count */
html[data-hq] .hqsb-bell { position: relative; }
html[data-hq] .hqsb-bell.urgent::after { content: '!'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: #e0353b; color: #fff; font-weight: 900; font-size: 12px; line-height: 18px; text-align: center; box-shadow: 0 0 0 0 rgba(224,53,59,.55); animation: hq-urgent 1.4s ease-out infinite; }
html[data-hq] .hqsb-bell.urgent .hqsb-b { margin-right: 26px; }
@keyframes hq-urgent { 0% { box-shadow: 0 0 0 0 rgba(224,53,59,.55); } 70% { box-shadow: 0 0 0 9px rgba(224,53,59,0); } 100% { box-shadow: 0 0 0 0 rgba(224,53,59,0); } }
@media (prefers-reduced-motion: reduce) { html[data-hq] .hqsb-bell.urgent::after { animation: none; } }
/* alerts board: family tabs and row tools */
.hq-al-fam { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .hq-al-fam a { text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: inherit; } .hq-al-fam a.on { background: #2b2f35; color: #fff; border-color: transparent; } .hq-al-fam a i { font-style: normal; opacity: .7; margin-left: 4px; }
.hq-al-list li .hq-al-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hq-al-list li b[title] { cursor: help; } .hq-al-list li .hq-al-link { font-size: 12.5px; }
.hq-al-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.hq-al-sel .check-label { margin: 0; } .hq-al-selcount { font-size: 12.5px; margin-right: auto; }
.hq-al-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; } .hq-al-pick input { margin: 0; width: 16px; height: 16px; }
.pn-sale { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px 10px; margin: 6px 0 10px; } .pn-sale legend { font-weight: 700; padding: 0 6px; }
.pn-mode { margin: 0 0 14px; } .pn-drawer .mode-option small { font-weight: 400; }
/* the product mark inline: a default size everywhere (the raw SVG is 120×96 and blew up every chip that carried it) */
.prod-mark { width: 18px; height: 14px; vertical-align: -2px; border-radius: 3px; }
.qt-chip .prod-mark { margin-right: 4px; }
/* offer form: labels in one row, inputs aligned at the bottom, an "i" per field */
.of-grid { align-items: end; } .of-grid label { display: flex; flex-direction: column; gap: 4px; margin: 0; } .of-grid .of-lb { display: flex; align-items: center; gap: 6px; min-height: 2.6em; line-height: 1.25; }
/* D-M870: the offer's product selector (tickets_admin.php) */
.of-prod select { width: 100%; max-width: 280px; }
/* D-M870: the price-mode card at the top of a product's price list (platform_sales.php) */
.pm-card { margin: 0 0 18px; padding: 16px 18px; display: grid; gap: 12px; }
.of-help { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--signal); color: #fff; font: 700 11px/1 ui-sans-serif, system-ui; font-style: normal; cursor: help; flex: 0 0 16px; }
.of-scheme { margin: 8px 0 4px; padding: 10px 12px; border-left: 3px solid var(--signal); background: color-mix(in srgb, var(--signal) 6%, var(--card)); border-radius: 0 10px 10px 0; font-size: 12.5px; }
.qt-lang-note { margin: -4px 0 8px; font-size: 12.5px; color: var(--ink-soft); }
/* ⓘ tooltips: click/hover/focus opens a bubble; the icon never activates the label's input */
.uv-tip-wrap { position: relative; display: inline-flex; }
.uv-tip { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); min-width: 240px; max-width: 320px; padding: 10px 12px; border-radius: 10px; background: #1f2327; color: #f3f5f8; font-size: 12.5px; font-weight: 400; line-height: 1.45; box-shadow: 0 10px 28px rgba(0,0,0,.25); white-space: normal; }
.uv-tip::before { content: ''; position: absolute; left: 10px; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #1f2327; }
/* HQ home */
.hq-home-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; padding: 26px 30px; margin: 0 0 18px; border-radius: 18px; background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2)); color: #f3f5f8; border-left: 5px solid var(--hq-gold); }
.hq-home-hero h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.02em; } .hq-home-hero .muted { color: #c5ccd6; }
.hq-home-money { display: flex; gap: 22px; } .hq-home-money > div { display: flex; flex-direction: column; } .hq-home-money small { color: #c5ccd6; font-size: 12px; } .hq-home-money b { font-size: 22px; letter-spacing: -.01em; } .hq-home-money b.pos { color: #8fe0ad; } .hq-home-money em { font-style: normal; font-size: 12px; color: #c5ccd6; }
.hq-home-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; } .hq-home-grid .panel { margin: 0; }
.hq-home-zero { padding: 18px; border-radius: 12px; background: #e4f4ea; color: #1c6b3c; font-weight: 700; }
.hq-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hq-todo a { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: inherit; font-weight: 600; transition: border-color .15s ease, transform .15s ease; }
.hq-todo a:hover { border-color: var(--hq-gold); transform: translateX(2px); } .hq-todo li.bad a { border-left: 4px solid #e0353b; } .hq-todo li.warn a { border-left: 4px solid var(--hq-gold); } .hq-todo i { font-style: normal; font-size: 20px; }
.hq-home-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 14px; }
.hq-kpi { display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: inherit; } .hq-kpi b { font-size: 24px; } .hq-kpi span { font-size: 11.5px; color: var(--ink-soft); text-align: center; } .hq-kpi.soon { border-color: var(--hq-gold); }
.hq-exp { list-style: none; margin: 0; padding: 0; } .hq-exp li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .hq-exp li a { text-decoration: none; color: inherit; } .hq-exp li span { font-weight: 700; } .hq-exp li span.bad { color: #b3261e; } .hq-exp li span.warn { color: #7a4d0b; } .hq-exp li small { grid-column: 1 / -1; color: var(--ink-soft); }
.hq-home-al { list-style: none; margin: 0; padding: 0; } .hq-home-al li a { display: grid; grid-template-columns: 24px 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .hq-home-al li small { grid-column: 2; color: var(--ink-soft); }
.hq-moves { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12.5px; } .hq-moves li { display: grid; grid-template-columns: 78px 150px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .hq-moves time { color: var(--ink-soft); } .hq-moves small { color: var(--ink-soft); }
@media (max-width: 900px) { .hq-home-grid { grid-template-columns: 1fr; } .hq-home-kpis { grid-template-columns: repeat(2, 1fr); } .hq-moves li { grid-template-columns: 70px 1fr; } .hq-moves li span, .hq-moves li small { grid-column: 2; } }
/* command palette */
.hq-pal { position: fixed; inset: 0; z-index: 90; background: rgba(20, 24, 31, .45); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); }
.hq-pal-card { width: min(640px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; border-top: 4px solid var(--hq-gold); }
.hq-pal-in { width: 100%; border: 0; font: inherit; font-size: 18px; padding: 16px 18px; outline: 0; margin: 0; }
.hq-pal-list { max-height: 52vh; overflow: auto; border-top: 1px solid var(--line); }
.hq-pal-sec { padding: 8px 18px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.hq-pal-it { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 9px 18px; text-decoration: none; color: inherit; } .hq-pal-it i { font-style: normal; } .hq-pal-it.sel, .hq-pal-it:hover { background: color-mix(in srgb, var(--hq-gold) 14%, #fff); }
.hq-pal-none { padding: 10px 18px; color: var(--ink-soft); font-size: 13px; } .hq-pal-live { min-height: 20px; }
.hq-pal-foot { padding: 8px 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
.hq-pal kbd, .hq-keys kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--paper); font: 600 11px/1.5 ui-sans-serif, system-ui; color: var(--ink); }
html[data-hq][data-theme="dark"] .hq-pal-card { background: #1a1d21; color: #e7eef7; } html[data-hq][data-theme="dark"] .hq-pal-in { background: #1a1d21; color: #e7eef7; }
/* footer legend */
.hq-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; } .hq-keys { color: var(--ink-soft); font-size: 11.5px; } @media (max-width: 900px) { .hq-keys { display: none; } }
/* a row brought into view */
.od-row.flash-row { animation: od-flash 1.6s ease-out 1; } @keyframes od-flash { 0% { box-shadow: 0 0 0 4px rgba(201,154,46,.6); } 100% { box-shadow: 0 0 0 0 rgba(201,154,46,0); } }
.hq-home-lead { flex: 1 1 380px; } .hq-home-ai { margin: 8px 0 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border-left: 3px solid var(--hq-gold); color: #f3f5f8; font-size: 14px; }
.hq-spark { display: block; width: 240px; height: 44px; margin-top: 4px; } .hq-spark-l { color: #c5ccd6; font-size: 11px; }
.hq-lo { list-style: none; margin: 0 0 10px; padding: 0; } .hq-lo li { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .hq-lo time { color: var(--ink-soft); font-size: 12.5px; } .hq-lo-amt { font-weight: 700; color: #1c6b3c; } .hq-lo li.neg .hq-lo-amt { color: #b3261e; } .hq-lo .btn.sm { padding: 4px 9px; }
/* customer timeline */
.hq-tl { list-style: none; margin: 0; padding: 0 0 0 8px; border-left: 2px solid var(--line); }
.hq-tl-day { margin: 14px 0 6px -8px; padding-left: 14px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); position: relative; } .hq-tl-day::before { content: ''; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--hq-gold); }
.hq-tl-it { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: start; padding: 6px 0 6px 12px; } .hq-tl-it i { font-style: normal; } .hq-tl-it b { font-weight: 600; } .hq-tl-it a { text-decoration: none; color: inherit; } .hq-tl-it a:hover b { text-decoration: underline; }
.hq-tl-it small { display: block; color: var(--ink-soft); font-size: 12px; } .hq-tl-it time { font-size: 12px; color: var(--ink-soft); }
.hq-tl-it.muted { opacity: .75; } .hq-tl-it.warn b { color: #7a4d0b; } .hq-tl-it.bad b { color: #b3261e; } .hq-tl-it.ok b { color: #1c6b3c; }
/* ===== HQ home, polished ===== */
.hq-home-hero { align-items: stretch; }
.hq-home-lead { display: flex; flex-direction: column; } .hq-home-lead .hq-home-ai { margin-top: auto; max-width: 720px; }
.hq-home-side { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 300px; }
.hq-home-money { justify-content: flex-end; text-align: right; } .hq-home-money > div { align-items: flex-end; }
.hq-home-side .hq-spark { width: 100%; height: 48px; margin-top: 0; } .hq-home-side .hq-spark-l { text-align: right; display: block; }
.hq-spark-area { fill: rgba(230,197,107,.14); }
.hq-home-grid { align-items: start; }
.hq-home-grid .panel { transition: transform .18s ease, box-shadow .18s ease; } .hq-home-grid .panel:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(20,30,50,.08); }
.hq-kpi { transition: border-color .15s ease, transform .15s ease; } .hq-kpi:hover { border-color: var(--hq-gold); transform: translateY(-1px); }
/* last orders: one line per order */
.hq-lo li { grid-template-columns: 46px minmax(0, 1fr) auto auto; white-space: nowrap; } .hq-lo li b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hq-lo-amt { white-space: nowrap; font-variant-numeric: tabular-nums; } .hq-lo-amt small { font-weight: 400; color: var(--ink-soft); }
/* footer legend: never wider than the page */
.app-footer.hq-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 22px 22px 18px; text-align: left; }
.hq-keys { flex: 1 1 460px; min-width: 0; text-align: right; line-height: 2; } .hq-keys kbd { margin: 0 1px; }
/* next moves for a customer */
.hq-moves-box { border-left: 4px solid var(--hq-gold); }
.hq-mv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hq-mv li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); } .hq-mv i { font-style: normal; font-size: 18px; }
/* customer peek card */
.hq-peek-wrap { position: fixed; z-index: 80; width: 340px; }
.hq-peek { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--hq-gold); border-radius: 14px; box-shadow: 0 18px 50px rgba(20,30,50,.18); padding: 12px 14px; font-size: 13px; animation: peek-in .16s ease-out; }
@keyframes peek-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hq-peek-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .hq-peek-head b { display: block; font-size: 14px; } .hq-peek-head small { color: var(--ink-soft); word-break: break-all; } .pk-supp { color: #b3261e; }
.hq-peek-list { list-style: none; margin: 0 0 8px; padding: 0; } .hq-peek-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); } .hq-peek-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pk-b { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; } .pk-b.ok { background: #e4f4ea; color: #1c6b3c; } .pk-b.warn { background: #fdf1dc; color: #7a4d0b; } .pk-b.bad { background: #fde8e8; color: #b3261e; }
.hq-peek-facts { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 10px; color: var(--ink-soft); } .hq-peek-facts .warn { color: #7a4d0b; }
.hq-peek-foot { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-theme="dark"] .hq-peek { background: #1a1d21; color: #e7eef7; }
/* ===== agenda ===== */
.ag-day { margin: 12px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ag-notes .ag-note { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hq-gold) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--hq-gold) 30%, var(--line)); margin: 0 0 6px; } .ag-note i { font-style: normal; } .ag-note span { display: block; white-space: pre-wrap; } .ag-note small { color: var(--ink-soft); font-size: 12px; }
.ag-case { margin: 10px 0; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--hq-gold) 40%, var(--line)); border-radius: 12px; } .ag-case summary { cursor: pointer; font-weight: 700; } .ag-case summary small { font-weight: 400; }
/* calendar */
.ag-grid-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 16px; align-items: start; } .ag-grid-wrap .panel { margin: 0; }
.ag-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ag-cal-head h2 { flex: 1; margin: 0; text-align: center; border: 0; }
.ag-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin-bottom: 4px; }
.ag-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ag-cell { min-height: 84px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: var(--paper); display: flex; flex-direction: column; gap: 3px; } .ag-cell b { font-size: 12px; color: var(--ink-soft); } .ag-cell.out { opacity: .45; } .ag-cell.today { border-color: var(--hq-gold); box-shadow: inset 0 0 0 1px var(--hq-gold); } .ag-cell.today b { color: var(--hq-gold); } .ag-cell.late { border-color: #e0353b; }
.ag-pill { display: block; font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--hq-gold) 18%, #fff); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-pill.auto { background: #e6f0fb; } .ag-pill.done { text-decoration: line-through; opacity: .55; } .ag-cell small { color: var(--ink-soft); font-size: 11px; }
@media (max-width: 900px) { .ag-grid-wrap { grid-template-columns: 1fr; } .ag-cell { min-height: 56px; } .ag-pill { display: none; } .ag-cell small { display: block; } }
.hq-new-cta { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } .hq-new-panel { max-width: 860px; } .hq-new-form label { display: block; margin: 0 0 12px; } .hq-new-form label > input, .hq-new-form label > select { width: 100%; } .hq-new-form small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 3px; } .hq-new-prod { margin-bottom: 12px; }
/* composer: the dark head hugs the box edges */
html[data-hq] .qt-composer { padding-top: 0; }
html[data-hq] .qt-composer .qt-composer-head { margin: 0 -14px 6px; padding: 9px 14px; border-radius: 11px 11px 0 0; }
html[data-hq] .qt-lang-note { margin: 0 0 8px; }
/* ===== date picker (HQ): a calendar in the seat's own livery ===== */
.uv-dp-wrap { position: relative; display: inline-block; width: 100%; }
.uv-dp-in { width: 100%; }
.uv-dp { position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; width: 292px; padding: 12px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--hq-gold); border-radius: 14px; box-shadow: 0 18px 50px rgba(20,30,50,.18); font-size: 13px; animation: peek-in .14s ease-out; }
.uv-dp-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 6px; margin-bottom: 8px; } .uv-dp-head b { text-align: center; font-size: 14px; letter-spacing: -.01em; text-transform: capitalize; }
.uv-dp-head button { height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 15px; color: var(--ink); } .uv-dp-head button:hover { border-color: var(--hq-gold); }
.uv-dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.uv-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.uv-dp-grid button { height: 34px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.uv-dp-grid button:hover { background: color-mix(in srgb, var(--hq-gold) 18%, #fff); } .uv-dp-grid button.out { color: var(--ink-soft); opacity: .55; }
.uv-dp-grid button.today { box-shadow: inset 0 0 0 1.5px var(--hq-gold); font-weight: 700; } .uv-dp-grid button.sel { background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2)); color: #fff; font-weight: 700; }
.uv-dp-grid button.past { color: var(--ink-soft); }
.uv-dp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .uv-dp-foot button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); } .uv-dp-foot button:hover { border-color: var(--hq-gold); }
html[data-theme="dark"] .uv-dp { background: #1a1d21; color: #e7eef7; } html[data-theme="dark"] .uv-dp-grid button { color: #e7eef7; }
.qt-lang-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .qt-lang-note form.inline { display: inline; }
.ag-case summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ag-case summary .mtp-count { margin: 0; }
/* ===== date picker v2: presets, year jump, the chosen day in words ===== */
.uv-dp { width: 318px; padding: 14px; }
.uv-dp-sel { font-size: 12px; color: var(--ink-soft); margin: -2px 0 10px; text-transform: capitalize; } .uv-dp-sel b { color: var(--ink); font-size: 13px; }
.uv-dp-head { grid-template-columns: 30px 30px 1fr 30px 30px; }
.uv-dp-head button { height: 30px; width: 30px; padding: 0; }
.uv-dp-grid button { height: 38px; border-radius: 10px; font-size: 13.5px; transition: transform .08s ease, background .12s ease; }
.uv-dp-grid button:hover { transform: scale(1.06); }
.uv-dp-grid button.today::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--hq-gold); margin: 1px auto 0; }
.uv-dp-grid button.today { box-shadow: none; font-weight: 700; }
.uv-dp-grid button.sel { background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2)); color: #fff; box-shadow: 0 6px 16px rgba(20,30,50,.25); }
.uv-dp-grid button.sel.today::after { background: #fff; }
.uv-dp-pre { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .uv-dp-pre button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--ink); } .uv-dp-pre button:hover { border-color: var(--hq-gold); background: #fff; }
.uv-dp-foot { justify-content: flex-end; }
.ag-filter { margin: 0 0 10px; } .ag-done-today { margin: 10px 0 6px; } .ag-done-today summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
/* ===== agenda v3: flex rows that never misalign ===== */
.ag-list { display: flex; flex-direction: column; gap: 8px; }
.ag-it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); margin: 0; }
.ag-st { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--hq-gold) 16%, #fff); font-style: normal; font-size: 15px; }
.ag-it.done .ag-st { background: #e4f4ea; color: #1c6b3c; font-weight: 800; } .ag-it.late .ag-st { background: #fde8e8; }
.ag-it.today { border-color: var(--hq-gold); } .ag-it.late { border-left: 4px solid #e0353b; } .ag-it.done { opacity: .6; } .ag-it.done .ag-body > span { text-decoration: line-through; }
.ag-body { flex: 1 1 auto; min-width: 0; } .ag-body > span { display: block; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .ag-body small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; } .ag-body small a { color: inherit; } .ag-body small i { font-style: normal; color: #1d5fa8; }
.ag-acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 52%; } .ag-acts form.inline { display: inline-flex; gap: 6px; margin: 0; }
.ag-b { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1; }
.ag-b:hover { border-color: var(--hq-gold); } .ag-b-ok { background: #e4f4ea; color: #1c6b3c; border-color: #cfe9d8; font-weight: 700; } .ag-b-ok:hover { border-color: #1c6b3c; } .ag-b-del { color: #b3261e; } .ag-b-del:hover { border-color: #b3261e; }
@media (max-width: 820px) { .ag-it { flex-wrap: wrap; } .ag-acts { max-width: none; width: 100%; justify-content: flex-start; padding-left: 42px; } .ag-b span { display: none; } .ag-b { padding: 0 9px; } }
.ag-add { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; } .ag-add-text { width: 100%; height: 40px; margin: 0; }
.ag-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ag-add-date { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--ink-soft); } .ag-add-date .uv-dp-wrap { width: 160px; } .ag-add-date input { margin: 0; height: 36px; }
.ag-add-row .btn.sm { height: 36px; display: inline-flex; align-items: center; }
.ag-compact .ag-it { padding: 7px 10px; } .ag-compact .ag-b { height: 28px; font-size: 12px; }
html[data-theme="dark"] .ag-b { background: #1a1d21; color: #e7eef7; } html[data-theme="dark"] .ag-st { background: rgba(230,197,107,.18); }
.lg2-fic.bad { color: #b3261e; font-weight: 700; }
.hq-rc-neutral { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; } .hq-rc-neutral li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.hq-rc-auto { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; gap: 10px; } .hq-rc-auto select { width: auto; min-width: 160px; } .hq-rc-auto small { flex-basis: 100%; }
.rc2-device.dormant { opacity: .7; border-style: dashed; }
.rc-idle-help { font-size: 12.5px; }
/* template editor: the head text must be readable on the dark head; the live preview is the real email */
html[data-hq] .mtp-pv-head .hm-sub, html[data-hq] .mtp-pv-head label, html[data-hq] .mtp-pv-head .switch-label { color: #f3f5f8; }
.mtp-pv-frame { width: 100%; height: 640px; border: 0; border-radius: 0 0 12px 12px; background: #0f2a4a; display: block; }
/* agenda add: two explicit panes */
.ag-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--hq-gold) 10%, var(--paper)); border: 1px solid var(--line); margin: 0 0 10px; }
.ag-seg-b { border: 0; background: transparent; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; } .ag-seg-b.on { background: linear-gradient(135deg, var(--hq-deep), var(--hq-deep2)); color: #fff; }
.ag-add-form { display: flex; flex-direction: column; gap: 8px; } .ag-add-lbl { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; } .ag-add-lbl input, .ag-add-lbl textarea { display: block; width: 100%; margin-top: 4px; font-weight: 400; color: var(--ink); }
.ag-add-note { min-height: 78px; resize: vertical; } .ag-add-row small { flex: 1 1 auto; min-width: 200px; }
.ag-case summary { display: block; } .ag-case-t { font-weight: 700; } .ag-case-h { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.ag-add-date input[type=time] { width: 118px; margin: 0; height: 36px; padding: 0 10px; display: inline-block; }
/* the native time field inherits the app font like every other field (browsers ship it with their own) */
input[type=time] { font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; } input[type=time]::-webkit-calendar-picker-indicator { opacity: .6; }
html[data-hq] input[type="time"] { min-height: 36px; }
.qt-sender { font-weight: 400; font-size: 12px; opacity: .85; margin-left: 8px; } .tk-sender { font-size: 12.5px; margin: 0 0 6px; }
.err-big { font-size: 38px; margin: 0 0 6px; text-align: center; }
.hq-al-origin { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; vertical-align: middle; } .hq-al-origin .brand-svg, .hq-al-origin .prod-mark { width: 20px; height: 16px; } .hq-al-origin em { font-style: normal; font-size: 11px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
/* the seat's footer sits at the bottom of the window even when the page is short: body as a column, main grows */
html[data-hq] body.pn-page { min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }
html[data-hq] body.pn-page > .pn-main { flex: 1 0 auto; width: 100%; }
html[data-hq] body.pn-page > .hq-foot { margin-top: auto; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.qt-st-legend { display: block; width: 100%; font-size: 11.5px; margin-top: 6px; }
/* ticket impact: what is happening, in the customer's words */
.tk-impact { display: grid; gap: 8px; margin: 10px 0 12px; } .tk-impact-l { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tk-impact-o { display: block; cursor: pointer; position: relative; } .tk-impact-o input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tk-impact-o span { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tk-impact-o span i { grid-column: 1; grid-row: 1 / span 2; } .tk-impact-o span b { grid-column: 2; grid-row: 1; } .tk-impact-o span small { grid-column: 2; grid-row: 2; }   /* the description sits under the title, beside the icon — never in the 28px icon column */
.tk-impact-o span i { font-style: normal; font-size: 18px; text-align: center; } .tk-impact-o span b { display: block; font-size: 14px; } .tk-impact-o span small { display: block; color: var(--ink-soft); font-size: 12px; }
.tk-impact-o input:checked + span { border-color: var(--signal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 25%, transparent); }
.tk-imp { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; background: var(--paper); border: 1px solid var(--line); }
.tk-imp-blocking { background: #fde8e8; border-color: #f3b6b6; color: #8a1c1c; } .tk-imp-limited { background: #fff3d6; border-color: #f0d18a; color: #7a5200; } .tk-imp-question { color: var(--ink-soft); }
/* deal temperature */
 .qt-heat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .qt-heat-l { font-size: 12px; color: var(--ink-soft); margin-right: 4px; }
.qt-heat-b { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); } .qt-heat-b:hover { border-color: var(--hq-gold, var(--signal)); }
.qt-heat-b.on { background: linear-gradient(135deg, var(--hq-deep, #1d5fa8), var(--hq-deep2, #3a8dff)); color: #fff; border-color: transparent; }
/* case status: pill + potential on one row, the legend under both */
.qt-status .qt-st-legend { flex-basis: 100%; text-align: right; margin: 0; }
.qt-heat { margin-top: 0; } .qt-heat-b { display: inline-flex; align-items: center; gap: 6px; }
.qt-heat-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; display: inline-block; }
.h-hot .qt-heat-dot { background: #ea580c; } .h-warm .qt-heat-dot { background: #eab308; } .h-cold .qt-heat-dot { background: #94a3b8; }
.qt-heat-b.on { background: var(--ink); color: #fff; border-color: transparent; } .qt-heat-b.on .qt-heat-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.qt-sum-heat { display: inline-flex; margin-left: 6px; vertical-align: middle; }
/* the card wears its potential: HIGH breathes (slow, never a strobe), MEDIUM is tinted, low/unrated is plain */
/* potential on the card: HIGH = orange, breathing; MEDIUM = yellow, still; LOW / unrated = plain */
.qt-card.pot-hot { border-left-color: #ea580c; border-color: color-mix(in srgb, #ea580c 45%, var(--line)); animation: uv-pot-hot 1.6s ease-in-out infinite; }
.qt-card.pot-hot[open] { animation: none; background: color-mix(in srgb, #ea580c 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, #ea580c 25%, transparent); }
.qt-card.pot-hot .qt-sum::after { content: 'ALTO'; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #fff; background: #ea580c; border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.qt-card.pot-warm { border-left-color: #eab308; background: color-mix(in srgb, #eab308 9%, var(--card)); }
@keyframes uv-pot-hot { 0%, 100% { background: var(--card); box-shadow: 0 0 0 0 transparent; } 50% { background: color-mix(in srgb, #ea580c 22%, var(--card)); box-shadow: 0 0 0 4px color-mix(in srgb, #ea580c 40%, transparent); } }
@media (prefers-reduced-motion: reduce) { .qt-card.pot-hot { animation: none; background: color-mix(in srgb, #ea580c 14%, var(--card)); } }
/* ---------- the offer as a card (desk and customer page) ---------- */
.of-card { display: block; margin: 8px 0 4px; padding: 14px 16px 12px; border-radius: 14px; background: #fff; color: #10202b; border: 1px solid rgba(16,32,43,.10); box-shadow: 0 10px 28px rgba(16,32,43,.10); max-width: 520px; text-align: left; }
.of-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #6b7a86; margin-bottom: 6px; } .of-card-head b { color: #10202b; letter-spacing: 0; text-transform: none; }
.of-card-badge { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 2px 9px; border-radius: 999px; background: #eef2f5; color: #3b4a56; }
.of-card.st-paid .of-card-badge { background: #dcfce7; color: #166534; } .of-card.st-cancelled .of-card-badge, .of-card.st-expired .of-card-badge { background: #fee2e2; color: #991b1b; }
.of-card.st-cancelled, .of-card.st-expired { opacity: .72; } .of-card.st-cancelled .of-card-amount, .of-card.st-expired .of-card-amount { text-decoration: line-through; text-decoration-thickness: 2px; }
.of-card-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.of-card-amount { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; color: #1d5fa8; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .of-card-amount small { font-size: 12px; font-weight: 500; color: #6b7a86; letter-spacing: 0; }
.of-card-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; } .of-card-facts span { font-size: 12.5px; background: #f3f6f9; border: 1px solid #e3e9ee; border-radius: 999px; padding: 4px 10px; }
.of-card-renew { margin: 6px 0 0; font-size: 13px; color: #10202b; }
.of-card-cta { display: block; margin: 12px 0 6px; text-align: center; background: linear-gradient(135deg, #1d5fa8, #3a8dff); color: #fff !important; font-weight: 800; font-size: 15px; text-decoration: none !important; padding: 12px 16px; border-radius: 12px; box-shadow: 0 8px 20px rgba(29,95,168,.28); } .of-card-cta:hover { filter: brightness(1.06); }
.of-card-conf { margin: 6px 0 0; font-size: 11.5px; color: #6b7a86; }
.qt-b .of-card { max-width: 480px; } .qt-b.dead .of-card { opacity: .6; }
/* ---------- filters on the case list: state and potential ---------- */
.qt-filter2 { margin-top: -4px; } .qt-fl { font-size: 11.5px; color: var(--ink-soft); margin-right: 2px; } .qt-fl2 { margin-left: 10px; }
.qt-filter2 .qt-fchip { border: 1px solid var(--line); background: var(--card); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.qt-filter2 .qt-fchip.cur { background: var(--ink); color: #fff; border-color: transparent; }
.qt-fnone { margin: 6px 0 0; }
/* ---------- newsletter editor: products, images, spam check, toolbar ---------- */
.nl-tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.nl-words { color: var(--ink-soft); font-size: 12px; margin-left: 6px; }
.nl-products { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; } .nl-products-l { font-size: 12.5px; color: var(--ink-soft); margin-right: 2px; }
.nl-products small { flex-basis: 100%; }
.nl-prod { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-size: 13px; } .nl-prod input { margin: 0; }
.nl-prod.on, .nl-prod:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, var(--card)); }
.nl-prod .prod-mark { width: 22px; height: 18px; }
.nl-check { margin: 10px 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13px; }
.nl-check b { display: block; margin-bottom: 4px; } .nl-check ul { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 4px; }
.nl-check li { padding-left: 18px; position: relative; } .nl-check li::before { content: '•'; position: absolute; left: 4px; }
.nl-check li.ok { color: #166534; } .nl-check li.ok::before { content: '✓'; }
.nl-check li.warn { color: #7a5200; } .nl-check li.warn::before { content: '!'; font-weight: 800; }
.nl-check li.bad { color: #991b1b; } .nl-check li.bad::before { content: '✕'; font-weight: 800; }
.nl-check.has { border-color: #f0d18a; background: #fffaf0; }
.nl-imgs { margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 12px; background: var(--card); }
.nl-imgs > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; align-items: center; gap: 8px; } .nl-imgs > summary::-webkit-details-marker { display: none; }
.nl-drop { margin: 10px 0; padding: 18px 14px; border: 2px dashed var(--line); border-radius: 12px; text-align: center; color: var(--ink-soft); font-size: 13px; display: grid; gap: 8px; justify-items: center; transition: border-color .15s ease, background .15s ease; }
.nl-drop.over { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--card)); } .nl-drop.busy { opacity: .6; pointer-events: none; }
.nl-drop input[type=file] { display: none; }
.nl-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nl-img { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); display: grid; }
.nl-img-th { border: 0; padding: 0; height: 96px; background: #eef2f5 center/cover no-repeat; cursor: pointer; } .nl-img-th:hover { filter: brightness(.94); }
.nl-img-meta { padding: 6px 8px 0; font-size: 12px; min-width: 0; } .nl-img-meta b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .nl-img-meta small { color: var(--ink-soft); }
.nl-img-acts { display: flex; gap: 4px; padding: 6px 8px 8px; } .nl-img-acts .btn { padding: 4px 8px; font-size: 12px; }
/* newsletter: language of the send */
.nl-lang { display: grid; gap: 8px; margin: 14px 0 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); } .nl-lang > b { font-size: 13px; }
.nl-lang-o { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; cursor: pointer; } .nl-lang-o input { margin-top: 3px; } .nl-lang-o span b { display: block; font-size: 14px; } .nl-lang-o span small { display: block; color: var(--ink-soft); font-size: 12px; } .nl-lang-o.off { opacity: .6; }
.nl-langs { display: inline-flex; gap: 4px; margin-right: 10px; } .nl-langs button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; } .nl-langs button.on { background: var(--ink); color: #fff; border-color: transparent; }
.pp-fam { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 2px; } .pp-fam b { font-size: 13.5px; } .pp-sec { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 4px; } .pp-item.pp-inh { opacity: .75; outline: 1px dashed var(--line); border-radius: 8px; }
.nl-src { display: flex; align-items: center; gap: 10px; font-size: 13px; } .nl-src select { width: auto; margin: 0; }
.nl-adv { margin: 8px 0 0; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; } .nl-adv summary { cursor: pointer; font-weight: 600; font-size: 13.5px; } .nl-adv-help { font-size: 12.5px; margin: 6px 0 8px; }
/* first password on the seat (or for a collaborator): the login chrome, the seat's colours, no checkout steps */
.fpw-seat .fpw-card { text-align: left; } .fpw-seat .ck2-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .fpw-seat .ck2-card-head h2 { margin: 0 0 4px; font-size: 20px; text-transform: none; letter-spacing: 0; }
.fpw-seat .ck2-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; } .fpw-seat .ck2-submit { margin-top: 10px; }
html[data-hq] .fpw-seat .ck2-submit { background: linear-gradient(135deg, var(--hq-deep, #1f2933), var(--hq-deep2, #2b3743)); border-color: transparent; }
.of-nokey { font-size: 12.5px; margin: 6px 0 10px; }
.mtp-prod { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.03)); font-size: 13px; } .mtp-prod-l { font-weight: 600; } .mtp-prod .qt-fchip .prod-mark { width: 16px; height: 13px; vertical-align: -2px; }
.mtp-html { margin-top: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; } .mtp-html summary { cursor: pointer; font-weight: 600; font-size: 13.5px; } .mtp-html iframe { width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; margin-top: 8px; }
.sg2-set { flex-direction: column; align-items: stretch; } .sg2-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .sg2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; align-items: end; } .sg2-form label { margin: 0; } .sg2-cert { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sg2-up { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; } .sg2-up label { margin: 0; } .sg2-help { flex-basis: 100%; font-size: 12.5px; }
@media (max-width: 720px) { .sg2-form { grid-template-columns: 1fr; } }
.qt-erase { display: inline-flex; gap: 6px; align-items: center; } .qt-erase input[type=password] { width: 150px; margin: 0; padding: 6px 8px; font-size: 12.5px; }
.br-tbl td { vertical-align: top; } .br-open td:first-child { border-left: 3px solid #c53030; } .br-late { color: #c53030; font-weight: 600; } .br-fs { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin: 10px 0; } .br-fs legend { font-weight: 600; padding: 0 6px; } .br-guide li { margin: 4px 0; }
@media print { .hqsb, .hqtb, .br-form, .pn-hero, .btn { display: none !important; } }
/* HQ — Keys desk (hq_keys.php): API keys, signing keys, request log */
.ak-secret { border: 2px solid #b7791f; background: #fffaf0; } .ak-secret .ak-code { background: #1a202c; color: #f7fafc; padding: 12px 14px; border-radius: 10px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; user-select: all; }
.ak-code-chip { font-size: 12px; font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .ak-form { margin: 8px 0 14px; } .ak-form .pp-guard { margin: 10px 0; }
.ak-tbl td { vertical-align: top; font-size: 13px; } .ak-tbl code { font-size: 12px; word-break: break-all; } .ak-pk { display: inline-block; max-width: 340px; }
.ak-actions { white-space: nowrap; } .ak-actions form { margin: 0 0 4px; } .ak-guarded input[type=password] { width: 130px; margin-right: 4px; padding: 4px 6px; font-size: 12px; }
.ak-new { margin: 8px 0; } .ak-new summary { cursor: pointer; font-weight: 600; padding: 6px 0; } .ak-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.ak-log td { font-size: 12px; } .ak-bad td { background: #fff5f5; }
@media print { .ak-guarded, .ak-new { display: none !important; } }

.log-table td { overflow-wrap: anywhere; word-break: break-word; } .log-table td.details, .log-table td:nth-child(4) { max-width: 520px; }
/* disputes board: everything fits, nothing scrolls sideways */
/* disputes: one card per dispute — facts on top, the two decisions below, nothing squeezed into a table */
.dp-list { display: grid; gap: 14px; margin-bottom: 18px; }
.dp-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 16px; }
.dp-card.is-susp { border-color: #c78b2d; }
.dp-head { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: start; }
.dp-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-circuit { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.dp-reason { font-size: 16px; }
.dp-amount { text-align: right; } .dp-amount b { display: block; font-size: 18px; } .dp-amount small { display: block; font-size: 12px; }
.dp-due { text-align: right; border-radius: 10px; padding: 6px 10px; min-width: 150px; } .dp-due small { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; } .dp-due b { font-size: 13.5px; }
.dp-due-ok { background: rgba(46,158,91,.12); color: #1d6b3a; } .dp-due-warn { background: rgba(199,139,45,.14); color: #6b4d00; } .dp-due-bad { background: rgba(185,52,52,.12); color: #8a1f1f; } .dp-due-none { background: var(--paper); color: var(--ink-soft); }
.dp-body { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dp-kv > small:first-child { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .dp-kv span small { display: inline; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--ink-soft); } .dp-kv span { font-size: 14px; } .dp-kv code { font-size: 13px; }
.dp-foot { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line); }
.dp-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.dp-act { align-items: center; }
.dp-act .gp-inline { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.dp-act .gp-inline input[type=password], .dp-act select, .dp-act .btn.sm { box-sizing: border-box !important; height: 38px !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 36px !important; font-size: 13px; display: inline-flex; align-items: center; }
.dp-act .gp-inline input[type=password] { width: 150px; padding-left: 10px !important; padding-right: 10px !important; }
.dp-act select { width: auto; min-width: 120px; padding-left: 8px !important; padding-right: 28px !important; }
.dp-act .btn.sm { padding-left: 14px !important; padding-right: 14px !important; }
@media (max-width: 760px) { .dp-head { grid-template-columns: 1fr; } .dp-amount, .dp-due { text-align: left; } }
.dp-glyph { display: inline-flex; width: 18px; height: 18px; vertical-align: -4px; color: var(--ink-soft); } .dp-glyph svg { width: 18px; height: 18px; }
.dp-stage { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; }
.dp-stage.inquiry { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }
.dp-stage.claim { background: #b93434; color: #fff; }
.dp-card.is-claim { border-color: #b93434; box-shadow: 0 0 0 3px rgba(185,52,52,.10); }
.dp-card.is-claim .dp-reason { color: #8a1f1f; }
.tg-set { }
.tg-events { display: flex; flex-wrap: wrap; gap: 6px 18px; } .tg-events .check-label { font-size: 13px; }
.bk-drill-note { display: block; margin-top: 6px; font-size: 12px; }
.dp-msgs { margin: 8px 0 4px; } .dp-msgs summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.dp-stats { grid-template-columns: repeat(4, 1fr); margin: 0 0 14px; }
.dp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; margin: 8px 0; padding: 10px 0; border-top: 1px dashed var(--line); } .dp-facts .dp-kv span { font-size: 13px; line-height: 1.4; }
.dp-playbook { margin: 6px 0 8px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; background: var(--paper); } .dp-playbook summary { cursor: pointer; font-size: 13px; font-weight: 600; } .dp-playbook .dp-pb-tone { margin: 8px 0 4px; font-size: 13px; color: var(--ink-soft); } .dp-playbook ol { margin: 4px 0 6px 18px; padding: 0; font-size: 13px; line-height: 1.45; }
.dp-due em { display: block; font-style: normal; font-size: 11px; margin-top: 2px; }
.dp-reply { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; } .dp-reply summary { cursor: pointer; font-size: 13px; font-weight: 600; } .dp-reply-help { font-size: 12.5px; margin: 6px 0 8px; }
.dp-steps { display: grid; gap: 10px; }
.dp-step { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 10px 12px; }
.dp-step.is-now { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 12%, transparent); }
.dp-step.is-later { opacity: .8; border-style: dashed; background: color-mix(in srgb, var(--paper) 70%, transparent); } .dp-step.is-done { opacity: .7; }
.dp-step-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; vertical-align: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink-soft); }
.dp-step.is-now .dp-step-tag { background: var(--signal); color: #fff; } .dp-step.is-done .dp-step-tag { background: #2f7d4e; color: #fff; }
.dp-later-note { font-size: 12.5px; color: var(--ink-soft); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; }
.dp-step-h { display: flex; gap: 10px; align-items: flex-start; } .dp-step-h i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--ink); color: var(--paper); }
.dp-step.is-now .dp-step-h i { background: var(--signal); } .dp-step.is-done .dp-step-h i { background: #2f7d4e; } .dp-step.is-later .dp-step-h i { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.dp-step-h b { font-size: 14px; } .dp-step-h small { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.dp-step-body { display: grid; gap: 6px; margin-top: 10px; align-content: start; }
.dp-step-fold > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); list-style: none; } .dp-step-fold > summary::-webkit-details-marker { display: none; } .dp-step-fold > summary::before { content: '▸ '; } .dp-step-fold[open] > summary::before { content: '▾ '; }
.dp-lang { display: inline-flex; align-items: center; gap: 4px; margin: 0; } .dp-lang-dl { margin-left: 6px; } .dp-lang small { color: var(--ink-soft); font-size: 11.5px; } .dp-lang select { width: auto; }
.dp-reply-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .dp-reply-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); display: grid; gap: 6px; align-content: start; }
.dp-reply-draft, .dp-reply-send { display: grid; gap: 6px; } .dp-reply-send { padding-top: 8px; border-top: 1px dashed var(--line); }
.dp-reply-box textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.4; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical; } .dp-reply-box textarea:disabled { opacity: .55; }
.dp-reply-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .dp-reply-act select { width: auto; } .dp-reply-act .gp-inline { margin: 0; display: inline-flex; align-items: center; gap: 4px; } .dp-reply-act .gp-inline input { width: 120px; }
.dp-reply-sel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); } .dp-reply-sel select { width: auto; flex: 1; }
.dp-note { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } .dp-note label { flex: 1; display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); } .dp-note textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical; min-height: 44px; }
@media (max-width: 720px) { .dp-stats { grid-template-columns: repeat(2, 1fr); } }
.dp-msg { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--paper); border-left: 3px solid var(--line); } .dp-msg-buyer { border-left-color: #c78b2d; } .dp-msg-seller { border-left-color: var(--signal); }
.dp-msg small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .dp-msg p { margin: 4px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.od-dispute { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; vertical-align: 1px; line-height: 16px; white-space: nowrap; }
.od-dispute-claim { background: #b93434; color: #fff; } .od-dispute-inquiry { background: rgba(199,139,45,.18); color: #6b4d00; border: 1px solid rgba(199,139,45,.45); }
.od-dispute-lost { background: #fde5e3; color: #8f1d1d; border: 1px solid rgba(185,52,52,.45); }
.pcu-disp-list { list-style: none; margin: 0; padding: 0; } .pcu-disp-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .pcu-disp-list li:last-child { border-bottom: 0; } .pcu-disp-list .prod-mark { width: 20px; height: 16px; }
.od-dispute:hover { filter: brightness(.95); }
.wipe-box { margin: 6px 0 12px; padding: 10px 14px; border: 1px dashed #c78b2d; border-radius: 12px; background: rgba(199,139,45,.06); }
.wipe-box summary { cursor: pointer; font-weight: 700; } .wipe-plan { margin: 8px 0; padding-left: 18px; font-size: 13.5px; } .wipe-plan li { margin: 3px 0; }
.wipe-blocker { color: #8a1f1f; } .wipe-keep { color: #1d6b3a; } .wipe-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
a.dp-act { text-decoration: none; }
.hq-rc-legend { font-size: 12.5px; margin: 0 0 12px; line-height: 1.5; }
form.btn-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } form.btn-row label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12.5px; } form.btn-row label input { margin: 0; height: 38px; box-sizing: border-box; } form.btn-row .btn { height: 38px; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; }
form.ai-demo { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } form.ai-demo label { flex: 1 1 420px; display: flex; flex-direction: column; gap: 4px; margin: 0; } form.ai-demo label input { margin: 0; height: 38px; box-sizing: border-box; } form.ai-demo .btn { height: 38px; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; }
.dp-closed-list { display: grid; gap: 8px; }
.dp-closed { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 14px; }
.dp-closed summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 13.5px; } .dp-closed summary::-webkit-details-marker { display: none; }
.dp-closed summary small { color: var(--ink-soft); min-width: 78px; } .dp-closed summary b { flex: 1 1 auto; } .dp-closed summary code { font-size: 12.5px; } .dp-closed summary span { font-weight: 700; }
.dp-closed-body { display: flex; flex-wrap: wrap; gap: 14px 26px; padding: 4px 0 12px; border-top: 1px dashed var(--line); } .dp-closed-body .dp-kv { min-width: 160px; } .dp-closed-body p { width: 100%; margin: 4px 0 0; }
.dp-msgs-closed { width: 100%; }

.pu-st { margin-left: 4px; }
.badge.bad { background: rgba(185,52,52,.12); color: #8a1f1f; }
.ai-models-row { grid-column: 1/-1; }
.sg2-aruba { margin: 6px 0 10px; } .sg2-aruba summary { cursor: pointer; font-size: 12.5px; color: var(--signal-ink, #1d5fa8); }
.hs-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 10px 0 14px; } .hs-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; margin: 0; } .hs-filters input { margin: 0; height: 38px; box-sizing: border-box; } .hs-filters .btn { height: 38px; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; }
.hs-export .btn-row { align-items: center; }
/* ⌘K palette: anchored under the top search, centred on the CONTENT (not on the whole screen, which the sidebar shifts) */
/* (D-M786 cleanup: the pre-Aurora palette geometry that lived here is gone — see "Aurora 5, step 2" below) */
@media (max-width: 900px) { html[data-hq] .hq-pal { padding-top: 8vh; } }

html[data-hq] .hq-pal-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* deep-link landing: a short golden glow on the block the search sent you to */
.uv-deep-hit { animation: uv-deep-hit 3.2s ease-out; scroll-margin-top: 80px; border-radius: 12px; }
@keyframes uv-deep-hit { 0% { box-shadow: 0 0 0 0 rgba(201, 154, 46, .0); } 12% { box-shadow: 0 0 0 5px rgba(201, 154, 46, .55); } 100% { box-shadow: 0 0 0 0 rgba(201, 154, 46, 0); } }
/* restore drill: the verdict as a card, not a whisper */
.bk-drill-box { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; margin-top: 10px; border: 1px solid var(--line); background: var(--paper); flex-basis: 100%; }
.bk-drill-box .bk-drill-ico { font-size: 22px; line-height: 1; } .bk-drill-box strong { display: block; font-size: 14px; } .bk-drill-box small { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.bk-drill-box.ok { border-color: #2e8b57; background: rgba(46, 139, 87, .08); } .bk-drill-box.ok strong { color: #1f6b41; }
.bk-drill-box.bad { border-color: #b93434; background: rgba(185, 52, 52, .08); } .bk-drill-box.bad strong { color: #8f2626; }
html[data-theme="dark"] .bk-drill-box.ok strong { color: #7ed8a4; } html[data-theme="dark"] .bk-drill-box.bad strong { color: #ff9b9b; }
/* ⌘K palette: a self-contained box — nothing of the page's input styles may leak in */
html[data-hq] .hq-pal-card { position: relative; display: flex; flex-direction: column; }
html[data-hq] .hq-pal-card .hq-pal-in { display: block; width: 100%; box-sizing: border-box; margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; height: auto; line-height: 1.3; }
html[data-hq] .hq-pal-card .hq-pal-in:focus { outline: 0; box-shadow: none; }
.tg-steps { margin: 6px 0 4px; padding-left: 20px; font-size: 13px; line-height: 1.5; } .tg-steps li { margin: 3px 0; }
/* order rows: the name line keeps its flags INLINE (a gone account, a gone installation, a fiscal-code doubt) —
 * quiet monochrome chips with a line icon, never a pill stretched across the column */
.od-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-flag { display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px; margin-left: 6px; height: 18px; padding: 0 7px 0 5px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); white-space: nowrap; line-height: 1; }
.od-flag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.od-flag-warn { color: #a05d00; border-style: solid; border-color: rgba(200, 120, 0, .35); background: rgba(245, 170, 60, .14); }
.od-flag-warn::before { content: ''; display: inline-block; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; vertical-align: -1px; }   /* the warning glyph, drawn: no emoji (D-M1163) */
html[data-theme="dark"] .od-flag { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
html[data-theme="dark"] .od-flag-warn { color: #f0b35c; }
.od-row.open .od-name, .od-row:hover .od-name { white-space: normal; }
.ck2-cf-hint { display: block; font-size: 12px; margin-top: 4px; } .ck2-cf-hint.ok { color: #1f6b41; } .ck2-cf-hint.bad { color: #8f2626; }
.ck2-cf-hint.warn { color: #8a5a00; }
.ai-feat-model { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; } .ai-feat-model select, .ai-feat-model input { width: auto; font-size: 12px; padding: 3px 8px; height: 28px; margin: 0; } .ai-feat-model input { min-width: 180px; } .ai-feat-model small { color: var(--ink-soft); }
.dp-dl { width: auto; font-size: 12px; padding: 2px 6px; height: 26px; margin-left: 6px; }
.btn.is-busy { opacity: .7; cursor: progress; animation: uv-busy 1.1s ease-in-out infinite; } @keyframes uv-busy { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.dp-flash { margin: 8px 0 0; }
.dp-flash-err { border-left: 5px solid #b93434; font-size: 14.5px; padding: 12px 14px; animation: dp-shake .45s ease; } .dp-flash-err small { font-weight: 400; color: inherit; opacity: .85; }
@keyframes dp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .dp-flash-err { animation: none; } }
.uv-busy-panel { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--signal) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); font-weight: 600; font-size: 13.5px; }
.uv-busy-panel i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--signal) 35%, transparent); border-top-color: var(--signal); animation: uv-spin .9s linear infinite; }
@keyframes uv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .uv-busy-panel i { animation: none; border-top-color: color-mix(in srgb, var(--signal) 35%, transparent); } }
.tabs .tabs-sep { display: inline-block; width: 1px; height: 18px; background: var(--line); margin: 0 6px; vertical-align: middle; }
/* an answered, quiet dispute is one row: header only, everything else folded; the button on the header opens it */
.dp-card { position: relative; }
.dp-card.is-folded > :not(.dp-head):not(.dp-fold-row):not(.dp-news) { display: none; }
.dp-card.is-folded { padding: 10px 16px; opacity: .88; } .dp-card.is-folded .dp-head { align-items: center; }
.dp-fold-row { display: flex; justify-content: flex-end; margin: 8px 0 0; } .dp-card.is-folded .dp-fold-row { margin: 8px 0 0; }
.dp-card.is-folded { padding: 12px 16px 12px; } .dp-fold-btn { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.dp-card.is-folded .dp-fold-btn .dp-fold-close { display: none; } .dp-card:not(.is-folded) .dp-fold-btn .dp-fold-open { display: none; }
.dp-news { margin: -4px 0 8px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: rgba(199,139,45,.14); color: #6b4d00; }
.dp-card.has-news { border-color: #c78b2d; }
.uv-count { display: block; text-align: right; font-size: 11px; color: var(--ink-soft); margin-top: -2px; } .uv-count.bad { color: #b93434; font-weight: 700; }
.dp-full { margin-top: 4px; } .dp-full > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; } .dp-full-help { font-size: 12px; margin: 4px 0 6px; } .dp-full textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.4; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical; }
.dp-reply > summary small { white-space: nowrap; }
.dp-policy { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 6px 18px; align-items: center; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13px; }
.dp-policy > b { grid-row: 1 / span 2; grid-column: 1; align-self: center; white-space: nowrap; }
.dp-policy > button { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
.dp-policy-opt { grid-column: 2; display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; margin: 0; cursor: pointer; } .dp-policy-opt input { margin: 3px 0 0; } .dp-policy-opt small { display: block; color: var(--ink-soft); font-size: 11.5px; }
@media (max-width: 700px) { .dp-policy { grid-template-columns: 1fr; } .dp-policy > b, .dp-policy > button, .dp-policy-opt { grid-column: 1; grid-row: auto; } }
.ob-head-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; } .ob-head-acts small { max-width: 320px; text-align: right; font-size: 12px; }

/* ===== Sicurezza → Chiavi e API (hq_keys.php): the desk's own rules. One card per key, one guard field per card. ===== */
.pn-page .ak-code-chip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.pn-page .ak-form .btn-row { grid-column: 1 / -1; margin: 6px 0 4px; }
.pn-page .ak-form .pp-guard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 2px 18px; align-items: center; margin: 10px 0 8px; padding: 10px 14px; }
.pn-page .ak-form .pp-guard > b { grid-column: 1; }
.pn-page .ak-form .pp-guard > p { grid-column: 1; margin: 0 !important; }
.pn-page .ak-form .pp-guard > label { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: none !important; }
.pn-page .ak-form .pp-guard > label input { margin: 0; }
.pn-page .ak-keys { display: grid; gap: 10px; margin: 6px 0 10px; }
.pn-page .ak-key { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 12px 14px; }
.pn-page .ak-key-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pn-page .ak-kid { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; }
.pn-page .ak-meta { font-size: 12.5px; color: var(--ink-soft); }
.pn-page .ak-scope-list { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 8px 0 0; }
.pn-page .ak-scope { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; color: var(--ink-soft); }
.pn-page .ak-pk-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 8px 0 0; }
.pn-page .ak-pk { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.pn-page .ak-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.pn-page .ak-act input[type=password] { flex: 1 1 200px; max-width: 280px; margin: 0; }
.pn-page .ak-act .btn { margin: 0; }
.pn-page .ak-new { margin: 6px 0 2px; }
.pn-page .ak-new > summary { cursor: pointer; font-weight: 600; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.pn-page .ak-new[open] > summary { border-style: solid; border-radius: 10px 10px 0 0; }
.pn-page .ak-new > form { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; padding: 12px 14px 14px; }
.pn-page .ak-scopes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; }
.pn-page .ak-scopes .check-label { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.pn-page .ak-secret { border-color: #e8cf8a; }
.pn-page .ak-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0; cursor: copy; }
.pn-page .ak-log { font-size: 13px; }
.pn-page .ak-log code { white-space: nowrap; font-size: 12px; }
.pn-page .ak-log td, .pn-page .ak-log th { white-space: nowrap; }
.pn-page .ak-log tr.ak-bad td { background: var(--err-bg); }
@media (max-width: 720px) {
    .pn-page .ak-form .pp-guard { grid-template-columns: 1fr; }
    .pn-page .ak-form .pp-guard > label { grid-column: 1; grid-row: auto; }
    .pn-page .ak-act input[type=password] { max-width: none; }
    .pn-page .ak-act .btn { flex: 1 1 auto; }
    .pn-page .ak-log { display: block; overflow-x: auto; }
}

/* ===== HQ mobile shell (decided 7/9): at ≤ 900 px the sidebar becomes a drawer, the topbar gives way to a compact
 * bar — brand · search (opens the ⌘K palette) · bell with badge · menu — and the pages get their phone pass. The
 * markup comes from render_hq_shell() (includes/platform.php): one set of links for every width. On the desktop
 * the bar, the backdrop and the drawer strip do not exist. ===== */
html[data-hq] .hqmb, html[data-hq] .hqsb-backdrop, html[data-hq] .hqsb-mob { display: none; }
@media (max-width: 900px) {
    /* — the compact bar — */
    html[data-hq] .hqmb { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 65; align-items: center; gap: 2px; height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0 12px; box-sizing: border-box;
        background: var(--hq-deep); border-bottom: 2px solid var(--hq-gold); box-shadow: 0 4px 18px rgba(10, 24, 40, .25); }
    html[data-hq] .hqmb-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; color: #fff; text-decoration: none; font-weight: 800; font-size: 15.5px; letter-spacing: .01em; }
    html[data-hq] .hqmb-brand .hqsb-mono { width: 30px; height: 30px; }
    html[data-hq] .hqmb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #e7eef7; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    html[data-hq] .hqmb-btn .hqi { width: 23px; height: 23px; }
    html[data-hq] .hqmb-btn:active { background: rgba(255, 255, 255, .12); }
    html[data-hq] .hqmb-btn:focus-visible { outline: 2px solid var(--hq-gold); outline-offset: -2px; }
    html[data-hq] .hqmb-bell .hqsb-b { position: absolute; top: 5px; right: 5px; margin: 0; }
    html[data-hq] .hqmb-bell.urgent .hqi { color: #ff9c8f; }
    html[data-hq] .hqmb-menu[aria-expanded="true"] { background: rgba(201, 154, 46, .22); color: var(--hq-gold-2); }
    /* — the page under the bar — */
    html[data-hq] body, html[data-hq] body.pn-page, html[data-hq] body:has(> .hqsb), html[data-hq] body:has(> .pn-shell .hqsb) { padding-left: 0; padding-top: calc(52px + env(safe-area-inset-top)); }
    html[data-hq] .hqtb { display: none; }
    html[data-hq] .pn-sandbox-bar { top: calc(52px + env(safe-area-inset-top)); }
    html[data-hq] .pn-main { padding: 14px 14px 28px; }
    html[data-hq] .hq-hero-main { padding-bottom: 0; }
    /* — the drawer: the sidebar itself, off canvas until the menu button — */
    html[data-hq] .hqsb { position: fixed; inset: 0 auto 0 0; width: min(304px, 86vw); z-index: 80; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)); border-right: 1px solid rgba(201, 154, 46, .45); border-bottom: 0;
        transform: translateX(-104%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
    html[data-hq] body.hq-nav-open .hqsb { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; box-shadow: 14px 0 44px rgba(0, 0, 0, .38); }
    html[data-hq] .hqsb-backdrop { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(8, 12, 18, .55); }
    html[data-hq] .hqsb-backdrop[hidden] { display: none; }
    html[data-hq] body.hq-nav-open { overflow: hidden; }
    html[data-hq] .hqsb-it { min-height: 44px; font-size: 14.5px; padding: 8px 10px; }
    html[data-hq] .hqsb-sec { display: block; }
    html[data-hq] .hqsb-foot { display: block; margin-top: auto; }
    html[data-hq] .hqsb-foot::before { display: block; }
    html[data-hq] .hqsb-mob { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 6px; padding: 0 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    html[data-hq] .hqsb-mob-today { display: flex; flex-direction: column; line-height: 1.15; }
    html[data-hq] .hqsb-mob-today small { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(231, 238, 247, .6); }
    html[data-hq] .hqsb-mob-today b { font-size: 17px; font-weight: 800; color: var(--hq-gold-2); font-variant-numeric: tabular-nums; }
    html[data-hq] .hqsb-mob-today b.neg { color: #ff9c8f; }
    html[data-hq] .hqsb-mob .hqtb-env { margin: 0; }
    /* — the pages: no horizontal scroll, finger-sized rows — */
    html[data-hq] .panel { padding: 14px 14px; }
    html[data-hq] .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    html[data-hq] .pn-hero { padding: 16px 16px; }
    html[data-hq] .pn-hero h1 { font-size: 19px; }
    html[data-hq] .btn-row { flex-wrap: wrap; }
    html[data-hq] .btn-row .btn, html[data-hq] .btn-row form.inline { min-height: 40px; }
    /* Today */
    html[data-hq] .hq-home-hero { padding: 18px 16px; }
    html[data-hq] .hq-home-money { flex-wrap: wrap; gap: 12px 18px; justify-content: flex-start; text-align: left; }
    html[data-hq] .hq-home-money > div { align-items: flex-start; }
    html[data-hq] .hq-home-kpis { grid-template-columns: repeat(2, 1fr); }
    /* Alerts: the row becomes two lines — badge and text, then the tools — */
    html[data-hq] .hq-al-list li { grid-template-columns: auto 1fr; }
    html[data-hq] .hq-al-list li .hq-al-tools { grid-column: 1 / -1; justify-content: flex-start; }
    html[data-hq] .hq-al-list li .hq-al-tools .btn { min-height: 38px; }
    /* Activity log and ledger: the filters on a two-column grid, every field in sight, the buttons on the last row
     * (the cards themselves switch at 720 px, with every table.cards) */
    html[data-hq] .lg2-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; }
    html[data-hq] .lg2-filters > label { min-width: 0; }
    html[data-hq] .lg2-filters > label select, html[data-hq] .lg2-filters > label input { width: 100%; min-width: 0; box-sizing: border-box; }
    html[data-hq] .lg2-filters > .btn { min-height: 40px; }
    /* Email: profile tabs in one scrolling row, buttons on their own lines */
    html[data-hq] .pe-profiles { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html[data-hq] .pe-form .btn-row > * { flex: 1 1 100%; }
    html[data-hq] .pe-testgrp { display: flex; gap: 6px; }
    html[data-hq] .pe-testgrp input { flex: 1 1 auto; min-width: 0; }
    /* Keys and API: the cards stack, the action row wraps, the tables scroll inside their box */
    html[data-hq] .ak-key-head { flex-wrap: wrap; gap: 6px 10px; }
    html[data-hq] .ak-act { flex-wrap: wrap; }
    html[data-hq] .ak-act input[type=password] { flex: 1 1 100%; max-width: none; }
    html[data-hq] .ak-act .btn { flex: 1 1 auto; }
    html[data-hq] .ak-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html[data-hq] .ak-pk { max-width: 100%; }
    /* Backup: KPIs two by two, the Drive browser stacked, the buttons full width */
    html[data-hq] .bk-kpis { grid-template-columns: repeat(2, 1fr); }
    html[data-hq] .bk-tree { grid-template-columns: 1fr; }
    html[data-hq] .bk-status .btn-row .btn { flex: 1 1 46%; }
    html[data-hq] .bk-drill-box { flex: 1 1 100%; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { html[data-hq] .hqsb { transition: none; } }
/* ≤ 720 px, where table.cards turns rows into cards: the activity log gets its own compact card — time · user · IP on the
 * first line, the action on the second, the detail on one ellipsed line that opens on tap (tr.open, hq_log.php) — instead
 * of the voucher dashboard's grid areas, which this table does not have. */
@media (max-width: 720px) {
    html[data-hq] .hq-log.cards tbody tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "when user ip" "act act act" "det det det"; gap: 2px 8px; align-items: center; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
    html[data-hq] .hq-log.cards td { padding: 0; border: 0; background: transparent; }
    html[data-hq] .hq-log.cards td[data-label]::before { display: none; }
    html[data-hq] .hq-log.cards td.lg-when { grid-area: when; }
    html[data-hq] .hq-log.cards td.lg-user { grid-area: user; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    html[data-hq] .hq-log.cards td.lg-ip { grid-area: ip; }
    html[data-hq] .hq-log.cards td.lg-act { grid-area: act; margin-top: 2px; }
    html[data-hq] .hq-log.cards td.lg-det { grid-area: det; min-width: 0; }
    html[data-hq] .hq-log.cards td.lg-det small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html[data-hq] .hq-log.cards tr.open td.lg-det small { white-space: normal; overflow-wrap: anywhere; }
    html[data-hq] .hq-log.cards tr.bad { background: #fdf0ef; } html[data-hq][data-theme="dark"] .hq-log.cards tr.bad { background: #3a1a1a; }
}


/* Prodotti → Salute (hq_products.php): the incident list and the disabled tabs of the slices to come */
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pr-list li { font-size: 13px; line-height: 1.5; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--card) 85%, var(--paper)); }
.tabs span.tab { opacity: .45; cursor: not-allowed; }

/* ---- the account alias (package 373): the customer hub served by the seat, dressed as the product */
.ah-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-left:6px}
.ah-hero h1{margin:0 0 6px;font-size:1.5rem}
.ah-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ah-card-head h2{margin:0 0 4px;font-size:1.15rem;display:flex;align-items:center;gap:8px}
.ah-card-head p{margin:0}
.ah-actions{display:flex;flex-wrap:wrap;gap:8px}
.ah-h{margin:0 0 12px}
@media (max-width:640px){.ah-card{flex-direction:column;align-items:stretch}.ah-actions .btn{flex:1 1 auto;text-align:center}}

/* F3: the product strip — one row of tabs under the topbar on every page the seat governs for one product (review 909) */
.hq-ptabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 22px 0;margin:0 0 -4px}
.hq-ptabs-name{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;letter-spacing:.01em;color:#1b2430;padding:6px 12px 6px 4px;margin-right:4px;border-right:1px solid #dfe5ee}
.hq-ptabs-name i,.hq-ptab i{display:inline-flex;width:16px;height:16px;flex:0 0 16px}
.hq-ptabs-name .hqi,.hq-ptab .hqi{width:16px;height:16px}
.hq-ptab{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid #dfe5ee;background:#fff;color:#4c5a68;font-size:12.5px;font-weight:600;text-decoration:none;line-height:1;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.hq-ptab:hover{background:#f1f4f8;color:#1b2430;text-decoration:none}
.hq-ptab.on{background:#1b2430;border-color:#1b2430;color:#fff}
.hq-ptab-other{margin-left:auto;border-style:dashed;color:#6b7785}
html[data-hq] .hq-ptabs{background:#f4f6f9; flex-wrap: wrap; row-gap: 6px; padding-bottom: 8px; }   /* 561: the strip wraps into rows instead of hiding its tail behind an invisible scroll */
html[data-hq] .hq-ptab{padding:5px 9px;font-size:12px}
.hq-ptabs-sep{display:inline-block;width:1px;height:18px;background:#d5dbe4;margin:0 4px;flex:0 0 1px}
@media (max-width:900px){.hq-ptabs{padding:8px 12px 8px}html[data-hq] .hq-ptabs{flex-wrap:wrap}.hq-ptabs-name{white-space:nowrap}.hq-ptab-other{margin-left:0}.hq-ptabs-sep{display:none}}

/* 911: the product hub (one card per desk, its state in one line) */
.hq-hub{margin:4px 0 18px}
.hq-hub-h{margin:0 0 10px;font-size:14px;font-weight:800;letter-spacing:.02em;color:#4c5a68;text-transform:uppercase}
.hq-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hq-hub-card{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 12px;border-radius:14px;background:#fff;border:1px solid #dfe5ee;text-decoration:none;color:#1b2430;box-shadow:0 1px 2px rgba(20,30,50,.04);transition:transform .12s,box-shadow .12s,border-color .12s;position:relative}
.hq-hub-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,30,50,.10);border-color:#c9d3df;text-decoration:none}
.hq-hub-card::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.hq-hub-card.ok::before{background:#2fa36b}
.hq-hub-card.warn::before{background:#e0a92b}
.hq-hub-card.bad::before{background:#d64545}
.hq-hub-ico{font-size:22px;flex:0 0 34px;text-align:center}
.hq-hub-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hq-hub-body b{font-size:14.5px}
.hq-hub-body small{color:#5b6875;font-size:12.5px;line-height:1.35}
.hq-hub-arrow{color:#9aa7b5;font-weight:700}
/* 911: the product strip becomes a tab bar with a breadcrumb, not floating chips */
.hq-ptabs{padding:0 22px;margin:0 0 6px;gap:0;background:#fff;border-bottom:1px solid #e3e9ee;box-shadow:0 1px 0 rgba(20,30,50,.02)}
html[data-hq] .hq-ptabs{background:#fff}
.hq-ptabs-name{border-right:0;margin-right:10px;padding:12px 0;font-size:13px;color:#6b7785}
.hq-ptabs-name::before{content:"Prodotti ›";margin-right:6px;font-weight:600;color:#9aa7b5}
.hq-ptab{border:0;border-radius:0;background:transparent;padding:13px 11px;border-bottom:2px solid transparent;color:#4c5a68}
.hq-ptab:hover{background:transparent;color:#1b2430;border-bottom-color:#c9d3df}
.hq-ptab.on{background:transparent;color:#1b2430;border-bottom-color:#1b2430;font-weight:800}
.hq-ptab-other{margin-left:auto;border:1px dashed #c9d3df;border-radius:999px;padding:6px 11px;align-self:center}
@media (max-width:900px){.hq-ptabs{padding:0 12px}.hq-ptabs-name::before{content:none}}

/* 911: the technical settings desk — status chips, two cards, big switches, one save bar */
.pt-status{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pt-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:#f1f4f8;border:1px solid #dfe5ee;color:#1b2430}
.pt-chip.ok{background:#e9f7ef;border-color:#bfe6cf;color:#1d6b3f}
.pt-chip.warn{background:#fff6e0;border-color:#efd9a0;color:#7a5a08}
.pt-chip.bad{background:#fdecec;border-color:#f3b8b8;color:#8f2323}
.pt-form{display:block}
.pt-cards{align-items:stretch}
.pt-switch{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid #eef2f6;cursor:pointer}
.pt-switch:first-of-type{border-top:0}
.pt-switch input{position:absolute;opacity:0;width:0;height:0}
.pt-switch-ui{flex:0 0 42px;height:24px;border-radius:999px;background:#c9d3df;position:relative;transition:background .15s;margin-top:2px}
.pt-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.pt-switch input:checked + .pt-switch-ui{background:#2fa36b}
.pt-switch.danger input:checked + .pt-switch-ui{background:#d64545}
.pt-switch input:checked + .pt-switch-ui::after{left:21px}
.pt-switch input:focus-visible + .pt-switch-ui{outline:2px solid #1b2430;outline-offset:2px}
.pt-switch-txt{display:flex;flex-direction:column;gap:2px}
.pt-switch-txt b{font-size:14.5px}
.pt-switch-txt small{color:#5b6875;font-size:12.5px;line-height:1.4}
.pt-field{display:block;margin-top:10px;font-weight:600;font-size:13.5px}
.pt-field input,.pt-field select{display:block;width:100%;max-width:320px;margin-top:6px;font-weight:400}
.pt-field small{display:block;margin-top:4px;font-weight:400}
.pt-savebar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px;margin:8px 0 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid #dfe5ee;border-radius:12px;box-shadow:0 -6px 20px rgba(20,30,50,.06)}

/* ===== G2 (912): motion system of the seat — entrance, hover, focus; off for people who ask for less motion ===== */
@keyframes hqFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hqPop{0%{transform:scale(.96);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes hqShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes hqPulseDot{0%,100%{box-shadow:0 0 0 0 rgba(47,163,107,.45)}60%{box-shadow:0 0 0 9px rgba(47,163,107,0)}}
html[data-hq] .pn-main>.panel,html[data-hq] .pn-main>form.panel,html[data-hq] .pn-main>.pn-hero,html[data-hq] .pn-main>.hq-hub,html[data-hq] .pn-main>.grid-2>.panel,html[data-hq] .pn-main>.pt-form .panel,html[data-hq] .pn-main>.alert{animation:hqFadeUp .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}
html[data-hq] .hq-hub-card{animation:hqPop .36s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(120ms + var(--i,0)*40ms)}
body.hq-motion .panel{transition:box-shadow .18s,transform .18s}
body.hq-motion .panel:hover{box-shadow:0 12px 30px rgba(20,30,50,.08)}
body.hq-motion .btn{transition:transform .12s,box-shadow .12s,background .12s,border-color .12s}
body.hq-motion .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,30,50,.12)}
body.hq-motion .btn:active{transform:translateY(0) scale(.98)}
body.hq-motion .btn.primary:hover{box-shadow:0 8px 20px rgba(27,36,48,.28)}
body.hq-motion .hqsb-it{transition:background .12s,transform .12s,color .12s}
body.hq-motion .hqsb-it:hover{transform:translateX(2px)}
html[data-hq] .hqsb-b.pulse{animation:hqPop .4s ease}
html[data-hq] .pe-status .pe-dot,html[data-hq] .pt-chip.ok::before{animation:hqPulseDot 2.4s ease-out infinite}
html[data-hq] .voucher-table tbody tr{transition:background .12s}
html[data-hq] .voucher-table tbody tr:hover{background:#f6f8fb}
html[data-hq] .badge{transition:transform .12s}
html[data-hq] .badge:hover{transform:scale(1.04)}
body.hq-motion .hq-toast{animation:hqFadeUp .3s ease both}
html[data-hq] .hq-skel{background:linear-gradient(90deg,#eef2f6 25%,#f7f9fb 50%,#eef2f6 75%);background-size:200% 100%;animation:hqShimmer 1.2s linear infinite;border-radius:8px;min-height:14px}
html[data-hq] .hq-ptab{transition:color .12s,border-color .12s}
html[data-hq] .hq-ptab.on{animation:hqFadeUp .3s ease both}
html[data-hq] a:focus-visible,html[data-hq] button:focus-visible,html[data-hq] input:focus-visible,html[data-hq] select:focus-visible{outline:2px solid #1b2430;outline-offset:2px;border-radius:8px}
html[data-hq] .hq-count{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){html[data-hq] *,html[data-hq] *::before,html[data-hq] *::after{animation:none!important;transition:none!important}}

/* ===== G2 (926): Oggi — the four numbers of the day in the hero, the to-do as action cards ===== */
.hq-hero-kpis{flex:1 0 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:6px}
.hq-hero-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#f3f5f8;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s,background .15s,border-color .15s;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(160ms + var(--i,0)*60ms)}
.hq-hero-kpi:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);text-decoration:none}
.hq-hero-kpi::after{content:"";position:absolute;right:-24px;top:-24px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.06)}
.hq-hero-kpi i{font-style:normal;font-size:16px;opacity:.9}
.hq-hero-kpi b{font-size:26px;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hq-hero-kpi small{color:#c5ccd6;font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}
.hq-hero-kpi.ok b{color:#9fe3bd}
.hq-hero-kpi.warn b{color:#ffd97a}
.hq-hero-kpi.bad b{color:#ff9b9b}
.hq-todo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.hq-todo-cards li{animation:hqFadeUp .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
.hq-todo-cards li a{padding:14px 14px 14px 16px;border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04);min-height:64px}
.hq-todo-cards li.ok a{border-left:4px solid #2fa36b}
.hq-todo-cards li a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10)}
.hq-todo-cards li b{color:#9aa7b5}
.hq-spark-area{animation:hqFadeUp .8s ease both;animation-delay:.3s}
@media (max-width:900px){.hq-hero-kpis{grid-template-columns:repeat(2,1fr)}.hq-hero-kpi b{font-size:22px}}
@media (prefers-reduced-motion:reduce){.hq-hero-kpi,.hq-todo-cards li,.hq-spark-area{animation:none}}

.hq-home-grid .panel h2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hq-home-grid .panel h2 .hq-h-act{margin-left:auto;font-weight:600}
.hq-home-kpis .hq-kpi{transition:transform .15s,box-shadow .15s}
.hq-home-kpis .hq-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10)}

/* ===== G2 (927): Clienti — numbers, customer cards with the licence semaphore, the side sheet ===== */
.pu-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.pu-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #dfe5ee;color:#1b2430;text-decoration:none;position:relative;transition:transform .15s,box-shadow .15s;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(120ms + var(--i,0)*55ms)}
.pu-kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.pu-kpi.ok::before{background:#2fa36b}.pu-kpi.warn::before{background:#e0a92b}.pu-kpi.bad::before{background:#d64545}
.pu-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10);text-decoration:none}
.pu-kpi i{font-style:normal;font-size:16px}
.pu-kpi b{font-size:26px;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.pu-kpi small{color:#5b6875;font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}
.pu-kpi.cta{background:#1b2430;border-color:#1b2430;color:#fff}.pu-kpi.cta small{color:#c5ccd6}.pu-kpi.cta::before{background:#e0a92b}
.pu-rows .pu-cust{position:relative;border-radius:14px;box-shadow:0 1px 2px rgba(20,30,50,.04);animation:hqFadeUp .36s cubic-bezier(.2,.7,.2,1) both;transition:transform .15s,box-shadow .15s,border-color .15s}
.pu-rows .pu-cust::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.pu-rows .pu-cust.ok::before{background:#2fa36b}.pu-rows .pu-cust.warn::before{background:#e0a92b}.pu-rows .pu-cust.bad::before{background:#d64545}.pu-rows .pu-cust.gone::before{background:#9aa7b5}
.pu-rows .pu-cust:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10)}
.pu-admins{margin-top:16px}
/* the sheet: a page inside a page, from the right */
.hq-sheet-bd{position:fixed;inset:0;background:rgba(15,22,34,.45);backdrop-filter:blur(2px);z-index:900;animation:hqFadeUp .2s ease both}
.hq-sheet{position:fixed;top:0;right:0;bottom:0;width:min(860px,94vw);background:#f4f6f9;z-index:901;box-shadow:-18px 0 50px rgba(15,22,34,.35);display:flex;flex-direction:column;transform:translateX(30px);opacity:0;animation:hqSheetIn .38s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes hqSheetIn{to{transform:none;opacity:1}}
.hq-sheet-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #e3e9ee}
.hq-sheet-h b{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-sheet-h .btn{padding:6px 10px}
.hq-sheet iframe{flex:1;width:100%;border:0;background:#f4f6f9}
body.hq-sheet-open{overflow:hidden}
body.pn-embed .pn-main{padding:14px 18px}
body.pn-embed .hqsb,body.pn-embed .hqtb,body.pn-embed .hqmb,body.pn-embed .hqsb-backdrop,body.pn-embed .hq-ptabs,body.pn-embed .app-footer,body.pn-embed .pn-top{display:none!important}
@media (prefers-reduced-motion:reduce){.pu-kpi,.pu-rows .pu-cust,.hq-sheet,.hq-sheet-bd{animation:none;transform:none;opacity:1}}

/* ===== G2 (928): Ordini — numbers as doors, segmented filter, rows as cards with the amount in evidence ===== */
.od-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.od-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #dfe5ee;color:#1b2430;text-decoration:none;position:relative;transition:transform .15s,box-shadow .15s;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(120ms + var(--i,0)*55ms)}
.od-kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.od-kpi.ok::before{background:#2fa36b}.od-kpi.warn::before{background:#e0a92b}.od-kpi.bad::before{background:#d64545}
.od-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10);text-decoration:none}
.od-kpi i{font-style:normal;font-size:16px}
.od-kpi b{font-size:24px;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.od-kpi small{color:#5b6875;font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}
.tabs.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#eef2f6;border:1px solid #dfe5ee}
.tabs.seg .tab{border:0;border-radius:999px;padding:6px 12px;margin:0;background:transparent;color:#4c5a68;font-weight:600;font-size:13px;transition:background .15s,color .15s,box-shadow .15s}
.tabs.seg .tab.active{background:#fff;color:#1b2430;box-shadow:0 1px 3px rgba(20,30,50,.12)}
.od-list .od-row{animation:hqFadeUp .34s cubic-bezier(.2,.7,.2,1) both;transition:transform .15s,box-shadow .15s}
.od-list .od-row:nth-child(2){animation-delay:40ms}.od-list .od-row:nth-child(3){animation-delay:80ms}.od-list .od-row:nth-child(4){animation-delay:120ms}.od-list .od-row:nth-child(5){animation-delay:160ms}.od-list .od-row:nth-child(6){animation-delay:200ms}.od-list .od-row:nth-child(7){animation-delay:240ms}.od-list .od-row:nth-child(8){animation-delay:280ms}
.od-list .od-row:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,30,50,.08)}
.od-list .od-amount{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.od-kpi,.od-list .od-row{animation:none}}

/* ===== G2 (928): Assistenza — the queue as cards with the status semaphore, counters that count ===== */
.tk-hero .pn-kpi{transition:transform .15s,box-shadow .15s;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both}
.tk-hero .pn-kpi:nth-child(2){animation-delay:60ms}.tk-hero .pn-kpi:nth-child(3){animation-delay:120ms}.tk-hero .pn-kpi:nth-child(4){animation-delay:180ms}
.tk-hero .pn-kpi:hover{transform:translateY(-2px)}
#tk-list .tk-item{position:relative;animation:hqFadeUp .32s cubic-bezier(.2,.7,.2,1) both;transition:transform .15s,box-shadow .15s}
#tk-list .tk-item:nth-child(2){animation-delay:35ms}#tk-list .tk-item:nth-child(3){animation-delay:70ms}#tk-list .tk-item:nth-child(4){animation-delay:105ms}#tk-list .tk-item:nth-child(5){animation-delay:140ms}#tk-list .tk-item:nth-child(6){animation-delay:175ms}#tk-list .tk-item:nth-child(7){animation-delay:210ms}#tk-list .tk-item:nth-child(8){animation-delay:245ms}
#tk-list .tk-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
#tk-list .tk-item[data-status="open"]::before{background:#e0a92b}
#tk-list .tk-item[data-status="answered"]::before{background:#2fa36b}
#tk-list .tk-item[data-status="closed"]::before{background:#9aa7b5}
#tk-list .tk-item[data-prio="urgent"]::before,#tk-list .tk-item[data-prio="high"]::before{background:#d64545}
#tk-list .tk-item:hover{transform:translateX(2px)}
.tk-detail{animation:hqFadeUp .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:120ms}
@media (prefers-reduced-motion:reduce){.tk-hero .pn-kpi,#tk-list .tk-item,.tk-detail{animation:none}}

/* ===== G3 (929): money pages — Movimenti, Riconciliazione, Insolvenze, Contestazioni ===== */
.lg2-kpis > div{position:relative;border:1px solid #dfe5ee;border-radius:14px;padding:12px 14px 12px 16px;transition:transform .15s,box-shadow .15s;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both}
.lg2-kpis > div:nth-child(2){animation-delay:60ms}.lg2-kpis > div:nth-child(3){animation-delay:120ms}.lg2-kpis > div:nth-child(4){animation-delay:180ms}.lg2-kpis > div:nth-child(5){animation-delay:240ms}.lg2-kpis > div:nth-child(6){animation-delay:300ms}
.lg2-kpis > div::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.lg2-kpis > div:has(.lg2-in)::before{background:#2fa36b}.lg2-kpis > div:has(.lg2-out)::before{background:#d64545}
.lg2-kpis > div:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10)}
.lg2-kpis b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lg2-table tbody tr{animation:hqFadeUp .32s cubic-bezier(.2,.7,.2,1) both}
.lg2-table tbody tr:nth-child(2){animation-delay:35ms}.lg2-table tbody tr:nth-child(3){animation-delay:70ms}.lg2-table tbody tr:nth-child(4){animation-delay:105ms}.lg2-table tbody tr:nth-child(5){animation-delay:140ms}.lg2-table tbody tr:nth-child(6){animation-delay:175ms}.lg2-table tbody tr:nth-child(7){animation-delay:210ms}.lg2-table tbody tr:nth-child(8){animation-delay:245ms}
.dn-row{animation:hqFadeUp .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
.dn-row td:first-child{border-left:4px solid #e0a92b}
.dp-list .dp-card{animation:hqFadeUp .36s cubic-bezier(.2,.7,.2,1) both;transition:transform .15s,box-shadow .15s;position:relative}
.dp-list .dp-card:nth-child(2){animation-delay:50ms}.dp-list .dp-card:nth-child(3){animation-delay:100ms}.dp-list .dp-card:nth-child(4){animation-delay:150ms}.dp-list .dp-card:nth-child(5){animation-delay:200ms}
.dp-list .dp-card::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#e0a92b}
.dp-list .dp-card.is-susp::before{background:#d64545}.dp-list .dp-card.is-claim::before{background:#d64545}
.dp-list .dp-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10)}
.hq-rc-main .panel .voucher-table tbody tr{animation:hqFadeUp .3s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.lg2-kpis > div,.lg2-table tbody tr,.dn-row,.dp-list .dp-card,.hq-rc-main .panel .voucher-table tbody tr{animation:none}}

.rc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.rc-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 16px;border-radius:14px;background:#fff;border:1px solid #dfe5ee;position:relative;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(120ms + var(--i,0)*55ms)}
.rc-kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.rc-kpi.ok::before{background:#2fa36b}.rc-kpi.warn::before{background:#e0a92b}.rc-kpi.bad::before{background:#d64545}
.rc-kpi i{font-style:normal;font-size:16px}.rc-kpi b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.rc-kpi small{color:#5b6875;font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}
@media (prefers-reduced-motion:reduce){.rc-kpi{animation:none}}

/* ===== G4 (930): Agenda, Avvisi, Scadenze — the to-do pages ===== */
.ag-kpis,.al-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.ag-kpi,.al-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 16px;border-radius:14px;background:#fff;border:1px solid #dfe5ee;color:#1b2430;text-decoration:none;position:relative;transition:transform .15s,box-shadow .15s;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(120ms + var(--i,0)*55ms)}
.ag-kpi::before,.al-kpi::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.ag-kpi.ok::before,.al-kpi.ok::before{background:#2fa36b}.ag-kpi.warn::before,.al-kpi.warn::before{background:#e0a92b}.ag-kpi.bad::before,.al-kpi.bad::before{background:#d64545}
.ag-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,50,.10);text-decoration:none}
.ag-kpi i,.al-kpi i{font-style:normal;font-size:16px}.ag-kpi b,.al-kpi b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.ag-kpi small,.al-kpi small{color:#5b6875;font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}
.ag-cells .ag-cell{transition:background .15s,transform .15s}.ag-cells .ag-cell:hover{background:#f6f8fb}
.ag-cells .ag-cell.today{box-shadow:inset 0 0 0 2px #e0a92b;border-radius:10px}
.ag-cells .ag-pill{transition:transform .12s}.ag-cells .ag-pill:hover{transform:translateX(2px)}
.hq-al-fam{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#eef2f6;border:1px solid #dfe5ee;margin:0 0 12px}
.hq-al-fam a{border:0;border-radius:999px;padding:6px 12px;margin:0;background:transparent;color:#4c5a68;font-weight:600;font-size:13px;text-decoration:none;transition:background .15s,color .15s,box-shadow .15s}
.hq-al-fam a.on{background:#fff;color:#1b2430;box-shadow:0 1px 3px rgba(20,30,50,.12)}
.hq-al-fam a i{font-style:normal;margin-left:4px;color:#9aa7b5;font-size:12px}
.hq-al-list li{position:relative;animation:hqFadeUp .32s cubic-bezier(.2,.7,.2,1) both;padding-left:12px!important;transition:background .15s}
.hq-al-list li:nth-child(2){animation-delay:35ms}.hq-al-list li:nth-child(3){animation-delay:70ms}.hq-al-list li:nth-child(4){animation-delay:105ms}.hq-al-list li:nth-child(5){animation-delay:140ms}.hq-al-list li:nth-child(6){animation-delay:175ms}.hq-al-list li:nth-child(7){animation-delay:210ms}.hq-al-list li:nth-child(8){animation-delay:245ms}
.hq-al-list li::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.hq-al-list li.lv-bad::before{background:#d64545}.hq-al-list li.lv-warn::before{background:#e0a92b}.hq-al-list li.lv-info::before{background:#3b7dd8}.hq-al-list li.read::before{opacity:.35}
.hq-al-list li:hover{background:#f6f8fb}
.ex-row{animation:hqFadeUp .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
.ex-row td:first-child{border-left:4px solid #c9d3df}.ex-row.ok td:first-child{border-left-color:#2fa36b}.ex-row.warn td:first-child{border-left-color:#e0a92b}.ex-row.bad td:first-child{border-left-color:#d64545}
@media (prefers-reduced-motion:reduce){.ag-kpi,.al-kpi,.hq-al-list li,.ex-row{animation:none}}

/* ===== G5 (931): Statistiche prodotto — utilities instead of inline styles, charts that draw and bars that grow ===== */
.muted.sm{font-size:12.5px}.muted.xs{font-size:12px}.muted.md{font-size:13px}
.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.my-4{margin:4px 0}.flex-1{flex:1}.fs-24{font-size:24px}.fs-26{font-size:26px}
.la-foot-note{max-width:1080px;margin:14px auto 0;padding:0 20px}
.la-chart .la-line{stroke-dasharray:1;stroke-dashoffset:1;animation:laDraw 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.la-chart .la-line.u{animation-delay:.15s}.la-chart .la-line.c{animation-delay:.3s}
@keyframes laDraw{to{stroke-dashoffset:0}}
.la-chart .la-area{opacity:0;animation:laFade .9s ease forwards;animation-delay:.6s}
@keyframes laFade{to{opacity:1}}
.la-chart .la-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:laPop .35s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:1.1s}
@keyframes laPop{to{transform:scale(1)}}
.la-funnel .la-fstep{animation:hqFadeUp .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
.la-funnel .la-fbar{animation:laGrow .8s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(120ms + var(--i,0)*70ms);transform-origin:left center}
@keyframes laGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.la-bar i{animation:laGrow .7s cubic-bezier(.2,.9,.2,1) both;transform-origin:left center}
.la-kpis .pn-kpi{animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both}
.la-kpis .pn-kpi:nth-child(2){animation-delay:60ms}.la-kpis .pn-kpi:nth-child(3){animation-delay:120ms}.la-kpis .pn-kpi:nth-child(4){animation-delay:180ms}.la-kpis .pn-kpi:nth-child(5){animation-delay:240ms}
.la-pulse{animation:hqPulseDot 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.la-chart .la-line,.la-chart .la-area,.la-chart .la-dot,.la-funnel .la-fstep,.la-funnel .la-fbar,.la-bar i,.la-kpis .pn-kpi,.la-pulse{animation:none;opacity:1;transform:none;stroke-dashoffset:0}}

/* ===== G6 (932): utilities instead of inline styles on every desk; buttons on ONE line ===== */
.fs-12{font-size:12px}.fs-125{font-size:12.5px}.fs-13{font-size:13px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.my-8{margin:8px 0}.m-0{margin:0}.m-chip{margin:0 4px 4px 0}
.span-all{grid-column:1/-1}.ta-c{text-align:center}.flex-wrap-8{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mw-360{max-width:360px}.mw-460{max-width:460px}.mw-520{max-width:520px}.w-80{width:80px}.w-90{width:90px}.w-110{width:110px}.d-ib{display:inline-block}.c-inherit{color:inherit}
/* buttons aligned everywhere on the seat (never a misaligned button): one box model for <a> and <button>,
 * one height per size, inline forms without stray margins, headers with the action on the same line */
html[data-hq] .inline{margin:0;vertical-align:middle;align-items:center;gap:6px}
html[data-hq] .inline + .inline,html[data-hq] .inline + .btn,html[data-hq] .btn + .inline,html[data-hq] .btn + .btn{margin-left:6px}
html[data-hq] .inline > input:not([type=checkbox]):not([type=radio]),html[data-hq] .inline > select{height:38px;box-sizing:border-box;vertical-align:middle;margin:0}
html[data-hq] .panel h2,html[data-hq] .panel h3.hm-sub{display:block;line-height:1.35}
html[data-hq] .panel h2::after{content:"";display:table;clear:both}
html[data-hq] .panel h2 > .btn,html[data-hq] .panel h2 > .inline,html[data-hq] .panel h2 > form,html[data-hq] .panel h2 > .h2-right{float:right;margin-left:10px;margin-top:-2px}
html[data-hq] .panel h2 > .mtp-count{margin-left:6px;vertical-align:middle}
html[data-hq] .panel h2 > .mtp-count{margin-left:0}
html[data-hq] .pn-hero .btn,html[data-hq] .pe-status .btn{vertical-align:middle}
html[data-hq] .grid-3 .btn,html[data-hq] .grid-2 .btn{margin-top:4px}
html[data-hq] .voucher-table .hq-actions .btn,html[data-hq] .voucher-table td .btn{margin:2px 0}
html[data-hq] .pt-savebar .btn{margin:0}

/* ===== G7 (933): Sistema — keys with the semaphore, backup numbers, uniform toolbars; buttons of ONE size per toolbar ===== */
.pn-page .ak-key{position:relative;padding-left:18px;animation:hqFadeUp .34s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*50ms);transition:transform .15s,box-shadow .15s}
.pn-page .ak-key::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#c9d3df}
.pn-page .ak-key[data-status="active"]::before{background:#2fa36b}.pn-page .ak-key[data-status="retiring"]::before{background:#e0a92b}.pn-page .ak-key[data-status="revoked"]::before,.pn-page .ak-key[data-status="expired"]::before{background:#9aa7b5}
.pn-page .ak-key:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,30,50,.08)}
html[data-hq] .bk-kpis > div{position:relative;border:1px solid #dfe5ee;border-radius:14px;animation:hqPop .4s cubic-bezier(.2,.7,.2,1) both}
html[data-hq] .bk-kpis > div:nth-child(2){animation-delay:60ms}html[data-hq] .bk-kpis > div:nth-child(3){animation-delay:120ms}html[data-hq] .bk-kpis > div:nth-child(4){animation-delay:180ms}
/* one size per toolbar: every action group uses the small size, so no button towers over its neighbours */
html[data-hq] .mtp-actions .btn,html[data-hq] .hq-actions .btn,html[data-hq] .sl-hero-btns .btn.sm{min-height:30px;padding:0 10px;font-size:12.5px}
html[data-hq] .panel h2 .btn{min-height:30px;padding:0 10px;font-size:12.5px}
html[data-hq] .pt-savebar .btn,html[data-hq] form.pp-form .btn.primary,html[data-hq] .pn-hero .btn.primary{min-height:36px}
@media (prefers-reduced-motion:reduce){.pn-page .ak-key,html[data-hq] .bk-kpis > div{animation:none}}

/* ===== 934: one scale for every button of the seat — 36 / 30 / 44, fixed, whatever glyph sits inside ===== */
html[data-hq] .btn.wide{width:100%}
html[data-hq] .od-head,html[data-hq] button.mtp-card,html[data-hq] .link-btn,html[data-hq] .an-close,html[data-hq] .hqmb-btn,html[data-hq] .pcu-more,html[data-hq] .uv-copyable{height:auto;min-height:0}
html[data-hq] .pcu-more{height:30px;min-height:30px}
html[data-hq] .pcu-actions .btn,html[data-hq] .pcu-actions form.inline .btn{height:36px;min-height:36px}
html[data-hq] .btn.sm.le-restore{height:30px;padding:0 10px;border-width:1px}
html[data-hq] .nl-preview-head button{height:30px;min-height:30px;display:inline-flex;align-items:center;box-sizing:border-box}
html[data-hq] .ag-b,html[data-hq] .ag-seg-b,html[data-hq] .qt-fchip,html[data-hq] .mtp-chip{height:30px;min-height:30px;box-sizing:border-box;display:inline-flex;align-items:center}
html[data-hq] .mtp-chip{height:26px;min-height:26px}
/* agenda: the calendar never wider than its card, pills that cut instead of pushing, lists without bullets (934) */
html[data-hq] .ag-cells{grid-template-columns:repeat(7,minmax(0,1fr))}
html[data-hq] .ag-cell{min-width:0;overflow:hidden}
html[data-hq] .ag-pill{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html[data-hq] .ag-list,html[data-hq] ul.ag-list{list-style:none;margin:0;padding:0}
html[data-hq] .ag-list li{list-style:none}
/* newsletter: the editor gets room, the preview follows; the send bar is a row (934) */
html[data-hq] .nl-layout{grid-template-columns:minmax(460px,1fr) minmax(320px,520px)}
@media (max-width:1180px){html[data-hq] .nl-layout{grid-template-columns:1fr}html[data-hq] .nl-preview-wrap{position:static}}
html[data-hq] .nl-toolbar button{height:30px;min-height:30px;display:inline-flex;align-items:center}

/* 934: glyphs, not emoji, in the cards of the mani G2–G7 — monochrome, in the colour of the text around them */
.hq-hero-kpi i svg.hqi,.pu-kpi i svg.hqi,.od-kpi i svg.hqi,.rc-kpi i svg.hqi,.ag-kpi i svg.hqi,.al-kpi i svg.hqi{width:18px;height:18px;display:block;opacity:.9}
.hq-hero-kpi i{color:#dfe9ff}.pu-kpi i,.od-kpi i,.rc-kpi i,.ag-kpi i,.al-kpi i{color:#5b6875;font-size:0}
.pu-kpi.cta i{color:#e0a92b}
.hq-todo i svg.hqi{width:20px;height:20px;display:block;color:#4c5a68}.hq-todo li.bad i svg.hqi{color:#d64545}.hq-todo li.warn i svg.hqi{color:#b8860b}
/* 934: agenda items in narrow columns (Oggi): actions on their own line under the text, never a four-line title beside four buttons */
html[data-hq] .hq-home-grid .ag-it,html[data-hq] .ag-compact .ag-it{flex-wrap:wrap}
html[data-hq] .hq-home-grid .ag-it .ag-body,html[data-hq] .ag-compact .ag-it .ag-body{flex:1 1 60%;min-width:0}
html[data-hq] .hq-home-grid .ag-acts,html[data-hq] .ag-compact .ag-acts{flex:1 1 100%;max-width:none;justify-content:flex-start;padding-left:42px}
html[data-hq] .hq-lo-amt{white-space:nowrap}
/* 934: Clienti on a phone — one column, customer rows that fold instead of pushing the page sideways */
@media (max-width:900px){html[data-hq] .pu-layout{grid-template-columns:minmax(0,1fr)}html[data-hq] .pu-layout>*{min-width:0}}
@media (max-width:700px){
html[data-hq] .pu-rows .pu-cust{grid-template-columns:34px minmax(0,1fr) 14px;grid-template-areas:"av who chev" "av mail chev" "av id chev" "av badges chev";row-gap:2px}
html[data-hq] .pu-rows .pu-cust .pn-avatar{grid-area:av}html[data-hq] .pu-rows .pu-cust .pu-r-who{grid-area:who}html[data-hq] .pu-rows .pu-cust .pu-r-mail{grid-area:mail;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html[data-hq] .pu-rows .pu-cust .pu-r-id{grid-area:id}html[data-hq] .pu-rows .pu-cust .pu-r-badges{grid-area:badges;display:flex;flex-wrap:wrap;gap:4px}html[data-hq] .pu-rows .pu-cust .od-chev{grid-area:chev}
html[data-hq] .pu-kpis{grid-template-columns:repeat(2,1fr)}
html[data-hq] .changelog-date,html[data-hq] .cl-date{white-space:normal}
}
@media (max-width:700px){html[data-hq] .pu-card header{flex-wrap:wrap}html[data-hq] .pu-card header>*{min-width:0}html[data-hq] .pu-card .pu-actions{flex:1 1 100%}html[data-hq] .pu-card .pu-actions form.inline{flex-wrap:wrap}html[data-hq] .pu-card .pu-actions .btn{flex:1 1 auto}}
@media (max-width:700px){html[data-hq],html[data-hq] body{overflow-x:hidden}}
/* 934: on a phone nothing stays sticky beside the content (side menus and previews scroll with the page) */
@media (max-width:700px){html[data-hq] .pc-sections,html[data-hq] .pc-preview,html[data-hq] .mtp-preview,html[data-hq] .rd-preview-wrap,html[data-hq] .nl-preview-wrap,html[data-hq] .pk-editor-side,html[data-hq] .le-preview,html[data-hq] .settings-tabs,html[data-hq] .tk-inbox,html[data-hq] .preview-col,html[data-hq] .vp-create{position:static;top:auto}}
/* 934: on touch screens the scale grows together — 40 / 36 / 48 — instead of one rule per container */
@media (max-width:700px){html[data-hq] .btn,html[data-hq] .btn-row .btn,html[data-hq] .lg2-filters > .btn,html[data-hq] .uv-state-actions .btn{height:40px;min-height:40px}html[data-hq] .btn.sm{height:36px;min-height:36px}html[data-hq] .btn.lg{height:48px;min-height:48px}html[data-hq] .btn-row form.inline{min-height:0}}
html[data-hq] .nl-preview-wrap{top:104px}   /* 934: the sticky preview head stays clear of the sticky tab strip */

/* ===== 935: the product strip on one line (it scrolls, never wraps), the product switch on the right; glyphs in the hub ===== */
html[data-hq] .hq-ptabs::-webkit-scrollbar{display:none}
html[data-hq] .ag-quick{margin-bottom:16px}
html[data-hq] .hq-ptabs .hq-ptab,html[data-hq] .hq-ptabs-name{flex:0 0 auto}
html[data-hq] .hq-ptabs .hq-ptab-other{margin-left:auto;position:sticky;right:0;background:#fff;padding-left:14px;box-shadow:-14px 0 14px -6px #fff}
.hq-hub-ico .hqi{width:22px;height:22px;color:#1b2430}
.hq-hub-card.ok .hq-hub-ico .hqi{color:#1c6b3c}.hq-hub-card.warn .hq-hub-ico .hqi{color:#b8860b}.hq-hub-card.bad .hq-hub-ico .hqi{color:#b93434}
.hq-hub-ico{font-size:0}
/* 935: easier pages — the New sale form centred, the Contents languages as a segmented control, the Analyst's numbers in three columns */
html[data-hq] .hq-new-form,html[data-hq] .hq-new-prod{max-width:960px}
html[data-hq] .pc-langs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:#eef2f6;border:1px solid #dfe5ee;margin-bottom:12px}
html[data-hq] .pc-langs .mtp-lang{border-radius:999px;padding:5px 11px;font-size:12px}html[data-hq] .pc-langs .mtp-lang.on,html[data-hq] .pc-langs .mtp-lang[aria-current]{background:#fff;color:#1b2430;box-shadow:0 1px 3px rgba(20,30,50,.12)}
html[data-hq] .hq-dir-split .bk-kpis,html[data-hq] .pn-main > .panel .bk-kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* 935: panel titles with the bar's glyph, never an emoji */
html[data-hq] .panel h2 .hqi-h,html[data-hq] h2 .hqi-h{display:inline-flex;width:20px;height:20px;margin-right:8px;color:#4c5a68;vertical-align:-3px;flex:0 0 20px}
html[data-hq] h2 .hqi-h .hqi{width:20px;height:20px}

html[data-hq] .btn .hqi-b{display:inline-flex;width:16px;height:16px;flex:0 0 16px;margin-right:2px}html[data-hq] .btn.sm .hqi-b{width:14px;height:14px;flex-basis:14px}html[data-hq] .btn .hqi-b .hqi{width:100%;height:100%}
html[data-hq] .btn.primary .hqi-b,html[data-hq] .btn.accent .hqi-b{color:#fff}
/* 935: the filter bars (Movements, Activity log) on one compact line: narrow fields, buttons to size */
html[data-hq] .lg2-filters label{flex:0 1 190px;min-width:150px}
html[data-hq] .lg2-filters label.lg2-q,html[data-hq] .lg2-filters label:has(input[type="search"]),html[data-hq] .lg2-filters label:has(input[name="q"]){flex:1 1 220px}
html[data-hq] .lg2-filters label input,html[data-hq] .lg2-filters label select{width:100%;box-sizing:border-box;min-height:36px;margin:0}
html[data-hq] .lg2-filters .btn,html[data-hq] .lg2-filters .btn.wide,html[data-hq] .lg2-filters > .btn{flex:0 0 auto;width:auto;margin:0}
html[data-hq] .lg2-filters .check-label{flex:0 0 auto;align-self:flex-end}
html[data-hq] .pn-page .panel > form.lg2-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}   /* beats the generic "panel form = grid" of the desktop */
html[data-hq] .lg2-filters label.check-label{flex-direction:row;align-items:center;gap:6px;min-width:0;flex:0 0 auto}html[data-hq] .lg2-filters label.check-label input{width:16px;height:16px;min-height:0;margin:0}
/* 937: glyphs in every text of the seat (titles, buttons, chips, rows, heroes): never an emoji */
html[data-hq] .hqi-t{display:inline-flex;width:1em;height:1em;vertical-align:-.15em;color:currentColor;flex:0 0 auto}
html[data-hq] .hqi-t .hqi{width:100%;height:100%}
html[data-hq] h2 .hqi-t,html[data-hq] h3 .hqi-t{width:20px;height:20px;margin-right:6px;vertical-align:-3px;color:#4c5a68}
html[data-hq] .btn .hqi-t{width:15px;height:15px;vertical-align:-2px}
html[data-hq] .pn-hero-ico .hqi-t{width:26px;height:26px;color:#fff}
html[data-hq] .badge .hqi-t,html[data-hq] .chip .hqi-t,html[data-hq] .pu-chip .hqi-t{width:12px;height:12px;vertical-align:-1px}
html[data-hq] .hqsb .hqi-t{display:none}
html[data-hq] .hq-pal-it i .hqi{width:18px;height:18px;color:#4c5a68}html[data-hq] .hq-pal-it i{display:inline-flex;align-items:center;justify-content:center}
html[data-hq] .cp-ico .hqi,html[data-hq] #cpt-ico .hqi{width:18px;height:18px;vertical-align:-3px}
html[data-hq] .hq-lo-amt,html[data-hq] .hq-lo-amt small{white-space:nowrap;flex:0 0 auto}
/* 943: the seat's glyphs are sized on every page it serves, the account alias included (an unsized SVG is a full-width picture) */
.hqi-t{display:inline-flex;width:1em;height:1em;vertical-align:-.15em;color:currentColor;flex:0 0 auto}.hqi-t .hqi{width:100%;height:100%}
/* 945 — contrast on the dark surfaces of the seat (Chromium census, AA 4.5): dark heroes, top bar money, amber badges */
.hq-home-hero .hq-home-lead .muted,.hq-home-hero p.muted,.pn-hero p,.pn-hero .muted,.pn-hero-text p{color:rgba(255,255,255,.86)}
.hq-home-hero .hq-hero-kpi .hq-count,.hq-home-hero .hq-hero-kpi.neutral .hq-count{color:#fff}.hq-home-hero .hq-hero-kpi small,.hq-home-hero .hq-hero-kpi .hq-kpi-label{color:rgba(255,255,255,.8)}
.pn-hero.sl-hero .sl-check,.pn-hero.sl-hero .sl-check b,.pn-hero.sl-hero .sl-check .ok,.pn-hero.sl-hero .sl-check span{color:#fff}
.mtp-mail-head,.mtp-mail-head span,.mtp-mail-head b{color:rgba(255,255,255,.88)}
html[data-hq] .hqtb-today span{color:#eef2f7}html[data-hq]:not([data-theme="dark"]) .hqtb-today b,html[data-hq] .hqtb-today b.hq-count{color:#ffd77a}
html[data-hq] .badge.used{color:#8a5400;background:#fff1cf}
html[data-hq] .hqtb-today,html[data-hq] .hqtb-today span,html[data-hq] .hqtb-today small{color:#eef2f7}
html[data-hq]:not([data-theme="dark"]) .hqtb-today,html[data-hq]:not([data-theme="dark"]) .hqtb-today span,html[data-hq]:not([data-theme="dark"]) .hqtb-today small{color:#eef2f7}
html[data-hq] .tk-prod{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#eef2f6;color:#4c5772;margin-left:6px;vertical-align:middle}
.ck2-profiles{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:#f4f6fb;border:1px solid #e0e5f0}.ck2-profiles label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:#4c5772;margin:0}.ck2-profiles select{height:40px;border-radius:10px;border:1px solid #e0e5f0;background:#fff;font:inherit;font-size:14px;padding:0 10px}.ck2-profiles small{display:block;margin-top:6px;font-size:12.5px}
html[data-hq] .pcu-bps{display:grid;gap:8px;margin:6px 0 16px}html[data-hq] .pcu-bp{padding:10px 12px;border-radius:12px;background:#f7f8fb;border:1px solid #e0e5f0;font-size:13.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere}html[data-hq] .pcu-bp b,html[data-hq] .pcu-bp small{overflow-wrap:anywhere;min-width:0;white-space:normal}html[data-hq] .pcu-bps{min-width:0}html[data-hq] .pcu-bps > *{min-width:0}html[data-hq] .pcu-bp.on{border-color:var(--hq-gold-2,#c99a2e)}html[data-hq] .pcu-bp .badge{margin-left:4px}
.ck2-signin{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ck2-signin b{font-size:14px}.ck2-signin small{flex:1 1 100%;margin-top:2px}

/* ===== 970: the customer portal card (Settings, the owner): host, state, three lights ===== */
.myp-card { border-left: 4px solid var(--line); }
.myp-card.up { border-left-color: #2e9e5b; } .myp-card.down { border-left-color: #b93434; } .myp-card.set { border-left-color: #c78b2d; }
.myp-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.myp-title { flex: 1 1 320px; min-width: 0; } .myp-title h2 { margin: 0 0 4px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); display: flex; align-items: center; gap: 8px; } .myp-title p { margin: 0; }
html[data-hq] .myp-title h2 { font-size: 15px; letter-spacing: .01em; color: var(--hq-deep); }
.myp-status { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); flex: 0 1 300px; min-width: 0; }
.myp-status b { display: block; font-size: 14.5px; } .myp-status small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.myp-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; background: #9aa5b1; }
.myp-card.up .myp-dot { background: #2e9e5b; box-shadow: 0 0 0 4px rgba(46,158,91,.18); }
.myp-card.down .myp-dot { background: #b93434; box-shadow: 0 0 0 4px rgba(185,52,52,.18); }
.myp-card.set .myp-dot { background: #c78b2d; box-shadow: 0 0 0 4px rgba(199,139,45,.18); }
.myp-form { margin-top: 14px; }
.myp-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.myp-row label { flex: 1 1 320px; margin: 0; } .myp-row label input { margin-bottom: 0; } .myp-row .btn { flex: 0 0 auto; }
.myp-help { margin: 6px 0 0; }
.myp-lights { margin: 14px 0 10px; } .myp-lights .sv-item.ok em { color: var(--ink-soft); }
.myp-actions { align-items: center; gap: 10px; flex-wrap: wrap; } .myp-actions small { flex-basis: 100%; margin: 0; }
.myp-howto { margin-top: 10px; } .myp-howto .gg-howto { margin: 0 0 6px; }
@media (max-width: 700px) { .myp-status { flex-basis: 100%; } .myp-row .btn { width: 100%; } }
/* ===== 970: the settings sub-tabs (one strip, one pane on screen) ===== */
.ps-subtabs { margin: 0 0 16px; }
.ps-pane > .panel:last-child { margin-bottom: 16px; }

/* ---------- packages desk (531): stage, list, editor ---------- */
.pkd-stage { padding: 18px 18px 22px; }
.pkd-stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pkd-stage-bar small { display: block; opacity: .8; font-size: 12px; margin-top: 2px; }
.pkd-stage-ctl { display: flex; gap: 10px; flex-wrap: wrap; }
.pkd-seg { display: inline-flex; background: rgba(255,255,255,.12); border-radius: 12px; padding: 3px; gap: 2px; }
.pkd-seg button { border: 0; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 9px; cursor: pointer; opacity: .75; }
.pkd-seg button.on { background: #fff; color: #10202b; opacity: 1; }
.pkd-preview { max-width: 420px; margin: 0 auto; transition: opacity .2s; }
.pkd-preview.busy { opacity: .6; }
.pkd-preview .pc-offer { margin-bottom: 14px; font-size: 13px; }
.pkd-preview .pc-btn, .pkd-preview .pc-ask, .pkd-preview .pc-qf { pointer-events: none; }
.pkd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; margin-top: 16px; }
@media (max-width: 1100px) { .pkd-layout { grid-template-columns: 1fr; } }

.pkd-list-head { display: flex; justify-content: space-between; align-items: center; }
.pkd-row { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.pkd-row.off { opacity: .6; } .pkd-row.editing { border-color: #3be09a; box-shadow: 0 0 0 3px rgba(59,224,154,.25); }
.pkd-row-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pkd-row-name code { font-size: 12px; opacity: .8; }
.pkd-row-facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); } .pkd-row-facts em { font-style: normal; font-weight: 800; color: #0f7f6c; } .pkd-row-facts s { opacity: .7; }
 .pkd-row-actions .inline { margin: 0; } .pkd-row-actions .switch-label { font-size: 12.5px; }
.pkd-how { margin-top: 6px; }
.pkd-editor { min-width: 0; }
.pkd-sec { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0 0 14px; background: var(--card); }
.pkd-sec legend { padding: 0 8px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.pkd-sec .grid-3 { gap: 10px; }
.pkd-form textarea { font-family: inherit; }
.pkd-accent { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.pkd-sw { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
.pkd-sw input { display: none; } .pkd-sw i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); background: #e3ded3; }
.pkd-sw-gold i { background: linear-gradient(120deg, #c99a2e, #e0b95a); } .pkd-sw-blue i { background: linear-gradient(120deg, #2f6df6, #22c1a4); } .pkd-sw-teal i { background: #22c1a4; } .pkd-sw-pink i { background: #ff7ab6; } .pkd-sw-none i { background: #fffdf9; } .pkd-sw-auto i { background: conic-gradient(#c99a2e, #fffdf9, #c99a2e); }
.pkd-sw:has(input:checked) { border-color: #10202b; box-shadow: 0 0 0 2px rgba(16,32,43,.12); }
.pkd-calc { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 12px; background: #eef5f3; font-size: 13px; } .pkd-calc b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #0f7f6c; }
.pkd-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; position: relative; }
.pkd-tabs [role=tab] { border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 9px; cursor: pointer; position: relative; }
.pkd-tabs [role=tab].on { background: #10202b; color: #fff; border-color: #10202b; }
.pkd-tabs [role=tab] i { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e0b95a; }
.pkd-tabs-right { margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pkd-menu { position: absolute; right: 0; top: 34px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 2px; z-index: 5; box-shadow: 0 12px 30px rgba(16,32,43,.15); min-width: 220px; }
.pkd-menu button { border: 0; background: transparent; font: inherit; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .pkd-menu button:hover { background: #f1f4f8; }
.pkd-tr { display: grid; gap: 10px; }
.pkd-save { align-items: center; }
.pkd-over { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-soft); margin: 0 6px; cursor: pointer; }
/* ---------- coupons desk (538): tabs, stage with the checkout summary, sectioned editor ---------- */
.cpd-tabs { margin: 8px 0 14px; background: #eef2f6; } .cpd-tabs button { color: var(--ink); } .cpd-tabs button.on { background: #10202b; color: #fff; } .cpd-tabs em { font-style: normal; font-size: 11px; opacity: .8; margin-left: 4px; }
.cpd-stage { padding: 18px 18px 22px; margin-bottom: 16px; }
.cpd-preview { max-width: 460px; margin: 0 auto; }
.cpd-sum { background: #fffdf9; color: #1c2230; border-radius: 18px; padding: 18px 20px; display: grid; gap: 8px; box-shadow: 0 20px 50px rgba(15,21,36,.25); }
.cpd-sum-head { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid #e3ded3; } .cpd-sum-head b { font-size: 18px; }
.cpd-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a8f9b; }
.cpd-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #5a6070; } .cpd-line b { color: #1c2230; font-variant-numeric: tabular-nums; }
.cpd-coupon code { background: #fbf3df; color: #8a6414; border-radius: 6px; padding: 1px 6px; font-weight: 800; }
.cpd-total { padding-top: 8px; border-top: 1px dashed #e3ded3; font-size: 15px; } .cpd-total b { font-size: 20px; font-weight: 900; }
.cpd-chips { display: flex; gap: 6px; flex-wrap: wrap; } .cpd-chips span { font-size: 12px; background: #ece8df; color: #5a6070; border-radius: 999px; padding: 3px 9px; }
.cpd-desc { font-size: 12.5px; color: #8a8f9b; }
.cpd-layout { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.25fr); }
@media (max-width: 1180px) { .cpd-layout { grid-template-columns: 1fr; } }   /* 561: the later .cpd-layout rule was overriding the one-column media query of .cp-layout */
.cpd-form .pkd-sec { margin-bottom: 12px; } .cpd-form .cp-kinds { margin-bottom: 12px; }
.cpk-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #eef2f6; font-weight: 900; font-size: 13px; }
.cp-list .pkd-list-head { margin-bottom: 10px; align-items: baseline; gap: 10px; }
.cp-kind i .hqi { width: 20px; height: 20px; }

.cp-kind i .cpk-glyph { display: inline; background: none; width: auto; height: auto; font-size: 18px; }
.pkd-src { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; max-height: 5.4em; overflow: hidden; border-left: 2px solid #e0b95a; padding-left: 8px; } .pkd-src:empty { display: none; }

/* the compact tables of the credits desks (platform_credits, the 360° panel, the books) */
.hq-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.hq-tbl th, .hq-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e7eb); vertical-align: top; text-align: left; }
.hq-tbl th { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); }
.hq-tbl tr.muted td { opacity: .6; }
.hq-tbl input[type=number], .hq-tbl input[type=text], .hq-tbl select { font-size: 13px; padding: 3px 6px; }
/* the reception assistant on the tablet (row 5): a box under the generation form, the answer in the same dark palette */
.rc-ai { margin: 18px auto 0; max-width: 420px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); }
.rc-ai-label { display: block; font-weight: 700; color: #f2c265; margin-bottom: 8px; }
.rc-ai-row { display: flex; gap: 8px; }
.rc-ai-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #fff; font-size: 15px; }
.rc-ai-answer { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.10); color: #fff; line-height: 1.5; font-size: 15px; white-space: pre-wrap; }
.rc-err { color: #ffb4a8; margin-top: 8px; font-size: 14px; }
/* measured 16/9 (ux10, phone): the seat's public footer links wrapped in a 24 px line with tap boxes that collided, the language select was 28 px */
@media (max-width: 560px) {
  .ld-footer { line-height: 34px; }
  .ld-footer a { display: inline-block; line-height: 34px; padding: 0 8px; }
  .ld-lang select { min-height: 38px !important; padding: 6px 26px 6px 10px !important; font-size: 14px !important; }
}
@media (max-width: 560px) {
  .app-footer { line-height: 30px; }   /* measured 16/9 (ux10, phone): the login footer's links wrapped 15 px apart with 25 px tap boxes */
  .app-footer a { display: inline-block; line-height: 30px; padding: 0 6px; }
  .lg-eye { min-height: 36px; min-width: 36px; }
}
@media (max-width: 560px) {
  .link-btn { min-height: 36px; display: inline-flex; align-items: center; }   /* measured 16/9 (ux10, phone): a link-styled button was 15 px tall */
}
/* measured 16/9 (ux10, phone): "Accetta tutto" was 26 px tall, the checkout's language select 28 (the checkout subset is cut from this file: the rule lives here) */
@media (max-width: 560px) {
  .ck-accept-all { min-height: 36px; padding: 6px 12px; }
  .ld-lang select { min-height: 36px !important; padding: 6px 26px 6px 10px !important; }
}
/* measured 16/9 (ux10, the owner's desk on a phone): the tickets inbox column, the sales mode grid, the wide tables and the
   deletion block ran past the edge; the priority pills were 24 px */
@media (max-width: 760px) {
  .tk-desk { grid-template-columns: minmax(0, 1fr); }
  .tk-inbox { position: static; max-height: none; max-width: 100%; min-width: 0; }
  .tk-inbox .tabs, .tk-filters, .tk-filters-row { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .tk-prio { min-height: 36px; padding: 6px 12px; }
  .lm-options { grid-template-columns: minmax(0, 1fr); }
  .mode-option { max-width: 100%; min-width: 0; }
  table.hq-tbl { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pd-del, .pcu-act { max-width: 100%; min-width: 0; }
  .pd-del-title, .pd-del-line { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  .tk-tools, .tk-tools-right { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .panel form.inline, .pn-main form.inline { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .pd-del-title, .pd-del-line { margin-left: 0; margin-right: 0; width: auto; box-sizing: border-box; }
}
/* measured 16/9 (ux10, phone): the deletion box of the customer 360 is a grid whose implicit column took the widest child's min-content */
.pd-del-box { grid-template-columns: minmax(0, 1fr); }
.pd-del-btns, .pcu-actrow { flex-wrap: wrap; max-width: 100%; min-width: 0; }
/* measured 16/9 (ux10 fase 7, desktop 1366): the API keys table grew wider than the page with the ai:run scope — it scrolls in its own box */
table.ak-tbl { display: block; max-width: 100%; overflow-x: auto; }
/* ====================================================== Credits (platform_credits.php, redesigned: a much better organised page) */
.pn-main .cr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }   /* every seat page that wears this head (D-M462): it was scoped to .cr-page, so on Disaster Recovery and Pacchetti crediti the button sat glued to what followed */
.cr-page .cr-head h1 { margin: 0 0 4px; }
.cr-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--hq-gold) 10%, var(--paper)); border: 1px solid var(--line); }
.cr-tab { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.cr-tab.on { background: var(--ink); color: #fff; }
.cr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.cr-kpi { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.cr-kpi b { display: block; font-size: 22px; line-height: 1.1; color: var(--hq-gold, #c99a2e); }
.cr-kpi small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.cr-byprod { max-width: 520px; }
.cr-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 10px; }
.cr-pack, .cr-skill { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--card); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cr-pack.off, .cr-skill.off { opacity: .72; border-style: dashed; }
.cr-pack.new { border-style: dashed; background: color-mix(in srgb, var(--hq-gold) 6%, var(--card)); }
.cr-pack-head, .cr-skill-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cr-pack-head b { font-size: 16px; }
.cr-pack-head code { font-size: 12px; color: var(--ink-soft); }
.cr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cr-fields.three { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cr-fields.four { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cr-fields label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.cr-fields label > span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.cr-fields input, .cr-fields select { width: 100%; box-sizing: border-box; margin: 0; height: 38px; }
.cr-tokens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.cr-facts div { min-width: 0; }
.cr-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.cr-facts dd { margin: 2px 0 0; font-weight: 700; }
.cr-facts dd small { display: block; font-weight: 400; color: var(--ink-soft); }
.cr-pack-foot, .cr-skill-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); }
.cr-flags { display: flex; gap: 14px; flex-wrap: wrap; }
.cr-flags .check-label { margin: 0; }
.cr-skills { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.cr-prices { max-width: 720px; }
.cr-prices input { width: 100%; box-sizing: border-box; margin: 0; }
.cr-models h3 { margin: 18px 0 4px; }
.badge.ok { background: #dcf5f0; color: #1e7a68; } .badge.bad { background: #fde4e1; color: #9b2b1f; }
@media (max-width: 760px) { .cr-fields, .cr-facts { grid-template-columns: 1fr; } .cr-kpi b { font-size: 20px; } }
.cr-off { margin-top: 12px; } .cr-off summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
/* the credits page on a phone: the figures two per row, not a column of seven cards */
@media (max-width: 560px) { .cr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-kpi b { font-size: 22px; } }
/* Archivio Spaces on the backup page (D-M221) */
.bk-s3 .bk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.bk-s3-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; align-items: end; }

.bk-s3-form label span { font-weight: 700; color: var(--hq-muted, #5e6a86); }


.bk-probe { list-style: none; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--hq-line, #e0e5f0); border-radius: 12px; display: grid; gap: 6px; font-size: 13px; }
/* the Spaces panel (D-M221): a head with the state pill, two aligned columns, labelled fields with hints */
.bk-s3-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-s3-head h2 { margin: 0; }
.bk-s3-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--hq-line, #e0e5f0); background: var(--paper); }
.bk-s3-pill i { width: 9px; height: 9px; border-radius: 50%; background: #9aa3b5; }
.bk-s3-pill.ok i { background: #1e9c8a; } .bk-s3-pill.bad i { background: #b93434; } .bk-s3-pill.wait i { background: #c99a2e; }
.bk-s3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.bk-s3-col { min-width: 0; }
.bk-s3-sub { margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.bk-s3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-s3-kpis > div { min-width: 0; } .bk-s3-kpis b { word-break: break-word; } .bk-s3-kpis em { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.bk-s3-runs { margin-top: 4px; } .bk-s3-runs td, .bk-s3-runs th { vertical-align: top; }
.bk-s3-ret { margin-top: 12px; line-height: 1.45; }
.bk-s3-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
.bk-s3-form label { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 13px; }
.bk-s3-form label span { font-weight: 700; }
.bk-s3-form label small { color: var(--ink-soft); font-size: 12px; }
.bk-s3-form input { min-height: 40px; width: 100%; box-sizing: border-box; }
.bk-s3-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.bk-s3-tools { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hq-line, #e0e5f0); }
.bk-s3-clear { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.bk-s3-clear input { min-height: 38px; width: 200px; max-width: 100%; }
.bk-probe { list-style: none; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--hq-line, #e0e5f0); border-radius: 12px; display: grid; gap: 8px; font-size: 13px; }
.bk-probe li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bk-probe li.bad span { font-weight: 700; }
@media (max-width: 900px) { .bk-s3-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bk-s3-kpis { grid-template-columns: 1fr; } .bk-s3-clear { flex-wrap: wrap; } .bk-s3-clear input { width: 100%; } }
/* the Spaces charts (D-M229): a donut, a stacked bar by class, the last runs as bars — inline SVG on the page's tokens */
.bk-s3-charts { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "donut classes" "donut runs"; gap: 10px 18px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--paper); margin-bottom: 12px; }
.bk-s3-chart-donut { grid-area: donut; display: grid; justify-items: center; gap: 6px; text-align: center; }
.bk-s3-chart-classes { grid-area: classes; min-width: 0; } .bk-s3-chart-runs { grid-area: runs; min-width: 0; } .bk-s3-lastpref { display: block; font-size: 10.5px; margin-top: 4px; }
.bk-s3-chart-title { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.bk-s3-chart-cap { font-size: 12.5px; line-height: 1.45; } .bk-s3-chart-cap b { font-size: 13.5px; }
.bk-s3-donut { width: 130px; height: 130px; }
.bk-s3-donut-track { stroke: var(--hq-line, #e0e5f0); }
.bk-s3-donut-fill { stroke: #1e9c8a; transition: stroke-dasharray .4s ease; }
.bk-s3-donut.warn .bk-s3-donut-fill { stroke: #c99a2e; } .bk-s3-donut.bad .bk-s3-donut-fill { stroke: #b93434; }
.bk-s3-donut-pct { font-size: 22px; font-weight: 800; fill: var(--ink, #131a2c); }
.bk-s3-donut-sub { font-size: 9.5px; fill: var(--ink-soft, #5e6a86); }
.bk-s3-stack { width: 100%; height: 14px; display: block; }
.bk-s3-seg.hourly { fill: #2f6df6; background: #2f6df6; } .bk-s3-seg.daily { fill: #1e9c8a; background: #1e9c8a; } .bk-s3-seg.monthly { fill: #6b5cff; background: #6b5cff; }
.bk-s3-seg.files { fill: #c99a2e; background: #c99a2e; } .bk-s3-seg.other { fill: #9aa3b5; background: #9aa3b5; } .bk-s3-seg.empty { fill: var(--hq-line, #e0e5f0); }
.bk-s3-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-soft); }
.bk-s3-legend li { display: inline-flex; align-items: center; gap: 6px; } .bk-s3-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .bk-s3-legend b { color: var(--ink); }
.bk-s3-bars { width: 100%; height: 88px; display: block; }
.bk-s3-bar { fill: #9fb6e8; } .bk-s3-bar.last { fill: #2f6df6; } .bk-s3-bar-lbl { font-size: 9px; fill: var(--ink-soft, #5e6a86); }
.bk-s3-caprow { margin: 0 0 12px; align-items: center; } .bk-s3-caprow .btn.sm { min-height: 38px; } .bk-s3-capform label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .bk-s3-capform input { width: 90px; min-height: 36px; }
@media (max-width: 560px) { .bk-s3-charts { grid-template-columns: 1fr; grid-template-areas: "donut" "classes" "runs"; } }
.bk-drive-switch { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; } .bk-drive-switch input { min-height: 36px; width: 180px; }
/* the credits page: "how to read this page" */
.cr-help { margin: 0 0 14px; border: 1px solid var(--hq-line, #e0e5f0); border-radius: 12px; padding: 10px 14px; background: var(--paper); }
.cr-help summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.cr-help-dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 2px; font-size: 13px; }
.cr-help-dl dt { font-weight: 700; } .cr-help-dl dd { margin: 0; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 700px) { .cr-help-dl { grid-template-columns: 1fr; } .cr-help-dl dd { margin-bottom: 6px; } }
/* the "important" announcement (D-M231): red, unmistakable */
.an-banner.danger { border-color: color-mix(in srgb, #b93434 55%, var(--line)); background: color-mix(in srgb, #b93434 9%, var(--card)); }
.an-banner.danger b { color: #8f1f1f; }
/* the hero main never takes the page's spare height: two <main> in a flex column shared it, and on a tall screen the orders sat 400 px below the hero */
html[data-hq] body.pn-page > .hq-hero-main { flex: 0 0 auto; }   /* a div since D-M757 (one <main> per page) */
.an-product { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13px; } .an-product span { font-weight: 700; } .an-product small { color: var(--ink-soft); }
/* announcements at the top of every page (D-M234): a full-width band, unmissable, with a coloured left edge */
.an-banner.an-top { margin: 0 0 16px; border-left-width: 6px; box-shadow: 0 6px 18px rgba(20, 30, 50, .08); }
.an-banner.an-top b { font-size: 15px; } .an-banner.an-top p { font-size: 14px; }
.an-banner.an-top.info { border-left-color: #2f6df6; } .an-banner.an-top.success { border-left-color: #1e9c8a; } .an-banner.an-top.warn { border-left-color: #c78b2d; } .an-banner.an-top.danger { border-left-color: #b93434; } .an-banner.an-top.promo { border-left-color: #6b5cff; }
.le-portal-pub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--hq-line, #e0e5f0); border-radius: 12px; margin: 0 0 12px; background: var(--paper); } .le-portal-pub input[type=text] { min-height: 36px; width: 80px; }
.pcu-acc-of { font-size: 12px; color: var(--ink-soft); margin-left: 4px; } .pcu-portal-state { font-weight: 600; }
/* the statistics page (D-M242): tiles, cards, inline SVG charts on the desk's tokens */
.st-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.st-kpis > div { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--hq-line, #e0e5f0); min-width: 0; }
.st-kpis small { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .st-kpis b { display: block; font-size: 24px; margin: 2px 0; } .st-kpis em { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-card { min-width: 0; } .st-card h2 { margin: 0 0 2px; font-size: 16px; } .st-card > p.muted { margin: 0 0 10px; }
.st-svg { width: 100%; height: auto; display: block; }
.st-grid-line, .st-grid { } .st-svg .st-grid { stroke: var(--hq-line, #e0e5f0); stroke-width: 1; }
.st-bar.gold { fill: #c99a2e; } .st-bar.blue { fill: #2f6df6; } .st-bar.teal { fill: #1e9c8a; } .st-bar.violet { fill: #6b5cff; } .st-bar.amber { fill: #e0a93a; }
.st-line.blue { stroke: #2f6df6; } .st-line.violet { stroke: #6b5cff; } .st-line { stroke-width: 2.5; } .st-area.blue { fill: rgba(47,109,246,.12); } .st-area.violet { fill: rgba(107,92,255,.12); }
.st-dot.blue { fill: #2f6df6; } .st-dot.violet { fill: #6b5cff; } .st-lbl { font-size: 10px; fill: var(--ink-soft, #5e6a86); }
.st-donuts { display: flex; gap: 18px; flex-wrap: wrap; } .st-donut-box { display: grid; justify-items: center; gap: 6px; min-width: 150px; } .st-donut { width: 120px; height: 120px; }
.st-donut-track { fill: none; stroke: var(--hq-line, #e0e5f0); stroke-width: 12; } .st-seg { fill: none; stroke-width: 12; }
.st-seg.teal { stroke: #1e9c8a; background: #1e9c8a; } .st-seg.grey { stroke: #9aa3b5; background: #9aa3b5; } .st-seg.amber { stroke: #e0a93a; background: #e0a93a; } .st-seg.red { stroke: #b93434; background: #b93434; } .st-seg.blue { stroke: #2f6df6; background: #2f6df6; } .st-seg.gold { stroke: #c99a2e; background: #c99a2e; } .st-seg.violet { stroke: #6b5cff; background: #6b5cff; }
.st-donut-n { font-size: 20px; font-weight: 800; fill: var(--ink, #131a2c); }
.st-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); } .st-legend li { display: inline-flex; align-items: center; gap: 6px; } .st-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .st-legend b { color: var(--ink); }
.st-tbl { margin-top: 10px; } .st-health { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
@media (max-width: 1100px) { .st-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .st-grid { grid-template-columns: 1fr; } .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the desk's small controls: a 32 px floor everywhere (Chromium sweep of 60 pages, 17/9: nothing overflowed, nothing clipped, only the small buttons at 28-30 px) */
html[data-hq] .btn.sm, html[data-hq] a.btn.sm, html[data-hq] button.btn.sm { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
html[data-hq] .ag-b, html[data-hq] .ag-seg-b, html[data-hq] .qt-st-btn { min-height: 32px; }
html[data-hq] main input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html[data-hq] main select { min-height: 32px; }
html[data-hq] .qt-heat-b, html[data-hq] .qt-fchip { min-height: 32px; }
/* readability sweep of the desk: the 11 px texts rise to 12, intro paragraphs keep a reading width */
html[data-hq] .badge { font-size: 12px; } html[data-hq] .tk-prod, html[data-hq] th.uv-sortable, html[data-hq] main em, html[data-hq] main small { font-size: 12px; }
html[data-hq] .st-lbl { font-size: 11px; }
html[data-hq] .panel > p.muted, html[data-hq] .pn-hero-text p, html[data-hq] .cr-head p, html[data-hq] main > p.muted { max-width: 80ch; }
html[data-hq] .hq-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper) 55%, transparent); }
html[data-hq] .hq-tbl thead th { position: sticky; top: 0; background: var(--card, #fff); z-index: 1; }
html[data-hq] .of-scheme { max-width: 80ch; }
/* the outage desk (D-M245) */
.ou-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; } .ou-form label { display: grid; gap: 4px; font-size: 13px; } .ou-form label span { font-weight: 700; } .ou-form label small { color: var(--ink-soft); font-size: 12px; } .ou-form .ou-wide { grid-column: 1 / -1; } .ou-form .ou-acts { grid-column: 1 / -1; } .ou-form input, .ou-form select { min-height: 40px; }
.ou-apply { display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; } .ou-apply input { width: 150px; }
@media (max-width: 900px) { .ou-form { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ou-form { grid-template-columns: 1fr; } }
.ou-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ou-check { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; } .ou-check input { width: 18px; height: 18px; min-height: 18px; } .ou-check small { flex-basis: 100%; }
.ou-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .ou-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ou-form textarea { min-height: 76px; resize: vertical; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hq-line, #e0e5f0); }
.ou-target .ou-seg { display: inline-flex; border: 1px solid var(--hq-line, #e0e5f0); border-radius: 999px; overflow: hidden; }
.ou-target .ou-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; cursor: pointer; } .ou-target .ou-opt + .ou-opt { border-left: 1px solid var(--hq-line, #e0e5f0); } .ou-target .ou-opt input { width: 16px; height: 16px; min-height: 16px; }
.ou-form label[hidden] { display: none; }
/* the public legal page in the portal's look (D-M251): a cover, a sticky index, a readable measure, print */
.lgx { max-width: 1120px; margin: 0 auto; padding: 0 20px 60px; }
.lgx-cover { margin: 18px 0 26px; border-radius: 22px; padding: 34px 32px 26px; background: radial-gradient(120% 140% at 0% 0%, rgba(47,109,246,.16), transparent 55%), radial-gradient(90% 120% at 100% 20%, rgba(201,154,46,.18), transparent 55%), var(--card, #fff); border: 1px solid var(--line, #e3e7ef); box-shadow: 0 18px 50px rgba(20,30,50,.08); }
.lgx-kicker { display: inline-block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: #b08628; margin-bottom: 10px; }
.lgx-cover h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 40px); letter-spacing: -.02em; line-height: 1.1; }
.lgx-meta { margin: 0 0 18px; color: var(--ink-soft, #5e6a86); font-size: 14px; }
.lgx-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .lgx-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line, #e3e7ef); text-decoration: none; color: var(--ink, #131a2c); font-weight: 700; font-size: 14px; background: var(--card, #fff); } .lgx-tabs a.on { background: var(--ink, #131a2c); color: #fff; border-color: var(--ink, #131a2c); }
.lgx-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.lgx-index { position: sticky; top: 84px; border: 1px solid var(--line, #e3e7ef); border-radius: 18px; padding: 16px 16px 14px; background: var(--card, #fff); max-height: calc(100vh - 100px); overflow: auto; }
.lgx-index b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft, #5e6a86); margin-bottom: 8px; }
.lgx-index ol { margin: 0; padding: 0 0 0 20px; font-size: 13.5px; line-height: 1.45; } .lgx-index li { margin: 4px 0; } .lgx-index a { color: var(--ink, #131a2c); text-decoration: none; } .lgx-index a:hover { text-decoration: underline; }
.lgx-print { margin-top: 12px; width: 100%; min-height: 40px; border-radius: 999px; border: 1px solid var(--line, #e3e7ef); background: var(--card, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.lgx-doc { border: 1px solid var(--line, #e3e7ef); border-radius: 22px; padding: 30px 34px; background: var(--card, #fff); max-width: 80ch; font-size: 16px; line-height: 1.65; }
.lgx-doc .lgx-hide { display: none; }
.lgx-sec { scroll-margin-top: 90px; padding: 6px 0 2px; } .lgx-sec + .lgx-sec { border-top: 1px solid var(--line, #e3e7ef); margin-top: 18px; padding-top: 18px; }
.lgx-sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: 19px; margin: 0 0 8px; letter-spacing: -.01em; } .lgx-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: inline-grid; place-items: center; background: rgba(201,154,46,.16); color: #b08628; font-size: 13px; font-weight: 800; }
.lgx-sec p { margin: 0; color: var(--ink, #131a2c); }
.lgx-foot { margin: 24px 0 0; font-size: 12.5px; color: var(--ink-soft, #5e6a86); }
@media (max-width: 900px) { .lgx-grid { grid-template-columns: 1fr; } .lgx-index { position: static; max-height: none; } .lgx-doc { padding: 22px 18px; } }
@media print { .lgx-cover { box-shadow: none; } .lgx-index, .lgx-tabs, .lgx-print { display: none; } .lgx-doc { border: 0; max-width: none; } }
html[data-theme="dark"] .lgx-cover, html[data-theme="dark"] .lgx-index, html[data-theme="dark"] .lgx-doc { background: var(--card, #161c2a); }
.ag-b-offer { border-color: #c99a2e; color: #7a5a12; background: rgba(201,154,46,.12); }
.ag-b-offer { border-color: #c99a2e; color: #7a5a12; background: rgba(201,154,46,.12); }
/* the announcement cards (seen on a screenshot): the title column had no room, the badges pushed it into three-letter lines — the main column keeps 40% at least and the badges wrap under it when the card is narrow */
.cp-card { grid-template-columns: minmax(40%, 1fr) auto; }
.cp-card-main b { overflow-wrap: anywhere; } .cp-card-meta { justify-content: flex-end; row-gap: 6px; }
@media (max-width: 1100px) { .cp-card { grid-template-columns: 1fr; } .cp-card-meta { justify-content: flex-start; } }
.st-site { grid-column: 1 / -1; } .st-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.st-site-tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .st-site-tables table { margin: 0; }
@media (max-width: 1100px) { .st-site-tables { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .st-site-tables, .st-kpis-3 { grid-template-columns: 1fr; } }
/* the outage form's pick and when (D-M253) */
.ou-pick { position: relative; } .ou-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--card, #fff); border: 1px solid var(--hq-line, #e0e5f0); border-radius: 12px; box-shadow: 0 14px 40px rgba(20,30,50,.14); padding: 6px; display: grid; gap: 2px; max-height: 300px; overflow: auto; }
.ou-row { display: grid; gap: 1px; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font: inherit; cursor: pointer; } .ou-row:hover, .ou-row.on { background: rgba(47,109,246,.1); } .ou-row b { font-size: 13.5px; } .ou-row small { color: var(--ink-soft); font-size: 12px; }
.ou-picked { color: #1e9c8a; font-weight: 700; min-height: 14px; }
.ou-when .ou-dt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; } .ou-when input[type=date], .ou-when input[type=time] { min-height: 40px; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hq-line, #e0e5f0); background: var(--card, #fff); }
.ou-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .ou-chip { border: 1px solid var(--hq-line, #e0e5f0); background: var(--paper, #f6f8fb); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 30px; } .ou-chip:hover { background: rgba(201,154,46,.16); border-color: #c99a2e; }
.bk-src { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--paper, #f2f4f8); color: var(--ink-soft); } .bk-src-spaces { background: rgba(47,109,246,.14); color: #2f6df6; } .bk-src-drive { background: rgba(30,156,138,.14); color: #1e9c8a; }
.bk-resync { display: grid; gap: 10px; } .bk-resync form { display: inline-flex; gap: 8px; align-items: center; }
.bk-kit-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 14px; } @media (max-width: 900px) { .bk-kit-list { grid-template-columns: 1fr; } }
.bk-kit-pass { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .bk-kit-pass label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; } .bk-kit-pass input { min-height: 38px; width: 260px; } .bk-kit-pass small { flex-basis: 100%; font-weight: 400; }
/* the Disaster Recovery page (D-M257) */
.dr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dr-kpis .dr-good { border-color: #1e9c8a; } .dr-kpis .dr-bad { border-color: #b93434; }
.dr-strip { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 3px; margin: 8px 0 6px; } .dr-cell { display: block; height: 22px; border-radius: 4px; background: var(--paper, #eef1f5); } .dr-cell.ok { background: #1e9c8a; } .dr-cell.bad { background: #b93434; } .dr-cell.none { background: var(--hq-line, #e0e5f0); }
.dr-strip-legend .dr-cell { display: inline-block; width: 14px; height: 12px; vertical-align: middle; }
.dr-tbl tr.dr-bad td { background: rgba(185,52,52,.07); } .dr-tbl td:first-child { width: 28px; }
@media (max-width: 900px) { .dr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dr-strip { grid-template-columns: repeat(24, minmax(0, 1fr)); } }
.bk-all-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .bk-all-card { border: 1px solid var(--hq-line, #e0e5f0); border-radius: 12px; padding: 12px 14px; background: var(--paper); } .bk-all-card b { display: block; margin-bottom: 6px; } .bk-all-card ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 13.5px; } .bk-all-seat { border-color: #c99a2e; }
/* foldable sidebar groups (D-M259) */
html[data-hq] .hqsb-sec.hqsb-fold { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; } html[data-hq] .hqsb-sec.hqsb-fold .hqsb-chev { font-size: 15px; line-height: 1; transform: rotate(90deg); transition: transform .15s; opacity: .7; } html[data-hq] .hqsb-sec.hqsb-fold.folded .hqsb-chev { transform: none; }
html[data-hq] .hqsb-sec.folded + .hqsb-grp > .hqsb-it:not(.on):not(.has-badge) { display: none; }
.dr-inline { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; }
/* automations (D-M307) */
.au-table { width: 100%; border-collapse: collapse; } .au-table td { padding: 12px 10px; border-top: 1px solid var(--line, #e6e9f0); vertical-align: top; } .au-switch { width: 120px; white-space: nowrap; } .au-last { width: 220px; }
.au-toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; } .au-toggle input { width: 18px; height: 18px; } .au-on .au-toggle span { color: #1e9c8a; font-weight: 700; } .au-off .au-toggle span { color: #b93434; font-weight: 700; }
.au-what p { margin: 4px 0 0; } .au-off-text { color: #7a5a12; } .au-save { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.au-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; margin: 10px 0 4px; padding: 10px 12px; background: var(--panel-2, #f7f8fb); border-radius: 10px; }
   .au-opt input[type=text] { width: 100%; } 

/* automations, the cards (D-M318) */
.au-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.au-sum { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--panel, #fff); border: 1px solid var(--line, #e6e9f0); } .au-sum b { font-size: 22px; } .au-sum span { font-size: 12px; color: var(--muted, #6b7280); letter-spacing: .04em; text-transform: uppercase; }
.au-sum-on b { color: #1e9c8a; } .au-sum-off b { color: #b93434; } .au-sum-always b { color: #4a5568; }
.au-legend { margin: 0 0 14px; }
.au-group { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #8b6a1f; margin: 22px 0 10px; }
.au-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.au-card { border: 1px solid var(--line, #e6e9f0); border-left: 5px solid #cbd2dc; border-radius: 14px; padding: 14px 16px 10px; background: var(--panel, #fff); display: flex; flex-direction: column; gap: 8px; }
.au-card.is-on { border-left-color: #1e9c8a; } .au-card.is-off { border-left-color: #b93434; background: color-mix(in srgb, var(--panel, #fff) 92%, #b93434 8%); } .au-card.is-always { border-left-color: #8fa3b8; } .au-card.is-dirty { box-shadow: 0 0 0 2px rgba(201,154,46,.35); }
.au-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .au-card-h h3 { margin: 0; font-size: 16px; flex: 1; }
.au-sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .au-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.au-sw-track { width: 44px; height: 24px; border-radius: 999px; background: #b7bfcc; position: relative; transition: background .15s; } .au-sw-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.au-sw input:checked + .au-sw-track { background: #1e9c8a; } .au-sw input:checked + .au-sw-track::after { left: 23px; } .au-sw input:disabled + .au-sw-track { opacity: .5; cursor: not-allowed; }
.au-sw-text { font-weight: 800; font-size: 13px; min-width: 72px; } .is-on .au-sw-text { color: #1e9c8a; } .is-off .au-sw-text { color: #b93434; }
.au-pill { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .au-pill-always { background: #e7edf5; color: #4a5568; } .au-pill-default { background: #fff4d6; color: #7a5a12; }
.au-risk { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; } .au-risk-money { color: #8b6a1f; } .au-risk-customer { color: #2b6cb0; } .au-risk-ops { color: #4a5568; }
.au-does { margin: 0; font-size: 14px; line-height: 1.45; } .au-off-text { margin: 0; font-size: 13px; color: #7a5a12; line-height: 1.4; }
.au-opts-box summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #2b6cb0; } .au-opts-box summary small { color: var(--muted, #6b7280); font-weight: 400; }
.au-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin-top: 8px; padding: 10px 12px; background: var(--panel-2, #f7f8fb); border-radius: 10px; }
.au-opt { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .au-opt > span { font-weight: 700; } .au-opt-in { display: inline-flex; gap: 6px; align-items: center; } .au-opt input[type=number] { width: 100px; } .au-opt input[type=text], .au-opt select { width: 100%; } .au-opt small { font-size: 11.5px; color: var(--muted, #6b7280); }
.au-card-f { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted, #6b7280); border-top: 1px dashed var(--line, #e6e9f0); padding-top: 8px; margin-top: 2px; } .au-card-f a { font-weight: 700; }
.au-save { position: sticky; bottom: 0; margin-top: 18px; padding: 12px 16px; background: var(--panel, #fff); border: 1px solid var(--line, #e6e9f0); border-radius: 14px; box-shadow: 0 -6px 24px rgba(20,30,50,.08); } .au-save-in { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .au-mass { color: #7a5a12; }
.au-defaults { margin: 12px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 720px) { .au-cards { grid-template-columns: 1fr; } }
/* change of owner (D-M320) */
.oc-plan li { margin: 4px 0; } .oc-table { width: 100%; border-collapse: collapse; } .oc-table td { padding: 12px 10px; border-top: 1px solid var(--line, #e6e9f0); vertical-align: top; } .oc-state { width: 40px; font-size: 20px; } .oc-desk { width: 130px; text-align: right; }
.oc-ok td b { color: #1e9c8a; } .oc-todo td b { color: #7a5a12; } .oc-ctl { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; } .oc-ctl textarea { width: 100%; } .oc-save { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.oc-final form { margin-right: 14px; } .oc-abort { margin-top: 10px; }
.oc-held-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line, #e6e9f0); font-size: 13px; }
/* the new-device link block (D-M340): the QR at the left in its own tile, the words and the link at its side */
.rlink-box { display: flex; gap: 22px; align-items: flex-start; }
.rlink-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line, #e6e9f0); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.rlink-qr > svg { width: 168px; height: 168px; display: block; border-radius: 8px; }
.rlink-qr small { max-width: 168px; text-align: center; color: var(--muted, #6b7280); font-size: 11.5px; line-height: 1.35; }
.rlink-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rlink-body .rlink-lead { margin: 0; }
.rlink-body .rlink-row { display: flex; gap: 10px; align-items: center; min-width: 0; }
.rlink-body .rlink-row code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 10px 12px; border-radius: 10px; background: var(--bg3, #eef1f5); font-size: 13.5px; }
.rlink-body .rlink-row .btn { flex: 0 0 auto; }
@media (max-width: 720px) { .rlink-box { flex-direction: column; align-items: center; } .rlink-body { width: 100%; } }
.chip-cr-low { background: #fde8e8 !important; color: #b93434 !important; font-weight: 800; } .cr-low { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* the focused payment bar (D-M325) */
.ck-top .ld-brand { cursor: default; } .ck-top-secure { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .06em; color: #1e9c8a; margin-left: 10px; background: #e6f6f3; padding: 3px 9px; border-radius: 999px; }
.ck-top-back { font-weight: 700; margin-right: 14px; }
.ticket-brandmark { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 8px; font-weight: 900; letter-spacing: .02em; font-size: 17px; } .ticket-brandmark svg, .ticket-brandmark img { width: 28px; height: 28px; }
@media print { .ticket { border-width: 0.25px; } }
/* credit packs (D-M332) */
.cpk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.cpk-card { border: 1px solid var(--line, #e6e9f0); border-radius: 16px; padding: 16px 18px 12px; background: var(--panel, #fff); display: flex; flex-direction: column; gap: 8px; position: relative; } .cpk-card.is-off { opacity: .72; } .cpk-card.is-featured { border-color: #c99a2e; box-shadow: 0 0 0 3px rgba(201,154,46,.15); }
.cpk-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cpk-credits { font-size: 26px; font-weight: 900; letter-spacing: -.01em; } .cpk-credits b { color: #2f6df6; }
.cpk-pill { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-left: auto; } .cpk-pill-on { background: #e6f6f3; color: #1e9c8a; } .cpk-pill-off { background: #f1f4f8; color: #6b7280; } .cpk-pill-feat { background: #fff4d6; color: #7a5a12; margin-left: 0; }
.cpk-card h3 { margin: 0; font-size: 16px; } .cpk-price { font-size: 22px; } .cpk-facts { margin: 0; padding: 0 0 0 18px; font-size: 13px; color: var(--muted, #6b7280); line-height: 1.6; } .cpk-facts li.ok { color: #1e9c8a; } .cpk-facts li.warn { color: #b93434; }
.cpk-card footer { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line, #e6e9f0); padding-top: 10px; margin-top: 4px; }
/* coupons desk (D-M332) */
.cpn-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } @media (max-width: 980px) { .cpn-layout { grid-template-columns: 1fr; } }
.cpn-form { display: flex; flex-direction: column; gap: 10px; } .cpn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; } .cpn-form .fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cpn-form label.sm { flex-direction: row; align-items: center; font-weight: 400; }
.cpn-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .cpn-filters input { flex: 1; min-width: 160px; }
.cpn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cpn-card { border: 1px solid var(--line, #e6e9f0); border-left: 5px solid #cbd2dc; border-radius: 14px; padding: 12px 14px 10px; background: var(--panel, #fff); display: flex; flex-direction: column; gap: 6px; } .cpn-card.is-active { border-left-color: #1e9c8a; } .cpn-card.is-off { border-left-color: #b7bfcc; opacity: .8; } .cpn-card.is-used { border-left-color: #7a5a12; } .cpn-card.is-expired { border-left-color: #b93434; }
.cpn-card header { display: flex; align-items: center; gap: 8px; } .cpn-code { font-family: ui-monospace, monospace; font-size: 15px; font-weight: 800; letter-spacing: .04em; background: #f1f4f8; padding: 3px 8px; border-radius: 8px; }
.cpn-pill { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: #f1f4f8; color: #6b7280; } .cpn-pill-active { background: #e6f6f3; color: #1e9c8a; } .cpn-pill-used { background: #fff4d6; color: #7a5a12; } .cpn-pill-expired { background: #fde8e8; color: #b93434; }
.cpn-value { font-size: 20px; font-weight: 900; } .cpn-facts { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted, #6b7280); line-height: 1.6; } .cpn-card footer { display: flex; gap: 8px; border-top: 1px dashed var(--line, #e6e9f0); padding-top: 8px; margin-top: 2px; }
.cpn-form input, .cpn-form select { width: 100%; box-sizing: border-box; } .cpn-form .fr2 label { min-width: 0; } .cpn-filters select { width: auto; } .cpn-filters .btn { align-self: center; }
/* the AI page (D-M333) */
.aih-wallet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; background: var(--panel, #fff); border: 1px solid var(--line, #e6e9f0); margin: 12px 0 16px; } .aih-wallet b { font-size: 26px; display: block; } .aih-wallet small { display: block; font-size: 12px; color: var(--muted, #6b7280); }
.aih-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .aih-card { border: 1px solid var(--line, #e6e9f0); border-radius: 14px; padding: 14px 16px; background: var(--panel, #fff); display: flex; flex-direction: column; gap: 8px; } .aih-card h3 { margin: 0; font-size: 16px; } .aih-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted, #4b5563); } .aih-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line, #e6e9f0); } .aih-cost { font-size: 12px; font-weight: 700; color: #2b6cb0; } .aih-soon { border-style: dashed; opacity: .9; }
/* coupons desk, the theme's form grid overridden (D-M337): the theme lays every form out as a grid of 340 px columns — inside a 340 px panel the
   labels spilled over the padding. The desk's form is a column; the filters one row; the cards a little richer. */
.cpn-page .cpn-new .cpn-form { display: flex !important; flex-direction: column; gap: 10px; grid-template-columns: none; }
.cpn-page .cpn-new .cpn-form > label, .cpn-page .cpn-new .cpn-form > .fr2 { width: 100%; min-width: 0; max-width: 100%; }
.cpn-page .cpn-new .cpn-form .fr2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cpn-page .cpn-new .cpn-form .fr2 > label { min-width: 0; }
.cpn-page .cpn-new .cpn-form input, .cpn-page .cpn-new .cpn-form select { width: 100%; max-width: 100%; box-sizing: border-box; }
.cpn-page .cpn-new .cpn-form label.sm { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; } .cpn-page .cpn-new .cpn-form label.sm input { width: 18px; }
.cpn-page .cpn-new .cpn-form .btn.primary { margin-top: 4px; }
.cpn-page .cpn-filters { display: flex !important; grid-template-columns: none; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cpn-page .cpn-filters input { flex: 1 1 220px; min-width: 160px; width: auto; } .cpn-page .cpn-filters select { flex: 0 1 auto; width: auto; min-width: 0; } .cpn-page .cpn-filters .btn { flex: 0 0 auto; }
.cpn-page .cpn-card { box-shadow: 0 1px 2px rgba(20,30,50,.04); transition: transform .12s, box-shadow .12s; } .cpn-page .cpn-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,30,50,.08); }
.cpn-page .cpn-new h2 { margin-bottom: 12px; }
/* the reception kiosk, cinematic and alive (D-M347) */
.rc-page { position: relative; overflow-x: hidden; background: linear-gradient(200deg, #0c1a30, #123a68 45%, #0d2a4d 75%, #152f56); background-size: 300% 300%; animation: rcbg 22s ease infinite; }
.rc-page.rc-light { background: linear-gradient(200deg, #f6f9fd, #e7eef8 45%, #dfe8f3 75%, #eef3f9); background-size: 300% 300%; }
@keyframes rcbg { 50% { background-position: 100% 50%; } }
.rc-aurora { position: fixed; inset: -20%; pointer-events: none; z-index: 0; } .rc-aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .32; animation: rcblob 26s ease-in-out infinite; }
.rc-aurora i:nth-child(1) { background: radial-gradient(circle, #2f6df6, transparent 62%); left: -14%; top: -18%; } .rc-aurora i:nth-child(2) { background: radial-gradient(circle, #22c1a4, transparent 62%); right: -16%; bottom: -22%; animation-delay: -12s; } .rc-aurora i:nth-child(3) { background: radial-gradient(circle, #6aa7ff, transparent 62%); left: 30%; bottom: -30%; animation-delay: -6s; opacity: .2; }
.rc-page.rc-light .rc-aurora i { opacity: .22; }
@keyframes rcblob { 50% { transform: translate(7vmax, 5vmax) scale(1.12); } }
.rc-main { position: relative; z-index: 1; }
.rc-clock { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.rc-page .rc-idle, .rc-page .rc-gen, .rc-page .rc-result { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 28px 26px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.rc-page.rc-light .rc-idle, .rc-page.rc-light .rc-gen, .rc-page.rc-light .rc-result { background: rgba(255,255,255,.72); border-color: rgba(16,32,43,.08); box-shadow: 0 18px 50px rgba(16,32,43,.10); }
.rc-page .rc-idle-btn, .rc-page .rc-gen-btn { animation: rcbreathe 3.2s ease-in-out infinite; box-shadow: 0 10px 30px rgba(47,109,246,.35); }
@keyframes rcbreathe { 50% { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(47,109,246,.5); } }
.rc-page .rc-code { text-shadow: 0 0 24px rgba(106,167,255,.45); animation: rcglow 2.6s ease-in-out infinite; } @keyframes rcglow { 50% { text-shadow: 0 0 40px rgba(106,167,255,.75); } }
.rc-page.rc-light .rc-code { text-shadow: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .rc-page, .rc-aurora i, .rc-page .rc-idle-btn, .rc-page .rc-gen-btn, .rc-page .rc-code { animation: none !important; } }
/* the change-of-owner opening row (D-M357): password, the two buttons and the hint on their own lines, never clipped */
.oc-page .panel form.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .oc-page .panel form.inline .pcu-xpass { display: inline-flex; align-items: center; gap: 6px; } .oc-page .panel form.inline .pcu-xpass input { width: 200px; } .oc-page .panel form.inline .btn { white-space: nowrap; overflow: visible; } .oc-page .panel form.inline .muted.xs { flex-basis: 100%; margin-top: 2px; }
.oc-page .oc-plan { columns: 2; column-gap: 32px; max-width: 900px; } .oc-page .oc-plan li { break-inside: avoid; margin: 2px 0; }
/* the coupons desk filters (D-M357): one tidy row, the technical switch small beside the search */
.cpn-page .cpn-filters { align-items: center; } .cpn-page .cpn-filters label.sm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #6b7280); white-space: nowrap; flex: 0 0 auto; } .cpn-page .cpn-filters label.sm input { width: 16px; height: 16px; margin: 0; }
.ob-console em.used { background: #e6efff; color: #2b6cb0; } .ob-msg.warn { background: #fff4d6; color: #7a5a12; }
/* Esplora e ripristina — the explorer rebuilt (D-M396): steps, a timeline of days, run chips, the summary, the list, the danger card */
.bk-x{display:flex;flex-direction:column;gap:10px}
.bk-x-step{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em;margin-top:6px}
.bk-x-step b{width:26px;height:26px;border-radius:50%;background:var(--accent,#4f6cf7);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.bk-x-days{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:6px 4px 12px;scroll-snap-type:x proximity}
.bk-x-day{flex:none;scroll-snap-align:start;box-sizing:border-box;min-width:118px;min-height:86px;padding:11px 13px 12px;border-radius:14px;border:1px solid var(--border,#e3e6ec);background:var(--card,#fff);text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font:inherit;color:inherit;user-select:none;-webkit-user-select:none;transition:box-shadow .15s ease,border-color .15s ease}
/* THE CARD OF A DAY IS A DIV (D-M509). It was a <button>: Safari sizes a button BEFORE the flex content inside it is laid out, so at first paint
 * the card was shorter than its content and its last row — the dots — fell under its edge; a hover (transform + shadow) forced a new layout and
 * "the box grew". A div is the column itself, with an explicit minimum height; the hover no longer moves anything (no transform): shadow and
 * border only. The dots keep a class of their own (D-M475): the label pill of the Spaces box must never dress them again. */
.bk-x-day:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:rgba(79,108,247,.45)}
.bk-x-day:focus-visible{outline:3px solid rgba(79,108,247,.35);outline-offset:2px}
.bk-x-day.on{border-color:var(--accent,#4f6cf7);box-shadow:0 0 0 2px rgba(79,108,247,.18)}
.bk-x-day.newest b:after{content:" · oggi";font-weight:500;opacity:.6;font-size:11px}
.bk-x-day b{display:block;font-size:13.5px;line-height:1.25;white-space:nowrap}.bk-x-day small{display:block;opacity:.65;font-size:11.5px;line-height:1.25;white-space:nowrap}
.bk-x-dots{display:flex;gap:6px;align-items:center;height:10px;margin-top:auto;padding-top:4px;box-sizing:content-box}
.bk-x-dot{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:#22c1a4;padding:0;margin:0}.bk-x-dot-spaces{background:#4f6cf7}
.bk-x-runs{display:flex;flex-wrap:wrap;gap:8px;min-height:36px;align-items:center}
.bk-x-run{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--border,#e3e6ec);background:var(--card,#fff);cursor:pointer;font-weight:600;font-size:13px}
.bk-x-run small{font-weight:400;opacity:.6;font-size:11px}.bk-x-run.on{border-color:var(--accent,#4f6cf7);background:rgba(79,108,247,.08)}
.bk-x-content{border:1px solid var(--border,#e3e6ec);border-radius:14px;padding:14px;background:var(--card,#fff)}
.bk-x-sum{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--border,#e3e6ec);margin-bottom:12px}
.bk-x-sum-main{display:grid;gap:3px;min-width:220px}.bk-x-sum-main b{font-size:16px}.bk-x-sum-main small{opacity:.6;font-size:11.5px}
.bk-src-lbl{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(34,193,164,.14);color:#159c82;width:max-content}.bk-src-lbl.bk-src-spaces{background:rgba(79,108,247,.14);color:#3b57d6}
.bk-x-sum-kpis{display:flex;flex-wrap:wrap;gap:8px 18px}.bk-x-sum-kpis div{display:grid;gap:1px;min-width:64px}.bk-x-sum-kpis small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}.bk-x-sum-kpis b{font-size:15px}
.bk-x-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:8px;font-size:13px}.bk-x-tools input[type=search]{flex:1 1 220px;padding:8px 12px;border-radius:10px;border:1px solid var(--border,#e3e6ec);font:inherit}
.bk-x-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 16px;max-height:420px;overflow:auto;padding-right:4px}
.bk-x-list li.master{grid-column:1/-1;padding:6px 8px;border-radius:8px;background:rgba(79,108,247,.07);margin-bottom:6px}
.bk-x-list li[data-missing="1"] label{opacity:.55}
.bk-x-restore{border:1px solid rgba(220,60,60,.35);border-radius:14px;padding:14px;background:rgba(220,60,60,.04);margin-top:14px}
.bk-x-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
@media (max-width:700px){.bk-x-list{grid-template-columns:1fr;max-height:300px}}
/* the three Spaces sections of the Backup page (D-M408): room between one form and the next title */
.bk-s3-form + .bk-s3-sub, .bk-s3-form + p + .bk-s3-sub, .bk-s3-col .bk-s3-sub:not(:first-child) { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line, #e3e6ec); }
/* the desk's thread (D-M414): a link inside the desk's own dark bubble is readable; the beta box runs the whole width; the buttons line up */
.qt-b.out a, .qt-b.out a:visited { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 2px; word-break: break-all; }
.qt-b.out a:hover { text-decoration-color: #fff; }
.qt-beta-invite { width: 100%; box-sizing: border-box; margin: 12px 0; padding: 12px 14px; display: grid; grid-template-columns: minmax(180px, 1fr) 140px auto 1fr; align-items: center; gap: 12px 16px; }
.qt-beta-invite label { margin: 0; font-weight: 600; }
.qt-beta-invite input[type=number] { width: 100%; padding: 10px 12px; }
.qt-beta-invite .muted { justify-self: end; text-align: right; }
@media (max-width: 800px) { .qt-beta-invite { grid-template-columns: 1fr 1fr; } .qt-beta-invite .muted { grid-column: 1 / -1; justify-self: start; text-align: left; } }
/* the Backup page in one column (D-M414): one section under the other, full width, same rhythm; the scattered boxes become a sequence */
html[data-hq] body.page-backup .pn-grid, html[data-hq] .pn-main.bk-one .pn-grid { display: flex; flex-direction: column; gap: 22px; }
html[data-hq] .pn-main.bk-one .pn-grid > .panel { width: 100%; }
html[data-hq] .bk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { html[data-hq] .bk-kpis { grid-template-columns: repeat(2, 1fr); } }
/* the template thumbnail wears the template's logo (D-M416) */
/* the template thumbnail's logo rules live in assets/h0/pages.css, the sheet stampa.php loads (D-M461): here they never reached the page */
.ck2-done-mail { font-weight: 600; margin: 4px 0 10px; }
/* the find door on a notice page (D-M436) */
.pr-find { display: grid; gap: 8px; margin: 14px auto 0; max-width: 420px; text-align: left; }
.pr-find label { display: grid; gap: 4px; font-weight: 600; }
.pr-find input { padding: 10px 12px; }

/* Backup · one box per bucket (D-M457): its state, its keys, its own "Test" and "Save" */
.bk-bkts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; margin-top: 16px; align-items: start; }
.bk-bkt { display: grid; gap: 14px; min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--hq-line, #e0e5f0); border-radius: 18px; background: var(--card-bg, #fff); box-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 10px 26px -20px rgba(20, 30, 60, .28); }
.bk-bkt-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--hq-line, #e0e5f0); }
.bk-bkt-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #6b5314; background: linear-gradient(135deg, #f6e7b8, #e9cf83); }
.bk-bkt-head b { display: block; font-size: 15px; line-height: 1.25; }
.bk-bkt-head code { display: block; margin-top: 2px; padding: 0; background: none; font-size: 12.5px; color: var(--hq-muted, #5e6a86); overflow-wrap: anywhere; }
.bk-bkt-head .bk-s3-pill { white-space: nowrap; }
.bk-bkt-intro { margin: 0; font-size: 13px; line-height: 1.5; }
.bk-bkt .bk-bkt-kpis { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.bk-bkt .bk-bkt-kpis b { font-size: 15px; overflow-wrap: anywhere; }
.bk-bkt .bk-bkt-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px dashed var(--hq-line, #e0e5f0); align-items: start; }
.bk-bkt .bk-bkt-form label.wide, .bk-bkt .bk-bkt-form .bk-bkt-acts, .bk-bkt .bk-bkt-form .bk-bkt-hint { grid-column: 1 / -1; }
.bk-bkt .bk-bkt-form input { width: 100%; min-width: 0; box-sizing: border-box; }
.bk-bkt .bk-bkt-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.bk-bkt .bk-bkt-acts .btn { width: 100%; min-height: 42px; justify-content: center; text-align: center; }
.bk-bkt-hint { font-size: 12px; line-height: 1.45; }
.bk-bkt-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--hq-line, #e0e5f0); }
.bk-bkt-tools .bk-s3-clear { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.bk-bkt-tools .bk-s3-clear input { min-height: 38px; max-width: 170px; }
.bk-bkt .bk-probe { margin: 0; }
.bk-bkt-space { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hq-line, #e0e5f0); }
.bk-bkt-space h3 code { padding: 0; background: none; font-size: 12.5px; color: var(--hq-muted, #5e6a86); }
@media (max-width: 560px) { .bk-bkt .bk-bkt-form, .bk-bkt .bk-bkt-acts { grid-template-columns: 1fr; } .bk-bkt-tools .bk-s3-clear { margin-left: 0; width: 100%; } .bk-bkt-tools .bk-s3-clear input { max-width: none; flex: 1; } }
/* the status row: five figures on one row, nothing cut; the long note is a sentence, not a label (D-M457) */
html[data-hq] .bk-status .bk-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bk-status .bk-kpis b { overflow-wrap: anywhere; }
.bk-kpis em.bk-kpi-note { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
/* the bucket boxes, second pass after looking at the page (D-M457): three figures per box that do not break their dates, buttons whose words fit, the tools as one tidy column */
html[data-hq] .bk-bkt .bk-kpis.bk-bkt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-hq] .bk-bkt .bk-kpis.bk-bkt-kpis b { font-size: 14px; line-height: 1.25; word-break: normal; overflow-wrap: break-word; }
.bk-bkt .bk-bkt-acts .btn { white-space: normal; line-height: 1.2; padding: 8px 10px; }
.bk-bkt-tools { display: grid; grid-template-columns: 1fr; }
.bk-bkt-tools > form:first-child .btn { width: 100%; justify-content: center; }
.bk-bkt-tools .bk-s3-clear { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; }
.bk-bkt-tools .bk-s3-clear input { max-width: none; width: 100%; box-sizing: border-box; }
.bk-bkt .bk-bkt-acts .btn { box-sizing: border-box; margin: 0; max-width: 100%; }

/* Disaster Recovery · an hour of the strip answers a click (D-M462) */
.dr-strip .dr-cell[data-info] { cursor: pointer; }
.dr-strip .dr-cell.sel { outline: 2px solid var(--hq-gold, #c99a2e); outline-offset: 2px; }
.dr-cell-info { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--paper, #f4f6fa); line-height: 1.5; }
/* ---- Beta (D-M491): the testers' desk — five figures, then one quiet row per tester ---- */
.bt-page .bt-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:6px 0 20px}
.bt-kpi{position:relative;padding:16px 18px 14px;border-radius:16px;border:1px solid var(--border,#e3e6ec);background:linear-gradient(160deg,var(--card,#fff),rgba(79,108,247,.04));overflow:hidden}
.bt-kpi small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft,#6b7686)}
.bt-kpi b{display:block;margin-top:6px;font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.bt-kpi b i{font-style:normal;font-size:14px;font-weight:600;opacity:.5;margin-left:4px}
.bt-meter{display:block;height:4px;border-radius:4px;background:rgba(79,108,247,.12);margin-top:12px;overflow:hidden}.bt-meter span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#4f6cf7,#22c1a4)}
.bt-list{display:grid;gap:10px}
.bt-row{display:grid;grid-template-columns:minmax(260px,1.6fr) minmax(130px,.7fr) minmax(150px,1fr) minmax(210px,1.3fr) minmax(90px,.55fr) auto;gap:18px;align-items:center;padding:14px 18px;border-radius:16px;border:1px solid var(--border,#e3e6ec);background:var(--card,#fff);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.bt-row:hover{box-shadow:0 10px 28px rgba(20,30,50,.08);transform:translateY(-1px);border-color:rgba(79,108,247,.35)}
.bt-row.bt-over,.bt-row.bt-gone{opacity:.72}
.bt-who{display:flex;gap:12px;align-items:center;min-width:0}.bt-who>div{min-width:0}
.bt-av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,#4f6cf7,#22c1a4);box-shadow:0 6px 14px rgba(79,108,247,.28)}
.bt-row.bt-soon .bt-av{background:linear-gradient(135deg,#f2b84b,#f59e0b)}.bt-row.bt-over .bt-av,.bt-row.bt-gone .bt-av{background:#9aa4b2;box-shadow:none}
.bt-who b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bt-who small{display:block;color:var(--ink-soft,#6b7686);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.bt-chips i{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(79,108,247,.10);color:#3b57d6}.bt-chips i.warn{background:rgba(242,184,75,.18);color:#a16207}.bt-chips i.bad{background:rgba(239,68,68,.12);color:#b91c1c}
.bt-m{min-width:0}.bt-m small{display:block;white-space:nowrap;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-soft,#6b7686)}
.bt-m b{display:block;margin-top:3px;font-size:17px;font-variant-numeric:tabular-nums}.bt-m b.ok{color:#0f9f7f}.bt-m b.mute{opacity:.4}.bt-m b i{font-style:normal;font-size:12px;font-weight:600;opacity:.55}
.bt-m em{display:block;font-style:normal;font-size:12px;color:var(--ink-soft,#6b7686);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-bar{display:flex;height:6px;border-radius:6px;overflow:hidden;margin:7px 0 4px;background:rgba(0,0,0,.06)}.bt-bar span{display:block;height:100%}
.bt-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4px 1px 0}
.bt-acts{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.bt-acts small{font-size:11px;color:var(--ink-soft,#6b7686)}.bt-acts .mono{font-family:ui-monospace,Menlo,monospace}
.bt-empty{padding:34px 24px;border-radius:16px;border:1px dashed var(--border,#d5dae3);text-align:center;color:var(--ink-soft,#6b7686)}.bt-empty b{display:block;font-size:16px;color:var(--ink,#1b2430);margin-bottom:6px}
@media (max-width:1180px){.bt-page .bt-sum{grid-template-columns:repeat(3,minmax(0,1fr))}.bt-row{grid-template-columns:1fr 1fr;gap:14px}.bt-who{grid-column:1/-1}.bt-acts{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}}
@media (max-width:620px){.bt-page .bt-sum{grid-template-columns:1fr 1fr}.bt-kpi b{font-size:24px}}
/* the beta invitation on the coupon desk (D-M493) */
.cpn-beta{border:1px dashed var(--border,#d5dae3);border-radius:14px;padding:12px 14px 14px;margin:6px 0 12px}.cpn-beta legend{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:0 6px;color:var(--ink-soft,#6b7686)}.cpn-beta-f{display:grid;gap:10px;margin-top:10px}.cpn-beta-f[hidden]{display:none}.cpn-invite b{display:inline-block;margin-top:4px;font-size:12px;word-break:break-all;font-weight:600}
.bk-stale{color:#a16207;font-weight:600}

.pcu-probe{margin:8px 0;padding:10px 12px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:rgba(255,255,255,.6)}.pcu-probe ul{list-style:none;margin:6px 0 0;padding:0}.pcu-probe li{font-size:13px;padding:2px 0}.pcu-probe li.ok{color:#15734d}.pcu-probe li.ko{color:#b23b3b}.pcu-probe small{color:#6b7280;margin-left:6px}.pcu-probe-link{margin:6px 0}

/* D-M682 — the AI page: the model picker, the credit tiers, the provider's catalogue, the last refusals */
.ai-pick{display:flex;flex-direction:column;gap:6px;margin-top:4px}.ai-pick select{width:100%}.ai-pick input[type=text]{width:100%}
.ai-tiers{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:4px 0 14px}.ai-tier{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line,#e2e6ef);border-radius:10px;background:var(--bg2,#fff);min-width:150px}.ai-tier small{font-size:11.5px;color:var(--mute,#6b7280)}.ai-tier b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;word-break:break-all}.ai-tier em{font-style:normal;font-size:11.5px;font-weight:600;color:#b42318}.ai-tier.bad{border-color:#f0b4ad;background:#fff6f5}.ai-tiers .btn{align-self:center}
.ai-cat-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;border:1px solid var(--line,#e2e6ef);border-radius:12px}.ai-cat{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}.ai-cat th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--mute,#6b7280);padding:9px 10px;border-bottom:1px solid var(--line,#e2e6ef);white-space:nowrap}.ai-cat td{padding:8px 10px;border-bottom:1px solid var(--line,#eef1f6);vertical-align:middle}.ai-cat tr:last-child td{border-bottom:0}.ai-cat td:first-child{min-width:200px}.ai-cat td b{display:block;font-weight:600}.ai-cat td code{display:block;font-size:11.5px;color:var(--mute,#6b7280);background:none;padding:0;word-break:break-all}.ai-cat td small{display:block;font-size:11px}.ai-cat tr.used td{background:rgba(47,109,246,.05)}.ai-cat-fam td{background:var(--bg3,#f3f5fa);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2,#4b5565);padding:6px 10px}.ai-cat .badge{margin:1px 2px 1px 0}
.ai-think{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#3446a8;white-space:nowrap}.ai-think.legacy{background:#f3f4f6;color:#4b5565}.ai-think.always{background:#fff4e5;color:#8a4b00}
.ai-fails{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.ai-fails li{display:flex;gap:10px;font-size:12.5px;line-height:1.45;padding:7px 10px;border-radius:9px;background:#fff6f5;border:1px solid #f6d3cf}.ai-fails time{flex:0 0 auto;font-weight:600;color:#8a2a1f}.ai-fails span{word-break:break-word}
/* D-M685 — the page of a support reference */
.sr-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}.sr-facts li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;background:var(--bg3,#f3f5fa);font-size:13.5px}.sr-facts li span{color:var(--mute,#6b7280)}.sr-facts li b{text-align:right;font-weight:600;word-break:break-word}.sr-raw{white-space:pre-wrap;word-break:break-word;font-size:12px;background:var(--bg3,#f3f5fa);padding:12px;border-radius:10px;margin-top:8px}
/* D-M686 — the error codes customers saw: counts, filters, rows in plain words */
.srl-kpis{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.srl-kpi{display:flex;flex-direction:column;gap:2px;min-width:120px;padding:12px 14px;border-radius:14px;background:var(--glass,rgba(255,255,255,.75));border:1px solid var(--line,#e6e9f2);text-decoration:none;color:inherit}
.srl-kpi b{font-size:22px;letter-spacing:-.01em}.srl-kpi span{font-size:12.5px;color:var(--mute,#6b7280)}.srl-kpi.on{border-color:var(--acc,#3b5bdb);box-shadow:0 0 0 3px rgba(59,91,219,.12)}
.srl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 14px}.srl-bar select,.srl-bar input[type=search]{min-height:38px}
.srl-tabs{display:inline-flex;border-radius:12px;overflow:hidden;border:1px solid var(--line,#e6e9f2);margin-right:6px}.srl-tabs a{padding:8px 14px;text-decoration:none;color:inherit;font-weight:600;font-size:13.5px}.srl-tabs a.on{background:var(--acc,#3b5bdb);color:#fff}
.srl-list{display:flex;flex-direction:column;gap:8px}
.srl-row{display:grid;grid-template-columns:170px minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;border-radius:14px;background:var(--glass,rgba(255,255,255,.75));border:1px solid var(--line,#e6e9f2);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
.srl-row:hover{transform:translateY(-1px);box-shadow:0 10px 24px -18px rgba(16,24,40,.45)}.srl-row.new{border-left:4px solid var(--acc,#3b5bdb)}
.srl-row span{display:flex;flex-direction:column;min-width:0}.srl-row small{color:var(--mute,#6b7280);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.srl-row b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srl-code code{font-size:13.5px;font-weight:700;letter-spacing:.04em}
.srl-cr{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--bg3,#f3f5fa);white-space:nowrap}.srl-cr-ok{background:rgba(22,163,74,.12);color:#15803d}.srl-cr-warn{background:rgba(217,119,6,.14);color:#b45309}
.srl-all{margin-top:12px}.srl-empty p{margin:0}
.sr-back{margin:0 0 8px}.sr-back a{text-decoration:none;font-weight:600}.sr-note textarea{width:100%}.sr-note-a{margin:8px 0}
@media (max-width:760px){.srl-row{grid-template-columns:1fr;gap:6px}}
.srl-bar>select,.srl-bar>input[type=search]{width:auto;flex:0 1 220px;margin:0}.srl-bar>.btn{flex:none}
/* D-M687 — the error codes, completed: chart, kinds, tags; the code's page: the AI's reading, actions, story */
.srl-top{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:14px 0 6px}.srl-top .srl-kpis{margin:0;flex:1}
.srl-chart{flex:0 1 340px;padding:10px 12px;border-radius:14px;background:var(--glass,rgba(255,255,255,.75));border:1px solid var(--line,#e6e9f2);display:flex;flex-direction:column;gap:4px}
.srl-chart small{font-size:12px;color:var(--mute,#6b7280)}.srl-chart svg{width:100%;height:60px}.srl-chart rect{fill:var(--line,#e3e7f0)}.srl-chart rect.on{fill:var(--acc,#3b5bdb)}
.srl-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}.srl-kindchip{padding:6px 12px;border-radius:999px;background:var(--bg3,#f3f5fa);border:1px solid var(--line,#e6e9f2);text-decoration:none;color:inherit;font-size:13px}
.srl-kindchip b{margin-left:4px}.srl-kindchip.on{border-color:var(--acc,#3b5bdb);background:rgba(59,91,219,.1)}
.srl-row.solved{opacity:.72}.srl-tags{display:flex;flex-direction:row!important;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.srl-tag{font-style:normal;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--bg3,#f3f5fa)}.srl-tag.ai{background:rgba(124,77,255,.12);color:#6d28d9}.srl-tag.ok{background:rgba(22,163,74,.12);color:#15803d}
.srl-cr{font-style:normal}
.sr-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.sr-actions form{margin:0}
.sr-ai{border:1px solid rgba(124,77,255,.28);background:linear-gradient(180deg,rgba(124,77,255,.06),transparent 60%)}
.sr-ai-answer{font-size:14.5px;line-height:1.65;padding:14px 16px;border-radius:14px;background:var(--glass,rgba(255,255,255,.8));border:1px solid var(--line,#e6e9f2)}.sr-ai-answer b{display:inline-block;margin-top:6px;color:var(--acc,#3b5bdb)}
.sr-ai-meta{margin:8px 0 0;font-size:12.5px}.sr-ai-form{display:flex;align-items:center;gap:12px;margin-top:12px}
.sr-spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(124,77,255,.25);border-top-color:#7c4dff;animation:srspin .8s linear infinite;vertical-align:-2px}@keyframes srspin{to{transform:rotate(360deg)}}
.sr-chips{display:flex;flex-wrap:wrap;gap:6px}.sr-chip{padding:5px 10px;border-radius:999px;background:var(--bg3,#f3f5fa);font-size:13px}
.sr-others{list-style:none;margin:0;padding:0;display:grid;gap:6px}.sr-others li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 10px;border-radius:10px;background:var(--bg3,#f3f5fa);font-size:13.5px}
.sr-crash{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(220,38,38,.07);font-size:13px;word-break:break-word}.sr-refund{margin-top:12px}
.sr-ai-form .btn,.sr-triage form .btn,.sr-refund .btn,.sr-actions .btn{width:auto;flex:none}
/* D-M688 — the error codes, redrawn: KPI cards with glyphs, the stacked chart, rows by day in their kind's colour; the case card and its steps */
.srl-page .srl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.srl-page .srl-kpi{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--glass,rgba(255,255,255,.8));border:1px solid var(--line,#e6e9f2);box-shadow:0 12px 28px -24px rgba(16,24,40,.5);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.srl-page a.srl-kpi:hover{transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(16,24,40,.55)}
.srl-kpi-i{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg3,#eef1f7);color:var(--mute,#5b6475)}.srl-kpi-i .hqi{width:21px;height:21px}
.srl-page .srl-kpi b{font-size:24px;line-height:1.1;letter-spacing:-.02em}.srl-page .srl-kpi span{font-size:12.5px;color:var(--mute,#6b7280)}
.srl-kpi.hot .srl-kpi-i{background:linear-gradient(135deg,#f59e0b,#e5484d);color:#fff}.srl-kpi.hot b{color:#c2410c}.srl-page .srl-kpi.on{border-color:var(--acc,#3b5bdb)}
.srl-chartcard{padding:16px 18px;border-radius:18px;background:var(--glass,rgba(255,255,255,.8));border:1px solid var(--line,#e6e9f2);margin:0 0 14px}
.srl-chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}.srl-chart-h b{font-size:14px}
.srl-chart2{width:100%;height:160px;display:block}.srl-chart2 .axis{stroke:var(--line,#dfe3ec);stroke-width:1}.srl-chart2 .grid{stroke:var(--line,#eef1f7);stroke-dasharray:3 4}
.srl-chart2 .lbl{font-size:10px;fill:var(--mute,#8a93a3)}.srl-chart2 .lbl.mid{text-anchor:middle}.srl-chart2 .zero{fill:var(--line,#e3e7f0)}
.srl-kindchip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
.srl-tabn{font-style:normal;display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:#e5484d;color:#fff;font-size:11px;line-height:18px;margin-left:4px}
.srl-day{margin:16px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute,#6b7280)}
.srl-page .srl-row{border-left:4px solid var(--k,#9ca3af)}.srl-page .srl-row.new{border-left-width:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--k,#9ca3af) 8%,transparent),transparent 40%),var(--glass,rgba(255,255,255,.8))}
.srl-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--k,#9ca3af);margin-right:7px;vertical-align:1px}
.srl-rep{font-style:normal;color:#b45309;font-weight:700}.srl-tag.new{background:rgba(229,72,77,.12);color:#b91c1c}
.srl-emptycard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px;border-radius:18px;background:var(--glass,rgba(255,255,255,.8));border:1px dashed var(--line,#d9deea);text-align:center}
.srl-emptycard svg{width:64px;height:64px}.srl-emptycard .c{fill:rgba(22,163,74,.1);stroke:rgba(22,163,74,.45);stroke-width:2}.srl-emptycard .k{fill:none;stroke:#16a34a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sr-case{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;padding:14px 18px;border-radius:18px;background:var(--glass,rgba(255,255,255,.85));border:1px solid var(--line,#e6e9f2);border-left:6px solid var(--k,#9ca3af)}
.sr-case-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sr-case-id code{font-size:18px;font-weight:800;letter-spacing:.06em}.sr-case-dot{width:12px;height:12px;border-radius:50%;background:var(--k,#9ca3af)}
.sr-case-kind{font-weight:600;color:var(--mute,#5b6475)}
.sr-steps{list-style:none;display:flex;gap:0;margin:0;padding:0;counter-reset:st}.sr-steps li{position:relative;display:flex;flex-direction:column;align-items:center;min-width:92px;padding:0 6px;font-size:12px;text-align:center;color:var(--mute,#8a93a3)}
.sr-steps li::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid var(--line,#d6dbe6);background:#fff;margin-bottom:6px;z-index:1}
.sr-steps li::after{content:'';position:absolute;top:7px;left:calc(50% + 9px);width:calc(100% - 18px);height:2px;background:var(--line,#e3e7f0)}.sr-steps li:last-child::after{display:none}
.sr-steps li.done{color:inherit}.sr-steps li.done::before{background:var(--k,#3b5bdb);border-color:var(--k,#3b5bdb)}.sr-steps li b{font-size:12.5px}
@media (max-width:760px){.sr-steps li{min-width:70px}.srl-page .srl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* D-M691 — the error code of a request: its own read-only field on the portal, a link on the seat's ticket page */
.mytk-ref{margin-top:10px;padding:12px 14px;border-radius:12px;background:rgba(201,154,46,.08);border:1px dashed rgba(201,154,46,.55)}
.mytk-ref .mytk-ref-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.08em;background:#fff;cursor:default;color:inherit}
.mytk-ref small{display:block;margin-top:6px}
.tk-errref{margin:6px 0 0}.tk-errref a{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(124,77,255,.1);color:#5b21b6;text-decoration:none;font-weight:600;font-size:13px}
.tk-errref code{font-weight:800;letter-spacing:.06em}.tk-errref a:hover{background:rgba(124,77,255,.18)}
/* D-M693 — the names outside the rule */
.pu-badnames-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.pu-badnames-l a{display:inline-flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid rgba(217,119,6,.4);text-decoration:none;color:inherit}
/* D-M708 — the Orders page and the order's own page (hq_orders.php, hq_order.php) */
.ho-page{display:flex;flex-direction:column;gap:18px}.ho-page .mono{font-family:var(--mono,ui-monospace,monospace)}.ho-page .r{text-align:right}
.ho-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}.ho-head h1{margin:0;font-size:30px;letter-spacing:-.01em}.ho-head p{margin:4px 0 0}.ho-head-acts{display:flex;gap:10px;flex-wrap:wrap}
.ho-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.ho-kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none;min-height:96px}
.ho-kpi:hover{border-color:var(--signal)}.ho-kpi span{font-size:13px;color:var(--ink-soft)}.ho-kpi b{font-size:22px;font-family:var(--mono,ui-monospace,monospace);letter-spacing:-.02em}.ho-kpi small{font-size:12px;color:var(--ink-soft)}
.ho-kpi.ok b{color:var(--ok-ink)}.ho-kpi.bad b{color:var(--err-ink)}.ho-kpi.warn b{color:var(--warn-ink)}
.ho-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}.ho-card h2{margin:0 0 10px;font-size:16px}.ho-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ho-chart svg{width:100%;height:190px;display:block}.ho-axis{stroke:var(--line);stroke-width:1}.ho-b-lic{fill:var(--signal)}.ho-b-cr{fill:var(--signal);opacity:.45}.ho-b-rf{fill:var(--warn-ink)}
.ho-legend{display:flex;gap:14px;font-size:13px;color:var(--ink-soft)}.ho-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}.ho-legend i.ho-b-lic{background:var(--signal)}.ho-legend i.ho-b-cr{background:var(--signal);opacity:.45}.ho-legend i.ho-b-rf{background:var(--warn-ink)}
.ho-ch-dates{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);font-family:var(--mono,monospace)}
.ho-fix{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;background:var(--warn-bg);border:1px solid var(--line)}.ho-fix strong{margin-right:6px;color:var(--warn-ink)}
.ho-fix a{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--warn-ink);text-decoration:none;font-size:13px;min-height:36px}.ho-fix a b{font-family:var(--mono,monospace)}
/* D-M811 — inside an opened request: the head reads like a sentence, the conversation and the writing in a wide column, the facts,
   state and potential in "In short" beside it; the upload limits live in the attach button's tooltip, not in a paragraph */
html body .qt-box details.qt-card.qd{background:var(--card,#fff);border:1px solid var(--line);border-radius:20px;padding:0;overflow:visible}
html body .qt-box details.qt-card.qd>summary.qt-sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:20px 24px;border-bottom:1px solid var(--line);font-size:15px;cursor:default;list-style:none}
html body .qt-box details.qt-card.qd>summary.qt-sum::-webkit-details-marker{display:none}
html body .qt-box details.qt-card.qd>summary.qt-sum .qt-sum-co{font-size:24px;font-weight:800;letter-spacing:-.02em;order:-1;flex-basis:100%}
.qd-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;padding:20px 24px 24px;align-items:start}
.qd-main{display:grid;gap:16px;min-width:0}.qd-side{display:grid;gap:14px;align-content:start;padding:18px;border-radius:16px;background:var(--st-accent-tint,#f4f8f7);border:1px solid var(--line);position:sticky;top:16px}
.qd-side-h{margin:0;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qd-side .qt-info{display:grid;gap:6px;margin:0}.qd-side .qt-info .qt-chip{display:flex;justify-content:flex-start;border-radius:10px;background:var(--card,#fff);border:1px solid var(--line);padding:7px 10px;font-size:13.5px;white-space:normal;word-break:break-word}
.qd-side .qt-foot{display:grid;gap:10px;margin:0;padding:0;border:0}.qd-side .qt-status{display:grid;gap:10px;margin:0}.qd-side .qt-st,.qd-side .qt-heat{display:flex;flex-wrap:wrap;gap:6px}
.qd-main .qt-chat{max-height:none}.qd-main .qt-composer{border-radius:16px}
.qd .qt-attach-note{display:none}
/* BUG (D-M811): the Support desk was drawn UNDER every request — the studio skin sets .tk-desk to display:grid !important, which beats
   the hidden attribute the Requests page puts on it; hidden wins again, with the same weight and one attribute more */
html[data-hq] body:has(.studio-on) .pn-main .tk-desk[hidden],html body .tk-desk[hidden]{display:none !important}
html body .qt-box details.qt-card.qd>summary.qt-sum::before,html body .qt-box details.qt-card.qd>summary.qt-sum::after{content:none !important;display:none !important}
.qd-side .qt-chip small{min-width:86px;color:var(--muted);font-weight:600;font-size:12.5px}
html body .qd-side form.qt-st{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0;margin:0;background:none;border:0;box-shadow:none;border-radius:0}
html body .qd-side form.qt-st .qt-st-btn{margin:0;min-height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card,#fff);color:inherit;font-weight:700;font-size:13px;box-shadow:none}
html body .qd-side form.qt-st .qt-st-btn.cur{background:var(--st-accent,#0F5F63);border-color:var(--st-accent,#0F5F63);color:#fff;opacity:1}
.qd-side .qt-st-legend{display:none}
/* D-M812 — ONE writing box with its modes (radio + label, no script): Reply · Prepare an offer · Note for you */
.qd-modes{border:1.5px solid var(--line);border-radius:18px;background:var(--card,#fff);overflow:hidden}
.qd-modes>input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qdm-tabs{display:flex;gap:2px;padding:8px 10px 0;background:color-mix(in srgb,var(--st-accent-tint,#E7F1F1) 50%,var(--card,#fff));border-bottom:1px solid var(--line)}
.qdm-tabs label{padding:10px 16px;border-radius:10px 10px 0 0;font-weight:700;font-size:14.5px;color:var(--muted);cursor:pointer}
.qdm-b:checked~.qdm-tabs label[for^="qdm-b"],.qdm-r:checked~.qdm-tabs label[for^="qdm-r"],.qdm-o:checked~.qdm-tabs label[for^="qdm-o"],.qdm-n:checked~.qdm-tabs label[for^="qdm-n"]{background:var(--card,#fff);color:var(--ink,inherit);box-shadow:0 -1px 0 var(--line),1px 0 0 var(--line),-1px 0 0 var(--line)}
.qd-modes>input:focus-visible~.qdm-tabs{outline:3px solid rgba(15,95,99,.35);outline-offset:-3px}
.qdm-p{display:none;padding:16px}.qdm-b:checked~.qdm-p-b,.qdm-r:checked~.qdm-p-r,.qdm-o:checked~.qdm-p-o,.qdm-n:checked~.qdm-p-n{display:block}
html body .qdm-p form.qt-beta-invite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:end;margin:0;padding:0;border:0;background:none}
html body .qdm-p form.qt-beta-invite label{display:grid;gap:6px}html body .qdm-p form.qt-beta-invite .btn{justify-self:start;min-height:44px}
html body .qdm-p form.qt-beta-invite .muted{grid-column:1/-1;justify-self:start;text-align:left}
/* D-M814 — the day headers of the open requests list */
.qt-box .qt-list>.qt-day{padding:10px 16px 6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--st-accent-tint,#E7F1F1) 45%,var(--card,#fff));border-top:1px solid var(--line)}
.qt-box .qt-list>.qt-day:first-child{border-top:0}
.qdm-p .qt-composer{border:0;box-shadow:none;margin:0}.qdm-p details.of-new>summary,.qdm-p details.ag-case>summary{display:none}
.qdm-p details.of-new,.qdm-p details.ag-case{border:0;padding:0;margin:0;background:none;box-shadow:none}
.qd-main .of-box:not(:has(.of-row)){display:none}
/* D-M813 — the offer prepared from the request; R1 "to follow up"; R2 the reason a request closed without a sale */
.of-form2{display:grid;gap:14px}.of-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start}
.of-form2 label{display:grid;gap:6px;font-size:13.5px}.of-form2 input,.of-form2 select,.of-form2 textarea{width:100%;box-sizing:border-box;min-height:44px}
.of-hint{font-size:12.5px;color:var(--muted)}.of-inst2{max-width:560px}
.of-more>summary{cursor:pointer;font-weight:700;color:var(--st-accent,#0F5F63);min-height:36px;display:flex;align-items:center}
.of-send{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qt-follow{display:inline-flex;padding:2px 9px;border-radius:999px;background:#fff1d6;color:#8a5a12;font-size:12px;font-weight:800}
.qt-lost{display:grid;gap:4px;grid-column:1/-1;font-size:12.5px;color:var(--muted)}.qt-lost select{min-height:38px;border-radius:10px}
.qt-lost-said{margin:0;font-size:13px;color:var(--muted)}
@media (max-width:640px){.of-grid2{grid-template-columns:1fr}}
.qd-side,.qd-side>*{min-width:0;max-width:100%}
/* D-M811 — Dunning: an empty "now in grace" is one quiet line, not a big card */
.dn2-card .dn2-empty{padding:12px 4px;text-align:left;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}.dn2-card .dn2-empty span{color:var(--muted)}
@media (max-width:980px){.qd-grid{grid-template-columns:minmax(0,1fr)}.qd-side{position:static}}
/* D-M810 — Requests with the owner's rule: the head says it in one sentence, kinds are tabs, a row says who and what in plain words,
   an opened request stands ALONE at full width (no list beside it) */
.qt-box .qt-head{margin:0 0 14px}.qt-box .qt-head h1{margin:0;font-size:30px}
.qt-box .qt-filter:not(.qt-filter2){display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:6px 0 10px;padding:0;background:none}
.qt-box .qt-filter:not(.qt-filter2) .qt-fchip{border:0;border-radius:0;background:none;padding:10px 14px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px;box-shadow:none}
.qt-box .qt-filter:not(.qt-filter2) .qt-fchip.cur{color:var(--ink,inherit);border-bottom-color:var(--st-accent,#0F5F63);background:none}
.qt-box .qt-filter:not(.qt-filter2) .qt-fchip em{font-style:normal;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--st-accent-tint,#E7F1F1);font-size:12px}
.qt-box .qt-filter2{gap:6px;font-size:13px}.qt-box .qt-filter2 .qt-fchip{padding:5px 11px;font-size:13px}
html body .qt-box .qt-list{gap:0;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden}
html body .qt-box .qt-list>details.qt-row{border:0;border-radius:0;margin:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
html body .qt-box .qt-list>details.qt-row:first-child{border-top:0}
.qt-box .qt-row .qt-sum{padding:0;list-style:none}.qt-box .qt-row .qt-sum::-webkit-details-marker{display:none}.qt-box .qt-row .qt-sum::before,.qt-box .qt-row .qt-sum::after{display:none}
.qt-box .qt-row .qt-open{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;color:inherit;text-decoration:none}
.qt-box .qt-row .qt-open:hover{background:color-mix(in srgb,var(--st-accent-tint,#E7F1F1) 55%,transparent)}
.qt-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--st-accent-tint,#E7F1F1);color:var(--st-accent,#0F5F63)}
.qt-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qt-ico.k-beta{background:#fdf1d3;color:#8a5a12}.qt-ico.k-question,.qt-ico.k-contact{background:#eef0f7;color:#48507a}.qt-ico.k-issue{background:#fde8e6;color:#b42318}
.qt-who{min-width:0;display:grid;gap:2px}.qt-who b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qt-who small{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt-meta{display:flex;align-items:center;gap:8px;white-space:nowrap}.qt-ago{font-size:13px;color:var(--muted)}.qt-ago.late{color:#b4531a;font-weight:700}
.qt-known{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:#e3f6f0;color:#0b6b5a;font-size:12px;font-weight:800}
.qt-st{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#f1f2ef;color:var(--muted)}.qt-st.st-contacted{background:#e3f1ee;color:#0b6b5a}
.qt-back{margin:0 0 12px}.qt-back a{font-weight:700;text-decoration:none;color:var(--st-accent,#0F5F63)}
@media (max-width:640px){.qt-box .qt-row .qt-open{grid-template-columns:36px minmax(0,1fr);gap:10px}.qt-box .qt-row .qt-meta{grid-column:2}}
/* D-M815 — Support: the head in one sentence; a ticket opened stands alone at full width (the studio skin grids .tk-desk with !important:
   the open state answers with the same weight) */
.tk-head{margin:0 0 12px}.tk-head h1{margin:0;font-size:30px}
html[data-hq] body:has(.studio-on) .pn-main .tk-desk.is-open,html body .tk-desk.is-open{display:block !important}
html[data-hq] body:has(.studio-on) .pn-main .tk-desk.is-open>.tk-inbox,html body .tk-desk.is-open>.tk-inbox{display:none !important}
html body .tk-desk.is-open>.tk-detail{max-width:none;width:100%}
html[data-hq] body:has(.studio-on) .pn-main .tk-desk.is-list,html body .tk-desk.is-list{display:block !important}
html[data-hq] body:has(.studio-on) .pn-main .tk-desk.is-list>.tk-detail,html body .tk-desk.is-list>.tk-detail{display:none !important}
html body .tk-desk.is-list>.tk-inbox{width:100%;max-width:none;position:static;max-height:none}
html body .tk-desk.is-list .tk-list .tk-prod,html body .tk-desk.is-list .tk-list [class*="tk-imp"]{display:inline-flex !important;width:auto !important;max-width:max-content;vertical-align:middle;margin-right:6px}
/* D-M823 — Disputes: the title and one sentence; "none open" is one quiet line, not a big empty card */
.dp-head{margin:0 0 10px}.dp-head h1{margin:0;font-size:30px}
html body .pn-main p.dp3-empty{margin:4px 0 0;padding:12px 16px;border-radius:14px;border:1px dashed var(--line);font-size:14px;max-width:none}
/* D-M827 — Numbers, Alerts and the product page: the tiles' numbers in one sentence */
.st-head{margin:0 0 14px}.st-head h1{margin:0;font-size:30px}.al2-say{margin:6px 0 0}.pv-say{margin:0 0 14px}
/* D-M826 — settings: the state in one sentence (ok green, warn amber, bad red) instead of boxes */
html body p.sst-say.sst-rows,html body p.sst-say.sst-kpis{display:block !important;grid-template-columns:none !important;padding:0;background:none;border:0;box-shadow:none}
html body p.sst-say .sst-it{display:inline;text-transform:none !important;letter-spacing:0 !important;font-size:inherit !important;font-weight:400;color:inherit;padding:0;background:none;border:0}
html body p.sst-say .sst-it b{font-size:inherit !important;font-weight:800;letter-spacing:0}
.sst-say{margin:4px 0 14px;font-size:15px}.sst-say b.ok{color:#0b6b5a}.sst-say b.warn{color:#b4531a}.sst-say b.bad{color:#b42318}.sst-say .sst-it{white-space:nowrap}
/* D-M824 — Outages: the title and one sentence; "Registra un disservizio" opens the form only when needed; the history comes first */
.ou-head{margin:0 0 12px}.ou-head h1{margin:0;font-size:30px}
.pn-main:has(> .ho-head) .hq-gnav-head{display:none}
.nl-head{margin:0 0 12px}.nl-head h1{margin:0;font-size:30px}
.an-head{margin:0 0 12px}.an-head h1{margin:0;font-size:30px}.an-layout{display:grid;gap:16px}
html body details.ou-new:not([open]){background:none;border:0;box-shadow:none;padding:0}
.ou-new{margin:0 0 16px}.ou-new>summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;cursor:pointer}.ou-new>summary::-webkit-details-marker{display:none}
.ou-new[open]>summary{margin-bottom:12px}.ou-new-in{padding:18px;border-radius:18px;background:var(--card,#fff);border:1px solid var(--line)}
/* D-M824 — an open dispute: the everyday actions in one row, the rare password-guarded ones (suspend, close) folded; the reply open */
.dp-rare{flex-basis:100%;margin-top:4px}.dp-rare>summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--muted);min-height:34px;display:flex;align-items:center}
.dp-rare-in{display:flex;flex-wrap:wrap;gap:10px;padding:10px 0 2px}
/* D-M822 — Customers: the title and one sentence (each number a filter), the old-rule names as a slim folded strip, one bar of filters */
.cd-head{margin:0 0 12px}.cd-head h1{margin:0;font-size:30px}.cd-head .ho-say a.on{color:var(--st-accent,#0F5F63);border-bottom-style:solid}.cd-head .ho-say a.warn b{color:#b4531a}
details.pu-badnames{padding:10px 14px}details.pu-badnames>summary{cursor:pointer;list-style:none}details.pu-badnames>summary::-webkit-details-marker{display:none}
.cd-bar{margin:6px 0 10px}
/* D-M821 — Today with the owner's rule: the money in one sentence under the date, "Da fare adesso" first, the analyst and "In diretta" after it */
.td-say{margin:6px 0 0;max-width:none}.td-head>div:first-child{flex:1 1 640px;min-width:0}.td-say small{font-size:13px}
html body .td-todo .td-ag{display:grid;gap:6px}
html body .td-todo .td-ag li.ag-it{display:grid !important;grid-template-columns:28px minmax(0,1fr) !important;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;margin:0}
html body .td-todo .td-ag li.ag-it>.ag-body{min-width:0;grid-column:2}html body .td-todo .td-ag li.ag-it>.ag-body>span{display:block;font-size:14.5px;font-weight:700;line-height:1.35}
html body .td-todo .td-ag li.ag-it>.ag-acts{grid-column:2 !important;grid-row:auto !important;display:flex !important;flex-wrap:wrap;gap:4px;margin:2px 0 0;max-width:none !important;width:auto !important}
html body .td-todo .td-ag li.ag-it .ag-acts .ag-b{min-height:30px !important;height:30px;padding:0 10px !important;font-size:12.5px !important;border-radius:8px}
html body .td-head .td-say small{display:inline}

.td-after{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.td-after>section{margin:0}.td-after .au-ask-note{font-size:12.5px}
@media (max-width:980px){.td-after{grid-template-columns:minmax(0,1fr)}}
/* D-M820 — A3 merge: the "looks like" strip under the ticket's head, its confirmation card, "merged here" and the manual merge in "In short" */
.mg-strip{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 14px;margin:12px 0 0;border-radius:14px;background:#fff7e6;border:1px solid #f3d9a4;font-size:14.5px}
.mg-strip b{font-weight:800}.mg-go{position:relative}.mg-go>summary{list-style:none;cursor:pointer;color:var(--st-accent,#0F5F63);font-weight:800}.mg-go>summary::-webkit-details-marker{display:none}
.mg-card{position:absolute;z-index:20;top:calc(100% + 8px);right:0;left:auto;width:min(420px,86vw);display:grid;gap:10px;padding:16px;border-radius:16px;background:var(--card,#fff);border:1.5px solid var(--st-accent,#0F5F63);box-shadow:0 24px 48px -24px rgba(15,21,36,.45)}
.mg-card ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13.5px}.mg-card form{margin:0}
.mg-no{margin:0}.mg-no button{border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer;padding:4px}
.mg-here{display:grid;gap:6px}.mg-here>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:var(--card,#fff);border:1px solid var(--line);font-size:13.5px}
.mg-manual>summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--st-accent,#0F5F63)}.mg-manual-f{display:grid;gap:6px;margin-top:8px}.mg-manual-f select{min-height:38px;border-radius:10px}
@media (max-width:640px){.mg-card{position:static;width:100%}}
/* D-M819 — Error codes: the head in one sentence, the trend on request, identical codes of a structure grouped (×N, the others folded) */
.srl-head{margin:0 0 12px}.srl-head h1{margin:0;font-size:30px}
.srl-page .srl-trend{padding:0}.srl-page .srl-trend>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;font-weight:700;color:var(--muted)}
.srl-page .srl-trend>summary::-webkit-details-marker{display:none}.srl-page .srl-trend>summary::after{content:"▾";font-size:12px}.srl-page .srl-trend[open]>summary::after{content:"▴"}
html body .srl-page details.srl-trend:not([open]){background:none !important;border:0 !important;box-shadow:none !important;padding:0;margin:-4px 0 4px}
html body .srl-page details.srl-trend[open]{padding:0 18px 16px}
.srl-tag.grp{background:#fff1d6;color:#8a5a12;font-weight:800;font-style:normal}
.srl-more{margin:-6px 0 8px 22px}.srl-more>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--st-accent,#0F5F63);min-height:32px;display:flex;align-items:center}
.srl-more-list{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 8px}
.srl-more-list a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card,#fff);text-decoration:none;color:inherit;font-size:12.5px}
.srl-more-list a code{font-size:12px}.srl-more-list a small{color:var(--muted)}
/* D-M818 — A1 saved replies: a quiet line above the reply that opens into chips; saving is one line */
.tkr{margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:var(--card,#fff)}
.tkr>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 14px;font-weight:700;font-size:14px}
.tkr>summary::-webkit-details-marker{display:none}.tkr>summary::before{content: '';display: inline-block;width: 14px;height: 14px;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L5 13.5h6l-1 8 8-11h-6z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L5 13.5h6l-1 8 8-11h-6z'/%3E%3C/svg%3E") center / contain no-repeat;vertical-align:-2px}
.tkr>summary em{font-style:normal;padding:1px 8px;border-radius:999px;background:var(--st-accent-tint,#E7F1F1);font-size:12px}.tkr>summary small{font-weight:600}
.tkr-list{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.tkr-it{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--st-accent-tint,#f4f8f7);overflow:hidden}
.tkr-use{border:0;background:none;padding:7px 12px;font-weight:700;font-size:13.5px;cursor:pointer;color:inherit}.tkr-use:hover,.tkr-use:focus-visible{background:rgba(15,95,99,.1)}
.tkr-del{margin:0}.tkr-x{border:0;background:none;padding:7px 10px;cursor:pointer;color:var(--muted);font-size:16px;line-height:1}.tkr-x:hover{color:#b42318}
.tkr-none{margin:0;font-size:13px}
.tkr-add{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--line)}.tkr-add input[type=text]{flex:1;min-height:38px;border-radius:10px}
/* D-M817 — the Support list in plain words: one card of rows, day headers, the wait on the right (orange past a day), the writing box in a ticket */
html body .tk-desk.is-list .tk-list{display:block;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:0}
html body .tk-desk.is-list .tk-list>.tk-day{padding:10px 16px 6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--st-accent-tint,#E7F1F1) 45%,var(--card,#fff));border-top:1px solid var(--line)}
html body .tk-desk.is-list .tk-list>.tk-day:first-child{border-top:0}
html body .tk-desk.is-list .tk-list>a.tk-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;margin:0;border:0;border-radius:0;border-top:1px solid var(--line);box-shadow:none;background:none;padding:14px 16px}
html body .tk-desk.is-list .tk-list>a.tk-item:hover{background:color-mix(in srgb,var(--st-accent-tint,#E7F1F1) 55%,transparent)}
html body .tk-desk.is-list .tk-list>a.tk-item .tk-body b{font-size:15.5px}html body .tk-desk.is-list .tk-list>a.tk-item .tk-body small{display:block;margin-top:3px;color:var(--muted);font-size:13.5px}
.tk-meta2{display:flex;align-items:center;gap:8px;white-space:nowrap}.tk-ago{font-size:13px;color:var(--muted)}.tk-ago.late{color:#b4531a;font-weight:700}
.tk-modes{margin-top:4px}.tk-modes .qdm-p .tk-reply{margin:0;border:0;box-shadow:none}.tk-note-sub{margin:0 0 10px;font-size:13px}
@media (max-width:640px){html body .tk-desk.is-list .tk-list>a.tk-item{grid-template-columns:32px minmax(0,1fr)}.tk-meta2{grid-column:2}}
/* D-M816 — inside a ticket: the conversation, the AI's suggestion and the reply wide; who it is and the ticket's controls in "In short" */
.tkd-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start;margin-top:14px}
.tkd-main{display:grid;gap:16px;min-width:0}
.tkd-side{display:grid;gap:14px;align-content:start;padding:18px;border-radius:16px;background:var(--st-accent-tint,#f4f8f7);border:1px solid var(--line);position:sticky;top:16px;min-width:0}
.tkd-side>*{min-width:0;max-width:100%}
.tkd-side .tk-cust{display:grid;gap:6px;margin:0;padding:0;background:none;border:0;font-size:13.5px;word-break:break-word}
.tkd-side .tk-cust-actions{display:flex;flex-wrap:wrap;gap:6px}
.tkd-side .tk-tools{display:grid;gap:10px;margin:0;padding:0;border:0;background:none}
.tkd-side .tk-prios{display:flex;flex-wrap:wrap;gap:6px}.tkd-side .tk-prios button{min-height:34px;font-size:12.5px}
.tkd-side .tk-tools-right{display:grid;gap:6px;justify-items:stretch}.tkd-side .tk-tools-right form,.tkd-side .tk-tools-right .btn{width:100%}.tkd-side .tk-tools-right button{width:100%;min-height:40px}
.tk-thread>.tk-head h2{font-size:24px;letter-spacing:-.02em}
.tkd-main .tk-ai{border-radius:14px;margin:0}.tkd-main .tk-reply{margin:0}
@media (max-width:980px){.tkd-grid{grid-template-columns:minmax(0,1fr)}.tkd-side{position:static}}
/* D-M815 — Reconciliation per circuit: one sentence, the differences as tabs (radio + label, no script) */
.rc-csay{margin:4px 0 12px}
.hq-rc-main .rc-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rc-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 12px}
.rc-tabs label::first-letter{text-transform:uppercase}.rc-tabs label{padding:9px 14px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.rc-tabs label em{font-style:normal;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--st-accent-tint,#E7F1F1);font-size:12px}
.rc-r-circuit:checked~.rc-tabs .rc-tab-circuit,.rc-r-diff:checked~.rc-tabs .rc-tab-diff,.rc-r-dispute:checked~.rc-tabs .rc-tab-dispute,.rc-r-ledger:checked~.rc-tabs .rc-tab-ledger,.rc-r-neutral:checked~.rc-tabs .rc-tab-neutral,.rc-r-matched:checked~.rc-tabs .rc-tab-matched{color:var(--ink,inherit);border-bottom-color:var(--st-accent,#0F5F63)}
.hq-rc-main .rc-r:focus-visible~.rc-tabs{outline:3px solid rgba(15,95,99,.35);outline-offset:2px}
.rc-p{display:none}.rc-r-circuit:checked~.rc-p-circuit,.rc-r-diff:checked~.rc-p-diff,.rc-r-dispute:checked~.rc-p-dispute,.rc-r-ledger:checked~.rc-p-ledger,.rc-r-neutral:checked~.rc-p-neutral,.rc-r-matched:checked~.rc-p-matched{display:block}
/* D-M809 — one order: what happened in the wide column (timeline, documents, a note), "In short" on the side; reconciliation's header */
.ho-cols.ho-cols-one{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:start}
.ho-col-side .ho-card{padding:16px 18px}.ho-col-side .ho-card h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hq-rc-main .rc-head,.hq-rc-main .rc-head h1{text-align:left}.rc-head .ho-head-acts{position:relative;display:flex;gap:8px;align-items:center}.rc-quick{margin:0}.rc-set .ho-more-in{width:min(560px,90vw)}
.rc-legend>summary{cursor:pointer;font-weight:700;color:var(--muted);min-height:36px;display:flex;align-items:center}
@media (max-width:900px){.ho-cols.ho-cols-one{grid-template-columns:minmax(0,1fr)}}
/* D-M808 — Orders with the owner's rule: one sentence of numbers under the title, the trend on request, ONE bar of filters with the
   rare ones in a "Filtri" popover, the filters in use as removable chips — the list starts right away */
.ho-say{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:none}.ho-say a{color:inherit;text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--st-accent,#0F5F63) 45%,transparent)}.ho-say a:hover{color:var(--st-accent,#0F5F63)}.ho-say b{color:var(--ink,inherit);font-weight:800}.ho-say-d{font-size:14px}
.ho-page .ho-head>div:first-child{flex:1 1 560px;min-width:0}
html body .ho-page details.ho-trend:not([open]){background:none !important;border:0 !important;box-shadow:none !important;padding:0;margin-top:-10px}   /* the Aurora card skin paints .ho-card with !important */.ho-trend[open]{padding:0 18px}.ho-trend>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--muted)}.ho-trend>summary::-webkit-details-marker{display:none}.ho-trend>summary::after{content:"▾";font-size:12px}.ho-trend[open]{padding-bottom:16px}.ho-trend[open]>summary::after{content:"▴"}
.ho-bar{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ho-bar .ho-search{flex:1 1 360px}.ho-bar .ho-search input{width:100%;height:46px;box-sizing:border-box;border-radius:12px}.ho-bar .ho-go{min-height:46px}
.ho-more>summary{list-style:none;cursor:pointer;min-height:46px;display:inline-flex;align-items:center;gap:6px}.ho-more>summary::-webkit-details-marker{display:none}.ho-more>summary::after{content:"▾";font-size:12px}.ho-more[open]>summary{background:var(--st-accent-tint,#E7F1F1)}
.ho-more-in{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(820px,100%);box-sizing:border-box;display:grid;gap:14px;padding:18px;border-radius:18px;background:var(--card,#fff);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(15,21,36,.45)}
.ho-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px}.ho-chips a{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:999px;background:var(--st-accent-tint,#E7F1F1);color:var(--st-accent,#0F5F63);font-weight:700;font-size:13.5px;text-decoration:none}.ho-chips a span{font-size:16px;line-height:1}
.ho-page .ho-fix{padding:10px 14px;border-radius:14px}.ho-page .ho-fix a{padding:6px 12px}
@media (max-width:760px){.ho-bar .ho-search{flex-basis:100%}.ho-more-in{position:static;width:100%;margin-top:8px}.ho-say{font-size:15px}}
.ho-filters{display:flex;flex-direction:column;gap:12px}.ho-f-top{display:flex;gap:12px;flex-wrap:wrap}.ho-search{flex:1 1 320px}.ho-search input{width:100%;height:44px;box-sizing:border-box}
.ho-periods{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.ho-periods a{padding:0 14px;display:flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;font-size:13px;border-left:1px solid var(--line)}.ho-periods a:first-child{border-left:0}.ho-periods a.on{background:var(--signal);color:#fff;font-weight:600}
.ho-f-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.ho-f-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-soft)}.ho-f-grid select,.ho-f-grid input{height:40px}
.ho-f-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ho-f-range{display:flex;gap:10px;align-items:center;font-size:13px}.ho-test{font-size:13px;display:flex;gap:6px;align-items:center;margin-right:auto}
.ho-totals{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);padding:0 4px}.ho-totals b{color:var(--ink);font-family:var(--mono,monospace)}.ho-totals b.neg{color:var(--err-ink)}.ho-totals b.pos{color:var(--ok-ink)}
.ho-table{padding:0;overflow:hidden}.ho-tr{display:grid;grid-template-columns:118px 170px minmax(0,1.4fr) minmax(0,1fr) 128px 92px 128px 90px;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:center;color:inherit;text-decoration:none;font-size:14px}
.ho-tr:hover{background:var(--paper)}.ho-th{font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;background:var(--paper)}.ho-th a{color:inherit;text-decoration:none}
.ho-tr span{min-width:0}.ho-code,.ho-who,.ho-what{display:flex;flex-direction:column;gap:2px}.ho-tr small{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ho-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ho-amt{font-weight:600}.ho-amt.pos{color:var(--ok-ink)}.ho-amt.neg{color:var(--err-ink)}.ho-amt.none{color:var(--ink-soft)}.ho-tr.test{opacity:.7}
.ho-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;font-style:normal;background:var(--ok-bg);color:var(--ok-ink)}.ho-pill.pending,.ho-pill.stuck{background:var(--warn-bg);color:var(--warn-ink)}
.ho-pill.refund,.ho-pill.refunded,.ho-pill.part{background:var(--err-bg);color:var(--err-ink)}.ho-pill.dispute{background:#ede7fb;color:#4c2a99}.ho-pill.test{background:var(--paper);color:var(--ink-soft)}
.ho-docs{display:flex;gap:6px}.ho-docs i{font-style:normal;font-size:11px;font-weight:700;padding:2px 5px;border-radius:6px;border:1px dashed var(--line);color:var(--ink-soft)}.ho-docs i.ok{border:1px solid var(--ok-ink);color:var(--ok-ink)}.ho-docs i.bad{border:1px solid var(--err-ink);color:var(--err-ink);background:var(--err-bg)}
.ho-pager{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:13px;gap:10px;flex-wrap:wrap}.ho-pager .btn{min-width:40px;min-height:40px}.ho-empty{padding:18px}
.ho-crumb{font-size:14px;color:var(--ink-soft)}.ho-one-head{display:flex;flex-direction:column;gap:16px}.ho-one-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.ho-one-top h1{margin:0;font-size:26px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ho-one-amt{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.ho-one-amt b{font-size:32px}.ho-one-amt b.pos{color:var(--ok-ink)}.ho-one-amt b.neg{color:var(--err-ink)}.ho-one-amt small{font-size:13px;color:var(--ink-soft)}
.ho-acts{display:flex;gap:8px;flex-wrap:wrap}.ho-acts form.inline{display:inline}.ho-alert{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:14px;border:1px solid var(--line)}.ho-alert.bad{background:var(--err-bg);color:var(--err-ink)}.ho-alert.warn{background:var(--warn-bg);color:var(--warn-ink)}
.ho-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.ho-col{display:flex;flex-direction:column;gap:18px}
.ho-kv{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;font-size:14px;padding:4px 0}.ho-kv span{color:var(--ink-soft)}.ho-kv b{font-weight:500;overflow-wrap:anywhere}
.ho-money div{display:flex;justify-content:space-between;font-size:14px;padding:5px 0}.ho-money .tot{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;font-weight:600}.ho-money .res b{color:var(--signal)}
.ho-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.ho-tl li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;font-size:14px;padding-left:14px;border-left:3px solid var(--line)}.ho-tl li.ok{border-left-color:var(--ok-ink)}.ho-tl li.bad{border-left-color:var(--err-ink)}.ho-tl li.teal{border-left-color:var(--signal)}
.ho-tl time{font-size:12px;color:var(--ink-soft)}.ho-tl span{display:flex;flex-direction:column;gap:2px}.ho-tl small{font-size:12px;color:var(--ink-soft)}
.ho-refund form{display:flex;flex-direction:column;gap:10px;max-width:640px}.ho-rf-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}.ho-rf-row input{height:40px}.ho-rf-opt{font-size:14px;display:flex;gap:8px;align-items:center}
@media (max-width:1100px){.ho-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.ho-f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ho-cols{grid-template-columns:1fr}.ho-tr{grid-template-columns:110px minmax(0,1fr) 110px 110px}.ho-tr>span:nth-child(4),.ho-tr>span:nth-child(6),.ho-tr>span:nth-child(8){display:none}}
@media (max-width:640px){.ho-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ho-f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ho-tr{grid-template-columns:minmax(0,1fr) 110px}.ho-tr>span:nth-child(1),.ho-tr>span:nth-child(3),.ho-tr>span:nth-child(7){display:none}.ho-kv{grid-template-columns:1fr}}
/* D-M710 — the order page's history line, the customer filter, the documents */
.ho-life{margin:0 0 8px;font-size:13px;color:var(--ink-soft)}.ho-life .neg{color:var(--err-ink)}.ho-only{margin:6px 0 0;font-size:14px}
.ho-doc{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.ho-doc:last-child{border-bottom:0}.ho-doc span{display:flex;flex-direction:column;gap:2px}.ho-doc small{font-size:12px;color:var(--ink-soft)}
/* D-M712 — the Customers list (platform_users.php) */
.cd-tabs{display:flex;gap:4px;align-items:center;border-bottom:1px solid var(--line);margin:4px 0 14px;flex-wrap:wrap}.cd-tabs a{padding:0 14px;min-height:44px;display:flex;align-items:center;gap:6px;color:var(--ink-soft);text-decoration:none;border-bottom:3px solid transparent;font-size:14px}
.cd-tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--signal)}.cd-tabs a b{font-family:var(--mono,monospace);font-weight:500;color:var(--ink-soft)}.cd-tabs .cd-new{margin-left:auto;border-bottom:0;color:#fff}
.cd-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}.cd-kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none}
.cd-kpi:hover,.cd-kpi.on{border-color:var(--signal)}.cd-kpi span{font-size:13px;color:var(--ink-soft)}.cd-kpi b{font-size:22px;font-family:var(--mono,monospace)}.cd-kpi small{font-size:12px;color:var(--ink-soft)}.cd-kpi.ok b{color:var(--ok-ink)}.cd-kpi.warn b{color:var(--warn-ink)}.cd-kpi.bad b{color:var(--err-ink)}
.cd-filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px}.cd-filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-soft)}
.cd-filters select,.cd-filters input{height:40px}.cd-q{flex:1 1 280px}.cd-q input{width:100%;box-sizing:border-box}
.cd-table{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}.cd-tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) 112px 116px 90px 130px 170px;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:center;color:inherit;text-decoration:none;font-size:14px}
.cd-tr:hover{background:var(--paper)}.cd-th{font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;background:var(--paper)}.cd-tr .r{text-align:right}.cd-tr .mono{font-family:var(--mono,monospace)}.cd-tr .warn{color:var(--warn-ink)}.cd-tr.gone{opacity:.7}
.cd-who{display:flex;gap:10px;align-items:center;min-width:0}.cd-who>span,.cd-insts{display:flex;flex-direction:column;gap:2px;min-width:0}.cd-who b,.cd-who small,.cd-insts span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-who small,.cd-insts small{font-size:12px;color:var(--ink-soft)}
.cd-st.active{color:var(--ok-ink)}.cd-st.expiring,.cd-st.trial{color:var(--warn-ink)}.cd-st.recover{color:var(--err-ink)}
.cd-sig{display:flex;gap:4px;flex-wrap:wrap}.cd-sig i{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--paper);color:var(--ink-soft)}.cd-sig i.bad{background:var(--err-bg);color:var(--err-ink)}.cd-sig i.disp{background:#ede7fb;color:#4c2a99}.cd-sig i.tk{background:#e6eef9;color:#1d4ed8}
.cd-pager{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:13px;gap:10px;flex-wrap:wrap}.cd-pager .btn{min-width:40px;min-height:40px}.cd-empty{padding:18px}
@media (max-width:1100px){.cd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.cd-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 100px 100px}.cd-tr>span:nth-child(5),.cd-tr>span:nth-child(6),.cd-tr>span:nth-child(7){display:none}}
@media (max-width:640px){.cd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cd-tr{grid-template-columns:minmax(0,1fr) 96px}.cd-tr>span:nth-child(2),.cd-tr>span:nth-child(4){display:none}}
/* D-M712 — the customer card: open items, quick actions, tabs, identity column, light structures list */
.pcu-open{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.pcu-open b{font-size:13px;color:var(--ink-soft)}.pcu-open a{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.pcu-open a.warn{background:var(--warn-bg);color:var(--warn-ink)}.pcu-open a.bad{background:var(--err-bg);color:var(--err-ink)}.pcu-open a.tk{background:#e6eef9;color:#1d4ed8}.pcu-open a.disp{background:#ede7fb;color:#4c2a99}
.pcu-quick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}.pcu-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}.pcu-tabs a{padding:0 14px;min-height:44px;display:flex;align-items:center;gap:6px;color:var(--ink-soft);text-decoration:none;border-bottom:3px solid transparent;font-size:14px}
.pcu-tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--signal)}.pcu-tabs a b{font-family:var(--mono,monospace);font-weight:500}
.pcu-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}.pcu-aside{display:flex;flex-direction:column;gap:12px;min-width:0}.pcu-body{min-width:0;display:flex;flex-direction:column;gap:12px}.pcu-tabbody{display:flex;flex-direction:column;gap:12px}
.pcu-id h2{font-size:15px}.pcu-id dd.warn{color:var(--warn-ink)}.pcu-empty{padding:12px 4px}.pcu-more{margin:4px 0 12px}
.pcu-il{display:flex;flex-direction:column}.pcu-il-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px 150px 90px;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;font-size:14px;align-items:center}
.pcu-il-row:hover,.pcu-il-row.on{background:var(--paper)}.pcu-il-row em{font-style:normal;color:var(--signal);text-align:right}.pcu-il-row .mono,.pcu-ov-row .mono{font-family:var(--mono,monospace)}
.pcu-ov-h{display:flex;justify-content:space-between;align-items:baseline}.pcu-ov-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 110px;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.st-active{color:var(--ok-ink)}.st-suspended,.st-expired{color:var(--err-ink)}
@media (max-width:1000px){.pcu-grid{grid-template-columns:1fr}.pcu-il-row{grid-template-columns:minmax(0,1fr) 110px 90px}.pcu-il-row>span:nth-of-type(3),.pcu-il-row em{display:none}}
/* D-M714 — the support desk: server-side queue, pager, light request rows */
.tk-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;font-size:13px}.tk-pager .btn{min-width:40px;min-height:40px}
.qt-row .qt-sum{list-style:none}.qt-row .qt-sum::-webkit-details-marker{display:none}.qt-open{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;width:100%;min-height:40px}.qt-sform{margin:0}
/* D-M715 — the requests' path, the customer's orders in the ticket header */
.qt-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:8px 0 14px}.qt-path div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.qt-path span{font-size:12.5px;color:var(--ink-soft)}.qt-path b{font-size:20px;font-family:var(--mono,monospace)}.qt-path small{font-size:12px;color:var(--ink-soft)}.qt-path .ok b{color:var(--ok-ink)}
.tk-cust-orders{font-size:13px}@media (max-width:900px){.qt-path{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* D-M716 — the packages list's pager */
.pkd-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;font-size:13px}.pkd-pager .btn{min-width:40px;min-height:40px}
/* D-M717 — Promotions and coupons: the four automatic promotions; the door in the Sales pane */
.cpn-promo{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.cpn-promo-h{display:flex;justify-content:space-between;align-items:center;gap:8px}.cpn-promo-n b{font-size:20px;font-family:var(--mono,monospace)}.cpn-promo .btn{align-self:flex-start}.cp-door{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
@media (max-width:1000px){.cpn-promos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* D-M717 — the price list as cards beside the editor, the checkout card's preview inside the editor column (approved design) */
.pkd-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.pkd-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.pkd-list>.pkd-list-head,.pkd-list>.pkd-pager,.pkd-list>.pkd-how,.pkd-list>p{grid-column:1/-1}
.pkd-list>.pkd-row{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:0}
.pkd-list>.pkd-row.editing{border:2px solid var(--signal)}
.pkd-editor>.pkd-stage{position:sticky;top:12px;margin-bottom:14px}
@media (max-width:1100px){.pkd-layout{grid-template-columns:1fr}.pkd-list{grid-template-columns:1fr}.pkd-editor>.pkd-stage{position:static}}
/* D-M720 — "Ordini e movimenti": the views' tabs, the cash movements */
.ho-views{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 14px;flex-wrap:wrap}.ho-views a{padding:0 16px;min-height:44px;display:flex;align-items:center;color:var(--ink-soft);text-decoration:none;border-bottom:3px solid transparent;font-size:14px}
.ho-views a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--signal)}
.cv-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.cv-cur{grid-column:1/-1;margin:0;font-size:13px}
.cv-table{padding:0;overflow:hidden}.cv-tr{display:grid;grid-template-columns:130px 150px minmax(0,1fr) 90px 110px 110px 130px 110px;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:center;color:inherit;text-decoration:none;font-size:14px}
.cv-tr:hover{background:var(--paper)}.cv-th{font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;background:var(--paper)}.cv-tr .r{text-align:right}.cv-tr .mono{font-family:var(--mono,monospace);font-size:13px}
.cv-tr .pos{color:var(--ok-ink);font-weight:600}.cv-tr .neg{color:var(--err-ink);font-weight:600}.cv-tr.test{opacity:.75}.cv-who{display:flex;flex-direction:column;gap:2px;min-width:0}.cv-who b,.cv-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-who small{font-size:12px;color:var(--ink-soft)}
.cv-fic{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--paper);color:var(--ink-soft)}.cv-fic.ok{background:var(--ok-bg);color:var(--ok-ink)}.cv-fic.bad{background:var(--err-bg);color:var(--err-ink)}.cv-fic.wait{background:var(--warn-bg);color:var(--warn-ink)}
@media (max-width:1100px){.cv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cv-tr{grid-template-columns:minmax(0,1fr) 110px 110px}.cv-tr>span:nth-child(1),.cv-tr>span:nth-child(2),.cv-tr>span:nth-child(4),.cv-tr>span:nth-child(7),.cv-tr>span:nth-child(8){display:none}}
.pkd-row-sold{margin:0;font-size:12.5px}
/* D-M722 — Oggi (approved design): one to-do list, takings with one source, the numbers of the menu */
.hq-today{display:flex;flex-direction:column;gap:16px}.td-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}.td-head h1{margin:0;font-size:28px}.td-head p{margin:4px 0 0}
.td-views{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.td-views a{padding:0 18px;min-height:44px;display:flex;align-items:center;color:inherit;text-decoration:none;font-size:14px;border-left:1px solid var(--line)}.td-views a:first-child{border-left:0}.td-views a.on{background:var(--signal);color:#fff;font-weight:600}
.td-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:18px;align-items:end;background:#16181d;color:#fff;border-radius:18px;padding:18px 22px}
.td-money a{display:flex;flex-direction:column;gap:3px;color:#fff;text-decoration:none}.td-money span,.td-money small{font-size:12.5px;color:#b8bdc7}.td-money b{font-family:var(--mono,monospace);font-size:24px}.td-money b.pos{color:#8fe3b0}
.td-spark{display:flex;flex-direction:column;gap:6px;color:#e7b75f}.td-spark svg{width:100%;height:60px}.td-spark small{color:#b8bdc7}
.td-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}.td-side{display:flex;flex-direction:column;gap:16px}
.td-todo{padding:0;overflow:hidden}.td-todo-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.td-todo-h h2{margin:0;font-size:18px}.td-empty{padding:14px 18px}
.td-row{display:grid;grid-template-columns:10px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;font-size:14px;min-height:44px}.td-row:hover{background:var(--paper)}.td-row em{font-style:normal;color:var(--ink-soft)}
.td-dot{width:9px;height:9px;border-radius:999px;background:var(--ink-soft)}.td-row.warn .td-dot{background:var(--warn-ink)}.td-row.bad .td-dot{background:var(--err-ink)}.td-ag{padding:6px 12px 10px}
.td-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.td-nums a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--paper);color:inherit;text-decoration:none}.td-nums b{font-family:var(--mono,monospace);font-size:22px}.td-nums span{font-size:13px;color:var(--ink-soft)}.td-nums .warn b{color:var(--warn-ink)}.td-nums .bad b{color:var(--err-ink)}
.td-exp h2{font-size:15px;margin:0 0 6px}.td-exp a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;font-size:14px}.td-exp b.bad{color:var(--err-ink)}.td-exp b.warn{color:var(--warn-ink)}
@media (max-width:1000px){.td-money{grid-template-columns:repeat(3,minmax(0,1fr))}.td-spark{grid-column:1/-1}.td-grid{grid-template-columns:1fr}}
/* D-M722 review of the screenshot: the takings' figures and the AI line were dark on dark / light on light; the numbers stacked in one column */
.td-money b{color:#fff}.td-money b.pos{color:#8fe3b0}
.td-head .hq-home-ai{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0 0;font-size:14px}
.panel.td-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.td-more{padding:4px 18px 14px;margin:0;font-size:14px}
/* D-M722 — the Agenda as a tab of Oggi: one number per day, the chosen day beside */
.ag2-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.ag2-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.ag2-cell{min-height:58px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;justify-content:space-between;color:inherit;text-decoration:none;font-size:13px;background:var(--card)}
.ag2-cell.out{opacity:.4}.ag2-cell.today{border-color:var(--signal)}.ag2-cell.sel{border:2px solid var(--signal);background:var(--paper)}.ag2-cell b{font-family:var(--mono,monospace);font-size:13px;color:var(--signal)}.ag2-cell b.late{color:var(--err-ink)}.ag2-cell:hover{background:var(--paper)}
.ag2-legend{font-size:12px;margin:8px 0 0}.ag2-day-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.ag2-day-h h2{margin:0;font-size:17px}
.ag2-f{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.ag2-f a{padding:0 12px;min-height:38px;display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none;font-size:13px}.ag2-f a.on{background:var(--signal);color:#fff}.ag2-f em{font-style:normal}
.ag2-add{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.ag2-add h3{margin:0 0 8px;font-size:15px}.ag2-add p{font-size:12px}
@media (max-width:1000px){.ag2-grid{grid-template-columns:1fr}}
/* D-M723 — phone screens (bugs seen on the 390 px contact sheet of the redone pages) */
.hq-home-ai{overflow-wrap:anywhere}
@media (max-width:640px){
  .td-money{grid-template-columns:1fr;gap:12px}.td-money b{font-size:22px}
  .ho-periods{flex-wrap:wrap}.ho-periods a{flex:1 1 30%;justify-content:center;border-top:1px solid var(--line)}
  .tk-filters-row{display:flex;flex-wrap:wrap;gap:8px}.tk-filters-row .search{flex:1 1 100%;order:-1}.tk-filters-row select{flex:1 1 40%;min-width:0}.tk-filters-row .search input{width:100%;box-sizing:border-box}
}
/* D-M724 — the disputes desk: the queue by deadline beside the chosen dispute */
.dp2-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}.dp2-queue{padding:0;overflow:hidden}
.dp2-q{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.dp2-q:hover,.dp2-q.on{background:var(--paper)}.dp2-q.on{box-shadow:inset 3px 0 0 var(--signal)}
.dp2-days{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;height:54px;background:var(--paper)}.dp2-days b{font-family:var(--mono,monospace);font-size:20px}.dp2-days small{font-size:11px}
.dp2-days.bad{background:var(--err-bg);color:var(--err-ink)}.dp2-days.warn{background:var(--warn-bg);color:var(--warn-ink)}.dp2-days.ok{background:var(--ok-bg);color:var(--ok-ink)}
.dp2-q-main{display:flex;flex-direction:column;gap:4px;min-width:0}.dp2-q-main>span:first-child{display:flex;justify-content:space-between;gap:8px;font-size:14px}.dp2-q-main small{font-size:12.5px;color:var(--ink-soft)}.dp2-q-main .mono{font-family:var(--mono,monospace)}
.dp2-tags{display:flex;gap:6px;flex-wrap:wrap}.dp2-tags i{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--paper);color:var(--ink-soft)}.dp2-tags i.bad{background:var(--err-bg);color:var(--err-ink)}.dp2-tags i.warn{background:var(--warn-bg);color:var(--warn-ink)}.dp2-tags i.ok{background:var(--ok-bg);color:var(--ok-ink)}.dp2-tags i.draft{background:#e6eef9;color:#1d4ed8}
.dp2-soon{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--err-bg);color:var(--err-ink)}
@media (max-width:1100px){.dp2-grid{grid-template-columns:1fr}}
.ho-views a{gap:6px}   /* a flex link drops the space between its label and its count ("Aperte3") */
/* D-M729 — New sale: three steps beside "what will happen" */
.nv-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}.nv-grid>.hq-new-panel{margin:0}
.nv-steps{display:flex;gap:8px;list-style:none;margin:0 0 14px;padding:0;counter-reset:nv}.nv-steps li{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--paper);font-size:13px;color:var(--ink-soft)}
.nv-steps li::before{counter-increment:nv;content:counter(nv);width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--line);font-weight:700;font-size:12px}
.nv-steps li.on{background:var(--signal);color:#fff;font-weight:600}.nv-steps li.on::before{background:#fff;color:var(--signal)}.nv-steps li.done::before{content:'✓';background:var(--ok-bg);color:var(--ok-ink)}
.nv-step h2{font-size:17px;margin:0 0 12px}.nv-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}.nv-nav .btn{min-height:44px}
.nv-known{margin:6px 0 0;font-size:13.5px;padding:0}.nv-known.ok{color:var(--ok-ink)}.nv-known.bad{color:var(--err-ink);font-weight:600}
.nv-sum{position:sticky;top:12px}.nv-sum h2{font-size:17px;margin:0 0 10px}.nv-sum ol,.nv-recap ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}.nv-sum p{font-size:12.5px;margin:12px 0 0}
.nv-recap{background:var(--paper);border-radius:12px;padding:12px 14px;margin-bottom:12px}
@media (max-width:1000px){.nv-grid{grid-template-columns:1fr}.nv-sum{position:static}}
.nv-known{min-height:20px}   /* the "already a customer" line keeps its room: appearing, it moved "Next" under the pointer (D-M729) */
.pt-guard{display:flex;flex-direction:column;gap:4px;font-size:13px;margin:10px 0}.pt-guard input{max-width:320px}
/* D-M731 — THE PRODUCT: one header, five tabs, the parts of the open tab (the same for every product) */
.hq-pnav{display:flex;flex-direction:column;gap:0;margin:0 0 18px;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.hq-pnav-head{display:flex;align-items:center;gap:14px;padding:16px 20px}
.hq-pnav-logo{width:48px;height:48px;border-radius:14px;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:21px;flex-shrink:0}
.hq-pnav-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.hq-pnav-id b{font-size:22px;line-height:1.15}.hq-pnav-id small{font-size:13px;color:var(--ink-soft)}
.hq-pnav-acts{display:flex;gap:8px;flex-wrap:wrap}.hq-pnav-acts .btn{min-height:42px;display:inline-flex;align-items:center}.hq-pnav-acts .btn.primary{color:#fff}
.hq-pnav-tabs{display:flex;gap:2px;padding:0 12px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.hq-pnav-tabs a{padding:13px 16px;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.hq-pnav-tabs a:hover{color:var(--signal)}.hq-pnav-tabs a.on{color:var(--signal);font-weight:600;border-bottom-color:var(--signal)}
.hq-pnav-parts{display:flex;gap:8px;padding:12px 20px;background:var(--paper);border-top:1px solid var(--line);flex-wrap:wrap}
.hq-pnav-parts a{min-height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);display:inline-flex;align-items:center;font-size:14px;color:var(--ink);text-decoration:none}
.hq-pnav-parts a:hover{border-color:var(--signal)}.hq-pnav-parts a.on{background:var(--signal);border-color:var(--signal);color:#fff;font-weight:600}
/* on a product's pages the header says who and where: the page's own hero becomes a compact line (its status stays) */
body:has(.hq-pnav) .pn-hero{padding:14px 18px;min-height:0;margin-bottom:14px}body:has(.hq-pnav) .pn-hero h1{font-size:19px}
body:has(.hq-pnav) .pn-hero-kicker,body:has(.hq-pnav) .pn-hero .pn-kicker{display:none}
/* the Overview */
.pv-status{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:16px;margin-bottom:16px;border:1px solid}
.pv-status.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok-ink) 30%,transparent)}.pv-status.bad{background:var(--err-bg);border-color:color-mix(in srgb,var(--err-ink) 30%,transparent)}
.pv-status .pv-dot{width:12px;height:12px;border-radius:999px;flex-shrink:0}.pv-status.ok .pv-dot{background:var(--ok-ink)}.pv-status.bad .pv-dot{background:var(--err-ink)}
.pv-status div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.pv-status b{font-size:16px}.pv-status small{font-size:13px;color:var(--ink-soft)}.pv-status a{font-size:14px;font-weight:600;white-space:nowrap}
.pv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.pv-kpis a{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}.pv-kpis a:hover{border-color:var(--signal)}
.pv-kpis span{font-size:13px;color:var(--ink-soft)}.pv-kpis b{font-family:var(--mono,monospace);font-size:25px}.pv-kpis b.pos{color:var(--ok-ink)}.pv-kpis b.warn{color:var(--warn-ink)}.pv-kpis small{font-size:12.5px;color:var(--ink-soft)}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}.pv-side{display:flex;flex-direction:column;gap:16px}
.pv-watch{padding:0;overflow:hidden}.pv-watch h2{margin:0;padding:14px 20px;border-bottom:1px solid var(--line);font-size:17px}.pv-none{padding:14px 20px;margin:0}
.pv-w{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.pv-w:hover{background:var(--paper)}
.pv-w i{width:9px;height:9px;border-radius:999px;background:var(--ink-soft)}.pv-w i.warn{background:var(--warn-ink)}.pv-w i.bad{background:var(--err-ink)}
.pv-w span{display:flex;flex-direction:column;gap:2px;min-width:0}.pv-w b{font-size:14px}.pv-w small{font-size:12.5px;color:var(--ink-soft)}.pv-w em{font-style:normal;font-size:13px;color:var(--signal);font-weight:600;white-space:nowrap}
.pv-link h2,.pv-quick h2{font-size:16px;margin:0 0 8px}.pv-l{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.pv-l span{color:var(--ink-soft)}.pv-l b.ok{color:var(--ok-ink)}.pv-l b.bad{color:var(--err-ink)}
.pv-quick div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pv-quick a{min-height:44px;border-radius:10px;background:var(--paper);display:flex;align-items:center;padding:0 12px;font-size:14px;color:var(--ink);text-decoration:none}.pv-quick a:hover{background:color-mix(in srgb,var(--signal) 10%,var(--paper))}
.ak-scope-note{font-size:13px;margin:4px 0 16px}
@media (max-width:1000px){.pv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pv-grid{grid-template-columns:1fr}.hq-pnav-head{flex-wrap:wrap}}
@media (max-width:640px){.hq-pnav-acts{width:100%}.hq-pnav-acts .btn{flex:1;justify-content:center}.pv-kpis b{font-size:21px}.pv-status{flex-wrap:wrap}}
/* the product header sits in the page's column, like the content under it (it was flush against the menu, review D-M731) */
.hq-pnav{max-width:1180px;margin:18px auto 0;width:calc(100% - 40px);box-sizing:border-box}
@media (max-width:760px){.hq-pnav{width:calc(100% - 24px);margin-top:12px}}
/* compact heroes on a product's pages, with the specificity of the hero's own rules (the first rule lost to .pn-page .pn-hero) */
body:has(.hq-pnav) .pn-main .pn-hero.pe-hero{padding:12px 18px;min-height:0;margin:0 0 14px;border-radius:14px}
body:has(.hq-pnav) .pn-main .pn-hero.pe-hero::before,body:has(.hq-pnav) .pn-main .pn-hero.pe-hero .pn-hero-ico{display:none}
body:has(.hq-pnav) .pn-main .pn-hero.pe-hero h1{font-size:18px;margin:0}body:has(.hq-pnav) .pn-main .pn-hero.pe-hero .pn-hero-text p{font-size:13px;margin:4px 0 0}
/* D-M733 — "Vendita e prova": the store/launch pane and the trial pane read as one page of cards */
.sl-sale{display:flex;flex-direction:column;gap:16px}.sl-sale>.sl-pane{margin:0;border-radius:18px}
.sl-sale>.sl-pane[data-pane=trial]{scroll-margin-top:20px}
.sl-sale .sl-pane>h2:first-child{font-size:18px}
/* D-M735 — the receipt's issuer, read from the company data */
.rd-issuer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:6px 0}.rd-issuer div{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid var(--line)}.rd-issuer b{font-weight:500}
/* D-M736 — "Sul telefono": what reaches the phone, Telegram, WhatsApp */
.ph-head h1{margin:0;font-size:26px}.ph-head p{margin:4px 0 14px}.ph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ph-card form{display:flex;flex-direction:column;gap:10px}.ph-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px}.ph-card-h h2{margin:0}
.ph-events{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ph-events .check-label span{display:flex;flex-direction:column}.ph-events .check-label small{color:var(--ink-soft);font-size:12px}.ph-events .btn-row{grid-column:1/-1}
.ph-pair{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.ph-code code{font-size:16px;padding:4px 8px;background:var(--paper);border-radius:6px}.ph-err{color:var(--err-ink);font-size:13px}
.ph-guide{margin-top:10px}.ph-guide ol{padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
@media (max-width:900px){.ph-grid{grid-template-columns:1fr}.ph-events{grid-template-columns:1fr}}
/* D-M738 — the frame of a grouped page (Payments, E-mail and notifications, AI and credits, Numbers, Notices): the same card as a product */
.hq-gnav{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:0 0 18px}
.hq-gnav-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;flex-wrap:wrap}
.hq-gnav-id{display:flex;flex-direction:column;gap:3px;min-width:0}.hq-gnav-id b{font-size:22px;line-height:1.15}.hq-gnav-id small{font-size:13px;color:var(--ink-soft)}
.hq-gnav-state{height:32px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;background:var(--paper);color:var(--ink-soft)}
.hq-gnav-state.ok{background:var(--ok-bg);color:var(--ok-ink)}.hq-gnav-state.warn{background:var(--warn-bg);color:var(--warn-ink)}.hq-gnav-state.bad{background:var(--err-bg);color:var(--err-ink)}
.hq-gnav .ho-views{margin:0;padding:0 12px;border-top:1px solid var(--line);border-radius:0;background:transparent}
.hq-gnav .ho-views a{padding:13px 16px;font-size:15px;border-bottom:3px solid transparent;border-radius:0;background:transparent}
.hq-gnav .ho-views a.on{color:var(--signal);border-bottom-color:var(--signal);background:transparent;font-weight:600}
/* under a group's frame the page's hero is a compact line, as under a product's */
body:has(.hq-gnav) .pn-main .pn-hero.pe-hero{padding:12px 18px;min-height:0;margin:0 0 14px;border-radius:14px}
body:has(.hq-gnav) .pn-main .pn-hero.pe-hero::before,body:has(.hq-gnav) .pn-main .pn-hero.pe-hero .pn-hero-ico{display:none}
body:has(.hq-gnav) .pn-main .pn-hero.pe-hero h1{font-size:18px;margin:0}body:has(.hq-gnav) .pn-main .pn-hero.pe-hero .pn-hero-text p{font-size:13px;margin:4px 0 0}
/* General's own strip inside its frame (D-M738) */
.ps-gnav .ps-subtabs{margin:0;padding:0 12px;border-top:1px solid var(--line);border-bottom:0;background:transparent;display:flex;gap:2px;flex-wrap:wrap}
.ps-gnav .ps-subtabs[hidden]{display:none}.ps-gnav .ps-subtabs .tab{padding:13px 16px;font-size:15px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent}
.ps-gnav .ps-subtabs .tab.active{color:var(--signal);border-bottom-color:var(--signal);background:transparent;font-weight:600}
/* the old "pill" strip's own rules outranked the frame's (seen in the screenshot, D-M738): the same look as every other group's tabs */
.hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs{background:transparent;border:0;border-top:1px solid var(--line);box-shadow:none;border-radius:0;padding:0 12px;margin:0;justify-content:flex-start}
.hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab{flex:0 0 auto;background:transparent;box-shadow:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:13px 16px;font-weight:500;color:var(--ink)}
.hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab.active{background:transparent;box-shadow:none;color:var(--signal);border-bottom-color:var(--signal);font-weight:600}
.hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab::after,.hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab::before{display:none}
/* D-M738 — under a frame (a product's or a group's) the page's hero is ONE status line: the frame already says who and what; the kicker
 * "CODEMERRY HQ" (a ::before of the title), the icon and the paragraph go, the title and the state box stay side by side (seen on the phone:
 * the hero stayed a tall block of text) */
html[data-hq] body:has(.hq-pnav) .pn-hero h1::before,html[data-hq] body:has(.hq-gnav) .pn-hero h1::before{content:none;display:none}
body:has(.hq-pnav) .pn-main .pn-hero.pe-hero .pn-hero-text p,body:has(.hq-gnav) .pn-main .pn-hero.pe-hero .pn-hero-text p{display:none}
body:has(.hq-pnav) .pn-main .pn-hero.pe-hero,body:has(.hq-gnav) .pn-main .pn-hero.pe-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px}
body:has(.hq-pnav) .pn-main .pn-hero.pe-hero .pe-status,body:has(.hq-gnav) .pn-main .pn-hero.pe-hero .pe-status{margin:0;padding:8px 12px}
/* D-M739 — what is true now, at the top of a settings page: rows (payments, e-mail) or four numbers (AI and credits) */
.sst-rows{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 18px;margin:0 0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.sst-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.sst-row span{color:var(--ink-soft)}
.sst-row b{font-weight:600;text-align:right}.sst-row b.ok{color:var(--ok-ink)}.sst-row b.warn{color:var(--warn-ink)}.sst-row b.bad{color:var(--err-ink)}
.sst-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.sst-kpis div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.sst-kpis span{font-size:13px;color:var(--ink-soft)}.sst-kpis b{font-family:var(--mono,monospace);font-size:21px}.sst-kpis b.ok{color:var(--ok-ink)}.sst-kpis b.warn{color:var(--warn-ink)}.sst-kpis small{font-size:12px;color:var(--ink-soft)}
@media (max-width:900px){.sst-rows{grid-template-columns:1fr}.sst-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* where a page has its status rows or its four numbers, the one-line hero repeated them (seen in the screenshots, D-M739): the rows speak */
body:has(.sst-rows) .pn-main .pn-hero.pe-hero,body:has(.sst-kpis) .pn-main .pn-hero.pe-hero{display:none}

/* ============================================================================================================================
 * D-M740 — "STUDIO": THE NEW DESIGN OF THE SETTINGS PAGES (a much better look, visibly a TOTALLY NEW design). Every page that wears the new frame (Pagamenti, Email e notifiche, AI e crediti, Generale, the two Security doors,
 * Numeri, Avvisi ai clienti) gets a new skin: a warm canvas, a bold header with a segmented tab switch, big airy section cards with an icon
 * chip, fields of 46 px with a focus ring, real switches, pill badges, accordions, and the state as tiles. Scoped by :has(.hq-gnav): the rest
 * of gest keeps its look until it is redesigned.
 * ========================================================================================================================== */
body:has(.studio-on){--st-canvas:#F3F1EC;--st-card:#FFFFFF;--st-line:#E4E0D6;--st-field:#FBFAF7;--st-field-line:#D6D2C7;--st-ink:#16181D;--st-soft:#5E636E;--st-accent:#0F5F63;--st-accent-2:#0A4548;--st-accent-tint:#E7F1F1;--st-ok:#1E6B45;--st-ok-bg:#E4F2E9;--st-warn:#9A4A06;--st-warn-bg:#FFF1DE;--st-bad:#A61B12;--st-bad-bg:#FDE9E7}
html[data-theme="dark"] body:has(.studio-on),body:has(.studio-on)[data-theme="dark"]{--st-canvas:#14161A;--st-card:#1C1F25;--st-line:#2C3039;--st-field:#171A1F;--st-field-line:#363B45;--st-ink:#ECEDEF;--st-soft:#A2A7B2;--st-accent-tint:#153236}
body:has(.studio-on) .pn-main{background:var(--st-canvas);border-radius:0;max-width:1180px}
body:has(.studio-on){background:var(--st-canvas)}
/* the header: a bold title, the state, a segmented switch of tabs */
body:has(.studio-on) .hq-gnav{background:var(--st-card);border:1px solid var(--st-line);border-radius:26px;box-shadow:0 1px 2px rgba(20,22,29,.04),0 8px 24px -12px rgba(20,22,29,.12);margin:4px 0 22px;overflow:visible}
body:has(.studio-on) .hq-gnav-head{padding:26px 28px 18px}
body:has(.studio-on) .hq-gnav-id b{font-size:31px;letter-spacing:-.6px;font-weight:750;color:var(--st-ink)}
body:has(.studio-on) .hq-gnav-id small{font-size:14.5px;color:var(--st-soft);margin-top:4px}
body:has(.studio-on) .hq-gnav-state{height:36px;padding:0 16px;font-size:13.5px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
body:has(.studio-on) .hq-gnav-state::before{content:'';width:8px;height:8px;border-radius:999px;background:currentColor;margin-right:9px;opacity:.85}
body:has(.studio-on) .hq-gnav .ho-views,body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs{display:inline-flex;gap:4px;margin:0 28px 24px;padding:5px;border:0;border-radius:16px;background:#EEEBE4;flex-wrap:wrap}
body:has(.studio-on) .hq-gnav .ho-views a,body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab{padding:10px 18px;min-height:40px;border-radius:12px;border:0;font-size:14.5px;font-weight:600;color:var(--st-soft);background:transparent;display:inline-flex;align-items:center;gap:6px}
body:has(.studio-on) .hq-gnav .ho-views a:hover,body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab:hover{color:var(--st-ink);background:rgba(255,255,255,.6)}
body:has(.studio-on) .hq-gnav .ho-views a.on,body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab.active{background:var(--st-card);color:var(--st-accent);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12);border:0}
/* the old hero, where a page still has one: a light status bar, never the dark block */
body:has(.studio-on) .pn-main .pn-hero.pe-hero{background:var(--st-card);color:var(--st-ink);border:1px solid var(--st-line);border-left:0;border-radius:18px;box-shadow:none;padding:12px 18px}
body:has(.studio-on) .pn-main .pn-hero.pe-hero h1{color:var(--st-ink);font-size:16px}
body:has(.studio-on) .pn-main .pn-hero.pe-hero .pe-status{background:var(--st-ok-bg);border:0;color:var(--st-ok);border-radius:12px}
body:has(.studio-on) .pn-main .pn-hero.pe-hero .pe-status *{color:inherit}
/* section cards: big, airy, the title with an icon chip, no gold underline */
body:has(.studio-on) .pn-main .panel{background:var(--st-card);border:1px solid var(--st-line);border-radius:22px;box-shadow:0 1px 2px rgba(20,22,29,.03);padding:24px 28px 26px;margin:0 0 18px}
body:has(.studio-on) .pn-main .panel > h2:first-child,body:has(.studio-on) .pn-main .panel > h2{border:0;padding:0;margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.2px;color:var(--st-ink);display:flex;align-items:center;gap:12px}
body:has(.studio-on) .pn-main .panel > h2:first-child::after,body:has(.studio-on) .pn-main .panel > h2::after{display:none;content:none}
body:has(.studio-on) .pn-main .panel > h2 .hqi-t,body:has(.studio-on) .pn-main .panel > h2 > i:first-child{width:38px;height:38px;border-radius:12px;background:var(--st-accent-tint);color:var(--st-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
body:has(.studio-on) .pn-main .panel > h2 + p,body:has(.studio-on) .pn-main .panel > h2 + .muted{margin:0 0 18px 50px;font-size:14px;color:var(--st-soft);max-width:760px}
body:has(.studio-on) .pn-main .panel h3,body:has(.studio-on) .pn-main .panel .hm-sub{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-soft);margin:22px 0 10px;font-weight:700}
/* fields */
body:has(.studio-on) .pn-main label{font-size:13.5px;font-weight:600;color:var(--st-ink)}
body:has(.studio-on) .pn-main input[type=text],body:has(.studio-on) .pn-main input[type=email],body:has(.studio-on) .pn-main input[type=password],body:has(.studio-on) .pn-main input[type=number],body:has(.studio-on) .pn-main input[type=url],body:has(.studio-on) .pn-main input[type=search],body:has(.studio-on) .pn-main input[type=date],body:has(.studio-on) .pn-main select,body:has(.studio-on) .pn-main textarea{min-height:46px;border:1.5px solid var(--st-field-line);border-radius:12px;background:var(--st-field);font-size:15px;padding:10px 14px;color:var(--st-ink);box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s;margin-top:7px}
body:has(.studio-on) .pn-main textarea{min-height:110px;line-height:1.5}
body:has(.studio-on) .pn-main input:focus,body:has(.studio-on) .pn-main select:focus,body:has(.studio-on) .pn-main textarea:focus{outline:0;border-color:var(--st-accent);background:var(--st-card);box-shadow:0 0 0 4px rgba(15,95,99,.14)}
body:has(.studio-on) .pn-main label small,body:has(.studio-on) .pn-main .panel small.muted,body:has(.studio-on) .pn-main .panel p.muted{font-size:12.5px;font-weight:400;color:var(--st-soft);line-height:1.5}
body:has(.studio-on) .pn-main label small{display:block;margin-top:7px}
body:has(.studio-on) .pn-main .grid-2,body:has(.studio-on) .pn-main .grid-3,body:has(.studio-on) .pn-main .ps-grid{gap:18px 22px}
/* buttons */
body:has(.studio-on) .pn-main .btn{min-height:44px;border-radius:12px;font-weight:600;font-size:14.5px;padding:0 18px;border:1.5px solid var(--st-field-line);background:var(--st-card);color:var(--st-ink);box-shadow:none;transition:background .15s,border-color .15s,transform .05s}
body:has(.studio-on) .pn-main .btn:hover{border-color:var(--st-accent);color:var(--st-accent)}
body:has(.studio-on) .pn-main .btn:active{transform:translateY(1px)}
body:has(.studio-on) .pn-main .btn.primary{background:var(--st-accent);border-color:var(--st-accent);color:#fff}
body:has(.studio-on) .pn-main .btn.primary:hover{background:var(--st-accent-2);border-color:var(--st-accent-2);color:#fff}
body:has(.studio-on) .pn-main .btn.sm{min-height:36px;padding:0 14px;font-size:13.5px;border-radius:10px}
body:has(.studio-on) .pn-main .btn.danger-outline{border-color:#E7B4AF;color:var(--st-bad)}
body:has(.studio-on) .pn-main .btn-row{gap:10px;margin-top:18px}
/* switches and checks */
body:has(.studio-on) .pn-main .sw{width:46px;height:28px;border-radius:999px;background:#D3CFC5}
body:has(.studio-on) .pn-main .sw::after{width:22px;height:22px;top:3px;left:3px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
body:has(.studio-on) .pn-main .switch-label input:checked + .sw{background:var(--st-accent)}
body:has(.studio-on) .pn-main .switch-label input:checked + .sw::after{left:21px}
body:has(.studio-on) .pn-main .check-label,body:has(.studio-on) .pn-main .switch-label{padding:12px 14px;border:1.5px solid var(--st-line);border-radius:14px;background:var(--st-field);gap:12px;align-items:center}
body:has(.studio-on) .pn-main .check-label:has(input:checked){border-color:rgba(15,95,99,.45);background:var(--st-accent-tint)}
body:has(.studio-on) .pn-main input[type=checkbox],body:has(.studio-on) .pn-main input[type=radio]{accent-color:var(--st-accent);width:18px;height:18px}
/* badges, code, accordions, tables, alerts */
body:has(.studio-on) .pn-main .badge{border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
body:has(.studio-on) .pn-main .badge.ok{background:var(--st-ok-bg);color:var(--st-ok)}body:has(.studio-on) .pn-main .badge.warn{background:var(--st-warn-bg);color:var(--st-warn)}
body:has(.studio-on) .pn-main code{background:#EFECE5;border-radius:7px;padding:2px 7px;font-size:12.5px;color:var(--st-ink)}
body:has(.studio-on) .pn-main details{border:1.5px solid var(--st-line);border-radius:14px;background:var(--st-field);padding:0;margin:12px 0}
body:has(.studio-on) .pn-main details > summary{padding:13px 16px;font-weight:600;cursor:pointer;list-style:none}
body:has(.studio-on) .pn-main details > summary::-webkit-details-marker{display:none}
body:has(.studio-on) .pn-main details > summary::before{content:'›';display:inline-block;width:18px;color:var(--st-accent);font-weight:800;transition:transform .15s}
body:has(.studio-on) .pn-main details[open] > summary::before{transform:rotate(90deg)}
body:has(.studio-on) .pn-main details[open]{background:var(--st-card)}body:has(.studio-on) .pn-main details > :not(summary){margin-left:16px;margin-right:16px}
body:has(.studio-on) .pn-main table{border-collapse:separate;border-spacing:0}body:has(.studio-on) .pn-main th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-soft);border-bottom:1px solid var(--st-line)}
body:has(.studio-on) .pn-main td{border-bottom:1px solid var(--st-line)}
body:has(.studio-on) .pn-main .alert{border-radius:16px;border:0;padding:14px 18px;font-weight:500}
/* numbered steps (PayPal's and Google's guides) */
body:has(.studio-on) .pn-main .pp-steps li,body:has(.studio-on) .pn-main .gg-howto li,body:has(.studio-on) .pn-main .sp-guide li{border-radius:14px}
/* the state as tiles (payments, e-mail) and four numbers (AI and credits) */
body:has(.studio-on) .sst-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;background:transparent;border:0;padding:0;margin:0 0 22px}
body:has(.studio-on) .sst-row{flex-direction:column;justify-content:flex-start;gap:6px;padding:16px 18px;border:1px solid var(--st-line);border-radius:18px;background:var(--st-card);position:relative;overflow:hidden}
body:has(.studio-on) .sst-row span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft)}
body:has(.studio-on) .sst-row b{font-size:18px;text-align:left;color:var(--st-ink);font-weight:700;letter-spacing:-.2px}
body:has(.studio-on) .sst-row b.ok{color:var(--st-ok)}body:has(.studio-on) .sst-row b.warn{color:var(--st-warn)}body:has(.studio-on) .sst-row b.bad{color:var(--st-bad)}
body:has(.studio-on) .sst-row:has(b.ok){box-shadow:inset 4px 0 0 var(--st-ok)}body:has(.studio-on) .sst-row:has(b.warn){box-shadow:inset 4px 0 0 #D9861C}body:has(.studio-on) .sst-row:has(b.bad){box-shadow:inset 4px 0 0 var(--st-bad)}
body:has(.studio-on) .sst-kpis{gap:14px;margin:0 0 22px}
body:has(.studio-on) .sst-kpis div{border-radius:20px;padding:18px 20px;gap:6px;border:1px solid var(--st-line);background:var(--st-card)}
body:has(.studio-on) .sst-kpis span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
body:has(.studio-on) .sst-kpis b{font-size:27px;letter-spacing:-.5px;color:var(--st-ink)}body:has(.studio-on) .sst-kpis b.ok{color:var(--st-ok)}body:has(.studio-on) .sst-kpis b.warn{color:var(--st-warn)}
@media (max-width:760px){
  body:has(.studio-on) .hq-gnav{border-radius:22px}body:has(.studio-on) .hq-gnav-head{padding:20px 20px 14px}body:has(.studio-on) .hq-gnav-id b{font-size:25px}
  body:has(.studio-on) .hq-gnav .ho-views,body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs{margin:0 16px 18px;display:flex}
  body:has(.studio-on) .hq-gnav .ho-views a,body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab{flex:1 1 auto;justify-content:center;padding:10px 12px}
  body:has(.studio-on) .pn-main .panel{padding:20px 18px;border-radius:20px}body:has(.studio-on) .pn-main .panel > h2 + p,body:has(.studio-on) .pn-main .panel > h2 + .muted{margin-left:0}
}
/* D-M740 polish, from the screenshots: tiles in even rows (four, or three when there are six), General's tab track inside its card, the
 * Credits tab's own numbers in the new tile style */
body:has(.studio-on) .sst-rows{grid-template-columns:repeat(4,minmax(0,1fr))}
body:has(.studio-on) .sst-rows:has(.sst-row:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs,body:has(.studio-on) .hq-gnav .ho-views{box-sizing:border-box;width:auto;max-width:calc(100% - 56px)}
body:has(.studio-on) .pn-main .cr-kpi,body:has(.studio-on) .pn-main .cr-kpis > div{background:var(--st-field);border:1px solid var(--st-line);border-radius:16px;box-shadow:none}
body:has(.studio-on) .pn-main .cr-kpi b,body:has(.studio-on) .pn-main .cr-kpis > div b{color:var(--st-ink);font-family:var(--mono,monospace);letter-spacing:-.3px}
@media (max-width:1000px){body:has(.studio-on) .sst-rows,body:has(.studio-on) .sst-rows:has(.sst-row:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs,body:has(.studio-on) .hq-gnav .ho-views{max-width:calc(100% - 32px)}}

/* ============================================================================================================================
 * D-M741 — "STUDIO" ON EVERY REDESIGNED PAGE (every new page must look totally new, the earlier ones too). The same language as the settings: the page header as a big light card, numbers as tiles, lists in
 * airy cards, tabs as a segmented switch, the product's header in the same card, Oggi's takings on deep petrol. Scoped by the page's mark.
 * ========================================================================================================================== */
/* the page's own header (a hero where no frame stands above it): a big light card */
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero{background:var(--st-card);color:var(--st-ink);border:1px solid var(--st-line);border-left:1px solid var(--st-line);border-radius:26px;box-shadow:0 1px 2px rgba(20,22,29,.04),0 8px 24px -12px rgba(20,22,29,.12);padding:26px 28px;margin:4px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
html[data-hq] body:has(.studio-on) .pn-main .pn-hero h1::before{content:none !important;display:none !important}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero h1{color:var(--st-ink);font-size:31px;letter-spacing:-.6px;font-weight:750;margin:0;display:flex;align-items:center;gap:14px}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero .pn-hero-text p{color:var(--st-soft);font-size:14.5px;margin:6px 0 0;max-width:720px}
html[data-hq] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico{width:44px;height:44px;border-radius:14px;background:var(--st-accent-tint);color:var(--st-accent);border:0;display:inline-flex;align-items:center;justify-content:center}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero .pe-status{background:var(--st-field);border:1px solid var(--st-line);color:var(--st-ink);border-radius:18px;padding:12px 16px;margin:0}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero .pe-status *{color:inherit}
html[data-hq] body:has(.studio-on) .pn-main .pn-hero .pe-dot{box-shadow:none}
/* numbers as tiles, whatever each page calls them */
html[data-hq] body:has(.studio-on) .pn-main :is(.cd-kpi,.ho-kpi,.pn-kpi,.rc-kpi,.srl-kpi,.pcu-stat,.lg-stat,.pv-kpis > a,.cr-kpi){background:var(--st-card);border:1px solid var(--st-line);border-radius:18px;box-shadow:none;padding:16px 18px}
html[data-hq] body:has(.studio-on) .pn-main :is(.cd-kpi,.ho-kpi,.pn-kpi,.rc-kpi,.srl-kpi,.pcu-stat,.lg-stat,.pv-kpis > a) :is(b,strong){font-family:var(--mono,monospace);font-size:24px;letter-spacing:-.4px;color:var(--st-ink)}
html[data-hq] body:has(.studio-on) .pn-main :is(.cd-kpi,.ho-kpi,.pn-kpi,.rc-kpi,.srl-kpi,.pcu-stat,.lg-stat,.pv-kpis > a) :is(span,small){color:var(--st-soft)}
html[data-hq] body:has(.studio-on) .pn-main .pn-hero .pn-kpi{background:var(--st-field)}
/* lists and their cards */
html[data-hq] body:has(.studio-on) .pn-main :is(.ho-card,.dp2-queue,.pv-watch,.cpn-promo,.tk-desk,.srl-chartcard){background:var(--st-card);border:1px solid var(--st-line);border-radius:22px;box-shadow:0 1px 2px rgba(20,22,29,.03)}
html[data-hq] body:has(.studio-on) .pn-main :is(.ho-tr,.cv-tr,.cd-tr,.tk-item,.srl-row,.pkd-row,.pv-w,.td-row,.dp2-q):hover{background:var(--st-accent-tint)}
/* page titles of the redesigned pages */
html[data-hq] body:has(.studio-on) .pn-main :is(.td-head,.ho-head,.cr-head,.pc-head) h1{font-size:31px;letter-spacing:-.6px;font-weight:750;color:var(--st-ink)}
/* tabs everywhere: a segmented switch */
html[data-hq] body:has(.studio-on) .pn-main :is(.td-views,.cd-tabs){display:inline-flex;gap:4px;padding:5px;border:0;border-radius:16px;background:#EEEBE4}
html[data-hq] body:has(.studio-on) .pn-main :is(.td-views,.cd-tabs) a{border:0;border-radius:12px;min-height:40px;padding:0 18px;font-weight:600;color:var(--st-soft);background:transparent}
html[data-hq] body:has(.studio-on) .pn-main :is(.td-views,.cd-tabs) a.on,html[data-hq] body:has(.studio-on) .pn-main .cd-tabs a[aria-current]{background:var(--st-card);color:var(--st-accent);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12)}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)) .pn-main > .ho-views{display:inline-flex;gap:4px;padding:5px;border:0;border-radius:16px;background:#EEEBE4;margin:0 0 18px}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)) .pn-main > .ho-views a{border:0;border-radius:12px;padding:10px 18px;font-weight:600;color:var(--st-soft);background:transparent}
html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)) .pn-main > .ho-views a.on{background:var(--st-card);color:var(--st-accent);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12)}
/* the product's header: the same big card, the tabs segmented, the parts as pills */
html[data-hq] body:has(.studio-on) .hq-pnav{border:1px solid var(--st-line);border-radius:26px;box-shadow:0 1px 2px rgba(20,22,29,.04),0 8px 24px -12px rgba(20,22,29,.12);background:var(--st-card)}
html[data-hq] body:has(.studio-on) .hq-pnav-head{padding:22px 26px}html[data-hq] body:has(.studio-on) .hq-pnav-logo{width:54px;height:54px;border-radius:16px;background:var(--st-accent);font-size:24px}html[data-hq] body:has(.studio-on) .hq-pnav-id b{font-size:29px;letter-spacing:-.5px;font-weight:750}
html[data-hq] body:has(.studio-on) .hq-pnav-tabs{display:inline-flex;gap:4px;margin:0 26px 16px;padding:5px;border:0;border-radius:16px;background:#EEEBE4;width:auto;max-width:calc(100% - 52px);box-sizing:border-box}
html[data-hq] body:has(.studio-on) .hq-pnav-tabs a{border:0;border-radius:12px;padding:10px 18px;font-weight:600;color:var(--st-soft)}
html[data-hq] body:has(.studio-on) .hq-pnav-tabs a.on{background:var(--st-card);color:var(--st-accent);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12);border:0}
html[data-hq] body:has(.studio-on) .hq-pnav-parts{background:transparent;border-top:1px solid var(--st-line);padding:14px 26px}
html[data-hq] body:has(.studio-on) .hq-pnav-parts a{border:1.5px solid var(--st-field-line);background:var(--st-field);font-weight:600}
html[data-hq] body:has(.studio-on) .hq-pnav-parts a.on{background:var(--st-accent);border-color:var(--st-accent);color:#fff}
/* Oggi: the takings on deep petrol, the to-do and the side cards in the new cards */
html[data-hq] body:has(.studio-on) .pn-main .td-money{background:#0E3B3E;border-radius:24px;box-shadow:0 10px 30px -16px rgba(14,59,62,.6)}
html[data-hq] body:has(.studio-on) .pn-main .td-money b.pos{color:#9FE5C0}html[data-hq] body:has(.studio-on) .pn-main .td-spark{color:#E9C27A}
html[data-hq] body:has(.studio-on) .pn-main :is(.td-todo,.td-nums,.td-exp,.pv-link,.pv-quick,.pv-watch){border-radius:22px}
html[data-hq] body:has(.studio-on) .pn-main .td-nums a{background:var(--st-field);border:1px solid var(--st-line);border-radius:16px}
html[data-hq] body:has(.studio-on) .pn-main .pv-status{border-radius:18px}
@media (max-width:760px){
  html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero{padding:20px;border-radius:22px}html[data-hq] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero h1{font-size:25px}
  html[data-hq] body:has(.studio-on) .hq-pnav-tabs{margin:0 14px 14px;max-width:calc(100% - 28px);display:flex}html[data-hq] body:has(.studio-on) .hq-pnav-tabs a{flex:1 1 auto;justify-content:center;padding:10px 10px}
}
/* the seat's skin paints every hero with "background: … !important" and a gold left border (found computing the Customers header, D-M741):
 * Studio's headers must say it with the same force, or the old dark block stays under the new text */
html[data-hq]:not([data-theme="dark"]) body:has(.studio-on) .pn-main .pn-hero{background:var(--st-card) !important;border:1px solid var(--st-line) !important;border-left:1px solid var(--st-line) !important}
html[data-hq]:not([data-theme="dark"]) body:has(.studio-on) .pn-main .pn-hero .pn-hero-text,html[data-hq]:not([data-theme="dark"]) body:has(.studio-on) .pn-main .pn-hero h1{color:var(--st-ink)}
html[data-hq] body:has(.studio-on) .pn-main .pn-hero::before{display:none !important}
/* six tiles in a row: amounts with cents and the currency must fit on one line (Orders, seen in the screenshots) */
html[data-hq] body:has(.studio-on) .pn-main :is(.ho-kpi,.cd-kpi) :is(b,strong){font-size:21px;white-space:nowrap}
/* on a phone (seen in the screenshots, D-M741): two tiles a row — the amounts shrink and may wrap instead of being cut; the product's five
 * tabs wrap onto two lines instead of running off the card */
@media (max-width:760px){
  html[data-hq] body:has(.studio-on) .pn-main :is(.ho-kpi,.cd-kpi,.pv-kpis > a,.pn-kpi,.lg-stat,.pcu-stat) :is(b,strong){font-size:17px;white-space:normal;overflow-wrap:anywhere}
  html[data-hq] body:has(.studio-on) .hq-pnav-tabs{flex-wrap:wrap}
  html[data-hq] body:has(.studio-on) .pn-main .pv-status{flex-direction:column;align-items:flex-start}
}
/* the hero's icon was painted white for the dark block: on Studio's light chip it faded (seen on Insolvenze, Avvisi, Registro, Backup) */
html[data-hq] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico,html[data-hq] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico *{color:var(--st-accent) !important;fill:none}
html[data-hq] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico svg{stroke:currentColor !important;opacity:1 !important}
/* ==================================================================== D-M745 — AVVISI, the new page (Session 1) */
.al2{--al-bad:#B42318;--al-warn:#C2680C;--al-info:#5E636E}
.al2-head{background:var(--st-card,#fff);border:1px solid var(--st-line,#E4E0D6);border-radius:26px;padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:center;box-shadow:0 8px 24px -12px rgba(20,22,29,.12);margin:4px 0 18px}
.al2-id h1{margin:0;font-size:31px;letter-spacing:-.6px;font-weight:750}.al2-id p{margin:4px 0 0;color:var(--st-soft,#5E636E);font-size:14.5px}
.al2-pill{height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px}.al2-pill::before{content:'';width:8px;height:8px;border-radius:999px;background:currentColor}
.al2-pill.bad{background:#FDE9E7;color:#8A1C12}.al2-pill.warn{background:#FFF1DE;color:#8A3B08}.al2-pill.ok{background:#E4F2E9;color:#14502F}
.al2-fams{grid-column:1/-1;display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:16px;background:#EEEBE4;justify-self:start}
.al2-fams a,.al2-views a{min-height:40px;padding:0 16px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--st-soft,#5E636E);text-decoration:none}
.al2-fams a small{font-family:var(--mono,monospace);font-size:12px;opacity:.85}
.al2-fams a.on,.al2-views a.on{background:#fff;color:var(--st-accent,#0F5F63);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12)}
.al2-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}
.al2-tiles div{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.al2-tiles span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E)}.al2-tiles b{font-family:var(--mono,monospace);font-size:25px;letter-spacing:-.4px}
.al2-tiles small{font-size:12px;color:var(--st-soft,#5E636E)}.al2-tiles .bad{box-shadow:inset 4px 0 0 var(--al-bad)}.al2-tiles .bad b{color:var(--al-bad)}.al2-tiles .warn{box-shadow:inset 4px 0 0 var(--al-warn)}
.al2-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}.al2-bar-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.al2-views{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:#EEEBE4}.al2-views a{min-height:36px;font-size:13.5px}
.al2-toggle{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;color:var(--st-ink,#16181D);text-decoration:none}
.al2-toggle i{width:40px;height:24px;border-radius:999px;background:#D3CFC5;position:relative;transition:background .15s}.al2-toggle i::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.al2-toggle.on i{background:var(--st-accent,#0F5F63)}.al2-toggle.on i::after{left:19px}
.al2-card{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:22px;overflow:hidden}
.al2-split{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}.al2-split.has-open{grid-template-columns:minmax(0,1fr) minmax(380px,500px)}
.al2-selbar{display:flex;align-items:center;gap:10px;padding:10px 18px;background:#F7F5F0;border-bottom:1px solid var(--st-line,#E4E0D6);font-size:13.5px;font-weight:600;color:var(--st-soft,#5E636E);position:sticky;top:0;z-index:2}
.al2-selbar.on{background:var(--st-accent,#0F5F63);color:#fff}
.al2-selbar button{height:32px;padding:0 12px;border-radius:9px;border:1.5px solid var(--st-line,#E4E0D6);background:#fff;color:var(--st-ink,#16181D);font:600 13px inherit;font-family:inherit;cursor:pointer}
.al2-selbar.on button{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}.al2-selbar button:disabled{opacity:.45;cursor:default}
.al2-day{padding:9px 18px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E);background:#F7F5F0;border-top:1px solid var(--st-line,#E4E0D6)}
.al2-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 18px;border-top:1px solid #F0EDE6;background:#fff;transition:background .12s}
.al2-row.lv-bad{box-shadow:inset 4px 0 0 var(--al-bad)}.al2-row.lv-warn{box-shadow:inset 4px 0 0 var(--al-warn)}.al2-row.lv-info{box-shadow:inset 4px 0 0 #9AA0AB}
.al2-row:hover{background:#FAF8F4}.al2-row.on{background:var(--st-accent-tint,#E7F1F1)}.al2-row.read .al2-rt b{font-weight:500;color:var(--st-soft,#5E636E)}
.al2-row input{margin-top:3px;accent-color:var(--st-accent,#0F5F63);width:16px;height:16px}
.al2-rl{display:flex;flex-direction:column;gap:3px;min-width:0;text-decoration:none;color:inherit}.al2-rl:hover .al2-rt b{text-decoration:underline}
.al2-rt{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.al2-rt b{font-size:14.5px}
.al2-rd{font-size:13px;color:#4A505C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al2-rm{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.al2-rm time{font-family:var(--mono,monospace);font-size:12px;color:var(--st-soft,#5E636E)}.al2-rm small{font-size:11.5px;color:var(--st-soft,#5E636E)}
.al2-lv{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.al2-lv.bad{background:#FDE9E7;color:#8A1C12}.al2-lv.warn{background:#FFF1DE;color:#8A3B08}.al2-lv.info{background:#EEEBE4;color:#4A505C}
.al2-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--st-line,#E4E0D6);font-size:13px;color:var(--st-soft,#5E636E)}.al2-pager span:last-child{display:flex;gap:8px}
.al2-open{padding:24px 26px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
.al2-om{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--st-soft,#5E636E)}
.al2-open h2{margin:0;font-size:22px;letter-spacing:-.3px}.al2-od{margin:0;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.al2-go{background:#F7F5F0;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.al2-go b{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-soft,#5E636E)}
.al2-go a{font-weight:600;color:var(--st-accent,#0F5F63);text-decoration:none}.al2-go a:hover{text-decoration:underline}
.al2-oa form{display:flex;gap:10px;flex-wrap:wrap}.al2-same{font-size:12.5px;color:var(--st-soft,#5E636E)}
.al2-kfilter{margin:0 0 12px;font-size:14px}
.al2-khead,.al2-krow{display:grid;grid-template-columns:110px minmax(0,1fr) 150px 280px;gap:16px;align-items:center;padding:12px 22px}
.al2-khead{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E);background:#F7F5F0}
.al2-krow{border-top:1px solid #F0EDE6}.al2-krow:hover{background:#FAF8F4}.al2-kn{font-family:var(--mono,monospace);font-size:22px}
.al2-kt{display:flex;flex-direction:column;gap:7px;min-width:0}.al2-kt > div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.al2-kt b{font-size:15px}
.al2-kbar{display:block;height:5px;border-radius:999px;background:#EEEBE4;position:relative;overflow:hidden}.al2-kbar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;background:var(--al-warn)}
.lv-bad .al2-kbar::after{background:var(--al-bad)}.lv-info .al2-kbar::after{background:#9AA0AB}
.al2-kl{font-family:var(--mono,monospace);font-size:12.5px;color:var(--st-soft,#5E636E)}.al2-ka{display:flex;gap:8px;justify-content:flex-end}
.al2-empty{padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.al2-empty b{font-size:18px}.al2-empty span{color:var(--st-soft,#5E636E);max-width:420px}
@media (max-width:1100px){.al2-split.has-open{grid-template-columns:1fr}.al2-open{position:static;order:-1}.al2-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.al2-head{grid-template-columns:1fr;padding:18px;border-radius:22px}.al2-id h1{font-size:25px}.al2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .al2-khead{display:none}.al2-krow{grid-template-columns:70px minmax(0,1fr);gap:8px 12px}.al2-kl{grid-column:2}.al2-ka{grid-column:1/-1;justify-content:flex-start}
  .al2-row{grid-template-columns:22px minmax(0,1fr)}.al2-rm{display:none}.al2-rd{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
/* the open alert's title came out small, grey and upper-case (a seat-wide section rule outranked it — seen in the screenshot, D-M745) */
html[data-hq] body .pn-main .al2-open h2{font-size:22px;line-height:1.25;text-transform:none;letter-spacing:-.3px;color:var(--st-ink,#16181D);font-weight:700;border:0;padding:0;margin:0}
/* ==================================================================== D-M747 — INSOLVENZE, a tab of "Ordini e movimenti" (Session 2) */
.ho-vn{font-family:var(--mono,monospace);font-size:11.5px;margin-left:6px;padding:1px 7px;border-radius:999px;background:#FFF1DE;color:#8A3B08}
.dn2-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.dn2-tiles > div{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.dn2-tiles span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E)}.dn2-tiles b{font-family:var(--mono,monospace);font-size:25px}
.dn2-tiles small{font-size:12px;color:var(--st-soft,#5E636E)}.dn2-tiles small a{color:var(--st-accent,#0F5F63);font-weight:600;text-decoration:none}
.dn2-tiles .warn{box-shadow:inset 4px 0 0 #C2680C}.dn2-tiles .warn b{color:#8A3B08}.dn2-tiles .bad{box-shadow:inset 4px 0 0 #B42318}.dn2-tiles .bad b{color:#B42318}
.dn2-card{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:22px;overflow:hidden;margin:0 0 18px}
.dn2-ch{padding:18px 20px}.dn2-ch b{font-size:17px;display:block}.dn2-ch small{font-size:12.5px;color:var(--st-soft,#5E636E)}
.dn2-thead,.dn2-row{display:grid;grid-template-columns:minmax(0,1.3fr) 120px minmax(0,1fr) minmax(0,1.3fr) 260px;gap:14px;align-items:center;padding:12px 20px}
.dn2-thead{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E);background:#F7F5F0}
.dn2-row{border-top:1px solid #F0EDE6}.dn2-row:hover{background:#FAF8F4}.dn2-row > div:first-child{display:flex;flex-direction:column;gap:2px}.dn2-row > div:first-child small{font-size:12px;color:var(--st-soft,#5E636E)}
.dn2-mono{font-family:var(--mono,monospace);font-size:13px}.dn2-why{font-size:12.5px;color:#4A505C;overflow-wrap:anywhere}
.dn2-left{display:flex;flex-direction:column;gap:6px}.dn2-left small{font-size:11.5px;color:var(--st-soft,#5E636E)}
.dn2-bar{display:block;height:5px;border-radius:999px;background:#EEEBE4;position:relative;overflow:hidden}.dn2-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:#C2680C;border-radius:999px}
.dn2-chip{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.dn2-chip.ok{background:#E4F2E9;color:#14502F}.dn2-chip.warn{background:#FFF1DE;color:#8A3B08}.dn2-chip.bad{background:#FDE9E7;color:#8A1C12}.dn2-chip.off{background:#EEEBE4;color:#4A505C}
.dn2-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dn2-empty{padding:30px 20px 34px;text-align:center;border-top:1px solid #F0EDE6;display:flex;flex-direction:column;gap:6px;align-items:center}.dn2-empty b{font-size:17px}.dn2-empty span{color:var(--st-soft,#5E636E);max-width:560px}
@media (max-width:900px){.dn2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.dn2-thead{display:none}.dn2-row{grid-template-columns:1fr 1fr;gap:8px 12px}.dn2-why,.dn2-acts{grid-column:1/-1}.dn2-acts{justify-content:flex-start}}
/* ==================================================================== D-M747 — PROMOZIONI E COUPON, the new list (Session 2) */
.cpn-page .cr-head{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:26px;padding:24px 28px;margin:4px 0 18px;box-shadow:0 8px 24px -12px rgba(20,22,29,.12)}
.cpn-page .cr-head h1{font-size:31px;letter-spacing:-.6px;margin:0}
.cpn-promos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.cpn-page .cpn-promo{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:none}
.cp3-states{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:16px;background:#EEEBE4;margin:0 0 14px}
.cp3-states a{min-height:40px;padding:0 16px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--st-soft,#5E636E);text-decoration:none}
.cp3-states a small{font-family:var(--mono,monospace);font-size:12px;opacity:.85}.cp3-states a.on{background:#fff;color:var(--st-accent,#0F5F63);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12)}
.cp3-tools{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}.cp3-search{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.cp3-search input[name=q]{min-width:320px}
.cp3-new{margin:0 0 14px}.cp3-new > summary{list-style:none;display:inline-flex;cursor:pointer}.cp3-new > summary::-webkit-details-marker{display:none}
.cp3-newbox{margin-top:12px;background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:22px;padding:22px 24px}
.cp3-card{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:22px;overflow:hidden}
.cp3-head,.cp3-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 130px minmax(0,1.2fr) 170px 110px 110px 190px;gap:14px;align-items:center;padding:12px 20px}
.cp3-head{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E);background:#F7F5F0}
.cp3-row{border-top:1px solid #F0EDE6}.cp3-row:hover{background:#FAF8F4}.cp3-row.is-off,.cp3-row.is-used,.cp3-row.is-expired{opacity:.78}
.cp3-code{display:flex;flex-direction:column;gap:3px;min-width:0}.cp3-code code{font-family:var(--mono,monospace);font-weight:700;font-size:14px;background:transparent;padding:0}.cp3-code small{font-size:11.5px;color:var(--st-soft,#5E636E);overflow-wrap:anywhere}
.cp3-disc{font-size:15px}.cp3-for{font-size:12.5px;color:#4A505C}.cp3-until{font-family:var(--mono,monospace);font-size:12.5px}
.cp3-uses{display:flex;flex-direction:column;gap:6px}.cp3-uses small{font-size:12.5px}.cp3-uses i{display:block;height:6px;border-radius:999px;background:#EEEBE4;position:relative;overflow:hidden}
.cp3-uses i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--st-accent,#0F5F63);border-radius:999px}
.cp3-pill{justify-self:start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#EEEBE4;color:#4A505C}.cp3-pill.is-active{background:#E4F2E9;color:#14502F}
.cp3-acts{display:flex;gap:6px;justify-content:flex-end}.cp3-del{color:#A61B12 !important;border-color:#E7B4AF !important}
.cp3-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--st-line,#E4E0D6);font-size:12.5px;color:var(--st-soft,#5E636E)}.cp3-pager{display:flex;gap:8px;align-items:center}
.cp3-empty{padding:30px;text-align:center}
@media (max-width:1100px){.cpn-promos{grid-template-columns:repeat(2,minmax(0,1fr))}.cp3-head{display:none}.cp3-row{grid-template-columns:1fr 1fr;gap:8px 12px}.cp3-acts{grid-column:1/-1;justify-content:flex-start}.cp3-search input[name=q]{min-width:0;width:100%}}
/* coupons, from the screenshot (D-M747): the search bar on one line, "new coupon" a button (not a boxed accordion), the states capitalised */
html[data-hq] body .pn-main .cp3-search > *{margin-top:0}
html[data-hq] body .pn-main .cp3-search input[name=q]{width:340px;min-width:0}
html[data-hq] body .pn-main .cp3-search select{width:auto;min-width:200px}
html[data-hq] body .pn-main .cp3-search label{display:inline-flex;align-items:center;gap:8px;font-weight:500;padding:0;border:0;background:transparent}
html[data-hq] body .pn-main details.cp3-new{border:0;background:transparent;padding:0;margin:0 0 14px}
html[data-hq] body .pn-main details.cp3-new > summary{padding:0 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:12px;background:var(--st-accent,#0F5F63);color:#fff;font-weight:600}
html[data-hq] body .pn-main details.cp3-new > summary::before{content:'+';width:auto;margin-right:8px;color:#fff;transform:none}
html[data-hq] body .pn-main details.cp3-new[open] > summary::before{content:'−';transform:none}
html[data-hq] body .pn-main details.cp3-new > :not(summary){margin-left:0;margin-right:0}
.cp3-states a{text-transform:capitalize}
@media (max-width:760px){html[data-hq] body .pn-main .cp3-search input[name=q],html[data-hq] body .pn-main .cp3-search select{width:100%}}
/* the Credits page's packs, read-only (D-M747) */
.cr-packs-ro{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:8px 0 14px}.cr-packs-ro div{border:1px solid var(--st-line,#E4E0D6);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.cr-packs-ro span{font-size:13px;color:var(--st-soft,#5E636E)}
/* ==================================================================== D-M748 — the price list: row switches as buttons, the folded packages */
.pk-sw{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 10px 0 6px;border-radius:999px;border:1.5px solid var(--st-line,#E4E0D6);background:#fff;font:600 12.5px inherit;font-family:inherit;color:var(--st-soft,#5E636E);cursor:pointer}
.pk-sw i{width:30px;height:18px;border-radius:999px;background:#D3CFC5;position:relative;flex-shrink:0;transition:background .15s}.pk-sw i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.pk-sw.on{color:var(--st-accent,#0F5F63);border-color:rgba(15,95,99,.35);background:var(--st-accent-tint,#E7F1F1)}.pk-sw.on i{background:var(--st-accent,#0F5F63)}.pk-sw.on i::after{left:14px}
.pkd-offline{margin:10px 16px;padding:10px 14px;border-radius:12px;background:#F7F5F0;font-size:13px;color:var(--st-soft,#5E636E)}.pkd-offline a{font-weight:600;color:var(--st-accent,#0F5F63)}
.pkd-row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* the price list under the product's frame said "Listino" twice (the status line and the pane's own title and intro): the line speaks (D-M748) */
body:has(.hq-pnav) .sl-pane[data-pane="packages"] > h2:first-child,body:has(.hq-pnav) .sl-pane[data-pane="packages"] > h2:first-child + p.muted{display:none}
/* phone fixes seen in Session 2's end-of-page check (D-M748): the promotion cards' badges ran past the card; the price list's editor and preview
 * kept their desktop width and ran past the screen (17 elements) */
@media (max-width:760px){
  .cpn-promos{grid-template-columns:1fr}.cpn-page .cpn-promo-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .pkd-layout{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:14px}
  .pkd-layout > *,.pkd-editor,.pkd-preview,.pkd-stage-bar,.pkd-form,.pkd-list{min-width:0 !important;max-width:100% !important;width:auto !important}
  .pkd-stage-bar,.pkd-stage-ctl{flex-wrap:wrap}.pkd-preview{overflow-x:auto}
  .pkd-row{min-width:0}.pkd-row-facts{flex-wrap:wrap}
}
@media (max-width:760px){
  .pkd-sec{min-width:0 !important;max-width:100% !important;margin-inline:0}
  .pkd-tabs{flex-wrap:wrap;max-width:100%}.pkd-tabs-right{margin-left:0;flex-wrap:wrap;max-width:100%}.pkd-over{max-width:100%;white-space:normal}
}
/* D-M750 — Beta as a tab of "Clienti" */
.bt-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:6px 0 14px}.bt-head b{font-size:19px}.bt-head p{margin:2px 0 0;font-size:13.5px}
/* D-M750 — the customer card: the side column (billing, security, note) only on the Overview; the other tabs take the full width */
.pcu-grid.no-aside{grid-template-columns:minmax(0,1fr) !important}
html[data-hq] body:has(.studio-on) .pcu-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:16px;background:#EEEBE4;margin:4px 0 16px;border:0}
html[data-hq] body:has(.studio-on) .pcu-tabs a{border:0;border-radius:12px;min-height:40px;padding:0 16px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--st-soft,#5E636E);background:transparent;text-decoration:none}
html[data-hq] body:has(.studio-on) .pcu-tabs a.on{background:#fff;color:var(--st-accent,#0F5F63);box-shadow:0 1px 2px rgba(20,22,29,.08),0 2px 8px -2px rgba(20,22,29,.12)}
/* D-M750 — Requests in pages of fifty */
.qt-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px;font-size:13px;color:var(--st-soft,#5E636E)}
/* Requests on a phone (Session 3's end-of-page check, D-M750: 372 elements ran past the screen) */
@media (max-width:760px){
  .qt-list,.qt-card,.qt-sum,.qt-info,.qt-path,.qt-filter,.qt-sform,.qt-archive,.tk-desk,.tk-desk > *{max-width:100% !important;min-width:0 !important;box-sizing:border-box}
  .qt-sum,.qt-info,.qt-filter{display:flex;flex-wrap:wrap;gap:6px}.qt-sum > *{min-width:0;overflow-wrap:anywhere}
  .qt-path{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .qt-search,.qt-sform input{width:100% !important;min-width:0 !important}
  .tk-desk{display:block !important}
}
@media (max-width:760px){html[data-hq] body .pn-main .pn-hero .pn-kpis{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-width:100%;min-width:0}.pn-hero .pn-kpi{min-width:0 !important}}
/* ==================================================================== D-M751 — the customer card's header (Session 3, as in the approved preview) */
html[data-hq] body .pn-main .pcu-headcard{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:26px;padding:22px 26px;margin:4px 0 18px;box-shadow:0 8px 24px -12px rgba(20,22,29,.12);display:flex;flex-direction:column;gap:16px}
html[data-hq] body .pn-main .pcu-headcard .pn-hero{border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;background:transparent !important}
html[data-hq] body .pn-main .pcu-headcard .pn-hero h1{font-size:29px !important}
.pcu-stats5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0}
.pcu-stats5 .pcu-stat{background:#FBFAF7;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-align:left;align-items:flex-start}
.pcu-stats5 .pcu-stat small{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E);order:0}
.pcu-stats5 .pcu-stat b{font-family:var(--mono,monospace);font-size:23px;letter-spacing:-.3px;order:1;white-space:nowrap}
.pcu-stats5 .pcu-stat i{font-style:normal;font-size:12px;color:var(--st-soft,#5E636E);order:2}
.pcu-stats5 .pcu-stat.warn{box-shadow:inset 4px 0 0 #C2680C}.pcu-stats5 .pcu-stat.warn b{color:#8A3B08}.pcu-stats5 .pcu-stat.bad{box-shadow:inset 4px 0 0 #B42318}.pcu-stats5 .pcu-stat.bad b{color:#B42318}
html[data-hq] body .pn-main .pcu-headcard .pcu-open{margin:0;padding:12px 14px;border-radius:16px;background:#FFF8EE;border:1px solid #F4DDBB;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html[data-hq] body .pn-main .pcu-headcard .pcu-open a{border-radius:999px;padding:5px 12px;font-weight:600;font-size:13px;text-decoration:none;background:#fff;border:1px solid #F4DDBB}
.pcu-headcard .pcu-quick{display:flex;flex-wrap:wrap;gap:8px;margin:0}
html[data-hq] body .pn-main .pcu-headcard .pcu-tabs{margin:0}
@media (max-width:1000px){.pcu-stats5{grid-template-columns:repeat(2,minmax(0,1fr))}.pcu-stats5 .pcu-stat b{font-size:19px;white-space:normal;overflow-wrap:anywhere}html[data-hq] body .pn-main .pcu-headcard{padding:18px}}
/* the header card, polish from the screenshot (D-M751): the hero inside loses its own frame (Studio's hero rule outranked the first try), its
 * money box repeats the first tile and goes, the tiles lose the old outer frame */
html[data-hq]:not([data-theme="dark"]) body:has(.studio-on) .pn-main .pcu-headcard .pn-hero,html[data-hq] body:has(.studio-on) .pn-main .pcu-headcard .pn-hero{border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;background:transparent !important;border-radius:0 !important}
html[data-hq] body .pn-main .pcu-headcard .pn-hero .pe-status{display:none}
html[data-hq] body .pn-main .pcu-headcard .pcu-stats5{border:0 !important;background:transparent !important;padding:0 !important;box-shadow:none !important}
/* D-M751 — Requests: the list on the left, the request open in full on the right (the approved preview) */
/* D-M811: an opened request stands ALONE at full width — the list is not beside it */
.qt2-split{display:block}.qt2-split.has-open .qt2-left{display:none}
.qt2-open{display:none}.qt2-split.has-open .qt2-open{display:block;position:static;max-height:none;overflow:visible;border-radius:22px}
.qt2-split.has-open .qt2-open > details{margin:0}
.qt-oprow{display:flex;gap:10px;align-items:center;padding:12px 16px;margin:6px 0;border-radius:14px;background:var(--st-accent-tint,#E7F1F1);border:1.5px solid rgba(15,95,99,.35);text-decoration:none;color:inherit}
.qt-oprow em{margin-left:auto;font-style:normal;font-weight:600;color:var(--st-accent,#0F5F63);font-size:13px}
.qt2-empty{padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px dashed var(--st-line,#E4E0D6);border-radius:22px}

/* Requests, polish from the screenshot (D-M751): the header above showed the TICKETS' numbers (169 open, first reply…) on the requests' page —
 * the requests have their own pipeline tiles below; the right column a little narrower so the list keeps its words */
body:has(.qt2-split) .pn-main .pn-hero .pn-kpis{display:none !important}

/* D-M753 — the merged parts' sub-tabs (Legal, E-mail, Link): a quiet underline strip under the parts */
.hq-pnav-subs{display:flex;gap:4px;flex-wrap:wrap;padding:0 26px 14px}
.hq-pnav-subs a{padding:8px 14px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--st-soft,#5E636E);text-decoration:none;border-bottom:3px solid transparent}
.hq-pnav-subs a:hover{background:#F7F5F0;color:var(--st-ink,#16181D)}.hq-pnav-subs a.on{color:var(--st-accent,#0F5F63);border-bottom-color:var(--st-accent,#0F5F63);border-radius:10px 10px 0 0}
@media (max-width:760px){.hq-pnav-subs{padding:0 14px 12px}}
/* Session 4's phone check (D-M753): the legal document's tabs, the templates' cards and the link's tables ran past the screen */
@media (max-width:760px){
  .le-hero .tabs,.le-hero nav{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}.le-hero .tab{flex:1 1 auto;min-width:0}
  .mtp-card{max-width:100% !important;min-width:0 !important;box-sizing:border-box;white-space:normal}
  body:has(.hq-pnav) .pn-main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:760px){
  body:has(.hq-pnav) .pn-main :has(> a.tab){display:flex !important;flex-wrap:wrap !important;max-width:100%}
  body:has(.hq-pnav) .pn-main :has(> a.tab) > a.tab{flex:1 1 auto;min-width:0 !important}
  body:has(.hq-pnav) .pn-main :has(> .mtp-card){display:grid !important;grid-template-columns:minmax(0,1fr) !important;max-width:100%}
  body:has(.hq-pnav) .pn-main .mtp-card{width:auto !important}
}
/* ==================================================================== D-M755 — PayPal configured: the link as it is, the guide folded, the keys behind a button */
.pp2-state{background:#FBFAF7;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:16px 18px;margin:8px 0 14px}
.pp2-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:0}.pp2-kv div{display:flex;flex-direction:column;gap:2px;min-width:0}.pp2-kv .span2{grid-column:1/-1}
.pp2-kv dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E)}.pp2-kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}.pp2-kv dd.ok{color:#14502F}.pp2-kv dd.warn{color:#8A3B08}
html[data-hq] body .pn-main details.pp2-change{border:0;background:transparent;padding:0;margin:8px 0}
html[data-hq] body .pn-main details.pp2-change > summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;background:var(--st-accent,#0F5F63);color:#fff;font-weight:600;list-style:none;cursor:pointer}
html[data-hq] body .pn-main details.pp2-change > summary::before{content:none}
html[data-hq] body .pn-main details.pp2-change[open] > summary{background:#fff;color:var(--st-ink,#16181D);border:1.5px solid var(--st-field-line,#D6D2C7)}
html[data-hq] body .pn-main details.pp2-change > :not(summary){margin:14px 0 0}
@media (max-width:760px){.pp2-kv{grid-template-columns:1fr}}
/* D-M755 — AI and credits: the engine's four views */
.ai2-views{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.ai2-views a{padding:9px 16px;border-radius:999px;border:1.5px solid var(--st-field-line,#D6D2C7);background:#fff;font-weight:600;font-size:14px;color:var(--st-ink,#16181D);text-decoration:none}
.ai2-views a.on{background:var(--st-accent,#0F5F63);border-color:var(--st-accent,#0F5F63);color:#fff}
body:has(.ai2-views) .ps-grid{grid-template-columns:minmax(0,1fr) !important}
/* ==================================================================== D-M759 — Today and the Agenda, as in the approved preview (Session 8) */
/* the AI's move of the day: a real card, not a raw line under the greeting */
html[data-hq] body .pn-main .hq-home-ai{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#F2F7F6,#FBFAF7);border:1px solid #D5E7E4;color:var(--st-ink,#16181D);font-size:14px;line-height:1.55;max-width:760px;overflow-wrap:anywhere}
/* "to do now": rows with a coloured square by urgency */
html[data-hq] body .pn-main .td-todo .td-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 18px;margin:0;border-radius:0;border:0;border-top:1px solid #F0EDE6;background:transparent;color:var(--st-ink,#16181D);text-decoration:none;font-weight:600}
html[data-hq] body .pn-main .td-todo .td-row:hover{background:#FAF8F4}
html[data-hq] body .pn-main .td-todo .td-row .td-dot{width:38px;height:38px;border-radius:12px;background:#EEEBE4;display:block;position:relative}
html[data-hq] body .pn-main .td-todo .td-row .td-dot::after{content:'';position:absolute;inset:14px;border-radius:999px;background:#8A8F99}
html[data-hq] body .pn-main .td-todo .td-row.bad .td-dot{background:#FDE9E7}html[data-hq] body .pn-main .td-todo .td-row.bad .td-dot::after{background:#B42318}
html[data-hq] body .pn-main .td-todo .td-row.warn .td-dot{background:#FFF1DE}html[data-hq] body .pn-main .td-todo .td-row.warn .td-dot::after{background:#C2680C}
html[data-hq] body .pn-main .td-todo .td-row em{font-style:normal;color:var(--st-accent,#0F5F63);font-weight:700}
/* agenda rows: one compact line, actions as small buttons on the right */
html[data-hq] body .pn-main .ag-it{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border-radius:14px;border:1px solid var(--st-line,#E4E0D6);background:#fff;margin:0 0 8px}
html[data-hq] body .pn-main .ag-it.late{border-color:#F1C6C0;background:#FFF9F8}html[data-hq] body .pn-main .ag-it.done{opacity:.7}
html[data-hq] body .pn-main .ag-it .ag-body span{font-weight:600}html[data-hq] body .pn-main .ag-it .ag-body small{display:block;color:var(--st-soft,#5E636E);font-size:12px;margin-top:2px}
html[data-hq] body .pn-main .ag-it .ag-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
html[data-hq] body .pn-main .ag-it .ag-b{min-height:34px;padding:0 10px;border-radius:10px;font-size:12.5px;font-weight:600;border:1.5px solid var(--st-field-line,#D6D2C7);background:#fff;display:inline-flex;align-items:center;gap:6px;color:var(--st-ink,#16181D);text-decoration:none}
html[data-hq] body .pn-main .ag-it .ag-b-ok{border-color:#9BC7AE;color:#14502F;background:#EEF7F1}html[data-hq] body .pn-main .ag-it .ag-b-del{border-color:#E7B4AF;color:#A61B12}
@media (max-width:760px){html[data-hq] body .pn-main .ag-it{grid-template-columns:24px minmax(0,1fr)}html[data-hq] body .pn-main .ag-it .ag-acts{grid-column:1/-1;justify-content:flex-start}html[data-hq] body .pn-main .ag-it .ag-b span{display:none}}
/* from the screenshot (D-M759): in the Agenda's narrow day column the actions took the width and the text went vertical — the actions sit
 * UNDER the text, always (the same on Today, on the calendar and on a phone) */
html[data-hq] body .pn-main .ag-it{grid-template-columns:28px minmax(0,1fr) !important;row-gap:8px}
html[data-hq] body .pn-main .ag-it .ag-acts{grid-column:2 / -1 !important;justify-content:flex-start !important}
html[data-hq] body .pn-main .ag-it .ag-body{min-width:0}html[data-hq] body .pn-main .ag-it .ag-body span{overflow-wrap:anywhere}
/* ==================================================================== D-M761 — the Support desk in three columns, as in the approved preview */
@media (min-width:1101px){
  html[data-hq] body:has(.studio-on) .pn-main .tk-desk{display:grid !important;grid-template-columns:320px minmax(0,1fr) !important;gap:16px;align-items:start}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:18px;row-gap:12px;align-items:start}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > *{grid-column:1 / -1}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-msgs{grid-column:1;grid-row:2 / span 3}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-reply{grid-column:1;grid-row:5}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-cust{grid-column:2;grid-row:2}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-tools{grid-column:2;grid-row:3}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-ai{grid-column:2;grid-row:4 / span 2}
}
/* the side boxes as small cards */
html[data-hq] body:has(.studio-on) .pn-main .tk-cust,html[data-hq] body:has(.studio-on) .pn-main .tk-tools,html[data-hq] body:has(.studio-on) .pn-main .tk-ai{background:#FBFAF7;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:14px 16px;margin:0}
/* the conversation as bubbles: the customer on the left, us on the right */
html[data-hq] body:has(.studio-on) .pn-main .tk-msg{display:flex;margin:0 0 12px}
html[data-hq] body:has(.studio-on) .pn-main .tk-msg.me{justify-content:flex-end}
html[data-hq] body:has(.studio-on) .pn-main .tk-msg .tk-bubble{max-width:82%;padding:12px 14px;border-radius:16px;line-height:1.5;font-size:14px;box-shadow:none;border:0}
html[data-hq] body:has(.studio-on) .pn-main .tk-msg.them .tk-bubble{background:#F2F0EB;color:var(--st-ink,#16181D);border-top-left-radius:6px}
html[data-hq] body:has(.studio-on) .pn-main .tk-msg.me .tk-bubble{background:#0F5F63;color:#fff;border-top-right-radius:6px}
html[data-hq] body:has(.studio-on) .pn-main .tk-msg.me .tk-bubble a{color:#CFF3EE}
html[data-hq] body:has(.studio-on) .pn-main .tk-msg.me .tk-bubble small,html[data-hq] body:has(.studio-on) .pn-main .tk-msg.me .tk-bubble .muted,html[data-hq] body:has(.studio-on) .pn-main .tk-msg.me .tk-bubble time{color:rgba(255,255,255,.78) !important}
/* the inbox rows: tighter, the open one marked */
html[data-hq] body:has(.studio-on) .pn-main .tk-item{border-radius:12px;padding:10px 12px;margin:0 0 6px}
html[data-hq] body:has(.studio-on) .pn-main .tk-item.active,html[data-hq] body:has(.studio-on) .pn-main .tk-item[aria-current]{background:var(--st-accent-tint,#E7F1F1);box-shadow:inset 3px 0 0 var(--st-accent,#0F5F63)}
/* the desk, polish from the screenshot (D-M761): the side boxes' buttons ran out of the 290 px column; the inbox's filters and tabs were cut;
 * the status badge repeated the tab on every row (the title lost its words) */
html[data-hq] body:has(.studio-on) .pn-main .tk-cust *,html[data-hq] body:has(.studio-on) .pn-main .tk-tools *,html[data-hq] body:has(.studio-on) .pn-main .tk-ai *{max-width:100%;min-width:0}
html[data-hq] body:has(.studio-on) .pn-main .tk-cust .btn,html[data-hq] body:has(.studio-on) .pn-main .tk-tools .btn,html[data-hq] body:has(.studio-on) .pn-main .tk-ai .btn{white-space:normal;text-align:center}
html[data-hq] body:has(.studio-on) .pn-main .tk-cust div:has(> .btn),html[data-hq] body:has(.studio-on) .pn-main .tk-tools div:has(> .btn),html[data-hq] body:has(.studio-on) .pn-main .tk-tools form:has(> .btn){display:flex;flex-wrap:wrap;gap:8px}
html[data-hq] body:has(.studio-on) .pn-main .tk-inbox .tk-filters-row{display:flex !important;flex-wrap:wrap;gap:8px}
html[data-hq] body:has(.studio-on) .pn-main .tk-inbox .tk-filters-row > *{flex:1 1 130px;min-width:0;margin:0}
html[data-hq] body:has(.studio-on) .pn-main .tk-inbox #tk-tabs{display:flex;flex-wrap:wrap;gap:4px}
html[data-hq] body:has(.studio-on) .pn-main .tk-list .tk-item > .badge{display:none}
html[data-hq] body:has(.studio-on) .pn-main .tk-list .tk-item .tk-body{min-width:0;flex:1 1 auto}
/* the ticket's tools: its buttons sit in small forms — the rows wrap and the buttons keep their size instead of shrinking into "Riapr" */
html[data-hq] body:has(.studio-on) .pn-main .tk-tools,html[data-hq] body:has(.studio-on) .pn-main .tk-tools *{flex-wrap:wrap}
html[data-hq] body:has(.studio-on) .pn-main .tk-tools .btn,html[data-hq] body:has(.studio-on) .pn-main .tk-tools button{flex-shrink:0}
html[data-hq] body:has(.studio-on) .pn-main .tk-tools form.inline{display:inline-flex;margin:0}
/* D-M761 — Disputes: four tiles and one empty state (the open tab showed "no dispute" twice) */
.dp3-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.dp3-tiles > div{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.dp3-tiles span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--st-soft,#5E636E)}.dp3-tiles b{font-family:var(--mono,monospace);font-size:24px}.dp3-tiles small{font-size:12px;color:var(--st-soft,#5E636E)}
.dp3-tiles .ok{box-shadow:inset 4px 0 0 #1E6B45}.dp3-tiles .ok b{color:#14502F}.dp3-tiles .warn{box-shadow:inset 4px 0 0 #C2680C}.dp3-tiles .warn b{color:#8A3B08}.dp3-tiles .bad{box-shadow:inset 4px 0 0 #B42318}.dp3-tiles .bad b{color:#B42318}
.dp3-empty{background:#fff;border:1px solid var(--st-line,#E4E0D6);border-radius:22px;padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;margin:16px 0}
.dp3-empty b{font-size:18px}.dp3-empty span{color:var(--st-soft,#5E636E);max-width:620px;line-height:1.55}
@media (max-width:900px){.dp3-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* D-M770 — the seat's colour variables that stayed dark in dark theme (found by the dark audit: ticket codes, links and filter chips navy
 * on dark, 1.2:1): their dark-theme values. --hq-deep is the top bar's slate and stays as it is (it is a surface, not a text colour). */
html[data-hq][data-theme="dark"]{--signal:#7FB6F5;--signal-ink:#A9CCF7;--hq-bad:#FF8A80}

/* =====================================================================================================================================
 * AURORA 5 — the seat's frame (D-M772, step 1 of the approved plan): the menu as a dark island with one teal light, the page bar as a
 * light capsule. Colour rules: teal = structure and "where you are"; gold = the brand, the person, TEST; red/amber/violet/green = states.
 * Every text pair measured ≥ 4.5:1. The dark theme keeps the island and turns the capsule to dark glass.
 * ===================================================================================================================================== */
html[data-hq]{--au-ink:#0A1116;--au-tx:#D2D9E2;--au-mute:#9AA6B6;--au-teal:#0D7F80;--au-teal2:#0B6F72;--au-glow:#7FF0E2;--au-gold1:#F7C967;--au-gold2:#E3A536;--au-line:rgba(95,212,200,.10)}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media (min-width:901px){
  html[data-hq] body.pn-page{background:radial-gradient(900px 520px at 105% -15%,rgba(20,135,140,.10),transparent 60%),#ECE9E2}
  html[data-hq] .hqsb{margin:14px 0 14px 14px;height:calc(100vh - 28px);border-radius:24px;padding:14px 12px 12px;
    background:radial-gradient(360px 240px at 18% -6%,rgba(38,178,170,.42),transparent 70%),radial-gradient(420px 320px at 110% 28%,rgba(15,110,115,.30),transparent 70%),radial-gradient(380px 300px at -20% 105%,rgba(12,90,95,.45),transparent 70%),linear-gradient(180deg,#0B1418,#071014) !important;
    box-shadow:0 36px 80px -36px rgba(7,16,20,.8),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(95,212,200,.10) !important;border:0 !important;color:var(--au-tx)}
  html[data-hq] .hqtb{margin:14px 14px 0 14px;border-radius:20px;height:64px;padding:0 12px 0 16px;gap:10px;background:rgba(255,255,255,.92) !important;border:0 !important;
    box-shadow:0 20px 44px -24px rgba(7,16,20,.45),inset 0 0 0 1px rgba(255,255,255,.9) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
html[data-hq] .hqsb{scrollbar-width:thin;scrollbar-color:rgba(95,212,200,.25) transparent}
html[data-hq] .hqsb-top{display:flex;align-items:center;gap:8px;padding:2px 2px 12px 4px}
html[data-hq] .hqsb-top .hqsb-brand{flex:1;min-width:0;padding:0}
html[data-hq] .hqsb-mono{background:linear-gradient(145deg,var(--au-gold1),var(--au-gold2)) !important;color:#0B1418 !important;border-radius:12px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 8px 20px -8px rgba(242,181,68,.7)}
html[data-hq] .hqsb-word b{color:#fff}html[data-hq] .hqsb-word i{color:#8FD9CF !important;letter-spacing:.2em}
html[data-hq] .hqsb-orb{width:10px;height:10px;border-radius:999px;flex-shrink:0}
html[data-hq] .hqsb-orb.ok{background:#2BD67B;box-shadow:0 0 0 4px rgba(43,214,123,.16),0 0 14px rgba(43,214,123,.8)}
html[data-hq] .hqsb-orb.warn{background:#F2B544;box-shadow:0 0 0 4px rgba(242,181,68,.18),0 0 14px rgba(242,181,68,.7)}
html[data-hq] .hqsb-rail{width:30px;height:30px;border-radius:9px;border:0;background:rgba(95,212,200,.08);color:#8FD9CF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(95,212,200,.16);flex-shrink:0}
html[data-hq] .hqsb-rail svg{width:16px;height:16px}
html[data-hq] .hqsb-sandbox{display:inline-flex;align-items:center;gap:8px;width:max-content;margin:0 4px 10px;padding:5px 11px 5px 9px;border-radius:999px;font-size:11.5px;font-weight:650;color:#F6D08A !important;background:rgba(242,181,68,.12) !important;box-shadow:inset 0 0 0 1px rgba(242,181,68,.28);border:0 !important}
html[data-hq] .hqsb-dot{width:7px;height:7px;border-radius:999px;background:#F2B544;box-shadow:0 0 0 3px rgba(242,181,68,.16)}
html[data-hq] .hqsb-new{display:flex;position:relative;margin:0 2px 12px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--au-teal),#0A6266);box-shadow:0 12px 26px -12px rgba(22,190,180,.8),inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(127,240,226,.25)}
html[data-hq] .hqsb-new .nb-main{flex:1;display:flex;align-items:center;gap:9px;padding:0 14px;font-weight:700;color:#fff !important;font-size:14px;text-decoration:none}
html[data-hq] .hqsb-new .nb-main svg{width:17px;height:17px}
html[data-hq] .hqsb-new .nb-more summary{list-style:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#CFF7F1;border-left:1px solid rgba(255,255,255,.16);cursor:pointer}
html[data-hq] .hqsb-new .nb-more summary::-webkit-details-marker{display:none}html[data-hq] .hqsb-new .nb-more summary svg{width:16px;height:16px}
html[data-hq] .hqsb-new .nb-menu{position:absolute;left:0;right:0;top:48px;z-index:30;display:flex;flex-direction:column;padding:6px;border-radius:14px;background:#0C1419;box-shadow:0 20px 40px -16px rgba(0,0,0,.7),inset 0 0 0 1px rgba(127,240,226,.18)}
html[data-hq] .hqsb-new .nb-menu a{padding:9px 12px;border-radius:10px;color:#DDE3EA !important;font-weight:600;font-size:13.5px;text-decoration:none}html[data-hq] .hqsb-new .nb-menu a:hover{background:rgba(95,212,200,.12)}
html[data-hq] .hqsb-pin{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 2px 6px}html[data-hq] .hqsb-pin.solo{grid-template-columns:1fr}
html[data-hq] .hqsb-it.pt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:auto;min-height:92px;padding:11px 12px !important;border-radius:14px;background:rgba(255,255,255,.05) !important;box-shadow:inset 0 0 0 1px var(--au-line);margin:0 !important}
html[data-hq] .hqsb-it.pt > i{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:#9FD6CF;margin-bottom:4px}
html[data-hq] .hqsb-it.pt .pt-l{font-size:12px;color:#A9B3C0;font-weight:600}html[data-hq] .hqsb-it.pt .pt-n{font:700 19px var(--mono,'IBM Plex Mono',monospace);color:#fff;letter-spacing:-.4px}
html[data-hq] .hqsb-it.pt small{font-size:10.5px;color:#8C98A8;line-height:1.3}
html[data-hq] .hqsb-it.pt.on{background:linear-gradient(150deg,var(--au-teal) 0%,#0C7272 55%,#0A5C60 100%) !important;box-shadow:0 14px 34px -12px rgba(22,190,180,.75),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(127,240,226,.25)}
html[data-hq] .hqsb-it.pt.on > i{background:rgba(255,255,255,.18);color:#fff}html[data-hq] .hqsb-it.pt.on .pt-l,html[data-hq] .hqsb-it.pt.on small{color:rgba(255,255,255,.9)}
html[data-hq] .hqsb-it.pt.urgent{background:linear-gradient(150deg,rgba(240,85,90,.20),rgba(240,85,90,.07)) !important;box-shadow:inset 0 0 0 1px rgba(240,85,90,.30)}
html[data-hq] .hqsb-it.pt.urgent > i{background:rgba(240,85,90,.18);color:#FF9A9D}html[data-hq] .hqsb-it.pt.urgent .pt-n{color:#FFB3B5}
html[data-hq] .hqsb-it.pt .pt-dot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:999px;background:#F0555A;box-shadow:0 0 0 4px rgba(240,85,90,.18),0 0 12px rgba(240,85,90,.8)}
html[data-hq] .hqsb-it.pt::before,html[data-hq] .hqsb-it.pt::after{display:none !important}
html[data-hq] .hqsb-sec{color:#7FCFC5 !important;font-size:10px !important;letter-spacing:.2em !important;display:flex;align-items:center;gap:10px}
html[data-hq] .hqsb-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(95,212,200,.35),transparent)}
html[data-hq] .hqsb-grp .hqsb-it,html[data-hq] .hqsb-foot .hqsb-it{border-radius:12px;color:#D2D9E2 !important;position:relative}
html[data-hq] .hqsb-grp .hqsb-it > i,html[data-hq] .hqsb-foot .hqsb-it > i{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(95,212,200,.07);box-shadow:inset 0 0 0 1px rgba(95,212,200,.10);color:#9FD6CF}
html[data-hq] .hqsb-grp .hqsb-it:hover{background:rgba(95,212,200,.08) !important}html[data-hq] .hqsb-grp .hqsb-it:hover > i{background:rgba(95,212,200,.16);color:#fff}
html[data-hq] .hqsb-grp .hqsb-it.on{background:linear-gradient(90deg,var(--au-teal),var(--au-teal2)) !important;color:#fff !important;box-shadow:0 0 0 1px rgba(127,240,226,.45),0 10px 30px -10px rgba(22,190,180,.85) !important}
html[data-hq] .hqsb-grp .hqsb-it.on > i{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
html[data-hq] .hqsb-grp .hqsb-it.on::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--au-glow);box-shadow:0 0 12px var(--au-glow),0 0 2px #fff;view-transition-name:au-ind}
html[data-hq] .hqsb-b{background:rgba(95,212,200,.12) !important;color:#CFF3EE !important;font-variant-numeric:tabular-nums}
html[data-hq] .hqsb-it.on .hqsb-b{background:rgba(255,255,255,.2) !important;color:#fff !important}
/* the page bar */
html[data-hq] .hqtb-page{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto;white-space:nowrap}
html[data-hq] .hqtb-pg{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--au-teal),#0A6266);box-shadow:0 8px 18px -8px rgba(22,190,180,.8);flex-shrink:0}
html[data-hq] .hqtb-pg svg{width:18px;height:18px}html[data-hq] .hqtb-page b{font-size:16px;color:#12161C;letter-spacing:-.25px;overflow:hidden;text-overflow:ellipsis}
html[data-hq] .hqtb-search{display:flex;align-items:center;gap:8px;height:42px;width:min(300px,28vw);border-radius:13px;padding:0 8px 0 12px;background:#F2F6F5 !important;box-shadow:inset 0 0 0 1px #D6E6E3;border:0 !important;color:#5E636E}
html[data-hq] .hqtb-search svg{width:17px;height:17px;flex-shrink:0}html[data-hq] .hqtb-search input{flex:1;min-width:0;border:0 !important;background:transparent !important;box-shadow:none !important;height:40px;padding:0 !important;font-size:13.5px;color:#12161C}
html[data-hq] .hqtb-search kbd{font:650 10.5px var(--mono,monospace);padding:3px 7px;border-radius:7px;background:#fff;color:#12161C;box-shadow:inset 0 0 0 1px #E3DFD6,0 1px 0 #E3DFD6}
html[data-hq] .hqtb-today{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:13px;background:linear-gradient(135deg,#0B1418,#0E3A3D) !important;box-shadow:0 14px 28px -14px rgba(14,58,61,.9),inset 0 1px 0 rgba(255,255,255,.08) !important;border:0 !important}
html[data-hq] .hqtb-today > span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#9AA6B6 !important}
html[data-hq] .hqtb-today b{font:700 16px var(--mono,monospace) !important;color:#7FF0E2 !important;font-variant-numeric:tabular-nums}html[data-hq] .hqtb-today b.neg{color:#FFB3B5 !important}
html[data-hq] .hqtb-duo{display:inline-flex;align-items:center;height:32px;border-radius:999px;background:#F6F4EF;box-shadow:inset 0 0 0 1px #E3DFD6;overflow:hidden}
html[data-hq] .hqtb-duo small{display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:12px;font-weight:650;color:#3A3F48 !important;background:transparent !important;border:0 !important;height:32px;white-space:nowrap}
html[data-hq] .hqtb-duo small + small{border-left:1px solid #E3DFD6 !important}
html[data-hq] .hqtb-d{width:7px;height:7px;border-radius:999px}html[data-hq] .hqtb-d.amber{background:#F2B544;box-shadow:0 0 0 3px rgba(242,181,68,.2)}html[data-hq] .hqtb-d.violet{background:#8B7CF6;box-shadow:0 0 0 3px rgba(139,124,246,.2)}
html[data-hq] .hqtb-env.test{background:linear-gradient(145deg,var(--au-gold1),var(--au-gold2)) !important;color:#0B1418 !important;border:0 !important;box-shadow:none !important}
html[data-hq] .hqtb-env.test i{background:#0B1418 !important;box-shadow:none !important}
html[data-hq] .hqtb-bell{position:relative;width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#0B6F72;background:#E7F1F1;box-shadow:inset 0 0 0 1.5px #0B6F72;flex-shrink:0}
html[data-hq] .hqtb-bell svg{width:18px;height:18px}html[data-hq] .hqtb-nd{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:999px;background:#F0555A;box-shadow:0 0 0 2px #fff}
html[data-hq] .hqtb-op .hqtb-av{background:linear-gradient(145deg,var(--au-gold1),var(--au-gold2)) !important;color:#0B1418 !important;border-radius:12px !important}
html[data-hq] .hqtb-op .hqtb-opn{color:#3A3F48}
/* the rail: the island folded to its glyphs (remembered in a cookie, drawn folded from the first frame) */
@media (min-width:901px){
  html[data-hq][data-rail="1"] .hqsb{width:84px !important;min-width:84px !important;padding:12px 10px !important;overflow:visible}
  html[data-hq][data-rail="1"] .hqsb-word,html[data-hq][data-rail="1"] .hqsb-sandbox,html[data-hq][data-rail="1"] .hqsb-new .nb-more,html[data-hq][data-rail="1"] .hqsb-it .pt-l,html[data-hq][data-rail="1"] .hqsb-it .pt-n,html[data-hq][data-rail="1"] .hqsb-it.pt small,html[data-hq][data-rail="1"] .hqsb-b,html[data-hq][data-rail="1"] .hqsb-php,html[data-hq][data-rail="1"] .hqsb-foot::before{display:none !important}
  html[data-hq][data-rail="1"] .hqsb-top{flex-direction:column;gap:10px;padding:0 0 10px}html[data-hq][data-rail="1"] .hqsb-rail svg{transform:rotate(180deg)}
  html[data-hq][data-rail="1"] .hqsb-new{height:44px;width:48px;margin:0 auto 10px}html[data-hq][data-rail="1"] .hqsb-new .nb-main{font-size:0;padding:0;justify-content:center}
  html[data-hq][data-rail="1"] .hqsb-pin{grid-template-columns:1fr;gap:6px}html[data-hq][data-rail="1"] .hqsb-it.pt{min-height:0;padding:8px !important;align-items:center}html[data-hq][data-rail="1"] .hqsb-it.pt > i{margin:0;width:34px;height:34px}
  html[data-hq][data-rail="1"] .hqsb-it.pt .pt-dot{top:4px;right:4px}
  html[data-hq][data-rail="1"] .hqsb-sec{font-size:0 !important;padding:8px 0 !important;justify-content:center}html[data-hq][data-rail="1"] .hqsb-sec .hqsb-chev{display:none}
  html[data-hq][data-rail="1"] .hqsb-grp .hqsb-it,html[data-hq][data-rail="1"] .hqsb-foot .hqsb-it{font-size:0;justify-content:center;padding:0 !important;height:44px}
  html[data-hq][data-rail="1"] .hqsb-grp .hqsb-it.has-badge::after{content:'';position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:999px;background:#F2B544;box-shadow:0 0 0 2px #0A1116}
  html[data-hq][data-rail="1"] .hqsb-grp .hqsb-it.on::before{left:-10px}
}
/* the phone: the compact bar in the same light, the island as the drawer */
@media (max-width:900px){
  html[data-hq] .hqmb{background:rgba(255,255,255,.94) !important;border:0 !important;box-shadow:0 14px 30px -18px rgba(7,16,20,.45) !important;margin:8px;border-radius:18px;width:auto}
  html[data-hq] .hqmb-brand b{color:#12161C !important}html[data-hq] .hqmb-btn{color:#0B6F72 !important}
  html[data-hq] .hqsb{border-radius:0 24px 24px 0;background:radial-gradient(360px 240px at 18% -6%,rgba(38,178,170,.42),transparent 70%),linear-gradient(180deg,#0B1418,#071014) !important}
}
/* the dark theme: the island stays, the page bar turns to dark glass */
html[data-hq][data-theme="dark"] body.pn-page{background:radial-gradient(900px 520px at 105% -15%,rgba(20,135,140,.16),transparent 60%),#0E1114}
html[data-hq][data-theme="dark"] .hqtb{background:rgba(23,27,34,.86) !important;box-shadow:0 20px 44px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(127,240,226,.12) !important}
html[data-hq][data-theme="dark"] .hqtb-page b{color:#EEF2F6}
html[data-hq][data-theme="dark"] .hqtb-search{background:#1C212A !important;box-shadow:inset 0 0 0 1px #2A313C;color:#A9B3C0}html[data-hq][data-theme="dark"] .hqtb-search input{color:#EEF2F6}
html[data-hq][data-theme="dark"] .hqtb-search kbd{background:#2A313C;color:#E6EAF0;box-shadow:none}
html[data-hq][data-theme="dark"] .hqtb-duo{background:#1C212A;box-shadow:inset 0 0 0 1px #2A313C}html[data-hq][data-theme="dark"] .hqtb-duo small{color:#D6DEE7 !important}html[data-hq][data-theme="dark"] .hqtb-duo small + small{border-left-color:#2A313C !important}
html[data-hq][data-theme="dark"] .hqtb-bell{background:#16302F;color:#7FF0E2;box-shadow:inset 0 0 0 1.5px var(--au-teal)}html[data-hq][data-theme="dark"] .hqtb-nd{box-shadow:0 0 0 2px #171B22}
html[data-hq][data-theme="dark"] .hqtb-op .hqtb-opn{color:#D6DEE7}
html[data-hq][data-theme="dark"] .hqmb{background:rgba(23,27,34,.92) !important}html[data-hq][data-theme="dark"] .hqmb-brand b{color:#EEF2F6 !important}html[data-hq][data-theme="dark"] .hqmb-btn{color:#7FF0E2 !important}

/* Aurora 5 — the island's width (from the real page: at 232 px the long names wrapped onto two lines) and the room the page leaves for it */
@media (min-width:901px){
  html[data-hq] .hqsb{width:268px}
  html[data-hq] body.pn-page,html[data-hq] body:has(> .hqsb),html[data-hq] body:has(> .pn-shell .hqsb){padding-left:296px}
  html[data-hq] .hqtb{left:282px}
  html[data-hq][data-rail="1"] body.pn-page,html[data-hq][data-rail="1"] body:has(> .hqsb),html[data-hq][data-rail="1"] body:has(> .pn-shell .hqsb){padding-left:112px}
  html[data-hq][data-rail="1"] .hqtb{left:98px}
  html[data-hq] .hqsb-grp .hqsb-it{white-space:nowrap}
}
html[data-hq] .hqsb-sandbox{opacity:1 !important;filter:none !important}

/* Aurora 5 — polish from the real page: the old brand underline, the entries' weight as in the approved preview */
html[data-hq] .hqsb-top .hqsb-brand,html[data-hq] .hqsb-top .hqsb-word{border:0 !important;box-shadow:none !important}
html[data-hq] .hqsb-grp .hqsb-it,html[data-hq] .hqsb-foot .hqsb-it{font-weight:560}

/* Aurora 5 on the phone: the bell's count is a small pill at the corner, never over the glyph */
@media (max-width:900px){
  html[data-hq] .hqmb-bell{position:relative}
  html[data-hq] .hqmb-bell .hqsb-b{top:-2px !important;right:-4px !important;font-size:9.5px !important;line-height:1;padding:3px 5px !important;min-width:0;background:#E5484D !important;color:#fff !important;box-shadow:0 0 0 2px #fff}
}

/* Aurora 5 — the Favourites row under the tiles and the star in the page bar */
html[data-hq] .hqsb-favs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 2px 2px;padding:8px;border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(95,212,200,.10)}
html[data-hq] .hqsb-favs .fl{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#F6D08A;margin-right:auto}
html[data-hq] .hqsb-favs .fl svg{width:13px;height:13px}
html[data-hq] .hqsb-favs .fv{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#CFF3EE;background:rgba(95,212,200,.10);box-shadow:inset 0 0 0 1px rgba(95,212,200,.16)}
html[data-hq] .hqsb-favs .fv svg{width:16px;height:16px}html[data-hq] .hqsb-favs .fv:hover{background:rgba(95,212,200,.2)}
html[data-hq][data-rail="1"] .hqsb-favs{flex-direction:column;padding:6px}html[data-hq][data-rail="1"] .hqsb-favs .fl{display:none}
html[data-hq] .hqtb-fav{display:inline-flex;margin:0}
html[data-hq] .hqtb-fav button{width:30px;height:30px;border-radius:9px;border:0;background:transparent;color:#9AA0AA;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
html[data-hq] .hqtb-fav button:hover{background:#F2F6F5;color:#0B6F72}html[data-hq] .hqtb-fav button.on{color:#B7791F;background:#FFF3DC}
html[data-hq] .hqtb-fav svg{width:16px;height:16px}

/* Aurora 5 — the page's tabs in the page bar (D-M776): the filter copies the page's first tab bar into the bar; on wide screens the copy
 * shows and the original hides; below 1280 px the bar has no room, so the copy hides and the original stays in the page */
html[data-hq] .hqtb .hqtb-tabs{display:none}
@media (min-width:1280px){
  html[data-hq] nav[data-lifted]{display:none !important}
  html[data-hq] .hqtb .hqtb-tabs{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;margin:0 0 0 4px !important;padding:3px !important;border-radius:12px !important;background:#EEF3F2 !important;box-shadow:inset 0 0 0 1px #D6E6E3 !important;border:0 !important;
    max-width:min(46vw,640px);overflow-x:auto;scrollbar-width:none;min-width:0;flex-shrink:1;position:static !important;width:auto !important}
  html[data-hq] .hqtb .hqtb-tabs::-webkit-scrollbar{display:none}
  html[data-hq] .hqtb .hqtb-tabs > a{display:inline-flex !important;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px !important;border-radius:9px !important;font-size:12.5px !important;font-weight:650 !important;color:#4A505C !important;background:transparent !important;border:0 !important;box-shadow:none !important;text-decoration:none;height:auto !important;min-height:0 !important;margin:0 !important}
  html[data-hq] .hqtb .hqtb-tabs > a:hover{color:#0B6F72 !important;background:rgba(255,255,255,.6) !important}
  html[data-hq] .hqtb .hqtb-tabs > a.on,html[data-hq] .hqtb .hqtb-tabs > a[aria-current="page"],html[data-hq] .hqtb .hqtb-tabs > a.active{background:#fff !important;color:#0B6F72 !important;box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 10px -4px rgba(11,111,114,.35) !important}
  html[data-hq] .hqtb .hqtb-tabs > a small,html[data-hq] .hqtb .hqtb-tabs > a em,html[data-hq] .hqtb .hqtb-tabs > a .n{font:650 10.5px var(--mono,monospace) !important;padding:1px 6px !important;border-radius:999px !important;background:rgba(11,111,114,.10) !important;color:#0B6F72 !important;margin:0 !important}
  html[data-hq] .hqtb:has(.hqtb-tabs) .hqtb-search{width:clamp(120px,13vw,220px)}
  html[data-hq] .hqtb:has(.hqtb-tabs) .hqtb-duo small:first-child{display:none}
}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs{background:#1C212A !important;box-shadow:inset 0 0 0 1px #2A313C !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a{color:#A9B3C0 !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a.on,html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a[aria-current="page"]{background:#2A313C !important;color:#7FF0E2 !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a small{background:rgba(127,240,226,.12) !important;color:#7FF0E2 !important}

/* an action that lives in a tab bar (the customers' "Nuovo cliente") stays a button when the bar is lifted, set apart from the tabs */
@media (min-width:1280px){
  html[data-hq] .hqtb .hqtb-tabs > a.btn{margin-left:6px !important;background:linear-gradient(135deg,#0D7F80,#0A6266) !important;color:#fff !important;box-shadow:0 6px 14px -8px rgba(13,127,128,.8) !important}
}



/* Aurora 5 — the page's tabs on their OWN ROW of the bar (D-M776, measured on twelve pages: on one row with the money, the pills and the
 * search, three to five tabs did not fit at 1440 px). The bar grows by one row where a page has tabs and the page moves down by as much;
 * nothing is hidden or squeezed. The favourites' star is filled when the page is one. */
html[data-hq] .hqtb-fav button.on svg{fill:currentColor}
@media (min-width:1280px){
  html[data-hq] .hqtb:has(.hqtb-tabs){flex-wrap:wrap;height:auto !important;min-height:64px;row-gap:0;padding-top:10px !important;padding-bottom:9px !important;align-content:center}
  html[data-hq] .hqtb:has(.hqtb-tabs)::after{content:'';order:98;flex-basis:100%;height:0}
  html[data-hq] .hqtb .hqtb-tabs{order:99;margin:6px 0 0 50px !important;max-width:calc(100% - 60px);flex:0 1 auto;-webkit-mask-image:none;mask-image:none;padding-right:3px !important}
  html[data-hq] body:has(.hqtb .hqtb-tabs){padding-top:104px !important}
}

/* a side effect of Aurora's wider island (D-M776, seen on the Orders screenshot): the six figure tiles of Orders and Cash no longer fit
 * one row at 1440 px — the refunds' figure lost its "€". Six in a row only on wide screens, three by three below; the figure scales. */
@media (min-width:901px) and (max-width:1599px){html[data-hq] .ho-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width:900px){html[data-hq] .ho-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
html[data-hq] .ho-kpis b,html[data-hq] .ho-kpis strong{font-size:clamp(20px,1.75vw,27px) !important;white-space:nowrap}
@media (max-width:900px){html[data-hq] .ho-kpis b,html[data-hq] .ho-kpis strong{font-size:clamp(15px,4.4vw,21px) !important}}

/* the customer card at 1440 px with the wider island (overflow audit, D-M776): the header's tiles wrap into as many columns as fit, the
 * figure scales; a textarea and a long note never run out of their column */
html[data-hq] .pcu-stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important}
html[data-hq] .pcu-stats b,html[data-hq] .pcu-stat b{font-size:clamp(18px,1.6vw,24px) !important;white-space:nowrap}
@media (max-width:900px){html[data-hq] .pcu-stats b,html[data-hq] .pcu-stat b{font-size:clamp(15px,4.4vw,21px) !important}}
html[data-hq] .pn-main textarea{max-width:100%;box-sizing:border-box}
html[data-hq] .pn-main .muted{overflow-wrap:anywhere}

/* the overflow audit's last two (D-M776): Continuity's key/attachment buttons ran 6 px out of their grid row — the row wraps; the customer
 * card's private note kept its own fixed width inside the narrower side column — it takes the column's width */
html[data-hq] .bk-s3-acts{display:flex !important;flex-wrap:wrap;gap:8px;align-items:center}
html[data-hq] .pcu-aside textarea,html[data-hq] .pcu-aside input:not([type=checkbox]):not([type=radio]){width:100% !important;max-width:100% !important;box-sizing:border-box}
html[data-hq] .pcu-aside form,html[data-hq] .pcu-aside .panel{min-width:0;max-width:100%}
html[data-hq] .pcu-aside form{grid-template-columns:minmax(0,1fr) !important}

/* the overflow sweep at 1280 px (D-M777): three rows of my Studio pages had column MINIMUMS summing wider than the page once the menu grew
 * (Beta 1055 px, coupons 944 px in 928 px of room; the statistics' five figures in a 507 px column). Below 1440 px the columns may shrink
 * to their content, cells break long codes, the action cells keep their buttons and wrap them; the figures wrap into rows. */
@media (max-width:1439px) and (min-width:1101px){
  html[data-hq] .bt-row{grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,.55fr) minmax(0,1.05fr);gap:12px}   /* same rule: no "auto" track (D-M789) */
  html[data-hq] .cp3-head,html[data-hq] .cp3-row{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.7fr) minmax(0,1.35fr);gap:10px}
}
html[data-hq] .bt-row > *,html[data-hq] .cp3-row > *{min-width:0;overflow-wrap:anywhere}
html[data-hq] .bt-acts,html[data-hq] .cp3-acts{flex-wrap:wrap !important;justify-content:flex-end;gap:6px}
html[data-hq] .la-kpis{grid-template-columns:repeat(auto-fit,minmax(112px,1fr)) !important}

/* the sweep at 1024 px (a tablet held sideways, with the side menu; D-M777): the customer card's side column (320 px) could not hold its
 * rows — below 1180 px the card is one column; "Nuova vendita" kept fixed 296/360/340 px tracks — they shrink, the steps wrap */
@media (max-width:1180px) and (min-width:901px){
  html[data-hq] .pcu-grid{grid-template-columns:minmax(0,1fr) !important}
}
html[data-hq] .pcu-dl > div{grid-template-columns:minmax(0,120px) minmax(0,1fr) !important}
html[data-hq] .pcu-dl dd{min-width:0;overflow-wrap:anywhere}
@media (min-width:901px){html[data-hq] .nv-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) !important}}
html[data-hq] .hq-new-form{grid-template-columns:minmax(0,1fr) !important}
html[data-hq] .nv-steps{flex-wrap:wrap;row-gap:6px}
html[data-hq] .nv-grid > *,html[data-hq] .hq-new-form > *{min-width:0}

/* the phone sweep (390 px, D-M777): the Alerts' selection bar wraps ("Elimina" ran 7 px out); Continuity's "Togli le chiavi" may break its line */
html[data-hq] .al2-selbar{flex-wrap:wrap !important;row-gap:8px}
html[data-hq] .bk-bkt-tools{grid-template-columns:minmax(0,1fr)}
@media (max-width:600px){html[data-hq] .bk-bkt-tools .btn{white-space:normal !important;max-width:100%}}
html[data-hq] .bk-bkt-tools form.inline{margin-left:0 !important;max-width:100%;min-width:0}

/* the Support desk with the wider menu (measured, D-M777): at 1280 px the conversation got 224 px between the inbox and the side column —
 * unusable. The conversation and the side column share a row only from 1500 px; below, the ticket is one column again (the customer, the
 * tools and the AI note above the conversation, as before D-M761), and the inbox is a little narrower */
@media (min-width:1101px) and (max-width:1499px){
  html[data-hq] body:has(.studio-on) .pn-main .tk-desk{grid-template-columns:300px minmax(0,1fr) !important}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel{display:block !important}
  html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-cust,html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-tools,html[data-hq] body:has(.studio-on) .pn-main .tk-detail > .panel > .tk-ai{margin:0 0 12px}
}

/* seen on the Support screenshot: a tab whose count is empty ("Codici errore" with nothing open) showed an empty pill */
html[data-hq] .hqtb .hqtb-tabs > a small:empty,html[data-hq] .hqtb .hqtb-tabs > a em:empty,html[data-hq] .ho-views a small:empty,html[data-hq] .cd-tabs a b:empty{display:none !important}

/* the FRESH picture at 1280 px (D-M777) showed the bar squeezed on a page without tabs: the money broke onto two lines, "SEPA" was cut —
 * the rules that kept them whole left with the two-row change. The money, the pills, TEST, the bell keep their size and one line; the page
 * name may end with "…"; below 1440 px the search folds to its lens (it opens when used) and the operator shows his initial only */
@media (min-width:901px){
  html[data-hq] .hqtb .hqtb-today,html[data-hq] .hqtb .hqtb-duo,html[data-hq] .hqtb .hqtb-env,html[data-hq] .hqtb .hqtb-bell,html[data-hq] .hqtb .hqtb-op{flex-shrink:0}
  html[data-hq] .hqtb .hqtb-today b,html[data-hq] .hqtb .hqtb-duo small,html[data-hq] .hqtb .hqtb-env{white-space:nowrap}
  html[data-hq] .hqtb .hqtb-page{flex:1 1 auto;min-width:90px;margin-right:0}
  html[data-hq] .hqtb .hqtb-page b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (min-width:901px) and (max-width:1439px){
  html[data-hq] .hqtb .hqtb-search{width:96px;transition:width .2s ease;flex-shrink:0}
  html[data-hq] .hqtb .hqtb-search:focus-within{width:240px}
  html[data-hq] .hqtb .hqtb-opn{display:none}
}

/* at 1024 px (a tablet sideways) the bar ran out of room even folded: below 1180 px the test/SEPA pair steps aside and the money drops its
 * label — TEST, the money, the bell and the person always stay */
@media (min-width:901px) and (max-width:1180px){
  html[data-hq] .hqtb .hqtb-duo{display:none}
  html[data-hq] .hqtb .hqtb-today > span{display:none}
}

/* Aurora 5, step 2 — the ⌘K palette in Aurora's clothes (D-M781): glass veil, a card with the petrol accent, the chosen row lit in teal;
 * on the phone it takes the whole screen (the keyboard hides half of it otherwise) */
html[data-hq] .hq-pal{background:rgba(9,20,24,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding-top:11vh;z-index:2147483000;left:0 !important;right:0 !important;inset:0 !important}
html[data-hq] .hq-pal-lens{position:absolute;left:18px;top:17px;width:22px;height:22px;color:#0B6F72;pointer-events:none}
html[data-hq] .hq-pal-lens svg{width:22px;height:22px}
html[data-hq] .hq-pal-card{position:relative;width:min(720px,calc(100vw - 48px));border-top:0;border-radius:20px;box-shadow:0 40px 90px -20px rgba(4,30,32,.55),0 0 0 1px rgba(13,127,128,.14);background:#fff}
html[data-hq] .hq-pal-in{font-size:17px;padding:18px 20px 16px 52px;background:transparent}
html[data-hq] .hq-pal-list{max-height:min(56vh,520px)}
html[data-hq] .hq-pal-it{border-radius:12px;margin:2px 8px}
html[data-hq] .hq-pal-it.sel{background:linear-gradient(90deg,rgba(13,127,128,.12),rgba(13,127,128,.04));color:#0B6F72;box-shadow:inset 3px 0 0 #0D7F80}
html[data-hq] .hq-pal-it i svg{width:18px;height:18px}
html[data-hq] .hq-pal-foot{background:#F6F9F9;border-top:1px solid #E3ECEB}
html[data-hq][data-theme="dark"] .hq-pal-card{background:#151A21;box-shadow:0 40px 90px -20px rgba(0,0,0,.7),0 0 0 1px rgba(127,240,226,.12)}
html[data-hq][data-theme="dark"] .hq-pal-it.sel{background:rgba(127,240,226,.10);color:#7FF0E2;box-shadow:inset 3px 0 0 #7FF0E2}
html[data-hq][data-theme="dark"] .hq-pal-foot{background:#10151B;border-top-color:#232B35}
@media (max-width:900px){
  html[data-hq] .hq-pal{padding:0;align-items:stretch}
  html[data-hq] .hq-pal-card{width:100vw;max-width:none;height:100%;border-radius:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
  html[data-hq] .hq-pal-lens{top:calc(17px + env(safe-area-inset-top,0px))}
  html[data-hq] .hq-pal-list{max-height:none;flex:1 1 auto}
  html[data-hq] .hq-pal-foot{display:none}
}

/* Aurora 5, step 3 — "In diretta" on Today and the island's moment (D-M782). The strip scrolls sideways on wide screens and stacks on the
 * phone; a new row glows once; the moment slides in above the island's tiles and leaves after a few seconds. Less movement asked: no
 * animation at all, the rows and the moment simply appear. */
html[data-hq] .au-live{margin:0 0 18px;padding:14px 16px 12px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 1px #E3ECEB}
html[data-hq] .au-live-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12px !important;letter-spacing:.08em;text-transform:uppercase;color:#0B6F72}
html[data-hq] .au-live-dot{width:8px;height:8px;border-radius:50%;background:#12A594;box-shadow:0 0 0 0 rgba(18,165,148,.55);animation:au-live-dot 2.4s ease-out infinite}
@keyframes au-live-dot{0%{box-shadow:0 0 0 0 rgba(18,165,148,.55)}70%{box-shadow:0 0 0 8px rgba(18,165,148,0)}100%{box-shadow:0 0 0 0 rgba(18,165,148,0)}}
html[data-hq] .au-live-list{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
html[data-hq] .au-ev a{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:baseline;min-width:180px;max-width:280px;padding:9px 12px;border-radius:12px;background:#F6F9F9;box-shadow:inset 0 0 0 1px #E3ECEB;text-decoration:none;color:inherit}
html[data-hq] .au-ev a:hover{box-shadow:inset 0 0 0 1px #9ED3CF;background:#F1F8F7}
html[data-hq] .au-ev time{font:600 11px var(--mono,monospace);color:#6B7280}
html[data-hq] .au-ev b{font:700 14px var(--mono,monospace);justify-self:end;white-space:nowrap}
html[data-hq] .au-ev.pay b{color:#0B7A55}
html[data-hq] .au-ev.refund b{color:#B42318}
html[data-hq] .au-ev span{grid-column:1 / -1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#374151}
html[data-hq] .au-ev.none{font-size:13px;color:#6B7280;padding:6px 2px}
html[data-hq] .au-ev.fresh a{animation:au-fresh 2.2s ease-out 1}
@keyframes au-fresh{0%{box-shadow:inset 0 0 0 2px #12A594,0 0 0 4px rgba(18,165,148,.25)}100%{box-shadow:inset 0 0 0 1px #E3ECEB,0 0 0 0 rgba(18,165,148,0)}}
@media (max-width:900px){html[data-hq] .au-live-list{flex-direction:column}html[data-hq] .au-ev a{max-width:none}}
html[data-hq] .au-moment{display:block;margin:0 12px 10px;padding:10px 12px;border-radius:14px;text-decoration:none;color:#E8FFFB;background:linear-gradient(135deg,rgba(18,165,148,.35),rgba(13,127,128,.22));box-shadow:inset 0 0 0 1px rgba(127,240,226,.35),0 10px 24px -12px rgba(18,165,148,.8);animation:au-moment-in .45s cubic-bezier(.2,.8,.2,1) 1;transition:opacity .6s ease,transform .6s ease}
html[data-hq] .au-moment small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9EEBDF}
html[data-hq] .au-moment b{display:block;font:700 18px var(--mono,monospace);color:#7FF0E2}
html[data-hq] .au-moment span{display:block;font-size:12px;color:#CFEDEA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-hq] .au-moment.out{opacity:0;transform:translateY(-6px)}
@keyframes au-moment-in{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
html[data-hq][data-rail="1"] .au-moment span,html[data-hq][data-rail="1"] .au-moment small{display:none}
html[data-hq][data-theme="dark"] .au-live{background:#151A21;box-shadow:0 0 0 1px #232B35}
html[data-hq][data-theme="dark"] .au-ev a{background:#10151B;box-shadow:inset 0 0 0 1px #232B35}
html[data-hq][data-theme="dark"] .au-ev span{color:#C5CDD8}
html[data-hq][data-theme="dark"] .au-ev time{color:#8B95A3}
html[data-hq][data-theme="dark"] .au-ev.pay b{color:#5EE3B3}
html[data-hq][data-theme="dark"] .au-ev.refund b{color:#FF9B8F}
@media (prefers-reduced-motion:reduce){html[data-hq] .au-live-dot,html[data-hq] .au-ev.fresh a,html[data-hq] .au-moment{animation:none !important;transition:none !important}}

/* Aurora 5, step 4 — "Chiedi all'analista" on Today (D-M783): one line to ask, the answer below with the pages its numbers come from */
html[data-hq] .au-ask{margin:0 0 18px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#0E3B3D,#0B2A2F);color:#E8FFFB;box-shadow:0 18px 40px -26px rgba(4,30,32,.9)}
html[data-hq] .au-ask-f{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
html[data-hq] .au-ask .au-ask-l{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;white-space:nowrap;color:#9EEBDF !important;margin:0}
html[data-hq] .au-ask-l i{font-style:normal;color:#F5C26B}
html[data-hq] .au-ask input[type=text]{margin:0;border-radius:12px;border:1px solid rgba(127,240,226,.28);background:rgba(255,255,255,.06);color:#fff;padding:10px 12px;min-width:0}
html[data-hq] .au-ask input[type=text]::placeholder{color:rgba(232,255,251,.55)}
html[data-hq] .au-ask-out{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(127,240,226,.18);font-size:14px;line-height:1.55}
html[data-hq] .au-ask-out p{margin:0 0 6px}
html[data-hq] .au-ask-out.busy{color:#9EEBDF}
html[data-hq] .au-ask-out.err{color:#FFD2CC;box-shadow:inset 0 0 0 1px rgba(255,155,143,.35)}
html[data-hq] .au-ask-src{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
html[data-hq] .au-ask-src small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9EEBDF}
html[data-hq] .au-ask-src a{color:#7FF0E2;font-weight:650;text-decoration:none}
html[data-hq] .au-ask-note{margin:8px 0 0;font-size:12px;color:rgba(232,255,251,.62) !important}
@media (max-width:700px){html[data-hq] .au-ask-f{grid-template-columns:minmax(0,1fr) auto}html[data-hq] .au-ask-l{grid-column:1 / -1}}

/* the portal's orders pager (D-M784): every order reachable, a hundred a page */
.my-pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:10px 0 0}

/* D-M785 (Aurora step 5, found measuring the LIGHT theme): the page heroes of the light theme are white, but their paragraph and the
 * analytics period tabs kept the pale colours of the old dark hero — 1.6:1 on nine pages (Legal, Keys, Price list, Templates, Newsletter,
 * AI, PayPal, Analytics…), two tabs invisible. Light theme only; the dark theme keeps its own. */
html[data-hq]:not([data-theme="dark"]) .pn-hero p,html[data-hq]:not([data-theme="dark"]) .pn-hero .pn-hero-text p,html[data-hq]:not([data-theme="dark"]) .pn-hero .muted{color:#5B6472 !important}
html[data-hq]:not([data-theme="dark"]) .la-period{background:#EEF3F2 !important;box-shadow:inset 0 0 0 1px #D6E6E3}
html[data-hq]:not([data-theme="dark"]) .la-period .tab{color:#374151 !important}
html[data-hq]:not([data-theme="dark"]) .la-period .tab.active{background:#fff !important;color:#0B6F72 !important}

/* D-M785: the e-mail preview's title bar is slate in the light theme, its "Anteprima dal vivo" subtitle stayed grey — 1.2:1 */
html[data-hq]:not([data-theme="dark"]) .mtp-pv-head .hm-sub{color:#E8EDF4 !important}

/* D-M785: the price list's stage bar is dark (a gradient) while its "Anteprima viva…" caption kept a slate ink — 1.2:1; it reads light on dark */
html[data-hq] .pkd-stage-bar small{color:rgba(232,240,248,.78) !important}

/* D-M785 (Aurora step 5, found once the contrast tool measured gradients too): in the dark theme "--signal" is a LIGHT blue, right for
 * text on dark — but thirty-odd pills, steps, numbers and chips paint it as a BACKGROUND under white text (2.1:1: legal section numbers,
 * the active request filter, the Orders period, the Agenda filter, the new-sale steps…). There the dark theme uses a deeper blue. */
html[data-hq][data-theme="dark"] .le-num,
html[data-hq][data-theme="dark"] .qt-fchip.cur,
html[data-hq][data-theme="dark"] .od-prod .prod-chip,
html[data-hq][data-theme="dark"] .ho-periods a.on,
html[data-hq][data-theme="dark"] .ag2-f a.on,
html[data-hq][data-theme="dark"] .nv-steps li.on,
html[data-hq][data-theme="dark"] .qt-st-btn.cur,
html[data-hq][data-theme="dark"] .la-ai-n,
html[data-hq][data-theme="dark"] .la-fbar b,
html[data-hq][data-theme="dark"] .ob-num,
html[data-hq][data-theme="dark"] .rc3-step i,
html[data-hq][data-theme="dark"] .sl-steps i,
html[data-hq][data-theme="dark"] .steps li.current,
html[data-hq][data-theme="dark"] .pn-links a.active,
html[data-hq][data-theme="dark"] #sl-ofilter .tab.active,
html[data-hq][data-theme="dark"] .zoom-seg button.on,
html[data-hq][data-theme="dark"] .hq-pnav-parts a.on,
html[data-hq][data-theme="dark"] .dp-step.is-now .dp-step-tag,
html[data-hq][data-theme="dark"] .ck-steps li.cur i,
html[data-hq][data-theme="dark"] .fp-steps li.cur i,
html[data-hq][data-theme="dark"] .acc-estep.cur i,
html[data-hq][data-theme="dark"] .pe-gstep.cur i,
html[data-hq][data-theme="dark"] .gg-step.cur > h2 i,
html[data-hq][data-theme="dark"] .ob-rail li.cur i,
html[data-hq][data-theme="dark"] .cpt-left,
html[data-hq][data-theme="dark"] .fb-check,
html[data-hq][data-theme="dark"] .mm-ribbon,
html[data-hq][data-theme="dark"] .of-help,
html[data-hq][data-theme="dark"] .la-ab-head i,
html[data-hq][data-theme="dark"] .rc2-btn,
html[data-hq][data-theme="dark"] .qt-b.out > div,
html[data-hq][data-theme="dark"] .ob-console.on .oc-check,
html[data-hq][data-theme="dark"] .pc-langs .mtp-lang i{background-color:#2D6ADF !important;color:#fff !important}
html[data-hq][data-theme="dark"] .pn-avatar{background-image:linear-gradient(135deg,#2D6ADF,#1E7A48) !important;color:#fff !important}

/* D-M785: the Alerts' "serious" figure kept its light-theme dark red on the dark tile — 2.6:1; in the dark theme it is a light red */
html[data-hq][data-theme="dark"] .bad > b,html[data-hq][data-theme="dark"] .bad b{color:#FF8F80 !important}

/* D-M785: the Outages' duration chips kept light pills with light text in the dark theme — 1.2:1 */
html[data-hq][data-theme="dark"] .ou-chip{background:#232B35 !important;color:#E6EDF5 !important;border-color:#2F3947 !important}
html[data-hq][data-theme="dark"] .ou-chip.on,html[data-hq][data-theme="dark"] .ou-chip[aria-pressed="true"]{background:#2D6ADF !important;color:#fff !important}

/* D-M785, the dark theme's last three (measured): the Settings' portal and payment-host headings kept their dark ink on the dark panel
 * (1.2:1); the Credits page's active product tab became a white pill with white text (1.1:1); the compliance pack's tables kept the
 * paper's dark ink while their rows turned dark (1.0:1) — the pack is a document: in the dark theme its text reads light */
html[data-hq][data-theme="dark"] .myp-title h2{color:#E6EDF5 !important}
html[data-hq][data-theme="dark"] .cr-tab.on{background:#2D6ADF !important;color:#fff !important}
html[data-hq][data-theme="dark"] main:has(.cp-sig){background:#fff !important;color:#10202B !important;border-radius:18px}
html[data-hq][data-theme="dark"] main:has(.cp-sig) :is(table,thead,tbody,tr,td,th,section,.panel,.cp-annex,.cp-purpose){background:transparent !important;background-color:transparent !important;color:#10202B !important;border-color:#D9DEE5 !important}
html[data-hq][data-theme="dark"] main:has(.cp-sig) :is(b,strong,h1,h2,h3,p,li,small,.muted){color:#10202B !important}
html[data-hq][data-theme="dark"] main:has(.cp-sig) a{color:#1D4ED8 !important}   /* the links of the paper (versions, legal pages) */
html[data-hq][data-theme="dark"] main:has(.cp-sig) code{background:#F1F4F8 !important;color:#10202B !important;border-color:#D9DEE5 !important}
html[data-hq][data-theme="dark"] main:has(.cp-sig) .btn{background:#fff !important;background-image:none !important;color:#10202B !important;border:1px solid #C9D2DC !important;box-shadow:none !important}

/* D-M786: on the phone the pack's 40-character fingerprint ran out of its row — a fingerprint may break anywhere */
main:has(.cp-sig) code{overflow-wrap:anywhere;word-break:break-all}

/* D-M786 (found by the overflow tool's new figure check): on the phone the Disputes tiles split "€ 43.275,60" over two lines — a figure
 * keeps one line and scales to its tile */
html[data-hq] :is(.dp3-tiles,.st-kpis) b{white-space:nowrap}
@media (max-width:900px){html[data-hq] :is(.dp3-tiles,.st-kpis) b{font-size:clamp(15px,4.6vw,22px) !important}}
/* >>> DARK TWINS (generated by tools/dark_twins.py — do not edit by hand) */
html[data-theme="dark"] code{background:#33373C}
html[data-theme="dark"] .steps li{background:#33373C}
html[data-theme="dark"] .hint-box{background:#33373D;border:1px solid #2E343C}
html[data-theme="dark"] .mode-option:has(input:checked){background:#33373D}
html[data-theme="dark"] .tabs{background:#32363C}
html[data-theme="dark"] .voucher-table td{border-bottom:1px solid #33373C}
html[data-theme="dark"] .voucher-table tbody tr:hover{background:#171B22}
html[data-theme="dark"] .badge.active{background:#31363D}
html[data-theme="dark"] .badge.used{background:#1C212A;color:#A9B3C0}
html[data-theme="dark"] .hbar-track{background:#32363C}
html[data-theme="dark"] .stat-warn strong{color:#E4B2B2}
html[data-theme="dark"] .loading-overlay{background:rgba(23,27,34,.92)}
html[data-theme="dark"] .ticket{border:0.35px solid #2A3036}
html[data-theme="dark"] .app-footer{color:#A9B3C0}
html[data-theme="dark"] .app-footer a{color:#A9B3C0}
html[data-theme="dark"] .theme-toggle{background:linear-gradient(180deg, #2D353E, #33373E)}
html[data-theme="dark"] .tt-knob{background:radial-gradient(circle at 35% 35%, #353429, #352D1C)}
html[data-theme="dark"] .sw::after{background:#171B22}
html[data-theme="dark"] .mm-active{color:#A9CCB4}
html[data-theme="dark"] .mtp-chip.used{background:#31363D}
html[data-theme="dark"] .mtp-langs{background:#32363C}
html[data-theme="dark"] .mtp-v{background:#353734;color:#C7BC9E}
html[data-theme="dark"] .mtp-v.val{background:#31373A}
html[data-theme="dark"] .login-page{background:radial-gradient(120% 80% at 20% 0%, #30363E 0%, var(--paper) 55%),
                radial-gradient(90% 70% at 100% 100%, #32373B 0%, transparent 60%), var(--paper)}
html[data-theme="dark"] .lg-blob.b1{background:#212F3E}
html[data-theme="dark"] .lg-blob.b2{background:#233431}
html[data-theme="dark"] .lg-blob.b3{background:#2A303E}
html[data-theme="dark"] .lg-submit::after{background:linear-gradient(100deg, transparent, rgba(23,27,34,.35), transparent)}
html[data-theme="dark"] .lg-submit.working::before{border:2px solid rgba(23,27,34,.4)}
html[data-theme="dark"] .uv-copy.ok{color:#A9CCB4}
html[data-theme="dark"] .ob-ticket{background:#171B22;color:#A4AAAE}
html[data-theme="dark"] .ob-ticket small{color:#A9B3C0}
html[data-theme="dark"] .ob-ticket em{color:#A9B3C0}
html[data-theme="dark"] .ob-code{border-top:1px solid #30353A;border-bottom:1px solid #30353A}
html[data-theme="dark"] .ob-story::before{background:radial-gradient(60% 40% at 80% 20%, rgba(33,47,62,.28), transparent 70%), radial-gradient(50% 40% at 20% 90%, rgba(35,52,49,.22), transparent 70%)}
html[data-theme="dark"] .ob-counter{background:rgba(23,27,34,.12)}
html[data-theme="dark"] .ob-story .ob-rail::before{background:rgba(23,27,34,.22)}
html[data-theme="dark"] .ob-story .ob-rail::after{background:#233431}
html[data-theme="dark"] .ob-story .ob-rail li i{background:rgba(23,27,34,.1);border-color:rgba(23,27,34,.35)}
html[data-theme="dark"] .ob-story .ob-rail li.done i{background:#233431;border-color:#233431;color:#A2A8B0}
html[data-theme="dark"] .ob-story .ob-rail li.cur i{background:#171B22;border-color:#171B22;box-shadow:0 0 0 5px rgba(23,27,34,.22)}
html[data-theme="dark"] .art-orbit i{border:1.5px dashed rgba(23,27,34,.35)}
html[data-theme="dark"] .art-orbit i::after{background:#233431;box-shadow:0 0 12px #233431}
html[data-theme="dark"] .art-orbit i:nth-child(2)::after{background:#212F3E;box-shadow:0 0 12px #212F3E}
html[data-theme="dark"] .art-orbit i:nth-child(3)::after{background:#353226;box-shadow:0 0 12px #353226}
html[data-theme="dark"] .art-radar{border:1.5px solid rgba(23,27,34,.28);background:repeating-radial-gradient(circle, transparent 0 34px, rgba(23,27,34,.14) 34px 35px)}
html[data-theme="dark"] .art-sweep{background:conic-gradient(from 0deg, rgba(35,52,49,.55), transparent 70deg, transparent 360deg)}
html[data-theme="dark"] .art-radar b{background:#171B22}
html[data-theme="dark"] .art-radar .dot{background:#233431;box-shadow:0 0 10px #233431}
html[data-theme="dark"] .art-tickets .tk{background:#171B22;border:2px dashed #2E343C}
html[data-theme="dark"] .art-tickets .t3{color:#A4AAAE}
html[data-theme="dark"] .art-tickets .t3::before{background:#30353A}
html[data-theme="dark"] .art-mail .env{background:#171B22}
html[data-theme="dark"] .art-mail .env::after{border-top:60px solid #31363D}
html[data-theme="dark"] .art-done i{background:#353226}
html[data-theme="dark"] .art-done i:nth-child(3){background:#212F3E}
html[data-theme="dark"] .art-done i:nth-child(4){background:#233431}
html[data-theme="dark"] .art-done i:nth-child(5){background:#35292E}
html[data-theme="dark"] .ob-particles i{background:rgba(23,27,34,.55);box-shadow:0 0 12px rgba(35,52,49,.9)}
html[data-theme="dark"] .ob-rail::after{background:linear-gradient(90deg, #233431, #212F3E)}
html[data-theme="dark"] body.ob-testing .art-radar{box-shadow:0 0 0 12px rgba(35,52,49,.08), 0 0 60px rgba(35,52,49,.25)}
html[data-theme="dark"] .ob-ticket::after{background:linear-gradient(115deg, transparent 40%, rgba(23,27,34,.55) 50%, transparent 60%)}
html[data-theme="dark"] .ob-mock{background:#171B22;color:#A8ABB0;border:1px solid #30353A}
html[data-theme="dark"] .mk-title{border-bottom:1px solid #33373C}
html[data-theme="dark"] .mk-label{color:#A9B3C0}
html[data-theme="dark"] .mk-field{border:1px solid #30353A;background:#171B22}
html[data-theme="dark"] .mk-check i{border:1.5px solid #2D3238}
html[data-theme="dark"] .mk-chip{background:#33373C}
html[data-theme="dark"] .pn-top::after{background:linear-gradient(90deg, var(--signal), #2e9e5b, #212F3E)}
html[data-theme="dark"] .pn-hero::before{background:radial-gradient(50% 40% at 85% 20%, rgba(33,47,62,.28), transparent 70%), radial-gradient(40% 40% at 20% 100%, rgba(35,52,49,.22), transparent 70%)}
html[data-theme="dark"] .pn-cta{background:#171B22}
html[data-theme="dark"] .pn-kpi{background:rgba(23,27,34,.08);border:1px solid rgba(23,27,34,.14)}
html[data-theme="dark"] .pm-flow-step{background:rgba(23,27,34,.08);border:1px solid rgba(23,27,34,.14)}
html[data-theme="dark"] .pm-flow-step.on{background:#171B22}
html[data-theme="dark"] .pm-flow-step:hover{background:rgba(23,27,34,.18)}
html[data-theme="dark"] .pm-flow-step.on:hover{background:#171B22}
html[data-theme="dark"] .pe-status{background:rgba(23,27,34,.1);border:1px solid rgba(23,27,34,.18)}
html[data-theme="dark"] .pe-dot{background:#233431;box-shadow:0 0 0 5px rgba(35,52,49,.25)}
html[data-theme="dark"] .pe-status.warn .pe-dot{background:#353226;box-shadow:0 0 0 5px rgba(53,50,38,.25)}
html[data-theme="dark"] .lic-lock{background:linear-gradient(135deg, color-mix(in srgb, var(--signal) 8%, var(--card)), color-mix(in srgb, #353226 14%, var(--card)))}
html[data-theme="dark"] .tk-alert{background:linear-gradient(120deg, color-mix(in srgb, #353226 22%, var(--card)), var(--card))}
html[data-theme="dark"] .tk-chip.question{background:#31363D}
html[data-theme="dark"] .art-shield i{border:2px solid rgba(35,52,49,.5)}
html[data-theme="dark"] .art-shield b{background:rgba(23,27,34,.12)}
html[data-theme="dark"] .ob-reqs li::before{color:#B0DAC1}
html[data-theme="dark"] .ld-mock-bar i:nth-child(2){background:#353226}
html[data-theme="dark"] .ld-mock-bar i:nth-child(3){background:#233431}
html[data-theme="dark"] .ld-ticket{background:#171B22;color:#A4AAAE;border:2px dashed #2E343C}
html[data-theme="dark"] .ld-ticket small{color:#A9B3C0}
html[data-theme="dark"] .ld-steps li{background:rgba(23,27,34,.08);border:1px solid rgba(23,27,34,.14)}
html[data-theme="dark"] .ld-steps i{background:#171B22}
html[data-theme="dark"] .sl-toggle{background:rgba(23,27,34,.12);border:1px solid rgba(23,27,34,.3)}
html[data-theme="dark"] .sl-toggle.on{background:#233431;color:#A2A8B0;border-color:#233431}
html[data-theme="dark"] .sl-check a{background:rgba(23,27,34,.08);border:1px solid rgba(23,27,34,.14)}
html[data-theme="dark"] .sl-check a:hover{background:rgba(23,27,34,.16)}
html[data-theme="dark"] .sl-check i{border:2px solid rgba(23,27,34,.4)}
html[data-theme="dark"] .sl-check li.ok i{background:#233431;border-color:#233431;color:#A2A8B0}
html[data-theme="dark"] .pc-frame{background:#171B22}
html[data-theme="dark"] .cp-kind i{background:#33373C}
html[data-theme="dark"] .pn-target{background:#34373D}
html[data-theme="dark"] .cp-beta-stats{background:#35383A}
html[data-theme="dark"] .cp-beta-kpis > *{background:var(--card, #171B22)}
html[data-theme="dark"] .cp-beta-kpis .full b{color:#E2ABA7}
html[data-theme="dark"] .od-flag.od-flag-beta{background:#353734;color:#CCC09E;border-color:#33342F}
html[data-theme="dark"] .cp-invite-link{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .qt-beta-invite{background:#35383A}
html[data-theme="dark"] .ck-coupon.ok input{background:#33383C}
html[data-theme="dark"] .ck-coupon.err input{background:#1C212A}
html[data-theme="dark"] .ck-invite{background:#353739;border:1px solid #33342F;color:#C0B89E}
html[data-theme="dark"] .ck-coupon-msg.ok{background:#32383B;color:#A9CCB4;border:1px solid #2B3536}
html[data-theme="dark"] .ck-coupon-msg.err{background:#35363B;color:#DCB5B5;border:1px solid #332F34}
html[data-theme="dark"] .an-banner.warn{background:color-mix(in srgb, #353226 18%, var(--card))}
html[data-theme="dark"] .an-banner.promo{background:linear-gradient(120deg, color-mix(in srgb, #ff7b72 12%, var(--card)), color-mix(in srgb, #353226 12%, var(--card)))}
html[data-theme="dark"] .la-period{background:rgba(23,27,34,.1)}
html[data-theme="dark"] .la-period .tab.active{background:#171B22}
html[data-theme="dark"] .la-bar i.c{background:linear-gradient(90deg, #c78b2d, #353226)}
html[data-theme="dark"] .la-bar i.g{background:linear-gradient(90deg, #2e9e5b, #233431)}
html[data-theme="dark"] .la-legend .o{color:#E4B2B2}
html[data-theme="dark"] .la-heat{background:linear-gradient(180deg, #33373D, #171B22)}
html[data-theme="dark"] .la-band span{background:rgba(23,27,34,.7)}
html[data-theme="dark"] .pe-status.neutral{background:rgba(23,27,34,.08)}
html[data-theme="dark"] .uv-copyable.copied{color:#A9CCB4 !important}
html[data-theme="dark"] .rc-logo{background:#171B22}
html[data-theme="dark"] .rc-tile{background:rgba(23,27,34,.1);border:2px solid rgba(23,27,34,.18)}
html[data-theme="dark"] .rc-tile:active,html[data-theme="dark"] .rc-tile.working{background:rgba(23,27,34,.2)}
html[data-theme="dark"] .rc-tile:hover{background:rgba(23,27,34,.16)}
html[data-theme="dark"] .rc-code{background:#171B22;color:#A4AAAE}
html[data-theme="dark"] .rc-btn:not(.primary){background:rgba(23,27,34,.12);border:1px solid rgba(23,27,34,.3)}
html[data-theme="dark"] .rc-timer i{background:#233431}
html[data-theme="dark"] body.rc-page{background:#171B22;color:#E6EAF0}
html[data-theme="dark"] .rc-page.rc-light{background:radial-gradient(120% 90% at 50% 0%, #171B22 0%, #33373D 55%, #31363C 100%);color:#A4AAAE}
html[data-theme="dark"] .rc-light .rc-sub,html[data-theme="dark"] .rc-light .rc-foot{color:#A9B3C0}
html[data-theme="dark"] .rc-light .rc-tile{background:#171B22;color:#A4AAAE;border-color:#2F343B}
html[data-theme="dark"] .rc-light .rc-tile small{color:#A9B3C0}
html[data-theme="dark"] .rc-light .rc-tile:active,html[data-theme="dark"] .rc-light .rc-tile.working{background:#33373D}
html[data-theme="dark"] .rc-light .rc-tile:hover{background:#171B22}
html[data-theme="dark"] .rc-light .rc-logo{border:1px solid #2F343B}
html[data-theme="dark"] .rc-light .rc-result-title{color:#A9CCB4}
html[data-theme="dark"] .rc-light .rc-howto{color:#A9B3C0}
html[data-theme="dark"] .rc-light .rc-btn:not(.primary){background:#171B22;color:#A4AAAE;border-color:#2F343B}
html[data-theme="dark"] .rc-light .rc-timer span{color:#A9B3C0}
html[data-theme="dark"] .rc-wa-btn{background:#133225 !important;border-color:#133225 !important}
html[data-theme="dark"] .rc-theme.light .rc-theme-pv{background:linear-gradient(#171B22, #31363C)}
html[data-theme="dark"] .rc-pv-logo{background:#171B22}
html[data-theme="dark"] .rc-theme.dark .rc-pv-tiles b{background:rgba(23,27,34,.12)}
html[data-theme="dark"] .rc-theme.light .rc-pv-tiles b{background:#171B22;border:1px solid #2F343B}
html[data-theme="dark"] .rc-theme.dark .rc-theme-pv em{background:#171B22;color:#A4AAAE}
html[data-theme="dark"] .rc-stepper input{border:2px solid rgba(23,27,34,.25);background:rgba(23,27,34,.1)}
html[data-theme="dark"] .rc-step{border:2px solid rgba(23,27,34,.25);background:rgba(23,27,34,.1)}
html[data-theme="dark"] .rc-unit span{border:2px solid rgba(23,27,34,.25)}
html[data-theme="dark"] .rc-unit input:checked + span{background:#171B22;color:#A4AAAE;border-color:#171B22}
html[data-theme="dark"] .rc-light .rc-stepper input,html[data-theme="dark"] .rc-light .rc-step,html[data-theme="dark"] .rc-light .rc-unit span{background:#171B22;border-color:#2F343B;color:#A4AAAE}
html[data-theme="dark"] .rc-net{background:rgba(23,27,34,.1);border:1px solid rgba(23,27,34,.2)}
html[data-theme="dark"] .rc-light .rc-net{background:#171B22;border-color:#2F343B}
html[data-theme="dark"] .pw-hint.ok{color:#A9CCB4}
html[data-theme="dark"] .ref-summary b{color:#A9CCB4}
html[data-theme="dark"] .tr-top-btn{background:#171B22 !important;color:#A9CCB4 !important;border-color:#171B22 !important}
html[data-theme="dark"] .lic-on{color:#A9CCB4}
html[data-theme="dark"] .pn-sales-info{background:rgba(23,27,34,.08)}
html[data-theme="dark"] .acc-estep.done{color:#A9CCB4}
html[data-theme="dark"] .rd-sheet{background:#171B22;color:#A4AAAE}
html[data-theme="dark"] .rd-seller small{color:#A9B3C0}
html[data-theme="dark"] .rd-nonfiscal{color:#E4B2B2}
html[data-theme="dark"] .rd-table th{background:#33373D}
html[data-theme="dark"] .rd-table td{border-bottom:1px solid #33373D}
html[data-theme="dark"] .rd-meta{color:#A9B3C0}
html[data-theme="dark"] .rd-footer{color:#A9B3C0}
html[data-theme="dark"] .cp-launch{background:color-mix(in srgb, #353125 12%, var(--card))}
html[data-theme="dark"] .pk-live-tag{background:#16342E;color:#A4AEBA}
html[data-theme="dark"] .pk-row.editing{border-color:#16342E;box-shadow:0 0 0 3px rgba(22,52,46,.25)}
html[data-theme="dark"] .ec-note.bad{color:#E4B2B2}
html[data-theme="dark"] .ec-note.warn{color:#E4CCAA}
html[data-theme="dark"] .tr-topbar.lg-topbar::after{background:linear-gradient(105deg, transparent 40%, rgba(23,27,34,.22) 50%, transparent 60%)}
html[data-theme="dark"] .tr-topbar.lg-topbar .tr-top-btn{background:#171B22 !important;color:color-mix(in srgb, var(--signal) 85%, #E6EAF0) !important;border-color:#171B22 !important}
html[data-theme="dark"] .tr-topbar.lc-topbar .tr-top-btn{background:#171B22 !important;color:#D9C49E !important;border-color:#171B22 !important}
html[data-theme="dark"] .le-state{color:#B0DAC1}
html[data-theme="dark"] .le-tr-warn{color:#E7B4AE}
html[data-theme="dark"] .imp-bar .btn{background:#171B22;color:#CCB5F6;border-color:#171B22}
html[data-theme="dark"] .bk-safe-badge{color:#A9CCB4}
html[data-theme="dark"] .bk-safe-card{background:color-mix(in srgb, var(--signal) 3%, var(--card, #171B22))}
html[data-theme="dark"] .bk-safe-card small{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .lic2-hero{background:color-mix(in srgb, #2e9e5b 6%, var(--card, #171B22))}
html[data-theme="dark"] .lic2-title{color:#A9CCB4}
html[data-theme="dark"] .lic2-upsell .btn{border-color:rgba(23,27,34,.5);background:rgba(23,27,34,.12)}
html[data-theme="dark"] .lic2-upsell .btn.primary.lic2-cta{background:#171B22;color:#A6B9CE;border-color:#171B22}
html[data-theme="dark"] .rc2-live{color:#A9CCB4}
html[data-theme="dark"] .rc2-chips span{background:color-mix(in srgb, var(--signal) 4%, var(--card, #171B22))}
html[data-theme="dark"] .rc2-screen::after{background:linear-gradient(105deg, transparent, rgba(23,27,34,.07), transparent)}
html[data-theme="dark"] .rc2-codebox em{border:1.5px dashed rgba(35,45,62,.65)}
html[data-theme="dark"] .rc2-bar{background:rgba(35,45,62,.18)}
html[data-theme="dark"] .rc2-bar i{background:linear-gradient(90deg, #3a8dff, #21313E)}
html[data-theme="dark"] .rc2-dot{background:#2A3037}
html[data-theme="dark"] .rc3-step{background:color-mix(in srgb, var(--signal) 3%, var(--card, #171B22))}
html[data-theme="dark"] .rc3-step small{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .rc3-rules li{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .panel > h2::before{background:linear-gradient(180deg, var(--signal), #21313E)}
html[data-theme="dark"] .tpl-live{color:#A9CCB4}
html[data-theme="dark"] .fpw-checks li.ok{color:#A9CCB4}
html[data-theme="dark"] .pn-sandbox-bar{color:#B4AD9F;background:repeating-linear-gradient(-45deg, #353121 0 22px, #342D15 22px 44px)}
html[data-theme="dark"] .lg-stat.ok{color:#A9CCB4}
html[data-theme="dark"] .lg-stat.warn{color:#D3C1A5}
html[data-theme="dark"] .pn-top::after{background:linear-gradient(90deg, var(--signal), #21313E 45%, transparent 80%)}
html[data-theme="dark"] .pw2-screen > i{background:rgba(35,45,62,.22)}
html[data-theme="dark"] .pw2-app{background:#171B22}
html[data-theme="dark"] .revoke-one{color:#DBAEAE;background:#35353A;border:1px solid #332F34}
html[data-theme="dark"] .cpt-mid span{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .od-amount.neg{color:#E4B2B2}
html[data-theme="dark"] .od-amount.pos{color:#A9C7B4}
html[data-theme="dark"] .in-warn{color:#E4D3A8}
html[data-theme="dark"] .in-exp.soon{color:#E4D3A8}
html[data-theme="dark"] .in-exp.neg{color:#E4B2B2}
html[data-theme="dark"] .ck-spec-more{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .ck-spec-list li b{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .ck-accept-all{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] #ck2-cty-list .cty-ok{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .of-new > summary{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .of-badge{color:#A5D2CE;background:#31373C}
html[data-theme="dark"] .pn-menu a.on::after{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .pp-guard{border:1px solid #32312B;background:#171B22}
html[data-theme="dark"] .rc-wifi-hero{background:rgba(23,27,34,.09);border:1px solid rgba(23,27,34,.22);box-shadow:0 14px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(23,27,34,.15)}
html[data-theme="dark"] .rc-page.rc-light .rc-wifi-hero{background:#171B22;border-color:#2F343B}
html[data-theme="dark"] .rc-page.rc-light .rc-wifi-hero small{color:#A2C8EE}
html[data-theme="dark"] .rc-lic-name{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .rc-lic-note{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .rc-lic-auto{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .rc-wifi-badge{background:radial-gradient(circle at 30% 25%, rgba(23,27,34,.28), rgba(23,27,34,.06));border:1px solid rgba(23,27,34,.3);box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(23,27,34,.25)}
html[data-theme="dark"] .rc-page.rc-light .rc-wifi-badge{background:radial-gradient(circle at 30% 25%, #32373D, #2F353D);border-color:#2B323B;color:#A2C8EE}
html[data-theme="dark"] .tm-note-page{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .ld-top{background:color-mix(in srgb, var(--paper, #171B22) 84%, transparent);border-bottom:1px solid var(--line, #31353B)}
html[data-theme="dark"] .ld-nav a.cur{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .lg-mode.off{border-color:color-mix(in srgb, #233431 45%, var(--line));background:color-mix(in srgb, #233431 7%, var(--card))}
html[data-theme="dark"] .qt-composer-head{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .pr-msg.out .pr-att{border-color:rgba(23,27,34,.35);background:rgba(23,27,34,.12)}
html[data-theme="dark"] .pcu-danger-h{color:#E4B2B2}
html[data-hq][data-theme="dark"] .pn-sandbox-bar{background:#342E20;color:#B4B0A2}
html[data-hq][data-theme="dark"] .pn-sandbox-bar a,html[data-hq][data-theme="dark"] .pn-sandbox-bar b{color:#B4B0A2}
html[data-hq][data-theme="dark"] .hq-rev-card{border-left:4px solid #342E20}
html[data-hq][data-theme="dark"] .hq-rev-card i.neg{color:#E2ADAA}
html[data-hq][data-theme="dark"] tbody tr:hover{background:#1C212A}
html[data-hq][data-theme="dark"] .pn-kpi{background:rgba(23,27,34,.05)}
html[data-hq][data-theme="dark"] .pn-kpi:hover{background:rgba(23,27,34,.09)}
html[data-hq][data-theme="dark"] .hqtb{background:rgba(23,27,34,.86)}
html[data-hq][data-theme="dark"] .hqtb-search input{background:#33373D}
html[data-hq][data-theme="dark"] .lg-blob.b3{background:#213435}
html[data-hq][data-theme="dark"] .login-page .lg-card{background:#171B22}
html[data-hq][data-theme="dark"] .lg-head .muted{color:#A9B3C0}
html[data-theme="dark"] .pn-sandbox-bar.sb-stripe{background:repeating-linear-gradient(135deg, #32323E 0 14px, #2F2D3E 14px 28px);color:#B5A1C4}
html[data-theme="dark"] .hq-dir-lights li.bad{background:#1C212A}
html[data-theme="dark"] .hq-dir-lights li.warn{background:#35383A}
html[data-theme="dark"] .hq-al-list li.lv-bad{background:#1C212A}
html[data-theme="dark"] .hq-al-list li.lv-info{background:#33373D}
html[data-hq][data-theme="dark"] .hqtb-search input{background:rgba(23,27,34,.09);border:1px solid rgba(23,27,34,.14)}
html[data-hq][data-theme="dark"] .hqtb-search input:focus{background:rgba(23,27,34,.12)}
html[data-hq][data-theme="dark"] a:hover{color:#E6EAF0}
html[data-hq][data-theme="dark"] .voucher-table td,html[data-hq][data-theme="dark"] table.cards td{border-bottom:1px solid #31363C}
html[data-hq][data-theme="dark"] tbody tr:nth-child(even){background:#171B22}
html[data-hq][data-theme="dark"] tbody tr:hover{background:#33373D}
html[data-hq][data-theme="dark"] .btn.danger-outline{color:#D4A9A9}
html[data-hq][data-theme="dark"] .badge.ok,html[data-hq][data-theme="dark"] .badge.active{background:#31373A;color:#A9C7B5}
html[data-hq][data-theme="dark"] .badge.used{background:#353737;color:#CCBBA0}
html[data-hq][data-theme="dark"] .badge.gone{background:#353539;color:#D4A9A9}
html[data-hq][data-theme="dark"] input,html[data-hq][data-theme="dark"] select,html[data-hq][data-theme="dark"] textarea{background:#171B22}
html[data-hq][data-theme="dark"] .hqtb-env{border:1px solid rgba(23,27,34,.18)}
html[data-hq][data-theme="dark"] .hqtb-env i{background:#1B322C;box-shadow:0 0 0 3px rgba(27,50,44,.18)}
html[data-hq][data-theme="dark"] .hqtb-env.test{border-color:rgba(52,46,32,.6)}
html[data-hq][data-theme="dark"] .hqtb-env.test i{background:#342E20;box-shadow:0 0 0 3px rgba(52,46,32,.22)}
html[data-hq][data-theme="dark"] .pn-hero{border:1px solid rgba(23,27,34,.06)}
html[data-hq][data-theme="dark"] .pe-status{background:rgba(23,27,34,.06);border:1px solid rgba(23,27,34,.1)}
html[data-hq][data-theme="dark"] .pe-status.ok .pe-dot{background:#1B322C}
html[data-hq][data-theme="dark"] .pe-status.warn .pe-dot{background:#342E20}
html[data-hq][data-theme="dark"] .voucher-table td code,html[data-hq][data-theme="dark"] table.cards td code{background:#33373D}
html[data-hq][data-theme="dark"] .badge.ok,html[data-hq][data-theme="dark"] .badge.active{background:#31373A}
html[data-hq][data-theme="dark"] .badge.used{background:#353738}
html[data-hq][data-theme="dark"] .badge.gone{background:#353439}
html[data-hq][data-theme="dark"] .pn-hero-ico{background:rgba(23,27,34,.06)}
html[data-hq][data-theme="dark"] .hq-log tr.bad td{background:#35363B}
html[data-hq][data-theme="dark"] .hq-log tr.warn code{color:var(--hq-gold-ink, #D3C6A7)}
html[data-theme="dark"] .pp-guard.open{border-color:#253231;background:#33383C}
html[data-theme="dark"] .pp-guard-ok{color:#A9C7B5}
html[data-theme="dark"] .ai-privacy{background:#171B22}
html[data-theme="dark"] .ai-demo-out{background:#33373D}
html[data-theme="dark"] .hq-home-zero{background:#31373A;color:#A9C7B5}
html[data-theme="dark"] .hq-exp li span.bad{color:#E2ADAA}
html[data-theme="dark"] .hq-exp li span.warn{color:#CCBBA2}
html[data-theme="dark"] .hq-home-ai{background:rgba(23,27,34,.08)}
html[data-theme="dark"] .hq-lo-amt{color:#A9C7B5}
html[data-theme="dark"] .hq-lo li.neg .hq-lo-amt{color:#E2ADAA}
html[data-theme="dark"] .hq-tl-it.warn b{color:#CCBBA2}
html[data-theme="dark"] .hq-tl-it.bad b{color:#E2ADAA}
html[data-theme="dark"] .hq-tl-it.ok b{color:#A9C7B5}
html[data-theme="dark"] .hq-peek{background:#171B22}
html[data-theme="dark"] .pk-supp{color:#E2ADAA}
html[data-theme="dark"] .pk-b.ok{background:#31373A;color:#A9C7B5}
html[data-theme="dark"] .pk-b.warn{background:#353738;color:#CCBBA2}
html[data-theme="dark"] .pk-b.bad{background:#35353A;color:#E2ADAA}
html[data-theme="dark"] .hq-peek-facts .warn{color:#CCBBA2}
html[data-theme="dark"] .ag-pill{background:color-mix(in srgb, var(--hq-gold) 18%, #171B22)}
html[data-theme="dark"] .ag-pill.auto{background:#31363D}
html[data-theme="dark"] .uv-dp{background:#171B22}
html[data-theme="dark"] .uv-dp-grid button:hover{background:color-mix(in srgb, var(--hq-gold) 18%, #171B22)}
html[data-theme="dark"] .uv-dp-grid button.sel.today::after{background:#171B22}
html[data-theme="dark"] .uv-dp-pre button:hover{background:#171B22}
html[data-theme="dark"] .ag-st{background:color-mix(in srgb, var(--hq-gold) 16%, #171B22)}
html[data-theme="dark"] .ag-it.done .ag-st{background:#31373A;color:#A9C7B5}
html[data-theme="dark"] .ag-it.late .ag-st{background:#35353A}
html[data-theme="dark"] .ag-body small i{color:#A9C2DE}
html[data-theme="dark"] .ag-b{background:#171B22}
html[data-theme="dark"] .ag-b-ok{background:#31373A;color:#A9C7B5;border-color:#2E3538}
html[data-theme="dark"] .ag-b-del{color:#E2ADAA}
html[data-theme="dark"] .lg2-fic.bad{color:#E2ADAA}
html[data-theme="dark"] .tk-imp-blocking{background:#35353A;border-color:#332D32;color:#D3A9A9}
html[data-theme="dark"] .tk-imp-limited{background:#353737;border-color:#33312B;color:#CCBD9E}
html[data-theme="dark"] .qt-heat-dot{background:#2D3239}
html[data-theme="dark"] .h-warm .qt-heat-dot{background:#322D16}
html[data-theme="dark"] .qt-heat-b.on .qt-heat-dot{box-shadow:0 0 0 2px rgba(23,27,34,.6)}
html[data-theme="dark"] .qt-card.pot-warm{background:color-mix(in srgb, #322D16 9%, var(--card))}
html[data-theme="dark"] .of-card{background:#171B22;color:#A4AAAE}
html[data-theme="dark"] .of-card-head{color:#A9B3C0}
html[data-theme="dark"] .of-card-head b{color:#A4AAAE}
html[data-theme="dark"] .of-card-badge{background:#33373C;color:#C9D1DB}
html[data-theme="dark"] .of-card.st-paid .of-card-badge{background:#30383A;color:#A6C4B2}
html[data-theme="dark"] .of-card.st-cancelled .of-card-badge,html[data-theme="dark"] .of-card.st-expired .of-card-badge{background:#353439;color:#D8A8A8}
html[data-theme="dark"] .of-card-amount{color:#A9C2DE}
html[data-theme="dark"] .of-card-amount small{color:#A9B3C0}
html[data-theme="dark"] .of-card-facts span{background:#33373D;border:1px solid #31353B}
html[data-theme="dark"] .of-card-renew{color:#A4AAAE}
html[data-theme="dark"] .of-card-conf{color:#A9B3C0}
html[data-theme="dark"] .nl-check li.ok{color:#A6C4B2}
html[data-theme="dark"] .nl-check li.warn{color:#CCBD9E}
html[data-theme="dark"] .nl-check li.bad{color:#D8A8A8}
html[data-theme="dark"] .nl-check.has{border-color:#33312B;background:#171B22}
html[data-theme="dark"] .nl-img-th{background:#33373C center/cover no-repeat}
html[data-theme="dark"] .mtp-html iframe{background:#171B22}
html[data-theme="dark"] .br-late{color:#E9B0B0}
html[data-theme="dark"] .ak-secret{background:#171B22}
html[data-theme="dark"] .ak-bad td{background:#171B22}
html[data-theme="dark"] .dp-due-ok{color:#A9C7B4}
html[data-theme="dark"] .dp-due-warn{color:#C7BB9E}
html[data-theme="dark"] .dp-due-bad{color:#D3AAAA}
html[data-theme="dark"] .dp-card.is-claim .dp-reason{color:#D3AAAA}
html[data-theme="dark"] .od-dispute-inquiry{color:#C7BB9E}
html[data-theme="dark"] .od-dispute-lost{background:#353539;color:#D4A9A9}
html[data-theme="dark"] .wipe-blocker{color:#D3AAAA}
html[data-theme="dark"] .wipe-keep{color:#A9C7B4}
html[data-theme="dark"] .badge.bad{color:#D3AAAA}
html[data-theme="dark"] .sg2-aruba summary{color:var(--signal-ink, #A9C2DE)}
html[data-theme="dark"] .bk-drill-box.ok strong{color:#AAC7B7}
html[data-theme="dark"] .bk-drill-box.bad strong{color:#D4ADAD}
html[data-theme="dark"] .od-flag-warn{color:#DBC19E;background:rgba(52,43,31,.14)}
html[data-theme="dark"] .ck2-cf-hint.ok{color:#AAC7B7}
html[data-theme="dark"] .ck2-cf-hint.bad{color:#D4ADAD}
html[data-theme="dark"] .ck2-cf-hint.warn{color:#D3C09E}
html[data-theme="dark"] .dp-news{color:#C7BB9E}
html[data-theme="dark"] .uv-count.bad{color:#E4B2B2}
html[data-theme="dark"] .pn-page .ak-secret{border-color:#32312B}
html[data-hq][data-theme="dark"] .hqmb-btn:active{background:rgba(23,27,34,.12)}
html[data-hq][data-theme="dark"] .hq-log.cards tr.bad{background:#35363B}
html[data-theme="dark"] .hq-ptabs-name{color:#A8ACB0;border-right:1px solid #30353B}
html[data-theme="dark"] .hq-ptab{border:1px solid #30353B;background:#171B22;color:#A9B3C0}
html[data-theme="dark"] .hq-ptab:hover{background:#33373D;color:#A8ACB0}
html[data-theme="dark"] .hq-ptab-other{color:#A9B3C0}
html[data-hq][data-theme="dark"] .hq-ptabs{background:#34373D}
html[data-theme="dark"] .hq-ptabs-sep{background:#2F3339}
html[data-theme="dark"] .hq-hub-h{color:#A9B3C0}
html[data-theme="dark"] .hq-hub-card{background:#171B22;border:1px solid #30353B;color:#A8ACB0}
html[data-theme="dark"] .hq-hub-card:hover{border-color:#2D3239}
html[data-theme="dark"] .hq-hub-card::before{background:#2D3239}
html[data-theme="dark"] .hq-hub-body small{color:#A9B3C0}
html[data-theme="dark"] .hq-ptabs{background:#171B22;border-bottom:1px solid #31353B}
html[data-hq][data-theme="dark"] .hq-ptabs{background:#171B22}
html[data-theme="dark"] .hq-ptabs-name{color:#A9B3C0}
html[data-theme="dark"] .hq-ptab{color:#A9B3C0}
html[data-theme="dark"] .hq-ptab:hover{color:#A8ACB0}
html[data-theme="dark"] .hq-ptab.on{color:#A8ACB0}
html[data-theme="dark"] .hq-ptab-other{border:1px dashed #2D3239}
html[data-theme="dark"] .pt-chip{background:#33373D;border:1px solid #30353B;color:#A8ACB0}
html[data-theme="dark"] .pt-chip.ok{background:#32373B;border-color:#2B3536;color:#A9C7B6}
html[data-theme="dark"] .pt-chip.warn{background:#353739;border-color:#33332F;color:#CCC0A1}
html[data-theme="dark"] .pt-chip.bad{background:#35363B;border-color:#332D32;color:#D4ABAB}
html[data-theme="dark"] .pt-switch{border-top:1px solid #33373C}
html[data-theme="dark"] .pt-switch-ui{background:#2D3239}
html[data-theme="dark"] .pt-switch-ui::after{background:#171B22}
html[data-theme="dark"] .pt-switch-txt small{color:#A9B3C0}
html[data-theme="dark"] .pt-savebar{background:rgba(23,27,34,.92);border:1px solid #30353B}
html[data-hq][data-theme="dark"] .voucher-table tbody tr:hover{background:#171B22}
html[data-hq][data-theme="dark"] .hq-skel{background:linear-gradient(90deg,#33373C 25%,#171B22 50%,#33373C 75%)}
html[data-theme="dark"] .hq-hero-kpi{background:rgba(23,27,34,.08);border:1px solid rgba(23,27,34,.14)}
html[data-theme="dark"] .hq-hero-kpi:hover{background:rgba(23,27,34,.13);border-color:rgba(23,27,34,.3)}
html[data-theme="dark"] .hq-hero-kpi::after{background:rgba(23,27,34,.06)}
html[data-theme="dark"] .pu-kpi{background:#171B22;border:1px solid #30353B;color:#A8ACB0}
html[data-theme="dark"] .pu-kpi::before{background:#2D3239}
html[data-theme="dark"] .pu-kpi small{color:#A9B3C0}
html[data-theme="dark"] .pu-rows .pu-cust::before{background:#2D3239}
html[data-theme="dark"] .hq-sheet{background:#34373D}
html[data-theme="dark"] .hq-sheet-h{background:#171B22;border-bottom:1px solid #31353B}
html[data-theme="dark"] .hq-sheet iframe{background:#34373D}
html[data-theme="dark"] .od-kpi{background:#171B22;border:1px solid #30353B;color:#A8ACB0}
html[data-theme="dark"] .od-kpi::before{background:#2D3239}
html[data-theme="dark"] .od-kpi small{color:#A9B3C0}
html[data-theme="dark"] .tabs.seg{background:#33373C;border:1px solid #30353B}
html[data-theme="dark"] .tabs.seg .tab{color:#A9B3C0}
html[data-theme="dark"] .tabs.seg .tab.active{background:#171B22;color:#A8ACB0}
html[data-theme="dark"] #tk-list .tk-item::before{background:#2D3239}
html[data-theme="dark"] .lg2-kpis > div{border:1px solid #30353B}
html[data-theme="dark"] .lg2-kpis > div::before{background:#2D3239}
html[data-theme="dark"] .rc-kpi{background:#171B22;border:1px solid #30353B}
html[data-theme="dark"] .rc-kpi::before{background:#2D3239}
html[data-theme="dark"] .rc-kpi small{color:#A9B3C0}
html[data-theme="dark"] .ag-kpi,html[data-theme="dark"] .al-kpi{background:#171B22;border:1px solid #30353B;color:#A8ACB0}
html[data-theme="dark"] .ag-kpi::before,html[data-theme="dark"] .al-kpi::before{background:#2D3239}
html[data-theme="dark"] .ag-kpi small,html[data-theme="dark"] .al-kpi small{color:#A9B3C0}
html[data-theme="dark"] .ag-cells .ag-cell:hover{background:#171B22}
html[data-theme="dark"] .hq-al-fam{background:#33373C;border:1px solid #30353B}
html[data-theme="dark"] .hq-al-fam a{color:#A9B3C0}
html[data-theme="dark"] .hq-al-fam a.on{background:#171B22;color:#A8ACB0}
html[data-theme="dark"] .hq-al-list li::before{background:#2D3239}
html[data-theme="dark"] .hq-al-list li:hover{background:#171B22}
html[data-theme="dark"] .ex-row td:first-child{border-left:4px solid #2D3239}
html[data-theme="dark"] .pn-page .ak-key::before{background:#2D3239}
html[data-hq][data-theme="dark"] .bk-kpis > div{border:1px solid #30353B}
html[data-theme="dark"] .pu-kpi i,html[data-theme="dark"] .od-kpi i,html[data-theme="dark"] .rc-kpi i,html[data-theme="dark"] .ag-kpi i,html[data-theme="dark"] .al-kpi i{color:#A9B3C0}
html[data-theme="dark"] .hq-todo i svg.hqi{color:#A9B3C0}
html[data-theme="dark"] .hq-todo li.bad i svg.hqi{color:#EFB8B8}
html[data-theme="dark"] .hq-todo li.warn i svg.hqi{color:#E4D1A2}
html[data-hq][data-theme="dark"] .hq-ptabs .hq-ptab-other{background:#171B22;box-shadow:-14px 0 14px -6px #171B22}
html[data-theme="dark"] .hq-hub-ico .hqi{color:#A8ACB0}
html[data-theme="dark"] .hq-hub-card.ok .hq-hub-ico .hqi{color:#A9C7B5}
html[data-theme="dark"] .hq-hub-card.warn .hq-hub-ico .hqi{color:#E4D1A2}
html[data-theme="dark"] .hq-hub-card.bad .hq-hub-ico .hqi{color:#E4B2B2}
html[data-hq][data-theme="dark"] .pc-langs{background:#33373C;border:1px solid #30353B}
html[data-hq][data-theme="dark"] .pc-langs .mtp-lang.on,html[data-hq][data-theme="dark"] .pc-langs .mtp-lang[aria-current]{background:#171B22;color:#A8ACB0}
html[data-hq][data-theme="dark"] .panel h2 .hqi-h,html[data-hq][data-theme="dark"] h2 .hqi-h{color:#A9B3C0}
html[data-hq][data-theme="dark"] h2 .hqi-t,html[data-hq][data-theme="dark"] h3 .hqi-t{color:#A9B3C0}
html[data-hq][data-theme="dark"] .badge.used{color:#D3BE9E;background:#353736}
html[data-hq][data-theme="dark"] .tk-prod{background:#33373C;color:#BBBFC9}
html[data-theme="dark"] .ck2-profiles{background:#1C212A;border:1px solid #30353B}
html[data-theme="dark"] .ck2-profiles label{color:#BBBFC9}
html[data-theme="dark"] .ck2-profiles select{border:1px solid #30353B;background:#171B22}
html[data-hq][data-theme="dark"] .pcu-bp{background:#171B22;border:1px solid #30353B}
html[data-theme="dark"] .pkd-seg{background:rgba(23,27,34,.12)}
html[data-theme="dark"] .pkd-seg button.on{background:#171B22;color:#A4AAAE}
html[data-theme="dark"] .pkd-row.editing{border-color:#16342E;box-shadow:0 0 0 3px rgba(22,52,46,.25)}
html[data-theme="dark"] .pkd-row-facts em{color:#A4CEC7}
html[data-theme="dark"] .pkd-sw i{border:2px solid #171B22;background:#313337}
html[data-theme="dark"] .pkd-sw-gold i{background:linear-gradient(120deg, #c99a2e, #302E23)}
html[data-theme="dark"] .pkd-sw-none i{background:#171B22}
html[data-theme="dark"] .pkd-sw-auto i{background:conic-gradient(#c99a2e, #171B22, #c99a2e)}
html[data-theme="dark"] .pkd-calc{background:#33373C}
html[data-theme="dark"] .pkd-calc b{color:#A4CEC7}
html[data-theme="dark"] .pkd-tabs [role=tab] i{background:#302E23}
html[data-theme="dark"] .pkd-menu button:hover{background:#33373D}
html[data-theme="dark"] .cpd-tabs{background:#33373C}
html[data-theme="dark"] .cpd-sum{background:#171B22;color:#A9ABB0}
html[data-theme="dark"] .cpd-sum-head{border-bottom:1px solid #313337}
html[data-theme="dark"] .cpd-eyebrow{color:#A9B3C0}
html[data-theme="dark"] .cpd-line{color:#A9B3C0}
html[data-theme="dark"] .cpd-line b{color:#A9ABB0}
html[data-theme="dark"] .cpd-coupon code{background:#353739;color:#D3C4A6}
html[data-theme="dark"] .cpd-total{border-top:1px dashed #313337}
html[data-theme="dark"] .cpd-chips span{background:#323539;color:#A9B3C0}
html[data-theme="dark"] .cpd-desc{color:#A9B3C0}
html[data-theme="dark"] .cpk-glyph{background:#33373C}
html[data-theme="dark"] .pkd-src{border-left:2px solid #302E23}
html[data-theme="dark"] .hq-tbl th,html[data-theme="dark"] .hq-tbl td{border-bottom:1px solid var(--line, #2A313C)}
html[data-theme="dark"] .hq-tbl th{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .rc-ai{background:rgba(23,27,34,.06)}
html[data-theme="dark"] .rc-ai-row input{border:1px solid rgba(23,27,34,.18)}
html[data-theme="dark"] .rc-ai-answer{background:rgba(23,27,34,.10)}
html[data-theme="dark"] .badge.ok{background:#30373B;color:#AACCC6}
html[data-theme="dark"] .badge.bad{background:#353439;color:#D9AEAA}
html[data-theme="dark"] .bk-s3-form label span{color:var(--hq-muted, #A9B3C0)}
html[data-theme="dark"] .bk-probe{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-s3-pill{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-s3-tools{border-top:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-probe{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .cr-help{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .an-banner.danger b{color:#D4AAAA}
html[data-theme="dark"] .le-portal-pub{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .st-kpis > div{border:1px solid var(--hq-line, #30353B)}
html[data-hq][data-theme="dark"] .hq-tbl thead th{background:var(--card, #171B22)}
html[data-theme="dark"] .ou-form textarea{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .ou-target .ou-seg{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .ou-target .ou-opt + .ou-opt{border-left:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .lgx-cover{background:radial-gradient(120% 140% at 0% 0%, rgba(47,109,246,.16), transparent 55%), radial-gradient(90% 120% at 100% 20%, rgba(201,154,46,.18), transparent 55%), var(--card, #171B22);border:1px solid var(--line, #31353B)}
html[data-theme="dark"] .lgx-kicker{color:#E1D1AD}
html[data-theme="dark"] .lgx-meta{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .lgx-tabs a{border:1px solid var(--line, #31353B);color:var(--ink, #A5A8AF);background:var(--card, #171B22)}
html[data-theme="dark"] .lgx-index{border:1px solid var(--line, #31353B);background:var(--card, #171B22)}
html[data-theme="dark"] .lgx-index b{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .lgx-index a{color:var(--ink, #A5A8AF)}
html[data-theme="dark"] .lgx-doc{border:1px solid var(--line, #31353B);background:var(--card, #171B22)}
html[data-theme="dark"] .lgx-sec + .lgx-sec{border-top:1px solid var(--line, #31353B)}
html[data-theme="dark"] .lgx-n{color:#E1D1AD}
html[data-theme="dark"] .lgx-sec p{color:var(--ink, #A5A8AF)}
html[data-theme="dark"] .lgx-foot{color:var(--ink-soft, #A9B3C0)}
html[data-theme="dark"] .ag-b-offer{color:#CCC0A5}
html[data-theme="dark"] .ag-b-offer{color:#CCC0A5}
html[data-theme="dark"] .ou-drop{background:var(--card, #171B22);border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .ou-picked{color:#AAD9D3}
html[data-theme="dark"] .ou-when input[type=date],html[data-theme="dark"] .ou-when input[type=time]{border:1px solid var(--hq-line, #30353B);background:var(--card, #171B22)}
html[data-theme="dark"] .ou-chip{border:1px solid var(--hq-line, #30353B);background:var(--paper, #171B22)}
html[data-theme="dark"] .bk-src{background:var(--paper, #33373D)}
html[data-theme="dark"] .bk-src-spaces{color:#B0C8FC}
html[data-theme="dark"] .bk-src-drive{color:#AAD9D3}
html[data-theme="dark"] .dr-cell{background:var(--paper, #33373C)}
html[data-theme="dark"] .dr-cell.none{background:var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-all-card{border:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .au-table td{border-top:1px solid var(--line, #31353B)}
html[data-theme="dark"] .au-on .au-toggle span{color:#AAD9D3}
html[data-theme="dark"] .au-off .au-toggle span{color:#E4B2B2}
html[data-theme="dark"] .au-off-text{color:#CCC0A5}
html[data-theme="dark"] .au-opts{background:var(--panel-2, #171B22)}
html[data-theme="dark"] .au-sum{background:var(--panel, #171B22);border:1px solid var(--line, #31353B)}
html[data-theme="dark"] .au-sum span{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .au-sum-on b{color:#AAD9D3}
html[data-theme="dark"] .au-sum-off b{color:#E4B2B2}
html[data-theme="dark"] .au-sum-always b{color:#A9B3C0}
html[data-theme="dark"] .au-group{color:#D3C6AA}
html[data-theme="dark"] .au-card{border:1px solid var(--line, #31353B);border-left:5px solid #2D3238;background:var(--panel, #171B22)}
html[data-theme="dark"] .au-card.is-off{background:color-mix(in srgb, var(--panel, #171B22) 92%, #b93434 8%)}
html[data-theme="dark"] .au-sw-track{background:#2A313C}
html[data-theme="dark"] .au-sw-track::after{background:#171B22}
html[data-theme="dark"] .is-on .au-sw-text{color:#AAD9D3}
html[data-theme="dark"] .is-off .au-sw-text{color:#E4B2B2}
html[data-theme="dark"] .au-pill-always{background:#32363C;color:#A9B3C0}
html[data-theme="dark"] .au-pill-default{background:#353737;color:#CCC0A5}
html[data-theme="dark"] .au-risk-money{color:#D3C6AA}
html[data-theme="dark"] .au-risk-customer{color:#AEC7E1}
html[data-theme="dark"] .au-risk-ops{color:#A9B3C0}
html[data-theme="dark"] .au-off-text{color:#CCC0A5}
html[data-theme="dark"] .au-opts-box summary{color:#AEC7E1}
html[data-theme="dark"] .au-opts-box summary small{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .au-opts{background:var(--panel-2, #171B22)}
html[data-theme="dark"] .au-opt small{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .au-card-f{color:var(--muted, #A9B3C0);border-top:1px dashed var(--line, #31353B)}
html[data-theme="dark"] .au-save{background:var(--panel, #171B22);border:1px solid var(--line, #31353B)}
html[data-theme="dark"] .au-mass{color:#CCC0A5}
html[data-theme="dark"] .oc-table td{border-top:1px solid var(--line, #31353B)}
html[data-theme="dark"] .oc-ok td b{color:#AAD9D3}
html[data-theme="dark"] .oc-todo td b{color:#CCC0A5}
html[data-theme="dark"] .oc-held-row{border-top:1px solid var(--line, #31353B)}
html[data-theme="dark"] .rlink-body .rlink-row code{background:var(--bg3, #33373C)}
html[data-theme="dark"] .chip-cr-low{background:#35353A !important;color:#E4B2B2 !important}
html[data-theme="dark"] .ck-top-secure{color:#AAD9D3;background:#31373C}
html[data-theme="dark"] .cpk-card{border:1px solid var(--line, #31353B);background:var(--panel, #171B22)}
html[data-theme="dark"] .cpk-credits b{color:#B0C8FC}
html[data-theme="dark"] .cpk-pill-on{background:#31373C;color:#AAD9D3}
html[data-theme="dark"] .cpk-pill-off{background:#33373D;color:#A9B3C0}
html[data-theme="dark"] .cpk-pill-feat{background:#353737;color:#CCC0A5}
html[data-theme="dark"] .cpk-facts{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .cpk-facts li.ok{color:#AAD9D3}
html[data-theme="dark"] .cpk-facts li.warn{color:#E4B2B2}
html[data-theme="dark"] .cpk-card footer{border-top:1px dashed var(--line, #31353B)}
html[data-theme="dark"] .cpn-card{border:1px solid var(--line, #31353B);border-left:5px solid #2D3238;background:var(--panel, #171B22)}
html[data-theme="dark"] .cpn-code{background:#33373D}
html[data-theme="dark"] .cpn-pill{background:#33373D;color:#A9B3C0}
html[data-theme="dark"] .cpn-pill-active{background:#31373C;color:#AAD9D3}
html[data-theme="dark"] .cpn-pill-used{background:#353737;color:#CCC0A5}
html[data-theme="dark"] .cpn-pill-expired{background:#35353A;color:#E4B2B2}
html[data-theme="dark"] .cpn-facts{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .cpn-card footer{border-top:1px dashed var(--line, #31353B)}
html[data-theme="dark"] .aih-wallet{background:var(--panel, #171B22);border:1px solid var(--line, #31353B)}
html[data-theme="dark"] .aih-wallet small{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .aih-card{border:1px solid var(--line, #31353B);background:var(--panel, #171B22)}
html[data-theme="dark"] .aih-card p{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .aih-card footer{border-top:1px dashed var(--line, #31353B)}
html[data-theme="dark"] .aih-cost{color:#AEC7E1}
html[data-theme="dark"] .rc-page.rc-light{background:linear-gradient(200deg, #171B22, #32363D 45%, #30353C 75%, #33373D)}
html[data-theme="dark"] .rc-page .rc-idle,html[data-theme="dark"] .rc-page .rc-gen,html[data-theme="dark"] .rc-page .rc-result{background:rgba(23,27,34,.06);border:1px solid rgba(23,27,34,.14)}
html[data-theme="dark"] .rc-page.rc-light .rc-idle,html[data-theme="dark"] .rc-page.rc-light .rc-gen,html[data-theme="dark"] .rc-page.rc-light .rc-result{background:rgba(23,27,34,.72)}
html[data-theme="dark"] .cpn-page .cpn-filters label.sm{color:var(--muted, #A9B3C0)}
html[data-theme="dark"] .ob-console em.used{background:#31363E;color:#AEC7E1}
html[data-theme="dark"] .ob-msg.warn{background:#353737;color:#CCC0A5}
html[data-theme="dark"] .bk-x-day{border:1px solid var(--border,#31353B);background:var(--card,#171B22)}
html[data-theme="dark"] .bk-x-run{border:1px solid var(--border,#31353B);background:var(--card,#171B22)}
html[data-theme="dark"] .bk-x-content{border:1px solid var(--border,#31353B);background:var(--card,#171B22)}
html[data-theme="dark"] .bk-x-sum{border-bottom:1px solid var(--border,#31353B)}
html[data-theme="dark"] .bk-src-lbl{color:#A6D9D0}
html[data-theme="dark"] .bk-src-lbl.bk-src-spaces{color:#B5BFEF}
html[data-theme="dark"] .bk-x-tools input[type=search]{border:1px solid var(--border,#31353B)}
html[data-theme="dark"] .bk-s3-form + .bk-s3-sub,html[data-theme="dark"] .bk-s3-form + p + .bk-s3-sub,html[data-theme="dark"] .bk-s3-col .bk-s3-sub:not(:first-child){border-top:1px solid var(--line, #31353B)}
html[data-theme="dark"] .bk-bkt{border:1px solid var(--hq-line, #30353B);background:var(--card-bg, #171B22)}
html[data-theme="dark"] .bk-bkt-head{border-bottom:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-bkt-n{color:#C7BEA6;background:linear-gradient(135deg, #343532, #32312A)}
html[data-theme="dark"] .bk-bkt-head code{color:var(--hq-muted, #A9B3C0)}
html[data-theme="dark"] .bk-bkt .bk-bkt-form{border-top:1px dashed var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-bkt-tools{border-top:1px dashed var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-bkt-space{border-top:1px solid var(--hq-line, #30353B)}
html[data-theme="dark"] .bk-bkt-space h3 code{color:var(--hq-muted, #A9B3C0)}
html[data-theme="dark"] .dr-cell-info{background:var(--paper, #34373D)}
html[data-theme="dark"] .bt-kpi{border:1px solid var(--border,#31353B);background:linear-gradient(160deg,var(--card,#171B22),rgba(79,108,247,.04))}
html[data-theme="dark"] .bt-kpi small{color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bt-row{border:1px solid var(--border,#31353B);background:var(--card,#171B22)}
html[data-theme="dark"] .bt-row.bt-soon .bt-av{background:linear-gradient(135deg,#332D21,#f59e0b)}
html[data-theme="dark"] .bt-who small{color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bt-chips i{color:#B5BFEF}
html[data-theme="dark"] .bt-chips i.warn{background:rgba(51,45,33,.18);color:#DBC3A1}
html[data-theme="dark"] .bt-chips i.bad{color:#E4A9A9}
html[data-theme="dark"] .bt-m small{color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bt-m b.ok{color:#A4DBCE}
html[data-theme="dark"] .bt-m em{color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bt-acts small{color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bt-empty{border:1px dashed var(--border,#2F3339);color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bt-empty b{color:var(--ink,#A8ACB0)}
html[data-theme="dark"] .cpn-beta{border:1px dashed var(--border,#2F3339)}
html[data-theme="dark"] .cpn-beta legend{color:var(--ink-soft,#A9B3C0)}
html[data-theme="dark"] .bk-stale{color:#DBC3A1}
html[data-theme="dark"] .pcu-probe{background:rgba(23,27,34,.6)}
html[data-theme="dark"] .pcu-probe li.ok{color:#A6CABB}
html[data-theme="dark"] .pcu-probe li.ko{color:#E2B5B5}
html[data-theme="dark"] .pcu-probe small{color:#A9B3C0}
html[data-theme="dark"] .ai-tier{border:1px solid var(--line,#31353B);background:var(--bg2,#171B22)}
html[data-theme="dark"] .ai-tier small{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .ai-tier em{color:#E2ABA7}
html[data-theme="dark"] .ai-tier.bad{border-color:#332D31;background:#171B22}
html[data-theme="dark"] .ai-cat-wrap{border:1px solid var(--line,#31353B)}
html[data-theme="dark"] .ai-cat th{color:var(--mute,#A9B3C0);border-bottom:1px solid var(--line,#31353B)}
html[data-theme="dark"] .ai-cat td{border-bottom:1px solid var(--line,#33373C)}
html[data-theme="dark"] .ai-cat td code{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .ai-cat-fam td{background:var(--bg3,#33373D);color:var(--ink2,#A9B3C0)}
html[data-theme="dark"] .ai-think{background:#33373E;color:#B2B9DE}
html[data-theme="dark"] .ai-think.legacy{background:#1C212A;color:#A9B3C0}
html[data-theme="dark"] .ai-think.always{background:#35373A;color:#D3BB9E}
html[data-theme="dark"] .ai-fails li{background:#171B22;border:1px solid #343236}
html[data-theme="dark"] .ai-fails time{color:#D3AEAA}
html[data-theme="dark"] .sr-facts li{background:var(--bg3,#33373D)}
html[data-theme="dark"] .sr-facts li span{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .sr-raw{background:var(--bg3,#33373D)}
html[data-theme="dark"] .srl-kpi{background:var(--glass,rgba(23,27,34,.75));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-kpi span{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .srl-tabs{border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-row{background:var(--glass,rgba(23,27,34,.75));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-row small{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .srl-cr{background:var(--bg3,#33373D)}
html[data-theme="dark"] .srl-cr-ok{color:#A6CFB5}
html[data-theme="dark"] .srl-cr-warn{color:#E2BEA2}
html[data-theme="dark"] .srl-chart{background:var(--glass,rgba(23,27,34,.75));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-chart small{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .srl-kindchip{background:var(--bg3,#33373D);border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-tag{background:var(--bg3,#33373D)}
html[data-theme="dark"] .srl-tag.ai{color:#C8ADF1}
html[data-theme="dark"] .srl-tag.ok{color:#A6CFB5}
html[data-theme="dark"] .sr-ai-answer{background:var(--glass,rgba(23,27,34,.8));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .sr-ai-answer b{color:var(--acc,#B5C1F1)}
html[data-theme="dark"] .sr-chip{background:var(--bg3,#33373D)}
html[data-theme="dark"] .sr-others li{background:var(--bg3,#33373D)}
html[data-theme="dark"] .srl-page .srl-kpi{background:var(--glass,rgba(23,27,34,.8));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-kpi-i{background:var(--bg3,#33373D);color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .srl-page .srl-kpi span{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .srl-kpi.hot b{color:#E8B7A3}
html[data-theme="dark"] .srl-chartcard{background:var(--glass,rgba(23,27,34,.8));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .srl-day{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .srl-page .srl-row.new{background:linear-gradient(90deg,color-mix(in srgb,var(--k,#9ca3af) 8%,transparent),transparent 40%),var(--glass,rgba(23,27,34,.8))}
html[data-theme="dark"] .srl-rep{color:#E2BEA2}
html[data-theme="dark"] .srl-tag.new{color:#E4A9A9}
html[data-theme="dark"] .srl-emptycard{background:var(--glass,rgba(23,27,34,.8));border:1px dashed var(--line,#2F333A)}
html[data-theme="dark"] .sr-case{background:var(--glass,rgba(23,27,34,.85));border:1px solid var(--line,#31353C)}
html[data-theme="dark"] .sr-case-kind{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .sr-steps li{color:var(--mute,#A9B3C0)}
html[data-theme="dark"] .sr-steps li::before{border:2px solid var(--line,#2F333A);background:#171B22}
html[data-theme="dark"] .sr-steps li::after{background:var(--line,#31353B)}
html[data-theme="dark"] .mytk-ref .mytk-ref-code{background:#171B22}
html[data-theme="dark"] .tk-errref a{color:#C1ABE3}
html[data-theme="dark"] .pu-badnames-l a{background:#171B22}
html[data-theme="dark"] .ho-pill.dispute{background:#33353D;color:#BBAED8}
html[data-theme="dark"] .cd-sig i.disp{background:#33353D;color:#BBAED8}
html[data-theme="dark"] .cd-sig i.tk{background:#31363D;color:#A9BCF0}
html[data-theme="dark"] .pcu-open a.tk{background:#31363D;color:#A9BCF0}
html[data-theme="dark"] .pcu-open a.disp{background:#33353D;color:#BBAED8}
html[data-theme="dark"] .dp2-tags i.draft{background:#31363D;color:#A9BCF0}
html[data-theme="dark"] .nv-steps li.on::before{background:#171B22}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav{border:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav-id b{color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav-id small{color:#A9B3C0}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav .ho-views,html[data-theme="dark"] body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs{background:#333639}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav .ho-views a,html[data-theme="dark"] body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab{color:#A9B3C0}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav .ho-views a:hover,html[data-theme="dark"] body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab:hover{color:#E6EAF0;background:rgba(23,27,34,.6)}
html[data-theme="dark"] body:has(.studio-on) .hq-gnav .ho-views a.on,html[data-theme="dark"] body:has(.studio-on) .hq-gnav.ps-gnav .tabs.settings-tabs.ps-subtabs .tab.active{color:#7FD4CB}
html[data-theme="dark"] body:has(.studio-on) .pn-main .pn-hero.pe-hero{color:#E6EAF0;border:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main .pn-hero.pe-hero h1{color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main .panel{border:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main .panel > h2:first-child,html[data-theme="dark"] body:has(.studio-on) .pn-main .panel > h2{color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main .panel > h2 .hqi-t,html[data-theme="dark"] body:has(.studio-on) .pn-main .panel > h2 > i:first-child{background:#16302F;color:#7FD4CB}
html[data-theme="dark"] body:has(.studio-on) .pn-main .panel > h2 + p,html[data-theme="dark"] body:has(.studio-on) .pn-main .panel > h2 + .muted{color:#A9B3C0}
html[data-theme="dark"] body:has(.studio-on) .pn-main .panel h3,html[data-theme="dark"] body:has(.studio-on) .pn-main .panel .hm-sub{color:#A9B3C0}
html[data-theme="dark"] body:has(.studio-on) .pn-main label{color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=text],html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=email],html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=password],html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=number],html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=url],html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=search],html[data-theme="dark"] body:has(.studio-on) .pn-main input[type=date],html[data-theme="dark"] body:has(.studio-on) .pn-main select,html[data-theme="dark"] body:has(.studio-on) .pn-main textarea{border:1.5px solid #343C48;color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main label small,html[data-theme="dark"] body:has(.studio-on) .pn-main .panel small.muted,html[data-theme="dark"] body:has(.studio-on) .pn-main .panel p.muted{color:#A9B3C0}
html[data-theme="dark"] body:has(.studio-on) .pn-main .btn{border:1.5px solid #343C48;color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main .btn:hover{color:#7FD4CB}
html[data-theme="dark"] body:has(.studio-on) .pn-main .btn.danger-outline{border-color:#322D31}
html[data-theme="dark"] body:has(.studio-on) .pn-main .sw{background:#2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main .check-label,html[data-theme="dark"] body:has(.studio-on) .pn-main .switch-label{border:1.5px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main .check-label:has(input:checked){background:#16302F}
html[data-theme="dark"] body:has(.studio-on) .pn-main code{background:#33363A;color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main details{border:1.5px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main details > summary::before{color:#7FD4CB}
html[data-theme="dark"] body:has(.studio-on) .pn-main th{color:#A9B3C0;border-bottom:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main td{border-bottom:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .sst-row{border:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .sst-row span{color:#A9B3C0}
html[data-theme="dark"] body:has(.studio-on) .sst-row b{color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .sst-kpis div{border:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .sst-kpis b{color:#E6EAF0}
html[data-theme="dark"] body:has(.studio-on) .pn-main .cr-kpi,html[data-theme="dark"] body:has(.studio-on) .pn-main .cr-kpis > div{border:1px solid #2A313C}
html[data-theme="dark"] body:has(.studio-on) .pn-main .cr-kpi b,html[data-theme="dark"] body:has(.studio-on) .pn-main .cr-kpis > div b{color:#E6EAF0}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero{color:#E6EAF0;border:1px solid #2A313C;border-left:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero h1{color:#E6EAF0}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero .pn-hero-text p{color:#A9B3C0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico{background:#16302F;color:#7FD4CB}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)):not(:has(.hq-pnav)) .pn-main .pn-hero .pe-status{border:1px solid #2A313C;color:#E6EAF0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.cd-kpi,html[data-theme="dark"] .ho-kpi,html[data-theme="dark"] .pn-kpi,html[data-theme="dark"] .rc-kpi,html[data-theme="dark"] .srl-kpi,html[data-theme="dark"] .pcu-stat,html[data-theme="dark"] .lg-stat,html[data-theme="dark"] .pv-kpis > a,html[data-theme="dark"] .cr-kpi){border:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.cd-kpi,html[data-theme="dark"] .ho-kpi,html[data-theme="dark"] .pn-kpi,html[data-theme="dark"] .rc-kpi,html[data-theme="dark"] .srl-kpi,html[data-theme="dark"] .pcu-stat,html[data-theme="dark"] .lg-stat,html[data-theme="dark"] .pv-kpis > a) :is(b,html[data-theme="dark"] strong){color:#E6EAF0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.cd-kpi,html[data-theme="dark"] .ho-kpi,html[data-theme="dark"] .pn-kpi,html[data-theme="dark"] .rc-kpi,html[data-theme="dark"] .srl-kpi,html[data-theme="dark"] .pcu-stat,html[data-theme="dark"] .lg-stat,html[data-theme="dark"] .pv-kpis > a) :is(span,html[data-theme="dark"] small){color:#A9B3C0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.ho-card,html[data-theme="dark"] .dp2-queue,html[data-theme="dark"] .pv-watch,html[data-theme="dark"] .cpn-promo,html[data-theme="dark"] .tk-desk,html[data-theme="dark"] .srl-chartcard){border:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.ho-tr,html[data-theme="dark"] .cv-tr,html[data-theme="dark"] .cd-tr,html[data-theme="dark"] .tk-item,html[data-theme="dark"] .srl-row,html[data-theme="dark"] .pkd-row,html[data-theme="dark"] .pv-w,html[data-theme="dark"] .td-row,html[data-theme="dark"] .dp2-q):hover{background:#16302F}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.td-head,html[data-theme="dark"] .ho-head,html[data-theme="dark"] .cr-head,html[data-theme="dark"] .pc-head) h1{color:#E6EAF0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.td-views,html[data-theme="dark"] .cd-tabs){background:#333639}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.td-views,html[data-theme="dark"] .cd-tabs) a{color:#A9B3C0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main :is(.td-views,html[data-theme="dark"] .cd-tabs) a.on,html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .cd-tabs a[aria-current]{color:#7FD4CB}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)) .pn-main > .ho-views{background:#333639}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)) .pn-main > .ho-views a{color:#A9B3C0}
html[data-hq][data-theme="dark"] body:has(.studio-on):not(:has(.hq-gnav)) .pn-main > .ho-views a.on{color:#7FD4CB}
html[data-hq][data-theme="dark"] body:has(.studio-on) .hq-pnav{border:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on) .hq-pnav-tabs{background:#333639}
html[data-hq][data-theme="dark"] body:has(.studio-on) .hq-pnav-tabs a{color:#A9B3C0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .hq-pnav-tabs a.on{color:#7FD4CB}
html[data-hq][data-theme="dark"] body:has(.studio-on) .hq-pnav-parts{border-top:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on) .hq-pnav-parts a{border:1.5px solid #343C48}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .td-nums a{border:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico,html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .pn-hero .pn-hero-ico *{color:#7FD4CB !important}
html[data-theme="dark"] .al2-head{background:var(--st-card,#171B22);border:1px solid #2A313C}
html[data-theme="dark"] .al2-id p{color:#A9B3C0}
html[data-theme="dark"] .al2-pill.bad{background:#35353A;color:#D3A9A5}
html[data-theme="dark"] .al2-pill.warn{background:#353739;color:#D3B5A1}
html[data-theme="dark"] .al2-pill.ok{background:#31373A;color:#A6BCB0}
html[data-theme="dark"] .al2-fams{background:#333639}
html[data-theme="dark"] .al2-fams a,html[data-theme="dark"] .al2-views a{color:#A9B3C0}
html[data-theme="dark"] .al2-fams a.on,html[data-theme="dark"] .al2-views a.on{background:#171B22;color:#7FD4CB}
html[data-theme="dark"] .al2-tiles div{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .al2-tiles span{color:#A9B3C0}
html[data-theme="dark"] .al2-tiles small{color:#A9B3C0}
html[data-theme="dark"] .al2-views{background:#333639}
html[data-theme="dark"] .al2-toggle{color:#E6EAF0}
html[data-theme="dark"] .al2-toggle i{background:#2A313C}
html[data-theme="dark"] .al2-toggle i::after{background:#171B22}
html[data-theme="dark"] .al2-card{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .al2-selbar{background:#34373B;border-bottom:1px solid #2A313C;color:#A9B3C0}
html[data-theme="dark"] .al2-selbar button{border:1.5px solid #2A313C;background:#171B22;color:#E6EAF0}
html[data-theme="dark"] .al2-selbar.on button{background:rgba(23,27,34,.16)}
html[data-theme="dark"] .al2-day{color:#A9B3C0;background:#34373B;border-top:1px solid #2A313C}
html[data-theme="dark"] .al2-row{border-top:1px solid #33363A;background:#171B22}
html[data-theme="dark"] .al2-row:hover{background:#35383C}
html[data-theme="dark"] .al2-row.on{background:#16302F}
html[data-theme="dark"] .al2-row.read .al2-rt b{color:#A9B3C0}
html[data-theme="dark"] .al2-rd{color:#C9D1DB}
html[data-theme="dark"] .al2-rm time{color:#A9B3C0}
html[data-theme="dark"] .al2-rm small{color:#A9B3C0}
html[data-theme="dark"] .al2-lv.bad{background:#35353A;color:#D3A9A5}
html[data-theme="dark"] .al2-lv.warn{background:#353739;color:#D3B5A1}
html[data-theme="dark"] .al2-lv.info{background:#333639;color:#C9D1DB}
html[data-theme="dark"] .al2-pager{border-top:1px solid #2A313C;color:#A9B3C0}
html[data-theme="dark"] .al2-om{color:#A9B3C0}
html[data-theme="dark"] .al2-go{background:#34373B}
html[data-theme="dark"] .al2-go b{color:#A9B3C0}
html[data-theme="dark"] .al2-go a{color:#7FD4CB}
html[data-theme="dark"] .al2-same{color:#A9B3C0}
html[data-theme="dark"] .al2-khead{color:#A9B3C0;background:#34373B}
html[data-theme="dark"] .al2-krow{border-top:1px solid #33363A}
html[data-theme="dark"] .al2-krow:hover{background:#35383C}
html[data-theme="dark"] .al2-kbar{background:#333639}
html[data-theme="dark"] .al2-kl{color:#A9B3C0}
html[data-theme="dark"] .al2-empty span{color:#A9B3C0}
html[data-hq][data-theme="dark"] body .pn-main .al2-open h2{color:#E6EAF0}
html[data-theme="dark"] .ho-vn{background:#353739;color:#D3B5A1}
html[data-theme="dark"] .dn2-tiles > div{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .dn2-tiles span{color:#A9B3C0}
html[data-theme="dark"] .dn2-tiles small{color:#A9B3C0}
html[data-theme="dark"] .dn2-tiles small a{color:#7FD4CB}
html[data-theme="dark"] .dn2-tiles .warn b{color:#D3B5A1}
html[data-theme="dark"] .dn2-tiles .bad b{color:#E2ABA7}
html[data-theme="dark"] .dn2-card{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .dn2-ch small{color:#A9B3C0}
html[data-theme="dark"] .dn2-thead{color:#A9B3C0;background:#34373B}
html[data-theme="dark"] .dn2-row{border-top:1px solid #33363A}
html[data-theme="dark"] .dn2-row:hover{background:#35383C}
html[data-theme="dark"] .dn2-row > div:first-child small{color:#A9B3C0}
html[data-theme="dark"] .dn2-why{color:#C9D1DB}
html[data-theme="dark"] .dn2-left small{color:#A9B3C0}
html[data-theme="dark"] .dn2-bar{background:#333639}
html[data-theme="dark"] .dn2-chip.ok{background:#31373A;color:#A6BCB0}
html[data-theme="dark"] .dn2-chip.warn{background:#353739;color:#D3B5A1}
html[data-theme="dark"] .dn2-chip.bad{background:#35353A;color:#D3A9A5}
html[data-theme="dark"] .dn2-chip.off{background:#333639;color:#C9D1DB}
html[data-theme="dark"] .dn2-empty{border-top:1px solid #33363A}
html[data-theme="dark"] .dn2-empty span{color:#A9B3C0}
html[data-theme="dark"] .cpn-page .cr-head{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .cpn-page .cpn-promo{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .cp3-states{background:#333639}
html[data-theme="dark"] .cp3-states a{color:#A9B3C0}
html[data-theme="dark"] .cp3-states a.on{background:#171B22;color:#7FD4CB}
html[data-theme="dark"] .cp3-newbox{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .cp3-card{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .cp3-head{color:#A9B3C0;background:#34373B}
html[data-theme="dark"] .cp3-row{border-top:1px solid #33363A}
html[data-theme="dark"] .cp3-row:hover{background:#35383C}
html[data-theme="dark"] .cp3-code small{color:#A9B3C0}
html[data-theme="dark"] .cp3-for{color:#C9D1DB}
html[data-theme="dark"] .cp3-uses i{background:#333639}
html[data-theme="dark"] .cp3-pill{background:#333639;color:#C9D1DB}
html[data-theme="dark"] .cp3-pill.is-active{background:#31373A;color:#A6BCB0}
html[data-theme="dark"] .cp3-del{color:#DDA8A5 !important;border-color:#322D31 !important}
html[data-theme="dark"] .cp3-foot{border-top:1px solid #2A313C;color:#A9B3C0}
html[data-theme="dark"] .cr-packs-ro div{border:1px solid #2A313C}
html[data-theme="dark"] .cr-packs-ro span{color:#A9B3C0}
html[data-theme="dark"] .pk-sw{border:1.5px solid #2A313C;background:#171B22;color:#A9B3C0}
html[data-theme="dark"] .pk-sw i{background:#2A313C}
html[data-theme="dark"] .pk-sw i::after{background:#171B22}
html[data-theme="dark"] .pk-sw.on{color:#7FD4CB;background:#16302F}
html[data-theme="dark"] .pkd-offline{background:#34373B;color:#A9B3C0}
html[data-theme="dark"] .pkd-offline a{color:#7FD4CB}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pcu-tabs{background:#333639}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pcu-tabs a{color:#A9B3C0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pcu-tabs a.on{background:#171B22;color:#7FD4CB}
html[data-theme="dark"] .qt-pager{color:#A9B3C0}
html[data-hq][data-theme="dark"] body .pn-main .pcu-headcard{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .pcu-stats5 .pcu-stat{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .pcu-stats5 .pcu-stat small{color:#A9B3C0}
html[data-theme="dark"] .pcu-stats5 .pcu-stat i{color:#A9B3C0}
html[data-theme="dark"] .pcu-stats5 .pcu-stat.warn b{color:#D3B5A1}
html[data-theme="dark"] .pcu-stats5 .pcu-stat.bad b{color:#E2ABA7}
html[data-hq][data-theme="dark"] body .pn-main .pcu-headcard .pcu-open{background:#35383B;border:1px solid #343333}
html[data-hq][data-theme="dark"] body .pn-main .pcu-headcard .pcu-open a{background:#171B22;border:1px solid #343333}
html[data-theme="dark"] .qt-oprow{background:#16302F}
html[data-theme="dark"] .qt-oprow em{color:#7FD4CB}
html[data-theme="dark"] .qt2-empty{background:#171B22;border:1px dashed #2A313C}
html[data-theme="dark"] .hq-pnav-subs a{color:#A9B3C0}
html[data-theme="dark"] .hq-pnav-subs a:hover{background:#34373B;color:#E6EAF0}
html[data-theme="dark"] .hq-pnav-subs a.on{color:#7FD4CB}
html[data-theme="dark"] .pp2-state{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .pp2-kv dt{color:#A9B3C0}
html[data-theme="dark"] .pp2-kv dd.ok{color:#A6BCB0}
html[data-theme="dark"] .pp2-kv dd.warn{color:#D3B5A1}
html[data-hq][data-theme="dark"] body .pn-main details.pp2-change[open] > summary{background:#171B22;color:#E6EAF0;border:1.5px solid #343C48}
html[data-theme="dark"] .ai2-views a{border:1.5px solid #343C48;background:#171B22;color:#E6EAF0}
html[data-hq][data-theme="dark"] body .pn-main .hq-home-ai{background:linear-gradient(135deg,#33373C,#171B22);border:1px solid #2F3539;color:#E6EAF0}
html[data-hq][data-theme="dark"] body .pn-main .td-todo .td-row{border-top:1px solid #33363A;color:#E6EAF0}
html[data-hq][data-theme="dark"] body .pn-main .td-todo .td-row:hover{background:#35383C}
html[data-hq][data-theme="dark"] body .pn-main .td-todo .td-row .td-dot{background:#333639}
html[data-hq][data-theme="dark"] body .pn-main .td-todo .td-row.bad .td-dot{background:#35353A}
html[data-hq][data-theme="dark"] body .pn-main .td-todo .td-row.warn .td-dot{background:#353739}
html[data-hq][data-theme="dark"] body .pn-main .td-todo .td-row em{color:#7FD4CB}
html[data-hq][data-theme="dark"] body .pn-main .ag-it{border:1px solid #2A313C;background:#171B22}
html[data-hq][data-theme="dark"] body .pn-main .ag-it.late{border-color:#333034;background:#171B22}
html[data-hq][data-theme="dark"] body .pn-main .ag-it .ag-body small{color:#A9B3C0}
html[data-hq][data-theme="dark"] body .pn-main .ag-it .ag-b{border:1.5px solid #343C48;background:#171B22;color:#E6EAF0}
html[data-hq][data-theme="dark"] body .pn-main .ag-it .ag-b-ok{border-color:#253031;color:#A6BCB0;background:#33373C}
html[data-hq][data-theme="dark"] body .pn-main .ag-it .ag-b-del{border-color:#322D31;color:#DDA8A5}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .tk-cust,html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .tk-tools,html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .tk-ai{background:#171B22;border:1px solid #2A313C}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .tk-msg.them .tk-bubble{background:#33363B;color:#E6EAF0}
html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .tk-item.active,html[data-hq][data-theme="dark"] body:has(.studio-on) .pn-main .tk-item[aria-current]{background:#16302F}
html[data-theme="dark"] .dp3-tiles > div{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .dp3-tiles span{color:#A9B3C0}
html[data-theme="dark"] .dp3-tiles small{color:#A9B3C0}
html[data-theme="dark"] .dp3-tiles .ok b{color:#A6BCB0}
html[data-theme="dark"] .dp3-tiles .warn b{color:#D3B5A1}
html[data-theme="dark"] .dp3-tiles .bad b{color:#E2ABA7}
html[data-theme="dark"] .dp3-empty{background:#171B22;border:1px solid #2A313C}
html[data-theme="dark"] .dp3-empty span{color:#A9B3C0}
html[data-hq][data-theme="dark"] body.pn-page{background:radial-gradient(900px 520px at 105% -15%,rgba(20,135,140,.10),transparent 60%),#323539}
html[data-hq][data-theme="dark"] .hqtb{background:rgba(23,27,34,.92) !important;box-shadow:0 20px 44px -24px rgba(7,16,20,.45),inset 0 0 0 1px rgba(23,27,34,.9) !important}
html[data-hq][data-theme="dark"] .hqtb-page b{color:#A5A6A9}
html[data-hq][data-theme="dark"] .hqtb-search{background:#33373C !important;box-shadow:inset 0 0 0 1px #2F3539;color:#A9B3C0}
html[data-hq][data-theme="dark"] .hqtb-search input{color:#A5A6A9}
html[data-hq][data-theme="dark"] .hqtb-search kbd{background:#171B22;color:#A5A6A9;box-shadow:inset 0 0 0 1px #313437,0 1px 0 #313437}
html[data-hq][data-theme="dark"] .hqtb-duo{background:#34373B;box-shadow:inset 0 0 0 1px #313437}
html[data-hq][data-theme="dark"] .hqtb-duo small{color:#C9D1DB !important}
html[data-hq][data-theme="dark"] .hqtb-duo small + small{border-left:1px solid #313437 !important}
html[data-hq][data-theme="dark"] .hqtb-d.amber{background:#332D20;box-shadow:0 0 0 3px rgba(51,45,32,.2)}
html[data-hq][data-theme="dark"] .hqtb-env.test{color:#A2A6A7 !important}
html[data-hq][data-theme="dark"] .hqtb-bell{color:#A2C8C9;background:#32373C}
html[data-hq][data-theme="dark"] .hqtb-nd{box-shadow:0 0 0 2px #171B22}
html[data-hq][data-theme="dark"] .hqtb-op .hqtb-av{color:#A2A6A7 !important}
html[data-hq][data-theme="dark"] .hqtb-op .hqtb-opn{color:#C9D1DB}
html[data-hq][data-theme="dark"] .hqmb{background:rgba(23,27,34,.94) !important}
html[data-hq][data-theme="dark"] .hqmb-brand b{color:#A5A6A9 !important}
html[data-hq][data-theme="dark"] .hqmb-btn{color:#A2C8C9 !important}
html[data-hq][data-theme="dark"] .hqtb-fav button{color:#A9B3C0}
html[data-hq][data-theme="dark"] .hqtb-fav button:hover{background:#33373C;color:#A2C8C9}
html[data-hq][data-theme="dark"] .hqtb-fav button.on{color:#E4CCAA;background:#353738}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs{background:#1C212A !important;box-shadow:inset 0 0 0 1px #2F3539 !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a{color:#C9D1DB !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a:hover{color:#A2C8C9 !important;background:rgba(23,27,34,.6) !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a.on,html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a[aria-current="page"],html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a.active{background:#171B22 !important;color:#A2C8C9 !important}
html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a small,html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a em,html[data-hq][data-theme="dark"] .hqtb .hqtb-tabs > a .n{color:#A2C8C9 !important}
html[data-hq][data-theme="dark"] .au-live{background:#171B22;box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 1px #31363B}
html[data-hq][data-theme="dark"] .au-live-h{color:#A2C8C9}
html[data-hq][data-theme="dark"] .au-ev a{background:#171B22;box-shadow:inset 0 0 0 1px #31363B}
html[data-hq][data-theme="dark"] .au-ev a:hover{box-shadow:inset 0 0 0 1px #263236;background:#33383D}
html[data-hq][data-theme="dark"] .au-ev time{color:#A9B3C0}
html[data-hq][data-theme="dark"] .au-ev.pay b{color:#A2CCBE}
html[data-hq][data-theme="dark"] .au-ev.refund b{color:#E2ABA7}
html[data-hq][data-theme="dark"] .au-ev span{color:#C9D1DB}
html[data-hq][data-theme="dark"] .au-ev.none{color:#A9B3C0}
html[data-hq][data-theme="dark"] .au-moment{box-shadow:inset 0 0 0 1px rgba(33,54,57,.35),0 10px 24px -12px rgba(18,165,148,.8)}
html[data-hq][data-theme="dark"] .au-ask input[type=text]{border:1px solid rgba(33,54,57,.28);background:rgba(23,27,34,.06)}
html[data-hq][data-theme="dark"] .au-ask-out{background:rgba(23,27,34,.07);box-shadow:inset 0 0 0 1px rgba(33,54,57,.18)}
html[data-hq][data-theme="dark"] .au-ask-out.err{box-shadow:inset 0 0 0 1px rgba(53,41,44,.35)}
/* <<< DARK TWINS */

/* D-M871: the glyphs that replaced the emoji in the desk (hq_icon), sized like the text they sit in */
.ico-g { display: inline-flex; width: 1em; height: 1em; vertical-align: -.14em; flex: none; } .ico-g svg, .pn-hero-ico svg, .cp-kind i svg { width: 1em; height: 1em; }

/* D-M871: a long option never widens the editor */
.pkd-sec select { max-width: 100%; }
/* D-M969: the monthly allowance line on the AI page (styled only in the landing sheet until now) */
.aih-inc{display:block;margin-top:6px;font-size:12.5px;line-height:1.35;font-weight:500;opacity:.8}
/* the priority of a ticket: a coloured dot, the colours of the priority buttons (D-M1168) */
.tk-dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;vertical-align:.08em}
.tk-dot.p-low{background:#1e6b45}.tk-dot.p-normal{background:#1d5fa8}.tk-dot.p-high{background:#c2680c}.tk-dot.p-urgent{background:#b42318}
/* D-M1442: a value a cut product shows but the seat sets — the value, then the one sentence with the seat's door */
.ps-ro{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:4px 0 8px;font-size:14px}.ps-ro>span{color:var(--ink-soft)}
.pp-seat-note{font-size:13px;margin:6px 0 0}.pp-seat-note a{font-weight:600;white-space:nowrap}
/* D-M1442: the hero icon of a product page sizes with its title (it was drawn at full width); on a phone the provider bar wraps — the machine room, the system menu, the seat and the account no longer push the page sideways */
@media (max-width: 720px) { .pn-page .pn-top { flex-wrap: wrap; row-gap: 6px; } .pn-page .pn-nav2 { flex-wrap: wrap; row-gap: 4px; max-width: 100%; } }
.bk-cron-card code, .bk-status code.uv-copyable { overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }   /* D-M1442: the cron line wraps on a phone */
.pn-page .pn-hero h1 .pn-hero-ico { display: inline-flex; vertical-align: -.12em; }