/* MSTUFF Tech Dark - app.css */
:root{
  --bg0:#04050A;
  --bg2:#070B1C;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.48);
  --v:#7C3AED;
  --t:#00E5FF;
  --g:#22C55E;
  --r:#EF4444;
  --radius2: 26px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow: 0 30px 90px rgba(0,0,0,.62);
  --shadow2: 0 18px 60px rgba(0,0,0,.55);
  --max: 1240px;
}

body.mstuff-tech{
  margin:0;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 600px at 18% 0%, rgba(0,229,255,.12), transparent 60%),
    radial-gradient(800px 520px at 85% 85%, rgba(0,229,255,.06), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  overflow-x:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

a{ color: inherit; }
.container{ width:min(var(--max), calc(100% - 44px)); margin: 0 auto; }

.noise{ position:fixed; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay; z-index:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".75" numOctaves="4" stitchTiles="stitch"/></filter><rect width="260" height="260" filter="url(%23n)" opacity="1"/></svg>');
}
.grid{ position:fixed; inset:-30%; pointer-events:none; z-index:0;
  background:linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
             linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:62px 62px; transform:rotate(-10deg); opacity:.06; filter: blur(.2px);
  animation:gridFloat 18s var(--ease) infinite alternate;
}
@keyframes gridFloat{ from{ transform:rotate(-10deg) translate3d(0,0,0) scale(1);} to{ transform:rotate(-10deg) translate3d(-2.5%,1.4%,0) scale(1.02);} }
.cursorGlow{ position:fixed; width:560px; height:560px; border-radius:999px; pointer-events:none;
  background: radial-gradient(circle at center, rgba(0,229,255,.14), rgba(124,58,237,.12), transparent 62%);
  transform: translate3d(-999px,-999px,0); filter: blur(2px); z-index:1; opacity:.9;
}

.topbar{ position:fixed; top:0; left:0; right:0; height:2px; background: rgba(255,255,255,.08); z-index:90; }
.topbar > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--t), var(--v)); box-shadow:0 0 22px rgba(0,229,255,.35); }

.site-header{ position:sticky; top:0; z-index:80; background: rgba(4,5,10,.62); backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; min-width:240px; }
.brandText{ display:flex; flex-direction:column; line-height:1.1; }
.brandText strong{ font-size:16px; letter-spacing:.9px; font-weight:1000; }
.brandText span{ font-size:12px; color:var(--muted2); font-weight:900; letter-spacing:.25px; }
.logoMark{ width:40px; height:40px; border-radius:16px;
  background: linear-gradient(135deg, rgba(0,229,255,1), rgba(124,58,237,1));
  box-shadow:0 0 35px rgba(0,229,255,.18);
  position:relative; overflow:hidden;
}
.logoMark:after{ content:""; position:absolute; inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-70%) rotate(25deg);
  animation: shine 1.1s linear infinite; opacity:.55;
}
@keyframes shine{ to{ transform: translateX(150%) rotate(25deg);} }

.navWrap .links{ display:flex; gap:10px; align-items:center; justify-content:center;
  padding:6px; border-radius:999px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  max-width:520px; list-style:none; margin:0; }
.navWrap .links li{ margin:0; }
.navWrap .links a{ display:inline-block; text-decoration:none; font-weight:1000; font-size:12px; letter-spacing:.35px;
  padding:10px 12px; border-radius:999px; border:1px solid transparent;
  color: rgba(255,255,255,.82);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.navWrap .links a:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); transform: translateY(-1px); }

.actions{ display:flex; gap:10px; align-items:center; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px;
  border:1px solid rgba(0,229,255,.20); background: rgba(0,229,255,.10); font-weight:1000; font-size:11px; letter-spacing:.25px;
}
.dot{ width:8px; height:8px; border-radius:999px; background: var(--g); box-shadow:0 0 18px rgba(34,197,94,.45);
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: var(--text); text-decoration:none; font-weight:1000; font-size:12px; letter-spacing:.28px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); border-color: rgba(0,229,255,.20);
  box-shadow: 0 0 0 1px rgba(0,229,255,.10), 0 18px 40px rgba(0,0,0,.35);
}
.btn.primary{ background: linear-gradient(180deg, rgba(0,229,255,.24), rgba(124,58,237,.20));
  border-color: rgba(0,229,255,.25); box-shadow: 0 0 0 1px rgba(0,229,255,.12);
}
.btn.sm{ padding:10px 12px; border-radius:14px; font-size:12px; }
.btn.ghost{ background: transparent; border-color: rgba(255,255,255,.10); }
.btn.danger{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); }

