:root{
  --accent: #6469aa;
  --bg: #f7f7f7;
  --card: #ffffff;
  --muted: #8b8b8b;
  --radius: 12px;
}

*{box-sizing:border-box}

.account-page{
  padding:48px 0;
  display:flex;
  justify-content:center;
}

.account-shell{
  width:100%;
  display:flex;
  margin: 0 10%;
  gap:24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20,20,20,0.06);
}

/* SIDEBAR */
.account-sidebar{
  width:20%;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  border-right: 2px #eee solid;
}

.account-profile{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 4% 0;
}

.account-avatar{
  width:48px;height:48px;border-radius:15px;
  background:#6469aa; color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:20px;
}
.account-name{font-weight:600;font-size:1rem}

.btn-order-detail {
  border: 0;
  font-family: 'Neue Frutiger', Outfit, Inter;
  padding: 5px 10px;
  border-radius: 8px;
  background: #f5f2ef;
  cursor: pointer;
  margin: 5% 0 0 0;
  width: 100%;
}

.btn-order-detail:hover {
  background: #e5e2df;
}

.order-detail div, .order-detail ul {
  border-bottom: 1px #eee solid;
  padding: 1% 0;
}

.statistic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2% 0;
  border-bottom: 1px #eee solid;
}

.statistic div {
  flex: 1;
}

/* nav */
.account-nav{display:flex;flex-direction:column;gap:6px}


.account-tab {
 font-family: 'Neue Frutiger', Outfit, Inter,'Roobert Bold', 'Ambit-Bold', Gotham-Medium, Garnett-Semibold, 'Poppins';
  background:transparent;
  border:0;
  border-radius:8px;
  text-align:left;
  font-weight:600;
  color:#555;
  cursor:pointer;
  font-size:1.05rem;
}

.account-tab:hover {
  color: #6469aa;
}

/*  #f3f4ff */
.account-tab.account-active{ background:linear-gradient(90deg, rgba(243,244,255,1), rgba(244,243,255,0.25));
  color:#6469aa; box-shadow:inset 0 0 0 1px rgba(111,191,187,0.06);
}


/* MAIN */
.account-main{
  flex:1;
  background:transparent;
  font-family: 'Neue Frutiger', Outfit, Inter, 'Ambit-Bold', Gotham-Medium, Garnett-Semibold, 'Poppins';
  padding: 28px 28px 28px 0;
}

#contentformular{
  padding:28px 0;
  border-radius:var(--radius);
//  box-shadow:0 14px 40px rgba(20,20,20,0.06);
}

.account-panel{ display:none;}
.account-panel.account-panel-active{ display:block; padding:0;}

.account-panel h2{
  margin:0 0 16px;
  font-size:2rem;
  color:#222;
}


.account-form{ display:flex; flex-direction:column; gap:10px; max-width:760px; }

.account-msg{ color:green; font-size:14px; margin-top:6px;}
.orders-list{ display:flex; flex-direction:column; gap:12px; }

/* order card */
.order-card{
  background:#fbfbfb;padding:14px;border-radius:10px;border:1px solid #f0f0f0;
  display:flex;justify-content:space-between;align-items:center;
}

.order-row {
  padding:10px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:start;
}


/* responsive */
@media (max-width:900px){
  .account-page {
    padding: 0;
  }

  #contentformular {
    padding: 1% 0.5%;
  }

  .account-main{
    padding: 28px 0;
  }

  .account-shell{ flex-direction:column; align-items:stretch; gap:12px; width:96%;}
  .account-sidebar{ width:100%; display:block; flex-direction:row; gap:12px; align-items:center; padding:12px; margin:2% 0;}
  .account-nav{flex-direction:row; gap:6px; overflow:auto}
  .account-nav .account-tab{
    white-space:nowrap;
    font-size:.9rem;
    padding:8px 10px;
  }

  .account-sidebar {
    padding: 12px 2px;
  }

  .account-panel h2{
    font-size:1.5rem;
  }

  .account-panel.account-panel-active {

    padding: 3.5%;
  }

}