/* M4X STORE V9 — Clean White UI */
:root,
html,
html[data-m4x-theme]{
  --bg:#f7f8fc !important;
  --panel:#ffffff !important;
  --panel2:#f7f7fb !important;
  --line:#e7e8ef !important;
  --text:#14151a !important;
  --muted:#747988 !important;
  --ok:#10a36a !important;
  --bad:#e54857 !important;
  --warn:#a66a00 !important;
  --v8-accent:#6d5dfc !important;
  --v8-accent2:#a849ff !important;
  --v8-shadow:0 12px 35px rgba(29,33,55,.08) !important;
  color-scheme:light;
}

html body,
html[data-m4x-theme] body{
  background:
    radial-gradient(circle at 86% 0,rgba(158,124,255,.10),transparent 25%),
    radial-gradient(circle at 0 22%,rgba(89,151,255,.08),transparent 24%),
    #f7f8fc !important;
  color:var(--text) !important;
}

*{scrollbar-width:thin;scrollbar-color:#d6d8e3 transparent}
::selection{background:#cfc9ff;color:#17131f}

.wrap{max-width:1280px;padding:12px 18px 104px}
.top{
  min-height:66px;
  padding:10px 4px;
  background:rgba(247,248,252,.88) !important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(224,226,235,.72);
}
.brand{font-size:27px;font-weight:1000;letter-spacing:-1.5px;color:#121318}
.brand span{opacity:1;background:linear-gradient(90deg,#6f5eff,#b14cff);-webkit-background-clip:text;background-clip:text;color:transparent}

.top .btn,
.top .btn.ghost{
  color:#17181f !important;
  background:#fff !important;
  border-color:#e6e7ef !important;
  box-shadow:0 7px 22px rgba(34,38,60,.06);
}
.top #accountQuick{
  max-width:min(48vw,310px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-radius:16px;padding:10px 14px 10px 42px;position:relative;
}
.top #accountQuick::before{
  content:'M4X';position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
  background:#11131a;color:#fff;font-size:9px;font-weight:1000;
}
.cartQuick{border-radius:15px!important;min-width:48px}

.btn{
  border-color:#e3e5ed;background:linear-gradient(135deg,#675cff,#ab49ff);color:#fff;
  border-radius:13px;box-shadow:0 8px 18px rgba(103,92,255,.14);
}
.btn.ghost{background:#fff;color:#252731;border-color:#e3e5ed;box-shadow:none}
.btn.bad{background:#fff1f2;color:#c22e3d;border-color:#ffd9dd}
.btn.okbtn{background:#ebfbf4;color:#087a50;border-color:#c9f2df}

.search,.input,.textarea,.select{
  background:#fff!important;color:#17181f!important;border-color:#e3e5ed!important;
  box-shadow:0 8px 24px rgba(35,39,60,.04);
}
.search::placeholder,.input::placeholder,.textarea::placeholder{color:#a2a6b3}

.card,.item,.sheet,.stat,.meta>div{
  background:#fff!important;color:#17181f!important;border-color:#e5e7ef!important;
  box-shadow:0 10px 30px rgba(31,35,55,.055)!important;
}
.card{border-radius:20px;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(31,35,55,.09)!important}
.cover{background-color:#eef1f7}
.pill{background:rgba(18,20,28,.78);color:#fff;backdrop-filter:blur(8px)}
.pill.right{background:rgba(28,168,112,.9)}
.stock,.muted{color:var(--muted)!important}

.modal{background:rgba(25,28,38,.32);backdrop-filter:blur(7px)}
.sheet{border-radius:26px}
.notice{background:#fff8e8;border-color:#f4dfad;color:#775315}

.bottomnav{
  background:rgba(255,255,255,.92)!important;
  border-color:#e4e6ed!important;
  box-shadow:0 12px 34px rgba(29,33,52,.12)!important;
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.navbtn{color:#7b7f8c}
.navbtn.active{background:linear-gradient(135deg,#6d5dfc,#a94cff);color:#fff;box-shadow:0 6px 16px rgba(109,93,252,.2)}
.navbtn::before{display:block;font-size:15px;line-height:1;margin-bottom:4px}
.navbtn[data-view="store"]::before{content:'⌂'}
.navbtn[data-view="library"]::before{content:'▦'}
.navbtn[data-view="rewards"]::before{content:'✦'}
.navbtn[data-view="community"]::before{content:'♙'}
.navbtn[data-view="notifications"]::before{content:'◉'}
.navbtn[data-view="account"]::before{content:'○'}

.updatebar{background:#effbf5;border-color:#c5eedb;color:#176845}

/* Store home */
.m4x-home{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.m4x-main{min-width:0}
.m4x-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:82px}
.m4x-hero{
  position:relative;overflow:hidden;min-height:300px;padding:42px 40px;border-radius:26px;
  border:1px solid #e7e7f1;background:
    radial-gradient(circle at 76% 40%,rgba(146,119,255,.18),transparent 23%),
    radial-gradient(circle at 88% 72%,rgba(93,169,255,.14),transparent 23%),
    linear-gradient(115deg,#fff 0%,#fbf9ff 46%,#f1f3ff 100%);
  box-shadow:0 12px 34px rgba(34,38,60,.06);
}
.m4x-hero::before{
  content:'M4X';position:absolute;right:8%;top:50%;transform:translateY(-50%) rotate(-8deg);
  width:210px;height:210px;border-radius:52px;display:grid;place-items:center;
  font-size:54px;font-weight:1000;letter-spacing:-4px;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(116,100,255,.78) 48%,rgba(174,79,255,.85));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 3px 7px rgba(255,255,255,.8),0 30px 60px rgba(110,89,255,.22);
  text-shadow:0 3px 18px rgba(82,61,197,.32);
}
.m4x-hero::after{
  content:'';position:absolute;right:-40px;bottom:-95px;width:410px;height:240px;
  border:2px solid rgba(120,106,255,.13);border-radius:50%;transform:rotate(-14deg);
}
.m4x-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:#f0edff;color:#6b55f5;font-weight:850;font-size:12px}
.m4x-hero h1{position:relative;z-index:1;margin:18px 0 10px;font-size:clamp(42px,5vw,68px);line-height:.92;letter-spacing:-3.5px;max-width:570px}
.m4x-hero h1 span{background:linear-gradient(90deg,#725eff,#a94dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.m4x-hero p{position:relative;z-index:1;font-size:16px;max-width:540px;line-height:1.65;margin:0;color:#686e7d}
.m4x-hero-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.m4x-promo{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:14px 0;padding:14px 17px;border:1px solid #e5e2ff;border-radius:18px;background:linear-gradient(90deg,#fbf9ff,#f4f1ff);color:#383149}
.m4x-promo strong{color:#6d55f6}

.m4x-search-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.m4x-search-row .search{padding:15px 17px;border-radius:17px;font-size:16px}
.cats{padding:12px 0 4px;gap:8px}
.chip,.tab,.themeChoice{background:#fff!important;color:#343741!important;border-color:#e4e6ed!important;box-shadow:none!important}
.chip.active,.tab.active,.themeChoice.active{background:#f1efff!important;color:#6756ef!important;border-color:#d9d3ff!important;outline:none!important}

.m4x-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 2px 11px}
.m4x-section-head h2{margin:0;font-size:22px;letter-spacing:-.6px}
.m4x-linkbtn{border:0;background:transparent;color:#6d5dfc;font-weight:800;padding:6px}
.m4x-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.m4x-product-card .cover{aspect-ratio:1.35}
.m4x-product-card .cardbody{padding:12px}
.m4x-product-card .name{min-height:38px;font-size:15px;line-height:1.28}
.m4x-product-card .row{margin-top:9px;align-items:flex-end}
.m4x-product-card .btn{padding:9px 12px;border-radius:11px;font-size:13px}
.m4x-cart-add{margin-top:8px;width:100%;background:#fff!important;color:#5f55d8!important;border-color:#dad6ff!important;box-shadow:none!important}

.m4x-feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}
.m4x-feature{display:flex;gap:10px;align-items:center;padding:13px;border:1px solid #e8e9ef;border-radius:16px;background:#fff}
.m4x-feature i{font-style:normal;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1efff}
.m4x-feature b{display:block;font-size:13px}.m4x-feature small{color:#8a8e9b}

.m4x-side-card{border:1px solid #e5e7ee;background:#fff;border-radius:22px;padding:17px;box-shadow:0 10px 30px rgba(31,35,55,.05)}
.m4x-side-title{font-size:16px;font-weight:900;margin-bottom:12px}
.m4x-wallet{background:linear-gradient(145deg,#f7f4ff,#eef4ff);border-color:#e2defb}
.m4x-userline{font-size:13px;color:#7f8491;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m4x-balance{font-size:27px;font-weight:1000;letter-spacing:-1px;margin-bottom:14px}
.m4x-side-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.m4x-side-actions .btn{width:100%}
.m4x-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m4x-quick button{min-height:76px;border:1px solid #e7e8ee;background:#fff;border-radius:15px;color:#343741;padding:8px;font-size:11px;font-weight:800}
.m4x-quick button span{display:block;font-size:21px;margin-bottom:6px}
.m4x-notice{padding:10px 0;border-bottom:1px solid #eff0f4}.m4x-notice:last-child{border-bottom:0}.m4x-notice b{display:block;font-size:13px}.m4x-notice small{color:#969aa6}
.m4x-community{background:linear-gradient(145deg,#fff,#f5f0ff)}
.m4x-community p{font-size:13px;color:#787d8a;line-height:1.5}

/* V8/community/account light compatibility */
.profileHead,.quoteBox,.quotedMsg,.replyComposer,.pinnedChat{background:#fff!important;color:#17181f!important;border-color:#e5e7ef!important}
.accountBadge{background:#f3f4f8;color:#454957;border-color:#e1e3ea}
.chatBubble{background:#fff!important;color:#17181f;border-color:#e4e6ed;box-shadow:0 8px 24px rgba(31,35,55,.05)}
.chatMessage.mine .chatBubble{background:linear-gradient(135deg,#f2efff,#eef7ff)!important}
.chatComposer{background:rgba(255,255,255,.94)!important;border-color:#e4e6ed!important;box-shadow:0 12px 32px rgba(31,35,55,.09)}
.chatComposer textarea{color:#17181f!important}.chatIconBtn{background:#fff;color:#343741;border-color:#e3e5ed}

/* Admin also uses the same clean skin */
.adminApp{max-width:1280px}.stat .num{color:#181920}
input[type=file]::file-selector-button{background:#f0edff;color:#5e50e5}

@media(max-width:1050px){
  .m4x-home{grid-template-columns:1fr 285px}
  .m4x-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .m4x-hero::before{width:180px;height:180px;right:5%;font-size:46px}
}
@media(max-width:850px){
  .m4x-home{grid-template-columns:1fr}.m4x-side{position:static;display:grid;grid-template-columns:1fr 1fr}
  .m4x-side-card:nth-child(3),.m4x-side-card:nth-child(4){display:none}
  .m4x-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m4x-feature-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .wrap{padding:8px 10px 92px}.top{min-height:58px}.brand{font-size:22px}.top #accountQuick{font-size:11px;max-width:52vw;padding:9px 10px 9px 36px}.top #accountQuick::before{width:23px;height:23px;font-size:8px}
  .m4x-hero{min-height:250px;padding:28px 20px}.m4x-hero h1{font-size:43px;letter-spacing:-2.7px;max-width:310px}.m4x-hero p{font-size:14px;max-width:270px}.m4x-hero::before{width:118px;height:118px;right:-13px;top:42%;font-size:30px;border-radius:31px}.m4x-hero::after{display:none}.m4x-kicker{font-size:10px}
  .m4x-promo{padding:12px;font-size:13px}.m4x-side{grid-template-columns:1fr}.m4x-side-card:nth-child(2){display:none}
  .m4x-product-grid{gap:9px}.m4x-product-card .name{font-size:13px;min-height:34px}.m4x-product-card .price{font-size:13px}.m4x-product-card .btn{padding:8px 10px;font-size:12px}
  .m4x-feature-strip{grid-template-columns:1fr 1fr}.m4x-feature{padding:10px}.m4x-feature small{display:none}
  .bottomnav{bottom:7px;width:calc(100% - 14px);padding:5px;gap:1px}.bottomnav .navbtn{font-size:9px;padding:7px 1px}
}