:root{--navy:#06131c;--bg:#081a23;--card:#0c2530;--muted:#9fb7d6;--accent:#d6b04f;--accent-cyan:#00d2ff;--white:#fff;--radius:12px;}
*{box-sizing:border-box;}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:linear-gradient(180deg,var(--bg),#041018 70%);color:var(--white);min-height:100vh;padding:20px;}
nav{background:var(--card);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;box-shadow:0 3px 10px rgba(0,0,0,.4);}
nav a.brand{display:flex;align-items:center;text-decoration:none;color:var(--accent);}
.nav-right{display:flex;align-items:center;gap:12px;}
.icon-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;position:relative;}
.badge{position:absolute;top:-6px;right:-8px;background:#ffd65a;color:#06131c;font-size:12px;font-weight:600;padding:2px 6px;border-radius:50%;box-shadow:0 0 6px #ffd65a,0 0 12px #ffd65a;display:none;}
.user-menu,.account-menu{position:relative;display:flex;align-items:center;}
.user-dropdown,.dropdown-menu,.account-dropdown{position:absolute;right:0;background:var(--card);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.3);display:none;flex-direction:column;z-index:20;padding:10px 0;min-width:150px;animation:fadeIn .25s ease-out;}
.user-dropdown a,.user-dropdown button,.dropdown-menu a,.dropdown-menu button,.account-dropdown a,.account-dropdown button{background:none;border:none;color:#fff;text-align:left;padding:10px 14px;text-decoration:none;width:100%;cursor:pointer;}
.user-dropdown a:hover,.user-dropdown button:hover,.dropdown-menu a:hover,.dropdown-menu button:hover,.account-dropdown a:hover,.account-dropdown button:hover{background:rgba(255,255,255,.08);text-shadow:0 0 6px #ffd65a,0 0 12px #ffd65a;color:#ffd65a;}
header{background:var(--card);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius);margin:20px;box-shadow:0 3px 10px rgba(0,0,0,.4);}
header h1{font-size:1.2rem;color:var(--accent);}
header button{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--muted);padding:6px 14px;border-radius:8px;cursor:pointer;font-weight:600;}
main{max-width:900px;margin:24px auto;padding:12px;}
section{background:var(--card);padding:24px;border-radius:var(--radius);margin-bottom:20px;box-shadow:0 5px 20px rgba(0,0,0,.3);}
h2{color:#ffd65a;margin-bottom:12px;font-weight:600;}
.order-box,.box{background:#11172f;padding:20px;border-radius:12px;border:1px solid #ffd65a33;margin-bottom:15px;}
.order-box:hover{border-color:#ffd65a77;background:#141b36;}
.order-header{display:flex;justify-content:space-between;margin-bottom:10px;}
.thumbnail,img{width:70px;height:70px;border-radius:8px;object-fit:cover;border:1px solid #ffd65a33;margin-top:10px;}
.status-tag{display:inline-block;padding:6px 12px;border-radius:10px;font-size:.85rem;color:#fff;background:#444;}
.status-pending{background:#e67e22;}
.status-cancelled{background:#e74c3c;}
.status-delivered{background:#27ae60;}
.status-shipped{background:#3498db;}
.status-processing{background:#9b59b6;}
.status-unknown{background:#7f8c8d;}
.loading{opacity:.6;pointer-events:none;}
.hidden{display:none!important;}
.meta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;color:var(--muted);}
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:25px;height:18px;background:none;border:none;cursor:pointer;z-index:1001;}
.hamburger span{display:block;height:3px;background:#fff;border-radius:3px;transition:.3s;}
.hamburger:hover span{box-shadow:0 0 6px #ffd65a,0 0 12px #ffd65a;}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(7px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-7px);}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;}
.nav-links{display:flex;gap:30px;}
.nav-links a{color:#fff;text-decoration:none;font-weight:500;position:relative;padding:4px 0;transition:.2s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#ffd65a;box-shadow:0 0 6px #ffd65a,0 0 12px #ffd65a;border-radius:2px;transition:.3s;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a:hover,.nav-links a.active{color:#ffd65a;text-shadow:0 0 6px #ffd65a,0 0 12px #ffd65a;}
@media(max-width:850px){
.hamburger{display:flex;}
.nav-links{position:absolute;top:70px;right:0;flex-direction:column;background:#06131c;width:100%;max-height:0;overflow:hidden;transition:max-height .3s;text-align:center;padding:0;display:none;}
.nav-links.open{display:flex;max-height:500px;padding:1rem 0;}
.nav-links a{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1);}
.menu-toggle{display:inline-block;}
.nav-right{gap:12px;}
}
.loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffffaa;backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeOut .6s ease forwards;animation-delay:1.2s;}
.loader{width:90px;height:90px;border-radius:50%;border:5px solid var(--accent);border-top-color:transparent;animation:spin 1s linear infinite;display:flex;justify-content:center;align-items:center;}
.loader-logo{font-size:1.1rem;font-weight:700;color:var(--accent);animation:pulse 1s infinite alternate;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%{opacity:.5;}100%{opacity:1;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeOut{to{opacity:0;visibility:hidden;}}
/* ---------------- ACCOUNT DROPDOWN ---------------- */
.account-dropdown {
  position: relative;
}

.account-btn {
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.dropdown-menu {
  position: absolute;
  top: 38px;
  right: 0;
  background: #111;
  padding: 10px 0;
  border-radius: 8px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index: 20;
}

.dropdown-menu a,
.dropdown-menu button {
  padding: 10px 15px;
  text-align: left;
  background: none;
  color: #fff;
  text-decoration: none;
  border: none;
  width: 100%;
}

.dropdown-menu button:hover,
.dropdown-menu a:hover {
  background: rgba(255,255,255,0.1);
}

.hidden {
  display: none;
}
/* ---------------- ACCOUNT DROPDOWN ---------------- */
.account-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.account-toggle {
  background: none;
  color: white;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
}

.account-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  width: 180px;
  padding: 12px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 0 8px #00d2ff, 0 0 16px #ffd65a;
  display: none;
  animation: fadeIn 0.25s ease-out;
  z-index: 20;
}

.account-dropdown a,
.account-dropdown button {
  display: block;
  padding: 8px 0;
  color: white;
  text-align: left;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  color: var(--accent-2);
}

.user-fullname {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Nav links with glowing underline animation */
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease, text-shadow 0.3s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #ffd65a;
  box-shadow: 0 0 6px #ffd65a, 0 0 12px #ffd65a;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}
.nav-links a:hover,
.nav-links a.active {
  color: #ffd65a;
  text-shadow: 0 0 6px #ffd65a, 0 0 12px #ffd65a;
}
.nav-search input:focus {
  outline: none;
  box-shadow: 0 0 6px #00d2ff, 0 0 12px #ffd65a;
}.hamburger:hover span {
  box-shadow: 0 0 6px #ffd65a, 0 0 12px #ffd65a;
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: #111;
  text-shadow: 0 0 6px #ffd65a, 0 0 12px #ffd65a;
}
.account-btn:hover {
  text-shadow: 0 0 6px #ffd65a, 0 0 12px #ffd65a;
}
.badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #ffd65a;
  color: #06131c;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffd65a, 0 0 12px #ffd65a;
}
.nav{ box-shadow: 0 0 8px rgba(0, 210, 255, 0.2);}
body {
      background: #0a0f24;
      color: #fff;
      padding: 20px;
      font-family: Arial;
    }
    h1 { color: #ffd65a; }
    h2 { color: #ffd65a; }
    .box {
      background: #11172f;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #ffd65a33;
      max-width: 700px;
    }
    .item {
      background: #0f1430;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 10px;
      border: 1px solid #ffd65a22;
      display: flex;
      gap: 15px;
    }
    img {
      width: 90px;
      height: 90px;
      border-radius: 8px;
      object-fit: cover;
    }
    .back-btn {
      margin-top: 20px;
      background: #ffd65a;
      padding: 10px 15px;
      border-radius: 6px;
      text-decoration: none;
      color: #000;
      font-weight: bold;
      display: inline-block;
    }



 .nav-links {
  display: flex;
  gap: 30px; /* adjust to preference */
}
.nav-links a {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}