:root {
  color-scheme: light;
  --navy: #142b43;
  --navy-2: #203d58;
  --ink: #1b2d3d;
  --muted: #71808b;
  --soft: #f4f7f6;
  --line: #e4eae8;
  --green: #267868;
  --green-dark: #1e6759;
  --green-light: #eaf5f1;
  --amber: #cf8d3f;
  --white: #fff;
  --shadow: 0 14px 42px rgba(25, 48, 67, .075);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: #f5f7f6; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, label.button { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #81c9b7; outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { width: min(1120px, calc(100% - 56px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 99; left: 12px; top: -60px; padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--navy); }
.skip-link:focus { top: 12px; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e9eeec; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: var(--navy); }
.brand-mark img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font-size: 16px; letter-spacing: -.035em; font-weight: 760; }
.brand-copy small { color: #819096; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.local-badge { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #dfe9e5; background: #fbfdfc; color: #59736c; border-radius: 100px; padding: 9px 13px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.local-dot { width: 7px; height: 7px; background: #43a28b; border-radius: 50%; box-shadow: 0 0 0 3px #e5f3ee; }
.install-button { border: 0; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.hero { position: relative; overflow: hidden; min-height: 0; margin: 24px 0 18px; padding: 24px 30px 22px; border-radius: 18px; background: linear-gradient(115deg, #142b43 0%, #1c3c55 62%, #285a64 100%); color: #fff; box-shadow: 0 12px 30px rgba(25, 54, 73, .12); }
.hero-copy { max-width: 660px; }
.eyebrow, .section-kicker { margin: 0; font-size: 9px; font-weight: 800; line-height: 1.4; letter-spacing: .19em; text-transform: uppercase; }
.hero-eyebrow { color: #c5dcd6; }
.hero h1 { max-width: 600px; margin: 9px 0 8px; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.06; letter-spacing: -.05em; font-weight: 680; }
.hero-description { max-width: 560px; margin: 0 0 14px; color: #d0dce2; font-size: 13px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button { border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 16px; font-size: 12px; line-height: 1.2; font-weight: 750; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 17px; height: 17px; flex: none; }
.button-light { background: #f8fbfa; color: var(--navy); box-shadow: 0 5px 15px rgba(4, 19, 31, .15); }
.button-light:hover { background: #fff; box-shadow: 0 8px 22px rgba(4, 19, 31, .23); }
.button-hero-secondary { border: 1px solid rgba(226, 241, 236, .45); background: rgba(255, 255, 255, .08); color: #f6fbf9; }
.button-hero-secondary:hover { background: rgba(255, 255, 255, .16); }
.button-hero-secondary svg { color: #c9e3d9; }
.hero-footnote { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: #c3d5d6; font-size: 9px; line-height: 1.45; }
.hero-footnote svg { width: 13px; height: 13px; color: #a8d6c8; flex: none; }
.metrics { display: grid; grid-template-columns: 1fr 1fr 1.42fr; gap: 14px; margin-bottom: 49px; }
.metric-card { min-height: 89px; position: relative; display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: var(--white); border: 1px solid #e9eeec; border-radius: 14px; box-shadow: 0 5px 20px rgba(31, 53, 66, .025); }
.metric-icon { width: 37px; height: 37px; display: grid; flex: none; place-items: center; border-radius: 11px; }
.metric-icon svg { width: 21px; height: 21px; }
.metric-icon-green { color: #398674; background: #e9f5f0; }
.metric-icon-amber { color: #bb813c; background: #fbf1e2; }
.metric-card > div { display: flex; flex-direction: column; gap: 2px; }
.metric-label { color: #6d7a81; font-size: 10px; font-weight: 700; }
.metric-card strong { font-size: 20px; line-height: 1.1; letter-spacing: -.04em; color: #1b344a; }
.metric-sub { margin-left: auto; align-self: flex-end; color: #a1aaa9; font-size: 9px; white-space: nowrap; }
.metric-card-tip { gap: 11px; padding: 15px 18px; }
.tip-icon { width: 32px; height: 32px; display: grid; place-items: center; color: #ad7e41; flex: none; border-radius: 50%; background: #fbf1e2; }
.tip-icon svg { width: 21px; height: 21px; }
.metric-card-tip .metric-label { color: #6a7780; }
.metric-card-tip p { max-width: 390px; margin: 3px 0 0; color: #829097; font-size: 10px; line-height: 1.5; }
.reminders-section { margin-bottom: 52px; }
.section-heading, .supported-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-kicker { color: #86948f; font-size: 8px; }
.section-heading h2, .supported-heading h2 { margin: 5px 0 0; color: #1c3449; font-size: 22px; letter-spacing: -.045em; line-height: 1.15; }
.filters { display: flex; gap: 3px; padding: 4px; border: 1px solid #e7ecea; border-radius: 9px; background: #edf1ef; }
.filter-button { min-height: 29px; border: 0; border-radius: 6px; padding: 0 11px; background: transparent; color: #7b8988; font-size: 10px; font-weight: 700; }
.filter-button.active { color: #25473e; background: #fff; box-shadow: 0 1px 4px rgba(25,52,49,.1); }
.empty-state { min-height: 255px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 25px 20px; border: 1px dashed #d5dfdb; border-radius: 15px; background: rgba(255,255,255,.48); text-align: center; }
.empty-illustration { width: 65px; height: 65px; margin-bottom: 9px; }
.empty-illustration svg { width: 100%; height: 100%; }
.empty-state h3 { margin: 0 0 7px; color: #29445a; font-size: 15px; letter-spacing: -.02em; }
.empty-state p { max-width: 400px; margin: 0 0 17px; color: #86938e; font-size: 11px; line-height: 1.6; }
.button-primary { background: var(--green); color: #fff; box-shadow: 0 5px 13px rgba(39, 116, 99, .15); }
.button-primary:hover { background: var(--green-dark); box-shadow: 0 7px 17px rgba(39, 116, 99, .22); }
.reminder-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.reminder-card { min-width: 0; padding: 17px 18px 14px; border: 1px solid #e4ebe8; border-radius: 14px; background: #fff; box-shadow: 0 5px 19px rgba(20,44,61,.035); transition: transform .18s ease, box-shadow .18s ease; }
.reminder-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.reminder-card.is-done { background: #f8faf9; opacity: .76; }
.reminder-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reminder-type { display: inline-flex; align-items: center; gap: 6px; color: #6d7e7d; font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.reminder-type:before { content: ""; width: 6px; height: 6px; background: #428c78; border-radius: 50%; }
.reminder-type.pharmacy:before { background: #8875ad; }
.reminder-type.note:before { background: #c18b4b; }
.card-status { flex: none; padding: 5px 8px; border-radius: 20px; background: #eff6f2; color: #42806e; font-size: 9px; font-weight: 800; }
.card-status.urgent { color: #a45b42; background: #fbefeb; }
.card-status.check { color: #98713e; background: #fbf3e5; }
.card-status.done { color: #687b78; background: #e8eeec; }
.card-status.past { color: #99653f; background: #fbf0e4; }
.reminder-card h3 { margin: 11px 0 10px; color: #1d374c; font-size: 16px; letter-spacing: -.025em; line-height: 1.3; overflow-wrap: anywhere; }
.card-route { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); gap: 8px; align-items: center; padding: 10px 11px; border-radius: 9px; background: #f5f8f7; }
.route-point { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.route-point span { color: #98a29f; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.route-point strong { color: #4e626e; font-size: 10px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.route-arrow { display: grid; place-items: center; width: 27px; height: 27px; color: #4b8b7a; background: #e5f2ed; border-radius: 50%; font-size: 15px; }
.card-details { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 11px 1px 0; color: #79868c; font-size: 10px; }
.card-detail { display: inline-flex; align-items: center; gap: 5px; }
.card-detail svg { width: 13px; height: 13px; color: #8d9d99; flex: none; }
.card-detail strong { color: #576a74; font-weight: 700; }
.card-note { margin: 9px 0 0; padding: 8px 10px; border-left: 2px solid #d6e7df; background: #f7faf8; color: #72807c; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.card-note-standalone { white-space: pre-wrap; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; padding-top: 12px; margin-top: 11px; border-top: 1px solid #edf1ef; }
.card-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 9px; border: 1px solid #e1e9e5; border-radius: 7px; background: #fff; color: #567269; font-size: 9px; font-weight: 750; }
.card-action:hover { background: #f3f8f5; }
.card-action svg { width: 13px; height: 13px; }
.card-action.complete { border-color: #d2e6dc; color: #3b806a; }
.card-action.delete { color: #9b7970; }
.supported-section { margin: 0 0 39px; }
.supported-heading { align-items: end; margin-bottom: 15px; }
.supported-heading > p { max-width: 280px; margin: 0 0 2px; color: #82908c; font-size: 10px; line-height: 1.5; text-align: right; }
.supported-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.supported-card { min-height: 94px; display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #e8edeb; border-radius: 13px; background: #fff; }
.supported-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; flex: none; }
.supported-icon svg { width: 22px; height: 22px; }
.icon-blue { color: #4c7798; background: #eaf2f8; }
.icon-violet { color: #806aa7; background: #f1eef8; }
.supported-card h3 { margin: 0 0 5px; color: #334c5f; font-size: 12px; letter-spacing: -.015em; }
.supported-card p { margin: 0; color: #899590; font-size: 9px; line-height: 1.5; }
.supported-arrow { margin-left: auto; align-self: flex-start; color: #a3b1ac; font-size: 14px; }
.privacy-note { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border: 1px solid #e0e9e5; border-radius: 12px; background: #eef5f2; }
.privacy-note-icon { width: 29px; height: 29px; display: grid; flex: none; place-items: center; border-radius: 9px; background: #deeee7; color: #41806d; }
.privacy-note-icon svg { width: 18px; height: 18px; }
.privacy-note strong { display: block; margin: 1px 0 4px; color: #36564e; font-size: 10px; }
.privacy-note p { max-width: 900px; margin: 0; color: #71857f; font-size: 9px; line-height: 1.55; }
.footer { display: flex; justify-content: space-between; gap: 18px; padding: 18px 0 25px; color: #9aa5a1; font-size: 9px; }
.footer-dot { padding: 0 4px; color: #c1c9c6; }

/* Editor */
body.no-scroll { overflow: hidden; }
.overlay { position: fixed; z-index: 50; inset: 0; display: flex; justify-content: center; align-items: center; padding: 22px; background: rgba(13, 28, 41, .56); backdrop-filter: blur(4px); }
.editor { display: flex; flex-direction: column; width: min(800px, 100%); max-height: min(94vh, 1000px); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 25px 80px rgba(6, 23, 35, .32); }
.editor-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #edf1ef; background: #fff; }
.editor-heading { display: flex; align-items: center; gap: 12px; }
.editor-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: #e7f3ee; color: #36826e; }
.editor-mark svg { width: 18px; height: 18px; }
.editor-heading .section-kicker { font-size: 7px; }
.editor-heading h2 { margin: 3px 0 0; color: #1c354a; font-size: 18px; letter-spacing: -.04em; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #e7ece9; border-radius: 10px; background: #fff; color: #73817e; font-size: 23px; line-height: 1; }
.icon-button:hover { background: #f4f7f6; }
.editor-scroll { overflow-y: auto; overscroll-behavior: contain; }
#reminderForm { padding: 18px 22px 0; }
.scan-panel { padding: 17px 18px 14px; border: 1px solid #e3ece7; border-radius: 13px; background: #f7faf8; }
.scan-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.scan-panel-heading h3 { margin: 4px 0 5px; color: #284457; font-size: 16px; letter-spacing: -.03em; }
.scan-panel-heading p:not(.section-kicker) { max-width: 485px; margin: 0; color: #82908c; font-size: 10px; line-height: 1.5; }
.scan-local-tag { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-top: 3px; padding: 6px 8px; border: 1px solid #e0ece6; border-radius: 20px; background: #fff; color: #51816f; font-size: 8px; font-weight: 800; }
.scan-local-tag svg { width: 13px; height: 13px; }
.scan-type-choice { max-width: 470px; margin-top: 12px; }
.scan-type-choice select { min-height: 37px; }
.scan-actions { display: flex; gap: 9px; margin-top: 11px; }
.upload-button { cursor: pointer; }
.button-outline { border: 1px solid #dce6e1; background: #fff; color: #4c6e62; }
.button-outline:hover { background: #f4f8f5; }
.button-dark { background: #244a54; color: #fff; }
.button-dark:hover { background: #183d47; }
.button-dark svg { color: #c5e7dc; }
.button-scanner { border: 1px solid #cce3d7; background: #e9f5ee; color: #2f705b; }
.button-scanner:hover { background: #dbefe4; }
.button-scanner:disabled { cursor: wait; opacity: .58; transform: none; }
.button-scanner[aria-busy="true"] { cursor: wait; }
.button-scanner svg { color: #3d8167; }
.scanner-note { margin: 8px 0 0; color: #72817b; font-size: 8px; line-height: 1.5; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.photo-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 9px; border: 1px solid #e4ebe7; border-radius: 9px; background: #fff; }
.photo-preview img { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: #edf1ef; }
.photo-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.photo-info strong { max-width: 350px; overflow: hidden; color: #405761; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.photo-info span { color: #9aa39f; font-size: 8px; }
.text-button { margin-left: auto; border: 0; padding: 6px; background: transparent; color: #a0786b; font-size: 9px; font-weight: 750; }
.text-button:hover { text-decoration: underline; }
.scan-run-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.scan-run-row p { margin: 0; color: #84918d; font-size: 9px; line-height: 1.4; }
.button-scan { min-height: 36px; padding: 0 12px; background: #dceee7; color: #327660; font-size: 10px; }
.button-scan:hover:not(:disabled) { background: #cfe6db; }
.button-scan:disabled { cursor: not-allowed; opacity: .52; }
.button-scan svg { width: 15px; height: 15px; }
.ocr-status { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-top: 10px; border: 1px solid #d8eae2; border-radius: 8px; background: #edf7f2; color: #397760; }
.ocr-status > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.ocr-status strong { font-size: 9px; }
.ocr-status span:not(.spinner):not(.ocr-percent) { color: #708981; font-size: 8px; }
.ocr-percent { color: #4a7a67; font-size: 9px; font-weight: 750; }
.spinner { width: 15px; height: 15px; border: 2px solid #c4e0d4; border-top-color: #39816c; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.raw-details { margin-top: 11px; padding: 12px; border: 1px solid #dce7e2; border-radius: 10px; background: #fff; }
.raw-details summary { padding: 2px 1px; color: #435f57; cursor: pointer; font-size: 12px; font-weight: 750; line-height: 1.4; }
.raw-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e4ece8; }
.raw-toolbar > span { flex: 1; min-width: 160px; color: #788982; font-size: 10px; line-height: 1.45; }
.button-copy-raw { min-height: 34px; padding: 0 12px; border: 1px solid #cddfd7; background: #edf6f1; color: #2f715b; font-size: 10px; box-shadow: none; }
.button-copy-raw svg { width: 15px; height: 15px; }
.button-copy-raw:hover:not(:disabled) { background: #deeee6; }
.button-copy-raw:disabled { cursor: not-allowed; opacity: .5; }
.raw-details pre { min-height: min(190px, 30vh); max-height: min(48vh, 440px); overflow: auto; margin: 11px 0 0; padding: 13px; border: 1px solid #e2ebe7; border-radius: 8px; background: #f6faf8; color: #354a55; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.scan-disclaimer { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: #9a8a6f; font-size: 8px; line-height: 1.45; }
.scan-disclaimer svg { width: 13px; height: 13px; flex: none; }
.form-section-heading { display: flex; align-items: center; gap: 11px; margin: 21px 0 14px; }
.form-section-heading > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #f1f3ef; color: #71817b; font-size: 9px; font-weight: 800; }
.form-section-heading .section-kicker { font-size: 7px; }
.form-section-heading h3 { margin: 3px 0 0; color: #284356; font-size: 15px; letter-spacing: -.03em; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 13px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.field > span, .field-group-label { color: #51656d; font-size: 9px; font-weight: 750; }
.field > span b { color: #c07d48; }
.field small { color: #9aa4a0; font-size: 8px; line-height: 1.4; }
.field input, .field select, .field textarea { width: 100%; min-height: 38px; border: 1px solid #dfe7e3; border-radius: 8px; padding: 0 11px; outline: none; background: #fff; color: #334a58; font-size: 10px; }
.field textarea { min-height: 132px; padding: 10px 11px; resize: vertical; line-height: 1.5; }
.required-indicator { color: #c07d48; }
.field input::placeholder, .field textarea::placeholder { color: #b2bcb8; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #7bb7a5; box-shadow: 0 0 0 3px rgba(82, 161, 132, .1); }
.field.ocr-filled input { border-color: #d1a45e; background: #fff9ed; animation: fieldFlash 1.1s ease-out; }
@keyframes fieldFlash { 0% { box-shadow: 0 0 0 4px rgba(202, 150, 65, .2); } 100% { box-shadow: 0 0 0 0 rgba(202, 150, 65, 0); } }
.field select { padding-right: 25px; appearance: auto; }
.field-full { grid-column: 1 / -1; }
.date-time-row { display: grid; grid-template-columns: 1fr .72fr; gap: 12px; }
.field-group-label { display: block; margin-bottom: 7px; }
.editor-safety { display: flex; gap: 8px; align-items: flex-start; padding: 10px 11px; margin-top: 17px; border-radius: 8px; background: #fbf6ed; color: #8d785d; }
.editor-safety > span { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #ebd7b6; color: #73572e; font-size: 9px; font-weight: 800; }
.editor-safety p { margin: 0; font-size: 8px; line-height: 1.5; }
.editor-footer { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 0 15px; margin-top: 2px; background: linear-gradient(180deg, rgba(255,255,255,.88), #fff 25%); }
.button-quiet { border: 1px solid #e3e9e6; background: #fff; color: #6d7c79; }
.button-quiet:hover { background: #f6f8f7; }
.toast { position: fixed; z-index: 80; right: 23px; bottom: 22px; max-width: min(420px, calc(100% - 30px)); padding: 12px 16px; border-radius: 10px; background: #1d3a4d; color: #fff; box-shadow: 0 12px 32px rgba(15, 42, 58, .24); font-size: 11px; line-height: 1.45; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.hidden { display: none !important; }

@media (max-width: 850px) {
  .app-shell { width: min(100% - 36px, 760px); }
  .hero { padding: 22px 26px 20px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric-card-tip { grid-column: 1 / -1; min-height: 68px; }
  .reminder-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app-shell { width: min(100% - 28px, 500px); }
  .topbar { height: 69px; }
  .brand-mark, .brand-mark img { width: 37px; height: 37px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 8px; }
  .local-badge { padding: 7px 9px; font-size: 9px; }
  .install-button { padding: 8px 10px; font-size: 10px; }
  .hero { margin: 16px 0 14px; padding: 20px 18px 18px; border-radius: 16px; }
  .hero h1 { max-width: 360px; font-size: clamp(29px, 8.2vw, 35px); }
  .hero-description { max-width: 365px; margin-bottom: 13px; font-size: 12px; }
  .hero-footnote { max-width: 100%; margin-top: 9px; font-size: 8px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 38px; }
  .metric-card { gap: 9px; min-height: 79px; padding: 12px 11px; }
  .metric-icon { width: 31px; height: 31px; border-radius: 9px; }
  .metric-icon svg { width: 18px; height: 18px; }
  .metric-label { font-size: 9px; }
  .metric-card strong { font-size: 18px; }
  .metric-sub { display: none; }
  .metric-card-tip { grid-column: 1/-1; min-height: 67px; padding: 11px 13px; }
  .metric-card-tip p { font-size: 9px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section-heading h2, .supported-heading h2 { font-size: 20px; }
  .filters { align-self: stretch; width: fit-content; }
  .filter-button { min-height: 28px; padding: 0 10px; font-size: 9px; }
  .empty-state { min-height: 235px; }
  .reminder-card { padding: 15px 14px 12px; }
  .supported-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .supported-heading > p { max-width: 350px; text-align: left; }
  .supported-grid { grid-template-columns: 1fr; gap: 9px; }
  .supported-card { min-height: 80px; padding: 13px; }
  .privacy-note { padding: 13px; }
  .privacy-note p { font-size: 8px; }
  .footer { flex-direction: column; gap: 5px; font-size: 8px; }
  .overlay { align-items: stretch; padding: 0; }
  .editor { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .editor-header { padding: 12px 15px; padding-top: max(12px, env(safe-area-inset-top)); }
  #reminderForm { padding: 14px 14px 0; }
  .scan-panel { padding: 13px 12px 11px; }
  .scan-panel-heading { display: block; }
  .scan-local-tag { margin-top: 9px; }
  .scan-actions { flex-wrap: wrap; }
  .scan-actions .button { flex: 1 1 auto; min-width: 120px; padding: 0 10px; font-size: 10px; }
  .scan-run-row { align-items: flex-start; flex-direction: column; }
  .scan-run-row .button { align-self: stretch; }
  .field-grid { grid-template-columns: 1fr; gap: 11px; }
  .field-full { grid-column: 1; }
  .date-time-row { grid-template-columns: 1fr .8fr; gap: 9px; }
  .field input, .field select { min-height: 42px; font-size: 12px; }
  .field > span, .field-group-label { font-size: 10px; }
  .editor-footer { padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .editor-footer .button { min-height: 43px; }
  .toast { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 365px) {
  .app-shell { width: calc(100% - 22px); }
  .topbar-actions { gap: 5px; }
  .local-badge { padding: 7px; font-size: 8px; }
  .local-dot { width: 6px; height: 6px; }
  .hero { padding-left: 17px; padding-right: 17px; }
  .hero h1 { font-size: 31px; }
  .metric-card { gap: 6px; padding: 10px 8px; }
  .metric-label { font-size: 8px; }
  .date-time-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Preferenze locali */
.preferences-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: -27px 0 48px; }
.preference-card { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid #e5ece9; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(31,53,66,.025); }
.preference-icon { width: 37px; height: 37px; display: grid; flex: none; place-items: center; border-radius: 11px; }
.preference-icon svg { width: 20px; height: 20px; }
.preference-icon-theme { color: #567d91; background: #edf3f6; }
.preference-icon-notification { color: #3d846f; background: #eaf5f0; }
.preference-copy { min-width: 0; flex: 1; }
.preference-copy .section-kicker { margin-bottom: 3px; }
.preference-copy h2 { margin: 0 0 4px; color: #294457; font-size: 12px; letter-spacing: -.015em; }
.preference-copy p { margin: 0; color: #7d8b90; font-size: 9px; line-height: 1.45; }
.preference-copy small { display: block; margin-top: 4px; color: #9aa6a2; font-size: 8px; line-height: 1.4; }
.preference-button { flex: none; min-height: 34px; border: 1px solid #dce7e2; border-radius: 8px; padding: 0 11px; background: #f8fbf9; color: #3c7263; font-size: 9px; font-weight: 800; }
.preference-button:hover { background: #eaf4ef; border-color: #c6ded3; }
.preference-button[aria-pressed="true"] { border-color: #b9d7ca; background: #e6f2ec; color: #2e6d59; }
.preference-button:disabled { cursor: not-allowed; opacity: .58; }

/* Persisted dark theme */
html[data-theme="dark"] { color-scheme: dark; --ink: #e3ecef; --muted: #a6b6bb; --soft: #17252d; --line: #30424b; --white: #17252d; --shadow: 0 14px 42px rgba(0,0,0,.25); }
html[data-theme="dark"] body { background: #0e181e; color: #e3ecef; }
html[data-theme="dark"] .topbar { border-color: #2b3c45; }
html[data-theme="dark"] .brand { color: #dce9ec; }
html[data-theme="dark"] .brand-copy small { color: #9aadb2; }
html[data-theme="dark"] .local-badge { border-color: #34464d; background: #16242b; color: #b0c7c1; }
html[data-theme="dark"] .local-dot { box-shadow: 0 0 0 3px #203931; }
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .reminder-card,
html[data-theme="dark"] .supported-card,
html[data-theme="dark"] .preference-card { border-color: #2a3b44; background: #15232b; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .metric-card-tip .metric-label { color: #b0bec1; }
html[data-theme="dark"] .metric-card strong { color: #e5eef0; }
html[data-theme="dark"] .metric-sub,
html[data-theme="dark"] .metric-card-tip p { color: #9aabae; }
html[data-theme="dark"] .metric-icon-green { color: #98d0ba; background: #213a33; }
html[data-theme="dark"] .metric-icon-amber,
html[data-theme="dark"] .tip-icon { color: #e0bb84; background: #3b3024; }
html[data-theme="dark"] .section-kicker { color: #9aa9aa; }
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .supported-heading h2,
html[data-theme="dark"] .reminder-card h3,
html[data-theme="dark"] .supported-card h3,
html[data-theme="dark"] .preference-copy h2 { color: #e0e9ec; }
html[data-theme="dark"] .filters { border-color: #2e4149; background: #142129; }
html[data-theme="dark"] .filter-button { color: #a7b5b7; }
html[data-theme="dark"] .filter-button.active { background: #26373e; color: #d8e7e1; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
html[data-theme="dark"] .empty-state { border-color: #34464d; background: rgba(21,35,43,.7); }
html[data-theme="dark"] .empty-illustration svg rect { fill: #20352f; }
html[data-theme="dark"] .empty-illustration svg path { stroke: #91b6a9; }
html[data-theme="dark"] .empty-state h3 { color: #dbe7e9; }
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .supported-heading > p { color: #a0afb1; }
html[data-theme="dark"] .card-route,
html[data-theme="dark"] .card-note { background: #1b2b33; }
html[data-theme="dark"] .route-point span { color: #9aabad; }
html[data-theme="dark"] .route-point strong { color: #d4e0e3; }
html[data-theme="dark"] .route-arrow { color: #acd7c6; background: #294339; }
html[data-theme="dark"] .card-details { color: #a8b5b8; }
html[data-theme="dark"] .card-detail strong { color: #d2dfe1; }
html[data-theme="dark"] .card-note { border-left-color: #3a5c4e; color: #b3c0be; }
html[data-theme="dark"] .card-actions { border-color: #2a3b43; }
html[data-theme="dark"] .card-action,
html[data-theme="dark"] .button-outline,
html[data-theme="dark"] .button-quiet,
html[data-theme="dark"] .icon-button { border-color: #35474e; background: #192830; color: #c0d1cf; }
html[data-theme="dark"] .card-action:hover,
html[data-theme="dark"] .button-outline:hover,
html[data-theme="dark"] .button-quiet:hover,
html[data-theme="dark"] .icon-button:hover { background: #22343b; }
html[data-theme="dark"] .card-action.complete { border-color: #3c6352; color: #a9d8c2; }
html[data-theme="dark"] .card-action.delete { color: #d1a69b; }
html[data-theme="dark"] .card-status { color: #b3d7c7; background: #233b32; }
html[data-theme="dark"] .card-status.urgent { color: #e8b2a0; background: #432e2a; }
html[data-theme="dark"] .card-status.check { color: #e3c18d; background: #3d3426; }
html[data-theme="dark"] .card-status.done { color: #b3c0bd; background: #2a3839; }
html[data-theme="dark"] .card-status.past { color: #e1b38d; background: #3d3026; }
html[data-theme="dark"] .supported-icon.icon-blue { color: #a3cce4; background: #243846; }
html[data-theme="dark"] .supported-icon.icon-violet { color: #c3b3e4; background: #332d42; }
html[data-theme="dark"] .supported-card p { color: #a1afb0; }
html[data-theme="dark"] .supported-arrow { color: #a1b1b0; }
html[data-theme="dark"] .privacy-note { border-color: #2c463d; background: #172923; }
html[data-theme="dark"] .privacy-note-icon { background: #223b31; color: #a1d2bd; }
html[data-theme="dark"] .privacy-note strong { color: #c5ded1; }
html[data-theme="dark"] .privacy-note p { color: #a6bbb1; }
html[data-theme="dark"] .footer { color: #95a5a7; }
html[data-theme="dark"] .footer-dot { color: #647579; }
html[data-theme="dark"] .overlay { background: rgba(0,0,0,.68); }
html[data-theme="dark"] .editor { border: 1px solid #2c3d45; background: #111d24; }
html[data-theme="dark"] .editor-header { border-color: #293a42; background: #14222a; }
html[data-theme="dark"] .editor-mark { background: #203b32; color: #a5d7c0; }
html[data-theme="dark"] .editor-heading h2,
html[data-theme="dark"] .scan-panel-heading h3,
html[data-theme="dark"] .form-section-heading h3 { color: #e0e9ec; }
html[data-theme="dark"] .scan-panel { border-color: #2b4039; background: #16251f; }
html[data-theme="dark"] .scan-panel-heading p:not(.section-kicker),
html[data-theme="dark"] .scan-run-row p { color: #a4b5ae; }
html[data-theme="dark"] .scan-local-tag { border-color: #34483d; background: #1c2e26; color: #b2d9c8; }
html[data-theme="dark"] .button-dark { background: #244a54; color: #f5fffc; }
html[data-theme="dark"] .button-scanner { border-color: #365947; background: #20382c; color: #b9e2ca; }
html[data-theme="dark"] .button-scanner:hover { background: #294838; }
html[data-theme="dark"] .button-scanner svg { color: #a9d8be; }
html[data-theme="dark"] .scanner-note { color: #a9bbb0; }
html[data-theme="dark"] .photo-preview { border-color: #30424a; background: #18272f; }
html[data-theme="dark"] .photo-info strong { color: #d3dfe1; }
html[data-theme="dark"] .photo-info span { color: #a0adaf; }
html[data-theme="dark"] .text-button { color: #d2a995; }
html[data-theme="dark"] .ocr-status { border-color: #315548; background: #1b3029; color: #b1dfc7; }
html[data-theme="dark"] .ocr-status span:not(.spinner):not(.ocr-percent) { color: #a5c3b3; }
html[data-theme="dark"] .spinner { border-color: #355b4b; border-top-color: #a2d4bd; }
html[data-theme="dark"] .raw-details { border-color: #30414a; background: #17252d; }
html[data-theme="dark"] .raw-details summary { color: #d0e0dc; }
html[data-theme="dark"] .raw-toolbar { border-color: #30434a; }
html[data-theme="dark"] .raw-toolbar > span { color: #a7b9b5; }
html[data-theme="dark"] .button-copy-raw { border-color: #37594c; background: #20372e; color: #bbdfcb; }
html[data-theme="dark"] .button-copy-raw:hover:not(:disabled) { background: #29483c; }
html[data-theme="dark"] .raw-details pre { border-color: #30444c; background: #101b21; color: #d5e2e1; }
html[data-theme="dark"] .scan-disclaimer { color: #d0b98f; }
html[data-theme="dark"] .form-section-heading > span { background: #243238; color: #c1cfcc; }
html[data-theme="dark"] .field > span,
html[data-theme="dark"] .field-group-label { color: #c2d0d1; }
html[data-theme="dark"] .field small { color: #a2b0ae; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { border-color: #35474e; background: #17262e; color: #e0e9eb; }
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder { color: #87999e; }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus { border-color: #72aa96; box-shadow: 0 0 0 3px rgba(82,161,132,.18); }
html[data-theme="dark"] .field.ocr-filled input { border-color: #a9834a; background: #342c20; }
html[data-theme="dark"] .editor-safety { background: #332d22; color: #e0cda7; }
html[data-theme="dark"] .editor-safety > span { background: #645132; color: #f3dbaa; }
html[data-theme="dark"] .editor-footer { background: linear-gradient(180deg, rgba(17,29,36,.82), #111d24 25%); }
html[data-theme="dark"] .preference-icon-theme { color: #bdd2e3; background: #253743; }
html[data-theme="dark"] .preference-icon-notification { color: #a8d9c3; background: #223b32; }
html[data-theme="dark"] .preference-copy p { color: #a8b7b9; }
html[data-theme="dark"] .preference-copy small { color: #93a5a4; }
html[data-theme="dark"] .preference-button { border-color: #385248; background: #20362e; color: #b2ddca; }
html[data-theme="dark"] .preference-button:hover,
html[data-theme="dark"] .preference-button[aria-pressed="true"] { border-color: #547b67; background: #294238; color: #d3eee0; }
html[data-theme="dark"] .install-button { background: #244d59; color: #e4f1f3; }
html[data-theme="dark"] .skip-link { background: #192830; color: #e3ecef; }

@media (max-width: 600px) {
  .preferences-section { grid-template-columns: 1fr; gap: 9px; margin: -20px 0 38px; }
  .preference-card { align-items: flex-start; padding: 13px; }
  .preference-button { align-self: center; padding: 0 9px; }
}
@media (max-width: 365px) {
  .preference-card { gap: 8px; padding: 11px 9px; }
  .preference-icon { width: 32px; height: 32px; }
  .preference-copy small { font-size: 7px; }
  .preference-button { font-size: 8px; padding: 0 7px; }
}
.inline-settings-button { display: inline; border: 0; padding: 0 2px; background: transparent; color: #3d7968; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
html[data-theme="dark"] .inline-settings-button { color: #addbc5; }

/* Opzioni: impostazioni e informazioni fuori dalla home principale */
.options-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; border: 1px solid #dfe9e5; border-radius: 10px; padding: 0 12px; background: #fff; color: #47665b; font-size: 11px; font-weight: 760; }
.options-button svg { width: 16px; height: 16px; flex: none; }
.options-button:hover { background: #f2f7f4; border-color: #cbded4; }
.options-button[aria-expanded="true"] { background: #eaf4ef; border-color: #c1dbcc; }
.options-overlay { z-index: 51; }
.options-dialog { display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(90vh, 900px); overflow: hidden; border: 1px solid #e5ece9; border-radius: 18px; background: #fff; box-shadow: 0 25px 80px rgba(6, 23, 35, .32); }
.options-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 21px; border-bottom: 1px solid #edf1ef; background: #fff; }
.options-heading .section-kicker { font-size: 7px; }
.options-heading h2 { margin: 3px 0 0; color: #1c354a; font-size: 19px; letter-spacing: -.04em; }
.options-header-actions { display: flex; align-items: center; gap: 9px; }
.options-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 20px 21px 24px; }
.options-scroll .preferences-section { grid-template-columns: 1fr; gap: 10px; margin: 0 0 27px; }
.options-scroll .preference-card { padding: 14px 15px; }
.diagnostics-panel { min-width: 0; display: block; padding: 0; overflow: hidden; border: 1px solid #e5ece9; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(31,53,66,.025); }
.diagnostics-panel-heading { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 13px 15px; cursor: pointer; list-style: none; user-select: none; }
.diagnostics-panel-heading::-webkit-details-marker { display: none; }
.diagnostics-panel-heading:focus-visible { outline: 3px solid rgba(79, 145, 112, .55); outline-offset: -4px; border-radius: 12px; }
.diagnostics-panel-heading:hover { background: #f5f8f6; }
.preference-icon-diagnostics { flex: none; color: #3d806a; background: #eaf5ef; }
.diagnostics-panel-copy { display: block; flex: 1 1 auto; min-width: 0; }
.diagnostics-panel-copy .section-kicker { display: block; margin: 0 0 4px; color: #6c8d7e; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.diagnostics-panel-title { display: block; color: #20394e; font-size: 15px; font-weight: 780; letter-spacing: -.035em; }
.diagnostics-panel-disclosure { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid #d4e4da; border-radius: 50%; background: #fff; color: #4c7866; transition: transform .18s ease, background-color .18s ease; }
.diagnostics-panel-disclosure svg { width: 18px; height: 18px; }
.diagnostics-panel[open] .diagnostics-panel-disclosure { transform: rotate(180deg); }
.diagnostics-panel-body { padding: 14px 15px 15px; border-top: 1px solid #e5ece9; }
.diagnostics-description { margin: 0; color: #7d8b90; font-size: 10px; line-height: 1.5; }
.diagnostics-status { margin: 8px 0 0; color: #506e61; font-size: 10px; font-weight: 700; line-height: 1.5; }
.diagnostics-details { margin-top: 8px; color: #526d61; font-size: 9px; }
.diagnostics-details summary { width: fit-content; cursor: pointer; font-weight: 750; }
.diagnostics-details pre { max-height: 210px; overflow: auto; margin: 8px 0 0; padding: 10px; border: 1px solid #e1eae5; border-radius: 8px; background: #f6f9f7; color: #41564e; white-space: pre-wrap; overflow-wrap: anywhere; font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.diagnostics-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.diagnostics-actions .preference-button { min-height: 34px; }
.options-scroll .diagnostics-panel-body { padding: 13px 15px 14px; }
.options-scroll .diagnostics-description,
.options-scroll .diagnostics-status { font-size: 10px; }
.options-scroll .diagnostics-details pre { font-size: 9px; }
.options-scroll .preference-copy p { font-size: 10px; }
.options-scroll .preference-copy small { font-size: 9px; }
.options-scroll .preference-button { font-size: 10px; }
.options-scroll .supported-section { margin: 0 0 24px; }
.options-scroll .supported-heading { align-items: flex-start; margin-bottom: 12px; }
.options-scroll .supported-heading > p { max-width: 100%; text-align: left; }
.options-scroll .supported-grid { grid-template-columns: 1fr; gap: 9px; }
.options-scroll .supported-card { min-height: 82px; }
.options-scroll .supported-card p { font-size: 10px; }
.options-scroll .privacy-note p { font-size: 10px; }
html[data-theme="dark"] .options-button { border-color: #35474e; background: #18272e; color: #c2d4d1; }
html[data-theme="dark"] .options-button:hover,
html[data-theme="dark"] .options-button[aria-expanded="true"] { border-color: #466454; background: #20352c; color: #d1e8dc; }
html[data-theme="dark"] .options-dialog { border-color: #2c3d45; background: #111d24; }
html[data-theme="dark"] .options-header { border-color: #293a42; background: #14222a; }
html[data-theme="dark"] .options-heading h2 { color: #e0e9ec; }
html[data-theme="dark"] .diagnostics-panel { border-color: #2a3b44; background: #15232b; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
html[data-theme="dark"] .diagnostics-panel-heading:hover { background: #1b2b32; }
html[data-theme="dark"] .preference-icon-diagnostics { color: #a8d6bd; background: #20382d; }
html[data-theme="dark"] .diagnostics-panel-copy .section-kicker { color: #a0c7b1; }
html[data-theme="dark"] .diagnostics-panel-title { color: #e0e9ec; }
html[data-theme="dark"] .diagnostics-panel-disclosure { border-color: #354d41; background: #1a2a23; color: #b5dac4; }
html[data-theme="dark"] .diagnostics-panel-body { border-top-color: #30434a; }
html[data-theme="dark"] .diagnostics-description { color: #a3b4b8; }
html[data-theme="dark"] .diagnostics-status,
html[data-theme="dark"] .diagnostics-details { color: #b8d4c7; }
html[data-theme="dark"] .diagnostics-details pre { border-color: #30434a; background: #101c22; color: #c6d7d2; }
@media (max-width: 600px) {
  .options-dialog { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .options-header { padding: 12px 15px; padding-top: max(12px, env(safe-area-inset-top)); }
  .options-scroll { padding: 15px 14px calc(20px + env(safe-area-inset-bottom)); }
  .options-scroll .preferences-section { margin-bottom: 22px; }
  .options-scroll .preference-card { align-items: flex-start; padding: 13px; }
  .diagnostics-panel-heading { min-height: 62px; padding: 11px 13px; }
  .options-scroll .diagnostics-panel-body { padding: 12px 13px 13px; }
  .options-scroll .preference-button { align-self: center; }
}
@media (max-width: 420px) {
  .local-badge { display: none; }
  .options-button { min-height: 34px; padding: 0 10px; font-size: 10px; }
}

/* Sincronizzazione cloud facoltativa: pannello a tendina, chiuso per impostazione predefinita */
.sync-panel { display: block; margin: 0 0 26px; padding: 0; overflow: hidden; border: 1px solid #dce8e2; border-radius: 14px; background: #f7faf8; }
.sync-panel-heading { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 13px 16px; cursor: pointer; list-style: none; user-select: none; }
.sync-panel-heading::-webkit-details-marker { display: none; }
.sync-panel-heading:focus-visible { outline: 3px solid rgba(79, 145, 112, .55); outline-offset: -4px; border-radius: 12px; }
.sync-panel-heading:hover { background: #f0f6f2; }
.preference-icon-sync { flex: none; background: #e4f1eb; color: #3b8069; }
.sync-panel-copy { display: block; flex: 1 1 auto; min-width: 0; }
.sync-panel-copy .section-kicker { display: block; margin: 0 0 4px; color: #6c8d7e; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.sync-panel-title { display: block; color: #20394e; font-size: 16px; font-weight: 780; letter-spacing: -.035em; }
.sync-panel-disclosure { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border: 1px solid #d4e4da; border-radius: 50%; background: #fff; color: #4c7866; transition: transform .18s ease, background-color .18s ease; }
.sync-panel-disclosure svg { width: 18px; height: 18px; }
.sync-panel[open] .sync-panel-disclosure { transform: rotate(180deg); }
.sync-panel-body { padding: 14px 16px 16px; border-top: 1px solid #e2ece6; }
.sync-status { margin: 0 0 12px; color: #70817a; font-size: 10px; line-height: 1.5; }
.sync-config-grid, .sync-login-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.sync-config-grid { margin-top: 0; }
#syncLoginPanel[hidden] { display: none; }
.sync-field { display: grid; gap: 5px; min-width: 0; color: #516b60; font-size: 9px; font-weight: 760; }
.sync-field input { width: 100%; min-width: 0; min-height: 38px; border: 1px solid #d7e3dd; border-radius: 9px; padding: 0 10px; outline: none; background: #fff; color: #24384a; font: 500 11px/1.4 system-ui, sans-serif; }
.sync-field input:focus { border-color: #5b9b7e; box-shadow: 0 0 0 3px rgba(79, 145, 112, .13); }
.sync-field input::placeholder { color: #9baaa4; }
.sync-button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sync-account-actions { grid-column: 1 / -1; margin-top: 0; }
.sync-secondary-button { background: #fff; color: #47665b; border: 1px solid #d8e3dd; }
.sync-secondary-button:hover { background: #f0f6f2; }
.sync-config-status { min-height: 14px; color: #63766d; font-size: 9px; }
.sync-privacy-copy { margin: 12px 0 0; color: #72827c; font-size: 9px; line-height: 1.55; }
.sync-privacy-copy code { color: #365d4e; font-size: .92em; }
html[data-theme="dark"] .sync-panel { border-color: #2f473c; background: #15251f; }
html[data-theme="dark"] .sync-panel-heading:hover { background: #1b3026; }
html[data-theme="dark"] .preference-icon-sync { background: #20382d; color: #a8d6bd; }
html[data-theme="dark"] .sync-panel-title { color: #e0e9ec; }
html[data-theme="dark"] .sync-panel-disclosure { border-color: #354d41; background: #1a2a23; color: #b5dac4; }
html[data-theme="dark"] .sync-panel-body { border-top-color: #2b4136; }
html[data-theme="dark"] .sync-status,
html[data-theme="dark"] .sync-config-status,
html[data-theme="dark"] .sync-privacy-copy { color: #a3b9ad; }
html[data-theme="dark"] .sync-panel-copy .section-kicker { color: #a0c7b1; }
html[data-theme="dark"] .sync-field { color: #c2d4cc; }
html[data-theme="dark"] .sync-field input { border-color: #354c42; background: #101c19; color: #e2ece6; }
html[data-theme="dark"] .sync-secondary-button { border-color: #3a5045; background: #1a2a23; color: #cae0d3; }
html[data-theme="dark"] .sync-secondary-button:hover { background: #22392d; }
html[data-theme="dark"] .sync-privacy-copy code { color: #c2e4d0; }
@media (max-width: 600px) {
  .sync-panel-heading { min-height: 62px; padding: 11px 13px; }
  .sync-panel-body { padding: 12px 13px 13px; }
  .sync-config-grid, .sync-login-grid { grid-template-columns: 1fr; }
  .sync-account-actions { grid-column: auto; }
  .sync-account-actions .preference-button { flex: 1 1 calc(50% - 8px); }
}

/* Tasto rapido di sincronizzazione dalla home */
.section-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: none; }
.sync-home-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid #cfe1d8; border-radius: 9px; background: #eef6f2; color: #2f6e5c; font-size: 10px; font-weight: 760; white-space: nowrap; }
.sync-home-button svg { width: 15px; height: 15px; flex: none; }
.sync-home-button:hover { border-color: #a9cebc; background: #e3f1e9; }
.sync-home-button:disabled { opacity: .55; cursor: wait; }
html[data-theme="dark"] .sync-home-button { border-color: #355849; background: #1b342a; color: #b9e2cb; }
html[data-theme="dark"] .sync-home-button:hover { border-color: #49755e; background: #234333; }
@media (max-width: 600px) {
  .section-heading-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 8px; }
  .sync-home-button { width: 100%; min-height: 37px; }
  .section-heading-actions .filters { width: 100%; justify-content: center; }
  .section-heading-actions .filter-button { flex: 1; }
}

/* Richieste digitali ricevute, dettaglio autenticato e portale web mittenti */
.inbox-section { padding: 18px 20px 20px; border: 1px solid #dce9e3; border-radius: 16px; background: linear-gradient(180deg, #f8fcfa 0%, #f2f8f5 100%); }
.inbox-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #1e6759; color: #fff; font-size: 11px; font-weight: 800; vertical-align: middle; letter-spacing: 0; }
.inbox-empty { min-height: 150px; padding: 20px 16px; }
.card-status.new-req { background: #e3f2fd; color: #195685; }
.card-status.received-req { background: #dbeeff; color: #0f4c81; }
.card-status.in-progress { background: #fef3df; color: #96621c; }
.card-action.recv-action { border-color: #9dc8ed; background: #e8f4fd; color: #155992; }
.card-action.recv-action:hover { background: #d8ecfc; }
.button-recv-soft { border: 1px solid #9dc8ed; background: #e8f4fd; color: #155992; }
.button-recv-soft:hover { background: #d8ecfc; }
.card-action.primary-action { border-color: #267868; background: #267868; color: #fff; }
.card-action.primary-action:hover { background: #1e6759; }
.inbox-section .card-action.delete { border-color: #ebc6c0; background: #fdf3f1; color: #aa3b2e; }
.inbox-section .card-action.delete:hover { background: #fae6e3; }
.clear-completed-inbox-button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 1px solid #ebc6c0; border-radius: 9px; background: #fdf3f1; color: #aa3b2e; font-size: 10.5px; font-weight: 750; }
.clear-completed-inbox-button:hover { background: #fae6e3; }
.clear-completed-inbox-button[hidden] { display: none; }
.button-danger-soft { border: 1px solid #ebc6c0; background: #fdf3f1; color: #aa3b2e; }
.button-danger-soft:hover { background: #fae6e3; }
.button-danger-soft[hidden] { display: none; }
.request-detail-overlay { z-index: 54; }
.request-detail-dialog { width: min(680px, 100%); }
.request-detail-scroll { padding: 18px 22px 22px; overflow-y: auto; }
.request-detail-status-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid #e7eeeb; }
.request-detail-sender { color: #5d726c; font-size: 11px; font-weight: 700; }
.request-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-bottom: 18px; }
.request-detail-item { padding: 10px 12px; border: 1px solid #e6eeeb; border-radius: 10px; background: #f9fbfa; }
.request-detail-item.full { grid-column: 1 / -1; }
.request-detail-item span { display: block; margin-bottom: 3px; color: #7b8b87; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.request-detail-item strong { display: block; color: #1f3649; font-size: 12px; font-weight: 680; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.request-status-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 0; border-top: 1px solid #e8eeeb; }
.request-status-actions .button { flex: 1 1 140px; min-height: 40px; }
.request-status-actions .button.is-current-status { outline: 2px solid #267868; outline-offset: 2px; }
.request-detail-footer { margin-top: 6px; padding-top: 12px; }

.portal-open-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sync-field select { width: 100%; min-height: 38px; border: 1px solid #d7e3dd; border-radius: 9px; padding: 0 10px; background: #fff; color: #24384a; font: 500 11px/1.4 system-ui, sans-serif; }
.invite-manager { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dfeae4; display: grid; gap: 16px; }
.invite-create-card { padding: 13px 14px; border: 1px solid #dce8e2; border-radius: 12px; background: #fff; }
.invite-create-card h3, .admin-sublist h3 { margin: 0 0 6px; color: #1f394d; font-size: 13px; }
.admin-sublist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.admin-sublist-head h3 { margin: 0; }
.invite-delete-button { border-color: #e6c6c1; color: #9c382a; }
html[data-theme="dark"] .invite-delete-button { border-color: #5b3733; color: #f0aba0; }
.sender-delete-button { border-color: #e6c6c1; color: #9c382a; }
html[data-theme="dark"] .sender-delete-button { border-color: #5b3733; color: #f0aba0; }
.generated-invite-box { margin-top: 12px; padding: 12px 13px; border: 1px dashed #3b8069; border-radius: 10px; background: #edf7f2; }
.generated-invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.generated-invite-row code { padding: 6px 10px; border-radius: 7px; background: #fff; border: 1px solid #cfe3d9; color: #142b43; font: 800 14px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.generated-invite-box small { display: block; color: #547266; font-size: 9.5px; line-height: 1.45; }
.admin-items { display: grid; gap: 8px; }
.admin-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #e2ebe7; border-radius: 10px; background: #fff; font-size: 10.5px; }
.admin-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-item-info strong { color: #20384c; font-size: 11px; overflow-wrap: anywhere; }
.admin-item-info span { color: #758681; font-size: 9.5px; }
.admin-empty { margin: 0; color: #7d8d88; font-size: 10px; }

/* Portale Web Mittenti (richiesta.html) */
html[data-theme="dark"] .inbox-section { border-color: #2c453b; background: linear-gradient(180deg, #15251f 0%, #12201b 100%); }
html[data-theme="dark"] .inbox-badge { background: #338a73; color: #f4fffb; }
html[data-theme="dark"] .inbox-section .card-action.delete,
html[data-theme="dark"] .clear-completed-inbox-button,
html[data-theme="dark"] .button-danger-soft { border-color: #63383b; background: #341f22; color: #f2a197; }
html[data-theme="dark"] .inbox-section .card-action.delete:hover,
html[data-theme="dark"] .clear-completed-inbox-button:hover,
html[data-theme="dark"] .button-danger-soft:hover { background: #42272b; }
html[data-theme="dark"] .card-status.new-req { background: #1d3549; color: #a7d4f7; }
html[data-theme="dark"] .card-status.received-req,
html[data-theme="dark"] .card-action.recv-action,
html[data-theme="dark"] .button-recv-soft { border-color: #2f6999; background: #142b3f; color: #9ad2ff; }
html[data-theme="dark"] .card-action.recv-action:hover,
html[data-theme="dark"] .button-recv-soft:hover { background: #1a3752; }
html[data-theme="dark"] .card-status.in-progress { background: #3b2f1c; color: #f3ca8c; }
html[data-theme="dark"] .request-detail-dialog { background: #111d24; border: 1px solid #2b3d46; }
html[data-theme="dark"] .request-detail-status-bar,
html[data-theme="dark"] .request-status-actions { border-color: #293b43; }
html[data-theme="dark"] .request-detail-sender { color: #a8c0b8; }
html[data-theme="dark"] .request-detail-item { border-color: #2a3c44; background: #16252d; }
html[data-theme="dark"] .request-detail-item span { color: #9ab0ac; }
html[data-theme="dark"] .request-detail-item strong { color: #e2ecef; }
html[data-theme="dark"] .sync-field select { border-color: #354c42; background: #101c19; color: #e2ece6; }
html[data-theme="dark"] .invite-manager { border-color: #2c4338; }
html[data-theme="dark"] .invite-create-card,
html[data-theme="dark"] .admin-item { border-color: #2d4339; background: #13211c; }
html[data-theme="dark"] .invite-create-card h3,
html[data-theme="dark"] .admin-sublist h3,
html[data-theme="dark"] .admin-item-info strong { color: #dfece8; }
html[data-theme="dark"] .admin-item-info span,
html[data-theme="dark"] .admin-empty { color: #9db2aa; }
html[data-theme="dark"] .generated-invite-box { border-color: #54967d; background: #193027; }
html[data-theme="dark"] .generated-invite-row code { border-color: #395c4e; background: #0e1a16; color: #d9f3e7; }
html[data-theme="dark"] .generated-invite-box small { color: #b1cfc2; }

@media (max-width: 640px) {
  .request-detail-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Portale Web Mittenti (richiesta.html / invia.html) — Scheda Ospedaliera + Stupefacenti
   ========================================================================== */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body.portal-body {
  --p-bg: #eaf0ee;
  --p-surface: #ffffff;
  --p-surface-2: #f4f8f7;
  --p-surface-route: #edf6f3;
  --p-ink: #142a3b;
  --p-muted: #5b7078;
  --p-line: #cfddd8;
  --p-line-soft: #e1ece8;
  --p-brand: #1f7866;
  --p-brand-hover: #186354;
  --p-brand-soft: #e1f3ed;
  --p-warn-bg: #fff8eb;
  --p-warn-border: #edd095;
  --p-warn-ink: #6e4812;
  --p-input-bg: #ffffff;
  --p-input-border: #bfd0ca;
  --p-shadow: 0 10px 28px rgba(16, 38, 54, .06);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--p-bg);
  background-image: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(41, 148, 125, .11), transparent 70%);
  color: var(--p-ink);
  font-size: 15px;
  line-height: 1.5;
}
html[data-theme="dark"] body.portal-body {
  --p-bg: #0b141b;
  --p-surface: #12202a;
  --p-surface-2: #162733;
  --p-surface-route: #132928;
  --p-ink: #eaf3f7;
  --p-muted: #98b0ba;
  --p-line: #283d4a;
  --p-line-soft: #20333f;
  --p-brand: #29947d;
  --p-brand-hover: #33ab91;
  --p-brand-soft: #1a3832;
  --p-warn-bg: #241d12;
  --p-warn-border: #614820;
  --p-warn-ink: #f4dbb2;
  --p-input-bg: #0d1921;
  --p-input-border: #304958;
  --p-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

/* Modalità dedicata Farmacia · Stupefacenti (accento viola) */
body.portal-body.mode-pharmacy {
  --p-brand: #7048b6;
  --p-brand-hover: #5e38a1;
  --p-brand-soft: #efe9fb;
  --p-surface-route: #f4effc;
  background-image: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(149, 113, 220, .14), transparent 70%);
}
html[data-theme="dark"] body.portal-body.mode-pharmacy {
  --p-brand: #9571dc;
  --p-brand-hover: #a584e6;
  --p-brand-soft: #2a2140;
  --p-surface-route: #1d182d;
}

.portal-shell {
  width: min(1400px, calc(100% - 44px));
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.portal-main { flex: 1; }

/* Topbar compatta con riepilogo mittente integrato */
.portal-topbar {
  min-height: 64px;
  height: auto;
  padding: 10px 0;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--p-line);
}
.portal-body .brand-mark { width: 38px; height: 38px; }
.portal-body .brand-mark img { width: 38px; height: 38px; border-radius: 10px; }
.portal-body .brand-copy strong { font-size: 16.5px; }
.portal-body .brand-copy small { font-size: 10.5px; letter-spacing: .13em; color: var(--p-muted); }

.portal-topbar-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  font-size: 13px;
}
.portal-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22b08d;
  box-shadow: 0 0 0 3px rgba(34, 176, 141, .2);
  flex: none;
}
.portal-topbar-identity {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-ink);
}
.portal-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
}
.portal-stat-pill.is-new { background: rgba(56, 152, 236, .16); color: #16598f; }
.portal-stat-pill.is-progress { background: rgba(235, 162, 52, .18); color: #8a5610; }
.portal-stat-pill.is-done { background: rgba(34, 168, 128, .16); color: #1b6b55; }
html[data-theme="dark"] .portal-stat-pill.is-new { color: #7ac6ff; }
html[data-theme="dark"] .portal-stat-pill.is-progress { color: #f6c677; }
html[data-theme="dark"] .portal-stat-pill.is-done { color: #9de0c5; }

.portal-top-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Hero (mostrato solo nella schermata login) */
.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
  align-items: center;
  gap: 28px;
  margin: 22px 0;
  padding: 28px 34px;
  border-radius: 20px;
  background: linear-gradient(120deg, #10253b 0%, #183a54 56%, #1f5c64 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 38px rgba(12, 31, 46, .18);
}
.portal-hero-copy { max-width: 720px; }
.portal-body .hero-eyebrow { font-size: 11px; letter-spacing: .16em; color: #a7e0cf; }
.portal-hero h1 {
  max-width: none;
  margin: 8px 0 10px;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.portal-body .hero-description {
  max-width: 640px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #dbe8ed;
}
.portal-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(9, 24, 37, .34);
  border: 1px solid rgba(255, 255, 255, .12);
}
.portal-trust-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #eaf6f3;
  font-size: 13px;
  font-weight: 650;
}
.portal-trust-pill svg { width: 17px; height: 17px; color: #7ce0c3; flex: none; }
.portal-hero-warning {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #f7dcb2;
  font-size: 12px;
  line-height: 1.45;
}

/* Card generiche (Login, Redeem, Storico) */
.portal-config-panel { margin-bottom: 18px; }
.portal-card {
  margin-bottom: 20px;
  padding: 24px 26px;
  border: 1px solid var(--p-line);
  border-radius: 18px;
  background: var(--p-surface);
  box-shadow: var(--p-shadow);
}
.portal-body .section-kicker {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--p-muted);
}
.portal-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--p-line-soft);
}
.portal-card-header h2 {
  margin: 3px 0 0;
  color: var(--p-ink);
  font-size: 19px;
  letter-spacing: -.025em;
}

/* Login a 2 colonne su PC */
.portal-auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 32px;
  align-items: start;
}
.portal-auth-intro h2 {
  margin: 6px 0 10px;
  color: var(--p-ink);
  font-size: 24px;
  letter-spacing: -.03em;
}
.portal-helper-copy {
  margin: 0 0 16px;
  color: var(--p-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.portal-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.portal-steps-list li {
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--p-surface-2);
  border: 1px solid var(--p-line-soft);
}
.portal-steps-list strong {
  display: block;
  margin-bottom: 3px;
  color: var(--p-ink);
  font-size: 14px;
}
.portal-steps-list span {
  display: block;
  color: var(--p-muted);
  font-size: 13px;
  line-height: 1.45;
}
.portal-auth-box {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--p-surface-2);
  border: 1px solid var(--p-line-soft);
}
.portal-tabs { width: 100%; margin-bottom: 18px; padding: 4px; border-radius: 10px; }
.portal-body .filters .filter-button {
  flex: 1;
  min-height: 37px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}
.portal-full-btn { width: 100%; }
.portal-remember-box {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  margin-top: 2px;
  border-radius: 12px;
  border: 1.5px solid var(--p-line);
  background: var(--p-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease;
}
.portal-remember-box.is-checked {
  border-color: rgba(38, 120, 104, 0.5);
  background: rgba(38, 120, 104, 0.08);
}
html[data-theme="dark"] .portal-remember-box.is-checked {
  border-color: rgba(79, 209, 181, 0.45);
  background: rgba(47, 148, 128, 0.16);
}
.portal-remember-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: #267868;
  flex: 0 0 20px;
  cursor: pointer;
}
.portal-remember-copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--p-ink);
  margin-bottom: 2px;
}
.portal-remember-copy small {
  display: block;
  font-size: 11.5px;
  color: var(--p-muted);
  line-height: 1.4;
}

/* Griglia operativa 1 schermata PC */
.portal-mobile-bar { margin: 14px 0 0; }
.portal-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(360px, .94fr);
  gap: 24px;
  margin: 20px 0;
  align-items: start;
}
@media (min-width: 1080px) {
  .portal-mobile-bar,
  .portal-mobile-only-btn {
    display: none !important;
  }
  .portal-history-card {
    position: sticky;
    top: 18px;
    max-height: calc(100dvh - 125px);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  .portal-history-card .portal-sent-list {
    overflow-y: auto;
    padding-right: 4px;
  }
}
@media (max-width: 1079px) {
  .portal-workspace-grid { grid-template-columns: 1fr; margin: 14px 0; }
  .portal-mobile-hidden { display: none !important; }
}

/* ==========================================================================
   SCHEDA UNICA OSPEDALIERA (MODULO U.O. + MODULO DEDICATO STUPEFACENTI)
   ========================================================================== */
.portal-sheet-card {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: 18px;
  box-shadow: var(--p-shadow);
  overflow: hidden;
  transition: border-color .2s ease;
}
body.portal-body.mode-pharmacy .portal-sheet-card {
  border-color: rgba(149, 113, 220, .5);
}

.portal-sheet-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px;
  background: linear-gradient(115deg, #11263b 0%, #193e57 60%, #1f5c63 100%);
  color: #fff;
  transition: background .25s ease;
}
body.portal-body.mode-pharmacy .portal-sheet-header {
  background: linear-gradient(115deg, #271942 0%, #3d2569 58%, #593596 100%);
}
.portal-sheet-title-wrap small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9de0cc;
}
body.portal-body.mode-pharmacy .portal-sheet-title-wrap small { color: #d8c2ff; }
.portal-sheet-title-wrap h2 {
  margin: 4px 0 0;
  font-size: 20px;
  letter-spacing: -.02em;
  font-weight: 760;
  color: #fff;
}

.portal-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.portal-mode-switcher {
  display: inline-flex;
  padding: 4px;
  border-radius: 11px;
  background: rgba(8, 18, 28, .42);
  border: 1px solid rgba(255, 255, 255, .2);
  gap: 6px;
}
.portal-mode-tab {
  height: 35px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.portal-mode-tab.active-uo {
  background: #238973;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.portal-mode-tab.active-pharma {
  background: #7d53c9;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.portal-sheet-date {
  height: 41px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(9, 22, 34, .42);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

/* Fasce orizzontali con respiro arioso */
.portal-sheet-band {
  padding: 20px 26px;
  border-bottom: 1px solid var(--p-line-soft);
}
.portal-sheet-band.portal-route-band {
  background: var(--p-surface-route);
}
.portal-band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.portal-band-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-brand);
}
html[data-theme="dark"] .portal-band-tag { color: #7ce0c5; }
html[data-theme="dark"] body.portal-body.mode-pharmacy .portal-band-tag { color: #c7aff7; }
.portal-band-num {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--p-brand-soft);
  color: var(--p-brand);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
}
html[data-theme="dark"] .portal-band-num { color: #8ce8cf; }
html[data-theme="dark"] body.portal-body.mode-pharmacy .portal-band-num { color: #d5c1ff; }
.portal-req-legend { font-size: 12px; color: var(--p-muted); }
.portal-req-legend b { color: #d9823b; }

/* Griglie a 3 e 4 colonne */
.portal-grid-3 { display: grid; grid-template-columns: 1.35fr 1fr .95fr; gap: 16px 18px; }
.portal-grid-mat { display: grid; grid-template-columns: 1.65fr .85fr 1fr 1.05fr; gap: 16px 18px; }
.portal-grid-pharma { display: grid; grid-template-columns: 1.35fr 1.25fr .95fr; gap: 16px 18px; }
.portal-grid-route { display: grid; grid-template-columns: 1fr 36px 1fr; gap: 14px; align-items: end; margin-bottom: 16px; }
.portal-grid-time { display: grid; grid-template-columns: .92fr .8fr .98fr 1.4fr; gap: 16px 18px; }

.portal-body .field { gap: 7px; }
.portal-body .field > span {
  color: var(--p-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-body .field > span b { color: #d9823b; }
.portal-body .field small { font-size: 12px; color: var(--p-muted); }
.portal-body .field input,
.portal-body .field select,
.portal-body .field textarea {
  min-height: 43px;
  height: 43px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--p-input-border);
  background: var(--p-input-bg);
  color: var(--p-ink);
  font-size: 14.5px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.portal-body .field input::placeholder,
.portal-body .field textarea::placeholder {
  color: var(--p-muted);
  opacity: .72;
}
.portal-body .field input:focus,
.portal-body .field select:focus,
.portal-body .field textarea:focus {
  border-color: var(--p-brand);
  box-shadow: 0 0 0 3px rgba(41, 148, 125, .2);
}
body.portal-body.mode-pharmacy .field input:focus,
body.portal-body.mode-pharmacy .field select:focus {
  box-shadow: 0 0 0 3px rgba(149, 113, 220, .25);
}

.portal-route-mid-arrow {
  height: 43px;
  width: 36px;
  border-radius: 9px;
  background: var(--p-brand-soft);
  color: var(--p-brand);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 17px;
}
html[data-theme="dark"] .portal-route-mid-arrow { color: #8ce8cf; }
html[data-theme="dark"] body.portal-body.mode-pharmacy .portal-route-mid-arrow { color: #d5c1ff; }

/* Piede scheda */
.portal-sheet-footer {
  padding: 16px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--p-surface-2);
}
.portal-privacy-inline {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--p-warn-bg);
  border: 1px solid var(--p-warn-border);
  color: var(--p-warn-ink);
  font-size: 12.5px;
  line-height: 1.45;
}
body.portal-body.mode-pharmacy .portal-privacy-inline {
  background: rgba(125, 83, 201, .14);
  border-color: rgba(149, 113, 220, .42);
  color: var(--p-ink);
}
.portal-bang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  background: rgba(217, 130, 59, .24);
  display: grid;
  place-items: center;
  font-size: 11.5px;
}
body.portal-body.mode-pharmacy .portal-bang {
  background: rgba(149, 113, 220, .3);
}
.portal-sheet-btns { display: flex; gap: 12px; align-items: center; }
.portal-body .button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
}
.portal-body .button-primary {
  background: var(--p-brand);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}
.portal-body .button-primary:hover {
  background: var(--p-brand-hover);
}
.portal-submit-cta { padding: 0 26px !important; }
.portal-sheet-feedback {
  margin: 0;
  padding: 0 26px 12px;
  background: var(--p-surface-2);
  min-height: 0;
}
.portal-sheet-feedback:empty { display: none; }

.portal-feedback {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--p-brand);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
html[data-theme="dark"] .portal-feedback { color: #92dec4; }
.portal-actions-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

/* Banner conferma invio */
.portal-confirmation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 0;
  padding: 16px 22px;
  border-color: #9fd5be;
  background: linear-gradient(90deg, #effaf5 0%, #ffffff 100%);
}
html[data-theme="dark"] .portal-confirmation {
  border-color: #2f6956;
  background: linear-gradient(90deg, #142c24 0%, #122029 100%);
}
.portal-confirmation-badge {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #237a65;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  flex: none;
}
.portal-confirmation-body { flex: 1; min-width: 240px; }
.portal-confirmation h2 { margin: 0 0 3px; color: var(--p-ink); font-size: 17px; }
.portal-confirmation p { margin: 0; color: var(--p-muted); font-size: 13px; line-height: 1.45; }
.portal-confirmation-actions { margin-top: 0; }

/* Colonna destra: Registro richieste inviate + tasto Riusa dati */
.portal-history-card { padding: 20px 22px; }
.portal-refresh-btn {
  min-height: 36px;
  padding: 0 13px;
  font-size: 12.5px;
  border-radius: 9px;
}
.portal-sent-list {
  grid-template-columns: 1fr;
  gap: 14px;
}
.portal-body .portal-req-card {
  padding: 15px 16px;
  border-radius: 13px;
  border: 1px solid var(--p-line-soft);
  background: var(--p-surface-2);
}
.portal-body .portal-req-card.is-pharma-card {
  border-left: 3px solid #8c63db;
}
.portal-body .reminder-type { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-body .reminder-type.pharmacy { color: #673ab7; }
html[data-theme="dark"] .portal-body .reminder-type.pharmacy { color: #c5adfa; }
.portal-body .card-status { padding: 4px 10px; font-size: 11px; font-weight: 750; }
.portal-body .portal-req-card h3 {
  margin: 8px 0 9px;
  font-size: 15.5px;
  line-height: 1.3;
}
.portal-body .card-route {
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--p-surface);
  border: 1px solid var(--p-line-soft);
}
.portal-body .route-point span { font-size: 9.5px; color: var(--p-muted); }
.portal-body .route-point strong { font-size: 13px; font-weight: 700; color: var(--p-ink); }
.portal-body .route-arrow { width: 24px; height: 24px; font-size: 14px; }
.portal-body .card-details {
  gap: 6px 13px;
  padding-top: 9px;
  font-size: 12px;
  color: var(--p-muted);
}
.portal-body .card-detail strong { color: var(--p-ink); }
.portal-body .card-note {
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  border-radius: 0 8px 8px 0;
}
.portal-req-card-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--p-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portal-sent-ts {
  font-size: 11.5px;
  color: var(--p-muted);
}
.portal-reuse-btn {
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--p-line);
  background: var(--p-surface);
  color: var(--p-ink);
  font-size: 12px;
  font-weight: 750;
}
.portal-reuse-btn:hover {
  border-color: var(--p-brand);
  color: var(--p-brand);
}
html[data-theme="dark"] .portal-reuse-btn:hover { color: #8ce8cf; }
.portal-empty { min-height: 190px; }

/* --- Tab Registro (Attive / Archivio 30 gg) --- */
.portal-history-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.portal-history-tabs .filter-button {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--p-line-soft);
  background: var(--p-surface-2);
  color: var(--p-muted);
  font-size: 12.5px;
  font-weight: 750;
}
.portal-history-tabs .filter-button.active {
  background: var(--p-brand);
  border-color: var(--p-brand);
  color: #fff;
}
html[data-theme="dark"] .portal-history-tabs .filter-button.active { color: #052019; }
.portal-history-tabs .tab-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .08);
  font-size: 11px;
}
.portal-history-tabs .filter-button.active .tab-count {
  background: rgba(255, 255, 255, .25);
}

/* --- Banner archivio --- */
.portal-archive-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px dashed var(--p-line-soft);
  background: var(--p-brand-soft);
  color: var(--p-ink);
  font-size: 12.5px;
}
.portal-archive-banner-icon { font-size: 15px; }
.portal-archive-banner-text { flex: 1 1 auto; }
.portal-archive-clear-btn {
  flex: none;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--p-line-soft);
  background: var(--p-surface);
  color: var(--p-ink);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.portal-archive-clear-btn:hover { border-color: #c04030; color: #c04030; }
html[data-theme="dark"] .portal-archive-clear-btn:hover { color: #ff9a8a; }

/* --- Card archiviate --- */
.portal-body .portal-req-card.is-archived {
  border-left: 3px solid #8a9aa0;
  opacity: .92;
}
.portal-archive-badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 20px;
  background: #e8f3f0;
  color: #2a6b5c;
  font-size: 11px;
  font-weight: 750;
}
html[data-theme="dark"] .portal-archive-badge {
  background: #1d3a34;
  color: #8fe0c8;
}
.portal-archive-btn,
.portal-restore-btn,
.portal-delete-btn {
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--p-line-soft);
  background: var(--p-surface);
  color: var(--p-ink);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.portal-archive-btn { border-color: var(--p-brand); color: var(--p-brand); }
html[data-theme="dark"] .portal-archive-btn { color: #8ce8cf; }
.portal-restore-btn { border-color: var(--p-muted); }
.portal-delete-btn { border-color: #e3b3a8; color: #b04a34; }
html[data-theme="dark"] .portal-delete-btn { color: #ff9a8a; }
.portal-archive-btn:hover,
.portal-restore-btn:hover { background: var(--p-brand-soft); }
.portal-delete-btn:hover { background: #fbefeb; }
html[data-theme="dark"] .portal-delete-btn:hover { background: #3a2620; }
.portal-body .empty-state h3 { font-size: 16px; }
.portal-body .empty-state p { font-size: 13px; }

/* Tasti Avvisi & Suono + Banner 3 fasi + Barra avanzamento 3 spunte */
.portal-pill-toggle { border-radius: 999px !important; }
.portal-pill-toggle.is-on {
  border-color: var(--p-brand) !important;
  background: var(--p-brand-soft) !important;
  color: var(--p-brand) !important;
}
html[data-theme="dark"] .portal-pill-toggle.is-on { color: #8ce8cf !important; }
html[data-theme="dark"] body.portal-body.mode-pharmacy .portal-pill-toggle.is-on { color: #d5c1ff !important; }

.portal-live-alert {
  margin: 14px 0 0;
  padding: 13px 18px;
  border-radius: 14px;
  border: 2px solid #8ec5f0;
  background: #e8f4fd;
  color: #124d7d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: portalPopIn .26s cubic-bezier(.2, .9, .3, 1.1);
}
.portal-live-alert.is-progress {
  border-color: #efc46e;
  background: #fff5e0;
  color: #7d4e08;
}
.portal-live-alert.is-completed {
  border-color: #8ad3b3;
  background: #e7f7f0;
  color: #145c43;
}
html[data-theme="dark"] .portal-live-alert {
  border-color: #2e6796;
  background: #13283b;
  color: #9ad1ff;
}
html[data-theme="dark"] .portal-live-alert.is-progress {
  border-color: #805d21;
  background: #312512;
  color: #fbd38d;
}
html[data-theme="dark"] .portal-live-alert.is-completed {
  border-color: #2f7a5e;
  background: #132e25;
  color: #9ae6c5;
}
.portal-live-alert[hidden] { display: none; }
.portal-live-alert-body { display: flex; align-items: center; gap: 12px; }
.portal-live-alert-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}
html[data-theme="dark"] .portal-live-alert-icon { background: rgba(0, 0, 0, .3); }
.portal-live-alert strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.portal-live-alert span { font-size: 13px; }
.portal-live-alert-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  padding: 4px 8px;
}

@keyframes portalPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.portal-body .portal-req-card.flash-recv {
  border-color: #3b98e8;
  box-shadow: 0 0 0 3px rgba(59, 152, 232, .22);
}
.portal-body .portal-req-card.flash-take {
  border-color: #e6a832;
  box-shadow: 0 0 0 3px rgba(230, 168, 50, .25);
}
.portal-body .portal-req-card.flash-done {
  border-color: #26a87e;
  box-shadow: 0 0 0 3px rgba(38, 168, 126, .25);
}

.portal-stepper {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--p-surface);
  border: 1px solid var(--p-line-soft);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.portal-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--p-muted);
  opacity: .55;
  min-width: 0;
}
.portal-step.reached {
  opacity: 1;
  color: var(--p-ink);
  font-weight: 750;
}
.portal-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.8px solid var(--p-line);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  flex: none;
}
.portal-step.reached.s-recv .portal-step-dot { background: #3b98e8; border-color: #3b98e8; color: #fff; }
.portal-step.reached.s-take .portal-step-dot { background: #eaa32b; border-color: #eaa32b; color: #fff; }
.portal-step.reached.s-done .portal-step-dot { background: #23a47a; border-color: #23a47a; color: #fff; }
.portal-step-copy { min-width: 0; line-height: 1.25; }
.portal-step-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-step-copy small { display: block; font-size: 9.8px; font-weight: 600; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.portal-footer {
  margin-top: auto;
  padding: 12px 0 18px;
  border-top: 1px solid var(--p-line-soft);
  font-size: 12px;
  color: var(--p-muted);
}

/* Responsive Tablet & Smartphone */
@media (max-width: 920px) {
  .portal-hero,
  .portal-auth-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .portal-grid-3,
  .portal-grid-mat,
  .portal-grid-pharma,
  .portal-grid-time {
    grid-template-columns: 1fr 1fr;
  }
  .portal-grid-route { grid-template-columns: 1fr; }
  .portal-route-mid-arrow { display: none; }
}
@media (max-width: 640px) {
  .portal-shell { width: calc(100% - 20px); }
  .portal-topbar-center { width: 100%; justify-content: center; border-radius: 12px; }
  .portal-hero { padding: 20px 18px; margin: 14px 0; }
  .portal-card { padding: 18px 16px; }
  .portal-sheet-header,
  .portal-sheet-band,
  .portal-sheet-footer { padding: 16px; }
  .portal-mode-switcher { width: 100%; }
  .portal-mode-tab { flex: 1; justify-content: center; padding: 0 8px; font-size: 12px; }
  .portal-grid-3,
  .portal-grid-mat,
  .portal-grid-pharma,
  .portal-grid-time,
  .portal-body .field-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .portal-body .field input,
  .portal-body .field select,
  .portal-body .field textarea {
    font-size: 16px;
    min-height: 46px;
    height: 46px;
  }
  .portal-footer { flex-direction: column; gap: 6px; text-align: center; }
  .portal-stepper { grid-template-columns: 1fr; gap: 7px; }
}