/* ============================================================
   ACTION MARK — Layout applicazione (Light)
   ============================================================ */

/* ============ LOGIN ============ */
#login {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--bg-base);
  transition: opacity var(--t-slow) var(--ease);
}
#login.hidden { opacity: 0; pointer-events: none; }

.login-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-12);
  background:
    radial-gradient(110% 80% at 12% 8%, rgba(43,91,226,0.10), transparent 55%),
    radial-gradient(90% 70% at 92% 95%, rgba(14,148,136,0.08), transparent 55%),
    linear-gradient(160deg, #FBFCFE, #EFF3FC);
  border-right: 1px solid var(--border);
}
.login-brand::after {
  content: ''; position: absolute; inset: 0; opacity: 0.6;
  background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(75% 75% at 50% 40%, #000 25%, transparent 100%);
}
.login-brand > * { position: relative; z-index: 1; }
.lb-top { display: flex; align-items: center; gap: var(--sp-3); }
.lb-hero { max-width: 440px; }
.lb-hero h1 { font-size: 38px; line-height: 1.1; font-weight: var(--fw-black); letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: var(--sp-4); }
.lb-hero h1 .accent { background: linear-gradient(120deg, var(--accent), var(--teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lb-hero p { font-size: var(--fs-h2); color: var(--text-secondary); line-height: 1.6; }
.lb-stats { display: flex; gap: var(--sp-8); }
.lb-stat .v { font-size: 22px; font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lb-stat .l { font-size: var(--fs-2xs); color: var(--text-tertiary); letter-spacing: 0.05em; text-transform: uppercase; }

.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: var(--sp-8); }
.login-card { width: 100%; max-width: 360px; animation: am-rise var(--t-slow) var(--ease-out); }
.login-card h2 { font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.login-card .sub { color: var(--text-secondary); margin: var(--sp-1) 0 var(--sp-8); font-size: var(--fs-sm); }
.login-card .field { margin-bottom: var(--sp-4); }
.login-card .btn-primary { width: 100%; height: 46px; margin-top: var(--sp-2); }
.login-err { display: none; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--red-soft); border-radius: var(--r-md); color: var(--red); font-size: var(--fs-sm); }
.login-err.show { display: flex; }

/* Logo */
.mark { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; border: 1px solid var(--border); background: #fff; object-fit: cover; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark .n { font-size: var(--fs-body); font-weight: var(--fw-black); letter-spacing: 0.2em; color: var(--text-primary); }
.wordmark .s { font-size: 8px; font-weight: var(--fw-semi); letter-spacing: 0.28em; color: var(--text-tertiary); margin-top: 3px; }

/* ============ APP SHELL ============ */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--ease); }
#app.show { opacity: 1; pointer-events: all; }

/* ---- Topbar ---- */
.topbar { display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-h); padding: 0 var(--sp-4) 0 var(--sp-5); background: var(--bg-base); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.topbar .brand { display: flex; align-items: center; gap: var(--sp-3); }
.tb-sep { width: 1px; height: 26px; background: var(--border); }
.nav { display: flex; gap: 2px; }
.nav-tab { display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-tertiary); transition: all var(--t-fast) var(--ease); }
.nav-tab:hover { color: var(--text-secondary); background: var(--bg-surface-2); }
.nav-tab.active { color: var(--accent); background: var(--accent-soft); }
.tb-kpis { display: flex; gap: var(--sp-2); }
.kpi { display: flex; align-items: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-3); background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.kpi .ico { color: var(--kpi-c, var(--text-tertiary)); display: grid; place-items: center; }
.kpi .v { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kpi .l { font-size: var(--fs-2xs); color: var(--text-tertiary); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.user-chip { display: flex; align-items: center; gap: var(--sp-2); height: 38px; padding: 0 var(--sp-3) 0 var(--sp-1); background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-pill); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--teal)); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-black); }
.user-chip .un { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.user-chip .ur { font-size: var(--fs-micro); color: var(--text-tertiary); }

/* ---- Pagine ---- */
.pages { flex: 1; min-height: 0; position: relative; }
.page { position: absolute; inset: 0; }
.page:not(.active) { display: none !important; }
.page-ops.active { display: grid; grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w); }
.page-events.active { display: flex; flex-direction: column; background: var(--bg-canvas); }

/* ---- Sidebar ---- */
.sidebar { display: flex; flex-direction: column; background: var(--bg-base); border-right: 1px solid var(--border); overflow: hidden; }
.side-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); display: flex; align-items: center; justify-content: space-between; }
.side-search { padding: 0 var(--sp-3) var(--sp-3); }
.search-box { position: relative; }
.search-box svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
.search-box input { width: 100%; height: 36px; padding: 0 var(--sp-3) 0 32px; background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-md); color: var(--text-primary); font-size: var(--fs-sm); }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-focus); background: var(--bg-surface); }
.search-box input::placeholder { color: var(--text-disabled); }

.fleet { flex: 1; overflow-y: auto; padding: 0 var(--sp-2); display: flex; flex-direction: column; gap: 3px; }
.fleet-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid transparent; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); cursor: pointer; }
.fleet-item:hover { background: var(--bg-surface-2); }
.fleet-item.active { background: var(--accent-soft); border-color: var(--border-accent); }
.fleet-item .fi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fleet-item .fi-name { display: block; max-width: 100%; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); }
.fleet-item .fi-sub { display: block; max-width: 100%; font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 2px; }
.fleet-item .badge { flex-shrink: 0; height: 20px; }
.fleet-item .fi-del { flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-tertiary); opacity: 0; transition: all var(--t-fast) var(--ease); }
.fleet-item:hover .fi-del, .fleet-item.active .fi-del { opacity: 1; }
.fleet-item .fi-del:hover { color: var(--red); background: var(--red-soft); }
@media (max-width: 600px) { .fleet-item .fi-del { opacity: 1; } }
.fleet-item .fi-spark { width: 5px; height: 30px; border-radius: var(--r-pill); background: var(--border); flex-shrink: 0; }
.fleet-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); line-height: 1.7; }

