:root{--bg:#061525;--dark:#020b13;--panel:#102a3d;--panel2:#173a54;--text:#f5fbff;--muted:#a9bdca;--accent:#45c8ff;--danger:#ff6b6b}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,var(--dark),var(--bg));color:var(--text);min-height:100vh}
header{position:sticky;top:0;z-index:9;padding:18px 16px;background:rgba(2,11,19,.96);border-bottom:1px solid rgba(255,255,255,.08)}
h1,h2,h3{margin:0 0 10px}main{max-width:980px;margin:auto;padding:14px}.sub,.small,label{color:var(--muted)}.small{font-size:14px}
.card{background:rgba(16,42,61,.96);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:15px;margin-bottom:12px}.hero{background:linear-gradient(135deg,rgba(69,200,255,.18),rgba(75,211,143,.08)),var(--panel)}
.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:12px}button{border:0;border-radius:14px;padding:12px 14px;font-size:16px;font-weight:800;background:var(--accent);color:#03101b}.tab{background:var(--panel2);color:white;white-space:nowrap}.tab.active{background:var(--accent);color:#03101b}.secondary{background:#254a63;color:white}.danger{background:var(--danger);color:white}
.actions{display:flex;gap:10px;flex-wrap:wrap}input,textarea,select{width:100%;padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#071827;color:white;font-size:16px;margin:5px 0 10px}input[type=file]{padding:10px}textarea{min-height:90px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:rgba(255,255,255,.06);border-radius:14px;padding:12px}.label{font-size:12px;color:var(--muted)}.value{font-size:22px;font-weight:900}
.hidden{display:none!important}.item{padding:14px 0;border-top:1px solid rgba(255,255,255,.1)}.item:first-child{border-top:0}.pill{display:inline-block;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08)}.status{padding:10px;border-radius:12px;background:rgba(255,255,255,.06);margin-top:10px}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.photo-wrap{position:relative}.photo-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#071827}.photo-delete{position:absolute;right:5px;top:5px;padding:6px 8px;border-radius:999px;background:rgba(0,0,0,.72);color:white;font-size:12px}.invite-code{font-size:34px;font-weight:900;margin-top:12px}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}.row{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.checkline{display:flex;align-items:center;gap:10px;margin:8px 0 14px;color:var(--text)}
.checkline input{width:auto;margin:0;transform:scale(1.25)}
.favorite-badge{display:inline-block;margin-left:6px}
.photo-grid img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:18px}
.lightbox img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:12px}
.lightbox-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;background:rgba(255,255,255,.16);color:white;font-size:30px;line-height:1;padding:8px 13px;border-radius:999px}

.map-card{padding:8px}
#mapCanvas{height:58vh;min-height:420px;border-radius:14px;overflow:hidden;background:#071827}
.leaflet-container{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.map-popup h3{margin:0 0 6px;color:#0b1d2a}
.map-popup p{margin:2px 0;color:#334}
.trip-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.trip-summary span{background:rgba(255,255,255,.06);padding:8px;border-radius:10px;font-size:13px}
@media(max-width:700px){#mapCanvas{height:52vh;min-height:350px}.trip-summary{grid-template-columns:1fr}}

.trip-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.trip-photo-wrap{position:relative}
.trip-photo-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;cursor:zoom-in;background:#071827}
.trip-photo-delete{position:absolute;right:5px;top:5px;padding:6px 8px;border-radius:999px;background:rgba(0,0,0,.72);color:white;font-size:12px}
@media(max-width:700px){.trip-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.finance-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}.finance-row:first-child{border-top:0}.finance-bar{height:9px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:5px}.finance-bar span{display:block;height:100%;background:var(--accent)}

.dashboard-photo-card{position:relative;padding:0;overflow:hidden;min-height:260px;cursor:pointer}
.dashboard-boat-photo{display:block;width:100%;height:300px;object-fit:cover}
.dashboard-photo-placeholder{height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#173a54,#071827);color:var(--muted)}
.dashboard-photo-placeholder .boat-icon{font-size:54px}.dashboard-photo-placeholder b{color:white;font-size:20px}
.dashboard-photo-overlay{position:absolute;left:0;right:0;bottom:0;padding:35px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.dashboard-photo-overlay h2{margin:0 0 4px;font-size:28px}.dashboard-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.dashboard-tile{min-height:118px;background:var(--panel);color:white;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left}
.dashboard-tile:active{transform:scale(.98);background:var(--panel2)}.dashboard-tile .tile-icon{font-size:28px}.dashboard-tile b{font-size:17px}.dashboard-tile small{color:var(--muted)}
.compact-status{padding:12px}
.small-danger{background:rgba(255,107,107,.18);color:#ff9b9b;padding:7px 10px;font-size:13px;border:1px solid rgba(255,107,107,.35)}
.item{position:relative;padding-right:42px}.item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.edit-button{background:#254a63;color:white}
.delete-mini{position:absolute;top:10px;right:0;background:rgba(255,107,107,.16);color:#ff9b9b;border:1px solid rgba(255,107,107,.35);padding:6px 8px;font-size:12px;border-radius:10px}
@media(max-width:700px){.dashboard-actions{grid-template-columns:repeat(2,1fr)}.dashboard-boat-photo{height:250px}.dashboard-photo-card{min-height:230px}}

.coordinate-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;margin:8px 0 14px}
.coordinate-title{font-weight:800;margin-bottom:6px}
.coordinate-card input{display:block!important;visibility:visible!important;opacity:1!important;min-height:46px}
.map-picker{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.82);padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center}
.map-picker-panel{width:min(920px,100%);max-height:96vh;overflow:auto;background:#0c2334;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px}
.map-picker-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.map-picker-header h2{margin-bottom:3px}.map-picker-close{background:rgba(255,255,255,.12);color:white;font-size:28px;line-height:1;padding:7px 12px;border-radius:999px}
#poiPickerMap{height:58vh;min-height:380px;border-radius:14px;overflow:hidden;background:#071827;margin:10px 0}
.map-picker-coordinates{padding:10px 0;color:var(--muted)}
@media(max-width:700px){#poiPickerMap{height:52vh;min-height:330px}.map-picker-panel{padding:10px}}

.collapsible-card{padding:0;overflow:hidden}
.section-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;color:white;padding:16px;border-radius:0;text-align:left}
.section-toggle .chevron{font-size:24px;transition:transform .2s ease}
.section-toggle.open .chevron{transform:rotate(180deg)}
.collapsible-content{padding:0 15px 15px}

.trip-row{border:1px solid rgba(255,255,255,.09);border-radius:14px;margin:10px 0;overflow:hidden;background:rgba(255,255,255,.035)}
.trip-row summary{list-style:none;cursor:pointer;padding:13px 42px 13px 13px;position:relative}
.trip-row summary::-webkit-details-marker{display:none}
.trip-row summary:after{content:'⌄';position:absolute;right:14px;top:12px;font-size:22px;color:var(--muted);transition:transform .2s}
.trip-row[open] summary:after{transform:rotate(180deg)}
.trip-row-title{font-weight:850;font-size:17px}
.trip-row-date{color:var(--muted);font-size:13px;margin-top:3px}
.trip-row-body{padding:0 13px 13px;border-top:1px solid rgba(255,255,255,.08)}
.trip-route-map{height:260px;border-radius:12px;overflow:hidden;margin:10px 0;background:#071827}
.trip-filter-input{min-height:46px}

/* Cloud 4.0.1 Captain Edition hotfix */
:root{--nav-height:78px}
body{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}
.captain-strip{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 15px;margin-bottom:12px;border-radius:18px;
  background:linear-gradient(135deg,rgba(69,200,255,.18),rgba(75,211,143,.10));
  border:1px solid rgba(255,255,255,.1)
}
.captain-strip strong{display:block;font-size:18px;margin-top:2px}
.captain-strip .eyebrow{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:900}
.captain-strip button{padding:10px 12px;font-size:14px}
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  display:grid;grid-template-columns:repeat(6,1fr);
  height:calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding:7px 6px env(safe-area-inset-bottom);
  background:rgba(2,11,19,.95);
  border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
}
.bottom-nav-item{
  background:transparent;color:var(--muted);border-radius:14px;
  min-width:0;padding:5px 2px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-weight:750
}
.bottom-nav-item span{font-size:22px;line-height:1}
.bottom-nav-item small{font-size:10px;white-space:nowrap}
.bottom-nav-item.active{color:white;background:rgba(69,200,255,.13)}
.bottom-nav-item:active{transform:scale(.95)}
@media(max-width:760px){
  .tabs{display:none}
  .captain-strip{align-items:flex-start;flex-direction:column}
  .captain-strip button{width:100%}
}

/* Cloud 4.0.2 — GPX Route Edition */
.trip-route-map,
.latest-route-map{
  position:relative;
  min-height:280px;
  height:280px;
  border-radius:14px;
  overflow:hidden;
  background:#d9e4e9;
  isolation:isolate;
}
.latest-route-card{overflow:hidden}
.latest-route-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.latest-route-head h2{margin:3px 0}
.route-map-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#536a78;
  background:linear-gradient(135deg,#dce7ec,#c7d7df);
}
.route-map-error{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:#fff;
  background:#4a2430;
}
.route-marker{
  width:24px;
  height:24px;
  border-radius:999px;
  border:3px solid white;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.route-marker.start{background:#22b573}
.route-marker.end{background:#e14b4b}
.route-marker-label{
  background:white;
  color:#102a3d;
  border:0;
  border-radius:8px;
  padding:3px 6px;
  box-shadow:0 2px 7px rgba(0,0,0,.2);
}
.leaflet-container{
  background:#d9e4e9!important;
}
.leaflet-tile-pane{
  opacity:1!important;
}
@media(max-width:700px){
  .trip-route-map,.latest-route-map{height:240px;min-height:240px}
  .latest-route-head{flex-direction:column}
  .latest-route-head button{width:100%}
}

/* Cloud 4.0.4 — log verwijderen */
.trip-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.danger-button{
  border:1px solid #b93d49;
  background:#fff1f2;
  color:#9e2634;
  font-weight:700;
}
.danger-button:active{
  transform:scale(.98);
}
.trip-row.is-deleting{
  opacity:.55;
  filter:grayscale(.25);
}
@media(max-width:700px){
  .trip-actions button{
    width:100%;
  }
}

/* Cloud 4.0.5 — Waterkaarten KMZ */
#tripGpx{
  padding:12px;
  background:#f5f8fa;
  border:1px dashed #8ba0ad;
  border-radius:12px;
}

/* Cloud 4.0.6 — Waterkaarten openen */
.waterkaarten-tile{
  border-color:#177c96;
  background:linear-gradient(145deg,#eefbff,#dff4f8);
}
.waterkaarten-button{
  background:#117d96;
  border-color:#117d96;
  color:#fff;
}
.waterkaarten-inline-button{
  width:100%;
  margin-top:0;
  margin-bottom:14px;
}

/* Cloud 4.0.7 — Waterkaarten op iPhone en iPad */
.trip-actions .waterkaarten-button{
  font-weight:700;
}

/* Cloud 4.0.8 — Waterkaarten openen via Apple Opdrachten */
.waterkaarten-button,
.waterkaarten-tile{
  -webkit-tap-highlight-color:transparent;
}

/* Cloud 4.0.9 — inklapbaar logboek zoeken */
#tripSearchWrap{
  padding-top:12px;
}

/* Cloud 5.0 — Native App Edition */
body{
  padding-top:env(safe-area-inset-top);
}
header{
  padding-top:max(18px,env(safe-area-inset-top));
}
.header-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.connection-status{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.connection-status.online{
  color:#baf7d1;
  background:rgba(37,183,100,.18);
  border:1px solid rgba(68,219,135,.35);
}
.connection-status.offline{
  color:#ffd3d3;
  background:rgba(217,72,72,.18);
  border:1px solid rgba(255,107,107,.35);
}
.install-app-tile{
  border-color:rgba(69,200,255,.48);
  background:linear-gradient(145deg,rgba(69,200,255,.19),rgba(75,211,143,.12));
}
.install-app-tile.installed{
  border-color:rgba(75,211,143,.5);
}
.app-update-banner{
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:1000;
  max-width:720px;
  margin:auto;
  padding:13px;
  border-radius:16px;
  background:#f2fbff;
  color:#082034;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.app-update-banner span{
  display:block;
  margin-top:3px;
  font-size:13px;
  color:#486170;
}
.app-update-banner button{
  width:auto;
  flex:0 0 auto;
}
.install-help{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.62);
}
.install-help-card{
  position:relative;
  width:min(520px,100%);
  padding:26px 20px 22px;
  border-radius:24px;
  background:#f4fbff;
  color:#0a2235;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.install-help-card p{
  line-height:1.55;
}
.install-help-icon{
  font-size:48px;
  margin-bottom:8px;
}
.install-help-close{
  position:absolute;
  right:12px;
  top:10px;
  width:38px;
  min-height:38px;
  padding:0;
  border-radius:999px;
  background:#dcebf2;
  color:#163348;
}
@media(max-width:520px){
  .header-title-row{
    align-items:center;
  }
  .connection-status{
    padding:5px 8px;
  }
  .app-update-banner{
    align-items:stretch;
    flex-direction:column;
  }
  .app-update-banner button{
    width:100%;
  }
}
@media(display-mode:standalone){
  header{
    padding-top:max(16px,env(safe-area-inset-top));
  }
}

/* Cloud 5.0.1 — logstatus op datum */
.trip-row.trip-past{
  border:2px solid #2fb66f;
  box-shadow:0 0 0 1px rgba(47,182,111,.18),0 8px 24px rgba(47,182,111,.10);
}
.trip-row.trip-future{
  border:2px solid #e55361;
  box-shadow:0 0 0 1px rgba(229,83,97,.18),0 8px 24px rgba(229,83,97,.10);
}
.trip-row.trip-today{
  border:2px solid #45c8ff;
  box-shadow:0 0 0 1px rgba(69,200,255,.18),0 8px 24px rgba(69,200,255,.10);
}
.trip-row.trip-past summary::after{
  content:"Gevaren";
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(47,182,111,.16);
  color:#76e3a8;
  font-size:12px;
  font-weight:800;
}
.trip-row.trip-future summary::after{
  content:"Nog te varen";
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(229,83,97,.16);
  color:#ff9ca6;
  font-size:12px;
  font-weight:800;
}
.trip-row.trip-today summary::after{
  content:"Vandaag";
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(69,200,255,.16);
  color:#8ee1ff;
  font-size:12px;
  font-weight:800;
}
.trip-row summary{
  gap:10px;
}

/* Cloud 5.1 — Live Vaarmodus */
.bottom-nav{
  grid-template-columns:repeat(7,1fr);
}
.bottom-nav-item small{
  font-size:9px;
}
.live-mode-tile{
  border-color:rgba(75,211,143,.5);
  background:linear-gradient(145deg,rgba(75,211,143,.2),rgba(69,200,255,.12));
}
.live-nav-button.active{
  background:rgba(75,211,143,.18);
}
.live-hero{
  border:1px solid rgba(75,211,143,.32);
  background:linear-gradient(145deg,rgba(11,48,63,.98),rgba(8,31,46,.98));
}
.live-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
.live-heading h2{
  margin:4px 0;
}
.live-recording-badge{
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.2);
}
.live-recording-badge.idle{
  background:rgba(255,255,255,.08);
  color:#d7e6ee;
}
.live-recording-badge.active{
  background:rgba(229,83,97,.18);
  border-color:rgba(255,100,113,.42);
  color:#ffadb5;
  animation:livePulse 1.4s infinite;
}
.live-recording-badge.paused{
  background:rgba(245,180,58,.18);
  color:#ffd88b;
}
.live-recording-badge.stopped{
  background:rgba(75,211,143,.18);
  color:#9cf0bf;
}
@keyframes livePulse{
  50%{box-shadow:0 0 0 7px rgba(229,83,97,0)}
  0%,100%{box-shadow:0 0 0 0 rgba(229,83,97,.28)}
}
.live-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 10px;
}
.live-controls button{
  width:auto;
}
.live-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.live-metric{
  text-align:center;
  padding:14px 8px;
  margin:0;
}
.live-metric span{
  display:block;
  font-size:12px;
  color:var(--muted);
}
.live-metric strong{
  display:block;
  margin:5px 0 2px;
  font-size:25px;
  line-height:1;
  color:white;
  font-variant-numeric:tabular-nums;
}
.live-metric small{
  color:var(--muted);
  font-size:11px;
}
.live-map-card{
  position:relative;
  padding:8px;
}
#liveMapCanvas{
  height:46vh;
  min-height:360px;
  border-radius:14px;
  overflow:hidden;
  background:#d9e4e9;
}
.live-follow-button{
  position:absolute;
  right:20px;
  bottom:20px;
  z-index:500;
  width:auto;
  padding:9px 11px;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
}
.live-warning{
  margin-top:14px;
  padding:10px;
  border-radius:10px;
  background:rgba(245,180,58,.10);
  border:1px solid rgba(245,180,58,.22);
}
@media(max-width:700px){
  .live-heading{
    flex-direction:column;
  }
  .live-metrics{
    grid-template-columns:repeat(2,1fr);
  }
  .live-controls button{
    flex:1 1 44%;
  }
  #liveMapCanvas{
    height:42vh;
    min-height:310px;
  }
}

/* Cloud 5.1.1 — zichtbare favorieten op de kaart */
.poi-marker-shell{
  background:transparent;
  border:0;
}
.poi-map-marker{
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.poi-map-marker.favorite{
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid #fff;
  background:#f5b52f;
  color:#102a3d;
  font-size:25px;
  line-height:1;
}
.poi-map-marker.normal{
  position:relative;
  width:30px;
  height:30px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  border:3px solid #fff;
  background:#1685a8;
}
.poi-map-marker.normal span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
}
.poi-map-status{
  margin-top:9px;
  min-height:20px;
}
.poi-map-status.warning{
  color:#ffd88b;
}
#favoritesMapButton.favorites-active{
  background:#f5b52f;
  border-color:#f5b52f;
  color:#102a3d;
  font-weight:800;
}

/* Cloud 5.1.2 — route naar Waterkaarten en POI-details */
.map-popup{
  min-width:230px;
}
.map-popup-actions{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.map-popup-actions button{
  width:100%;
  min-height:42px;
  padding:9px 10px;
  font-size:13px;
}
.poi-detail-modal{
  position:fixed;
  inset:0;
  z-index:1400;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.68);
}
.poi-detail-card{
  position:relative;
  width:min(620px,100%);
  max-height:88vh;
  overflow:auto;
  padding:24px 20px 22px;
  border-radius:24px;
  background:#f3fbff;
  color:#0b2436;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
}
.poi-detail-close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  min-height:40px;
  padding:0;
  border-radius:999px;
  background:#dceaf1;
  color:#153448;
}
.poi-detail-heading{
  display:flex;
  align-items:center;
  gap:13px;
  padding-right:42px;
}
.poi-detail-heading h2{
  margin:0 0 4px;
  color:#0b2436;
}
.poi-detail-heading p{
  margin:0;
  color:#526b79;
}
.poi-detail-icon{
  font-size:38px;
}
.poi-detail-line{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #d2e1e8;
}
.poi-detail-review{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:#e6f2f7;
  line-height:1.55;
}
.poi-detail-photos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:16px;
}
.poi-detail-photos img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px;
}
.poi-detail-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.app-toast{
  position:fixed;
  left:50%;
  bottom:calc(100px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:1600;
  width:min(88vw,520px);
  padding:12px 16px;
  border-radius:14px;
  background:#f4fbff;
  color:#0c2638;
  font-weight:700;
  text-align:center;
  box-shadow:0 14px 38px rgba(0,0,0,.38);
}
@media(max-width:600px){
  .poi-detail-actions{
    grid-template-columns:1fr;
  }
  .poi-detail-photos{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Cloud 5.1.3 — juiste POI-locaties en vaste favorietenfilter */
#allPoiMapButton.poi-filter-active,
#favoritesMapButton.poi-filter-active{
  background:#f5b52f;
  border-color:#f5b52f;
  color:#102a3d;
  font-weight:900;
}
.location-correction-button{
  border-color:#5a7d91;
}
.map-picker-panel{
  max-height:94vh;
  overflow:auto;
}
#poiPickerMap{
  min-height:420px;
}
@media(max-width:600px){
  #poiPickerMap{
    min-height:52vh;
  }
}

/* Cloud 5.1.4 — inklapbaar POI zoeken en bonnetjes bij kosten */
#poiSearchWrap{
  padding-top:12px;
}
.receipt-scan-card{
  margin:16px 0;
  padding:14px;
  border:1px dashed rgba(126,190,218,.48);
  border-radius:14px;
  background:rgba(21,68,89,.34);
}
.receipt-scan-title{
  margin-bottom:5px;
  font-weight:900;
  font-size:17px;
}
.receipt-scan-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.receipt-picker-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 14px;
  border-radius:12px;
  background:#46c7f2;
  color:#071a27;
  font-weight:900;
  cursor:pointer;
}
.receipt-picker-button.secondary-receipt{
  background:#244d65;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.receipt-picker-button input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.receipt-preview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.receipt-preview-item{
  position:relative;
  min-width:0;
  padding:7px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}
