/* MijnSerenity 7.14.4 — startscherm cockpit */
.ms-start-cockpit{
  margin:0 0 14px;
  padding:14px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right,rgba(78,186,255,.13),transparent 26%),
    linear-gradient(180deg,rgba(12,29,46,.98),rgba(7,18,31,.99));
  border:1px solid rgba(122,180,233,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 42px rgba(0,0,0,.18);
}
.ms-start-cockpit-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.ms-start-cockpit-head h2{
  margin:0;
  font-size:1.08rem;
  line-height:1.1;
  color:#fff;
}
.ms-start-cockpit-head p{
  margin:4px 0 0;
  font-size:.78rem;
  line-height:1.2;
  color:#a9bfd2;
}
.ms-start-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:#e2edf8;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ms-start-cockpit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.ms-cockpit-card{
  min-width:0;
  padding:12px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(15,34,53,.96),rgba(9,20,33,.98));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}
.ms-cockpit-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ms-cockpit-label{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}
.ms-cockpit-label b{ font-size:1.02rem; line-height:1; }
.ms-cockpit-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,.07);
  color:#dce9f6;
  border:1px solid rgba(255,255,255,.06);
}
.ms-cockpit-chip.good{ color:#b8f0c0; background:rgba(119,225,143,.12); border-color:rgba(119,225,143,.18); }
.ms-cockpit-chip.warning{ color:#ffe08a; background:rgba(255,211,107,.12); border-color:rgba(255,211,107,.18); }
.ms-cockpit-chip.critical{ color:#ffc0b6; background:rgba(255,140,124,.12); border-color:rgba(255,140,124,.18); }
.ms-cockpit-value{
  font-size:1.72rem;
  line-height:1;
  font-weight:800;
  color:#fff;
  letter-spacing:-.03em;
}
.ms-cockpit-meta{
  font-size:.76rem;
  line-height:1.18;
  color:#a9bfd2;
}
.ms-cockpit-tanks{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ms-cockpit-tank-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  color:#dbe8f4;
}
.ms-cockpit-track{
  position:relative;
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.ms-cockpit-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:var(--fill,50%);
  border-radius:999px;
  background:linear-gradient(90deg,#4bd0ff,#77e18f);
}
.ms-cockpit-fill.warning{ background:linear-gradient(90deg,#ffcc6b,#ffe08a); }
.ms-cockpit-fill.critical{ background:linear-gradient(90deg,#ff8475,#ffc0b6); }
.ms-cockpit-footer{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.ms-cockpit-action{
  border:none;
  border-radius:15px;
  padding:9px 6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.ms-cockpit-action span{ font-size:1rem; line-height:1; }
.ms-cockpit-action small{ font-size:.62rem; color:#d7e5f2; }
/* soepeler welkomstoverlay */
body.ms-welcome-active main,
body.ms-welcome-active #appUpdateBanner,
body.ms-welcome-active #appToast{ filter:blur(7px) !important; }
.ms-screen-welcome{
  background:rgba(6,15,25,.38) !important;
  transition:opacity .45s ease !important;
}
.ms-screen-welcome-panel{ gap:8px !important; }
#msScreenWelcomeTitle7140{
  animation:msWelcomeTitleSoft .62s cubic-bezier(.19,.78,.23,1) both !important;
}
#msScreenWelcomeSub7140{
  animation:msWelcomeSubSoft .48s ease .10s both !important;
}
.ms-screen-welcome-art{
  animation:msWelcomeArtSoft .54s ease both !important;
}
@keyframes msWelcomeTitleSoft{
  0%{ transform:translateY(18px) scale(1.12); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes msWelcomeSubSoft{
  0%{ transform:translateY(10px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes msWelcomeArtSoft{
  0%{ transform:translateY(10px) scale(.94); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@media (max-width:430px){
  .ms-start-cockpit{
    padding:12px 10px;
    border-radius:22px;
    min-height:calc(100dvh - 168px);
    display:flex;
    flex-direction:column;
  }
  .ms-start-cockpit-head{ margin-bottom:10px; }
  .ms-start-cockpit-head h2{ font-size:1rem; }
  .ms-start-cockpit-head p{ font-size:.72rem; }
  .ms-start-badge{ font-size:.60rem; padding:5px 8px; }
  .ms-start-cockpit-grid{ gap:8px; flex:1; }
  .ms-cockpit-card{ padding:10px; border-radius:17px; gap:6px; }
  .ms-cockpit-label{ font-size:.72rem; gap:6px; }
  .ms-cockpit-label b{ font-size:.96rem; }
  .ms-cockpit-chip{ font-size:.58rem; padding:4px 7px; }
  .ms-cockpit-value{ font-size:1.48rem; }
  .ms-cockpit-meta{ font-size:.69rem; }
  .ms-cockpit-tank-row{ font-size:.67rem; gap:6px; }
  .ms-cockpit-footer{ gap:6px; margin-top:10px; }
  .ms-cockpit-action{ border-radius:13px; padding:8px 5px; }
  .ms-cockpit-action small{ font-size:.58rem; }
}


/* MijnSerenity 7.14.5 — start cockpit in stijl van temperatuur/bilge kaarten */
.ms-start-cockpit{
  padding:8px !important;
  border-radius:16px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.ms-start-cockpit-head{
  margin-bottom:10px !important;
  padding:0 4px;
}
.ms-start-cockpit-head h2{
  font-size:1rem !important;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.ms-start-cockpit-head p{
  font-size:.74rem !important;
  color:#96adbf !important;
}
.ms-start-badge{
  background:rgba(5,19,33,.92) !important;
  border:1px solid rgba(113,153,188,.18) !important;
}
.ms-start-cockpit-grid{
  gap:10px !important;
}
.ms-cockpit-card{
  min-height:148px;
  padding:15px !important;
  border-radius:13px !important;
  background:linear-gradient(145deg,rgba(7,23,39,.94),rgba(3,13,24,.96)) !important;
  border:1px solid rgba(95,141,184,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
  position:relative;
  overflow:hidden;
}
.ms-cockpit-card::after{
  content:'';
  position:absolute;
  left:14px; right:14px; bottom:10px;
  height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M0 27 C25 34 38 14 64 22 S105 35 132 17 S177 23 202 13 S245 31 300 12' fill='none' stroke='%231688ff' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:.9;
  pointer-events:none;
}
.ms-cockpit-top{ align-items:flex-start !important; }
.ms-cockpit-label{
  gap:10px !important;
  font-size:16px !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  font-weight:600 !important;
}
.ms-cockpit-label b{
  font-size:21px !important;
  font-weight:500 !important;
  color:#b9c9da;
}
.ms-cockpit-chip{
  padding:4px 8px !important;
  font-size:.60rem !important;
}
.ms-cockpit-value{
  color:#7cc0ff !important;
  font-size:2rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
.ms-cockpit-meta{
  color:#bdc9d6 !important;
  font-size:.78rem !important;
  padding-bottom:18px;
}
.ms-cockpit-tanks{
  gap:10px !important;
  padding-bottom:18px;
}
.ms-cockpit-tank-row{
  grid-template-columns:74px 1fr 36px !important;
  color:#c2ceda !important;
  font-size:.68rem !important;
}
.ms-cockpit-track{ background:rgba(36,74,107,.42) !important; }
.ms-cockpit-footer{
  margin-top:10px !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.ms-cockpit-action{
  min-height:76px;
  border-radius:13px !important;
  background:linear-gradient(145deg,rgba(7,23,39,.94),rgba(3,13,24,.96)) !important;
  border:1px solid rgba(95,141,184,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
  gap:5px !important;
}
.ms-cockpit-action span{
  font-size:1.18rem !important;
}
.ms-cockpit-action small{
  font-size:.64rem !important;
  color:#d7e5f2 !important;
}
@media (max-width:430px){
  .ms-start-cockpit{ padding:7px 0 !important; min-height:auto !important; }
  .ms-start-cockpit-head{ padding:0 2px; }
  .ms-start-cockpit-grid{ gap:8px !important; }
  .ms-cockpit-card{ min-height:138px; padding:13px !important; }
  .ms-cockpit-label{ font-size:14px !important; gap:8px !important; }
  .ms-cockpit-label b{ font-size:18px !important; }
  .ms-cockpit-value{ font-size:1.78rem !important; }
  .ms-cockpit-meta{ font-size:.72rem !important; }
  .ms-cockpit-card::after{ left:12px; right:12px; bottom:9px; }
  .ms-cockpit-action{ min-height:70px; }
}


/* MijnSerenity 7.15.4 — rustige luxe opstart */
main,#appUpdateBanner,#appToast{
  transition:filter 1.85s cubic-bezier(.22,.72,.18,1), opacity 1.45s ease !important;
  will-change:filter;
}
body.ms-welcome-active main,
body.ms-welcome-active #appUpdateBanner,
body.ms-welcome-active #appToast{
  filter:blur(14px) saturate(.82) brightness(.78) !important;
}
body.ms-welcome-leaving main,
body.ms-welcome-leaving #appUpdateBanner,
body.ms-welcome-leaving #appToast{
  filter:blur(0) saturate(1) brightness(1) !important;
}
.ms-screen-welcome{
  background:
    radial-gradient(circle at 50% 42%,rgba(64,135,185,.22),transparent 42%),
    linear-gradient(180deg,rgba(4,12,22,.58),rgba(5,20,31,.42)) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  transition:opacity 1.15s cubic-bezier(.22,.72,.18,1), backdrop-filter 1.4s ease !important;
}
.ms-screen-welcome.show{ opacity:1 !important; }
.ms-screen-welcome.hide{ opacity:0 !important; backdrop-filter:blur(0) !important; -webkit-backdrop-filter:blur(0) !important; }
.ms-screen-welcome-panel{
  gap:12px !important;
  transform:translateZ(0);
}
.ms-screen-welcome-badge,
.ms-screen-welcome-art,
#msScreenWelcomeTitle7140,
#msScreenWelcomeSub7140{ animation:none !important; }
.ms-screen-welcome.show .ms-screen-welcome-badge{
  animation:msWelcomeBadgeLuxury .9s ease .18s both !important;
}
.ms-screen-welcome.show .ms-screen-welcome-art{
  animation:msWelcomeArtLuxury 1.45s cubic-bezier(.18,.8,.2,1) .05s both !important;
}
.ms-screen-welcome.show #msScreenWelcomeTitle7140{
  margin:0;
  font-size:clamp(42px,10vw,108px);
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 16px 42px rgba(0,0,0,.28);
  transform-origin:center center;
  animation:msWelcomeTitleLuxury 2.15s cubic-bezier(.12,.78,.16,1) both !important;
}
.ms-screen-welcome.show #msScreenWelcomeSub7140{
  width:min(90vw,820px);
  margin:0;
  font-size:clamp(15px,2.7vw,25px);
  line-height:1.3;
  color:#deedf7;
  text-wrap:balance;
  text-shadow:0 8px 24px rgba(0,0,0,.22);
  animation:msWelcomeSubLuxury 1.25s ease .72s both !important;
}
@keyframes msWelcomeTitleLuxury{
  0%{ transform:translateY(12px) scale(1.62); opacity:0; filter:blur(5px); }
  18%{ opacity:1; }
  62%{ filter:blur(0); }
  100%{ transform:translateY(0) scale(1); opacity:1; filter:blur(0); }
}
@keyframes msWelcomeSubLuxury{
  0%{ transform:translateY(14px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes msWelcomeArtLuxury{
  0%{ transform:translateY(16px) scale(.86) rotate(-5deg); opacity:0; filter:blur(4px); }
  65%{ opacity:1; filter:blur(0); }
  100%{ transform:translateY(0) scale(1) rotate(0); opacity:1; filter:blur(0); }
}
@keyframes msWelcomeBadgeLuxury{
  0%{ transform:translateY(-7px); opacity:0; letter-spacing:.18em; }
  100%{ transform:translateY(0); opacity:1; letter-spacing:.10em; }
}
@media (max-width:430px){
  body.ms-welcome-active main,
  body.ms-welcome-active #appUpdateBanner,
  body.ms-welcome-active #appToast{ filter:blur(11px) saturate(.84) brightness(.78) !important; }
  .ms-screen-welcome.show #msScreenWelcomeTitle7140{ font-size:clamp(36px,12vw,68px); }
  .ms-screen-welcome.show #msScreenWelcomeSub7140{ font-size:clamp(14px,4.3vw,18px); width:min(90vw,390px); }
}
@media (prefers-reduced-motion:reduce){
  .ms-screen-welcome.show .ms-screen-welcome-badge,
  .ms-screen-welcome.show .ms-screen-welcome-art,
  .ms-screen-welcome.show #msScreenWelcomeTitle7140,
  .ms-screen-welcome.show #msScreenWelcomeSub7140{ animation-duration:.01ms !important; }
  main,#appUpdateBanner,#appToast,.ms-screen-welcome{ transition-duration:.01ms !important; }
}


/* MijnSerenity 7.15.14 — snelle, sobere luxe opstart */
.ms-welcome-card{display:none!important}
.ms-screen-welcome-badge,.ms-screen-welcome-art,#msScreenWelcomeSub7140{display:none!important}
main,#appUpdateBanner,#appToast{
  transition:filter .75s cubic-bezier(.22,.72,.18,1),opacity .55s ease!important;
}
.ms-screen-welcome{
  transition:opacity .58s cubic-bezier(.22,.72,.18,1),backdrop-filter .65s ease!important;
}
.ms-screen-welcome-panel{gap:0!important}
.ms-screen-welcome.show #msScreenWelcomeTitle7140{
  animation:msWelcomeTitleFast 1.05s cubic-bezier(.12,.78,.16,1) both!important;
}
@keyframes msWelcomeTitleFast{
  0%{transform:translateY(8px) scale(1.48);opacity:0;filter:blur(3px)}
  24%{opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}
}
@media(max-width:430px){
  .ms-screen-welcome.show #msScreenWelcomeTitle7140{font-size:clamp(40px,13vw,72px)!important}
}