.page{ min-height: calc(100vh - 140px); padding-bottom: 24px; }
section{ padding: 70px 0; }
.hero{ padding: 62px 0 42px; }
.heroGrid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:stretch; }
.kicker{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(0,229,255,.18); background: rgba(0,229,255,.08); font-weight:1000; letter-spacing:.28px; font-size:12px;
}
.kicker i{ width:10px; height:10px; border-radius:999px; background: linear-gradient(180deg, var(--t), var(--v)); box-shadow:0 0 18px rgba(0,229,255,.25); }
h1{ margin:14px 0 12px; font-size: clamp(34px, 4.6vw, 60px); line-height:1.05; letter-spacing:-0.02em; font-weight:1100; }
.lead{ margin:0 0 18px; color: var(--muted); line-height:1.65; font-weight:800; max-width:60ch; }
.heroCtas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }

.panel{ border-radius: var(--radius2); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2); position:relative; overflow:hidden; padding:16px;
}
.panel:before{ content:""; position:absolute; inset:-2px;
  background: radial-gradient(circle at 18% 20%, rgba(0,229,255,.18), transparent 45%),
              radial-gradient(circle at 78% 62%, rgba(124,58,237,.18), transparent 52%);
  filter: blur(26px); opacity:.80; pointer-events:none;
}
.panel > *{ position:relative; }
.editorTop{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:18px; background: rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.10); margin-bottom:12px;
}
.dots{ display:flex; gap:8px; align-items:center; }
.dots i{ width:10px; height:10px; border-radius:999px; }
.dots i:nth-child(1){ background: rgba(239,68,68,.72); }
.dots i:nth-child(2){ background: rgba(245,158,11,.72); }
.dots i:nth-child(3){ background: rgba(34,197,94,.72); }
.editorName{ color: rgba(255,255,255,.70); font-weight:1000; letter-spacing:.25px; font-size:12px; }
pre{ margin:0; padding:16px; border-radius:20px; background: rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.10);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:13px; line-height:1.6; overflow:hidden; position:relative;
}
pre:before{ content:""; position:absolute; inset:-40% -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-70%) rotate(12deg);
  animation: shimmer 2.2s linear infinite; opacity:.35;
}
@keyframes shimmer{ to{ transform: translateX(175%) rotate(12deg);} }
.kw{ color: var(--t); font-weight:900; }
.fn{ color: rgba(167,139,250,1); font-weight:1000; }
.st{ color: rgba(52,211,153,1); font-weight:900; }
.cm{ color: rgba(156,163,175,.75); }

.trustRow{ margin-top:16px; display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; padding:14px;
  border-radius:22px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.trustItem{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:18px; background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08); font-weight:1000; min-height:54px;
}
.ico{ width:36px; height:36px; border-radius:16px; background: rgba(0,229,255,.10); border:1px solid rgba(0,229,255,.18);
  display:grid; place-items:center; box-shadow:0 0 22px rgba(0,229,255,.10);
}
.ico svg{ width:18px; height:18px; opacity:.95; }

.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.head h2{ margin:0; font-size:24px; letter-spacing:-.01em; font-weight:1100; }
.head p{ margin:0; color: var(--muted2); font-weight:900; letter-spacing:.2px; }
.box{ border-radius: var(--radius2); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2); position:relative; overflow:hidden; padding:16px;
}
.box:before{ content:""; position:absolute; inset:-2px;
  background: radial-gradient(circle at 18% 24%, rgba(0,229,255,.16), transparent 45%),
              radial-gradient(circle at 80% 65%, rgba(124,58,237,.14), transparent 52%);
  filter: blur(26px); opacity:.65; pointer-events:none;
}
.box > *{ position:relative; }