.receipt-preview-item img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:9px;
}
.receipt-preview-item button,
.cost-receipt-item button{
  position:absolute;
  top:3px;
  right:3px;
  z-index:2;
  width:30px;
  min-height:30px;
  padding:0;
  border-radius:999px;
  background:#b52f41;
  color:#fff;
}
.receipt-preview-item span{
  display:block;
  overflow:hidden;
  margin-top:5px;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.receipt-pdf-preview{
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.receipt-pdf-icon{
  align-self:center;
  padding:12px;
  border-radius:9px;
  background:#e45e62;
  color:#fff;
  font-weight:900;
}
.cost-receipts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:13px 0;
}
.cost-receipt-item{
  position:relative;
  min-width:0;
  padding:6px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
}
.cost-receipt-item img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:9px;
  cursor:pointer;
}
.cost-receipt-item small{
  display:block;
  margin-top:5px;
  text-align:center;
}
.cost-receipt-pdf{
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.cost-receipt-pdf a{
  color:#8ee1ff;
  font-weight:800;
}
@media(max-width:600px){
  .receipt-scan-actions,
  .receipt-picker-button{
    width:100%;
  }
  .receipt-preview,
  .cost-receipts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Cloud 5.1.11 — stabiele herstelversie */
.dashboard-status-button{
  width:100%;
  min-height:88px;
  margin:0;
  padding:13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:inherit;
  text-align:left;
}
.dashboard-status-button:active{
  transform:scale(.985);
}
.dashboard-status-button.is-refreshing .value{
  display:inline-block;
  animation:refreshSpin .75s linear infinite;
}
@keyframes refreshSpin{
  to{transform:rotate(360deg)}
}
.settings-share-button{
  margin-top:10px;
}
.poi-suggestion-tools{
  margin:10px 0 4px;
}
.poi-online-suggestions{
  margin:10px 0 14px;
  padding:10px;
  border:1px solid rgba(126,190,218,.35);
  border-radius:14px;
  background:rgba(17,55,73,.62);
}
.poi-suggestion-list{
  display:grid;
  gap:8px;
}
.poi-suggestion-list button{
  width:100%;
  padding:11px;
  text-align:left;
  background:#f1f8fb;
  color:#0a2436;
}
.poi-suggestion-list button b,
.poi-suggestion-list button span{
  display:block;
}
.poi-suggestion-list button span{
  margin-top:4px;
  color:#4e6877;
  font-size:12px;
}
.poi-suggestion-attribution{
  margin-top:9px;
  color:#9bb3bf;
  font-size:10px;
  text-align:right;
}

/* Cloud 5.1.12 — bonfoto automatisch uitlezen */
.receipt-ocr-actions{margin-top:12px}
.receipt-ocr-actions button{width:100%}
.receipt-ocr-status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:11px;
  background:rgba(64,190,135,.16);
  border:1px solid rgba(64,190,135,.32);
  color:#dfffee;
  line-height:1.45;
}
.receipt-ocr-status.receipt-ocr-error{
  background:rgba(224,91,91,.14);
  border-color:rgba(224,91,91,.35);
  color:#ffe4e4;
}
.receipt-ocr-note{margin:10px 0 0}

/* Cloud 5.1.13 — financieel filter per dag, week, maand en jaar */
.finance-filter-summary{
  margin:-4px 0 16px;
  color:#b9ced8;
  font-size:13px;
  line-height:1.4;
}
.finance-period-input{
  margin:12px 0;
}
#financeFilterWrap{
  padding-top:12px;
}
#financeFilterWrap > .secondary{
  margin-top:8px;
}

/* Cloud 5.1.14 — betrouwbare verversknop en POI-reset */
.dashboard-status-button{
  cursor:pointer;
  touch-action:manipulation;
  position:relative;
  z-index:2;
}
.dashboard-status-button:disabled{
  opacity:.72;
  cursor:wait;
}
.dashboard-status-button.is-refreshing .value{
  display:inline-block;
  animation:refreshSpin .75s linear infinite;
}

/* Cloud 5.1.15 — kosten bewerken en compacte verwijderknop */
.cost-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cost-form-actions button{
  flex:1 1 180px;
}
.cost-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.cost-edit-button{
  width:auto;
  min-height:38px;
  padding:8px 12px;
  font-size:13px;
}
.cost-delete-button{
  width:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  border-radius:10px;
  background:#9d3040;
  color:#fff;
  font-size:16px;
}

/* Cloud 5.1.16 — live plaats- en adressuggesties */
.poi-live-suggestions{
  position:relative;
  z-index:50;
  display:grid;
  gap:1px;
  margin-top:5px;
  overflow:hidden;
  border:1px solid rgba(126,190,218,.38);
  border-radius:12px;
  background:#f4fbff;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.poi-live-suggestions button{
  width:100%;
  min-height:0;
  padding:11px 12px;
  border:0;
  border-radius:0;
  background:#f4fbff;
  color:#0a2436;
  text-align:left;
}
.poi-live-suggestions button+button{
  border-top:1px solid #d6e5ec;
}
.poi-live-suggestions button:active{
  background:#dff2fa;
}
.poi-live-suggestions b,
.poi-live-suggestions span{
  display:block;
}
.poi-live-suggestions span{
  margin-top:3px;
  color:#607986;
  font-size:11px;
  text-transform:capitalize;
}
.poi-live-loading{
  padding:11px 12px;
  color:#526d7b;
  font-size:12px;
}

/* Cloud 5.1.17 — vaarroute importeren en gegevens automatisch invullen */
.route-import-button{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  margin-top:6px;
  padding:12px 16px;
  overflow:hidden;
  border-radius:13px;
  background:#46c7f2;
  color:#071a27;
  font-weight:900;
  text-align:center;
  cursor:pointer;
}
.route-import-button input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.route-import-status{
  display:grid;
  gap:5px;
  margin:12px 0;
  padding:12px 14px;
  border:1px solid rgba(65,198,142,.38);
  border-radius:13px;
  background:rgba(65,198,142,.14);
}
.route-import-status b{
  color:#e5fff2;
}
.route-import-status span{
  color:#d0e8f1;
  line-height:1.45;
}
.route-import-status small{
  color:#9fb9c5;
}

/* Cloud 5.1.18 — ontbrekende routegegevens automatisch aanvullen */
.route-import-status small{
  line-height:1.45;
}

/* Cloud 5.1.19 — iCloud Drive map Vaarroutes controleren */
.icloud-route-button{
  width:100%;
  margin-top:10px;
}
.icloud-route-status{
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:11px;
  background:rgba(255,255,255,.06);
  color:#b8ced8;
  line-height:1.4;
}
.icloud-route-status.success{
  background:rgba(65,198,142,.15);
  color:#dcffed;
}
.icloud-route-status.warning{
  background:rgba(245,181,47,.14);
  color:#fff0c5;
}
.icloud-route-status.error{
  background:rgba(220,75,91,.15);
  color:#ffe1e5;
}

/* Cloud 5.1.21 — Waterkaarten-afbeelding als dashboardknop */
.waterkaarten-image-tile{
  min-height:0;
  aspect-ratio:1;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:20px;
  background:transparent;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.waterkaarten-image-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.waterkaarten-image-tile:active{
  transform:scale(.97);
  background:transparent;
}

/* Cloud 5.1.22 — Live varen start ook Waterkaarten */
#liveStartButton{
  line-height:1.25;
}
@media(max-width:480px){
  #liveStartButton{
    font-size:15px;
    padding-inline:12px;
  }
}

/* Cloud 5.1.23 — standaard ingeklapt en compacte verwijderknoppen */
#costFormWrap,
#settingsFormWrap{
  padding-top:12px;
}
.record-delete-mini{
  width:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  border:1px solid rgba(255,107,107,.38);
  border-radius:10px;
  background:rgba(255,107,107,.16);
  color:#ffaaaa;
  font-size:16px;
}
.record-delete-mini:active{
  transform:scale(.96);
}

/* Cloud 5.1.24 — betrouwbaar POI opslaan en lokale POI-suggesties */
.poi-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.poi-form-actions button{
  flex:1 1 140px;
}
.poi-live-suggestions .local-poi-suggestion{
  background:#e8f7ff;
  border-left:4px solid #3f72d8;
}
.poi-live-suggestions .local-poi-suggestion span{
  color:#365e78;
  font-weight:700;
}

/* Cloud 5.1.25 — uniforme dashboardknoppen en klikbare financiële inhoud */
.dashboard-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.dashboard-tile{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 18px;
  align-items:center;
  min-height:94px;
  padding:14px;
  gap:11px;
  overflow:hidden;
  border:1px solid rgba(138,216,245,.16);
  border-radius:18px;
  background:
    radial-gradient(circle at 15% 10%,rgba(71,199,242,.13),transparent 46%),
    linear-gradient(145deg,rgba(24,64,84,.98),rgba(10,35,50,.98));
  color:#fff;
  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  text-align:left;
}
.dashboard-tile::after{
  content:"";
  position:absolute;
  inset:auto -30px -45px auto;
  width:100px;
  height:100px;
  border-radius:50%;
  background:rgba(70,199,242,.06);
}
.dashboard-tile:active{
  transform:translateY(1px) scale(.985);
  background:
    radial-gradient(circle at 15% 10%,rgba(71,199,242,.18),transparent 46%),
    linear-gradient(145deg,rgba(29,76,99,.98),rgba(12,42,59,.98));
}
.dashboard-tile .tile-icon-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid rgba(145,224,251,.18);
  border-radius:15px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.dashboard-tile .tile-icon{
  font-size:25px;
}
.dashboard-tile .tile-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.dashboard-tile .tile-copy b{
  font-size:16px;
  line-height:1.15;
}
.dashboard-tile .tile-copy small{
  overflow:hidden;
  color:#a9c3cf;
  font-size:11px;
  line-height:1.25;
  text-overflow:ellipsis;
}
.dashboard-tile .tile-arrow{
  color:#78d7f7;
  font-size:25px;
  font-weight:300;
}
.waterkaarten-icon-shell{
  overflow:hidden;
  padding:0!important;
  background:#092d47!important;
}
.waterkaarten-icon-shell img{
  width:100%;
  height:100%;
  padding:5px;
  object-fit:contain;
  background:#fff;
  pointer-events:none;
}
.tile-live .tile-icon-shell{background:rgba(65,196,145,.12)}
.tile-map .tile-icon-shell{background:rgba(68,151,223,.13)}
.tile-waterkaarten .tile-icon-shell{border-color:rgba(98,191,255,.35)}
.tile-logbook .tile-icon-shell{background:rgba(167,116,237,.12)}
.tile-poi .tile-icon-shell{background:rgba(239,174,66,.12)}
.tile-finance .tile-icon-shell{background:rgba(77,207,144,.13)}
.tile-costs .tile-icon-shell{background:rgba(244,145,79,.12)}
.tile-settings .tile-icon-shell{background:rgba(156,174,187,.12)}

.dashboard-finance-card{
  margin-bottom:14px;
  padding:0;
  overflow:hidden;
}
.dashboard-finance-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:76px;
  padding:14px 16px;
  border:0;
  border-radius:0;
  background:linear-gradient(135deg,rgba(40,111,137,.72),rgba(19,55,73,.94));
  color:#fff;
  text-align:left;
}
.dashboard-finance-total span:first-child{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dashboard-finance-total small{
  color:#b8d6e2;
  font-size:12px;
}
.dashboard-finance-total strong{
  font-size:25px;
}
.dashboard-finance-open{
  color:#8be1ff;
  font-size:12px;
  font-weight:800;
}
.dashboard-finance-categories{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:12px;
}
.dashboard-category-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:58px;
  padding:10px 11px;
  gap:4px;
  border:1px solid rgba(135,211,240,.15);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  text-align:left;
}
.dashboard-category-chip span{
  overflow:hidden;
  max-width:100%;
  color:#aec8d3;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-category-chip strong{
  color:#eefbff;
  font-size:15px;
}
.dashboard-category-chip:active{
  background:rgba(70,199,242,.12);
  transform:scale(.98);
}

.finance-row-button{
  width:100%;
  min-height:58px;
  margin:0;
  padding:11px 4px;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  text-align:left;
}
.finance-row-button+.finance-row-button{
  border-top:1px solid rgba(255,255,255,.07);
}
.finance-row-button:active{
  background:rgba(70,199,242,.07);
}
.finance-row-value{
  display:flex;
  align-items:center;
  gap:7px;
  color:#eafaff;
  font-weight:800;
}
.finance-row-value span{
  color:#64d2f5;
  font-size:22px;
}
.finance-details-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.finance-details-head h2{
  margin-bottom:3px;
}
.finance-details-cost-button{
  width:auto;
  min-width:104px;
}
.finance-detail-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 14px;
  align-items:center;
  width:100%;
  min-height:64px;
  padding:10px 2px;
  gap:10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.finance-detail-row+.finance-detail-row{
  border-top:1px solid rgba(255,255,255,.07);
}
.finance-detail-row:active{
  background:rgba(70,199,242,.07);
}
.finance-detail-main{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.finance-detail-main b{
  font-size:14px;
}
.finance-detail-main small{
  overflow:hidden;
  color:#9eb8c4;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.finance-detail-row>strong{
  font-size:14px;
}
.finance-detail-arrow{
  color:#64d2f5;
  font-size:22px;
}

@media(max-width:430px){
  .dashboard-actions{
    gap:9px;
  }
  .dashboard-tile{
    grid-template-columns:42px minmax(0,1fr) 13px;
    min-height:86px;
    padding:11px;
    gap:8px;
  }
  .dashboard-tile .tile-icon-shell{
    width:42px;
    height:42px;
    border-radius:13px;
  }
  .dashboard-tile .tile-copy b{
    font-size:14px;
  }
  .dashboard-tile .tile-copy small{
    font-size:10px;
  }
  .dashboard-tile .tile-arrow{
    font-size:20px;
  }
}

/* Cloud 5.1.26 — live vaartocht opslaan als vertrek - aankomst */
.required-label{
  display:inline-flex;
  margin-left:5px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(84,202,238,.12);
  color:#78daf7;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
#liveTitle[readonly]{
  color:#dff8ff;
  background:rgba(255,255,255,.04);
  font-weight:800;
}
#liveRouteNameStatus.success{
  background:rgba(65,198,142,.14);
  color:#dcffed;
}

/* Cloud 5.1.29 — max snelheid, weer, motor en roer; knopen verwijderd */
.live-metric-highlight{
  border-color:rgba(75,211,247,.34);
  background:linear-gradient(145deg,rgba(22,77,99,.98),rgba(10,40,57,.98));
}
.live-weather-metric strong{
  white-space:nowrap;
}
.live-instruments-card{
  overflow:hidden;
}
.live-instruments-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.live-instruments-head h2{
  margin-bottom:4px;
}
.live-weather-refresh{
  width:auto;
  min-width:82px;
  white-space:nowrap;
}
.live-weather-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.live-weather-details>div{
  display:flex;
  min-height:65px;
  flex-direction:column;
  justify-content:center;
  padding:10px;
  gap:4px;
  border:1px solid rgba(128,209,238,.13);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.live-weather-details span{
  color:#9fbac6;
  font-size:11px;
}
.live-weather-details strong{
  overflow:hidden;
  color:#eefbff;
  font-size:14px;
  text-overflow:ellipsis;
}
.live-instrument-inputs{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:12px;
  margin-top:13px;
}
.live-instrument-control{
  padding:12px;
  border:1px solid rgba(128,209,238,.13);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.live-number-input{
  display:flex;
  align-items:center;
  gap:8px;
}
.live-number-input input{
  min-width:0;
  font-size:20px;
  font-weight:800;
}
.live-number-input span{
  color:#a7c1cc;
  font-size:12px;
}
#liveRudderInput{
  width:100%;
  margin:12px 0 8px;
}
.rudder-scale{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#9fbac6;
  font-size:11px;
}
.rudder-scale b{
  color:#eefbff;
  font-size:14px;
}
.live-nmea-note{
  margin:12px 0 0;
  color:#91aeb9;
}
@media(max-width:650px){
  .live-weather-details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .live-instrument-inputs{
    grid-template-columns:1fr;
  }
}

/* Cloud 5.1.30 — live gegevens als logboekballonnen */
.trip-summary .trip-summary-live{
  border:1px solid rgba(81,205,240,.18);
  background:linear-gradient(
    145deg,
    rgba(35,103,128,.20),
    rgba(255,255,255,.05)
  );
  color:#e5f9ff;
}
.trip-summary .trip-summary-weather{
  grid-column:1/-1;
  line-height:1.45;
}
@media(max-width:680px){
  .trip-summary .trip-summary-weather{
    grid-column:auto;
  }
}

/* Cloud 5.1.32 — uitgebreide bonherkenning en bon-details */
.receipt-details-card{
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(94,203,237,.28);
  border-radius:14px;
  background:rgba(28,87,108,.28);
}
.receipt-details-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  color:#f1fbff;
  font-weight:800;
}
.receipt-details-title button{
  width:auto;
  min-width:86px;
  padding:7px 10px;
}
#costReceiptDetails{
  min-height:180px;
  line-height:1.45;
  white-space:pre-wrap;
}
.cost-details{
  margin-top:10px;
  border:1px solid rgba(94,203,237,.18);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.cost-details summary{
  padding:10px 12px;
  cursor:pointer;
  color:#dff7ff;
  font-size:13px;
  font-weight:800;
}
.cost-details-content{
  padding:0 12px 12px;
  color:#b9d0da;
  font-size:12px;
  line-height:1.55;
}

/* Cloud 5.1.33 — bedrag en categorie openen volledige kostendetails */
.cost-title-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:58px;
  padding:4px 0 10px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.cost-title-main{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
}
.cost-title-main strong{
  font-size:21px;
}
.cost-title-main span{
  color:#c8e5ef;
  font-size:15px;
  font-weight:800;
}
.cost-list-summary{
  margin-top:-3px;
}
.details-chevron{
  display:inline-flex;
  color:#67d8fa;
  font-size:24px;
  transition:transform .18s ease;
}
.details-chevron.open{
  transform:rotate(90deg);
}
.inline-cost-details{
  margin-top:10px;
  padding:13px;
  border:1px solid rgba(93,205,239,.20);
  border-radius:14px;
  background:rgba(15,58,77,.55);
}
.inline-cost-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.inline-cost-grid>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border-radius:11px;
  background:rgba(255,255,255,.05);
}
.inline-cost-grid span{
  color:#93b1bd;
  font-size:11px;
}
.inline-cost-grid strong{
  overflow:hidden;
  color:#effbff;
  font-size:13px;
  text-overflow:ellipsis;
}
.inline-cost-notes{
  margin-top:10px;
  padding:11px;
  border-radius:11px;
  background:rgba(255,255,255,.045);
  color:#c1d7df;
  font-size:12px;
  line-height:1.55;
}
.muted-detail{
  color:#89a6b1;
}
.inline-receipt-heading{
  margin:12px 0 8px;
  color:#e8f9ff;
  font-size:13px;
  font-weight:800;
}
.finance-receipt-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.finance-receipt-button{
  display:flex;
  min-width:0;
  min-height:76px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px;
  border:1px solid rgba(102,205,237,.18);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:#dff7ff;
  font-size:10px;
  text-decoration:none;
}
.finance-receipt-button img{
  width:100%;
  height:58px;
  border-radius:8px;
  object-fit:cover;
}
.finance-receipt-pdf{
  text-align:center;
}
.inline-cost-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.inline-cost-actions button,
.inline-open-button{
  width:auto;
}
.finance-detail-card+.finance-detail-card{
  border-top:1px solid rgba(255,255,255,.07);
}
.finance-detail-card .inline-cost-details{
  margin:0 0 12px;
}
@media(max-width:520px){
  .inline-cost-grid{
    grid-template-columns:1fr;
  }
  .finance-receipt-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Cloud 5.1.34 — verbeterde bonherkenning en opnieuw uitlezen */
.finance-receipt-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:6px;
}
.receipt-rescan-button{
  width:100%;
  min-height:34px;
  padding:7px 8px;
  border:1px solid rgba(93,205,239,.22);
  border-radius:9px;
  background:rgba(62,180,220,.10);
  color:#dff8ff;
  font-size:10px;
  font-weight:800;
}
.receipt-rescan-button:active{
  background:rgba(62,180,220,.20);
}