.side-foot { padding: var(--sp-3); border-top: 1px solid var(--border-soft); }
.club-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); }
.club-card .cc-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.club-card .cc-plan { font-size: var(--fs-micro); color: var(--text-tertiary); }

/* ---- Main (mappa + dock) ---- */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg-canvas); }
.map-wrap { position: relative; flex: 1; min-height: 0; }
#map, #ev-map { position: absolute; inset: 0; z-index: 0; background: var(--bg-canvas); }

.map-chip { position: absolute; z-index: 500; display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-secondary); font-weight: var(--fw-medium); box-shadow: var(--sh-md); }
.map-chip.route { top: var(--sp-4); left: var(--sp-4); color: var(--amber); border-color: rgba(183,121,31,0.3); }
.map-chip.route .dot { background: var(--amber); }
.map-fit { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 500; }

/* ---- Dock ---- */
.dock { height: var(--dock-h); flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-base); border-top: 1px solid var(--border); }
.dock-tabs { display: flex; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.dock-tab { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-tertiary); transition: all var(--t-fast) var(--ease); }
.dock-tab:hover { color: var(--text-secondary); background: var(--bg-surface-2); }
.dock-tab.active { color: var(--accent); background: var(--accent-soft); }
.dock-tab .count { font-size: var(--fs-micro); padding: 1px 6px; border-radius: var(--r-pill); background: var(--bg-surface-3); color: var(--text-secondary); }
.dock-body { flex: 1; min-height: 0; overflow: hidden; }
.dock-pane { display: none; height: 100%; }
.dock-pane.active { display: flex; }

/* ---- Route editor (migliorato) ---- */
.route { display: grid; grid-template-columns: 1fr 296px; width: 100%; }
.route-list { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border-soft); }
.route-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.route-toolbar .hint { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 5px; }
.route-scroll { flex: 1; overflow-y: auto; }
.wp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.wp-table th { position: sticky; top: 0; text-align: left; padding: var(--sp-2) var(--sp-3); background: var(--bg-tint); border-bottom: 1px solid var(--border-soft); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); z-index: 1; }
.wp-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-soft); color: var(--text-secondary); vertical-align: middle; }
.wp-table tr { transition: background var(--t-fast) var(--ease); }
.wp-table tbody tr:hover { background: var(--bg-surface-2); }
.wp-num { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: #fff; font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.wp-del { color: var(--text-tertiary); width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; transition: all var(--t-fast) var(--ease); }
.wp-del:hover { color: var(--red); background: var(--red-soft); }
.route-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-8); color: var(--text-tertiary); text-align: center; height: 100%; }
.route-empty .ic { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--bg-surface-2); display: grid; place-items: center; color: var(--text-disabled); }
.route-side { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); overflow-y: auto; background: var(--bg-tint); }
.summary { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2); box-shadow: var(--sh-sm); }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--text-tertiary); padding: var(--sp-2) var(--sp-2); }
.summary-row + .summary-row { border-top: 1px solid var(--border-soft); }
.summary-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.summary-row .big { font-size: var(--fs-h2); color: var(--accent); }
.deploy-log { display: flex; flex-direction: column; gap: var(--sp-2); }
.deploy-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm); font-size: var(--fs-xs); box-shadow: var(--sh-sm); }

/* ---- Log ---- */
.log { width: 100%; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.log-row { display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.log-row:hover { background: var(--bg-surface-2); }
.log-row .lt { color: var(--text-tertiary); font-family: var(--font-mono); flex-shrink: 0; font-size: var(--fs-2xs); }
.log-row .lm { color: var(--text-secondary); }
.log-row.ok .lt { color: var(--green); } .log-row.warn .lt { color: var(--amber); } .log-row.err .lt { color: var(--red); }

/* ---- Inspector ---- */
.inspector { display: flex; flex-direction: column; background: var(--bg-base); border-left: 1px solid var(--border); overflow-y: auto; }
.insp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-8); text-align: center; color: var(--text-tertiary); }
.insp-empty .ic { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--bg-surface-2); display: grid; place-items: center; color: var(--text-disabled); }
.insp-empty p { font-size: var(--fs-sm); line-height: 1.6; }
.insp-head { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.insp-head .row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.insp-name { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.insp-club { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.insp-conn { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.insp-section { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-soft); }
.insp-section > .eyebrow { margin-bottom: var(--sp-3); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.metric { background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-3); }
.metric .ml { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-2); }
.metric .mv { font-size: 22px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-primary); }
.metric .mu { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.mv.good { color: var(--green); } .mv.warn { color: var(--amber); } .mv.bad { color: var(--red); }
.coord { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.8; }
.cmd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.maint { display: flex; flex-direction: column; gap: var(--sp-2); }
.maint-btn { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); transition: all var(--t-fast) var(--ease); text-align: left; }
.maint-btn:hover { background: var(--bg-surface-2); border-color: var(--border-strong); }
.maint-btn .mb-ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--mb-soft, var(--accent-soft)); color: var(--mb-c, var(--accent)); flex-shrink: 0; }
.maint-btn .mb-t { flex: 1; }
.maint-btn .mb-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); }
.maint-btn .mb-sub { font-size: var(--fs-micro); color: var(--text-tertiary); }
.maint-btn .mb-chev { color: var(--text-tertiary); }
.feedback { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg-tint); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--text-tertiary); text-align: center; }

