
.ms71510-dashboard{display:none}

@media(max-width:1024px){
  /* Alleen het ingelogde Start-dashboard vervangen; authView blijft volledig ongemoeid */
  #appView:not(.hidden) #dashboard{
    padding:0 12px 170px!important;
  }
  #appView:not(.hidden) #dashboard > :not(#ms71510Dashboard){
    display:none!important;
  }
  #appView:not(.hidden) #ms71510Dashboard{
    display:flex!important;
  }

  .ms71510-dashboard{
    width:100%;
    flex-direction:column;
    gap:7px;
    color:#f3f8fc;
    font-family:inherit;
    box-sizing:border-box;
  }
  .ms71510-dashboard button{
    color:inherit;
    font:inherit;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
  }
  .ms71514-hero{
    position:relative;display:block!important;width:100%;height:clamp(170px,31vw,280px);
    padding:0!important;overflow:hidden;text-align:left;border:1px solid rgba(95,164,209,.34)!important;
    border-radius:18px!important;background:#061827!important
  }
  .ms71514-hero img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 58%}
  .ms71514-hero img.hidden{display:none!important}
  .ms71514-hero:after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(1,12,21,.88));pointer-events:none}
  .ms71514-hero>span{position:absolute;z-index:1;left:18px;bottom:14px;display:flex;flex-direction:column}
  .ms71514-hero strong{font-size:24px;line-height:1;color:#fff}
  .ms71514-hero small{margin-top:4px;color:#d5e3ed;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
  .ms71510-system,.ms71510-more,.ms71510-metric,.ms71510-tile,
  .ms71510-house-battery,.ms71510-start-battery,.ms71510-shortcuts button,.ms71510-rudder{
    border:1px solid rgba(95,164,209,.34)!important;
    background:linear-gradient(145deg,#061827,#03131f)!important;
    border-radius:18px!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
  }

  .ms71510-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(135px,24%);
    gap:7px;
  }
  .ms71510-system{
    height:92px;
    position:relative;
    text-align:left;
    padding:17px 24px!important;
  }
  .ms71510-system span{
    display:block;font-size:13px;font-weight:800;letter-spacing:.09em;color:#d5e1ea
  }
  .ms71510-system strong{
    display:block;margin-top:9px;font-size:21px;color:#57da82
  }
  .ms71510-system.alarm strong{color:#ff4c5e}
  .ms71510-system i{
    position:absolute;right:26px;top:37px;width:20px;height:20px;border-radius:50%;
    background:#57da82;box-shadow:0 0 18px rgba(87,218,130,.7)
  }
  .ms71510-system.alarm i{background:#ff4c5e;box-shadow:0 0 18px rgba(255,76,94,.75)}
  .ms71510-more{
    height:92px;font-size:22px;font-weight:800!important;
  }
  .ms71510-more strong{margin-left:8px}

  .ms71510-metrics{display:flex;flex-direction:column;gap:7px}
  .ms71510-metric{
    width:100%;height:128px;padding:10px 18px!important;
    display:grid!important;grid-template-columns:100px minmax(0,1fr) 34px;
    align-items:center;text-align:left;
  }
  .ms71510-chevron{
    font-size:50px;font-weight:200;text-align:right;color:#fff;line-height:1
  }
  .ms71510-value small{
    display:block;font-size:13px;font-weight:800;letter-spacing:.07em;color:#d6e0e9
  }
  .ms71510-value strong{
    display:flex;align-items:baseline;gap:10px;margin-top:3px;line-height:1
  }
  .ms71510-value strong b{
    color:#2795ff;font-size:43px;font-weight:600
  }
  .ms71510-value strong em{
    font-size:20px;font-style:normal;color:#d5e0e8;font-weight:600
  }
  .ms71510-value>span{
    display:block;margin-top:8px;font-size:16px;color:#b8c7d5
  }

  .ms71510-speed-gauge{
    width:70px;height:70px;border:5px solid #d6e4ef;border-bottom-color:transparent;
    border-radius:50%;position:relative;margin:auto;transform:rotate(-10deg)
  }
  .ms71510-speed-gauge:before{
    content:"";position:absolute;inset:9px;border-radius:50%;
    border-top:2px solid rgba(214,228,239,.8)
  }
  .ms71510-speed-gauge i{
    position:absolute;left:50%;top:50%;width:3px;height:25px;background:#d6e4ef;
    transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(45deg);
    border-radius:3px
  }

  .ms71510-rpm-gauge{
    width:74px;height:74px;border-radius:50%;position:relative;margin:auto;
    background:conic-gradient(from 215deg,#59c74a 0 25%,#ffd33b 25% 39%,#ef3e3e 39% 50%,transparent 50% 100%);
  }
  .ms71510-rpm-gauge:before{
    content:"";position:absolute;inset:8px;border-radius:50%;background:#061827
  }
  .ms71510-rpm-gauge i{
    position:absolute;z-index:2;left:50%;top:50%;width:3px;height:24px;background:#dceaf4;
    transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(42deg);border-radius:3px
  }
  .ms71510-rpm-gauge b{
    position:absolute;z-index:2;bottom:14px;left:50%;transform:translateX(-50%);
    font-size:9px;color:#b9c9d6
  }

  .ms71510-depth-icon,.ms71510-wind-icon{
    font-size:64px;line-height:.65;color:#d7e7f1;text-align:center
  }
  .ms71510-depth-icon span{
    display:block;font-size:23px;line-height:1;margin-top:7px
  }

  .ms71510-twins{
    display:grid;grid-template-columns:1fr 1fr;gap:7px
  }
  .ms71510-tile{
    min-height:120px;position:relative;display:grid!important;
    grid-template-columns:84px 1fr;align-items:center;text-align:left;padding:13px 18px 30px!important
  }
  .ms71510-tile-icon{font-size:45px;text-align:center}
  .ms71510-tile small,.ms71510-house-battery small,.ms71510-start-battery small{
    display:block;font-size:12px;letter-spacing:.05em;font-weight:800;color:#d4dfe8
  }
  .ms71510-tile strong{
    display:block;margin-top:5px;font-size:29px;color:#2795ff
  }
  .ms71510-progress{
    position:absolute;left:24px;right:24px;bottom:14px;height:7px;background:#12354e;border-radius:8px;overflow:hidden
  }
  .ms71510-progress b{
    display:block;height:100%;width:0;background:#2795ff;border-radius:8px
  }

  .ms71510-battery-row{
    display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:7px
  }
  .ms71510-house-battery{
    min-height:108px;display:grid!important;grid-template-columns:66px 1.25fr 1fr 1fr;
    gap:8px;align-items:center;text-align:left;padding:12px 16px!important
  }
  .ms71510-battery-icon{font-size:42px}
  .ms71510-house-battery strong{
    display:block;margin-top:5px;font-size:21px;white-space:nowrap
  }
  .ms71510-house-battery>div:nth-child(2) strong{
    color:#2795ff;font-size:26px
  }
  .ms71510-start-battery{
    min-height:108px;padding:16px!important;text-align:left;
    display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center
  }
  .ms71510-start-battery strong{
    margin-top:8px;font-size:25px;color:#2795ff
  }

  .ms71510-shortcuts{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px
  }
  .ms71510-shortcuts button{
    height:108px;padding:8px 4px!important;
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px
  }
  .ms71510-shortcuts span{font-size:38px}
  .ms71510-shortcuts b{font-size:11px;letter-spacing:.02em}

  .ms71510-rudder{
    height:230px;position:relative;overflow:hidden;text-align:left;padding:15px 24px!important
  }
  .ms71510-rudder-title{
    font-size:13px;font-weight:800;letter-spacing:.07em;color:#d9e4ec
  }
  .ms71510-rudder-body{
    display:grid;grid-template-columns:75px minmax(0,1fr) 75px;align-items:center;height:165px
  }
  .ms71510-bb,.ms71510-sb{
    font-size:23px;font-weight:900
  }
  .ms71510-bb{color:#ff3f4e}
  .ms71510-sb{color:#62d34b;text-align:right}
  .ms71510-bb strong,.ms71510-sb strong{
    display:block;margin-top:9px;color:#dbe7ef;font-size:20px
  }
  .ms71510-rudder-arc{
    position:relative;height:145px
  }
  .ms71510-rudder-line{
    position:absolute;left:5%;right:5%;top:48px;height:90px;
    border-top:8px solid transparent;border-radius:50% 50% 0 0;
    background:
      linear-gradient(100deg,#ed342a 0 48%,#63c94b 52% 100%) top/100% 8px no-repeat;
    transform:perspective(180px) rotateX(18deg)
  }
  .ms71510-rudder-zero{
    position:absolute;left:50%;top:47px;transform:translateX(-50%);
    font-size:25px;font-weight:800
  }
  .ms71510-rudder-needle{
    position:absolute;left:50%;bottom:9px;width:4px;height:91px;background:#f2f7fa;border-radius:4px;
    transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);
    box-shadow:0 0 10px rgba(69,165,255,.55)
  }
  .ms71510-boat{
    position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-size:38px;color:#d9e5ed
  }
  #ms71510RudderText{
    position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
    color:#afc1ce;font-size:12px
  }

  /* Radio dock + navigatie krijgen genoeg ruimte en blijven bovenaan */
  .bottom-nav{z-index:130!important}
}

@media(max-width:620px){
  #appView:not(.hidden) #dashboard{
    padding-left:10px!important;padding-right:10px!important;
    padding-bottom:calc(250px + env(safe-area-inset-bottom))!important;
  }
  .ms71514-hero{height:clamp(165px,48vw,220px)}
  .ms71510-top{grid-template-columns:minmax(0,1fr) minmax(104px,36%)}
  .ms71510-metric{height:118px;grid-template-columns:86px minmax(0,1fr) 28px;padding:8px 14px!important}
  .ms71510-value strong b{font-size:38px}
  .ms71510-value strong em{font-size:18px}
  .ms71510-tile{grid-template-columns:52px minmax(0,1fr);padding-left:10px!important;padding-right:10px!important}
  .ms71510-tile-icon{font-size:36px}
  .ms71510-tile strong{font-size:clamp(20px,6vw,27px);white-space:nowrap}
  .ms71510-battery-row{grid-template-columns:1fr 1fr}
  .ms71510-house-battery{grid-column:1/-1;grid-template-columns:44px repeat(3,minmax(0,1fr));padding:12px!important}
  .ms71510-house-battery>div{min-width:0}
  .ms71510-house-battery small{font-size:8px;white-space:normal;overflow-wrap:anywhere}
  .ms71510-house-battery strong{font-size:clamp(15px,4.5vw,19px);overflow:hidden;text-overflow:ellipsis}
  .ms71510-house-battery>div:nth-child(2) strong{font-size:clamp(18px,5.2vw,23px)}
  .ms71510-start-battery{grid-column:1/-1;min-height:82px;align-items:center;text-align:center}
  .ms71510-shortcuts button{width:100%;min-width:0;height:98px;overflow:hidden}
  .ms71510-shortcuts span{font-size:34px}
  .ms71510-shortcuts b{display:block;width:100%;font-size:clamp(7px,2.35vw,10px);line-height:1.15;white-space:normal;overflow-wrap:anywhere;text-align:center}
  .ms71510-rudder{margin-bottom:20px!important}
}

@media(max-width:370px){
  .ms71510-shortcuts{gap:4px}
  .ms71510-shortcuts button{height:90px;padding:7px 2px!important}
  .ms71510-shortcuts span{font-size:29px}
  .ms71510-rudder{padding-left:12px!important;padding-right:12px!important}
  .ms71510-rudder-body{grid-template-columns:52px minmax(0,1fr) 52px}
}

/* iPhone overflow fix: lange waarden en labels blijven binnen hun kaart */
@media(max-width:620px){
  .ms71510-dashboard{overflow-x:hidden}
  .ms71510-twins>*,.ms71510-tile>div,.ms71510-house-battery>div,.ms71510-shortcuts button{min-width:0}
  .ms71510-tile strong{
    max-width:100%;font-size:clamp(16px,4.7vw,25px);line-height:1.05;
    white-space:normal;overflow-wrap:normal;word-break:normal
  }
  #ms71510WaterTemp{
    max-width:100%;font-size:clamp(15px,4.25vw,22px);line-height:1.05;
    white-space:normal;overflow-wrap:normal;word-break:normal
  }
  .ms71510-house-battery small{
    font-size:clamp(7px,1.9vw,8px);line-height:1.1;white-space:nowrap;
    overflow-wrap:normal;word-break:normal;hyphens:none
  }
  .ms71510-shortcuts b{
    font-size:clamp(7px,2vw,9px);line-height:1.1;white-space:nowrap;
    overflow-wrap:normal;word-break:normal;hyphens:none;letter-spacing:0
  }
}

/* 7.15.15 — Meer-menu: alle knoppen blijven volledig binnen iPhone-breedte. */
@media(max-width:620px){
  .ms750-more-layer{padding-left:8px;padding-right:8px}
  .ms750-more-panel{
    width:100%;max-width:100%;padding:14px;overflow-x:hidden;border-radius:22px;
    box-sizing:border-box
  }
  .ms750-more-head{margin:-14px -14px 12px;padding:14px}
  .ms750-more-head h2{font-size:clamp(24px,7vw,31px)}
  .ms750-more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ms750-more-route{
    width:100%;min-width:0;max-width:100%;min-height:74px;gap:8px;padding:10px 9px;
    overflow:hidden;box-sizing:border-box
  }
  .ms750-more-route span{
    flex:0 0 34px;min-width:0;font-size:clamp(23px,6.5vw,30px);text-align:center
  }
  .ms750-more-route strong{
    min-width:0;max-width:100%;font-size:clamp(13px,3.8vw,17px);line-height:1.12;
    white-space:normal;overflow-wrap:anywhere;word-break:normal
  }
  .ms750-more-settings{gap:8px}
  .ms750-more-settings button{
    width:100%;min-width:0;max-width:100%;padding:10px 8px;
    font-size:clamp(13px,3.7vw,16px);line-height:1.15;white-space:normal;
    overflow-wrap:anywhere;box-sizing:border-box
  }
}

@media(max-width:390px){
  .ms750-more-route{gap:6px;padding-left:7px;padding-right:7px}
  .ms750-more-route span{flex-basis:30px;font-size:24px}
  .ms750-more-route strong{font-size:clamp(12px,3.55vw,15px)}
}
\n/* 7.15.59 — vijf snelle acties inclusief Techniek */\n.ms71510-shortcuts{grid-template-columns:repeat(5,minmax(0,1fr))!important}\n.ms71510-tech-shortcut span{filter:drop-shadow(0 0 9px rgba(63,192,255,.55))}\n@media(max-width:620px){.ms71510-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ms71510-shortcuts button{height:92px!important}}\n