/* Cloud 5.1.35 — relevante POI- en online havensuggesties */
.poi-live-suggestions .harbour-suggestion{
  border-left:4px solid #30bddd;
  background:linear-gradient(90deg,#e9fbff,#eef8ff);
}
.poi-live-suggestions .harbour-suggestion span{
  color:#28647a;
  font-weight:700;
}
.poi-suggestion-attribution{
  padding:7px 11px;
  border-top:1px solid rgba(33,105,135,.16);
  background:#f6fbfd;
  color:#527381;
  font-size:10px;
  text-align:right;
}

/* Cloud 5.1.36 — beveiligde login en accountbeheer */
.auth-card{max-width:620px;margin-inline:auto}
.auth-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.auth-lock{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(99,213,244,.22);border-radius:15px;background:rgba(71,191,226,.10);font-size:23px}
.password-field{position:relative}
.password-field input{padding-right:54px}
.password-toggle{position:absolute;top:50%;right:7px;width:42px;min-height:38px;padding:0;transform:translateY(-50%);border:0;background:transparent;font-size:18px}
.auth-actions{margin-top:14px}
.auth-link-button{width:auto;margin-top:4px;padding:7px 0;border:0;background:transparent;color:#79dafa;font-size:13px;text-decoration:underline}
.account-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.account-heading h2{margin-bottom:3px}
.account-security-badge{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border:1px solid rgba(63,200,132,.40);border-radius:999px;background:rgba(63,200,132,.13);color:#bff4d5;font-size:11px;font-weight:800;white-space:nowrap}
.account-security-badge.warning{border-color:rgba(239,177,65,.42);background:rgba(239,177,65,.13);color:#ffe1a5}
.account-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.account-info-grid>div{display:flex;min-width:0;flex-direction:column;gap:4px;padding:11px;border:1px solid rgba(112,207,238,.14);border-radius:12px;background:rgba(255,255,255,.04)}
.account-info-grid span{color:#91afbb;font-size:11px}
.account-info-grid strong{overflow:hidden;color:#eefbff;font-size:13px;text-overflow:ellipsis}
.account-section{margin-top:12px;padding:14px;border:1px solid rgba(112,207,238,.15);border-radius:14px;background:rgba(255,255,255,.035)}
.account-section h3{margin:0 0 10px;color:#eefbff;font-size:16px}
.account-section>button{margin-top:10px}
.password-strength{height:7px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
.password-strength span{display:block;width:0;height:100%;border-radius:inherit;background:#db5a62;transition:width .18s ease,background .18s ease}
.password-strength span[data-score="2"]{background:#e8a342}
.password-strength span[data-score="3"]{background:#5ab8df}
.password-strength span[data-score="4"]{background:#49cb8f}
.account-session-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.account-session-actions button{width:100%;min-height:48px}
#accountMsg.account-error{border-color:rgba(226,83,96,.38);background:rgba(226,83,96,.14);color:#ffe2e5}
@media(max-width:520px){.account-info-grid,.account-session-actions{grid-template-columns:1fr}}

/* Cloud 5.1.37 — beheerderstoestemming voor nieuwe gebruikers */
.approval-card{
  max-width:620px;
  margin-inline:auto;
  text-align:center;
}
.approval-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  margin:0 auto 14px;
  border:1px solid rgba(105,211,242,.25);
  border-radius:22px;
  background:rgba(54,170,206,.12);
  font-size:34px;
}
.approval-card h2{
  margin:5px 0 8px;
}
.approval-card>p{
  color:#aec6d0;
  line-height:1.55;
}
.approval-email{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:16px 0 12px;
  padding:12px;
  border:1px solid rgba(105,211,242,.16);
  border-radius:13px;
  background:rgba(255,255,255,.04);
}
.approval-email span{
  color:#8eabb7;
  font-size:11px;
}
.approval-email strong{
  overflow:hidden;
  color:#effbff;
  text-overflow:ellipsis;
}
.approval-actions{
  justify-content:center;
  margin-top:14px;
}
.admin-access-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.admin-access-head h3{
  margin-bottom:3px;
}
.admin-access-head button{
  width:auto;
  white-space:nowrap;
}
.admin-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:12px 0 9px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(238,171,59,.10);
  color:#ffd890;
}
.admin-summary strong{
  font-size:22px;
}
.admin-account-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-account-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  padding:11px;
  gap:10px;
  border:1px solid rgba(115,205,234,.14);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.admin-account-row.pending{
  border-color:rgba(235,173,62,.24);
  background:rgba(235,173,62,.07);
}
.admin-account-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.admin-account-copy b{
  overflow:hidden;
  color:#eefbff;
  text-overflow:ellipsis;
}
.admin-account-copy small{
  color:#91acb7;
}
.admin-account-actions{
  display:flex;
  flex-shrink:0;
  gap:7px;
}
.admin-account-actions button{
  width:auto;
  min-height:36px;
  padding:7px 10px;
  font-size:11px;
}
.admin-status-pill{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
}
.admin-status-pill.approved{
  background:rgba(68,199,133,.15);
  color:#bdf0d2;
}
.admin-status-pill.rejected{
  background:rgba(223,84,96,.15);
  color:#ffc7cd;
}
.admin-status-pill.pending{
  background:rgba(235,173,62,.15);
  color:#ffdd9e;
}
.admin-approved-details{
  margin-top:12px;
}
.admin-approved-details>summary{
  padding:9px 0;
  color:#aad0de;
  font-size:12px;
  font-weight:800;
}
.admin-approval-dashboard{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:center;
  width:100%;
  margin-bottom:14px;
  padding:13px;
  gap:11px;
  border:1px solid rgba(240,175,55,.28);
  background:linear-gradient(135deg,rgba(98,71,21,.76),rgba(45,40,25,.92));
  color:#fff;
  text-align:left;
}
.admin-approval-dashboard-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(255,201,87,.13);
  font-size:22px;
}
.admin-approval-dashboard>span:nth-child(2){
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.admin-approval-dashboard small{
  color:#e6ca92;
}
@media(max-width:600px){
  .admin-account-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .admin-account-actions{
    width:100%;
  }
  .admin-account-actions button{
    flex:1;
  }
}

/* Cloud 5.1.38 — online gebruikersstatus en Boot alleen voor beheerder */
.admin-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0 8px;
}
.admin-summary-grid>div{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border:1px solid rgba(112,207,238,.15);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.admin-summary-grid span{
  color:#91aeba;
  font-size:11px;
}
.admin-summary-grid strong{
  color:#eefbff;
  font-size:22px;
}
.presence-help{
  margin:0 0 14px;
  color:#86a6b2;
}
.admin-list-heading{
  margin:14px 0 8px;
  color:#e7f8ff;
  font-size:13px;
  font-weight:800;
}
.account-presence-dot{
  width:11px;
  height:11px;
  flex:0 0 11px;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.035);
}
.account-presence-dot.online{
  background:#48d58d;
  box-shadow:0 0 0 4px rgba(72,213,141,.12);
}
.account-presence-dot.offline{
  background:#718791;
}
.admin-account-email{
  overflow:hidden;
  color:#a8c1cb;
  font-size:11px;
  text-overflow:ellipsis;
}
.protected-account{
  flex-shrink:0;
}
.admin-section-locked{
  display:none!important;
}
@media(max-width:520px){
  .admin-summary-grid{
    grid-template-columns:1fr;
  }
}

/* Cloud 5.1.39 — nieuw MijnSerenity-logo */
.branded-header-row{
  align-items:center;
}
.app-brand{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.app-brand-logo{
  display:block;
  width:min(250px,68vw);
  max-height:92px;
  padding:7px 10px;
  border-radius:14px;
  background:#fff;
  object-fit:contain;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
}
.app-brand-edition{
  padding-left:5px;
  color:#9eb5c0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
}
.auth-brand-logo,
.approval-brand-logo{
  display:block;
  width:min(320px,88%);
  max-height:180px;
  margin:0 auto 18px;
  padding:10px;
  border-radius:18px;
  background:#fff;
  object-fit:contain;
  box-shadow:0 12px 32px rgba(0,0,0,.17);
}
.approval-brand-logo{
  margin-bottom:14px;
}
@media(max-width:520px){
  .app-brand-logo{
    width:min(215px,65vw);
    max-height:80px;
    padding:6px 8px;
  }
  .app-brand-edition{
    font-size:10px;
  }
  .connection-status{
    flex-shrink:0;
  }
}

/* Cloud 5.1.40 — cache-busting en directe updatecontrole */
.app-brand-edition::after{
  content:" · v7.4.6";
  color:#6fcfee;
  font-weight:800;
}

/* Cloud 5.1.41 — logo volledige breedte en onlineknop in Sync */
.full-width-brand-header{
  padding-left:0;
  padding-right:0;
}
.full-width-brand-header .branded-header-row{
  width:100%;
  display:block;
}
.full-width-brand-header .app-brand{
  width:100%;
  align-items:stretch;
}
.full-width-brand-header .app-brand-logo{
  width:100%;
  max-width:none;
  max-height:240px;
  padding:10px 14px;
  border-radius:0;
  object-fit:contain;
  box-shadow:none;
}
.full-width-brand-header .app-brand-edition{
  padding:7px 16px 0;
}
.sync-status-stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sync-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}
.sync-online-button{
  width:auto;
  min-width:76px;
  min-height:34px;
  margin:0;
  padding:6px 11px;
  border:1px solid rgba(65,211,132,.45);
  border-radius:999px;
  background:rgba(23,116,72,.28);
  color:#bff5d3;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.sync-online-button.offline{
  border-color:rgba(231,85,96,.42);
  background:rgba(134,35,45,.28);
  color:#ffd1d5;
}
.sync-online-button:active{
  transform:scale(.97);
}
@media(max-width:520px){
  .full-width-brand-header .app-brand-logo{
    width:100%;
    max-height:205px;
    padding:8px 10px;
  }
  .full-width-brand-header .app-brand-edition{
    padding-left:12px;
    padding-right:12px;
  }
  .sync-status-row{
    align-items:flex-end;
    flex-direction:column;
    gap:7px;
  }
}

/* Cloud 5.1.42 — header verwijderd */
body > header{
  display:none!important;
}
main{
  padding-top:max(10px,env(safe-area-inset-top));
}

/* Cloud 5.1.43 — POI-titel opent alle informatie */
.poi-title-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:58px;
  margin:0;
  padding:2px 0 10px;
  gap:12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.poi-title-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
}
.poi-title-copy strong{
  overflow:hidden;
  font-size:19px;
  line-height:1.2;
  text-overflow:ellipsis;
}
.poi-title-copy small{
  color:#a9c6d1;
  font-size:12px;
}
.poi-title-arrow{
  flex-shrink:0;
  color:#69d5f6;
  font-size:28px;
  line-height:1;
}
.poi-title-button:active{
  opacity:.72;
}
.poi-list-address{
  margin-top:1px;
}
.poi-list-review{
  margin-bottom:10px;
}
.poi-detail-overview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}
.poi-detail-overview>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
  padding:11px;
  border-radius:12px;
  background:#e8f3f8;
}
.poi-detail-overview span{
  color:#607986;
  font-size:11px;
}
.poi-detail-overview strong{
  overflow:hidden;
  color:#0d2b3c;
  font-size:13px;
  text-overflow:ellipsis;
}
.poi-detail-section{
  margin-top:17px;
}
.poi-detail-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  color:#153448;
  font-size:14px;
  font-weight:800;
}
.poi-detail-section-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 7px;
  border-radius:999px;
  background:#dcebf2;
  font-size:11px;
}
.poi-detail-empty{
  color:#708895;
  font-style:italic;
}
@media(max-width:520px){
  .poi-detail-overview{
    grid-template-columns:1fr;
  }
}

/* MijnSerenity Cloud 5.2.0 — Captain Command Center */
.captain-command-center{
  display:grid;
  gap:14px;
  margin:14px 0 18px;
}
.captain-intelligence-card{
  position:relative;
  overflow:visible;
  padding:18px;
  border:1px solid rgba(103,213,246,.18);
  background:
    radial-gradient(circle at top right,rgba(47,154,191,.20),transparent 42%),
    linear-gradient(145deg,rgba(14,43,62,.98),rgba(5,24,38,.98));
}
.captain-intelligence-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.captain-intelligence-head h2{
  margin:4px 0 0;
  font-size:24px;
}
.captain-season-badge{
  flex-shrink:0;
  padding:7px 10px;
  border:1px solid rgba(212,172,85,.32);
  border-radius:999px;
  background:rgba(212,172,85,.10);
  color:#efd68e;
  font-size:11px;
  font-weight:900;
}
.captain-insight{
  margin:12px 0 15px;
  color:#c3dce6;
  line-height:1.5;
}
.captain-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.captain-search-wrap input{
  width:100%;
  height:48px;
  margin:0;
  padding:0 44px 0 42px;
  border:1px solid rgba(120,211,239,.20);
  border-radius:16px;
  background:rgba(255,255,255,.075);
  color:#fff;
  box-shadow:none;
}
.captain-search-wrap input::placeholder{
  color:#86a9b7;
}
.captain-search-icon{
  position:absolute;
  left:14px;
  z-index:1;
  color:#76d7f4;
  font-size:22px;
}
.captain-search-clear{
  position:absolute;
  right:7px;
  width:34px;
  min-height:34px;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#d8eef6;
}
.captain-search-results{
  position:absolute;
  z-index:60;
  top:calc(100% - 74px);
  left:18px;
  right:18px;
  max-height:390px;
  overflow:auto;
  padding:7px;
  border:1px solid rgba(121,210,238,.22);
  border-radius:17px;
  background:#0b2637;
  box-shadow:0 22px 55px rgba(0,0,0,.45);
}
.captain-search-result{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  width:100%;
  margin:0;
  padding:11px 9px;
  gap:9px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:transparent;
  color:#fff;
  text-align:left;
}
.captain-search-result:last-child{
  border-bottom:0;
}
.captain-search-result>span:first-child{
  font-size:22px;
}
.captain-search-result>span:nth-child(2){
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.captain-search-result strong,
.captain-search-result small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.captain-search-result small{
  color:#94b6c3;
}
.captain-search-result>b{
  color:#71d7f5;
  font-size:22px;
}
.captain-search-empty{
  padding:18px;
  color:#a9c8d3;
  text-align:center;
}
.captain-quick-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.captain-quick-actions button{
  display:flex;
  min-width:0;
  min-height:68px;
  margin:0;
  padding:9px 5px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  color:#e9f7fb;
}
.captain-quick-actions span{
  font-size:22px;
}
.captain-quick-actions small{
  overflow:hidden;
  width:100%;
  color:#a9c7d2;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.captain-season-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.captain-metric{
  display:flex;
  min-width:0;
  min-height:112px;
  margin:0;
  padding:14px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(150deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  color:#fff;
  text-align:left;
}
.captain-metric span{
  color:#8fb0bd;
  font-size:11px;
}
.captain-metric strong{
  overflow:hidden;
  width:100%;
  color:#f2fbff;
  font-size:22px;
  text-overflow:ellipsis;
}
.captain-metric small{
  color:#6fcfee;
  font-size:10px;
}
.captain-activity-card{
  padding:16px;
}
.captain-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.captain-activity-head h3{
  margin:3px 0 0;
}
.captain-activity-head button{
  width:38px;
  min-height:38px;
  padding:0;
  border-radius:999px;
}
.captain-activity-list{
  display:grid;
}
.captain-activity-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  width:100%;
  margin:0;
  padding:11px 3px;
  gap:10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.captain-activity-item:last-child{
  border-bottom:0;
}
.captain-activity-icon{
  display:flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(111,207,238,.10);
  font-size:20px;
}
.captain-activity-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.captain-activity-copy strong,
.captain-activity-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.captain-activity-copy small{
  color:#91afbb;
}
.captain-activity-arrow{
  color:#6fcfee;
  font-size:23px;
}
.captain-highlight{
  animation:captainHighlight 1.8s ease;
}
@keyframes captainHighlight{
  0%,100%{box-shadow:none}
  25%,70%{box-shadow:0 0 0 3px rgba(111,207,238,.45)}
}
@media(max-width:760px){
  .captain-season-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .captain-intelligence-card{
    padding:15px;
  }
  .captain-intelligence-head h2{
    font-size:21px;
  }
  .captain-season-badge{
    padding:6px 8px;
    font-size:10px;
  }
  .captain-quick-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .captain-search-results{
    left:12px;
    right:12px;
  }
}

/* MijnSerenity Cloud 5.2.1 — verbeterde POI- en havensuggesties */
.poi-quick-search{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.poi-quick-search button{
  width:auto;
  min-height:34px;
  margin:0;
  padding:6px 9px;
  border:1px solid rgba(109,208,239,.16);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#d9f2f9;
  font-size:11px;
  font-weight:800;
}
.poi-search-hint{
  margin:7px 0 0;
  color:#83a7b5;
}
.poi-live-suggestions button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:10px;
}
.poi-suggestion-main{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  gap:3px;
}
.poi-suggestion-main b,
.poi-suggestion-main span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.poi-live-suggestions button em{
  flex-shrink:0;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(111,207,238,.12);
  color:#84ddf7;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.online-poi-suggestion{
  border-left:3px solid rgba(111,207,238,.75)!important;
}
.poi-suggestion-attribution{
  padding:8px 10px;
  color:#6f909d;
  font-size:10px;
  text-align:center;
}
@media(max-width:520px){
  .poi-quick-search{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .poi-quick-search button{
    width:100%;
  }
}

/* MijnSerenity Cloud 5.2.2 — automatische POI-verrijking en kleine havens */
.poi-auto-info{
  margin:10px 0 2px;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.4;
}
.poi-auto-info.success{
  border:1px solid rgba(64,207,132,.25);
  background:rgba(29,133,82,.18);
  color:#c8f5da;
}
.poi-auto-info.warning{
  border:1px solid rgba(226,180,79,.25);
  background:rgba(143,100,21,.18);
  color:#f5dfa8;
}
.poi-auto-info.error{
  border:1px solid rgba(228,91,102,.25);
  background:rgba(139,40,49,.18);
  color:#ffd0d5;
}
.nearby-harbour-suggestion{
  border-left-color:#d8b45c!important;
  background:linear-gradient(
    90deg,
    rgba(216,180,92,.08),
    transparent
  )!important;
}
.nearby-harbour-suggestion em{
  background:rgba(216,180,92,.14)!important;
  color:#f0d58c!important;
}

/* MijnSerenity Cloud 5.2.3 — internetfoto’s voor POI en plaats */
.poi-web-photo-tools{
  display:flex;
  margin-top:9px;
}
.poi-web-photo-tools button{
  width:100%;
}
.poi-web-photo-status{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.055);
  color:#a9c8d3;
  font-size:12px;
  line-height:1.4;
}
.poi-web-photo-status.success{
  border:1px solid rgba(61,208,132,.22);
  background:rgba(30,126,81,.16);
  color:#c8f5dc;
}
.poi-web-photo-status.warning{
  border:1px solid rgba(229,183,76,.22);
  background:rgba(133,95,24,.15);
  color:#f4dfa7;
}
.poi-web-photo-status.error{
  border:1px solid rgba(227,89,101,.24);
  background:rgba(137,38,48,.16);
  color:#ffd1d6;
}
.poi-web-photo-results{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:10px 0 14px;
}
.poi-web-photo-card{
  overflow:hidden;
  min-width:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}
.poi-web-photo-card.selected{
  border-color:rgba(83,219,148,.70);
  box-shadow:0 0 0 2px rgba(83,219,148,.16);
}
.poi-web-photo-select{
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:#071a27;
}
.poi-web-photo-select img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.poi-web-photo-check{
  position:absolute;
  right:7px;
  bottom:7px;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(3,17,26,.86);
  color:#eaf9ff;
  font-size:10px;
  font-weight:900;
  backdrop-filter:blur(6px);
}
.poi-web-photo-card.selected .poi-web-photo-check{
  background:rgba(24,136,80,.92);
}
.poi-web-photo-meta{
  display:flex;
  min-width:0;
  padding:9px;
  flex-direction:column;
  gap:4px;
}
.poi-web-photo-meta strong,
.poi-web-photo-meta small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.poi-web-photo-meta strong{
  color:#eaf8fc;
  font-size:11px;
}
.poi-web-photo-meta small{
  color:#87a8b5;
  font-size:9px;
}
.poi-web-photo-meta a{
  margin-top:2px;
  color:#6fd4f3;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
}
@media(max-width:680px){
  .poi-web-photo-results{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* MijnSerenity Cloud 5.2.4 — robuuste omgevingszoeker */
.poi-nearby-toolbar{
  display:grid;
  grid-template-columns:auto minmax(110px,1fr);
  align-items:center;
  gap:9px;
  margin-top:9px;
}
.poi-nearby-toolbar label{
  margin:0;
  color:#9bbbc7;
  font-size:11px;
  font-weight:800;
}
.poi-nearby-toolbar select{
  height:38px;
  margin:0;
  padding:0 10px;
  border-radius:12px;
}
.poi-quick-search .poi-nearby-all{
  grid-column:1/-1;
  border-color:rgba(216,180,92,.28);
  background:rgba(216,180,92,.10);
  color:#f1d78d;
}
.nearby-harbour-suggestion{
  border-left-color:#d8b45c!important;
  background:linear-gradient(
    90deg,
    rgba(216,180,92,.09),
    transparent
  )!important;
}
@media(max-width:520px){
  .poi-nearby-toolbar{
    grid-template-columns:1fr;
  }
}

/* MijnSerenity Cloud 5.3.0 — Reisplanner & Havenbibliotheek */
.tile-planner{
  background:
    radial-gradient(circle at top right,rgba(216,180,92,.18),transparent 50%),
    rgba(255,255,255,.04);
}
.planner-hero{
  overflow:hidden;
  border:1px solid rgba(216,180,92,.18);
  background:
    radial-gradient(circle at top right,rgba(216,180,92,.18),transparent 43%),
    linear-gradient(145deg,rgba(10,42,59,.98),rgba(4,23,36,.98));
}
.planner-hero-head,
.planner-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.planner-hero h2,
.planner-card-heading h3{
  margin:4px 0 0;
}
.planner-version-badge,
.planner-count-badge{
  display:inline-flex;
  min-width:42px;
  height:34px;
  padding:0 10px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(216,180,92,.32);
  border-radius:999px;
  background:rgba(216,180,92,.10);
  color:#f0d58c;
  font-size:11px;
  font-weight:900;
}
.planner-warning{
  margin-top:14px;
  padding:11px 13px;
  border:1px solid rgba(230,187,87,.18);
  border-radius:13px;
  background:rgba(153,105,23,.13);
  color:#ebdaa8;
  font-size:12px;
  line-height:1.45;
}
.planner-layout{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:14px;
  margin-top:14px;
}
.planner-form-card,
.planner-summary-card,
.planner-saved-card,
.harbour-library-card{
  padding:17px;
}
.planner-reset-button{
  width:auto;
  min-height:36px;
  padding:6px 10px;
}
.planner-stop-builder{
  margin:10px 0;
}
.planner-stop-add-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.planner-stop-add-row select,
.planner-stop-add-row button{
  margin:0;
}
.planner-stop-chips{
  display:grid;
  gap:7px;
  margin-top:9px;
}
.planner-stop-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  gap:8px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
.planner-stop-chip>span:first-child{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
}
.planner-stop-chip>span:first-child b{
  display:flex;
  width:24px;
  height:24px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(111,207,238,.13);
  color:#77d8f5;
  font-size:11px;
}
.planner-stop-controls{
  display:flex;
  gap:4px;
}
.planner-stop-controls button{
  width:29px;
  min-height:29px;
  margin:0;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#d9edf4;
}
.planner-main-actions{
  margin-top:13px;
}
.planner-summary-badge{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(109,207,239,.10);
  color:#77d8f5;
  font-size:10px;
  font-weight:900;
}
.planner-empty-state{
  display:flex;
  min-height:300px;
  padding:30px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#92afbb;
  text-align:center;
}
.planner-empty-state>span{
  font-size:52px;
}
.planner-empty-state b{
  color:#e8f6fb;
  font-size:17px;
}
.planner-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:14px 0 11px;
}
.planner-metrics>div{
  display:flex;
  min-width:0;
  padding:11px;
  flex-direction:column;
  gap:4px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.planner-metrics span{
  color:#8eabb6;
  font-size:10px;
}
.planner-metrics strong{
  overflow:hidden;
  color:#edf9fc;
  font-size:18px;
  text-overflow:ellipsis;
}
.planner-map{
  width:100%;
  height:270px;
  overflow:hidden;
  border-radius:15px;
  background:#0b2637;
}
.planner-segment-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 6px;
}
.planner-segment-heading button{
  width:auto;
  min-height:34px;
  margin:0;
  padding:6px 9px;
  font-size:10px;
}
.planner-segments{
  display:grid;
}
.planner-segment{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 38px;
  align-items:center;
  gap:9px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.planner-segment:last-child{
  border-bottom:0;
}
.planner-segment-number{
  display:flex;
  width:27px;
  height:27px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(216,180,92,.12);
  color:#ebce7e;
  font-size:11px;
  font-weight:900;
}
.planner-segment-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.planner-segment-copy strong,
.planner-segment-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.planner-segment-copy small{
  color:#8eaab5;
}
.planner-segment>button{
  width:36px;
  min-height:34px;
  margin:0;
  padding:0;
}
.planner-result-actions{
  margin-top:12px;
}
.planner-saved-card,
.harbour-library-card{
  margin-top:14px;
}
.planner-saved-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.planner-saved-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.planner-saved-main{
  display:grid;
  grid-template-columns:37px minmax(0,1fr) 18px;
  align-items:center;
  min-width:0;
  width:100%;
  margin:0;
  padding:5px;
  gap:9px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.planner-saved-icon{
  display:flex;
  width:35px;
  height:35px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:rgba(111,207,238,.10);
  font-size:18px;
}
.planner-saved-main>span:nth-child(2){
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.planner-saved-main strong,
.planner-saved-main small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.planner-saved-main small{
  color:#91afba;
}
.planner-saved-main>b{
  color:#6fcfee;
  font-size:21px;
}
.planner-saved-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.planner-saved-actions button{
  width:auto;
  min-height:34px;
  margin:0;
  padding:6px 8px;
  font-size:10px;
}
.harbour-library-heading{
  align-items:center;
}
.harbour-library-heading>button{
  width:auto;
  min-height:38px;
  margin:0;
  padding:7px 11px;
}
.harbour-library-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
}
.harbour-library-stats>div{
  display:flex;
  min-width:0;
  padding:11px;
  flex-direction:column;
  gap:4px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.harbour-library-stats span{
  color:#8eabb6;
  font-size:10px;
}
.harbour-library-stats strong{
  color:#f1d58a;
  font-size:21px;
}
.harbour-library-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,.38fr);
  gap:8px;
}
.harbour-library-toolbar input,
.harbour-library-toolbar select{
  margin:0;
}
.harbour-library-actions{
  margin:9px 0 12px;
}
.harbour-library-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.harbour-library-item{
  overflow:hidden;
  min-width:0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.035);
}
.harbour-library-main{
  display:grid;
  grid-template-columns:39px minmax(0,1fr) 18px;
  align-items:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:12px 11px 8px;
  gap:9px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.harbour-library-icon{
  display:flex;
  width:37px;
  height:37px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(216,180,92,.11);
  font-size:19px;
}
.harbour-library-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.harbour-library-copy strong,
.harbour-library-copy small,
.harbour-library-copy em{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.harbour-library-copy small{
  color:#91afba;
  font-size:10px;
}
.harbour-library-copy em{
  color:#86d9f1;
  font-size:9px;
  font-style:normal;
}
.harbour-library-main>b{
  color:#6fcfee;
  font-size:21px;
}
.harbour-completeness-bar{
  display:block;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}
.harbour-completeness-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#6fcfee,#e4be65);
}
.harbour-library-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 11px 9px;
}
.harbour-library-meta span{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#a7c3cd;
  font-size:9px;
}
.harbour-library-item-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:0 9px 9px;
}
.harbour-library-item-actions button{
  min-height:34px;
  margin:0;
  padding:6px 7px;
  font-size:10px;
}
.bottom-nav{
  overflow-x:auto;
  scrollbar-width:none;
}
.bottom-nav::-webkit-scrollbar{
  display:none;
}
.bottom-nav-item{
  min-width:58px;
}
@media(max-width:900px){
  .planner-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .harbour-library-list{
    grid-template-columns:1fr;
  }
  .harbour-library-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .harbour-library-toolbar{
    grid-template-columns:1fr;
  }
}
@media(max-width:520px){
  .planner-hero-head,
  .planner-card-heading{
    align-items:flex-start;
  }
  .planner-form-card,
  .planner-summary-card,
  .planner-saved-card,
  .harbour-library-card{
    padding:14px;
  }
  .planner-stop-add-row{
    grid-template-columns:1fr;
  }
  .planner-metrics{
    grid-template-columns:1fr 1fr;
  }
  .planner-map{
    height:230px;
  }
  .planner-saved-item{
    grid-template-columns:1fr;
  }
  .planner-saved-actions{
    justify-content:flex-end;
  }
  .harbour-library-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .harbour-library-heading>button{
    width:100%;
  }
}

/* MijnSerenity Cloud 5.3.1 — automatisch vaarlogboek */
.live-auto-log-card{
  margin-top:14px;
  padding:17px;
  border:1px solid rgba(83,219,148,.16);
  background:
    radial-gradient(circle at top right,rgba(61,183,125,.14),transparent 45%),
    rgba(255,255,255,.035);
}
.live-auto-log-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.live-auto-log-head h2{
  margin:4px 0 5px;
}
.live-auto-log-badge{
  flex-shrink:0;
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
}
.live-auto-log-badge.active{
  border:1px solid rgba(83,219,148,.28);
  background:rgba(36,144,91,.18);
  color:#c7f4da;
}
.live-auto-log-badge.manual{
  border:1px solid rgba(226,180,79,.25);
  background:rgba(143,100,21,.17);
  color:#f3dea7;
}
.live-auto-log-settings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:13px;
}
.live-auto-setting{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.04);
}
.live-auto-setting input{
  width:20px;
  height:20px;
  margin:1px 0 0;
  flex-shrink:0;
}
.live-auto-setting span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.live-auto-setting b{
  color:#edf9fc;
  font-size:13px;
}
.live-auto-setting small{
  color:#8caab6;
  font-size:10px;
  line-height:1.35;
}
.live-auto-setting-fields{
  display:grid;
  grid-column:1/-1;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.live-auto-setting-fields label{
  font-size:10px;
}
.live-auto-setting-fields select{
  margin:0;
}
.live-auto-log-status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#a8c4cf;
  font-size:12px;
  line-height:1.4;
}
.live-auto-log-status.success{
  border:1px solid rgba(83,219,148,.22);
  background:rgba(36,144,91,.14);
  color:#c7f4da;
}
.live-auto-log-status.warning{
  border:1px solid rgba(226,180,79,.22);
  background:rgba(143,100,21,.14);
  color:#f3dea7;
}
.live-auto-log-status.error{
  border:1px solid rgba(227,89,101,.23);
  background:rgba(137,38,48,.15);
  color:#ffd1d6;
}
.live-auto-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
  padding:11px;
  border:1px solid rgba(111,207,238,.14);
  border-radius:14px;
  background:rgba(111,207,238,.055);
}
.live-auto-summary>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.live-auto-summary span{
  color:#89a9b6;
  font-size:9px;
}
.live-auto-summary strong{
  overflow:hidden;
  color:#eef9fc;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-auto-summary>p{
  grid-column:1/-1;
  margin:2px 0 0;
  color:#b5d1da;
  font-size:10px;
  line-height:1.4;
}
@media(max-width:650px){
  .live-auto-log-settings{
    grid-template-columns:1fr;
  }
  .live-auto-setting-fields{
    grid-column:auto;
    grid-template-columns:1fr;
  }
  .live-auto-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .live-auto-log-head{
    flex-direction:column;
  }
}

/* MijnSerenity Cloud 5.4.0 — technisch scheepsdashboard */
.tile-technical{
  background:
    radial-gradient(circle at top right,rgba(73,194,211,.18),transparent 50%),
    rgba(255,255,255,.04);
}
.technical-hero{
  border:1px solid rgba(73,194,211,.17);
  background:
    radial-gradient(circle at top right,rgba(73,194,211,.18),transparent 44%),
    linear-gradient(145deg,rgba(8,39,55,.98),rgba(4,22,34,.98));
}
.technical-hero-head,
.technical-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.technical-hero h2,
.technical-card-heading h3{
  margin:4px 0 0;
}
.technical-health-badge{
  flex-shrink:0;
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
}
.technical-health-badge.good{
  border:1px solid rgba(83,219,148,.28);
  background:rgba(36,144,91,.18);
  color:#c7f4da;
}
.technical-health-badge.warning{
  border:1px solid rgba(226,180,79,.28);
  background:rgba(143,100,21,.17);
  color:#f3dea7;
}
.technical-health-badge.critical{
  border:1px solid rgba(232,83,97,.32);
  background:rgba(143,39,49,.22);
  color:#ffd0d5;
}
.technical-health-badge.unknown{
  border:1px solid rgba(111,207,238,.20);
  background:rgba(111,207,238,.10);
  color:#beeaf6;
}
.technical-alert-list{
  display:grid;
  gap:7px;
  margin-top:14px;
}
.technical-alert{
  display:grid;
  grid-template-columns:33px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border-radius:12px;
}
.technical-alert>span{
  font-size:19px;
}
.technical-alert>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}
.technical-alert small{
  color:inherit;
  opacity:.78;
}
.technical-alert.good{
  border:1px solid rgba(83,219,148,.18);
  background:rgba(36,144,91,.13);
  color:#c7f4da;
}
.technical-alert.info{
  border:1px solid rgba(111,207,238,.18);
  background:rgba(111,207,238,.08);
  color:#c7ebf5;
}
.technical-alert.warning{
  border:1px solid rgba(226,180,79,.20);
  background:rgba(143,100,21,.14);
  color:#f3dea7;
}
.technical-alert.critical{
  border:1px solid rgba(232,83,97,.23);
  background:rgba(143,39,49,.18);
  color:#ffd0d5;
}
.technical-hero-actions{
  margin-top:12px;
}
.technical-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.technical-gauge{
  display:flex;
  min-width:0;
  min-height:130px;
  margin:0;
  padding:14px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  color:#fff;
  text-align:left;
}
.technical-gauge-icon{
  font-size:22px;
}
.technical-gauge>span:nth-child(2){
  color:#8eabb7;
  font-size:10px;
}
.technical-gauge strong{
  overflow:hidden;
  width:100%;
  color:#f2fbff;
  font-size:22px;
  text-overflow:ellipsis;
}
.technical-gauge small{
  overflow:hidden;
  width:100%;
  color:#6fcfee;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.technical-snapshot-card,
.technical-maintenance-card,
.technical-integrations-card,
.technical-log-card{
  padding:17px;
}
.technical-close-button{
  width:36px;
  min-height:36px;
  margin:0;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.technical-form-section{
  margin:13px 0;
  padding:13px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.technical-form-section h4{
  margin:0 0 10px;
  color:#d9f1f7;
}
.technical-columns{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:14px;
  margin-bottom:14px;
}
.technical-task-form,
.technical-event-form{
  margin:12px 0;
  padding:12px;
  border:1px solid rgba(111,207,238,.12);
  border-radius:14px;
  background:rgba(111,207,238,.045);
}
.technical-maintenance-summary{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:12px 0;
}
.technical-maintenance-summary span{
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}
.technical-maintenance-summary .critical{
  background:rgba(143,39,49,.18);
  color:#ffd0d5;
}
.technical-maintenance-summary .warning{
  background:rgba(143,100,21,.17);
  color:#f3dea7;
}
.technical-maintenance-summary .good{
  background:rgba(36,144,91,.16);
  color:#c7f4da;
}
.technical-maintenance-list{
  display:grid;
}
.technical-maintenance-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.technical-maintenance-item:last-child{
  border-bottom:0;
}
.technical-maintenance-status{
  display:flex;
  width:29px;
  height:29px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
}
.technical-maintenance-item.good .technical-maintenance-status{
  background:rgba(36,144,91,.17);
  color:#8af0b6;
}
.technical-maintenance-item.warning .technical-maintenance-status{
  background:rgba(143,100,21,.18);
  color:#f2d174;
}
.technical-maintenance-item.critical .technical-maintenance-status{
  background:rgba(143,39,49,.20);
  color:#ff99a3;
}
.technical-maintenance-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.technical-maintenance-copy strong,
.technical-maintenance-copy small,
.technical-maintenance-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.technical-maintenance-copy small{
  color:#8eabb7;
}
.technical-maintenance-copy span{
  color:#6fcfee;
  font-size:9px;
}
.technical-maintenance-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
.technical-maintenance-actions button{
  width:auto;
  min-height:34px;
  margin:0;
  padding:6px 8px;
  font-size:10px;
}
.technical-integration-list{
  display:grid;
  margin-top:12px;
}
.technical-integration-row{
  display:grid;
  grid-template-columns:35px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.technical-integration-row>span{
  font-size:22px;
}
.technical-integration-row>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.technical-integration-row small{
  color:#8eabb7;
}
.technical-integration-row em{
  padding:5px 7px;
  border-radius:999px;
  font-size:9px;
  font-style:normal;
  font-weight:900;
}
.technical-integration-row em.connected{
  background:rgba(36,144,91,.17);
  color:#c7f4da;
}
.technical-integration-row em.planned{
  background:rgba(143,100,21,.16);
  color:#f3dea7;
}
.technical-integration-row em.offline{
  background:rgba(255,255,255,.07);
  color:#9ab5bf;
}
.technical-roadmap{
  margin-top:12px;
  padding:12px;
  border:1px dashed rgba(111,207,238,.20);
  border-radius:13px;
  color:#bad9e2;
}
.technical-roadmap p{
  margin:5px 0 0;
  font-size:11px;
  line-height:1.45;
}
.technical-log-card{
  margin-bottom:18px;
}
.technical-log-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,.35fr);
  gap:8px;
  margin:12px 0;
}
.technical-log-toolbar input,
.technical-log-toolbar select{
  margin:0;
}
.technical-event-list{
  display:grid;
}
.technical-event-item{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 34px;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.technical-event-item:last-child{
  border-bottom:0;
}
.technical-event-date{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.technical-event-date strong{
  color:#e8f7fb;
  font-size:12px;
}
.technical-event-date small{
  color:#6fcfee;
  font-size:9px;
}
.technical-event-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.technical-event-copy>strong,
.technical-event-copy>small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.technical-event-copy>small{
  color:#8eabb7;
}
.technical-event-copy p{
  margin:4px 0 0;
  color:#bad1da;
  font-size:11px;
  line-height:1.4;
  white-space:pre-wrap;
}
.technical-event-item>.record-delete-mini{
  position:static;
  align-self:center;
}
@media(max-width:900px){
  .technical-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .technical-columns{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .technical-hero-head,
  .technical-card-heading{
    align-items:flex-start;
  }
  .technical-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .technical-gauge{
    min-height:118px;
    padding:12px;
  }
  .technical-gauge strong{
    font-size:19px;
  }
  .technical-maintenance-item{
    grid-template-columns:29px minmax(0,1fr);
  }
  .technical-maintenance-actions{
    grid-column:2;
    justify-content:flex-end;
  }
  .technical-log-toolbar{
    grid-template-columns:1fr;
  }
}
@media(max-width:430px){
  .technical-overview-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .technical-snapshot-card,
  .technical-maintenance-card,
  .technical-integrations-card,
  .technical-log-card{
    padding:14px;
  }
  .technical-health-badge{
    max-width:120px;
    text-align:center;
  }
}

/* MijnSerenity Cloud 5.4.1 — alleen POI-gerelateerde internetfoto’s */
.poi-web-photo-relevance-note{
  margin:8px 0 0;
  color:#8faeba;
  line-height:1.4;
}
.poi-web-photo-relevance{
  position:absolute;
  top:7px;
  left:7px;
  max-width:calc(100% - 14px);
  overflow:hidden;
  padding:5px 7px;
  border:1px solid rgba(83,219,148,.28);
  border-radius:999px;
  background:rgba(22,112,70,.90);
  color:#d6f8e4;
  font-size:9px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.poi-web-photo-meta small:first-of-type{
  color:#8ee5b5;
}

/* MijnSerenity Cloud 5.4.2 — motoruren automatisch uit vaartijd */
.technical-auto-hours-note{
  margin-top:1px;
  color:#8ee5b5!important;
  font-size:9px!important;
}
.technical-engine-automation-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  margin:0 0 14px;
  padding:13px 15px;
  border:1px solid rgba(83,219,148,.17);
  background:
    linear-gradient(
      135deg,
      rgba(36,144,91,.13),
      rgba(111,207,238,.045)
    );
}
.technical-engine-automation-icon{
  display:flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:rgba(83,219,148,.13);
  font-size:21px;
}
.technical-engine-automation-card>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.technical-engine-automation-card b{
  color:#e8f9ef;
}
.technical-engine-automation-card small{
  color:#9fc1ca;
  line-height:1.4;
}
.technical-engine-automation-card>strong{
  max-width:230px;
  color:#8ee5b5;
  font-size:10px;
  text-align:right;
}
@media(max-width:620px){
  .technical-engine-automation-card{
    grid-template-columns:42px minmax(0,1fr);
  }
  .technical-engine-automation-card>strong{
    grid-column:2;
    max-width:none;
    text-align:left;
  }
}

/* MijnSerenity Cloud 5.5.0 — Home Assistant-koppeling */
.home-assistant-connect-card{
  margin-top:14px;
  padding:13px;
  border:1px solid rgba(65,184,255,.20);
  border-radius:15px;
  background:
    radial-gradient(circle at top right,rgba(65,184,255,.13),transparent 44%),
    rgba(255,255,255,.035);
}
.home-assistant-connect-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.home-assistant-connect-head>div:first-child{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}
.home-assistant-logo{
  display:flex;
  width:42px;
  height:42px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#18a4e0;
  color:#fff;
  font-size:13px;
  font-weight:950;
  letter-spacing:-.5px;
}
.home-assistant-connect-head>div:first-child>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.home-assistant-connect-head small{
  color:#92b3bf;
  line-height:1.35;
}
.home-assistant-connection-badge{
  flex-shrink:0;
  padding:6px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}
.home-assistant-connection-badge.online{
  border:1px solid rgba(83,219,148,.30);
  background:rgba(36,144,91,.20);
  color:#c8f5dc;
}
.home-assistant-connection-badge.configured{
  border:1px solid rgba(226,180,79,.28);
  background:rgba(143,100,21,.17);
  color:#f3dea7;
}
.home-assistant-connection-badge.offline{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.055);
  color:#a7c1ca;
}
.home-assistant-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:11px;
}
.home-assistant-status-grid>div{
  display:flex;
  min-width:0;
  padding:9px;
  flex-direction:column;
  gap:3px;
  border-radius:11px;
  background:rgba(255,255,255,.045);
}
.home-assistant-status-grid span{
  color:#87a8b5;
  font-size:9px;
}
.home-assistant-status-grid strong{
  overflow:hidden;
  color:#e9f8fc;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-assistant-connect-actions{
  margin-top:10px;
}
.home-assistant-setup-panel{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08);
}
.home-assistant-setup-step{
  display:flex;
  align-items:center;
  gap:9px;
  margin:9px 0;
}
.home-assistant-setup-step>span{
  display:flex;
  width:28px;
  height:28px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(65,184,255,.15);
  color:#7ad4ff;
  font-size:11px;
  font-weight:900;
}
.home-assistant-setup-step>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}
.home-assistant-setup-step small{
  color:#8eabb6;
}
.home-assistant-entity-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}
.home-assistant-entity-grid label{
  min-width:0;
  color:#a9c3cc;
  font-size:9px;
}
.home-assistant-entity-grid input{
  margin-top:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
}
.home-assistant-copy-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
}
.home-assistant-copy-row input,
.home-assistant-copy-row button{
  margin:0;
}
.home-assistant-copy-row input,
.home-assistant-yaml{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.home-assistant-yaml{
  min-height:430px;
  margin-top:5px;
  font-size:10px;
  line-height:1.45;
  white-space:pre;
}
.home-assistant-test-note{
  margin-top:11px;
  padding:10px 11px;
  border:1px solid rgba(65,184,255,.15);
  border-radius:12px;
  background:rgba(65,184,255,.065);
  color:#b9dbe5;
  font-size:10px;
  line-height:1.45;
}
.home-assistant-test-note code{
  color:#7ad4ff;
}
@media(max-width:620px){
  .home-assistant-connect-head{
    flex-direction:column;
  }
  .home-assistant-entity-grid{
    grid-template-columns:1fr;
  }
  .home-assistant-copy-row{
    grid-template-columns:1fr 1fr;
  }
  .home-assistant-copy-row input{
    grid-column:1/-1;
  }
  .home-assistant-yaml{
    min-height:360px;
  }
}

/* MijnSerenity Cloud 5.5.1 — robuuste Home Assistant-status */
#homeAssistantCheckButton:disabled{
  cursor:wait;
  opacity:.72;
}
#homeAssistantConnectionStatus.success{
  border:1px solid rgba(83,219,148,.22);
  background:rgba(36,144,91,.14);
  color:#c7f4da;
}
#homeAssistantConnectionStatus.error{
  border:1px solid rgba(232,83,97,.22);
  background:rgba(143,39,49,.16);
  color:#ffd0d5;
}