/* ---- Calibrazione / motori ---- */
.compass { display: grid; place-items: center; margin-bottom: var(--sp-4); }
.compass svg { transition: transform var(--t-slow) var(--ease); }
.cal-status { text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--sp-3); }
.cal-bar-track { height: 6px; background: var(--bg-surface-3); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--sp-4); }
.cal-bar { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease), background var(--t-base) var(--ease); }
.motors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.motor { background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.motor .ml { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-3); }
.motor .ring { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto var(--sp-3); border: 3px solid var(--bg-surface-3); border-top-color: var(--accent); }
.motor .ring.spin { animation: am-spin 1s linear infinite; }
.motor .mval { font-size: 20px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-3); }
.slider { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: var(--r-pill); background: var(--bg-surface-3); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--accent); }

/* ---- Codice attivazione ---- */
.code-display { background: linear-gradient(160deg, var(--accent-soft), var(--bg-tint)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); text-align: center; }
.code-display .cd-label { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-3); }
.code-display .cd-code { font-family: var(--font-mono); font-size: 42px; font-weight: var(--fw-bold); letter-spacing: 0.12em; color: var(--accent-dim); }
.code-display .cd-exp { font-size: var(--fs-micro); color: var(--text-tertiary); margin-top: var(--sp-2); }

/* ============ EVENTI ============ */
.events-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid var(--border); background: var(--bg-base); flex-shrink: 0; }
.events-head h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.events-head .sub { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 2px; }

.events-scroll { flex: 1; overflow-y: auto; padding: var(--sp-8); }
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); max-width: 1200px; }
.event-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); cursor: pointer; }
.event-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: var(--border-strong); }
.event-card .ec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.event-card .ec-name { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.event-card .ec-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.event-when { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--accent-soft); color: var(--accent-dim); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.event-meta { display: flex; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); }
.event-meta .em { display: flex; flex-direction: column; gap: 1px; }
.event-meta .em .v { font-size: var(--fs-h2); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.event-meta .em .l { font-size: var(--fs-micro); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.event-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.events-empty { max-width: 420px; margin: 8vh auto; text-align: center; color: var(--text-tertiary); }
.events-empty .ic { width: 64px; height: 64px; border-radius: var(--r-xl); background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--sh-sm); display: grid; place-items: center; color: var(--accent); margin: 0 auto var(--sp-4); }
.events-empty h3 { font-size: var(--fs-h2); color: var(--text-primary); margin-bottom: var(--sp-2); }
.events-empty p { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--sp-5); }

/* Editor evento */
.event-editor { display: grid; grid-template-columns: 408px 1fr; flex: 1; min-height: 0; }
.events-scroll { flex: 1; min-height: 0; }
.ee-form { display: flex; flex-direction: column; min-height: 0; background: var(--bg-base); border-right: 1px solid var(--border); overflow: hidden; }
.ee-form-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-soft); }
.ee-form-head .t { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.ee-scroll { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6); }
.ee-block .eyebrow { margin-bottom: var(--sp-3); display: flex; align-items: center; justify-content: space-between; }
.ee-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ee-form-foot { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-soft); background: var(--bg-tint); }
.ee-map-wrap { position: relative; }

/* Imbarcazioni */
.boat-row { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.boat-row .input { height: 38px; }
.boat-row .sail { max-width: 100px; }
.boat-empty { font-size: var(--fs-xs); color: var(--text-tertiary); padding: var(--sp-2) 0; }

/* Selezione boe */
.buoy-pick { display: flex; flex-direction: column; gap: var(--sp-1); }
.buoy-check { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--bg-surface); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.buoy-check:hover { background: var(--bg-surface-2); }
.buoy-check.on { border-color: var(--border-accent); background: var(--accent-soft); }
.buoy-check .cbox { width: 18px; height: 18px; border-radius: var(--r-sm); border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; color: #fff; transition: all var(--t-fast) var(--ease); }
.buoy-check.on .cbox { background: var(--accent); border-color: var(--accent); }
.buoy-check .cbox svg { opacity: 0; }
.buoy-check.on .cbox svg { opacity: 1; }
.buoy-check .bc-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); flex: 1; }
.buoy-check .bc-status { font-size: var(--fs-micro); }

/* ---- Leaflet (light) ---- */
.leaflet-container { background: var(--bg-canvas); font-family: var(--font-sans); }
.leaflet-control-zoom { border: none !important; box-shadow: var(--sh-md) !important; border-radius: var(--r-md) !important; overflow: hidden; }
.leaflet-control-zoom a { background: var(--bg-surface) !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-soft) !important; }
.leaflet-control-zoom a:hover { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; }
.leaflet-control-attribution { background: rgba(255,255,255,0.8) !important; color: var(--text-tertiary) !important; font-size: 10px !important; }
.leaflet-control-attribution a { color: var(--text-secondary) !important; }
.leaflet-popup-content-wrapper { background: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-lg) !important; }
.leaflet-popup-tip { background: var(--bg-surface) !important; border: 1px solid var(--border); }
.leaflet-popup-content { margin: var(--sp-3) var(--sp-4) !important; font-size: var(--fs-xs); }
.am-popup .pop-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.am-popup .pop-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 3px 0; color: var(--text-tertiary); }
.am-popup .pop-row strong { color: var(--text-primary); }
.am-popup .pop-btn { margin-top: var(--sp-2); width: 100%; height: 30px; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-xs); }

.buoy-marker { position: relative; }
.buoy-marker .bm-core { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(16,24,40,0.3); }
.buoy-marker .bm-ring { position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid; opacity: 0.4; }
/* Nuovo marker "boa da regata" */
.buoy-mark { position: relative; filter: drop-shadow(0 2px 4px rgba(16,24,40,0.22)); }
.buoy-mark svg { display: block; }
.buoy-mark .bm-pulse-ring { position: absolute; left: 50%; bottom: 3px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 1.5px solid; opacity: 0; animation: am-pulse-ring 2.4s var(--ease-out) infinite; }
.wp-marker { width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-black); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(16,24,40,0.3); cursor: grab; }
.repo-ghost { width: 16px; height: 16px; border-radius: 50%; border: 2.5px dashed var(--accent); background: rgba(43,91,226,0.18); box-shadow: 0 0 0 4px rgba(43,91,226,0.10); animation: am-pulse-ring 2s var(--ease-out) infinite; }

