diff --git a/app/diario-bordo.html b/app/diario-bordo.html
index 80906e1..1798ec4 100644
--- a/app/diario-bordo.html
+++ b/app/diario-bordo.html
@@ -774,6 +774,435 @@ header{
body{background:#fff;background-image:none}
.entry{break-inside:avoid;border:1px solid #999}
}
+
+/* ═══════════════════════════════════════════════════════
+ MODERN PROFESSIONAL OVERLAY · v2 — Apr 2026
+ Mantém identidade marítima (cores Fraunces + Manrope + JetBrains Mono),
+ mas moderniza profundamente: depth, microinterações, polish premium.
+ ═══════════════════════════════════════════════════════ */
+:root{
+ /* spacing scale (8pt base) */
+ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
+ /* radius scale (sutis — alinhados ao tom marítimo) */
+ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
+ /* shadow scale (depth profissional) */
+ --sh-1:0 1px 2px rgba(14,42,61,.06), 0 1px 1px rgba(14,42,61,.04);
+ --sh-2:0 2px 4px rgba(14,42,61,.06), 0 4px 8px rgba(14,42,61,.05);
+ --sh-3:0 4px 8px rgba(14,42,61,.07), 0 8px 16px rgba(14,42,61,.06);
+ --sh-4:0 8px 16px rgba(14,42,61,.08), 0 16px 32px rgba(14,42,61,.08);
+ --sh-5:0 16px 32px rgba(14,42,61,.10), 0 32px 64px rgba(14,42,61,.10);
+ --sh-glow:0 0 0 4px rgba(160,120,50,.12);
+ --sh-glow-blue:0 0 0 4px rgba(31,91,118,.18);
+ /* transitions */
+ --t-fast:120ms cubic-bezier(.4,0,.2,1);
+ --t-base:200ms cubic-bezier(.4,0,.2,1);
+ --t-slow:320ms cubic-bezier(.4,0,.2,1);
+ /* superfícies elevadas premium */
+ --surface-1:#fbf5e2;
+ --surface-2:#ffffff;
+ --surface-elevated:rgba(255,255,255,.78);
+ --border-subtle:rgba(184,156,108,.22);
+ --border-strong:rgba(184,156,108,.55);
+}
+
+/* ── BACKGROUND limpo elegante (sem ruído) ── */
+body{
+ background:
+ radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
+ linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
+ background-attachment:fixed;
+ background-image:
+ radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
+ linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
+}
+
+/* ── HEADER premium com glow sutil + gradient ── */
+header{
+ background:linear-gradient(180deg, #0e2a3d 0%, #143447 100%);
+ box-shadow:
+ inset 0 1px 0 rgba(200,159,84,.30),
+ inset 0 -1px 0 rgba(160,120,50,.55),
+ 0 4px 24px rgba(14,42,61,.18),
+ 0 12px 48px rgba(14,42,61,.10);
+ border-bottom:none;
+}
+.header-row{padding:2px 0}
+.boat-name{
+ text-shadow:0 1px 2px rgba(0,0,0,.25);
+ letter-spacing:-.015em;
+}
+.compass-mark{
+ filter:drop-shadow(0 2px 8px rgba(200,159,84,.35));
+ transition:transform var(--t-base);
+}
+.compass-mark:hover{transform:rotate(15deg)}
+
+/* ── TABS modernas: pill nav com indicador animado ── */
+.tabs{
+ background:rgba(239,229,205,.92);
+ backdrop-filter:blur(12px) saturate(1.2);
+ -webkit-backdrop-filter:blur(12px) saturate(1.2);
+ border-bottom:1px solid var(--border-subtle);
+ padding:8px 4px 0;
+ gap:2px;
+ box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
+}
+.tab{
+ border-radius:var(--r-md) var(--r-md) 0 0;
+ padding:13px 18px 14px;
+ transition:color var(--t-base), background var(--t-base);
+ position:relative;
+}
+.tab:hover{
+ color:var(--ink-mid);
+ background:rgba(255,255,255,.4);
+}
+.tab.active{
+ color:var(--ink-deep);
+ background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
+}
+.tab.active::after{
+ height:3px;left:14px;right:14px;bottom:0;
+ background:linear-gradient(90deg, var(--brass), var(--brass-bright));
+ border-radius:2px 2px 0 0;
+ box-shadow:0 0 8px rgba(160,120,50,.4);
+}
+
+/* ── CARDS com depth real (sombra multi-layer) ── */
+.gps-card,.anchor-card,.export-card,.empty,.entry,.contact-card{
+ border-radius:var(--r-lg);
+ box-shadow:var(--sh-2);
+ transition:box-shadow var(--t-base), transform var(--t-base);
+ overflow:hidden;
+}
+.entry{
+ border-radius:var(--r-md);
+ box-shadow:var(--sh-1);
+ border-color:var(--border-subtle);
+}
+.entry:hover{box-shadow:var(--sh-2)}
+
+.gps-card,.anchor-card{
+ border-radius:var(--r-lg);
+ background:linear-gradient(165deg, #0e2a3d 0%, #1a3d54 100%);
+ border:1px solid rgba(200,159,84,.4);
+ box-shadow:
+ inset 0 1px 0 rgba(200,159,84,.2),
+ var(--sh-3),
+ 0 0 32px rgba(31,91,118,.15);
+}
+.gps-card::before,.anchor-card::before{display:none}
+.gps-card.idle{
+ background:linear-gradient(165deg, #fbf5e2 0%, #f3e7c4 100%);
+ border:1px solid var(--border-subtle);
+ box-shadow:var(--sh-2);
+}
+.gps-stats,.anchor-stats-bar{
+ background:rgba(0,0,0,.15);
+ padding:14px;
+ border-radius:var(--r-md);
+ margin:12px 0 14px;
+}
+.gps-card.idle .gps-stats{background:rgba(184,156,108,.08)}
+
+.export-card,.empty{
+ background:var(--surface-elevated);
+ backdrop-filter:blur(8px);
+ -webkit-backdrop-filter:blur(8px);
+ border-radius:var(--r-lg);
+ border:1px solid var(--border-subtle);
+ box-shadow:var(--sh-2);
+}
+.export-card:hover{box-shadow:var(--sh-3)}
+
+/* ── BUTTONS premium com lift e ripple ── */
+.btn{
+ border-radius:var(--r-md);
+ transition:all var(--t-base);
+ font-weight:600;
+ letter-spacing:.12em;
+ position:relative;
+ overflow:hidden;
+}
+.btn:hover{
+ transform:translateY(-1px);
+ box-shadow:var(--sh-2);
+}
+.btn:active{transform:translateY(0); box-shadow:var(--sh-1)}
+.btn:focus-visible{
+ outline:none;
+ box-shadow:var(--sh-glow);
+}
+.btn-primary{
+ background:linear-gradient(180deg, #143a52 0%, #0e2a3d 100%);
+ border-color:rgba(0,0,0,.4);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.10),
+ var(--sh-1);
+}
+.btn-primary:hover{
+ background:linear-gradient(180deg, #1a4a66 0%, #143a52 100%);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.15),
+ var(--sh-3);
+}
+.btn-brass{
+ background:linear-gradient(180deg, #b88a3c 0%, #8d6826 100%);
+ border-color:rgba(0,0,0,.25);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.18),
+ var(--sh-1);
+}
+.btn-brass:hover{
+ background:linear-gradient(180deg, #c89954 0%, #a07832 100%);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.25),
+ var(--sh-3);
+}
+.btn-danger{
+ background:transparent;
+ border:1px solid var(--storm);
+ color:var(--storm);
+}
+.btn-danger:hover{
+ background:linear-gradient(180deg, #a04545 0%, #8c3434 100%);
+ color:#fff;
+ border-color:transparent;
+}
+
+/* ── FIELDS modernos com focus ring ── */
+.field input,.field textarea,.field select{
+ border-radius:var(--r-md);
+ background:var(--surface-2);
+ border:1px solid var(--border-subtle);
+ padding:12px 14px;
+ font-size:15px;
+ transition:border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
+}
+.field input:hover,.field textarea:hover,.field select:hover{
+ border-color:var(--border-strong);
+}
+.field input:focus,.field textarea:focus,.field select:focus{
+ border-color:var(--brass);
+ background:#fff;
+ box-shadow:var(--sh-glow);
+}
+.field-label{font-size:11px; font-weight:600; color:var(--ink-mid); margin-bottom:6px}
+
+/* ── MODAL com depth maior + entrance polida ── */
+.modal-backdrop{
+ background:rgba(14,42,61,.65);
+ backdrop-filter:blur(8px) saturate(1.1);
+ -webkit-backdrop-filter:blur(8px) saturate(1.1);
+}
+.modal{
+ border-radius:var(--r-xl) var(--r-xl) 0 0;
+ border-top:none;
+ box-shadow:
+ 0 -4px 12px rgba(0,0,0,.05),
+ 0 -16px 48px rgba(14,42,61,.25);
+ background-image:none;
+ background:linear-gradient(180deg, #fcf6e4 0%, #f8f0d4 100%);
+}
+@media(min-width:600px){
+ .modal{
+ border-radius:var(--r-xl);
+ box-shadow:0 24px 64px rgba(14,42,61,.30), 0 8px 16px rgba(14,42,61,.10);
+ }
+}
+.modal-head{
+ background:transparent;
+ padding:18px 22px;
+ border-bottom:1px solid var(--border-subtle);
+}
+.modal-body{padding:22px}
+.modal-foot{
+ background:rgba(0,0,0,.02);
+ padding:16px 22px;
+}
+
+/* ── FAB redesenhado: floating elegante ── */
+.fab{
+ border-radius:var(--r-pill) !important;
+ background:linear-gradient(135deg, #b88a3c 0%, #8d6826 100%) !important;
+ box-shadow:
+ 0 4px 12px rgba(160,120,50,.4),
+ 0 12px 32px rgba(14,42,61,.15),
+ inset 0 1px 0 rgba(255,255,255,.25) !important;
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+.fab:hover{
+ transform:translateY(-2px) scale(1.05);
+ box-shadow:
+ 0 8px 20px rgba(160,120,50,.5),
+ 0 16px 40px rgba(14,42,61,.20),
+ inset 0 1px 0 rgba(255,255,255,.30);
+}
+.fab:active{transform:translateY(0) scale(1)}
+
+/* ── STATS GRID polido ── */
+.stats{
+ border-radius:var(--r-lg);
+ background:transparent;
+ border:none;
+ gap:10px;
+ box-shadow:none;
+ display:grid;
+}
+.stat{
+ border-radius:var(--r-md);
+ background:var(--surface-elevated);
+ backdrop-filter:blur(8px);
+ -webkit-backdrop-filter:blur(8px);
+ border:1px solid var(--border-subtle);
+ box-shadow:var(--sh-1);
+ padding:16px 16px 14px;
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+.stat:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
+.stat::before{
+ height:3px; border-radius:2px;
+ background:linear-gradient(90deg, var(--brass), var(--brass-bright));
+ transform:scaleX(.5);
+ transition:transform var(--t-base);
+}
+.stat:hover::before{transform:scaleX(1)}
+
+/* ── EMPTY STATE elegante ── */
+.empty{padding:56px 28px; border-radius:var(--r-lg)}
+.empty::before,.empty::after{display:none}
+.empty-rose{
+ width:64px; height:64px;
+ filter:drop-shadow(0 4px 12px rgba(160,120,50,.25));
+ margin-bottom:18px;
+}
+.empty-title{font-size:21px}
+.empty-text{font-size:14px; line-height:1.65; opacity:.85}
+
+/* ── STATUS PILLS arredondados ── */
+.status-pill{
+ border-radius:var(--r-pill);
+ padding:3px 10px;
+ font-size:9.5px;
+ letter-spacing:.16em;
+}
+
+/* ── ALERTS com sombra sutil ── */
+.alert{
+ border-radius:var(--r-md);
+ border:1px solid var(--border-subtle);
+ border-left-width:4px;
+ box-shadow:var(--sh-1);
+ padding:14px 16px;
+ transition:transform var(--t-base);
+}
+.alert:hover{transform:translateX(2px)}
+
+/* ── PASSENGER PILLS modernos ── */
+.pax-pill,.pax-tag,.channel-pill{
+ border-radius:var(--r-pill);
+ padding:4px 12px;
+}
+
+/* ── ICON BUTTONS polidos ── */
+.icon-btn{
+ border-radius:var(--r-md);
+ transition:all var(--t-base);
+}
+.icon-btn:hover{
+ background:rgba(184,156,108,.15);
+ transform:scale(1.08);
+}
+
+/* ── MEDIA THUMBS ── */
+.media-thumb,.media-item{
+ border-radius:var(--r-md);
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+.media-thumb:hover,.media-item:hover{
+ transform:scale(1.04);
+ box-shadow:var(--sh-2);
+ z-index:2;
+}
+
+/* ── SENSOR WIDGET premium (top-right) ── */
+#sensors-widget{
+ border-radius:var(--r-lg) !important;
+ background:linear-gradient(165deg, rgba(14,42,61,.92), rgba(20,58,82,.92)) !important;
+ backdrop-filter:blur(20px) saturate(1.4);
+ -webkit-backdrop-filter:blur(20px) saturate(1.4);
+ box-shadow:
+ 0 4px 12px rgba(0,0,0,.15),
+ 0 8px 24px rgba(14,42,61,.18),
+ inset 0 1px 0 rgba(200,159,84,.2) !important;
+ border:1px solid rgba(200,159,84,.18);
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+#sensors-widget:hover{
+ transform:translateY(-1px);
+ box-shadow:
+ 0 8px 16px rgba(0,0,0,.20),
+ 0 16px 32px rgba(14,42,61,.22);
+}
+
+/* ── AUTH BOX polido ── */
+#auth-box{
+ background:linear-gradient(165deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
+ backdrop-filter:blur(8px);
+ -webkit-backdrop-filter:blur(8px);
+ border-radius:var(--r-md);
+ padding:14px;
+ margin-top:14px !important;
+ border:1px solid var(--border-subtle);
+ border-top:1px solid var(--border-subtle) !important;
+}
+
+/* ── CURSOR pointer em interativos críticos ── */
+.tab,.btn,.fab,.icon-btn,.media-btn,.media-thumb,.media-item,.alert,
+.entry-actions button,.modal-head button,.pax-tag button{
+ cursor:pointer;
+}
+
+/* ── FOCUS visible global ── */
+*:focus-visible{
+ outline:2px solid var(--brass);
+ outline-offset:2px;
+ border-radius:var(--r-sm);
+}
+
+/* ── REDUCED MOTION (accessibility) ── */
+@media (prefers-reduced-motion:reduce){
+ *,*::before,*::after{
+ animation-duration:.01ms !important;
+ animation-iteration-count:1 !important;
+ transition-duration:.01ms !important;
+ }
+}
+
+/* ── LARGE SCREENS: mais respiro ── */
+@media(min-width:780px){
+ .container{padding:32px 24px 96px}
+ .stats{grid-template-columns:repeat(4,1fr)}
+}
+
+/* ── SCROLLBAR sutil (Firefox + WebKit) ── */
+*{scrollbar-width:thin; scrollbar-color:var(--brass) transparent}
+::-webkit-scrollbar{width:8px; height:8px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:rgba(160,120,50,.35); border-radius:var(--r-pill)}
+::-webkit-scrollbar-thumb:hover{background:rgba(160,120,50,.55)}
+
+/* ── TYPOGRAPHY refinement ── */
+.boat-name{font-size:26px}
+.entry-title{font-size:20px; line-height:1.25}
+.modal-head h3{font-size:20px}
+.empty-title{margin-bottom:6px}
+
+/* ── SECTION HEADER sutilmente refinado ── */
+.section-header h2{font-size:11px; font-weight:600; color:var(--ink-mid)}
+
+/* ── TOOLBAR refinada ── */
+.toolbar{gap:10px; margin-bottom:18px}
diff --git a/server/public/index.html b/server/public/index.html
index 80906e1..1798ec4 100644
--- a/server/public/index.html
+++ b/server/public/index.html
@@ -774,6 +774,435 @@ header{
body{background:#fff;background-image:none}
.entry{break-inside:avoid;border:1px solid #999}
}
+
+/* ═══════════════════════════════════════════════════════
+ MODERN PROFESSIONAL OVERLAY · v2 — Apr 2026
+ Mantém identidade marítima (cores Fraunces + Manrope + JetBrains Mono),
+ mas moderniza profundamente: depth, microinterações, polish premium.
+ ═══════════════════════════════════════════════════════ */
+:root{
+ /* spacing scale (8pt base) */
+ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
+ /* radius scale (sutis — alinhados ao tom marítimo) */
+ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
+ /* shadow scale (depth profissional) */
+ --sh-1:0 1px 2px rgba(14,42,61,.06), 0 1px 1px rgba(14,42,61,.04);
+ --sh-2:0 2px 4px rgba(14,42,61,.06), 0 4px 8px rgba(14,42,61,.05);
+ --sh-3:0 4px 8px rgba(14,42,61,.07), 0 8px 16px rgba(14,42,61,.06);
+ --sh-4:0 8px 16px rgba(14,42,61,.08), 0 16px 32px rgba(14,42,61,.08);
+ --sh-5:0 16px 32px rgba(14,42,61,.10), 0 32px 64px rgba(14,42,61,.10);
+ --sh-glow:0 0 0 4px rgba(160,120,50,.12);
+ --sh-glow-blue:0 0 0 4px rgba(31,91,118,.18);
+ /* transitions */
+ --t-fast:120ms cubic-bezier(.4,0,.2,1);
+ --t-base:200ms cubic-bezier(.4,0,.2,1);
+ --t-slow:320ms cubic-bezier(.4,0,.2,1);
+ /* superfícies elevadas premium */
+ --surface-1:#fbf5e2;
+ --surface-2:#ffffff;
+ --surface-elevated:rgba(255,255,255,.78);
+ --border-subtle:rgba(184,156,108,.22);
+ --border-strong:rgba(184,156,108,.55);
+}
+
+/* ── BACKGROUND limpo elegante (sem ruído) ── */
+body{
+ background:
+ radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
+ linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
+ background-attachment:fixed;
+ background-image:
+ radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
+ linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
+}
+
+/* ── HEADER premium com glow sutil + gradient ── */
+header{
+ background:linear-gradient(180deg, #0e2a3d 0%, #143447 100%);
+ box-shadow:
+ inset 0 1px 0 rgba(200,159,84,.30),
+ inset 0 -1px 0 rgba(160,120,50,.55),
+ 0 4px 24px rgba(14,42,61,.18),
+ 0 12px 48px rgba(14,42,61,.10);
+ border-bottom:none;
+}
+.header-row{padding:2px 0}
+.boat-name{
+ text-shadow:0 1px 2px rgba(0,0,0,.25);
+ letter-spacing:-.015em;
+}
+.compass-mark{
+ filter:drop-shadow(0 2px 8px rgba(200,159,84,.35));
+ transition:transform var(--t-base);
+}
+.compass-mark:hover{transform:rotate(15deg)}
+
+/* ── TABS modernas: pill nav com indicador animado ── */
+.tabs{
+ background:rgba(239,229,205,.92);
+ backdrop-filter:blur(12px) saturate(1.2);
+ -webkit-backdrop-filter:blur(12px) saturate(1.2);
+ border-bottom:1px solid var(--border-subtle);
+ padding:8px 4px 0;
+ gap:2px;
+ box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
+}
+.tab{
+ border-radius:var(--r-md) var(--r-md) 0 0;
+ padding:13px 18px 14px;
+ transition:color var(--t-base), background var(--t-base);
+ position:relative;
+}
+.tab:hover{
+ color:var(--ink-mid);
+ background:rgba(255,255,255,.4);
+}
+.tab.active{
+ color:var(--ink-deep);
+ background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
+}
+.tab.active::after{
+ height:3px;left:14px;right:14px;bottom:0;
+ background:linear-gradient(90deg, var(--brass), var(--brass-bright));
+ border-radius:2px 2px 0 0;
+ box-shadow:0 0 8px rgba(160,120,50,.4);
+}
+
+/* ── CARDS com depth real (sombra multi-layer) ── */
+.gps-card,.anchor-card,.export-card,.empty,.entry,.contact-card{
+ border-radius:var(--r-lg);
+ box-shadow:var(--sh-2);
+ transition:box-shadow var(--t-base), transform var(--t-base);
+ overflow:hidden;
+}
+.entry{
+ border-radius:var(--r-md);
+ box-shadow:var(--sh-1);
+ border-color:var(--border-subtle);
+}
+.entry:hover{box-shadow:var(--sh-2)}
+
+.gps-card,.anchor-card{
+ border-radius:var(--r-lg);
+ background:linear-gradient(165deg, #0e2a3d 0%, #1a3d54 100%);
+ border:1px solid rgba(200,159,84,.4);
+ box-shadow:
+ inset 0 1px 0 rgba(200,159,84,.2),
+ var(--sh-3),
+ 0 0 32px rgba(31,91,118,.15);
+}
+.gps-card::before,.anchor-card::before{display:none}
+.gps-card.idle{
+ background:linear-gradient(165deg, #fbf5e2 0%, #f3e7c4 100%);
+ border:1px solid var(--border-subtle);
+ box-shadow:var(--sh-2);
+}
+.gps-stats,.anchor-stats-bar{
+ background:rgba(0,0,0,.15);
+ padding:14px;
+ border-radius:var(--r-md);
+ margin:12px 0 14px;
+}
+.gps-card.idle .gps-stats{background:rgba(184,156,108,.08)}
+
+.export-card,.empty{
+ background:var(--surface-elevated);
+ backdrop-filter:blur(8px);
+ -webkit-backdrop-filter:blur(8px);
+ border-radius:var(--r-lg);
+ border:1px solid var(--border-subtle);
+ box-shadow:var(--sh-2);
+}
+.export-card:hover{box-shadow:var(--sh-3)}
+
+/* ── BUTTONS premium com lift e ripple ── */
+.btn{
+ border-radius:var(--r-md);
+ transition:all var(--t-base);
+ font-weight:600;
+ letter-spacing:.12em;
+ position:relative;
+ overflow:hidden;
+}
+.btn:hover{
+ transform:translateY(-1px);
+ box-shadow:var(--sh-2);
+}
+.btn:active{transform:translateY(0); box-shadow:var(--sh-1)}
+.btn:focus-visible{
+ outline:none;
+ box-shadow:var(--sh-glow);
+}
+.btn-primary{
+ background:linear-gradient(180deg, #143a52 0%, #0e2a3d 100%);
+ border-color:rgba(0,0,0,.4);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.10),
+ var(--sh-1);
+}
+.btn-primary:hover{
+ background:linear-gradient(180deg, #1a4a66 0%, #143a52 100%);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.15),
+ var(--sh-3);
+}
+.btn-brass{
+ background:linear-gradient(180deg, #b88a3c 0%, #8d6826 100%);
+ border-color:rgba(0,0,0,.25);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.18),
+ var(--sh-1);
+}
+.btn-brass:hover{
+ background:linear-gradient(180deg, #c89954 0%, #a07832 100%);
+ box-shadow:
+ inset 0 1px 0 rgba(255,255,255,.25),
+ var(--sh-3);
+}
+.btn-danger{
+ background:transparent;
+ border:1px solid var(--storm);
+ color:var(--storm);
+}
+.btn-danger:hover{
+ background:linear-gradient(180deg, #a04545 0%, #8c3434 100%);
+ color:#fff;
+ border-color:transparent;
+}
+
+/* ── FIELDS modernos com focus ring ── */
+.field input,.field textarea,.field select{
+ border-radius:var(--r-md);
+ background:var(--surface-2);
+ border:1px solid var(--border-subtle);
+ padding:12px 14px;
+ font-size:15px;
+ transition:border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
+}
+.field input:hover,.field textarea:hover,.field select:hover{
+ border-color:var(--border-strong);
+}
+.field input:focus,.field textarea:focus,.field select:focus{
+ border-color:var(--brass);
+ background:#fff;
+ box-shadow:var(--sh-glow);
+}
+.field-label{font-size:11px; font-weight:600; color:var(--ink-mid); margin-bottom:6px}
+
+/* ── MODAL com depth maior + entrance polida ── */
+.modal-backdrop{
+ background:rgba(14,42,61,.65);
+ backdrop-filter:blur(8px) saturate(1.1);
+ -webkit-backdrop-filter:blur(8px) saturate(1.1);
+}
+.modal{
+ border-radius:var(--r-xl) var(--r-xl) 0 0;
+ border-top:none;
+ box-shadow:
+ 0 -4px 12px rgba(0,0,0,.05),
+ 0 -16px 48px rgba(14,42,61,.25);
+ background-image:none;
+ background:linear-gradient(180deg, #fcf6e4 0%, #f8f0d4 100%);
+}
+@media(min-width:600px){
+ .modal{
+ border-radius:var(--r-xl);
+ box-shadow:0 24px 64px rgba(14,42,61,.30), 0 8px 16px rgba(14,42,61,.10);
+ }
+}
+.modal-head{
+ background:transparent;
+ padding:18px 22px;
+ border-bottom:1px solid var(--border-subtle);
+}
+.modal-body{padding:22px}
+.modal-foot{
+ background:rgba(0,0,0,.02);
+ padding:16px 22px;
+}
+
+/* ── FAB redesenhado: floating elegante ── */
+.fab{
+ border-radius:var(--r-pill) !important;
+ background:linear-gradient(135deg, #b88a3c 0%, #8d6826 100%) !important;
+ box-shadow:
+ 0 4px 12px rgba(160,120,50,.4),
+ 0 12px 32px rgba(14,42,61,.15),
+ inset 0 1px 0 rgba(255,255,255,.25) !important;
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+.fab:hover{
+ transform:translateY(-2px) scale(1.05);
+ box-shadow:
+ 0 8px 20px rgba(160,120,50,.5),
+ 0 16px 40px rgba(14,42,61,.20),
+ inset 0 1px 0 rgba(255,255,255,.30);
+}
+.fab:active{transform:translateY(0) scale(1)}
+
+/* ── STATS GRID polido ── */
+.stats{
+ border-radius:var(--r-lg);
+ background:transparent;
+ border:none;
+ gap:10px;
+ box-shadow:none;
+ display:grid;
+}
+.stat{
+ border-radius:var(--r-md);
+ background:var(--surface-elevated);
+ backdrop-filter:blur(8px);
+ -webkit-backdrop-filter:blur(8px);
+ border:1px solid var(--border-subtle);
+ box-shadow:var(--sh-1);
+ padding:16px 16px 14px;
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+.stat:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
+.stat::before{
+ height:3px; border-radius:2px;
+ background:linear-gradient(90deg, var(--brass), var(--brass-bright));
+ transform:scaleX(.5);
+ transition:transform var(--t-base);
+}
+.stat:hover::before{transform:scaleX(1)}
+
+/* ── EMPTY STATE elegante ── */
+.empty{padding:56px 28px; border-radius:var(--r-lg)}
+.empty::before,.empty::after{display:none}
+.empty-rose{
+ width:64px; height:64px;
+ filter:drop-shadow(0 4px 12px rgba(160,120,50,.25));
+ margin-bottom:18px;
+}
+.empty-title{font-size:21px}
+.empty-text{font-size:14px; line-height:1.65; opacity:.85}
+
+/* ── STATUS PILLS arredondados ── */
+.status-pill{
+ border-radius:var(--r-pill);
+ padding:3px 10px;
+ font-size:9.5px;
+ letter-spacing:.16em;
+}
+
+/* ── ALERTS com sombra sutil ── */
+.alert{
+ border-radius:var(--r-md);
+ border:1px solid var(--border-subtle);
+ border-left-width:4px;
+ box-shadow:var(--sh-1);
+ padding:14px 16px;
+ transition:transform var(--t-base);
+}
+.alert:hover{transform:translateX(2px)}
+
+/* ── PASSENGER PILLS modernos ── */
+.pax-pill,.pax-tag,.channel-pill{
+ border-radius:var(--r-pill);
+ padding:4px 12px;
+}
+
+/* ── ICON BUTTONS polidos ── */
+.icon-btn{
+ border-radius:var(--r-md);
+ transition:all var(--t-base);
+}
+.icon-btn:hover{
+ background:rgba(184,156,108,.15);
+ transform:scale(1.08);
+}
+
+/* ── MEDIA THUMBS ── */
+.media-thumb,.media-item{
+ border-radius:var(--r-md);
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+.media-thumb:hover,.media-item:hover{
+ transform:scale(1.04);
+ box-shadow:var(--sh-2);
+ z-index:2;
+}
+
+/* ── SENSOR WIDGET premium (top-right) ── */
+#sensors-widget{
+ border-radius:var(--r-lg) !important;
+ background:linear-gradient(165deg, rgba(14,42,61,.92), rgba(20,58,82,.92)) !important;
+ backdrop-filter:blur(20px) saturate(1.4);
+ -webkit-backdrop-filter:blur(20px) saturate(1.4);
+ box-shadow:
+ 0 4px 12px rgba(0,0,0,.15),
+ 0 8px 24px rgba(14,42,61,.18),
+ inset 0 1px 0 rgba(200,159,84,.2) !important;
+ border:1px solid rgba(200,159,84,.18);
+ transition:transform var(--t-base), box-shadow var(--t-base);
+}
+#sensors-widget:hover{
+ transform:translateY(-1px);
+ box-shadow:
+ 0 8px 16px rgba(0,0,0,.20),
+ 0 16px 32px rgba(14,42,61,.22);
+}
+
+/* ── AUTH BOX polido ── */
+#auth-box{
+ background:linear-gradient(165deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
+ backdrop-filter:blur(8px);
+ -webkit-backdrop-filter:blur(8px);
+ border-radius:var(--r-md);
+ padding:14px;
+ margin-top:14px !important;
+ border:1px solid var(--border-subtle);
+ border-top:1px solid var(--border-subtle) !important;
+}
+
+/* ── CURSOR pointer em interativos críticos ── */
+.tab,.btn,.fab,.icon-btn,.media-btn,.media-thumb,.media-item,.alert,
+.entry-actions button,.modal-head button,.pax-tag button{
+ cursor:pointer;
+}
+
+/* ── FOCUS visible global ── */
+*:focus-visible{
+ outline:2px solid var(--brass);
+ outline-offset:2px;
+ border-radius:var(--r-sm);
+}
+
+/* ── REDUCED MOTION (accessibility) ── */
+@media (prefers-reduced-motion:reduce){
+ *,*::before,*::after{
+ animation-duration:.01ms !important;
+ animation-iteration-count:1 !important;
+ transition-duration:.01ms !important;
+ }
+}
+
+/* ── LARGE SCREENS: mais respiro ── */
+@media(min-width:780px){
+ .container{padding:32px 24px 96px}
+ .stats{grid-template-columns:repeat(4,1fr)}
+}
+
+/* ── SCROLLBAR sutil (Firefox + WebKit) ── */
+*{scrollbar-width:thin; scrollbar-color:var(--brass) transparent}
+::-webkit-scrollbar{width:8px; height:8px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:rgba(160,120,50,.35); border-radius:var(--r-pill)}
+::-webkit-scrollbar-thumb:hover{background:rgba(160,120,50,.55)}
+
+/* ── TYPOGRAPHY refinement ── */
+.boat-name{font-size:26px}
+.entry-title{font-size:20px; line-height:1.25}
+.modal-head h3{font-size:20px}
+.empty-title{margin-bottom:6px}
+
+/* ── SECTION HEADER sutilmente refinado ── */
+.section-header h2{font-size:11px; font-weight:600; color:var(--ink-mid)}
+
+/* ── TOOLBAR refinada ── */
+.toolbar{gap:10px; margin-bottom:18px}