/* MijnSerenity Cloud 5.5.2 — camera radarbeugel */
.radar-camera-card{margin-bottom:14px;padding:17px;border:1px solid rgba(96,203,235,.18);background:radial-gradient(circle at top right,rgba(96,203,235,.13),transparent 44%),rgba(255,255,255,.035)}
.radar-camera-badge{flex-shrink:0;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900}.radar-camera-badge.ready{background:rgba(36,144,91,.18);color:#c7f4da;border:1px solid rgba(83,219,148,.25)}.radar-camera-badge.offline{background:rgba(255,255,255,.07);color:#abc0c9}
.radar-camera-viewport{position:relative;display:flex;min-height:260px;margin-top:13px;align-items:center;justify-content:center;overflow:hidden;border-radius:16px;background:#02090d;border:1px solid rgba(255,255,255,.08)}
.radar-camera-viewport img{display:block;width:100%;max-height:520px;object-fit:contain;background:#000}.radar-camera-placeholder{display:flex;padding:35px;flex-direction:column;align-items:center;gap:7px;text-align:center;color:#9db7c1}.radar-camera-placeholder>span{font-size:42px}.radar-camera-placeholder b{color:#e7f4f8}.radar-camera-placeholder small{max-width:470px;line-height:1.45}
.radar-camera-loading{position:absolute;inset:auto 12px 12px auto;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.75);color:#fff;font-size:10px}.radar-camera-meta{display:flex;justify-content:space-between;gap:9px;margin-top:7px;color:#88a8b4;font-size:9px}.radar-camera-actions{margin-top:10px}.radar-camera-settings{margin-top:13px;padding:13px;border:1px solid rgba(96,203,235,.14);border-radius:14px;background:rgba(96,203,235,.045)}.radar-camera-ha-box{margin:13px 0;padding:12px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.radar-camera-yaml{min-height:280px}.warning-text{color:#f1d79d!important}
.radar-camera-fullscreen{position:fixed;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);backdrop-filter:blur(6px)}.radar-camera-fullscreen img{max-width:96vw;max-height:90vh;object-fit:contain}.radar-camera-fullscreen-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;width:44px;height:44px;margin:0;padding:0;border-radius:999px;background:rgba(255,255,255,.13);font-size:28px}.radar-camera-fullscreen-caption{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:7px 11px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:11px}
@media(max-width:620px){.radar-camera-viewport{min-height:210px}.radar-camera-meta{flex-direction:column}.radar-camera-actions button{width:100%}}

/* MijnSerenity Cloud 5.6.0 — live camera radarbeugel */
.live-radar-camera-card{
  margin-top:14px;
  padding:16px;
  border:1px solid rgba(74,205,255,.20);
  background:
    radial-gradient(
      circle at top right,
      rgba(74,205,255,.15),
      transparent 44%
    ),
    rgba(255,255,255,.035);
}
.live-radar-camera-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:13px;
  margin-bottom:11px;
}
.live-radar-camera-head h2{
  margin:4px 0 5px;
}
.live-radar-camera-viewport{
  position:relative;
  overflow:hidden;
  min-height:230px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:#020a10;
}
.live-radar-camera-viewport img{
  display:block;
  width:100%;
  min-height:230px;
  max-height:62vh;
  object-fit:contain;
  background:#020a10;
}
.radar-camera-badge.live{
  border:1px solid rgba(83,219,148,.34);
  background:rgba(36,144,91,.22);
  color:#cbf6de;
  box-shadow:0 0 0 4px rgba(83,219,148,.08);
}
.radar-camera-badge.snapshot{
  border:1px solid rgba(226,180,79,.25);
  background:rgba(143,100,21,.16);
  color:#f3dea7;
}
.radar-camera-live-box{
  border-color:rgba(74,205,255,.17);
  background:rgba(74,205,255,.045);
}
.radar-camera-snapshot-fallback{
  margin:12px 0;
  padding:11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}