/* ---- Chip aggiornamento server ---- */
.map-chip.sync { background: rgba(255,255,255,0.94); color: var(--text-secondary); border-color: var(--border); }
.map-chip.sync .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.map-chip.sync.warn { color: var(--amber); border-color: rgba(183,121,31,0.35); }
.map-chip.sync.warn .sync-dot { background: var(--amber); }
.map-chip.sync.err { color: var(--red); border-color: rgba(211,59,59,0.35); animation: am-blink 1.4s ease-in-out infinite; }
.map-chip.sync.err .sync-dot { background: var(--red); }
@keyframes am-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---- Popup rotazione (riutilizza .qe-pop) ---- */
.rot-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.rot-dial { position: relative; margin-bottom: 2px; }
.rot-dial svg { display: block; }
#rot-needle { transition: transform 120ms var(--ease); }
.rot-val { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-mono); font-size: 28px; font-weight: var(--fw-black); color: var(--accent); line-height: 1; }
.rot-val small { font-size: 14px; color: var(--text-tertiary); font-weight: var(--fw-semi); }
.rot-dir { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.06em; }
.rot-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: var(--sp-4); }
.rot-presets button { height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; transition: all var(--t-fast) var(--ease); }
.rot-presets button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rot-slider-wrap { margin-bottom: var(--sp-4); }
.rot-slider-wrap .slider { margin-bottom: 6px; }
.rot-scale { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--text-tertiary); font-family: var(--font-mono); }
.rot-actions { display: flex; gap: var(--sp-2); }

/* Pivot di rotazione sulla mappa */
.pivot-marker { width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; position: relative; cursor: move; }
.pivot-marker::before, .pivot-marker::after { content: ''; position: absolute; background: var(--accent); }
.pivot-marker::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.pivot-marker::after { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.pivot-marker > span { position: absolute; inset: 5px; border-radius: 50%; border: 2.5px solid var(--accent); background: #fff; }
.pivot-marker > span::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }

/* Waypoint fantasma durante la rotazione */
.wp-ghost { width: 26px; height: 26px; border-radius: 50%; background: rgba(43,91,226,0.15); border: 2px dashed var(--accent); color: var(--accent-dim); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-black); box-shadow: 0 1px 3px rgba(43,91,226,0.2); }

/* Boa mentre viene trascinata (linea dall'origine) */
.buoy-drag-orig { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--text-tertiary); background: rgba(255,255,255,0.9); }
.buoy-drag-badge { background: var(--accent); color: #fff; padding: 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); white-space: nowrap; box-shadow: var(--sh-md); }

/* ---- Toolbar strumenti mappa (in basso a sinistra) ---- */
.map-tools { position: absolute; left: 16px; bottom: 16px; z-index: 500; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: rgba(255,255,255,0.95); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-md); }
.map-tool { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-secondary); transition: all var(--t-fast) var(--ease); }
.map-tool:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.map-tool.active { background: var(--accent); color: #fff; }
.map-tools-sep { height: 1px; background: var(--border); margin: 2px 4px; }

/* ---- Rosa dei venti (nord) in alto a sinistra ---- */
.wind-rose { position: absolute; top: 62px; right: 16px; z-index: 500; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.wind-rose svg { filter: drop-shadow(0 2px 6px rgba(16,24,40,0.15)); }
#wind-rose-inner { transition: transform 400ms var(--ease); }
.wind-rose-lbl { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-secondary); background: rgba(255,255,255,0.9); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }

/* ---- Percorsi preimpostati ---- */
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.preset-card { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: all var(--t-fast) var(--ease); }
.preset-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.preset-card:active { transform: scale(0.97); }
.preset-card svg { margin-bottom: 4px; }
.pc-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.pc-desc { font-size: var(--fs-micro); color: var(--text-tertiary); }

/* ---- Pin (segnaposti) ---- */
.pin-mark { width: 30px; height: 40px; margin-left: -15px; margin-top: -38px; position: relative; filter: drop-shadow(0 2px 4px rgba(16,24,40,0.3)); cursor: pointer; }
.pin-mark svg { display: block; }
.pin-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--border-soft); margin-bottom: 4px; background: var(--bg-surface); }
.pin-swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border); }
.pin-item-info { flex: 1; min-width: 0; }
.pin-item-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-primary); }
.pin-item-name.editable { border: none; background: transparent; padding: 0; width: 100%; outline: none; }
.pin-item-name.editable:focus { border-bottom: 1px solid var(--accent); }
.pin-item-coord { font-size: var(--fs-micro); color: var(--text-tertiary); font-family: var(--font-mono); }
.pin-colors { display: flex; gap: 3px; }
.pin-color-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px var(--border); transition: transform var(--t-fast) var(--ease); }
.pin-color-dot:hover { transform: scale(1.2); }
.pin-color-dot.on { box-shadow: 0 0 0 2px var(--text-primary); }
.pin-del { color: var(--text-tertiary); width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; }
.pin-del:hover { color: var(--red); background: var(--red-soft); }