.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.card{ border-radius: var(--radius2); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 15px 40px rgba(0,0,0,.35); overflow:hidden; transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{ transform: translateY(-7px); border-color: rgba(0,229,255,.18); box-shadow:0 34px 95px rgba(0,0,0,.62); }
.thumb{ aspect-ratio: 16/10; background:
  radial-gradient(420px 220px at 30% 30%, rgba(0,229,255,.16), transparent 60%),
  radial-gradient(420px 220px at 70% 60%, rgba(124,58,237,.14), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.95; }
.thumbLink{ display:block; width:100%; height:100%; }
.tagRow{ position:absolute; left:12px; top:12px; display:flex; gap:8px; flex-wrap:wrap; z-index:2; }
.tag{ padding:6px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22);
  font-weight:1000; font-size:11px; letter-spacing:.25px;
}
.tag.t{ border-color: rgba(0,229,255,.22); }
.tag.v{ border-color: rgba(124,58,237,.22); }
.badgeSale{ position:absolute; right:12px; top:12px; padding:7px 10px; border-radius:999px;
  background: linear-gradient(180deg, rgba(0,229,255,.18), rgba(124,58,237,.18));
  border:1px solid rgba(0,229,255,.22); font-weight:1100; font-size:11px; letter-spacing:.25px;
  box-shadow:0 0 28px rgba(0,229,255,.10);
}
.body{ padding:14px; }
.title{ margin:0 0 8px; font-weight:1100; line-height:1.25; font-size:14px; min-height:36px; }
.title a{ text-decoration:none; }
.desc{ margin:0 0 12px; color: rgba(255,255,255,.65); line-height:1.55; font-weight:800; font-size:12px; min-height:38px; }
.meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price{ font-weight:1100; letter-spacing:.2px; }
.price small{ display:block; color: rgba(255,255,255,.45); font-weight:900; font-size:11px; margin-top:2px; }

/* Woo buttons to match theme */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  border-radius:14px;
  border:1px solid rgba(0,229,255,.25);
  background: linear-gradient(180deg, rgba(0,229,255,.24), rgba(124,58,237,.20));
  color: var(--text);
  font-weight:1000;
  letter-spacing:.28px;
  padding: 11px 14px;
  text-decoration:none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0,229,255,.10), 0 18px 40px rgba(0,0,0,.35);
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea{
  height:44px; border-radius:16px; border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20); color: var(--text);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