.radar-camera-snapshot-fallback summary{
  cursor:pointer;
  color:#b8d6df;
  font-size:11px;
  font-weight:850;
}
.radar-camera-snapshot-fallback[open] summary{
  margin-bottom:10px;
}
#radarCameraImage[data-streaming="true"],
#liveRadarCameraImage[data-streaming="true"]{
  display:block;
}
@media(max-width:620px){
  .live-radar-camera-head{
    flex-direction:column;
  }
  .live-radar-camera-viewport,
  .live-radar-camera-viewport img{
    min-height:190px;
  }
}

/* MijnSerenity Cloud 5.6.1 — universele HA-camera stream */
.radar-camera-badge.live::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:5px;
  border-radius:999px;
  background:currentColor;
  animation:ms-camera-pulse 1.2s infinite;
}
@keyframes ms-camera-pulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}

/* MijnSerenity Cloud 5.6.2 — betrouwbare camera-frameweergave */
#radarCameraImage,
#liveRadarCameraImage,
#radarCameraFullscreenImage{
  image-rendering:auto;
}
.radar-camera-badge.live{
  white-space:nowrap;
}


/* MijnSerenity Cloud 5.6.3 — zwevende autohide navigatie */
:root{
  --nav-height:92px;
}
body{
  padding-bottom:
    calc(var(--nav-height) + env(safe-area-inset-bottom));
}
.bottom-nav{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:1100;
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:stretch;
  justify-content:flex-start;
  gap:5px;
  width:100%;
  height:
    calc(var(--nav-height) + env(safe-area-inset-bottom));
  min-height:
    calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding:
    8px 10px
    max(7px,env(safe-area-inset-bottom));
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  scroll-padding-inline:42%;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  background:rgba(2,11,19,.96);
  border-top:1px solid rgba(255,255,255,.11);
  box-shadow:0 -12px 32px rgba(0,0,0,.30);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transform:translate3d(0,0,0);
  opacity:1;
  transition:
    transform .34s cubic-bezier(.22,.86,.28,1),
    opacity .22s ease;
  will-change:transform,opacity;
}
.bottom-nav::-webkit-scrollbar{
  display:none;
}
.bottom-nav.bottom-nav-auto-hidden{
  transform:
    translate3d(
      0,
      calc(100% + env(safe-area-inset-bottom) + 12px),
      0
    );
  opacity:0;
  pointer-events:none;
}
.bottom-nav-item{
  flex:0 0 78px !important;
  width:78px;
  min-width:78px !important;
  max-width:78px;
  min-height:68px;
  margin:0;
  padding:6px 4px;
  border-radius:16px;
  scroll-snap-align:center;
  scroll-snap-stop:normal;
  background:transparent;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-weight:780;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item span{
  font-size:29px !important;
  line-height:1;
  transform-origin:center;
}
.bottom-nav-item small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px !important;
  line-height:1.15;
  white-space:nowrap;
}
.bottom-nav-item.active{
  color:#fff;
  background:rgba(69,200,255,.15);
  box-shadow:
    inset 0 0 0 1px rgba(109,219,255,.09);
}
.bottom-nav-item:active{
  transform:scale(.94);
}
@media(prefers-reduced-motion:reduce){
  .bottom-nav{
    transition:none;
  }
  .bottom-nav-item{
    scroll-behavior:auto;
  }
}


/* MijnSerenity Cloud 5.6.4 — stabiele horizontale navigatie op iOS */
.bottom-nav{
  contain:layout paint style;
  scroll-behavior:smooth;
}
.bottom-nav-item{
  user-select:none;
  -webkit-user-select:none;
}
@media(hover:none) and (pointer:coarse){
  .bottom-nav{
    scroll-snap-type:x mandatory;
  }
}

/* =========================================================
   MijnSerenity Cloud 6.0.0 — fullscreen responsive layout
   ========================================================= */
html{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  background:var(--dark);
}
body{
  width:100%;
  min-width:100%;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
}
main{
  width:min(calc(100% - 32px),1500px);
  max-width:1500px;
  min-height:100vh;
  min-height:100dvh;
  margin-inline:auto !important;
  padding-left:0;
  padding-right:0;
}
#authView,
#approvalView,
#appView,
#appView > section{
  width:100%;
  min-width:0;
}
.dashboard-actions{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.card,
.dashboard-tile,
.stat{
  min-width:0;
}
@media(min-width:1600px){
  main{
    width:min(calc(100% - 64px),1500px);
  }
}
@media(min-width:900px) and (max-width:1199px){
  main{
    width:calc(100% - 40px);
  }
  .dashboard-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(min-width:600px) and (max-width:899px){
  main{
    width:calc(100% - 28px);
  }
  .dashboard-actions,
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:599px){
  main{
    width:calc(100% - 20px);
  }
  .dashboard-actions,
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@supports(-webkit-touch-callout:none){
  html,
  body,
  main{
    min-height:-webkit-fill-available;
  }
}


/* =========================================================
   MijnSerenity Cloud 6.1.1 — gecentreerde navigatie
   ========================================================= */
:root{
  --nav-height:96px;
}
.bottom-nav-item{
  flex:0 0 86px !important;
  width:86px;
  min-width:86px !important;
  max-width:86px;
  min-height:72px;
  padding:7px 5px;
}
.bottom-nav-item span{
  font-size:27px !important;
}
.bottom-nav-item small{
  font-size:11px !important;
}
@media (min-width:820px){
  .bottom-nav{
    justify-content:center !important;
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
}
@media (max-width:819px){
  .bottom-nav{
    justify-content:flex-start !important;
  }
}


/* =========================================================
   MijnSerenity Cloud 6.2.1 — Captain Cockpit Live Varen 2.0
   ========================================================= */
.live-cockpit-card{
  overflow:hidden;
  margin-top:14px;
  border:1px solid rgba(75,211,247,.30);
  background:
    radial-gradient(circle at 18% 8%,rgba(47,184,225,.18),transparent 34%),
    linear-gradient(145deg,rgba(8,42,59,.98),rgba(4,23,35,.99));
}
.live-cockpit-head,
.live-technical-strip-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.live-cockpit-head h2,
.live-technical-strip-head h2{
  margin:4px 0 0;
}
.live-board-refresh{
  width:auto;
  min-width:112px;
  white-space:nowrap;
}
.live-cockpit-main{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(210px,.72fr) minmax(210px,.72fr);
  gap:14px;
}
.live-speed-dial,
.live-heading-dial,
.live-rpm-dial{
  position:relative;
  display:flex;
  min-height:245px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(116,220,249,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at center,rgba(48,177,215,.14),transparent 56%),
    rgba(255,255,255,.035);
  box-shadow:inset 0 0 40px rgba(0,0,0,.18);
}
.live-speed-dial>span,
.live-heading-dial>span,
.live-rpm-dial>span{
  color:#9ebbc6;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.live-speed-dial strong{
  margin:8px 0 0;
  color:#fff;
  font-size:clamp(72px,11vw,132px);
  font-weight:950;
  line-height:.88;
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 28px rgba(80,214,250,.22);
}
.live-speed-dial small{
  margin-top:10px;
  color:#9ebbc6;
  font-size:15px;
  font-weight:750;
}
.live-signal-dot{
  position:absolute;
  top:16px;
  right:16px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#70848d;
  box-shadow:0 0 0 6px rgba(112,132,141,.10);
}
.live-signal-dot.active{
  background:#f1b84f;
  box-shadow:0 0 0 6px rgba(241,184,79,.10);
}
.live-signal-dot.moving{
  background:#4fd791;
  box-shadow:0 0 0 6px rgba(79,215,145,.10);
  animation:livePulse 1.4s infinite;
}
.live-compass{
  margin:12px 0 7px;
}
.live-compass-ring{
  position:relative;
  width:126px;
  height:126px;
  border:2px solid rgba(127,222,250,.30);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.055) 0 42%,transparent 43%),
    conic-gradient(from 0deg,rgba(96,207,239,.18),transparent 12%,rgba(96,207,239,.10) 25%,transparent 37%,rgba(96,207,239,.12) 50%,transparent 62%,rgba(96,207,239,.10) 75%,transparent 87%,rgba(96,207,239,.18));
  box-shadow:inset 0 0 24px rgba(0,0,0,.30);
}
.live-compass-ring b{
  position:absolute;
  color:#9cbac5;
  font-size:11px;
}
.live-compass-ring .north{top:7px;left:50%;transform:translateX(-50%);color:#ff8994}
.live-compass-ring .east{right:9px;top:50%;transform:translateY(-50%)}
.live-compass-ring .south{bottom:7px;left:50%;transform:translateX(-50%)}
.live-compass-ring .west{left:9px;top:50%;transform:translateY(-50%)}
#liveHeadingNeedle{
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:48px;
  border-radius:999px;
  background:linear-gradient(to bottom,#ff8792 0 58%,#e8faff 59% 100%);
  transform:translate(-50%,-82%) rotate(0deg);
  transform-origin:50% 82%;
  box-shadow:0 0 15px rgba(255,112,124,.35);
  transition:transform .45s ease;
}
#liveHeadingNeedle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  width:12px;
  height:12px;
  border:3px solid #dff8ff;
  border-radius:50%;
  background:#08283a;
  transform:translateX(-50%);
}
.live-rpm-gauge{
  margin:12px 0 6px;
}
.live-rpm-ring{
  position:relative;
  width:126px;
  height:126px;
  border:2px solid rgba(127,222,250,.30);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.05) 0 43%,transparent 44%),
    conic-gradient(from 210deg,#50d89a 0 34%,#f0c55e 34% 55%,#ef7e7e 55% 67%,rgba(255,255,255,.08) 67% 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.32);
}
.live-rpm-ring::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:#082638;
}
.live-rpm-ring b,
.live-rpm-ring em{
  position:absolute;
  z-index:2;
  color:#9dbbc6;
  font-size:9px;
  font-style:normal;
}
.live-rpm-ring .rpm-zero{left:17px;bottom:24px}
.live-rpm-ring .rpm-mid{top:14px;left:50%;transform:translateX(-50%)}
.live-rpm-ring .rpm-max{right:11px;bottom:24px}
.live-rpm-ring em{left:50%;bottom:28px;transform:translateX(-50%);font-weight:900;letter-spacing:.12em}
#liveRpmNeedle{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  width:4px;
  height:42px;
  border-radius:999px;
  background:linear-gradient(to bottom,#ffcc67 0 65%,#eafcff 66% 100%);
  transform:translate(-50%,-90%) rotate(-120deg);
  transform-origin:50% 90%;
  box-shadow:0 0 12px rgba(255,204,103,.28);
  transition:transform .35s ease;
}
#liveRpmNeedle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:12px;
  height:12px;
  border:3px solid #eafcff;
  border-radius:50%;
  background:#082638;
  transform:translateX(-50%);
}
.live-rpm-dial>strong{
  color:#fff;
  font-size:32px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.live-rpm-dial>small{
  margin-top:7px;
  color:#98b5c0;
  font-size:11px;
}
.live-heading-dial>strong{
  color:#fff;
  font-size:32px;
  line-height:1;
}
.live-heading-dial>small{
  margin-top:7px;
  color:#98b5c0;
  font-size:11px;
  text-align:center;
}
.live-cockpit-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.live-cockpit-stats>div{
  min-width:0;
  padding:12px 9px;
  border:1px solid rgba(122,215,242,.13);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  text-align:center;
}
.live-cockpit-stats span,
.live-cockpit-stats small{
  display:block;
  overflow:hidden;
  color:#90acb7;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-cockpit-stats strong{
  display:block;
  margin:4px 0 2px;
  overflow:hidden;
  color:#eefbff;
  font-size:clamp(17px,2.2vw,25px);
  font-variant-numeric:tabular-nums;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-navigation-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}
.live-navigation-grid>.card{
  height:100%;
  margin:0;
}
.live-navigation-grid .live-radar-camera-card{
  display:flex;
  flex-direction:column;
}
.live-navigation-grid .live-radar-camera-viewport{
  flex:1 1 auto;
  min-height:330px;
}
.live-navigation-grid .live-radar-camera-viewport img{
  min-height:330px;
  max-height:54vh;
}
.live-navigation-grid #liveMapCanvas{
  height:100%;
  min-height:430px;
}
.live-technical-strip-card{
  margin-top:14px;
  border:1px solid rgba(83,219,148,.17);
  background:linear-gradient(145deg,rgba(21,59,57,.38),rgba(255,255,255,.03));
}
.live-technical-updated{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#9fb9c3;
  font-size:10px;
  font-weight:800;
}
.live-technical-updated.live{
  border:1px solid rgba(83,219,148,.20);
  background:rgba(36,144,91,.13);
  color:#c5f2d8;
}
.live-technical-strip{
  display:grid;
  grid-template-columns:repeat(9,minmax(100px,1fr));
  gap:8px;
  overflow-x:auto;
  padding-bottom:3px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.live-technical-strip::-webkit-scrollbar{display:none}
.live-technical-strip>div{
  min-width:100px;
  padding:11px 9px;
  border:1px solid rgba(109,216,172,.12);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  text-align:center;
}
.live-technical-strip span{
  display:block;
  color:#90ada9;
  font-size:9px;
  white-space:nowrap;
}
.live-technical-strip strong{
  display:block;
  margin-top:5px;
  color:#e8fff4;
  font-size:14px;
  white-space:nowrap;
}
.live-detail-metrics{
  display:grid;
  grid-template-columns:minmax(220px,.48fr) minmax(360px,1.52fr);
  gap:10px;
  margin:14px 0 12px;
}
.live-auto-log-details{
  margin-top:13px;
  border:1px solid rgba(83,219,148,.14);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.live-auto-log-details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  cursor:pointer;
  color:#dff8e9;
  font-weight:850;
  list-style:none;
}
.live-auto-log-details summary::-webkit-details-marker{display:none}
.live-auto-log-details summary::after{
  content:"⌄";
  color:#69dca1;
  font-size:20px;
  transition:transform .25s ease;
}
.live-auto-log-details[open] summary::after{transform:rotate(180deg)}
.live-auto-log-details summary small{
  margin-left:auto;
  color:#83a9a0;
  font-size:10px;
  font-weight:700;
}
.live-auto-log-details .live-auto-log-settings{
  margin:0;
  padding:0 12px 12px;
}
.live-helm-card{
  display:grid;
  grid-template-columns:minmax(160px,.42fr) minmax(250px,.58fr);
  align-items:center;
  gap:14px;
  overflow:hidden;
  padding:14px;
  margin:0;
  border-color:rgba(75,211,247,.20);
  background:linear-gradient(145deg,rgba(14,63,82,.72),rgba(5,28,41,.92));
}
.live-helm-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
}
.live-helm-copy span{
  color:#91b4c1;
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.live-helm-copy strong{
  margin:7px 0 5px;
  color:#fff;
  font-size:clamp(24px,3.8vw,42px);
  line-height:1;
}
.live-helm-copy small{
  color:#a9c6d0;
  font-size:11px;
  line-height:1.4;
}
.live-helm-svg{
  display:block;
  width:100%;
  max-height:220px;
  border-radius:18px;
}
#liveHelmWheel,
#liveHelmRudderIndicator{
  transition:transform .35s ease;
}