/* ---- Righello ---- */
.ruler-point { width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(16,24,40,0.25); }
.ruler-label { background: var(--navy); color: #fff; padding: 6px 10px; border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; box-shadow: var(--sh-md); font-variant-numeric: tabular-nums; }
.ruler-label strong { color: var(--accent-bright, #6BA2FF); }

/* ---- Quick row (2 pulsanti fianco a fianco) ---- */
.quick-row { display: flex; gap: 6px; margin-top: 8px; }

/* ---- Autorizzazioni club (creazione account) ---- */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perm-card { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 36px 12px 12px; background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast) var(--ease); user-select: none; }
.perm-card:hover { border-color: var(--accent); box-shadow: var(--sh-sm); }
.perm-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* checkbox nativo nascosto: la spunta e' il cerchietto disegnato in alto a destra */
.perm-card input { position: absolute; opacity: 0; pointer-events: none; }
.perm-card::after { content: ''; position: absolute; top: 10px; right: 10px; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-surface); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; color: #fff; transition: all var(--t-fast) var(--ease); }
.perm-card:has(input:checked)::after { content: '✓'; background: var(--accent); border-color: var(--accent); }
.perm-ico { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--bg-surface-2); display: grid; place-items: center; color: var(--text-tertiary); flex-shrink: 0; transition: all var(--t-fast) var(--ease); }
.perm-card:has(input:checked) .perm-ico { background: var(--accent); color: #fff; }
.perm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-txt strong { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-primary); }
.perm-txt small { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.35; }
.perm-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.perm-badge { font-size: 9.5px; font-weight: var(--fw-bold); padding: 2px 7px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
.perm-badge-view { background: var(--bg-surface-2); color: var(--text-tertiary); }
@media (max-width: 600px) { .perm-grid { grid-template-columns: 1fr; } }

/* ---- Stato boa nella lista flotta ---- */
.fi-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 5px 1px 0; vertical-align: middle; }
.fi-dot.on { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.fi-dot.off { background: var(--text-disabled); }
.fleet-item.off .fi-name { color: var(--text-secondary); }
.fleet-item.off .badge { opacity: 0.6; }

/* ---- Pannello controllo unificato (stile EV) ---- */
.uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.uc { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-secondary); font-size: 13px; font-weight: var(--fw-semi); transition: all var(--t-fast) var(--ease); text-align: left; }
.uc svg { flex-shrink: 0; }
.uc:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.uc:active:not(:disabled) { transform: scale(0.97); }
.uc:disabled { opacity: 0.4; cursor: not-allowed; }
.uc-free.on { background: var(--green); color: #fff; border-color: var(--green); }
.uc-fix.on { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.uc-stop { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: none; border-radius: var(--r-md); background: var(--amber); color: #fff; font-weight: var(--fw-bold); font-size: 13px; margin-bottom: 6px; transition: filter var(--t-fast) var(--ease); }
.uc-stop:hover { filter: brightness(0.94); }
.uc-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.uc-sm { padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-tertiary); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.5px; transition: all var(--t-fast) var(--ease); }
.uc-sm:hover:not(:disabled) { color: var(--text-primary); border-color: var(--text-tertiary); }
.uc-sm:disabled { opacity: 0.4; cursor: not-allowed; }
.batt-chip { font-size: 11px; font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--r-pill); background: var(--bg-surface-2); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Stepper (− valore +) usato in Dist/angolo e Offset ---- */
.field-lbl { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 10px 0 6px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 36px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-secondary); font-size: 18px; font-weight: var(--fw-bold); flex-shrink: 0; transition: all var(--t-fast) var(--ease); }
.stepper button:hover { border-color: var(--accent); color: var(--accent); }
.stepper input { flex: 1; min-width: 0; height: 38px; text-align: center; font-family: var(--font-mono); font-size: 15px; font-weight: var(--fw-bold); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-primary); }
.stepper .su { font-size: 11px; color: var(--text-tertiary); width: 38px; text-align: center; flex-shrink: 0; }
.off-info { padding: 8px 12px; background: var(--bg-tint); border-radius: var(--r-sm); font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.off-preview { font-size: 12px; color: var(--text-tertiary); text-align: center; margin: 12px 0; }

/* ---- Course designer: selettore forma ---- */
.cd-shapes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cd-shape { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-secondary); transition: all var(--t-fast) var(--ease); }
.cd-shape span { font-size: 12px; font-weight: var(--fw-bold); }
.cd-shape small { font-size: 9px; color: var(--text-tertiary); }
.cd-shape:hover { border-color: var(--accent); color: var(--accent); }
.cd-shape.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cd-shape.active small { color: var(--accent-dim, var(--accent)); }

/* Marche fantasma dell'anteprima campo */
.cd-ghost { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; background: rgba(183,121,31,0.14); border: 1.5px dashed var(--amber); border-radius: var(--r-pill); font-size: 11px; font-weight: var(--fw-bold); color: var(--amber); white-space: nowrap; }
.cd-ghost-n { width: 16px; height: 16px; border-radius: 50%; background: var(--amber); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }

/* Nome marca nella tabella percorso e tooltip sulla mappa */
.wp-name { font-size: 10px; color: var(--text-tertiary); font-weight: var(--fw-semi); margin-top: 2px; }
.wp-tip { background: var(--navy); color: #fff; border: none; border-radius: var(--r-sm); font-size: 10px; font-weight: var(--fw-bold); padding: 2px 6px; box-shadow: var(--sh-sm); }
.wp-tip::before { display: none; }

/* ---- Disegno libero ---- */
.draw-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.draw-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-secondary); transition: all var(--t-fast) var(--ease); }
.draw-tool span { font-size: 10px; font-weight: var(--fw-semi); }
.draw-tool:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.draw-tool.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.draw-colors { display: flex; gap: 5px; flex-wrap: wrap; }
.draw-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; transition: transform var(--t-fast) var(--ease); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border); }
.draw-color:hover { transform: scale(1.15); }
.draw-color.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--text-primary); transform: scale(1.1); }
.drawing-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); margin-bottom: 3px; background: var(--bg-surface); font-size: var(--fs-xs); }
.drawing-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.drawing-name { flex: 1; color: var(--text-primary); font-weight: var(--fw-medium); }
.drawing-toggle { color: var(--text-tertiary); width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center; }
.drawing-toggle:hover { color: var(--text-primary); background: var(--bg-surface-2); }
.drawing-toggle.off { opacity: 0.35; }