/* Footer */
.site-footer{ padding: 42px 0; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.12); }
.footerRow{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color: rgba(255,255,255,.6); font-weight:900; font-size:12px; }
.footerLinks{ list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; }
.footerLinks a{ color: rgba(255,255,255,.78); text-decoration:none; }
.footerLinks a:hover{ color:#fff; }

/* Posts */
.postRow{ padding: 14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.postTitle{ margin:0 0 6px; font-weight:1100; }
.postTitle a{ text-decoration:none; }
.postMeta{ color: var(--muted2); font-weight:900; font-size:12px; margin-bottom:10px; }
.postExcerpt{ color: var(--muted); font-weight:800; line-height:1.7; }
.pageTitle{ margin:0 0 12px; font-weight:1100; }
.contentBox .content{ color: rgba(255,255,255,.86); font-weight:800; line-height:1.8; }
.pagination{ margin-top: 14px; }

/* Responsive */
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
  .trustRow{ grid-template-columns: 1fr 1fr; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .navWrap .links{ display:none; }
  .brand{ min-width:auto; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .container{ width:min(var(--max), calc(100% - 28px)); }
  .pill{ display:none; }
}


/* WooCommerce product loop wrapper replaced by filters */
.wcCards{ margin:0; padding:0; }
.wcCards li{ list-style:none; }

/* Ensure add-to-cart link matches .btn */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.product_type_simple,
.woocommerce a.button.product_type_variable,
.woocommerce a.button.product_type_external{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
}


/* Woo My Account */
.woocommerce-account .woocommerce{ width:100%; }
.wcAccountLayout{ grid-template-columns: 320px 1fr; }
.wcAccountNav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.wcAccountNav li a{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.88);
  font-weight:1100;
  letter-spacing:.15px;
  text-decoration:none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.wcAccountNav li a:hover{ transform: translateY(-2px); border-color: rgba(0,229,255,.18); }
.wcAccountNav li.is-active a{
  border-color: rgba(0,229,255,.22);
  background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(124,58,237,.08));
  box-shadow: 0 0 0 1px rgba(0,229,255,.10);
}
.wcAccountContent h2, .wcAccountContent h3{ margin-top:0; }
.woocommerce-MyAccount-content{ width:100%; }
.woocommerce-MyAccount-content p, .woocommerce-MyAccount-content li, .woocommerce-MyAccount-content label{ color: rgba(255,255,255,.82); font-weight:800; }
.woocommerce table.shop_table{ border-radius: 18px; overflow:hidden; background: rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.10); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ border-color: rgba(255,255,255,.08) !important; }
.woocommerce-account .woocommerce-MyAccount-navigation{ display:block; }
@media (max-width: 980px){
  .wcAccountLayout{ grid-template-columns: 1fr; }
}


/* Woo products grid hard reset (avoid narrow columns / floats from other CSS) */
.woocommerce ul.products,
.woocommerce-page ul.products{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:14px !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
}
@media (max-width: 980px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{ grid-template-columns: 1fr !important; }
}



/* === Product card readability + micro-animations === */
.card.wcCard .body{
  position:relative;
  z-index:2;
}
.card.wcCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  pointer-events:none;
  /* slightly brighter glass behind text */
  background: radial-gradient(1200px 500px at 15% 10%, rgba(255,255,255,.10), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.28));
  opacity:.85;
  z-index:0;
}
.card.wcCard .thumb{
  position:relative;
}
.card.wcCard .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px 22px 16px 16px;
  pointer-events:none;
  /* lift contrast for title area */
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.30) 55%, rgba(0,0,0,.55));
  opacity:.75;
}
.card.wcCard .title{
  margin:0 0 6px;
  line-height:1.15;
  letter-spacing:.2px;
  font-weight:1200;
}
.card.wcCard .title a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  display:inline-block;
  position:relative;
  text-shadow: 0 10px 24px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.25);
  /* subtle animated gradient shimmer */
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(200,245,255,.92), rgba(235,215,255,.92), rgba(255,255,255,.95));
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  animation: mstuffTitleShimmer 8.5s linear infinite;
}
@keyframes mstuffTitleShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 240% 50%; }
}
.card.wcCard .title a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,229,255,.0), rgba(0,229,255,.65), rgba(124,58,237,.55), rgba(0,229,255,.0));
  transform: scaleX(.0);
  transform-origin:left;
  transition: transform .28s var(--ease);
  opacity:.9;
}
.card.wcCard:hover .title a::after{
  transform: scaleX(1);
}
.card.wcCard .desc{
  color: rgba(255,255,255,.78);
  font-weight:850;
  text-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.card.wcCard .price{
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}
.card.wcCard:hover{
  transform: translateY(-3px);
}
.card.wcCard{
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}




/* Make Add-to-cart buttons pop */
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.product_type_simple{
  background: linear-gradient(180deg, rgba(0,229,255,.20), rgba(124,58,237,.14)) !important;
  border-color: rgba(0,229,255,.28) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,229,255,.10) inset !important;
}
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.product_type_simple:hover{
  transform: translateY(-2px);
}




/* === Woo Account: MSTUFF Pro UI === */
.wcAccountLayout{ display:grid; gap:14px; grid-template-columns: 340px 1fr; align-items:start; }
@media (max-width: 980px){ .wcAccountLayout{ grid-template-columns:1fr; } }

.wcAccountSide{ position:sticky; top:94px; overflow:hidden; }
@media (max-width: 980px){ .wcAccountSide{ position:relative; top:auto; } }