@media(max-width:1020px){
  .live-navigation-grid{
    grid-template-columns:1fr;
  }
  .live-navigation-grid #liveMapCanvas,
  .live-navigation-grid .live-radar-camera-viewport,
  .live-navigation-grid .live-radar-camera-viewport img{
    min-height:360px;
  }
}
@media(max-width:760px){
  .live-cockpit-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .live-speed-dial{
    grid-column:1/-1;
  }
  .live-speed-dial{
    min-height:220px;
  }
  .live-heading-dial,
  .live-rpm-dial{
    min-height:205px;
  }
  .live-cockpit-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .live-cockpit-stats>div:nth-child(5){
    grid-column:1/-1;
  }
  .live-detail-metrics{
    grid-template-columns:1fr;
  }
  .live-helm-card{
    grid-template-columns:1fr;
  }
  .live-helm-copy{
    align-items:center;
    text-align:center;
  }
  .live-technical-strip-head,
  .live-cockpit-head{
    align-items:stretch;
    flex-direction:column;
  }
  .live-board-refresh{
    width:100%;
  }
}
@media(max-width:520px){
  .live-cockpit-main{
    grid-template-columns:1fr;
  }
  .live-speed-dial{
    grid-column:auto;
  }
  .live-speed-dial strong{
    font-size:82px;
  }
  .live-auto-log-details summary{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .live-auto-log-details summary small{
    width:100%;
    margin:0;
  }
  .live-navigation-grid #liveMapCanvas,
  .live-navigation-grid .live-radar-camera-viewport,
  .live-navigation-grid .live-radar-camera-viewport img{
    min-height:280px;
  }
}

/* =========================================================
   MijnSerenity Cloud 7.4.8 — Finance Command Center + cockpit
   ========================================================= */

/* Motortoerental: groen t/m 1800, geel 1801–2300, rood >2300 */
.live-rpm-ring{
  background:
    radial-gradient(circle,rgba(255,255,255,.05) 0 43%,transparent 44%),
    conic-gradient(from 210deg,#50d89a 0 36%,#f0c55e 36% 46%,#ef6f79 46% 67%,rgba(255,255,255,.08) 67% 100%);
}
.live-rpm-dial{
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.live-rpm-dial.rpm-green{
  border-color:rgba(80,216,154,.42);
  box-shadow:inset 0 0 40px rgba(0,0,0,.18),0 0 24px rgba(80,216,154,.08);
}
.live-rpm-dial.rpm-yellow{
  border-color:rgba(240,197,94,.50);
  box-shadow:inset 0 0 40px rgba(0,0,0,.18),0 0 26px rgba(240,197,94,.10);
}
.live-rpm-dial.rpm-red{
  border-color:rgba(239,111,121,.58);
  box-shadow:inset 0 0 40px rgba(0,0,0,.18),0 0 30px rgba(239,111,121,.13);
}
.live-rpm-dial.rpm-green>strong{color:#7ce7b4}
.live-rpm-dial.rpm-yellow>strong{color:#ffd97a}
.live-rpm-dial.rpm-red>strong{color:#ff929b}
.live-rpm-dial.rpm-green #liveRpmNeedle{background:linear-gradient(to bottom,#5be0a0 0 65%,#eafcff 66% 100%)}
.live-rpm-dial.rpm-yellow #liveRpmNeedle{background:linear-gradient(to bottom,#ffd36c 0 65%,#eafcff 66% 100%)}
.live-rpm-dial.rpm-red #liveRpmNeedle{background:linear-gradient(to bottom,#ff7f89 0 65%,#eafcff 66% 100%)}

/* Schipper eerst, roerstand duidelijk onder de tekening */
.live-helm-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.live-helm-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#dff8ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.live-helm-svg{
  align-self:center;
  max-width:560px;
  max-height:240px;
}
.live-helm-copy{
  align-items:center;
  padding:10px 12px 2px;
  border-top:1px solid rgba(111,207,238,.14);
  text-align:center;
}
.live-helm-copy strong{
  margin:6px 0 4px;
}

/* Financieel Command Center */
.finance-command-hero{
  overflow:hidden;
  border:1px solid rgba(75,211,247,.24);
  background:
    radial-gradient(circle at 90% 0,rgba(77,207,144,.14),transparent 36%),
    radial-gradient(circle at 8% 0,rgba(75,211,247,.16),transparent 34%),
    linear-gradient(145deg,rgba(8,43,61,.98),rgba(5,24,37,.99));
}
.finance-hero-head,
.finance-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.finance-hero-head h2,
.finance-card-heading h2{
  margin:4px 0 0;
}
.finance-hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.finance-hero-actions button{
  width:auto;
  min-width:94px;
  margin:0;
}
.finance-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.finance-kpi{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  min-width:0;
  min-height:104px;
  padding:13px;
  gap:10px;
  border:1px solid rgba(120,215,243,.14);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
}
.finance-kpi-total{
  border-color:rgba(77,207,144,.28);
  background:linear-gradient(145deg,rgba(77,207,144,.12),rgba(255,255,255,.025));
}
.finance-kpi-icon{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  font-size:24px;
}
.finance-kpi>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.finance-kpi>div>span{
  overflow:hidden;
  color:#91afbb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.finance-kpi strong{
  overflow:hidden;
  color:#f1fbff;
  font-size:clamp(19px,2.4vw,28px);
  font-variant-numeric:tabular-nums;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.finance-kpi small{
  overflow:hidden;
  color:#7898a5;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.finance-filter-card{
  border-color:rgba(111,207,238,.15);
}
.finance-filter-actions{
  margin-top:10px;
}
.finance-filter-actions button{
  width:auto;
}
.finance-insight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.finance-insight-card{
  margin:0;
}
.finance-card-heading>span:last-child{
  font-size:27px;
}
.finance-category-row,
.finance-month-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:72px;
}
.finance-row-icon,
.finance-detail-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border:1px solid rgba(111,207,238,.13);
  border-radius:13px;
  background:rgba(111,207,238,.065);
  font-size:21px;
}
.finance-row-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.finance-row-copy b,
.finance-row-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.finance-row-copy small{
  color:#8faab5;
  font-size:9px;
}
.finance-bar{
  margin-top:4px;
}
.finance-trend-card,
.finance-smart-card,
.finance-details-card{
  border-color:rgba(111,207,238,.13);
}
.finance-trend-total{
  padding:7px 10px;
  border:1px solid rgba(77,207,144,.18);
  border-radius:999px;
  background:rgba(77,207,144,.09);
  color:#bff1d3;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.finance-trend-chart{
  display:grid;
  grid-template-columns:repeat(6,minmax(54px,1fr));
  align-items:end;
  gap:8px;
  min-height:220px;
  margin-top:16px;
  overflow-x:auto;
  padding:8px 2px 2px;
  scrollbar-width:none;
}
.finance-trend-chart::-webkit-scrollbar{display:none}
.finance-trend-column{
  display:grid;
  min-width:54px;
  height:190px;
  margin:0;
  padding:0;
  grid-template-rows:28px 1fr 22px;
  gap:5px;
  border:0;
  background:transparent;
  color:#fff;
}
.finance-trend-value{
  overflow:hidden;
  color:#a6c2cc;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.finance-trend-bar-wrap{
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border:1px solid rgba(111,207,238,.09);
  border-radius:12px 12px 7px 7px;
  background:linear-gradient(to top,rgba(111,207,238,.045),rgba(255,255,255,.015));
}
.finance-trend-bar-wrap i{
  display:block;
  width:100%;
  min-height:2px;
  border-radius:10px 10px 5px 5px;
  background:linear-gradient(to top,#238fbd,#52d1ef);
  box-shadow:0 0 18px rgba(82,209,239,.16);
  transition:height .45s ease;
}
.finance-trend-column b{
  color:#91acb7;
  font-size:10px;
  text-transform:capitalize;
}
.finance-smart-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.finance-smart-item{
  display:flex;
  min-width:0;
  min-height:112px;
  padding:12px;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(111,207,238,.11);
  border-radius:15px;
  background:rgba(255,255,255,.03);
}
.finance-smart-item>span{
  font-size:24px;
}
.finance-smart-item>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.finance-smart-item b{
  color:#eefaff;
  font-size:12px;
}
.finance-smart-item small{
  color:#89a5b0;
  font-size:9px;
  line-height:1.45;
}
.finance-detail-row{
  grid-template-columns:42px minmax(0,1fr) auto 14px;
  gap:10px;
}
.finance-empty-state{
  display:flex;
  min-height:130px;
  padding:22px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#9ab5bf;
  text-align:center;
}
.finance-empty-state>span{font-size:30px}
.finance-empty-state>b{color:#e8f8fc}
.finance-empty-state>small{max-width:320px;line-height:1.5}

@media(max-width:1050px){
  .finance-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finance-smart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .finance-hero-head{flex-direction:column}
  .finance-hero-actions{width:100%;justify-content:stretch}
  .finance-hero-actions button{flex:1 1 120px}
  .finance-insight-grid{grid-template-columns:1fr}
  .finance-smart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .finance-kpi-grid{grid-template-columns:1fr}
  .finance-kpi{min-height:88px}
  .finance-smart-grid{grid-template-columns:1fr}
  .finance-smart-item{min-height:92px}
  .finance-detail-row{grid-template-columns:38px minmax(0,1fr) auto 12px}
  .finance-row-icon,.finance-detail-icon{width:36px;height:36px;font-size:19px}
}


/* MijnSerenity 7.4.6 — Waterkaarten Bridge en gedeelde live vaarkaart */
.live-cloud-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(69,200,255,.16),rgba(75,211,143,.10));border:1px solid rgba(255,255,255,.11)}
.live-cloud-strip>div{min-width:0}.live-cloud-strip strong{display:block;margin-top:3px;font-size:16px}.live-cloud-strip small{display:block;margin-top:3px;color:var(--muted);line-height:1.35}
.live-cloud-badge{flex:0 0 auto;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.15)}
.live-cloud-badge.checking{color:#d7e9f5;background:rgba(255,255,255,.07)}.live-cloud-badge.ready{color:#bcecff;background:rgba(69,200,255,.14)}
.live-cloud-badge.live,.live-cloud-badge.viewing{color:#c9ffdc;background:rgba(75,211,143,.16);border-color:rgba(75,211,143,.35)}.live-cloud-badge.live{animation:live-cloud-pulse 1.4s infinite}
.live-cloud-badge.offline,.live-cloud-badge.error{color:#ffd0d0;background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.30)}
.planner-waterkaarten-bridge{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:12px 14px;border-radius:15px;background:rgba(69,200,255,.09);border:1px solid rgba(69,200,255,.18)}
.planner-waterkaarten-bridge>span{font-size:24px}.planner-waterkaarten-bridge b,.planner-waterkaarten-bridge small{display:block}.planner-waterkaarten-bridge small{margin-top:3px;color:var(--muted);line-height:1.35}
@keyframes live-cloud-pulse{0%,100%{box-shadow:0 0 0 0 rgba(75,211,143,0)}50%{box-shadow:0 0 0 7px rgba(75,211,143,.08)}}
@media(max-width:700px){.live-cloud-strip{align-items:flex-start;flex-direction:column}}


/* MijnSerenity 7.4.6 — waterwegrouter, nautische laag en route-POI's */
.planner-fallback-settings{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.planner-fallback-settings summary{
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}
.planner-fallback-settings[open] summary{
  margin-bottom:10px;
}
.planner-route-info{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:12px 0;
  padding:12px 14px;
  border-radius:15px;
  background:rgba(69,200,255,.09);
  border:1px solid rgba(69,200,255,.20);
}
.planner-route-info > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.planner-route-info b{
  color:#d9f5ff;
}
.planner-route-info span,
.planner-route-info small{
  color:var(--muted);
}
.planner-route-pois{
  margin:14px 0;
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
}
.planner-route-poi-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.planner-route-poi-heading span{
  color:var(--muted);
  font-size:12px;
  text-align:right;
}
.planner-route-poi-list{
  display:grid;
  gap:8px;
  max-height:390px;
  overflow:auto;
  padding-right:3px;
}
.planner-route-poi-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.planner-route-poi-item strong,
.planner-route-poi-item small{
  display:block;
}
.planner-route-poi-item small{
  margin-top:2px;
  color:var(--muted);
  line-height:1.3;
}
.planner-route-poi-item button{
  padding:8px 10px;
  font-size:12px;
}
.planner-route-poi-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:11px;
  font-size:19px;
  background:rgba(69,200,255,.12);
}
.planner-route-poi-marker{
  background:transparent;
  border:0;
}
.planner-route-poi-marker span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  font-size:17px;
  background:#0b2637;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.planner-summary-badge.warning{
  color:#ffe2a8;
  background:rgba(255,183,77,.13);
  border-color:rgba(255,183,77,.30);
}
@media(max-width:700px){
  .planner-route-info > div,
  .planner-route-poi-heading{
    flex-direction:column;
  }
  .planner-route-poi-heading span{
    text-align:left;
  }
  .planner-route-poi-item{
    grid-template-columns:auto minmax(0,1fr);
  }
  .planner-route-poi-item button{
    grid-column:2;
    justify-self:start;
  }
}


/* MijnSerenity 7.4.6 — iPad/Safari vaste onderbalk */
html,
body{
  transform:none !important;
  perspective:none !important;
  filter:none !important;
}

body > .bottom-nav,
.bottom-nav.bottom-nav-viewport-fixed{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;

  width:100vw !important;
  max-width:100vw !important;
  margin:0 !important;

  contain:none !important;
  transform:none !important;
  translate:none !important;

  z-index:2147483000 !important;
  isolation:isolate;

  box-sizing:border-box;
}

body > .bottom-nav.bottom-nav-auto-hidden,
.bottom-nav.bottom-nav-viewport-fixed.bottom-nav-auto-hidden{
  transform:
    translate3d(
      0,
      calc(100% + env(safe-area-inset-bottom) + 14px),
      0
    ) !important;
  opacity:0;
  pointer-events:none;
}

body > .bottom-nav:not(.bottom-nav-auto-hidden),
.bottom-nav.bottom-nav-viewport-fixed:not(.bottom-nav-auto-hidden){
  transform:none !important;
  opacity:1;
}

/* Voorkom dat de paginabreedte door 100vw op iPad verspringt. */
@supports(width:100dvw){
  body > .bottom-nav,
  .bottom-nav.bottom-nav-viewport-fixed{
    width:100dvw !important;
    max-width:100dvw !important;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Next Level Live Cockpit
   ========================================================= */

.ms660-cockpit-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.ms660-cockpit-actions button{
  width:auto;
  white-space:nowrap;
}

.ms660-command-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(86,213,247,.24);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(67,200,239,.17),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(13,49,67,.98),
      rgba(6,27,40,.98)
    );
}

.ms660-command-card::after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:190px;
  height:190px;
  border-radius:50%;
  background:rgba(64,205,244,.06);
  pointer-events:none;
}

.ms660-command-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.ms660-command-head h2{
  margin-bottom:2px;
}

.ms660-role-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#dff8ff;
  background:rgba(69,200,255,.13);
  border:1px solid rgba(69,200,255,.24);
  font-size:12px;
  font-weight:900;
}

.ms660-role-badge.controller{
  color:#d9ffea;
  background:rgba(75,211,143,.14);
  border-color:rgba(75,211,143,.28);
}

.ms660-role-badge.viewer{
  color:#ffeab8;
  background:rgba(255,190,75,.14);
  border-color:rgba(255,190,75,.28);
}

.ms660-command-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:9px;
}

.ms660-command-metric{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:100px;
  padding:12px;
  border-radius:15px;
  background:rgba(255,255,255,.052);
  border:1px solid rgba(135,220,247,.11);
}

.ms660-command-metric span,
.ms660-command-metric strong,
.ms660-command-metric small{
  display:block;
}

.ms660-command-metric span{
  color:#9ebdca;
  font-size:11px;
  font-weight:750;
}

.ms660-command-metric strong{
  overflow:hidden;
  margin:7px 0 5px;
  color:#f2fcff;
  font-size:20px;
  line-height:1.06;
  text-overflow:ellipsis;
}

.ms660-command-metric small{
  color:#91aeba;
  font-size:11px;
  line-height:1.3;
}

.ms660-alert-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:11px;
  margin-top:12px;
  padding:11px 13px;
  border-radius:15px;
  border:1px solid rgba(76,211,143,.22);
  background:rgba(76,211,143,.09);
}

.ms660-alert-panel > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:13px;
  color:#d8ffea;
  background:rgba(76,211,143,.16);
  font-size:24px;
  font-weight:950;
}

.ms660-alert-panel strong,
.ms660-alert-panel small{
  display:block;
}

.ms660-alert-panel small{
  margin-top:3px;
  color:#afd0bc;
  line-height:1.35;
}

.ms660-alert-panel.warning{
  border-color:rgba(255,190,75,.30);
  background:rgba(255,190,75,.10);
}

.ms660-alert-panel.warning > span{
  color:#fff0c8;
  background:rgba(255,190,75,.17);
}

.ms660-alert-panel.warning small{
  color:#dbc9a0;
}

.ms660-alert-panel.critical{
  border-color:rgba(255,93,93,.42);
  background:
    linear-gradient(
      135deg,
      rgba(255,74,74,.18),
      rgba(130,28,28,.16)
    );
  animation:ms660-alert-pulse 1.35s infinite;
}

.ms660-alert-panel.critical > span{
  color:#fff;
  background:rgba(255,79,79,.28);
}

.ms660-alert-panel.critical small{
  color:#ffd0d0;
}

.ms660-quick-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.ms660-quick-actions button{
  flex:1 1 150px;
}

@keyframes ms660-alert-pulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(255,81,81,0);
  }
  50%{
    box-shadow:
      0 0 0 7px rgba(255,81,81,.07);
  }
}

/* Focusmodus: alleen wat tijdens het varen telt. */
body.ms660-cockpit-focus{
  overflow-x:hidden;
  background:#02080d;
}

body.ms660-cockpit-focus main{
  width:100% !important;
  max-width:none !important;
  padding:0 10px
    calc(
      var(--nav-height) +
      env(safe-area-inset-bottom) +
      8px
    );
}

body.ms660-cockpit-focus #live{
  width:100%;
  max-width:1900px;
  margin:0 auto;
}

body.ms660-cockpit-focus #live > 
.live-auto-log-card,
body.ms660-cockpit-focus #live >
.live-detail-metrics,
body.ms660-cockpit-focus #live >
.live-instruments-card,
body.ms660-cockpit-focus #live >
.live-save-card{
  display:none !important;
}

body.ms660-cockpit-focus .live-hero{
  margin-top:6px;
  padding:11px 13px;
}

body.ms660-cockpit-focus
.live-hero .live-heading p,
body.ms660-cockpit-focus
.live-hero .live-cloud-strip small{
  display:none;
}

body.ms660-cockpit-focus
.live-cockpit-card,
body.ms660-cockpit-focus
.ms660-command-card,
body.ms660-cockpit-focus
.live-map-card,
body.ms660-cockpit-focus
.live-radar-camera-card,
body.ms660-cockpit-focus
.live-technical-strip-card{
  margin-block:9px;
}

body.ms660-cockpit-focus
.live-cockpit-main{
  min-height:250px;
}

body.ms660-cockpit-focus
.live-speed-dial strong{
  font-size:clamp(70px,9vw,135px);
}

body.ms660-cockpit-focus
.live-navigation-grid{
  min-height:48vh;
}

body.ms660-cockpit-focus
#liveMapCanvas,
body.ms660-cockpit-focus
.live-radar-camera-viewport{
  min-height:42vh;
}