/* Etichette misura durante il disegno */
.draw-measure { background: var(--accent); color: #fff; padding: 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); box-shadow: var(--sh-md); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Coordinate manuali (DMS row) ---- */
.dms-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; }
.dms-row .input { height: 38px; text-align: center; }

/* ---- La mia posizione ---- */
.mypos-marker { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; position: relative; }
.mypos-core { position: absolute; inset: 0; border-radius: 50%; background: #4C8DFF; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(16,24,40,0.35); }
.mypos-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #4C8DFF; opacity: 0; animation: am-pulse-ring 2.4s var(--ease-out) infinite; }

/* ---- Badge di stato evento (elegante) ---- */
.ev-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.02em; background: var(--es-soft); color: var(--es-color); border: 1px solid var(--es-border, transparent); }
.ev-badge .esd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; position: relative; }
.ev-badge.live .esd::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: am-pulse-ring 2.2s var(--ease-out) infinite; }
.ev-badge.draft    { --es-color: var(--slate);  --es-soft: var(--slate-soft);  --es-border: rgba(122,134,153,0.18); }
.ev-badge.upcoming { --es-color: var(--accent); --es-soft: var(--accent-soft); --es-border: var(--border-accent); }
.ev-badge.live     { --es-color: var(--green);  --es-soft: var(--green-soft);  --es-border: rgba(24,146,92,0.22); }
.ev-badge.expired  { --es-color: var(--slate);  --es-soft: transparent;        --es-border: var(--border); }

/* ---- Segmented nell'header eventi ---- */
.events-head .head-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* ---- Classi (chip input) ---- */
.class-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.class-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-dim); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.class-chip button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-dim); opacity: 0.6; }
.class-chip button:hover { opacity: 1; background: rgba(43,91,226,0.14); }
.class-add { display: flex; gap: var(--sp-2); }
.class-add .input { height: 38px; }
.class-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.class-suggest button { height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px dashed var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: var(--fw-semi); transition: all var(--t-fast) var(--ease); }
.class-suggest button:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---- Pubblica/dettagli evento ---- */
.ee-status-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.ee-status-row .lbl { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ---- MODIFICA RAPIDA (Race Committee) ---- */
.qedit { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--sh-sm); }
.qedit-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-3); }
.qedit-head svg { color: var(--accent); }
.qe-sel { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--bg-tint); border-radius: var(--r-sm); text-align: center; }
.qe-sel strong { color: var(--text-primary); }
.qe-sel.empty { color: var(--text-tertiary); }
.qe-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: var(--sp-2); }
.qe-steps button { height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; transition: all var(--t-fast) var(--ease); }
.qe-steps button:hover { border-color: var(--border-strong); }
.qe-steps button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.qe-custom { display: flex; gap: 4px; margin-bottom: var(--sp-3); }
.qe-custom .input { height: 32px; font-size: var(--fs-xs); }
.qe-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 36px); gap: 4px; margin-bottom: var(--sp-3); }
.qe-dir { display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); transition: all var(--t-fast) var(--ease); }
.qe-dir:hover { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); }
.qe-dir:active { transform: scale(0.94); }
.qe-dir:disabled { opacity: 0.4; pointer-events: none; }
.qe-n { grid-column: 2; grid-row: 1; } .qe-s { grid-column: 2; grid-row: 3; }
.qe-o { grid-column: 1; grid-row: 2; } .qe-e { grid-column: 3; grid-row: 2; }
.qe-center { grid-column: 2; grid-row: 2; display: grid; place-items: center; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wp-table tbody tr.sel { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent); }

