*{box-sizing:border-box}

html,body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:#fff;
  color:#000;
}

a{
  color:inherit;
  text-decoration:none;
}

.auth{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:#fff;
}

.auth-card{
  width:min(460px,100%);
  padding:38px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:18px;
}

.brand{
  font-weight:800;
  letter-spacing:2px;
  font-size:22px;
}

.muted{color:#666}

.field{
  width:100%;
  padding:14px;
  margin:8px 0;
  background:#fff;
  border:1px solid #ccc;
  border-radius:9px;
  color:#000;
  font:inherit;
}

.field:focus{
  outline:none;
  border-color:#555;
}

.btn{
  padding:13px 17px;
  border:1px solid #000;
  border-radius:9px;
  background:#000;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.btn.secondary{
  background:#fff;
  color:#000;
}

.btn.full{width:100%}

.account{
  display:flex;
  min-height:100vh;
  background:#fff;
  color:#000;
}

.account aside{
  width:250px;
  padding:30px 18px;
  border-right:1px solid #ddd;
  background:#f7f7f7;
  position:fixed;
  top:0;
  bottom:0;
}

.account nav{
  display:grid;
  gap:5px;
  margin-top:35px;
}

.account nav a{
  padding:12px 13px;
  color:#666;
  border-radius:8px;
}

.account nav a.active,
.account nav a:hover{
  background:#eaeaea;
  color:#000;
}

.account main{
  margin-left:250px;
  padding:42px;
  width:calc(100% - 250px);
}

.card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:14px;
  padding:22px;
  margin:18px 0;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.metric{
  padding:20px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fafafa;
}

.metric span{
  display:block;
  color:#666;
  font-size:12px;
}

.metric b{
  font-size:26px;
  margin-top:10px;
  display:block;
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.address{
  padding:16px;
  border:1px solid #ddd;
  border-radius:10px;
  margin:10px 0;
}

.error{
  color:#d32f2f;
  margin-top:10px;
}

.success{
  color:#198754;
  margin-top:10px;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:13px 8px;
  text-align:left;
  border-bottom:1px solid #ddd;
}

th{
  font-size:11px;
  text-transform:uppercase;
  color:#666;
}

@media(max-width:750px){
  .account{
    display:block;
  }

  .account aside{
    position:relative;
    width:100%;
    padding:20px 16px 16px;
    border-right:0;
    border-bottom:1px solid #e8e8e8;
    background:rgba(255,255,255,.98);
  }

  .account aside .brand{
    font-size:19px;
    letter-spacing:.12em;
  }

  .account aside > .muted{
    margin-top:3px !important;
    font-size:12px;
  }

  .account nav{
    display:flex;
    width:100%;
    gap:8px;
    margin-top:16px;
    padding:2px 0 8px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }

  .account nav::-webkit-scrollbar{
    display:none;
  }

  .account nav a{
    flex:0 0 auto;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:1px solid #e4e4e4;
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  /* Back to Shop stays purple; its position now comes from the HTML order. */
  .account nav a[href="../index.html"]{
    position:static;
    flex:0 0 auto;
    border-color:rgba(168,85,247,.35);
    background:rgba(168,85,247,.08);
    color:#6f22c7;
    box-shadow:none;
  }

  .account nav a.active{
    background:#111;
    border-color:#111;
    color:#fff;
  }

  .account nav a:hover{
    border-color:#a855f7;
    color:#7b2cff;
    background:#fff;
  }

  .account nav a.active:hover{
    background:#111;
    border-color:#111;
    color:#fff;
  }

  .account aside #logout{
    position:static !important;
    display:flex;
    width:100%;
    min-height:44px;
    margin-top:8px;
    align-items:center;
    justify-content:center;
    border-color:#dedede;
    background:#fff;
    color:#111;
    font-size:12px;
  }

  .account main{
    margin:0;
    width:100%;
    padding:26px 16px 40px;
    overflow-x:hidden;
  }

  .account main h1{
    font-size:28px;
    line-height:1.1;
  }

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

  .row{
    align-items:flex-start;
    flex-direction:column;
  }

  .card{
    padding:18px;
    border-radius:14px;
  }

  .account main table{
    min-width:560px;
  }

  .account main .card:has(table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  body.auth .auth-back{
    position:absolute !important;
    top:16px !important;
    left:16px !important;
    min-height:42px;
    padding:10px 14px !important;
    border:1px solid #dedede;
    border-radius:999px !important;
    background:rgba(255,255,255,.96);
    box-shadow:0 5px 18px rgba(0,0,0,.05);
    font-size:12px !important;
    font-weight:800 !important;
    color:#111 !important;
    z-index:10;
  }

  body.auth .auth-back:hover{
    border-color:#a855f7;
    color:#7b2cff !important;
    background:#fff;
  }
}

@media(max-width:420px){
  .account aside{
    padding-left:14px;
    padding-right:14px;
  }

  .account nav a{
    padding:9px 12px;
    font-size:11px;
  }

  .account main{
    padding-left:14px;
    padding-right:14px;
  }

  body.auth .auth-back{
    left:14px !important;
  }
}

/* Back to Shop: purple on desktop and mobile, HTML-first order */
.account nav a[href="../index.html"]{background:#f7edff!important;border:1px solid #dcbafa!important;color:#6f22c7!important;font-weight:800!important;order:-1}
.account nav a[href="../index.html"]:hover{background:#eedbff!important}

.skiv-marketing{display:flex;gap:10px;align-items:flex-start;margin:20px 0 6px;font-size:13px;line-height:1.55;color:#444}.skiv-marketing input{margin-top:3px;accent-color:#a855f7}

/* Consistent account navigation: every customer section stays visible. */
.account aside{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.account aside .brand{flex-shrink:0}
.account aside .skiv-account-nav{display:flex;flex-direction:column;gap:3px;margin-top:18px}
.account .skiv-nav-label{font-size:10px;font-weight:800;letter-spacing:.13em;color:#888;padding:13px 11px 4px}
.account .skiv-account-nav a{display:flex;align-items:center;min-height:39px;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:650;transition:background .15s,color .15s}
.account .skiv-account-nav a[aria-current="page"],.account .skiv-account-nav a.active{background:#21142d;color:#fff}
.account .skiv-account-nav .skiv-nav-shop{background:#f1e7ff;color:#6423a4;margin-bottom:4px}
.account .skiv-account-nav .skiv-nav-points{color:#7b2dc1;font-weight:800}
.account .skiv-account-nav .skiv-nav-points.active{color:#fff}
.account .skiv-account-nav .skiv-nav-danger{color:#a53b43}
.account aside #logout{position:static!important;display:block!important;margin:14px 0 0!important;left:auto!important;right:auto!important;bottom:auto!important;flex-shrink:0;text-align:center}
@media(max-width:750px){
 .account aside{position:relative;overflow:visible;padding:14px 14px 12px}
 .account aside .skiv-account-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
 .account .skiv-nav-label{grid-column:1/-1;padding:7px 3px 0;font-size:9px}
 .account .skiv-account-nav a{min-height:38px;padding:8px 6px;text-align:center;justify-content:center;border:1px solid #eee;font-size:11px;line-height:1.2;overflow-wrap:anywhere}
 .account .skiv-account-nav .skiv-nav-shop{grid-column:1/-1;min-height:34px;margin:0}
 .account aside #logout{margin:10px 0 0!important;width:100%;min-height:36px;padding:8px;font-size:11px}
}
@media(max-width:360px){.account aside .skiv-account-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}