/* ============================================================
   Nautech mobile app mockup: device frame + app screens.
   Every length inside the screen is expressed in app points
   (the MAUI layout values) times --u, so the whole phone scales
   from one variable: --phone-w. 1px borders stay 1 CSS px.
   Palette tokens come from the app's Generated_*ThemeColorTokens.
   ============================================================ */

.phone{
  --phone-w:300px;
  --ph-bezel:calc(var(--phone-w) * 0.036);
  --ph-screen-w:calc(var(--phone-w) - 2 * var(--ph-bezel));
  --u:calc(var(--ph-screen-w) / 393);
  --ph-screen-h:calc(872 * var(--u));
  --ph-radius:calc(var(--phone-w) * 0.1467);

  position:relative;
  width:var(--phone-w);
  height:calc(var(--ph-screen-h) + 2 * var(--ph-bezel));
  flex-shrink:0;
  font-family:var(--app-sans, "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  user-select:none;
  -webkit-user-select:none;
}
.phone *, .phone *::before, .phone *::after{ box-sizing:border-box; }
.phone svg{ display:block; }

/* ---------- app palette, three themes ---------- */
.phone, .phone[data-app-theme="light"]{
  --ph-page:#F1F5F9; --ph-card:#FFFFFF; --ph-elevated:#F3F3F3; --ph-sunken:#E2E8F0;
  --ph-primary:#0073FF; --ph-on-primary:#FFFFFF;
  --ph-text:#0F172A; --ph-text-2:#64748B; --ph-muted:#94A3B8; --ph-logo:#0F172A;
  --ph-border:rgba(0,0,0,.08); --ph-divider:#F1F5F9;
  --ph-ok:#21834F; --ph-err:#DC2626;
  --ph-crit:#DC2626; --ph-warn:#D97706; --ph-info:#1E40AF;
  --ph-ongoing-crit:#DC2626; --ph-ongoing-warn:#D97706; --ph-resolved:#64748B;
  --ph-tab:#64748B; --ph-tab-sel:#0073FF;
  --ph-sw-bg:#FFFFFF; --ph-sw-border:#E2E8F0; --ph-sw-dot-on:#4ADE80; --ph-sw-dot-off:#CBD5E1;
  --ph-sw-label:#475569; --ph-sw-track-off:#CBD5E1; --ph-thumb:#FFFFFF;
  --ph-chip-bg:#E2E8F0; --ph-gold:#FFCF00; --ph-star:#CBD5E1;
  --ph-shadow-sm:rgba(0,0,0,.10); --ph-shadow-lg:rgba(0,0,0,.35);
  --ph-status-tint:rgba(220,38,38,.06);
  --ph-map-sea:#DCE8F3; --ph-map-sea-2:#D1DFEE; --ph-map-land:#EEE9DA; --ph-map-coast:#D6CEB4;
  --ph-map-grid:rgba(15,23,42,.05); --ph-banner:rgba(245,247,250,.88);
  --ph-map-road:#FFFFFF; --ph-map-road-edge:#E3DBC7; --ph-map-urban:#E6E0D1; --ph-map-label:#5B6472;
}
.phone[data-app-theme="dark"]{
  --ph-page:#0F172A; --ph-card:#1E293B; --ph-elevated:#0F1D31; --ph-sunken:#334155;
  --ph-primary:#4D9EFF; --ph-on-primary:#FFFFFF;
  --ph-text:#F1F5F9; --ph-text-2:#8696AE; --ph-muted:#94A3B8; --ph-logo:#FFFFFF;
  --ph-border:rgba(255,255,255,.08); --ph-divider:rgba(255,255,255,.08);
  --ph-ok:#47B777; --ph-err:#F45A51;
  --ph-crit:#B91C1C; --ph-warn:#D97706; --ph-info:#1E3A8A;
  --ph-ongoing-crit:#F45A51; --ph-ongoing-warn:#FFB147; --ph-resolved:#94A3B8;
  --ph-tab:#64748B; --ph-tab-sel:#FFFFFF;
  --ph-sw-bg:#1E293B; --ph-sw-border:#475569; --ph-sw-dot-on:#4ADE80; --ph-sw-dot-off:#475569;
  --ph-sw-label:#CBD5E1; --ph-sw-track-off:#475569; --ph-thumb:#FFFFFF;
  --ph-chip-bg:#334155; --ph-gold:#F97316; --ph-star:#475569;
  --ph-shadow-sm:rgba(0,0,0,.40); --ph-shadow-lg:rgba(0,0,0,.60);
  --ph-status-tint:rgba(244,90,81,.10);
  --ph-map-sea:#0B1426; --ph-map-sea-2:#111C31; --ph-map-land:#1C2739; --ph-map-coast:#2E3B50;
  --ph-map-grid:rgba(255,255,255,.04); --ph-banner:rgba(30,41,59,.86);
  --ph-map-road:#33455F; --ph-map-road-edge:#1F2C40; --ph-map-urban:#233149; --ph-map-label:#9FB0C6;
}
.phone[data-app-theme="night"]{
  --ph-page:#0D0000; --ph-card:#1A0A0A; --ph-elevated:#261212; --ph-sunken:#2D1515;
  --ph-primary:#B22222; --ph-on-primary:#E0CCCC;
  --ph-text:#EF4444; --ph-text-2:#A89090; --ph-muted:#7A5A5A; --ph-logo:#EF4444;
  --ph-border:rgba(239,68,68,.10); --ph-divider:rgba(239,68,68,.10);
  --ph-ok:#1F6B41; --ph-err:#EF4444;
  --ph-crit:#C50E0E; --ph-warn:#AB5B00; --ph-info:#4C1717;
  --ph-ongoing-crit:#F08080; --ph-ongoing-warn:#E0954A; --ph-resolved:#806C6C;
  --ph-tab:#8B6060; --ph-tab-sel:#B22222;
  --ph-sw-bg:#1A0000; --ph-sw-border:#3A0000; --ph-sw-dot-on:#E04300; --ph-sw-dot-off:#5C0000;
  --ph-sw-label:#D03838; --ph-sw-track-off:#5C0000; --ph-thumb:#E0CCCC;
  --ph-chip-bg:#2A0000; --ph-gold:#E06C00; --ph-star:#B22222;
  --ph-shadow-sm:rgba(0,0,0,.40); --ph-shadow-lg:rgba(0,0,0,.60);
  --ph-status-tint:rgba(197,14,14,.12);
  --ph-map-sea:#0D0000; --ph-map-sea-2:#150404; --ph-map-land:#1A0A0A; --ph-map-coast:#3A1F1F;
  --ph-map-grid:rgba(239,68,68,.04); --ph-banner:rgba(26,10,10,.88);
  --ph-map-road:#3A1F1F; --ph-map-road-edge:#240A0A; --ph-map-urban:#2A1212; --ph-map-label:#A89090;
}

/* ---------- device ---------- */
.phone-frame{
  position:absolute; inset:0;
  border-radius:var(--ph-radius);
  background:linear-gradient(155deg,#5a606b 0%,#1a1d23 16%,#0c0e12 48%,#1a1d23 84%,#626873 100%);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.55), 0 14px 30px -14px rgba(0,0,0,.35);
}
.phone-frame::before{
  content:""; position:absolute; inset:2px;
  border-radius:calc(var(--ph-radius) - 2px);
  background:#06070a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-btn{
  position:absolute; width:3px; border-radius:2px;
  background:linear-gradient(90deg,#2a2e36,#4b515c 50%,#2a2e36);
}
.phone-btn--mute{ left:-3px; top:16%; height:4.2%; }
.phone-btn--up{ left:-3px; top:23.5%; height:8.6%; }
.phone-btn--down{ left:-3px; top:33.6%; height:8.6%; }
.phone-btn--power{ right:-3px; top:26%; height:13.4%; background:linear-gradient(270deg,#2a2e36,#4b515c 50%,#2a2e36); }

.phone-screen{
  position:absolute; inset:var(--ph-bezel);
  border-radius:calc(var(--ph-radius) - var(--ph-bezel) + 2px);
  overflow:hidden;
  background:var(--ph-page);
  color:var(--ph-text);
  font-size:calc(14 * var(--u));
  line-height:1.35;
  transition:background .4s ease, color .4s ease;
}
.phone-screen::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:60;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.phone-island{
  position:absolute; top:calc(11 * var(--u)); left:50%; transform:translateX(-50%);
  width:calc(126 * var(--u)); height:calc(37 * var(--u));
  background:#000; border-radius:999px; z-index:55;
}
.phone-island::after{
  content:""; position:absolute; right:calc(9 * var(--u)); top:50%; transform:translateY(-50%);
  width:calc(11 * var(--u)); height:calc(11 * var(--u)); border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1d2b47 0 22%,#0a0f1c 60%,#000 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-home{
  position:absolute; left:50%; bottom:calc(8 * var(--u)); transform:translateX(-50%);
  width:calc(134 * var(--u)); height:calc(5 * var(--u)); border-radius:999px;
  background:var(--ph-text); opacity:.85; z-index:56;
}

/* ---------- status bar ---------- */
.app-status{
  position:absolute; top:0; left:0; right:0; height:calc(54 * var(--u)); z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:calc(12 * var(--u)) calc(28 * var(--u)) 0 calc(34 * var(--u));
  font-size:calc(16 * var(--u)); font-weight:600; letter-spacing:-.01em;
}
.app-status-icons{ display:flex; align-items:center; gap:calc(7 * var(--u)); }
.app-status-icons svg{ height:calc(12 * var(--u)); width:auto; fill:currentColor; }
.app-status-icons .app-batt{ height:calc(13 * var(--u)); }

/* ---------- screens ---------- */
.app-screen{
  position:absolute; top:calc(54 * var(--u)); left:0; right:0; bottom:calc(84 * var(--u));
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .42s ease, visibility 0s linear .42s;
}
.phone[data-screen="dashboard"] .app-screen--dashboard,
.phone[data-screen="livedata"] .app-screen--livedata,
.phone[data-screen="switches"] .app-screen--switches,
.phone[data-screen="notifications"] .app-screen--notifications,
.phone[data-screen="settings"] .app-screen--settings{
  opacity:1; visibility:visible; transition:opacity .42s ease;
}
.app-screen--notifications{ bottom:0; z-index:30; background:var(--ph-page); padding-bottom:calc(34 * var(--u)); }

/* ---------- header (HeaderView) ---------- */
.app-header{
  display:flex; align-items:center;
  padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
  flex-shrink:0;
}
.app-logo{
  width:calc(100 * var(--u)); height:calc(40 * var(--u)); flex-shrink:0;
  background:var(--ph-logo);
  -webkit-mask:url(data:image/webp;base64,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) left center / contain no-repeat;
          mask:url(data:image/webp;base64,UklGRsANAABXRUJQVlA4WAoAAAAYAAAAcgIAgwAAVlA4TN8MAAAvcsIgELcgFkzmL90Xw/zPP0G2Ld4JXoJJmmo7BjUAABzbBwCAt9t287a2bQ2EqMHQtCiFAvv//6+2QRJUlLWz3yL6PwH0p3IJK/2x5QJAlr81gte6/KUJeC/uD035gPUPDT5vf2cWRf474xXff2eCovyfyZz7c8MFOPhvDQsAyPKXxgneivtD88DH9IdGPtW/Mx7K5c/Mqgl/ZuJfnPR/ygn/77//99//+++/D/FA96vjxb9ldhfgfMyHVLzWszzDcjVuWUN6H1bvJvHP/AwzrTk/g5HlUSpG1iPMxWt85vL2eMZ1uSa3hGcuReQs5ZlWvgYXcoW6niWndZmFY6lor0fgq/DxELTW8lzZmit4FZ6m4FXYwhMGhWfheFS0l+fKl+LWp6BZjsDTfVV0riUu5lws6F/CBfhc0f18LqYy3p+zPPG+GHjCpPAM7lHQ/4x8ES4WdC/BzcQFQyWzJfeoGCuBp3KPisES2Azj8zpJ/QA/jGG02PMHRpdwAT5XDK2Zp2HB8BKsuEfFeAnzcIbFmtmIV5Q5PD7HYdEKnDFfYFHCZL7AYOZJCixKMPFVYVP8HO4Jsw9nIijqHFGRLoNNuSesSpjIFxh9TBFgVHgYF9h9zvBVYViCLfAUyZC3ImT5q8Kw8CRLgV3xE4gV4DHoX4VlYWuuwHhmU8sUm2IbRsXIasgdMP6YwT1g+2nOw7DwiCeMi7flBeaFLfkpdkUex2IikV0vMH+wuUVgXdhYsARZurkM+9HSF2as/wyFqyOWcTWS3S/MKGzsq8J+XW15U8C/Tu5E3ypnKUV64WHngUkf94Fo3fKR1UWdc46O7D4xpyymnpjzYcpVXZXXOgD/urgTHc9tZfq4rKn0wD8rGV1r2WLwryEdpRMeN+I6XUFXyTEs/OrXuJ9dUBc7rqBrPbYYVv+6xnRIDzws0fqh5rg4+sh+TcfZpS49MpprYmp269EGbyOjY4lMrT6WHngMibfMnWivJThqdX6XNtTFCp9orzkwNXMobXhYolUAHJ56cjjaULntgVYJ1JmDtFS28ESzJEd9OUgb4og02/EjuRPNJTrq7PcmVLbBgubiHXXmXVrwsERuDY66c5AWnK4loLEmRwOT6HC6cQ+0Fk8jgzTBX1f5kU60Fk8jeW+BsAV3orV4GsmpBQ9Lw4M04NnA0lCYxvKuw3PYFxproNGpSfgH2H6OJxproNG8N+B0Bg40np5Gc2nAv+sg3hvgdQf0G42POvhBCxo3R+NZGlB+gPRjPNB4ODIYRIfnuAcaE1lMDXW5DqJYdaIK0AeyuIhKxrDoaiCbqQHx17BCXyPZ5KLDv1EBevFkcxEVxF0IsagQNaILZJOrBmlIhlqYrMYGLL8EFp0sZDbpKo9h0RVHVllUKFdCLKrqPgWoA1ldqqa6AQFqYbK7VF35JWSohclwUqGMyVDvZJhFhXglxFWD9ElUiewGDVI/FpUwWV6qCvFXEKAWJtNBhTAiQL2TaRZV5SuhVVXduwBtJsubprpuGVphsr1UVXXD4hTywzhRVSbjSVXdAFHtZJyrBuVSaNNgfScaYVOuKhB7MbSVyXpQIQ1LF5Mu6QH1SuY3DVK/B7Qnmfcq+EtxoilvFmgD2Y6a0iurItlPqupuH4sqkX0nmup6sWiE7VFU5UuhoAG/bBoh61UB34ehzTRj0SB12W7VA1qhGb0GqVeANtCMm6ZcCxVNehFNMJc0qU/WCE/BVVNdj/1WiYqnoF1Te4km05TuVHxfTNQUImIohcw7zdmFoY00Z9Qg3rwA7UZzLhr4PgFanoNYPoWLcVUBRxQ00R4VBVyPoBGatWjKzSsa4UmoaEqfQ5NpVq7vhC+Gdk0gyhqeIGpCj6IJ03gN/PVUG/EiGNpEswZNdT0YWp6GWF6E6WqCZiM6FSdNyJqtA0NZ3TRUNOl6YCNdRFDxNE6D0CNoMs0cthwdXY7TFCIo8wxUFd8dgibTvF5z3rqiyTSvaHKPQ+On6j4biaISa9YpToV0ODR+IqoKuDtXNctEh6b2qAqhG3IowF6zTLEr4NpEITRz0oQb56EUmnjXgNsWKPMd2TXLqnFTJA03OSjzVF6z3bio2WY6VLEtaMIdSZoQFJWmDBrf5DXrVFQV5cZtGj8Riyq3bZrl5sSkkOnWpqjhuXZFvXFFUemzjykny88C/dlWFJXuSNQkTZkuNG0KobmjAu5i+CcRRfngBbO3nYrzloQrWUccijJZ0Cz3Dcrt3Yr5uQnK79+OH1EU22SLZr1tThPfsFzA2uI0+ReVBsTJWBOa0m1ijX8TcIGxhTXp9uwXJopwHfE3sLxJV5B+BfnC/HWk27Zo+M12BfE/Wv66lh+E2+IV+P+a8T+ZvwChAdt/BMJ15KZ432ibLzQ5Tf7FlZ8gaOLFxKtxGv+OUp2rBmrXfP/iDkX6EcLFhKshTfhAzqctDzzKwJyTd9RRFOcvKjftinzvwjWIIn263lNRf3FJIde13qei+L6uXQH+vQUF3GV5zTpD+El2Rb2uqFl/b4vGX0ZpWjR+sngVPua09okK8GWtmu3mhCtzmu2y+DrCRTzwKtxj1cTLcpryywkj6FTUnyDMEDXrNTDeV+7gNGWyJYSlF4kCbiq3rsuN2xTwV0WaOEPS+CY/R/6ArQOJAstMSwEA4U6bJs30VQEI37ZVUy6rKrYZDo27BvlUe2yaNBFXvBXu4zXnRA+8re7OrEOcBnxVp6LMcCpOamZNtLNAyR28prppnODj1sdVBfw0X/iY7owfQkWTr2pXVGePofxuc5pkZ9X4Dq4qkKZ54HPtQ0VTZmF8/r5tUQM/EQ+JCnh7QRPaqCqynaRZOtCuqTwJQ9vJa+AnKYpy21zVlIvymsPeqeEOp+K0c2hcD6/BMYlozk5UNeKmeEC53TbaNIjX5KqiOmseykIddwWcGVFU6npqsE7xgPbZK2nwnIGhjVeWLo5VdbkkKgoka6cm9IiaYGWBsvSJqsoTrFBzL1c18PZYVMt9o10DcZcUNdXZClBW7sGaYiVrtj6uanA6cyyqTN2TqrI1d0IrdONYhdNdkdMgm2LRZOpaFWAjovF9KKqQrbFAW7mfqxqIM5ahTneONhXyFVHRYDXkBFrus2myjS9oqfepQrbFAnWigUmF05nKUIu7S6mPqyoc7oK8qrKdDG2mvl4Db4FFk7t5HbIlFqiFRjpR4WRDGXqmW0erDsLXQ0UDYSsZau5EVSPOQIF27UabDiebWQR6P4S8DsJWXIE+0c2jTQfxVpj7fHfxKgibcAXqRL2TBnncA1qh/k50kMXIV4V+o8GHDjXaWAT6g26fEx3wdBaWAgj3yF2oqCBsgAVqoe6uavAY9YQ6DKCl6oCHBS5oFDfKiQ7IbOCrQi98/4hrAySM+8KrsBWuKtQ47KtCz/0oqXC4EVygFhoaWiBhlHtUNFam4b4FEkf5gkZh+gWQbwEkjHEZ74sVijog8xBf0JhooKsqiO/mHhV6P4ZSCyBhhHtUNK9kMLYAEtwAX9C80K+AQhMgD+7nT3x2Vqg0AJm7+YLWTEOjDsjchR8VjRuNTk2APLiTf1a0JzK5NQGSfR8XC9oD/RIotQE4n6vr4Qu0wYyTFqAEbuP1WdEsbgyVBqDEReWWkAXN4oZRagNwPlfWuSXmip6JjO5tACSv3OBjQc9AvwaKPV5ryc+kzWeFPpkhliYAcjxjCCHElFI+zoqewjSYawuAWo6ccy6nVHQVJoOpx2stR04ppZyLoHcis3uP11pyiiGE9MwnOgf6RdBa+wyPdoilg0VhGh46jK4LmUydLEYyvHcaXxf6VRDLDGyIWCYQJoPJWF3IqJcpqifTaQph+mUQF3uZLBGf5k4mk8lUXcgsnxOcTMbTBLujXwdRsiZsiygZ28hqMiRMlpO5RPYXMVYjDV4U37eKWGwFskZeDNWV7CYzuyPbfJoqC83Iu6mDabRT5PnibKyJBohSNZTos2YbRJTMZEeWWUzUSPaDmJFAswYxUzwZlMlWTfSKNAdVhTdBvJtJpCyKdRjxbqJ4sp5k3ME0ZRATEmjmICaKJ5PbpzQHa7yrn/wk6ZOQVd7FgnjSxk9CFnmXQXXzNCFvMqZ4mjbIsOJp9iCj6ubJqP+0zkHlkxClD4UmdfKushkiCmVUTY7054fVBBGFo18twdGsoXST5Ghqv9cBJTq6wnUfUHNwZFfeCU3qPyUi2t4UNwuxvMhCtl3Yz16So6dmlpe6kl237mdbLZt3NLVb97NJcmS6wHWXHjVHR5fp1v3sIDl6sr3IS+FZKMhLjfTqU4pMM/sYPc3ofNxKkfpSRUre4srU26ctODLufNyOcopIOXIKC13kssaUX7cYFkfXyWs6itSXKmdOgelynV/Tlt+mFFamGXlN0dPEbk0pOCICAEVYSUa6AAAARXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAAB4MgIA6AMAAHgyAgDoAwAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAHMCAAADoAQAAQAAAIQAAAAAAAAA) left center / contain no-repeat;
}
.app-vessel{
  margin-left:auto; margin-right:calc(6 * var(--u));
  display:flex; align-items:center; gap:calc(8 * var(--u));
  max-width:calc(170 * var(--u));
  padding:calc(8 * var(--u)) calc(12 * var(--u));
  border-radius:calc(14 * var(--u));
  background:var(--ph-card);
  box-shadow:0 1px 4px var(--ph-shadow-sm);
  font-size:calc(14 * var(--u)); white-space:nowrap;
}
.app-vessel-dot{ width:calc(10 * var(--u)); height:calc(10 * var(--u)); border-radius:50%; background:var(--ph-ok); flex-shrink:0; }
.app-vessel-status{ color:var(--ph-text-2); }
.app-bell{
  position:relative; width:calc(45 * var(--u)); height:calc(40 * var(--u)); margin:calc(5 * var(--u));
  display:grid; place-items:center; flex-shrink:0;
}
.app-bell svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); fill:var(--ph-text); }
.app-badge{
  position:absolute; top:0; right:0;
  min-width:calc(18 * var(--u)); height:calc(18 * var(--u)); padding:0 calc(5 * var(--u));
  border-radius:calc(9 * var(--u)); background:var(--ph-crit); color:#fff;
  font-size:calc(10 * var(--u)); font-weight:700; line-height:calc(18 * var(--u)); text-align:center;
}

/* ---------- dashboard ---------- */
.app-body{ position:relative; flex:1; min-height:0; }
.app-map{ position:absolute; inset:0; overflow:hidden; background:var(--ph-map-sea); }
.app-map svg{ width:100%; height:100%; }
.app-map-blip{ transform-origin:center; transform-box:fill-box; animation:ph-blip 2.4s ease-out infinite; }
@keyframes ph-blip{ 0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(2.6); opacity:0 } }

.app-map-ui{
  position:absolute; top:calc(10 * var(--u)); left:calc(12 * var(--u)); right:calc(12 * var(--u));
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:calc(8 * var(--u));
}
.app-float{
  background:var(--ph-card); border-radius:calc(16 * var(--u));
  box-shadow:2px 2px 4px var(--ph-shadow-sm);
}
.app-range{
  grid-column:1 / -1; display:flex; padding:calc(3 * var(--u)); border-radius:calc(11 * var(--u));
}
.app-range span{
  flex:1; text-align:center; padding:calc(7 * var(--u)) 0; border-radius:calc(8 * var(--u));
  font-size:calc(12 * var(--u)); color:var(--ph-text-2); white-space:nowrap;
}
.app-range span.is-sel{ background:var(--ph-primary); color:var(--ph-on-primary); font-weight:600; }
.app-coords{
  justify-self:start; align-self:start; margin-top:calc(8 * var(--u));
  padding:calc(6 * var(--u)) calc(10 * var(--u));
  display:flex; flex-direction:column; gap:calc(2 * var(--u));
}
.app-coords b{ font-weight:400; font-size:calc(12 * var(--u)); color:var(--ph-text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.app-coords small{ font-size:calc(11 * var(--u)); color:var(--ph-muted); white-space:nowrap; }
.app-mapbtns{ display:flex; flex-direction:column; gap:calc(8 * var(--u)); margin-top:calc(8 * var(--u)); }
.app-mapbtns .app-float{
  width:calc(42 * var(--u)); height:calc(42 * var(--u)); display:grid; place-items:center;
  font-size:calc(26 * var(--u)); font-weight:700; line-height:1; color:var(--ph-text);
}
.app-mapbtns svg{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); fill:var(--ph-text); }
.app-mapbtns .is-active svg{ fill:var(--ph-primary); }

.app-sheet{
  position:absolute; left:0; right:0; bottom:0; height:52%;
  background:var(--ph-card);
  border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
  overflow:hidden;
  transition:height .7s cubic-bezier(.2,.8,.2,1);
}
.phone[data-sheet="peek"] .app-sheet{ height:calc(48 * var(--u)); }
.app-handle{ height:calc(48 * var(--u)); display:grid; place-items:center; flex-shrink:0; }
.app-handle::before{
  content:""; width:calc(40 * var(--u)); height:calc(5 * var(--u)); border-radius:calc(3 * var(--u));
  background:var(--ph-muted); opacity:.45;
}
.app-sheet-body{
  padding:calc(4 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
  display:flex; flex-direction:column; gap:calc(16 * var(--u));
}
.app-presets{
  border:1px solid var(--ph-border); border-radius:calc(16 * var(--u));
  padding:calc(6 * var(--u)) calc(12 * var(--u));
  background:var(--ph-card);
}
.app-chips{ display:flex; gap:calc(8 * var(--u)); padding:calc(5 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u)); overflow:hidden; }
.app-chip{
  flex-shrink:0; height:calc(30 * var(--u)); padding:0 calc(18 * var(--u)); border-radius:calc(9 * var(--u));
  background:var(--ph-chip-bg); color:var(--ph-text);
  font-size:calc(12 * var(--u)); line-height:calc(30 * var(--u)); white-space:nowrap;
}
.app-chip.is-sel{ background:var(--ph-primary); color:var(--ph-on-primary); }
.app-presets .app-scrolltrack{
  height:calc(3 * var(--u)); margin:calc(4 * var(--u)) calc(5 * var(--u)) 0; border-radius:2px; background:var(--ph-sunken); position:relative;
}
.app-presets .app-scrolltrack::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:62%; border-radius:2px; background:var(--ph-muted); }

.app-cards{ display:flex; flex-wrap:wrap; justify-content:space-between; margin:calc(-4 * var(--u)); }
.app-mcard{
  flex:0 0 calc(50% - 8 * var(--u)); margin:calc(4 * var(--u));
  height:calc(162 * var(--u));
  padding:calc(11 * var(--u)) calc(12 * var(--u));
  border:1px solid var(--ph-border); border-radius:calc(14 * var(--u));
  background:var(--ph-card);
  display:flex; flex-direction:column;
}
.app-mcard-name{ font-size:calc(12 * var(--u)); font-weight:700; color:var(--ph-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-mcard-sub{ font-size:calc(11 * var(--u)); color:var(--ph-muted); margin-top:calc(5 * var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-mcard-value{ display:flex; align-items:flex-end; margin-top:calc(7 * var(--u)); }
.app-mcard-value b{ font-size:calc(24 * var(--u)); font-weight:700; line-height:1.15; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.app-mcard-value small{ font-size:calc(13 * var(--u)); color:var(--ph-muted); margin:0 0 calc(3 * var(--u)) calc(3 * var(--u)); }
.app-mcard-value .app-viz{ margin-left:auto; margin-bottom:calc(2 * var(--u)); width:calc(24 * var(--u)); height:calc(28 * var(--u)); }
.app-mcard-value .app-viz svg{ width:100%; height:100%; }
.app-bar{ height:calc(6 * var(--u)); margin:calc(8 * var(--u)) 0 calc(1 * var(--u)); border-radius:999px; background:var(--ph-divider); overflow:hidden; }
.app-bar i{ display:block; height:100%; border-radius:inherit; background:var(--ph-primary); }
.app-mcard-foot{ margin-top:auto; font-size:calc(11 * var(--u)); color:var(--ph-text-2); }
.app-mcard-foot > span{ display:flex; align-items:center; gap:calc(6 * var(--u)); white-space:nowrap; }
.app-mcard-foot i{ width:calc(8 * var(--u)); height:calc(8 * var(--u)); border-radius:50%; background:var(--ph-ok); flex-shrink:0; }
.app-mcard-foot small{ display:block; font-size:calc(11 * var(--u)); color:var(--ph-muted); margin-top:calc(1 * var(--u)); }
.app-reorder{
  height:calc(44 * var(--u)); border:1px solid var(--ph-border); border-radius:calc(10 * var(--u));
  display:flex; align-items:center; justify-content:center; gap:calc(6 * var(--u));
  font-size:calc(13 * var(--u)); color:var(--ph-text-2);
}
.app-reorder svg{ width:calc(16 * var(--u)); height:calc(16 * var(--u)); fill:var(--ph-text-2); }

/* ---------- live data ---------- */
.app-search{
  margin:calc(8 * var(--u)) calc(16 * var(--u)) 0;
  height:calc(40 * var(--u)); border-radius:calc(12 * var(--u)); background:var(--ph-sunken);
  display:flex; align-items:center; gap:calc(8 * var(--u)); padding:0 calc(12 * var(--u));
  color:var(--ph-text-2); font-size:calc(17 * var(--u));
}
.app-search svg{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); fill:var(--ph-text-2); }
.app-catchips{ display:flex; gap:calc(8 * var(--u)); padding:calc(8 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)); overflow:hidden; }
.app-pill{
  flex-shrink:0; padding:calc(7 * var(--u)) calc(14 * var(--u)); border-radius:999px;
  border:1px solid var(--ph-border); background:var(--ph-card); color:var(--ph-text);
  font-size:calc(13 * var(--u)); line-height:1.25; white-space:nowrap; display:flex; gap:calc(6 * var(--u));
}
.app-pill.is-sel{ background:var(--ph-primary); border-color:var(--ph-primary); color:var(--ph-on-primary); }
.app-pill b{ font-weight:700; color:var(--ph-text-2); }
.app-pill.is-sel b{ color:var(--ph-on-primary); }
.app-scroll{ flex:1; min-height:0; overflow:hidden; }
.app-live-list{ padding:calc(8 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); display:flex; flex-direction:column; gap:calc(32 * var(--u)); }
.app-section{ display:flex; flex-direction:column; gap:calc(4 * var(--u)); }
.app-section-head{ display:flex; justify-content:space-between; align-items:center; margin:0 calc(4 * var(--u)); }
.app-section-head b{ font-size:calc(16 * var(--u)); font-weight:700; }
.app-section-head span{ font-size:calc(12 * var(--u)); color:var(--ph-text-2); }
.app-lcards{ display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 calc(-4 * var(--u)); }
.app-lcard{
  position:relative; flex:0 0 calc(50% - 8 * var(--u)); margin:calc(4 * var(--u));
  height:calc(75 * var(--u)); border-radius:calc(16 * var(--u)); background:var(--ph-card);
  box-shadow:2px 2px 4px var(--ph-shadow-sm);
  padding:calc(12 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
  display:flex; flex-direction:column; gap:calc(2 * var(--u));
}
.app-lcard small{ font-size:calc(11 * var(--u)); color:var(--ph-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:calc(30 * var(--u)); }
.app-lcard b{ font-size:calc(20 * var(--u)); font-weight:700; line-height:1.2; margin:auto 0; font-variant-numeric:tabular-nums; }
.app-lcard svg{ position:absolute; right:calc(4 * var(--u)); bottom:calc(4 * var(--u)); width:calc(32 * var(--u)); height:calc(32 * var(--u)); fill:var(--ph-star); }
.app-lcard.is-fav svg{ fill:var(--ph-gold); }

/* ---------- switches ---------- */
.app-sw-list{ padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); display:flex; flex-direction:column; gap:calc(32 * var(--u)); }
.app-sw-section{ display:flex; flex-direction:column; gap:calc(12 * var(--u)); }
.app-sw-section > b{ font-size:calc(16 * var(--u)); font-weight:700; }
.app-sw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:calc(12 * var(--u)); }
.app-swcard{
  position:relative; height:calc(120 * var(--u)); padding:calc(12 * var(--u));
  border:2px solid var(--ph-sw-border); border-radius:calc(16 * var(--u)); background:var(--ph-sw-bg);
  display:grid; grid-template-rows:auto 1fr auto; grid-template-columns:1fr auto; column-gap:calc(8 * var(--u));
}
.app-swcard-name{ font-size:calc(15 * var(--u)); font-weight:700; color:var(--ph-sw-label); line-height:1.25; }
.app-swcard-dot{ width:calc(11 * var(--u)); height:calc(11 * var(--u)); border-radius:50%; background:var(--ph-sw-dot-off); transition:background .2s ease; }
.app-swcard[data-on="1"] .app-swcard-dot{ background:var(--ph-sw-dot-on); }
.app-swcard-mid{ grid-column:1 / -1; display:grid; place-items:center; }
.app-swcard-level{ grid-column:1 / -1; text-align:center; font-size:calc(12 * var(--u)); font-weight:700; color:var(--ph-text-2); min-height:calc(16 * var(--u)); }
.app-swcard-info{ position:absolute; left:calc(12 * var(--u)); bottom:calc(12 * var(--u)); width:calc(20 * var(--u)); height:calc(20 * var(--u)); fill:var(--ph-muted); }
.app-swcard-lock{ position:absolute; right:calc(12 * var(--u)); bottom:calc(12 * var(--u)); width:calc(22 * var(--u)); height:calc(22 * var(--u)); fill:var(--ph-muted); }

.nt-switch{
  position:relative; width:calc(50 * var(--u)); height:calc(28 * var(--u)); border-radius:999px;
  background:var(--ph-sw-track-off);
  transition:background .2s cubic-bezier(.33,1,.68,1);
}
.nt-switch::after{
  content:""; position:absolute; top:calc(3 * var(--u)); left:calc(3 * var(--u));
  width:calc(22 * var(--u)); height:calc(22 * var(--u)); border-radius:50%;
  background:var(--ph-thumb); box-shadow:0 1px 3px var(--ph-shadow-lg);
  transition:transform .2s cubic-bezier(.33,1,.68,1);
}
.app-swcard[data-on="1"] .nt-switch{ background:var(--ph-primary); }
.app-swcard[data-on="1"] .nt-switch::after{ transform:translateX(calc(22 * var(--u))); }

/* ---------- notifications ---------- */
.app-noti-head{ display:flex; align-items:center; justify-content:space-between; margin:calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); }
.app-noti-head b{ font-size:calc(20 * var(--u)); font-weight:700; }
.app-noti-head svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); margin:calc(8 * var(--u)); fill:var(--ph-text); }
.app-noti-scroll{ padding:calc(4 * var(--u)) calc(16 * var(--u)) calc(32 * var(--u)); display:flex; flex-direction:column; }
.app-ncard{ border-radius:calc(12 * var(--u)); background:var(--ph-card); overflow:hidden; }
.app-status-band{ display:grid; grid-template-columns:calc(4 * var(--u)) 1fr; margin-bottom:calc(12 * var(--u)); background:color-mix(in srgb, var(--ph-card), var(--ph-crit) 8%); }
.app-status-band > i{ background:var(--ph-crit); }
.app-status-row{ display:flex; align-items:center; }
.app-status-dot{ position:relative; width:calc(22 * var(--u)); height:calc(22 * var(--u)); margin-left:calc(12 * var(--u)); flex-shrink:0; }
.app-status-dot::before{ content:""; position:absolute; inset:calc(1 * var(--u)); border-radius:50%; border:2px solid var(--ph-err); animation:ph-pulse 1.8s ease-in-out infinite; }
.app-status-dot::after{ content:""; position:absolute; inset:calc(5 * var(--u)); border-radius:50%; background:var(--ph-err); }
@keyframes ph-pulse{ 0%,100%{ opacity:.15 } 50%{ opacity:.9 } }
.app-status-text{ padding:calc(15 * var(--u)) calc(12 * var(--u)); display:flex; flex-direction:column; gap:calc(2 * var(--u)); flex:1; min-width:0; }
.app-status-text b{ font-size:calc(15 * var(--u)); font-weight:700; color:var(--ph-err); }
.app-status-text span{ font-size:calc(12 * var(--u)); color:var(--ph-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-status-row > svg{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); margin:0 calc(14 * var(--u)) 0 calc(4 * var(--u)); fill:var(--ph-text-2); opacity:.55; flex-shrink:0; }
.app-filters{ display:flex; gap:calc(8 * var(--u)); margin-bottom:calc(10 * var(--u)); overflow:hidden; }
.app-seclabel{ font-size:calc(11 * var(--u)); font-weight:700; letter-spacing:.11em; text-transform:uppercase; margin:0 0 calc(7 * var(--u)) calc(4 * var(--u)); }
.app-timeline{ padding:calc(2 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); display:flex; flex-direction:column; gap:calc(6 * var(--u)); }
.app-day{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:calc(10 * var(--u)); margin:calc(2 * var(--u)) 0 calc(5 * var(--u)); }
.app-day::before, .app-day::after{ content:""; height:1px; background:var(--ph-border); }
.app-day span{
  padding:calc(2 * var(--u)) calc(11 * var(--u)); border-radius:999px;
  border:1px solid var(--ph-border); background:var(--ph-elevated);
  font-size:calc(12 * var(--u)); font-weight:700; white-space:nowrap;
}
.app-nrow{ display:grid; grid-template-columns:calc(42 * var(--u)) calc(26 * var(--u)) 1fr; }
.app-nrow-time{ margin:calc(8 * var(--u)) calc(6 * var(--u)) 0 0; text-align:right; font-size:calc(12 * var(--u)); font-weight:700; color:var(--ph-text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.app-nrow-rail{ position:relative; }
.app-nrow-rail::before, .app-nrow-rail::after{ content:""; position:absolute; left:50%; width:2px; margin-left:-1px; background:var(--ph-border); }
.app-nrow-rail::before{ top:0; height:calc(16 * var(--u)); }
.app-nrow-rail::after{ top:calc(16 * var(--u)); bottom:0; }
.app-nrow.is-first .app-nrow-rail::before{ display:none; }
.app-nrow.is-last .app-nrow-rail::after{ display:none; }
.app-node{
  position:absolute; left:50%; top:calc(5 * var(--u)); transform:translateX(-50%);
  width:calc(22 * var(--u)); height:calc(22 * var(--u)); border-radius:50%;
  border:2px solid var(--node, var(--ph-resolved)); background:var(--ph-card);
  display:grid; place-items:center;
}
.app-node svg{ width:calc(13 * var(--u)); height:calc(13 * var(--u)); fill:var(--node, var(--ph-resolved)); }
.app-node.is-filled{ background:var(--node); }
.app-nrow-body{ padding:calc(6 * var(--u)) 0 calc(7 * var(--u)) calc(8 * var(--u)); display:flex; flex-direction:column; gap:calc(4 * var(--u)); min-width:0; }
.app-nrow-title{ font-size:calc(14 * var(--u)); line-height:1.3; }
.app-nrow-sub{ display:flex; align-items:center; gap:calc(7 * var(--u)); flex-wrap:nowrap; }
.app-sev{
  display:inline-flex; align-items:center; gap:calc(3 * var(--u));
  padding:calc(2 * var(--u)) calc(7 * var(--u)); border-radius:calc(10 * var(--u));
  background:var(--sev); color:#fff; font-size:calc(10 * var(--u)); font-weight:700; letter-spacing:.02em; line-height:1.3; white-space:nowrap;
}
.app-sev svg{ width:calc(11 * var(--u)); height:calc(11 * var(--u)); fill:#fff; }
.app-state{
  padding:calc(1 * var(--u)) calc(6 * var(--u)); border-radius:calc(9 * var(--u));
  border:1px solid var(--st); color:var(--st); font-size:calc(10 * var(--u)); font-weight:700; letter-spacing:.02em; line-height:1.3; white-space:nowrap;
}
.app-nrow-sub > span:last-child:not(.app-sev):not(.app-state){ font-size:calc(12 * var(--u)); color:var(--ph-text-2); white-space:nowrap; }
.app-noti-count{ margin-top:calc(16 * var(--u)); text-align:center; font-size:calc(12 * var(--u)); color:var(--ph-text-2); }

/* the row that arrives during the scripted loop */
.app-nrow.is-new{
  display:grid; max-height:0; opacity:0; overflow:hidden; transform:translateY(calc(-8 * var(--u)));
  transition:max-height .5s cubic-bezier(.2,.8,.2,1), opacity .45s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.phone[data-notif="arrived"] .app-nrow.is-new{ max-height:calc(90 * var(--u)); opacity:1; transform:none; }
.phone[data-notif="arrived"] .app-nrow.is-new + .app-nrow.is-first .app-nrow-rail::before{ display:block; }
.phone[data-notif="arrived"] .app-badge{ background:var(--ph-crit); }

/* ---------- tab bar (AppShell TabBar) ---------- */
.app-tabbar{
  position:absolute; left:0; right:0; bottom:0; height:calc(84 * var(--u)); z-index:20;
  padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(34 * var(--u));
  background:var(--ph-page); border-top:1px solid var(--ph-border);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.app-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(3 * var(--u)); color:var(--ph-tab); font-size:calc(10 * var(--u)); font-weight:500; letter-spacing:.01em; transition:color .3s ease; }
.app-tab svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); fill:currentColor; }
.phone[data-screen="dashboard"] .app-tab--dashboard,
.phone[data-screen="livedata"] .app-tab--livedata,
.phone[data-screen="switches"] .app-tab--switches,
.phone[data-screen="settings"] .app-tab--settings{ color:var(--ph-tab-sel); }

/* ---------- push banner (system notification) ---------- */
.app-push{
  position:absolute; top:calc(58 * var(--u)); left:calc(8 * var(--u)); right:calc(8 * var(--u)); z-index:58;
  display:grid; grid-template-columns:auto 1fr; column-gap:calc(10 * var(--u));
  padding:calc(12 * var(--u)); border-radius:calc(22 * var(--u));
  background:var(--ph-banner); color:var(--ph-text);
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transform:translateY(calc(-100% - 70 * var(--u)));
  transition:transform .45s cubic-bezier(.4,0,1,1);
}
.phone[data-banner="in"] .app-push{ transform:none; transition:transform .55s cubic-bezier(.2,.9,.25,1.05); }
.app-push-icon{
  width:calc(38 * var(--u)); height:calc(38 * var(--u)); border-radius:calc(9 * var(--u));
  background:linear-gradient(160deg,#1a8cff,#0059c9); display:grid; place-items:center;
}
.app-push-icon i{ width:calc(24 * var(--u)); height:calc(10 * var(--u)); background:#fff;
  -webkit-mask:url(data:image/webp;base64,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) center / contain no-repeat; mask:url(data:image/webp;base64,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) center / contain no-repeat; }
.app-push-text{ min-width:0; display:flex; flex-direction:column; gap:calc(1 * var(--u)); }
.app-push-meta{ display:flex; justify-content:space-between; font-size:calc(12 * var(--u)); color:var(--ph-text-2); }
.app-push-meta b{ font-weight:600; color:var(--ph-text); }
.app-push-title{ font-size:calc(14 * var(--u)); font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-push-body{ font-size:calc(14 * var(--u)); line-height:1.3; color:var(--ph-text); opacity:.85; }

/* ---------- reduced motion: static end state, no loops ---------- */
@media (prefers-reduced-motion: reduce){
  .phone *, .phone *::before, .phone *::after{ transition:none !important; animation:none !important; }
  .phone .app-map-blip{ display:none; }
}

/* ---------- settings screen (SettingsPage) ---------- */
.app-settings{ padding:calc(8 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); display:flex; flex-direction:column; gap:calc(6 * var(--u)); }
.app-settings .app-seclabel{ margin-top:calc(14 * var(--u)); color:var(--ph-text-2); }
.app-scard{ border-radius:calc(12 * var(--u)); background:var(--ph-card); overflow:hidden; }
.app-srow{
  display:flex; align-items:center; gap:calc(10 * var(--u));
  padding:calc(11 * var(--u)) calc(13 * var(--u));
  border-top:1px solid var(--ph-border);
}
.app-scard .app-srow:first-child{ border-top:0; }
.app-srow-text{ display:flex; flex-direction:column; gap:calc(2 * var(--u)); min-width:0; }
.app-srow-text b{ font-size:calc(14 * var(--u)); font-weight:600; }
.app-srow-text span{ font-size:calc(11 * var(--u)); color:var(--ph-text-2); }
.app-srow-value{ margin-left:auto; font-size:calc(13 * var(--u)); color:var(--ph-text-2); font-weight:500; }
.app-srow-chev{ width:calc(18 * var(--u)); height:calc(18 * var(--u)); fill:var(--ph-text-2); margin-left:auto; flex-shrink:0; }
.app-srow-value + .app-srow-chev{ margin-left:calc(2 * var(--u)); }
.app-srow-switch{ margin-left:auto; flex-shrink:0; }
.app-srow-switch[data-on="1"]{ background:var(--ph-primary); }
.app-srow-switch[data-on="1"]::after{ transform:translateX(calc(22 * var(--u))); }
.app-srow--user{ gap:calc(12 * var(--u)); }
.app-avatar{
  width:calc(38 * var(--u)); height:calc(38 * var(--u)); border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ph-primary) 18%, transparent); color:var(--ph-primary);
  font-size:calc(14 * var(--u)); font-weight:700; letter-spacing:.02em;
}
.app-themes{ display:flex; gap:calc(6 * var(--u)); padding:calc(11 * var(--u)) calc(13 * var(--u)); }
.app-theme-opt{
  flex:1; font-family:inherit; font-size:calc(12 * var(--u)); font-weight:600; cursor:pointer;
  padding:calc(8 * var(--u)) 0; border-radius:calc(9 * var(--u));
  border:1px solid var(--ph-border); background:var(--ph-elevated); color:var(--ph-text-2);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.app-theme-opt.is-sel{ background:var(--ph-primary); border-color:var(--ph-primary); color:#fff; }
.app-version{ margin-top:calc(14 * var(--u)); text-align:center; font-size:calc(11 * var(--u)); color:var(--ph-text-2); }

/* ---------- map detail, as the app's basemap draws it ---------- */
.app-map-town rect{ fill:var(--ph-map-urban); stroke:var(--ph-map-road-edge); stroke-width:1; }
.app-map-road{ fill:none; stroke:var(--ph-map-road); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.app-map-road--case{ stroke:var(--ph-map-road-edge); stroke-width:6; }
.app-map-road--minor{ stroke-width:2.6; }
.app-map-road--minor.app-map-road--case{ stroke-width:4.2; }
.app-map-pontoon path{ fill:none; stroke:var(--ph-map-coast); stroke-width:3; stroke-linecap:round; }
.app-map-place{
  font-family:var(--ph-font); font-size:13px; font-weight:600; fill:var(--ph-map-label);
  paint-order:stroke; stroke:var(--ph-map-sea); stroke-width:3; stroke-linejoin:round;
}
.app-map-place--sea{ font-style:italic; font-weight:500; stroke:var(--ph-map-sea); }