/* ---- Popup MODIFICA RAPIDA (grande, al volo) ---- */
.qe-pop { position: absolute; right: 16px; bottom: 16px; z-index: 600; width: 332px; max-height: calc(100% - 32px); overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--sh-xl); padding: var(--sp-4); animation: am-rise var(--t-base) var(--ease-out); }
.qe-pop.hidden { display: none; }
.qe-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.qe-pop-ttl { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--accent); }
.qe-pop-marksel { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.qe-nav { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); display: grid; place-items: center; transition: all var(--t-fast) var(--ease); }
.qe-nav:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.qe-pop-mark { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; }
.qe-pop-mark .wp-num { width: 32px; height: 32px; font-size: var(--fs-sm); }
.qe-pop-mark .m1 { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.qe-pop-mark .m2 { font-size: var(--fs-2xs); color: var(--text-tertiary); }
.qe-pop-steplbl { font-size: var(--fs-2xs); font-weight: var(--fw-semi); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-2); }
.qe-pop-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.qe-pop-steps button[data-step] { flex: 1; min-width: 56px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; transition: all var(--t-fast) var(--ease); }
.qe-pop-steps button[data-step]:hover { border-color: var(--border-strong); }
.qe-pop-steps button[data-step].active { background: var(--accent); color: #fff; border-color: var(--accent); }
.qe-pop-steps #qe-custom-val { flex: 1; min-width: 70px; height: 36px; }
.qe-pop-steps button[data-action] { height: 36px; }
.qe-pop-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 60px); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.qe-bigdir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); transition: all var(--t-fast) var(--ease); }
.qe-bigdir span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.qe-bigdir:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.qe-bigdir:active { transform: scale(0.95); }
.qe-bigdir:disabled { opacity: 0.35; pointer-events: none; }
.qe-n { grid-column: 2; grid-row: 1; } .qe-s { grid-column: 2; grid-row: 3; }
.qe-o { grid-column: 1; grid-row: 2; } .qe-e { grid-column: 3; grid-row: 2; }
.qe-bigcenter { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.qe-bigcenter span { font-size: var(--fs-h1); font-weight: var(--fw-black); color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.qe-bigcenter small { font-size: var(--fs-micro); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.qe-pop .btn-primary { height: 44px; }
@media (max-width: 920px) { .qe-pop { left: 16px; right: 16px; width: auto; } }

/* ---- Responsive ---- */
@media (max-width: 1180px) { :root { --inspector-w: 300px; --sidebar-w: 240px; } }
@media (max-width: 920px) {
  #login { grid-template-columns: 1fr; } .login-brand { display: none; }
  .page-ops.active { grid-template-columns: 1fr; }
  .sidebar, .inspector { display: none; }
  .event-editor { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SOLO TELEFONI (<=600px) — riprogettazione mobile.
   Desktop e tablet (>600px) restano ESATTAMENTE come prima.
   Cambia solo l'aspetto/impaginazione: nessuna modifica alla logica.
   ═══════════════════════════════════════════════════════════════ */
/* barra, backdrop e tasti mobile: invisibili su desktop/tablet */
.mob-nav, .mob-backdrop, .insp-info-btn, .insp-close-btn, .insp-off-btn { display: none; }

@media (max-width: 600px) {

  /* ---- Topbar compatta in cima ---- */
  .topbar { height: 50px; padding: 6px 12px; gap: 8px; }
  .topbar .kpi { display: none; }
  .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav-tab { height: 32px; padding: 0 9px; font-size: var(--fs-xs); white-space: nowrap; }

  /* ═══ Stile EV: MAPPA A TUTTO SCHERMO ═══ */
  .pages { overflow: hidden; }
  .page-ops.active { display: block; }
  .main { display: block; position: absolute; inset: 0; min-width: 0; }
  .map-wrap { position: absolute; inset: 0; flex: none; height: auto; }

  /* ---- Pannello comandi: chiaro Action Mark, compatto (idea da EV, non copia) ---- */
  /* Il pannello appare SOLO quando tocchi una boa; altrimenti mappa piena */
  .inspector {
    display: none; position: absolute; top: 8px; left: 8px; right: 8px;
    max-height: 42vh; overflow-y: auto;
    background: var(--bg-base); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--sh-lg); z-index: 1200;
  }
  body.buoy-selected .inspector { display: flex; }
  .inspector.expanded { max-height: 68vh; }
  .insp-empty { display: none; }
  .insp-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-tertiary); flex-shrink: 0; }
  .insp-off-btn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; border: 1px solid rgba(211,59,59,0.30); background: var(--red-soft); color: var(--red); flex-shrink: 0; }

  /* --- Header pulito, una riga --- */
  .inspector .insp-conn, .inspector .insp-club, .inspector .eyebrow, .inspector .feedback { display: none; }
  .inspector .insp-head { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
  .inspector .row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .inspector .insp-name { font-size: 14px; font-weight: 600; line-height: 1.1; }
  .inspector .badge { font-size: 10px; padding: 2px 7px; }
  .inspector .batt-chip { font-size: 10px; }
  .insp-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-tertiary); flex-shrink: 0; }
  .insp-info-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--border-accent); }

  /* --- Comandi compatti --- */
  .inspector .insp-section:has(.maint) { display: none; }        /* manutenzione -> barra sotto */
  .inspector .insp-section { padding: 8px; }
  .inspector .uc-grid { gap: 4px; margin-bottom: 0; }
  .inspector .uc { padding: 6px 8px; font-size: 11.5px; gap: 6px; border-radius: 8px; }
  .inspector .uc svg { width: 13px; height: 13px; }

  /* --- Default: SOLO i 6 comandi. Con (i) appaiono HOLD/RTL + telemetria --- */
  .inspector .insp-section:has(.metrics) { display: none; }
  .inspector .uc-sec { display: none; }
  .inspector.expanded .insp-section:has(.metrics) { display: block; }
  .inspector.expanded .uc-sec { display: grid; gap: 4px; margin-top: 4px; }
  .inspector .uc-sm { padding: 5px; font-size: 10px; }

  /* Flotta e Percorso = PAGINE separate (bottom sheet che salgono dalla barra) */
  .sidebar, .dock {
    position: fixed; left: 0; right: 0; bottom: 56px;
    max-height: 72vh; overflow-y: auto;
    display: flex; flex-direction: column;
    background: var(--bg-base); border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0; box-shadow: var(--sh-xl);
    transform: translateY(120%); transition: transform 0.26s var(--ease);
    z-index: 2600;
  }
  .sidebar::before, .dock::before { content: ''; width: 36px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 8px auto 4px; flex-shrink: 0; }
  body.mob-fleet .sidebar { transform: none; }
  body.mob-route .dock { transform: none; }
  .dock .dock-body { overflow-y: auto; }
  .route { grid-template-columns: 1fr; }
  .route-list { border-right: none; }
  .route-toolbar { flex-wrap: wrap; }
  .route-toolbar .hint { display: none; }
  .route-empty { height: auto; padding: 20px 16px; }
  .route-scroll { max-height: 32vh; }
  .route-side { padding: 10px 12px; }

  /* Sfondo scuro dietro le pagine aperte (tap per chiudere) */
  .mob-backdrop { position: fixed; inset: 0; background: rgba(13,33,55,0.42); z-index: 2500; }
  body.mob-fleet .mob-backdrop, body.mob-route .mob-backdrop { display: block; }

  /* ---- Barra di navigazione in basso (Flotta / Percorso / Bussola / Motori) ---- */
  .mob-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 56px;
    background: var(--bg-base); border-top: 1px solid var(--border); z-index: 3000;
  }
  .mob-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: var(--fw-semi); color: var(--text-tertiary); }
  .mob-nav button.active { color: var(--accent); }

  /* Strumenti mappa e chip riposizionati per non coprirsi con card e barra */
  .map-tools { top: 50%; transform: translateY(-50%); bottom: auto; left: 8px; }
  .wind-rose { top: auto !important; bottom: 66px; right: 10px; }
  .map-chip.sync { top: auto !important; bottom: 66px !important; left: 10px !important; right: auto !important; }

  /* ---- Popup comandi come "bottom sheet" a tutta larghezza ---- */
  .qe-pop {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important;
    max-height: 85vh !important; overflow-y: auto;
    border-radius: 18px 18px 0 0; z-index: 4000;
  }

  /* ---- Modali a misura di telefono ---- */
  .modal { width: calc(100vw - 24px) !important; max-width: none !important; max-height: 88vh; }

  /* Tocco piu' comodo */
  .btn-sm { min-height: 34px; }

  /* ---- HEADER pulito: logo + tab + icone, una sola riga ---- */
  .topbar { height: 48px; padding: 0 10px; gap: 6px; }
  .topbar .wordmark { display: none; }          /* resta solo il logo */
  .mark { width: 28px; height: 28px; }
  .tb-sep { display: none; }
  .nav-tab { height: 32px; padding: 0 10px; }
  /* bottone Club: solo icona */
  .topbar #admin-clubs-btn { font-size: 0; gap: 0; width: 34px; padding: 0; justify-content: center; }
  /* chip utente: solo avatar (niente nome/ruolo) */
  .user-chip { padding: 0; height: auto; border: none; background: transparent; }
  .user-chip > div:last-child { display: none; }
  .user-chip .avatar { width: 30px; height: 30px; }

  /* ---- Mappa: niente +/- (si usa il pinch), attribuzione sopra la barra ---- */
  .leaflet-control-zoom { display: none; }
  .leaflet-bottom { bottom: 58px; }

  /* ---- Safe area iPhone (barra home) ---- */
  .mob-nav { height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .sidebar, .dock { bottom: calc(56px + env(safe-area-inset-bottom)); }
  .wind-rose { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .map-chip.sync { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  /* il chip "aggiornato" segue il pannello boa: chiuso il pannello, via il chip */
  body:not(.buoy-selected) .map-chip.sync { display: none !important; }

  /* ---- Pagina Eventi ---- */
  .events-head { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .events-head h1 { font-size: 20px; }
  .events-head .head-actions { flex-wrap: wrap; }
  .event-editor { grid-template-columns: 1fr; }

  /* ---- Sezione PERCORSO rifinita per schermi stretti ---- */
  .dock-tabs { padding: 6px 10px; }
  /* toolbar: i 3 pulsanti dividono la riga in parti uguali */
  .route-toolbar { padding: 8px 10px; gap: 6px; }
  .route-toolbar .btn-sm { flex: 1; justify-content: center; }
  /* tabella: via la colonna Coordinate (stretta troppo), celle compatte */
  .wp-table th:nth-child(2), .wp-table td:nth-child(2) { display: none; }
  .wp-table th, .wp-table td { padding: 6px; }
  .wp-table .select-sm { max-width: 116px; font-size: 11px; }
  .wp-name { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* riepilogo: 3 valori affiancati invece che in colonna */
  .dock .summary { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; }
  .dock .summary-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; }
  .dock .summary-row + .summary-row { border-top: none; border-left: 1px solid var(--border-soft); }
  .dock .summary-row span { font-size: 10px; }
  .dock .summary-row .big { font-size: 15px; }
  /* colonna azioni: spazi ridotti, pulsanti comodi da toccare */
  .route-side { gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .route-side .btn { min-height: 40px; }

  /* ---- Foglio PERCORSO quasi a tutto schermo (non piu' schiacciato) ---- */
  .dock {
    top: 56px; bottom: calc(56px + env(safe-area-inset-bottom));
    height: auto; max-height: none;   /* annulla l'altezza fissa 244px del desktop */
  }
  .route-scroll { max-height: none; overflow: visible; }
  .route-empty { padding: 32px 16px; }

  /* Il popup "Controlla" sulla mappa e' superfluo qui: toccando la boa
     si apre gia' il pannello comandi. Lo nascondiamo solo su telefono. */
  .leaflet-popup:has(.pop-btn) { display: none; }

  /* ---- LOGIN piu' ricco: brand compatto sopra il form ---- */
  #login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .login-brand { display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 24px; }
  .lb-top .mark { width: 30px; height: 30px; }
  .lb-hero h1 { font-size: 25px; line-height: 1.15; }
  .lb-hero p { font-size: 12.5px; line-height: 1.55; max-width: 320px; }
  .lb-stats { display: flex; gap: 8px; }
  .lb-stat { flex: 1; }
  .lb-stat .v { font-size: 17px; }
  .lb-stat .l { font-size: 9px; }
  .login-form-wrap { align-items: flex-start; padding: 24px 18px calc(28px + env(safe-area-inset-bottom)); }
  .login-card h2 { font-size: 24px; }
}

/* --- Linea di percorso animata verso la destinazione (AM.moves) --- */
.move-line { animation: am-move-dash 0.7s linear infinite; }
@keyframes am-move-dash { to { stroke-dashoffset: -32; } }
.move-label-wrap { background: transparent; border: none; }
.move-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  background: #2B5BE2; color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  box-shadow: 0 2px 6px rgba(13, 33, 55, 0.30); font-variant-numeric: tabular-nums;
}

/* --- Telefono in orizzontale: chiedi di tornare in verticale --- */
#rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 100000;
    align-items: center; justify-content: center; text-align: center; padding: 24px;
    background: var(--bg-canvas); color: var(--text-primary);
  }
  #rotate-hint .rh-box { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
  #rotate-hint svg { color: var(--accent); }
  #rotate-hint .rh-t { font-size: 17px; font-weight: 700; }
  #rotate-hint .rh-s { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
}