:root { color-scheme: light; --ink:#15251f; --muted:#66736d; --green:#176b4a; --pale:#edf5f1; --line:#dbe5e0; --danger:#a33b32; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; padding-left:230px; background:#f4f6f4; color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; transition:padding-left .2s; }
body.menu-collapsed { padding-left:70px; }
main { max-width:1180px; margin:0 auto; padding:34px 24px 60px; }
.side-menu { position:fixed; z-index:100; inset:0 auto 0 0; width:230px; padding:22px 12px; color:white; background:#17372b; transition:width .2s; overflow:hidden; }
.side-brand { display:flex; align-items:center; gap:12px; height:42px; padding:0 8px; margin-bottom:22px; font-weight:850; white-space:nowrap; }
.side-menu nav { display:grid; gap:7px; }
.side-menu a { display:flex; align-items:center; gap:12px; min-height:44px; padding:8px; border-radius:9px; color:#dce9e3; text-decoration:none; white-space:nowrap; }
.side-menu a:hover,.side-menu a.active { color:white; background:#285b47; }
.menu-icon { display:grid; flex:0 0 38px; width:38px; height:30px; place-items:center; font-size:13px; font-weight:850; }
.menu-label { overflow:hidden; transition:opacity .15s; }
.menu-toggle { position:fixed; z-index:110; left:188px; bottom:20px; width:42px; height:42px; padding:0; border:2px solid #dbe8e2; border-radius:50%; box-shadow:0 4px 14px #0003; transition:left .2s; }
body.menu-collapsed .side-menu { width:70px; }
body.menu-collapsed .menu-label { opacity:0; }
body.menu-collapsed .menu-toggle { left:48px; }
header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:26px; }
.header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.eyebrow { margin:0 0 4px; color:var(--green); font-weight:800; letter-spacing:.14em; font-size:12px; }
h1 { margin:0; font-size:34px; line-height:1.15; } h2 { margin:0 0 16px; font-size:18px; }
.subtitle,.privacy { color:var(--muted); }
.status { border-radius:999px; padding:8px 13px; font-weight:700; white-space:nowrap; }
.status.offline { background:#eee; color:#6e716f; } .status.online { background:#d8f1e4; color:#0f6844; }
.panel { background:white; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 5px 22px rgba(31,57,46,.05); }
.controls { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:16px 28px; align-items:end; }
label span,.controls label { display:block; font-weight:700; margin-bottom:6px; }
input,select { width:100%; border:1px solid #bdcbc4; border-radius:9px; padding:10px 11px; font:inherit; background:white; }
.actions { display:flex; flex-wrap:wrap; gap:9px; }
.compact-control { width:auto; min-width:145px; }
.ocr-mode-switch { display:flex; align-items:center; gap:8px; padding:0 8px; cursor:pointer; font-weight:750; white-space:nowrap; }
.ocr-mode-switch input { position:absolute; opacity:0; pointer-events:none; }
.toggle-track { width:42px; height:24px; padding:2px; border-radius:999px; background:#aeb8bf; transition:.2s; }
.toggle-track::after { content:""; display:block; width:20px; height:20px; border-radius:50%; background:white; box-shadow:0 1px 4px #0003; transition:.2s; }
.ocr-mode-switch input:checked + .toggle-track { background:var(--green); }
.ocr-mode-switch input:checked + .toggle-track::after { transform:translateX(18px); }
.ocr-mode-switch input:focus-visible + .toggle-track { outline:3px solid #80bfff; outline-offset:2px; }
button { border:0; border-radius:9px; background:var(--green); color:white; padding:11px 16px; font-weight:750; cursor:pointer; }
.button-link { display:inline-block; border-radius:9px; background:var(--green); color:white; padding:9px 14px; font-weight:750; text-decoration:none; }
.button-link.secondary { background:#263d34; }
button.secondary { background:#263d34; } button.ghost { background:#e8eeeb; color:#34463f; }
button:disabled { opacity:.42; cursor:not-allowed; }
#message { grid-column:1/-1; margin:0; color:var(--muted); } #message.error { color:var(--danger); font-weight:700; }
.workspace { display:grid; grid-template-columns:1.05fr .95fr; gap:20px; margin-top:20px; }
.preview img { display:block; width:100%; max-height:520px; object-fit:contain; background:#eef1ef; border-radius:10px; }
.empty { display:grid; min-height:180px; place-items:center; color:#89938e; border:1px dashed #c8d2cd; border-radius:10px; }
.privacy { margin:12px 0 0; font-size:13px; }
.result-heading { display:flex; justify-content:space-between; gap:14px; }
#confidence { color:var(--green); font-weight:800; }
.warnings { padding:10px 12px; margin-bottom:14px; color:#7f392e; background:#fff0ed; border-radius:8px; }
.machine-read { margin-bottom:14px; padding:12px; background:#eef3f7; border-radius:8px; }
.machine-read pre { margin:8px 0; padding:10px; overflow:auto; background:#17211d; color:#e8f4ee; border-radius:6px; font:13px/1.35 ui-monospace,monospace; white-space:pre-wrap; word-break:break-all; }
.machine-read small { color:var(--muted); }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fields.empty { display:grid; }
.matches { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.matches h3 { margin:0 0 10px; font-size:16px; }
.match { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.match:last-child { border-bottom:0; }
.match small { display:block; color:var(--muted); }
.driver-create-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.driver-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; padding:16px; background:#f7f9f8; border:1px solid var(--line); border-radius:10px; }
.driver-form h3,.driver-form .form-actions { grid-column:1/-1; }
.driver-form label span { display:block; font-weight:700; margin-bottom:6px; }
.form-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:4px; }
.document-panel { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.document-panel h3 { margin:0 0 8px; font-size:16px; }
.training { margin-top:18px; padding:16px; background:var(--pale); border-radius:10px; }
.training h3 { margin:0 0 10px; font-size:16px; }
.training label { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.training label input { width:auto; }
.training > input { margin-bottom:10px; }
.training small { display:block; margin-top:9px; color:var(--muted); }
@media (max-width:800px) { body,body.menu-collapsed { padding-left:0; } .side-menu { width:230px; box-shadow:5px 0 20px #0004; } body.menu-collapsed .side-menu { width:0; padding-left:0; padding-right:0; } .menu-toggle,body.menu-collapsed .menu-toggle { left:14px; bottom:14px; } header,.workspace { grid-template-columns:1fr; display:grid; } .controls { grid-template-columns:1fr; } .fields,.driver-form { grid-template-columns:1fr; } }
.person-category-field { grid-column:1 / -1; padding:12px; border:2px solid var(--green); border-radius:10px; background:#f2faf6; }
.person-category-field small { display:block; margin-top:5px; color:var(--muted); }

/* Shell applicativa condivisa */
:root { --sidebar:#102d24; --sidebar-hover:#1d493a; --sidebar-active:#236c50; --focus:#49a77e; }
.side-menu { width:248px; padding:18px 12px 14px; display:flex; flex-direction:column; background:linear-gradient(180deg,#102d24 0%,#15382c 100%); box-shadow:8px 0 28px rgba(10,35,26,.08); }
body { padding-left:248px; }
.side-brand { height:54px; padding:0 8px 14px; margin:0 0 12px; border-bottom:1px solid rgba(255,255,255,.1); }
.brand-mark { display:grid; flex:0 0 38px; height:38px; place-items:center; border-radius:11px; color:#12372a; background:#d9f4e7; font-weight:900; letter-spacing:-.04em; }
.side-brand .menu-label { display:grid; line-height:1.1; }
.side-brand strong { font-size:15px; }
.side-brand small { margin-top:4px; color:#9ebbae; font-size:11px; font-weight:600; }
.side-menu nav { display:block; flex:1; overflow-y:auto; scrollbar-width:thin; }
.menu-group { margin:0 0 16px; }
.menu-group-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; padding:3px 12px 6px; border-radius:7px; color:#8eafa1; background:transparent; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; }
.menu-group-toggle:hover { color:#d9e9e2; background:#ffffff0a; }
.menu-group-toggle i { font-style:normal; font-size:15px; transition:transform .18s; }
.menu-group.group-collapsed .menu-group-toggle i { transform:rotate(-90deg); }
.menu-group-items { display:grid; grid-template-rows:1fr; opacity:1; transition:opacity .16s; }
.menu-group.group-collapsed .menu-group-items { display:none; opacity:0; }
.side-menu a { position:relative; min-height:43px; padding:7px 9px; margin:2px 0; border-radius:10px; color:#d1e2da; font-weight:650; }
.side-menu a:hover { background:var(--sidebar-hover); }
.side-menu a.active { background:var(--sidebar-active); box-shadow:inset 3px 0 #89d2ae; }
.side-menu a.menu-child { min-height:36px; margin-left:18px; padding-top:4px; padding-bottom:4px; color:#b8d0c5; font-size:12px; }
.side-menu a.menu-child .menu-icon { flex-basis:24px; width:24px; }
.side-menu a.menu-child .menu-icon svg { width:15px; height:15px; }
.menu-icon { flex-basis:34px; width:34px; height:28px; }
.menu-icon svg,.menu-logout svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.menu-account { display:flex; align-items:center; gap:9px; min-height:58px; padding:11px 7px 0; border-top:1px solid rgba(255,255,255,.1); }
.account-avatar { display:grid; flex:0 0 34px; height:34px; place-items:center; border-radius:50%; background:#2a7055; color:white; font-size:12px; font-weight:850; }
.account-copy { display:grid; min-width:0; flex:1; line-height:1.2; }
.account-copy strong,.account-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-copy strong { font-size:12px; }.account-copy small { margin-top:3px; color:#9ebbae; font-size:10px; }
.menu-logout { display:grid; flex:0 0 32px; height:32px; place-items:center; padding:0; border-radius:8px; color:#c7ddd3; background:transparent; }
.menu-logout:hover { background:#285744; color:white; }
.menu-toggle { left:205px; bottom:23px; display:grid; gap:4px; place-content:center; width:34px; height:34px; border:0; background:#f7fbf9; }
.menu-toggle span { display:block; width:14px; height:2px; border-radius:2px; background:#23493b; }
body.menu-collapsed { padding-left:76px; }
body.menu-collapsed .side-menu { width:76px; }
body.menu-collapsed .menu-toggle { left:59px; }
body.menu-collapsed .side-brand { padding-left:7px; }
body.menu-collapsed .menu-group-toggle { height:7px; padding:0; overflow:hidden; pointer-events:none; }
body.menu-collapsed .side-menu a { justify-content:center; }
body.menu-collapsed .side-menu a.menu-child { margin-left:0; }
body.menu-collapsed .menu-account { justify-content:center; padding-left:0; padding-right:0; }
body.menu-collapsed .menu-logout { display:none; }
.toast-region { position:fixed; z-index:11000; top:18px; right:18px; display:grid; gap:10px; width:min(390px,calc(100vw - 36px)); }
.toast { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start; padding:14px 12px 14px 16px; border:1px solid #d8e2dd; border-left:4px solid #56726a; border-radius:12px; background:white; color:#22352e; box-shadow:0 12px 35px #10251c22; animation:toast-in .18s ease-out; }
.toast-success { border-left-color:#168455; }.toast-warning { border-left-color:#d18a16; }.toast-error { border-left-color:#b53b34; }
.toast-close { width:28px; height:28px; padding:0; border-radius:7px; background:#edf2ef; color:#40534c; font-size:20px; line-height:1; }
.toast-leaving { opacity:0; transform:translateX(12px); transition:.18s; }
@keyframes toast-in { from { opacity:0; transform:translateY(-8px); } }
.auth-overlay { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:20px; background:linear-gradient(135deg,rgba(10,37,28,.96),rgba(24,76,57,.91)); }
.auth-card { width:min(420px,100%); display:grid; gap:15px; padding:30px; border:1px solid #ffffff33; border-radius:18px; background:#fff; box-shadow:0 28px 90px #00160e66; }
.auth-card h2 { margin:2px 0 0; font-size:27px; }.auth-card label span { font-size:13px; }.auth-error { min-height:22px; margin:0; color:var(--danger); font-weight:700; }
.auth-mark { display:grid; width:48px; height:48px; place-items:center; border-radius:14px; color:white; background:var(--green); font-weight:900; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media(max-width:800px){body,body.menu-collapsed{padding-left:0}.side-menu{width:248px}.menu-toggle,body.menu-collapsed .menu-toggle{left:14px}.toast-region{top:12px;right:12px}.side-menu:not(:focus-within){}}