/* Nachtmodus met minder verblinding. */
body.ms660-night-mode{
  background:#010407;
}

body.ms660-night-mode #live{
  filter:
    brightness(.72)
    saturate(.72);
}

body.ms660-night-mode
.live-recording-badge.active,
body.ms660-night-mode
.live-cloud-badge.live,
body.ms660-night-mode
.ms660-role-badge.controller{
  color:#ffb3a7;
  background:rgba(155,37,25,.22);
  border-color:rgba(255,111,92,.26);
}

body.ms660-night-mode
.live-map-card,
body.ms660-night-mode
.live-radar-camera-card{
  filter:brightness(.78);
}

@media(max-width:1100px){
  .ms660-command-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .live-cockpit-head,
  .ms660-command-head{
    flex-direction:column;
  }

  .ms660-cockpit-actions{
    width:100%;
    justify-content:flex-start;
  }

  .ms660-command-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ms660-command-metric{
    min-height:91px;
  }

  .ms660-command-metric strong{
    font-size:17px;
  }
}

@media(max-width:430px){
  .ms660-command-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Smart Route
   ========================================================= */

.ms670-profile-card{
  margin:13px 0 15px;
  padding:14px;
  border-radius:17px;
  background:
    linear-gradient(
      145deg,
      rgba(41,137,172,.15),
      rgba(75,211,143,.07)
    );
  border:1px solid rgba(88,206,241,.18);
}

.ms670-profile-head,
.ms670-smart-head,
.ms670-subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.ms670-profile-head strong,
.ms670-profile-head span{
  display:block;
}

.ms670-profile-badge,
.ms670-route-badge{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  color:#cbeaf5;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  font-size:11px;
  font-weight:900;
}

.ms670-profile-badge.saved{
  color:#d9ffea;
  background:rgba(75,211,143,.13);
  border-color:rgba(75,211,143,.25);
}

.ms670-profile-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}

.ms670-profile-grid label,
.ms670-delay-grid label{
  display:block;
  margin:0;
  padding:10px;
  border-radius:13px;
  color:#a9c4ce;
  background:rgba(255,255,255,.04);
  font-size:11px;
}

.ms670-profile-grid label > span{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  color:#a9c4ce;
}

.ms670-profile-grid input,
.ms670-delay-grid select{
  min-width:0;
  margin:0;
}

.ms670-profile-grid input{
  flex:1;
}

.ms670-delay-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:9px;
}

.ms670-smart-route{
  margin:14px 0;
  padding:15px;
  border-radius:18px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(67,200,239,.14),
      transparent 35%
    ),
    rgba(4,25,37,.76);
  border:1px solid rgba(88,206,241,.18);
}

.ms670-route-badge.critical{
  color:#ffd3d3;
  background:rgba(255,80,80,.16);
  border-color:rgba(255,80,80,.34);
}

.ms670-route-badge.warning{
  color:#ffe9b6;
  background:rgba(255,190,75,.14);
  border-color:rgba(255,190,75,.30);
}

.ms670-route-badge.incomplete{
  color:#d7eff8;
  background:rgba(69,200,255,.11);
  border-color:rgba(69,200,255,.22);
}

.ms670-route-checks{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:13px;
}

.ms670-route-check{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
  min-width:0;
  padding:10px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.ms670-route-check > span{
  font-size:20px;
}

.ms670-route-check strong,
.ms670-route-check small{
  display:block;
}

.ms670-route-check small{
  margin-top:3px;
  color:#9fb8c2;
  line-height:1.35;
}

.ms670-route-check.critical{
  background:rgba(255,75,75,.11);
  border-color:rgba(255,75,75,.25);
}

.ms670-route-check.warning{
  background:rgba(255,190,75,.09);
  border-color:rgba(255,190,75,.20);
}

.ms670-route-check.good,
.ms670-route-check.info{
  background:rgba(75,211,143,.07);
  border-color:rgba(75,211,143,.16);
}

.ms670-smart-columns{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:13px;
  margin-top:14px;
}

.ms670-subhead{
  align-items:center;
  margin-bottom:8px;
}

.ms670-subhead span{
  color:#8faab5;
  font-size:11px;
}

.ms670-route-timeline,
.ms670-day-plan{
  display:grid;
  gap:7px;
  max-height:430px;
  overflow:auto;
  padding-right:3px;
}

.ms670-timeline-item,
.ms670-day-row{
  display:grid;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
}

.ms670-timeline-item{
  grid-template-columns:34px minmax(0,1fr) auto;
}

.ms670-day-row{
  grid-template-columns:34px minmax(0,1fr) auto;
}

.ms670-timeline-icon,
.ms670-day-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:11px;
  background:rgba(69,200,255,.12);
  font-size:17px;
  font-weight:900;
}

.ms670-timeline-item strong,
.ms670-timeline-item small,
.ms670-day-row strong,
.ms670-day-row small{
  display:block;
}

.ms670-timeline-item small,
.ms670-day-row small{
  margin-top:2px;
  color:#91aeb9;
  line-height:1.3;
}

.ms670-object-category{
  padding:4px 7px;
  border-radius:999px;
  color:#c5e8f4;
  background:rgba(69,200,255,.10);
  font-size:10px;
  font-weight:850;
}

.ms670-disclaimer{
  margin-top:12px;
  padding:10px 12px;
  border-radius:13px;
  color:#d3c18f;
  background:rgba(255,190,75,.075);
  border:1px solid rgba(255,190,75,.16);
  font-size:12px;
  line-height:1.4;
}

.ms670-empty{
  padding:12px;
  border-radius:12px;
  color:#91aeb9;
  background:rgba(255,255,255,.035);
}

.ms670-map-object{
  background:transparent;
  border:0;
}

.ms670-map-object span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#0b2637;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 3px 12px rgba(0,0,0,.38);
  font-size:17px;
}

@media(max-width:900px){
  .ms670-profile-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ms670-smart-columns{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .ms670-profile-head,
  .ms670-smart-head{
    flex-direction:column;
  }

  .ms670-profile-grid,
  .ms670-delay-grid,
  .ms670-route-checks{
    grid-template-columns:1fr;
  }

  .ms670-timeline-item{
    grid-template-columns:34px minmax(0,1fr);
  }

  .ms670-object-category{
    grid-column:2;
    justify-self:start;
  }
}


/* MijnSerenity 7.4.6 — iOS delen en route-POI's */
.ms672-share-note{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin:13px 0;
  padding:11px 13px;
  border-radius:14px;
  background:rgba(69,200,255,.08);
  border:1px solid rgba(69,200,255,.17);
}

.ms672-share-note > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(69,200,255,.13);
  font-size:21px;
}

.ms672-share-note strong,
.ms672-share-note small{
  display:block;
}

.ms672-share-note small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.35;
}


/* MijnSerenity 7.4.6 — fullscreen kaart en alternatieve route */
.planner-map-shell{
  position:relative;
  overflow:hidden;
  border-radius:18px;
}
.planner-map-shell .planner-map{
  cursor:zoom-in;
  border-radius:18px;
}
.planner-map-expand{
  position:absolute;
  z-index:600;
  top:12px;
  right:12px;
  width:auto;
  min-height:40px;
  padding:8px 11px;
  border-radius:999px;
  color:#fff;
  background:rgba(5,24,35,.88);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.planner-map-tap-hint{
  position:absolute;
  z-index:500;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  color:#e8f9ff;
  background:rgba(5,24,35,.80);
  border:1px solid rgba(255,255,255,.15);
  font-size:11px;
  font-weight:800;
  pointer-events:none;
  white-space:nowrap;
}
.planner-map-fullscreen{
  position:fixed;
  inset:0;
  z-index:2147483500;
  padding:
    max(8px,env(safe-area-inset-top))
    max(8px,env(safe-area-inset-right))
    max(8px,env(safe-area-inset-bottom))
    max(8px,env(safe-area-inset-left));
  background:rgba(0,4,8,.94);
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}
.planner-map-fullscreen-panel{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:0;
  border-radius:22px;
  overflow:hidden;
  background:#071925;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 70px rgba(0,0,0,.62);
}
.planner-map-fullscreen-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  background:rgba(4,20,30,.98);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.planner-map-fullscreen-head strong,
.planner-map-fullscreen-head small{
  display:block;
}
.planner-map-fullscreen-head small{
  margin-top:2px;
  color:var(--muted);
}
.planner-map-fullscreen-close{
  flex:0 0 auto;
  width:52px;
  min-width:52px;
  height:52px;
  min-height:52px;
  padding:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  font-size:38px;
  line-height:1;
}
.planner-map-fullscreen-host{
  flex:1;
  min-height:0;
  background:#061521;
}
.planner-map-fullscreen-canvas{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  border-radius:0 !important;
  cursor:grab !important;
}
.planner-map-fullscreen-canvas:active{
  cursor:grabbing !important;
}
body.planner-map-fullscreen-open{
  overflow:hidden !important;
  touch-action:none;
}
.ms673-alternative-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:13px 0;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(69,200,255,.08);
  border:1px solid rgba(69,200,255,.20);
}
.ms673-alternative-panel > div:first-child{
  min-width:0;
}
.ms673-alternative-panel strong,
.ms673-alternative-panel small{
  display:block;
}
.ms673-alternative-panel small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.35;
}
.ms673-alternative-panel.success{
  background:rgba(75,211,143,.09);
  border-color:rgba(75,211,143,.25);
}
.ms673-alternative-panel.unavailable{
  background:rgba(255,190,75,.08);
  border-color:rgba(255,190,75,.20);
}
.ms673-alternative-actions{
  display:flex;
  flex:0 1 540px;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.ms673-alternative-actions button{
  width:auto;
  min-width:150px;
  padding:9px 11px;
  text-align:left;
}
.ms673-alternative-actions button small{
  margin-top:3px;
  color:inherit;
  opacity:.76;
  font-size:10px;
}
.ms673-alternative-actions button.active{
  color:#082019;
  background:#75e2a7;
}
.ms673-spinner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(69,200,255,.13);
  font-size:23px;
  animation:ms673-spin 1s linear infinite;
}
@keyframes ms673-spin{
  to{transform:rotate(360deg)}
}
@media(max-width:760px){
  .planner-map-expand{
    top:9px;
    right:9px;
    min-height:36px;
    padding:7px 9px;
    font-size:12px;
  }
  .planner-map-tap-hint{
    display:none;
  }
  .planner-map-fullscreen-head small{
    display:none;
  }
  .planner-map-fullscreen-close{
    width:46px;
    min-width:46px;
    height:46px;
    min-height:46px;
    font-size:34px;
  }
  .ms673-alternative-panel{
    align-items:stretch;
    flex-direction:column;
  }
  .ms673-alternative-actions{
    flex:0 0 auto;
    justify-content:flex-start;
  }
  .ms673-alternative-actions button{
    flex:1 1 170px;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Auto Logbook
   ========================================================= */

.ms680-auto-center{
  margin:14px 0;
  padding:13px;
  border-radius:17px;
  background:
    linear-gradient(
      145deg,
      rgba(69,200,255,.11),
      rgba(75,211,143,.055)
    );
  border:1px solid rgba(91,211,244,.17);
}

.ms680-auto-state{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
}

.ms680-auto-state > span:first-child{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(69,200,255,.14);
  font-size:22px;
}

.ms680-auto-state strong,
.ms680-auto-state small{
  display:block;
}

.ms680-auto-state small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.35;
}

.ms680-auto-badge{
  padding:6px 9px;
  border-radius:999px;
  color:#ccecf7;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:900;
}

.ms680-auto-badge.armed{
  color:#ffe9b7;
  background:rgba(255,190,75,.13);
  border-color:rgba(255,190,75,.25);
  animation:ms680-wait-pulse 1.8s infinite;
}

.ms680-auto-badge.moving,
.ms680-auto-badge.active{
  color:#d9ffea;
  background:rgba(75,211,143,.14);
  border-color:rgba(75,211,143,.28);
}

.ms680-auto-badge.stopped{
  color:#d8f4ff;
  background:rgba(69,200,255,.14);
  border-color:rgba(69,200,255,.25);
}

.ms680-auto-badge.error{
  color:#ffd2d2;
  background:rgba(255,82,82,.14);
  border-color:rgba(255,82,82,.28);
}

.ms680-arrival-countdown{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:11px 12px;
  border-radius:14px;
  color:#ffeec2;
  background:rgba(255,190,75,.10);
  border:1px solid rgba(255,190,75,.22);
}

.ms680-arrival-countdown strong,
.ms680-arrival-countdown small{
  display:block;
}

.ms680-arrival-countdown small{
  margin-top:3px;
  color:#d7c49a;
  line-height:1.35;
}

.ms680-arrival-countdown button{
  width:auto;
  flex:0 0 auto;
}

.ms680-auto-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.ms680-auto-actions button{
  flex:1 1 175px;
}

.ms680-trip-timeline-wrap{
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.ms680-timeline-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}

.ms680-timeline-head strong,
.ms680-timeline-head span{
  display:block;
}

.ms680-timeline-head > span{
  color:var(--muted);
  font-size:11px;
}

.ms680-trip-timeline{
  display:grid;
  gap:7px;
  max-height:300px;
  overflow:auto;
  padding-right:3px;
}

.ms680-timeline-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.ms680-timeline-item strong,
.ms680-timeline-item small{
  display:block;
}

.ms680-timeline-item small{
  margin-top:2px;
  color:#92aeb9;
  line-height:1.3;
}

.ms680-timeline-item.departure,
.ms680-timeline-item.moving,
.ms680-timeline-item.resume{
  border-color:rgba(75,211,143,.16);
  background:rgba(75,211,143,.055);
}

.ms680-timeline-item.stop{
  border-color:rgba(255,190,75,.17);
  background:rgba(255,190,75,.055);
}

.ms680-timeline-item.arrival,
.ms680-timeline-item.saved{
  border-color:rgba(69,200,255,.18);
  background:rgba(69,200,255,.06);
}

.ms680-timeline-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:rgba(69,200,255,.12);
  font-size:18px;
}

.ms680-empty-timeline{
  padding:11px;
  border-radius:12px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  font-size:12px;
  line-height:1.4;
}

.ms680-detection-fields{
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  margin-bottom:9px;
}

@keyframes ms680-wait-pulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,190,75,0);
  }
  50%{
    box-shadow:0 0 0 7px rgba(255,190,75,.07);
  }
}

@media(max-width:760px){
  .ms680-auto-state{
    grid-template-columns:42px minmax(0,1fr);
  }

  .ms680-auto-badge{
    grid-column:2;
    justify-self:start;
  }

  .ms680-arrival-countdown{
    align-items:stretch;
    flex-direction:column;
  }

  .ms680-arrival-countdown button{
    width:100%;
  }

  .ms680-timeline-head{
    flex-direction:column;
  }

  .ms680-detection-fields{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Routefoto’s
   ========================================================= */

.ms681-photo-composer{
  margin-top:13px;
  padding:13px;
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(69,200,255,.09),
      rgba(255,255,255,.025)
    );
  border:1px solid rgba(69,200,255,.17);
}

.ms681-photo-composer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ms681-photo-composer-head strong,
.ms681-photo-composer-head small{
  display:block;
}

.ms681-photo-composer-head small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.35;
}

.ms681-photo-composer-head > span{
  flex:0 0 auto;
  color:#c8edf8;
  font-size:11px;
  font-weight:850;
}

.ms681-pending-photos{
  display:grid;
  gap:9px;
}

.ms681-pending-photo{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) 34px;
  align-items:start;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.042);
  border:1px solid rgba(255,255,255,.075);
}

.ms681-photo-preview{
  position:relative;
  width:104px;
  min-width:104px;
  height:82px;
  min-height:82px;
  padding:0;
  overflow:hidden;
  border-radius:12px;
  background:#07151e;
  border:0;
}

.ms681-photo-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ms681-photo-preview span{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:4px 6px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.66);
  font-size:9px;
  font-weight:850;
}

.ms681-photo-copy label{
  margin:0 0 4px;
}

.ms681-photo-copy textarea{
  min-height:62px;
  margin:0;
  resize:vertical;
}

.ms681-photo-copy small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}

.ms681-photo-remove{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,78,78,.18);
  border:1px solid rgba(255,78,78,.30);
  font-size:21px;
}

.ms681-photo-marker{
  background:transparent;
  border:0;
}

.ms681-photo-marker > span{
  position:relative;
  display:block;
  width:46px;
  height:46px;
  padding:3px;
  border-radius:14px 14px 14px 3px;
  background:#fff;
  box-shadow:0 5px 17px rgba(0,0,0,.45);
  transform:rotate(-2deg);
}

.ms681-photo-marker > span::after{
  content:"";
  position:absolute;
  left:5px;
  bottom:-7px;
  border:7px solid transparent;
  border-top-color:#fff;
  border-left-color:#fff;
}

.ms681-photo-marker img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px 10px 10px 2px;
}

.ms681-map-photo-popup{
  min-width:190px;
}

.ms681-map-photo-popup img{
  display:block;
  width:100%;
  max-height:170px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:8px;
}

.ms681-map-photo-popup strong,
.ms681-map-photo-popup small{
  display:block;
}

.ms681-map-photo-popup small{
  margin-top:4px;
  color:#63727a;
}

.ms681-saved-photo{
  display:flex;
  flex-direction:column;
}

.ms681-photo-location-badge{
  position:absolute;
  left:7px;
  top:7px;
  padding:4px 7px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.64);
  font-size:9px;
  font-weight:850;
}

.ms681-saved-photo-caption{
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  align-items:center;
  gap:5px;
  width:100%;
  padding:7px;
  background:rgba(3,18,27,.94);
}

.ms681-saved-photo-caption span{
  overflow:hidden;
  color:#d8edf4;
  font-size:11px;
  line-height:1.3;
  text-overflow:ellipsis;
}

.ms681-saved-photo-caption button{
  width:28px;
  min-width:28px;
  height:28px;
  min-height:28px;
  padding:0;
  border-radius:9px;
  font-size:12px;
}

@media(max-width:620px){
  .ms681-photo-composer-head{
    flex-direction:column;
  }

  .ms681-pending-photo{
    grid-template-columns:86px minmax(0,1fr);
  }

  .ms681-photo-preview{
    width:86px;
    min-width:86px;
    height:76px;
    min-height:76px;
  }

  .ms681-photo-remove{
    grid-column:2;
    justify-self:end;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Boat Intelligence
   ========================================================= */

.ms690-intelligence-card{
  position:relative;
  overflow:hidden;
  margin-bottom:14px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(69,200,255,.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      rgba(75,211,143,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(8,35,50,.98),
      rgba(4,22,34,.98)
    );
  border-color:rgba(89,211,244,.22);
}

.ms690-intelligence-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.ms690-intelligence-head h2{
  margin-bottom:3px;
}

.ms690-health-ring{
  --score:0deg;
  position:relative;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width:92px;
  height:92px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      #0b2635 58%,
      transparent 60%
    ),
    conic-gradient(
      #4bd38f var(--score),
      rgba(255,255,255,.09) 0
    );
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.25);
}

.ms690-health-ring.warning{
  background:
    radial-gradient(circle,#0b2635 58%,transparent 60%),
    conic-gradient(
      #ffbe4b var(--score),
      rgba(255,255,255,.09) 0
    );
}

.ms690-health-ring.critical{
  background:
    radial-gradient(circle,#0b2635 58%,transparent 60%),
    conic-gradient(
      #ff5f5f var(--score),
      rgba(255,255,255,.09) 0
    );
}

.ms690-health-ring strong{
  color:#f2fcff;
  font-size:27px;
  line-height:1;
}

.ms690-health-ring small{
  margin-top:3px;
  color:#8faeba;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
}

.ms690-intelligence-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}

.ms690-intelligence-grid button{
  min-width:0;
  min-height:108px;
  padding:12px;
  text-align:left;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);
}

.ms690-intelligence-grid span,
.ms690-intelligence-grid strong,
.ms690-intelligence-grid small{
  display:block;
}

.ms690-intelligence-grid span{
  color:#98b5c0;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
}

.ms690-intelligence-grid strong{
  overflow:hidden;
  margin:8px 0 5px;
  color:#effbff;
  font-size:19px;
  line-height:1.08;
  text-overflow:ellipsis;
}

.ms690-intelligence-grid small{
  color:#8ea9b4;
  line-height:1.32;
}

.ms690-advice-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:12px;
  margin-top:14px;
}

.ms690-subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.ms690-subhead strong,
.ms690-subhead span{
  display:block;
}

.ms690-subhead > button{
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
}

.ms690-advice-list{
  display:grid;
  gap:7px;
}

.ms690-advice-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 10px;
  text-align:left;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.ms690-advice-item > span:first-child{
  font-size:19px;
}

.ms690-advice-item strong,
.ms690-advice-item small{
  display:block;
}

.ms690-advice-item small{
  margin-top:2px;
  color:#91acb7;
  line-height:1.3;
}

.ms690-advice-item.warning{
  background:rgba(255,190,75,.07);
  border-color:rgba(255,190,75,.17);
}