.accHead{ display:flex; gap:12px; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:12px; }
.accOrb{ width:40px; height:40px; border-radius:999px; background: radial-gradient(circle at 30% 30%, rgba(0,229,255,.55), rgba(124,58,237,.35) 55%, rgba(0,0,0,0) 70%); filter: blur(.0px); box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 18px 40px rgba(0,0,0,.45); position:relative; }
.accOrb::after{ content:""; position:absolute; inset:-30px; background: radial-gradient(circle, rgba(0,229,255,.16), transparent 60%); animation: accGlow 3.8s ease-in-out infinite; }
@keyframes accGlow{ 0%,100%{ transform:scale(.92); opacity:.65; } 50%{ transform:scale(1.05); opacity:1; } }
.accTitle{ margin:0; font-size:18px; }
.accSub{ margin:0; color:rgba(255,255,255,.70); font-weight:850; }

.wcAccountNav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.wcNavLink{ display:flex; justify-content:space-between; align-items:center; padding:12px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); text-decoration:none; }
.wcNavLabel{ color:rgba(255,255,255,.90); font-weight:1100; letter-spacing:.15px; }
.wcNavChevron{ color:rgba(255,255,255,.55); font-weight:1200; transform: translateX(0); transition: transform .18s var(--ease), color .18s var(--ease); }
.wcNavLink:hover .wcNavChevron{ transform: translateX(3px); color:rgba(0,229,255,.80); }

.wcAccountNav li.is-active .wcNavLink{
  border-color: rgba(0,229,255,.22);
  background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(124,58,237,.08));
  box-shadow: 0 0 0 1px rgba(0,229,255,.10);
}
.accHint{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.75); font-weight:850; }

.wcAccountContent .woocommerce-Message,
.wcAccountContent .woocommerce-message,
.wcAccountContent .woocommerce-error,
.wcAccountContent .woocommerce-info{ border-radius:18px; }

.accDash .accHero{ display:grid; gap:14px; grid-template-columns: 1.3fr .7fr; align-items:stretch; margin-bottom:14px; }
@media (max-width: 980px){ .accDash .accHero{ grid-template-columns:1fr; } }
.accHeroLeft h1{ margin:0 0 8px; font-size:34px; line-height:1.05; letter-spacing:-.5px; }
.accHeroLeft .lead{ margin:0 0 12px; color:rgba(255,255,255,.78); font-weight:900; }
.accQuick{ display:flex; flex-wrap:wrap; gap:10px; }

.accHeroRight{ position:relative; border-radius:22px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.12); overflow:hidden; min-height:160px; }
.accScan{ position:absolute; inset:0; }
.scanGrid{ position:absolute; inset:-40px; background:
  linear-gradient(rgba(0,229,255,.12) 1px, transparent 1px),
  linear-gradient(90deg, rgba(124,58,237,.12) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.35;
  transform: rotate(3deg);
}
.scanLine{ position:absolute; left:-20%; right:-20%; top:-30%; height:2px; background: linear-gradient(90deg, transparent, rgba(0,229,255,.65), rgba(124,58,237,.55), transparent); filter: blur(.0px); animation: scanMove 2.8s linear infinite; }
@keyframes scanMove{ 0%{ transform: translateY(0); opacity:.0; } 15%{ opacity:1; } 100%{ transform: translateY(220px); opacity:.0; } }
.accBadge{ position:absolute; right:12px; bottom:12px; display:flex; gap:8px; }

.accCards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 980px){ .accCards{ grid-template-columns:1fr; } }
.accCard{ border-radius:22px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.12); padding:14px; position:relative; overflow:hidden; }
.accCard h3{ margin:0 0 8px; font-size:16px; }
.accCard p{ margin:0 0 10px; color:rgba(255,255,255,.78); font-weight:850; }
.accCard ul{ margin:0; padding-left:18px; color:rgba(255,255,255,.80); font-weight:850; }
.accCard a{ color: rgba(0,229,255,.88); text-decoration:none; font-weight:1000; }
.accCard a:hover{ text-decoration:underline; }
.accPulse{ position:absolute; inset:-40px; background: radial-gradient(circle at 30% 30%, rgba(0,229,255,.18), transparent 60%); animation: accPulse 4.2s ease-in-out infinite; }
@keyframes accPulse{ 0%,100%{ transform: scale(.92); opacity:.55; } 50%{ transform: scale(1.08); opacity:1; } }
/* =========================
   MSTUFF • Woo My Account Pro
   ========================= */