.ms690-advice-item.critical{
  background:rgba(255,82,82,.09);
  border-color:rgba(255,82,82,.22);
}

.ms690-advice-item.good{
  background:rgba(75,211,143,.07);
  border-color:rgba(75,211,143,.16);
}

.ms690-captain-box{
  padding:13px;
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(69,200,255,.09),
      rgba(255,255,255,.025)
    );
  border:1px solid rgba(69,200,255,.16);
}

.ms690-captain-title{
  display:flex;
  align-items:center;
  gap:9px;
}

.ms690-captain-title > span{
  font-size:26px;
}

.ms690-captain-title strong,
.ms690-captain-title small{
  display:block;
}

.ms690-captain-title small{
  color:#8faab5;
}

.ms690-question-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  margin-top:11px;
}

.ms690-question-row input{
  margin:0;
}

.ms690-question-row button{
  width:auto;
}

.ms690-question-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.ms690-question-chips button{
  width:auto;
  min-height:32px;
  padding:6px 8px;
  color:#c8eaf5;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:10px;
}

.ms690-captain-answer{
  min-height:70px;
  margin-top:10px;
  padding:10px 11px;
  border-radius:13px;
  color:#d7edf4;
  background:rgba(2,15,24,.55);
  border:1px solid rgba(255,255,255,.07);
  font-size:12px;
  line-height:1.45;
}

.ms690-captain-answer.thinking{
  opacity:.65;
}

.ms690-live-advisor-card{
  background:
    linear-gradient(
      145deg,
      rgba(9,40,56,.98),
      rgba(5,24,36,.98)
    );
  border-color:rgba(69,200,255,.18);
}

.ms690-live-advisor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.ms690-advisor-badge,
.ms690-predictive-badge{
  padding:6px 9px;
  border-radius:999px;
  color:#cdebf5;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  font-size:10px;
  font-weight:900;
}

.ms690-advisor-badge.good,
.ms690-predictive-badge.good{
  color:#d8ffea;
  background:rgba(75,211,143,.13);
  border-color:rgba(75,211,143,.25);
}

.ms690-advisor-badge.warning,
.ms690-predictive-badge.warning{
  color:#ffedbd;
  background:rgba(255,190,75,.13);
  border-color:rgba(255,190,75,.24);
}

.ms690-advisor-badge.critical,
.ms690-predictive-badge.critical{
  color:#ffd4d4;
  background:rgba(255,82,82,.14);
  border-color:rgba(255,82,82,.27);
}

.ms690-live-advisor-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.ms690-live-advisor-grid > div{
  min-width:0;
  padding:11px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.ms690-live-advisor-grid span,
.ms690-live-advisor-grid strong,
.ms690-live-advisor-grid small{
  display:block;
}

.ms690-live-advisor-grid span{
  color:#92afba;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
}

.ms690-live-advisor-grid strong{
  margin:6px 0 4px;
  color:#f0fbff;
}

.ms690-live-advisor-grid small{
  color:#8ea9b4;
  line-height:1.3;
}

.ms690-live-advice{
  margin-top:9px;
  padding:10px 12px;
  border-radius:13px;
  color:#cce8f1;
  background:rgba(69,200,255,.07);
  border:1px solid rgba(69,200,255,.15);
  line-height:1.4;
}

.ms690-live-advice.warning{
  color:#ffe8af;
  background:rgba(255,190,75,.08);
  border-color:rgba(255,190,75,.19);
}

.ms690-live-advice.good{
  color:#d7ffea;
  background:rgba(75,211,143,.07);
  border-color:rgba(75,211,143,.16);
}

.ms690-predictive-card{
  background:
    linear-gradient(
      145deg,
      rgba(10,38,52,.98),
      rgba(5,24,35,.98)
    );
  border-color:rgba(75,211,143,.16);
}

.ms690-predictive-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:13px;
}

.ms690-predictive-panel{
  min-width:0;
  padding:12px;
  border-radius:15px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.065);
}

.ms690-forecast-list,
.ms690-energy-list{
  display:grid;
  gap:7px;
}

.ms690-forecast-item,
.ms690-energy-item{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
}

.ms690-energy-item{
  grid-template-columns:32px minmax(0,1fr) auto;
}

.ms690-forecast-item strong,
.ms690-forecast-item small,
.ms690-energy-item strong,
.ms690-energy-item small{
  display:block;
}

.ms690-forecast-item small,
.ms690-energy-item small{
  margin-top:2px;
  color:#8faab5;
  line-height:1.3;
}

.ms690-forecast-item.warning,
.ms690-energy-item.warning{
  background:rgba(255,190,75,.07);
}

.ms690-forecast-item.critical,
.ms690-energy-item.critical{
  background:rgba(255,82,82,.09);
}

.ms690-energy-item > b{
  color:#e9f9ff;
  white-space:nowrap;
}

.ms690-trip-analysis{
  display:grid;
  grid-template-columns:66px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  margin:11px 0;
  padding:11px;
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(69,200,255,.085),
      rgba(75,211,143,.035)
    );
  border:1px solid rgba(69,200,255,.16);
}

.ms690-trip-score{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width:62px;
  height:62px;
  border-radius:50%;
  color:#fff;
  background:rgba(69,200,255,.13);
  border:2px solid rgba(69,200,255,.32);
}

.ms690-trip-score.good{
  background:rgba(75,211,143,.13);
  border-color:rgba(75,211,143,.34);
}

.ms690-trip-score.warning{
  background:rgba(255,190,75,.12);
  border-color:rgba(255,190,75,.31);
}

.ms690-trip-score.critical{
  background:rgba(255,82,82,.12);
  border-color:rgba(255,82,82,.31);
}

.ms690-trip-score strong{
  font-size:23px;
  line-height:1;
}

.ms690-trip-score small{
  margin-top:2px;
  font-size:9px;
}

.ms690-trip-analysis-copy strong,
.ms690-trip-analysis-copy small{
  display:block;
}

.ms690-trip-analysis-copy small{
  margin-top:3px;
  color:#91acb7;
}

.ms690-trip-analysis-copy ul{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:7px 0 0;
  padding:0;
  list-style:none;
}

.ms690-trip-analysis-copy li{
  padding:4px 7px;
  border-radius:999px;
  color:#cce8f1;
  background:rgba(255,255,255,.05);
  font-size:9px;
}

.ms690-trip-analysis > button{
  width:auto;
  white-space:nowrap;
}

@media(max-width:1000px){
  .ms690-intelligence-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .ms690-advice-layout,
  .ms690-predictive-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .ms690-intelligence-head,
  .ms690-live-advisor-head{
    align-items:flex-start;
  }

  .ms690-health-ring{
    width:78px;
    height:78px;
  }

  .ms690-live-advisor-grid{
    grid-template-columns:1fr;
  }

  .ms690-trip-analysis{
    grid-template-columns:58px minmax(0,1fr);
  }

  .ms690-trip-score{
    width:54px;
    height:54px;
  }

  .ms690-trip-analysis > button{
    grid-column:2;
    justify-self:start;
  }
}

@media(max-width:460px){
  .ms690-intelligence-head{
    align-items:flex-start;
  }

  .ms690-intelligence-grid{
    grid-template-columns:1fr;
  }

  .ms690-question-row{
    grid-template-columns:1fr;
  }

  .ms690-question-row button{
    width:100%;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Havenbibliotheek
   ========================================================= */

.ms692-harbour-import-card{
  margin-bottom:14px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(69,200,255,.17),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(8,39,55,.98),
      rgba(5,25,37,.98)
    );
  border-color:rgba(69,200,255,.22);
}

.ms692-harbour-import-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.ms692-harbour-import-head h2{
  margin-bottom:3px;
}

.ms692-harbour-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#cce9f3;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  font-size:10px;
  font-weight:900;
}

.ms692-harbour-badge.checking{
  color:#d8f5ff;
  background:rgba(69,200,255,.12);
  border-color:rgba(69,200,255,.24);
}

.ms692-harbour-badge.success{
  color:#d9ffea;
  background:rgba(75,211,143,.13);
  border-color:rgba(75,211,143,.26);
}

.ms692-harbour-badge.warning{
  color:#ffeabb;
  background:rgba(255,190,75,.13);
  border-color:rgba(255,190,75,.25);
}

.ms692-harbour-badge.error{
  color:#ffd4d4;
  background:rgba(255,82,82,.14);
  border-color:rgba(255,82,82,.27);
}

.ms692-harbour-import-controls{
  display:grid;
  grid-template-columns:
    minmax(150px,.65fr)
    minmax(170px,.75fr)
    minmax(230px,1fr);
  align-items:end;
  gap:9px;
  margin-top:13px;
}

.ms692-harbour-import-controls label{
  margin:0;
}

.ms692-harbour-import-controls select{
  margin-top:5px;
}

.ms692-harbour-import-controls button{
  min-height:44px;
}

.ms692-harbour-status{
  margin-top:10px;
  padding:9px 11px;
  border-radius:12px;
  color:#a9c1ca;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.065);
  font-size:11px;
  line-height:1.4;
}

.ms692-harbour-status.success{
  color:#c9f5dc;
  background:rgba(75,211,143,.07);
  border-color:rgba(75,211,143,.16);
}

.ms692-harbour-status.warning{
  color:#e8d49e;
  background:rgba(255,190,75,.07);
  border-color:rgba(255,190,75,.17);
}

.ms692-harbour-status.error{
  color:#ffd0d0;
  background:rgba(255,82,82,.08);
  border-color:rgba(255,82,82,.19);
}

.ms692-harbour-preview{
  margin-top:11px;
}

.ms692-harbour-summary{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:8px;
}

.ms692-harbour-summary > div{
  padding:10px;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}

.ms692-harbour-summary span,
.ms692-harbour-summary strong{
  display:block;
}

.ms692-harbour-summary span{
  color:#91aeb9;
  font-size:10px;
}

.ms692-harbour-summary strong{
  margin-top:4px;
  color:#f0fbff;
  font-size:21px;
}

.ms692-harbour-examples{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:9px;
  max-height:330px;
  overflow:auto;
}

.ms692-harbour-examples article{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:9px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
}

.ms692-harbour-examples article > span{
  font-size:19px;
}

.ms692-harbour-examples strong,
.ms692-harbour-examples small{
  display:block;
}

.ms692-harbour-examples small{
  margin-top:2px;
  color:#91acb6;
}

@media(max-width:760px){
  .ms692-harbour-import-head{
    flex-direction:column;
  }

  .ms692-harbour-import-controls{
    grid-template-columns:1fr;
  }

  .ms692-harbour-summary{
    grid-template-columns:1fr;
  }

  .ms692-harbour-examples{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — Havens bij mijn locatie
   ========================================================= */

.ms693-nearby-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px minmax(220px,.55fr);
  align-items:end;
  gap:10px;
  margin-top:12px;
  padding:13px;
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(75,211,143,.075),
      rgba(69,200,255,.04)
    );
  border:1px solid rgba(75,211,143,.17);
}

.ms693-nearby-search strong,
.ms693-nearby-search small{
  display:block;
}

.ms693-nearby-search small{
  margin-top:3px;
  color:#91acb7;
  line-height:1.35;
}

.ms693-nearby-search label{
  margin:0;
}

.ms693-nearby-search select{
  margin-top:5px;
}

.ms693-nearby-search button{
  min-height:44px;
}

@media(max-width:860px){
  .ms693-nearby-search{
    grid-template-columns:1fr 1fr;
  }

  .ms693-nearby-search > div:first-child{
    grid-column:1 / -1;
  }
}

@media(max-width:600px){
  .ms693-nearby-search{
    grid-template-columns:1fr;
  }

  .ms693-nearby-search > div:first-child{
    grid-column:auto;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — POI Data Service
   ========================================================= */

.ms694-enrichment-card{
  margin-bottom:14px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(75,211,143,.14),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(8,38,51,.98),
      rgba(4,24,35,.98)
    );
  border-color:rgba(75,211,143,.20);
}

.ms694-enrichment-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.ms694-enrichment-head h2{
  margin-bottom:3px;
}

.ms694-enrichment-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#cce9f2;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  font-size:10px;
  font-weight:900;
}

.ms694-enrichment-badge.checking{
  color:#dff8ff;
  background:rgba(69,200,255,.12);
  border-color:rgba(69,200,255,.24);
}

.ms694-enrichment-badge.success{
  color:#d9ffea;
  background:rgba(75,211,143,.13);
  border-color:rgba(75,211,143,.27);
}

.ms694-enrichment-badge.warning{
  color:#ffe9b7;
  background:rgba(255,190,75,.13);
  border-color:rgba(255,190,75,.25);
}

.ms694-enrichment-options{
  display:grid;
  grid-template-columns:
    minmax(180px,.72fr)
    repeat(2,minmax(220px,1fr));
  align-items:stretch;
  gap:9px;
  margin-top:13px;
}

.ms694-enrichment-options > label{
  margin:0;
  padding:10px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.065);
}

.ms694-enrichment-options select{
  margin-top:5px;
}

.ms694-enrichment-options .checkline{
  display:flex;
}

.ms694-enrichment-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:11px;
}

.ms694-enrichment-actions button{
  width:auto;
  min-width:210px;
}

.ms694-progress-shell{
  height:7px;
  overflow:hidden;
  margin-top:11px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}

.ms694-progress-bar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      #45c8ff,
      #4bd38f
    );
  transition:width .25s ease;
}

.ms694-enrichment-status{
  margin-top:9px;
  padding:9px 11px;
  border-radius:12px;
  color:#a9c0ca;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  font-size:11px;
  line-height:1.4;
}

.ms694-enrichment-status.success{
  color:#cdf4dc;
  background:rgba(75,211,143,.07);
  border-color:rgba(75,211,143,.16);
}

.ms694-enrichment-status.warning{
  color:#e9d5a0;
  background:rgba(255,190,75,.07);
  border-color:rgba(255,190,75,.17);
}

.ms694-source-note{
  margin-top:7px;
  color:#7898a4;
  font-size:10px;
}

.ms694-poi-extra{
  margin:9px 0;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(69,200,255,.045);
  border:1px solid rgba(69,200,255,.10);
}

.ms694-poi-extra.pending{
  color:#8ba6b0;
  font-size:10px;
}

.ms694-poi-extra-badges,
.ms694-poi-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ms694-poi-extra-badges span{
  padding:4px 7px;
  border-radius:999px;
  color:#bedce6;
  background:rgba(255,255,255,.05);
  font-size:9px;
  font-weight:800;
}

.ms694-poi-extra-badges .rating{
  color:#ffe7a6;
  background:rgba(255,190,75,.10);
}

.ms694-poi-detail{
  margin-top:7px;
  color:#b6ccd4;
  font-size:10px;
}

.ms694-poi-links{
  margin-top:7px;
}

.ms694-poi-links a{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:6px 8px;
  border-radius:9px;
  color:#d8f2fa;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  font-size:9px;
  font-weight:800;
  text-decoration:none;
}

.ms694-poi-source{
  display:block;
  margin-top:7px;
  color:#7795a1;
  font-size:9px;
}

.photo-wrap .ms694-photo-source{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:3px 5px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.68);
  font-size:8px;
  font-weight:800;
}

@media(max-width:900px){
  .ms694-enrichment-options{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .ms694-enrichment-head{
    flex-direction:column;
  }

  .ms694-enrichment-actions button{
    width:100%;
  }
}


/* =========================================================
   MijnSerenity Cloud 7.4.8 — navigatie permanent onderaan
   ========================================================= */

:root{
  --nav-height:92px;
}

html,
body{
  min-height:100%;
}

body{
  padding-bottom:
    calc(
      var(--nav-height) +
      env(safe-area-inset-bottom) +
      12px
    ) !important;
}

body > .bottom-nav,
.bottom-nav.bottom-nav-viewport-fixed,
.bottom-nav.bottom-nav-always-visible{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  left:0 !important;
  right:0 !important;
  top:auto !important;
  bottom:0 !important;

  display:flex !important;
  width:100% !important;
  max-width:100% !important;
  min-height:
    calc(
      var(--nav-height) +
      env(safe-area-inset-bottom)
    ) !important;

  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  translate:none !important;

  z-index:2147483000 !important;
}

/* Oude auto-hideklasse kan de balk niet meer wegschuiven. */
body > .bottom-nav.bottom-nav-auto-hidden,
.bottom-nav.bottom-nav-viewport-fixed.bottom-nav-auto-hidden,
.bottom-nav.bottom-nav-always-visible.bottom-nav-auto-hidden{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  translate:none !important;
}

/* Geen tik op de pagina meer nodig om de navigatie terug te halen. */
.bottom-nav{
  transition:
    background-color .2s ease,
    box-shadow .2s ease !important;
  will-change:auto !important;
}

/* Zorg dat de onderste inhoud nooit onder de navigatie verdwijnt. */
main,
#app,
.app-shell{
  padding-bottom:
    calc(
      var(--nav-height) +
      env(safe-area-inset-bottom) +
      18px
    );
}

@supports(height:100dvh){
  body > .bottom-nav,
  .bottom-nav.bottom-nav-viewport-fixed,
  .bottom-nav.bottom-nav-always-visible{
    bottom:0 !important;
  }
}


/* MijnSerenity 7.4.6 — Storage Safety */
.storage-safe-image{
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(40,190,255,.09)),
    rgba(4,24,43,.9);
  cursor:zoom-in;
  transition:opacity .2s ease,filter .2s ease;
  min-width:44px;
  min-height:44px;
}
.storage-safe-image:not(.storage-safe-loaded){
  opacity:.68;
  filter:saturate(.65);
}
.storage-safe-image.storage-safe-loading{
  animation:storageSafePulse 1.2s ease-in-out infinite alternate;
}
.storage-safe-image.storage-safe-error{
  opacity:.45;
  outline:1px dashed rgba(255,160,110,.8);
}
@keyframes storageSafePulse{
  from{opacity:.42}
  to{opacity:.82}
}
.storage-document-button{
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  padding:0;
  text-decoration:underline;
  cursor:pointer;
}
.storage-safety-card{
  border:1px solid rgba(82,208,255,.32);
  background:linear-gradient(145deg,rgba(8,44,67,.94),rgba(4,27,48,.96));
}
.storage-safety-heading{
  display:flex;
  align-items:center;
  gap:12px;
}
.storage-safety-heading>span{font-size:1.7rem}
.storage-safety-heading strong,
.storage-safety-heading small{display:block}
.storage-safety-heading small{opacity:.72;margin-top:3px}
.storage-safety-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.storage-safety-stats span{
  border-radius:12px;
  background:rgba(255,255,255,.06);
  padding:9px 8px;
  text-align:center;
  font-size:.78rem;
}
.storage-safety-stats b{display:block;font-size:1rem}
.storage-safe-map-marker{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(145deg,#f4fbff,#a9def4);
  border:2px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  font-size:1.15rem;
}
@media(max-width:620px){
  .storage-safety-stats{grid-template-columns:1fr}
}


/* MijnSerenity 7.4.8 — dashboardtegels hebben één volledige klikzone */
.dashboard-tile{
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(71,199,242,.16);
}
.dashboard-tile::after,
.dashboard-tile > *{
  pointer-events:none;
}


/* MijnSerenity 7.11.0 — actuele zonne-opbrengst op het vaarscherm */
.live-solar-yield-metric{
  position:relative;
  overflow:hidden;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-color:rgba(255,194,71,.25);
  background:
    radial-gradient(circle at 84% 18%,rgba(255,200,74,.15),transparent 34%),
    linear-gradient(145deg,rgba(18,57,74,.98),rgba(7,31,46,.98));
}
.live-solar-yield-metric::after{
  content:'☀';
  position:absolute;
  right:16px;
  bottom:4px;
  font-size:74px;
  line-height:1;
  opacity:.065;
  pointer-events:none;
}
.live-solar-yield-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.live-solar-yield-head>span{
  color:#d7eaf3;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.live-solar-yield-head>small{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#9db4c3;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.live-solar-yield-head>small.live{
  color:#dfffe9;
  background:rgba(51,199,116,.14);
  border:1px solid rgba(74,226,139,.22);
}
.live-solar-yield-head>small.standby{
  color:#ffe6a7;
  background:rgba(244,177,45,.13);
  border:1px solid rgba(244,177,45,.2);
}
.live-solar-yield-metric>strong{
  position:relative;
  z-index:1;
  display:block;
  color:#fff0a8;
  font-size:clamp(2.05rem,5vw,3rem);
  line-height:1;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.live-solar-yield-metric>small{
  position:relative;
  z-index:1;
  display:block;
  margin-top:9px;
  color:#a9bdca;
  line-height:1.35;
}
.live-solar-yield-bar{
  position:relative;
  z-index:1;
  height:6px;
  margin-top:16px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.live-solar-yield-bar i{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f0a929,#ffe27a);
  box-shadow:0 0 14px rgba(255,204,77,.36);
  transition:width .35s ease;
}
@media(max-width:760px){
  .live-solar-yield-metric{min-height:145px}
}