.woocommerce-account .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
}

.mstuff-account-nav {
  position: sticky;
  top: 92px;
  align-self: start;
}

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  padding: 28px 18px 60px;
}

@media (max-width: 980px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .mstuff-account-nav { position: relative; top: 0; }
}

/* Hide Woo default headings if needed */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* Card base */
.mstuff-account-card,
.mstuff-account-wrap,
.mstuff-dash-hero,
.mstuff-tile,
.woocommerce-MyAccount-content > * {
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}

/* Nav card */
.mstuff-account-card { padding: 16px; }

.mstuff-account-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mstuff-avatar img {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12);
}

.mstuff-account-user-name { font-weight: 800; font-size: 16px; }
.mstuff-account-user-sub { opacity: .72; font-size: 12px; }

.mstuff-account-navlinks { padding-top: 12px; display: grid; gap: 8px; }

.mstuff-navlink{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mstuff-navlink:hover{
  transform: translateY(-1px);
  border-color: rgba(120,200,255,.35);
  background: rgba(60,120,255,.10);
}
.mstuff-navlink.is-active{
  border-color: rgba(120,200,255,.55);
  background: rgba(60,120,255,.16);
}
.mstuff-navlabel { color: rgba(255,255,255,.92); font-weight: 700; }
.mstuff-navchev { opacity: .65; }

/* Account wrap */
.mstuff-account-wrap { padding: 18px; }

.mstuff-account-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 12px;
  padding: 6px 2px 14px;
}

.mstuff-account-title h1 { margin:0; font-size: 34px; letter-spacing: .2px; }
.mstuff-muted { margin: 6px 0 0; opacity: .72; }

.mstuff-account-actions { display:flex; gap: 10px; flex-wrap: wrap; }

.mstuff-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(120,200,255,.35);
  background: rgba(60,120,255,.22);
  color: rgba(255,255,255,.92);
  text-decoration:none !important;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mstuff-btn:hover{ transform: translateY(-1px); background: rgba(60,120,255,.30); }
.mstuff-btn-ghost{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
}
.mstuff-btn-ghost:hover{ border-color: rgba(120,200,255,.35); }

/* Dashboard */
.mstuff-dash { display: grid; gap: 16px; }

.mstuff-dash-hero{
  padding: 18px;
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
@media (max-width: 980px) { .mstuff-dash-hero { flex-direction: column; } }

.mstuff-dash-hero h2 { margin:0; font-size: 30px; }
.mstuff-dash-stats { display:flex; gap: 10px; flex-wrap: wrap; }

.mstuff-stat{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  min-width: 140px;
}
.mstuff-stat-k { opacity: .70; font-size: 12px; font-weight: 700; }
.mstuff-stat-v { font-size: 22px; font-weight: 900; margin-top: 4px; }

.mstuff-dash-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 680px) { .mstuff-dash-grid { grid-template-columns: 1fr; } }

.mstuff-tile{
  padding: 16px;
  text-decoration:none !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  border: 1px solid rgba(255,255,255,.08);
}
.mstuff-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(120,200,255,.45);
  background: rgba(60,120,255,.10);
}
.mstuff-tile-title{ font-size: 16px; font-weight: 900; color: rgba(255,255,255,.94); }
.mstuff-tile-sub{ margin-top: 6px; opacity: .72; }
.mstuff-tile-go{ margin-top: 10px; font-weight: 900; opacity: .9; }

/* Smooth reveal animations */
.mstuff-reveal{
  opacity: 0;
  transform: translateY(10px);
  animation: mstuffIn .55s ease forwards;
}
.mstuff-reveal:nth-child(2){ animation-delay: .06s; }
.mstuff-reveal:nth-child(3){ animation-delay: .10s; }
.mstuff-reveal:nth-child(4){ animation-delay: .14s; }

@keyframes mstuffIn{
  to{ opacity:1; transform: translateY(0); }
}

/* Woo tables/forms small polish */
.woocommerce table.shop_table,
.woocommerce .woocommerce-Message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-radius: 14px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.12) !important;
}