:root{
  --ink:#14171f;--sub:#6f7583;--weak:#a0a6b3;--bg:#f4f6fa;--card:#ffffff;--line:#e9edf4;
  --primary:#3157ff;--primary-dark:#1f2a44;--green:#16a34a;--shadow:0 16px 40px rgba(20,23,31,.07);
}
*{box-sizing:border-box}
body{margin:0;background:#e9edf4;font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",sans-serif;color:var(--ink)}
a{text-decoration:none;color:inherit}button,input,select{font-family:inherit}
.app-device{position:relative;max-width:430px;min-height:100vh;margin:0 auto;background:#f7f8fb;padding:18px 18px 98px;overflow:hidden}
.home-top,.page-top{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px}
.logo-word{font-size:26px;font-weight:1000;letter-spacing:-2px;color:#191d2b}.home-top p{margin:5px 0 0;color:var(--sub);font-size:13px}
.top-buttons{display:flex;gap:8px}.top-buttons button,.page-top a,.page-top span{width:38px;height:38px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;place-items:center;color:#596070;font-size:12px;font-weight:900}
.page-top h1{font-size:19px;margin:0}.page-top a{font-size:25px}
.balance-card.clean{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:28px;padding:21px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.balance-card.clean:after{content:"";position:absolute;right:-80px;top:-80px;width:180px;height:180px;border-radius:50%;background:#eef2ff}
.balance-top,.balance-card h1,.balance-grid,.balance-card small{position:relative;z-index:1}.balance-top{display:flex;align-items:center;justify-content:space-between;font-size:12px}.balance-top span{background:#f1f4ff;color:#3157ff;padding:8px 11px;border-radius:999px;font-weight:800}.balance-top a{color:#3157ff;font-weight:900}.balance-card small{display:block;margin:23px 0 5px;color:var(--sub)}.balance-card h1{font-size:34px;letter-spacing:-1.4px;margin:0 0 18px}.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:14px}.balance-grid em{display:block;font-style:normal;color:var(--sub);font-size:12px;margin-bottom:5px}.balance-grid b{font-size:15px}
.quick-actions.simple{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}.quick-actions.simple a{background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px 12px;box-shadow:0 10px 24px rgba(20,23,31,.04)}.quick-actions.simple b,.quick-actions.simple small{display:block}.quick-actions.simple b{font-size:13px}.quick-actions.simple small{font-size:11px;color:var(--sub);margin-top:5px}
.event-slider.clean{display:flex;gap:12px;overflow-x:auto;margin-top:22px;padding-bottom:4px}.event-card.clean{min-width:260px;background:#1f2a44;color:#fff;border-radius:24px;padding:18px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.event-card.clean span{font-size:10px;background:rgba(255,255,255,.13);padding:6px 8px;border-radius:999px;letter-spacing:.6px}.event-card.clean h3{margin:12px 0 5px;font-size:17px}.event-card.clean p{margin:0;color:#c9d2e2;font-size:12px}.event-card.clean img{width:64px;height:42px;border-radius:14px;object-fit:contain;background:#fff;padding:5px}
.block{margin-top:25px}.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.block-head h2{font-size:18px;margin:0;letter-spacing:-.5px}.block-head a{font-size:12px;color:var(--sub);font-weight:700}
.brand-grid.pro{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.brand-item.pro{text-align:center;position:relative}.brand-logo-img{height:54px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 10px 24px rgba(20,23,31,.04);overflow:hidden}.brand-logo-img img{width:100%;height:100%;object-fit:contain}.brand-item.pro b{display:block;font-size:11px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-item.pro em{position:absolute;right:-2px;top:-6px;background:#111827;color:#fff;border-radius:999px;padding:3px 5px;font-size:9px;font-style:normal}
.cat-grid.pro{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.cat-grid.pro a{text-align:center}.cat-grid.pro img{width:48px;height:48px;border-radius:17px;display:block;margin:0 auto 7px;box-shadow:0 8px 18px rgba(20,23,31,.04)}.cat-grid.pro span{font-size:11px;color:#424856}
.product-list-pro{display:flex;flex-direction:column;gap:10px}.product-pro{background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 10px 24px rgba(20,23,31,.04);display:flex;gap:12px;align-items:center}.product-thumb{width:74px;height:74px;border-radius:18px;background:#f7f8fb;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:contain}.product-pro div:nth-child(2){flex:1}.product-pro span{display:block;font-size:11px;color:var(--sub);font-weight:800}.product-pro b{display:block;font-size:14px;margin:4px 0;line-height:1.35}.product-pro em{font-style:normal;color:var(--primary);font-size:12px;font-weight:900}
.search-ui{display:flex;height:50px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:0 8px 0 14px;box-shadow:0 10px 24px rgba(20,23,31,.04);margin-bottom:13px}.search-ui input{border:0;outline:0;flex:1;background:transparent}.search-ui button{border:0;background:transparent;font-size:18px;color:var(--sub)}
.filter-row{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px}.filter-row a{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 13px;font-size:12px;color:#4b5563}.filter-row .active{background:#111827;color:#fff;border-color:#111827}
.shop-list-pro{display:flex;flex-direction:column;gap:12px}.shop-list-pro article{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 10px 24px rgba(20,23,31,.04)}.shop-logo-img{width:76px;height:54px;border-radius:17px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.shop-logo-img img{width:100%;height:100%;object-fit:contain}.shop-meta{flex:1;min-width:0}.shop-meta b{display:block;font-size:15px}.shop-meta p{margin:4px 0;color:var(--sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-meta small{font-size:12px;color:var(--primary);font-weight:900}.shop-list-pro article>a{background:#111827;color:#fff;border-radius:13px;padding:10px 12px;font-size:12px;font-weight:900}
.reward-card-v5.clean{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line);border-radius:26px;padding:21px;box-shadow:var(--shadow)}.reward-card-v5.clean:after{display:none}.reward-card-v5.clean span{color:var(--sub)}.reward-card-v5.clean h2{font-size:31px;margin:8px 0 15px}.reward-card-v5.clean div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reward-card-v5.clean b{background:#f5f7fb;border-radius:14px;padding:10px;font-size:12px;color:#374151}.status-tabs{display:flex;gap:14px;margin:20px 0 10px;border-bottom:1px solid var(--line)}.status-tabs button{border:0;background:transparent;padding:0 2px 12px;color:var(--sub)}.status-tabs .active{color:var(--ink);font-weight:1000;border-bottom:3px solid var(--ink)}
.reward-list-pro{display:flex;flex-direction:column;gap:10px}.reward-list-pro article{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px;box-shadow:0 10px 24px rgba(20,23,31,.04)}.mini-logo-img{width:44px;height:44px;border:1px solid var(--line);border-radius:15px;background:#fff;display:grid;place-items:center;overflow:hidden}.mini-logo-img img{width:100%;height:100%;object-fit:contain}.reward-list-pro div{flex:1}.reward-list-pro b,.reward-list-pro small{display:block}.reward-list-pro small{font-size:11px;color:var(--sub);margin-top:4px}.reward-list-pro strong{font-size:13px}.empty-app{text-align:center;color:var(--sub);padding:44px 0}
.withdraw-card-v5{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:26px;padding:21px;box-shadow:var(--shadow);position:relative}.withdraw-card-v5 small{color:var(--sub)}.withdraw-card-v5 h1{font-size:31px;margin:8px 0}.withdraw-card-v5 i{display:none}.form-v5,.profile-v5,.menu-v5,.invite-v5,.invite-result,.invite-guide{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 10px 24px rgba(20,23,31,.04);margin-top:14px}.form-v5 label{display:block;font-weight:1000;font-size:13px;margin:15px 0 8px}.amount-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.amount-grid button{border:0;background:#f3f4f8;border-radius:13px;padding:10px 2px;font-size:12px;color:#374151}.money-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:16px;padding:0 12px}.money-input input{border:0;margin:0;height:48px;flex:1}input,select{width:100%;height:48px;border:1px solid var(--line);border-radius:16px;padding:0 14px;background:#fff;margin-bottom:9px}.form-v5 p{color:var(--sub);font-size:12px;line-height:1.6}.primary-btn{border:0;border-radius:16px;background:#111827;color:#fff;font-weight:1000;padding:14px 18px;cursor:pointer}.primary-btn.full{width:100%}.toast-success,.alert-error{border-radius:16px;padding:13px 14px;margin-bottom:12px;font-size:13px}.toast-success{background:#ecfdf5;color:#047857}.alert-error{background:#fef2f2;color:#dc2626}
.profile-v5{display:flex;align-items:center;gap:13px}.avatar-v5{width:60px;height:60px;border-radius:22px;background:#f2f4ff;display:grid;place-items:center;font-size:0}.avatar-v5:before{content:"";width:28px;height:28px;border-radius:50%;background:#111827;display:block}.profile-v5 div{flex:1}.profile-v5 h2{margin:0 0 5px}.profile-v5 p{margin:0;color:var(--sub);font-size:12px}.profile-v5 a{font-size:12px;color:var(--primary);font-weight:1000}.my-summary,.invite-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.my-summary div,.invite-result div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;box-shadow:0 10px 24px rgba(20,23,31,.04)}.my-summary small,.invite-result small{display:block;color:var(--sub);font-size:12px}.my-summary b,.invite-result b{display:block;margin-top:5px}.menu-v5{padding:6px}.menu-v5 a{display:flex;align-items:center;justify-content:space-between;padding:16px 12px;border-bottom:1px solid var(--line);font-size:14px}.menu-v5 a:last-child{border-bottom:0}.menu-v5 em{font-style:normal;background:#eef2ff;color:var(--primary);padding:5px 8px;border-radius:999px;font-size:11px;font-weight:900}
.invite-v5{position:relative}.invite-v5 small{color:var(--sub)}.invite-v5 h2{font-size:28px;margin:8px 0}.invite-v5 p{background:#f6f7fb;border-radius:14px;padding:12px;font-size:12px;color:#4b5563}.copy-btn{position:absolute;right:18px;top:30px;border:0;background:#111827;color:#fff;border-radius:14px;padding:10px 14px;font-weight:1000}.share-v5{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.share-v5 a{background:#fff;border:1px solid var(--line);border-radius:20px;text-align:center;padding:14px 8px;box-shadow:0 10px 24px rgba(20,23,31,.04)}.share-v5 b{display:block;font-size:11px;margin-top:6px}.invite-guide h3{margin:0 0 12px}.invite-guide p{background:#f7f8fb;border-radius:14px;padding:12px;margin:8px 0;font-size:13px}
.tabbar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);max-width:430px;width:100%;height:78px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);z-index:50}.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#9ca3af}.tabbar span{font-size:18px;line-height:1}.tabbar b{font-size:10px}.tabbar .active{color:#111827}
.auth-body{background:#f2f4f8}.auth-screen{max-width:960px;min-height:100vh;margin:0 auto;padding:38px;display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:center}.auth-hero{padding:20px}.app-logo{font-size:36px;font-weight:1000;color:#111827;letter-spacing:-2px}.app-logo span{display:block;font-size:11px;letter-spacing:1.4px;color:#8b90a0}.auth-hero h1{font-size:43px;line-height:1.22;letter-spacing:-2px}.auth-hero h1 b{color:var(--primary)}.auth-hero p{font-size:17px;line-height:1.7;color:#4b5563}.auth-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.auth-points div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px}.auth-points div:first-letter{font-size:0}.auth-points b{display:block;font-size:12px}.auth-panel{background:#fff;border:1px solid var(--line);border-radius:30px;padding:26px;box-shadow:var(--shadow)}.auth-panel h2{margin:0 0 18px}.auth-panel label{display:block;font-size:13px;font-weight:1000;margin:13px 0 7px}.auth-panel p{text-align:center;color:var(--sub);font-size:13px}.auth-panel p a{color:var(--primary);font-weight:1000}
.admin-wrap{max-width:1120px;margin:0 auto;padding:30px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.admin-top a,.admin-tabs a{background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 14px;color:var(--primary);font-weight:900}.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.admin-tabs .active{background:#111827;color:#fff}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.admin-grid div,.admin-form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}.admin-grid small{display:block;color:var(--sub)}.admin-grid b{font-size:28px;color:#111827}.admin-form{margin-bottom:18px}.admin-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.admin-table th,.admin-table td{border-bottom:1px solid var(--line);padding:13px;text-align:left;font-size:14px}.admin-table th{background:#fafbfe}.admin-table button{border:0;border-radius:9px;padding:7px 10px;margin-left:6px;cursor:pointer}.mini-logo{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;display:inline-grid;place-items:center;background:#fff;overflow:hidden}.mini-logo img{width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.auth-screen{display:block;padding:20px}.auth-hero h1{font-size:32px}.auth-points{grid-template-columns:1fr}.brand-grid.pro{grid-template-columns:repeat(4,1fr)}.admin-grid,.admin-form-grid{grid-template-columns:1fr}.admin-table{display:block;overflow-x:auto}}



/* =========================
   SSOLSSOL v7 Purple Shopping App UI
   ========================= */
:root{
  --purple:#6C4DFF;
  --purple2:#8B5CF6;
  --purple-soft:#F2EEFF;
  --purple-soft2:#F8F6FF;
  --ink:#171923;
  --sub:#707789;
  --line:#EAEDF4;
  --bg:#F6F7FB;
  --card:#FFFFFF;
  --shadow:0 18px 48px rgba(36,29,80,.08);
  --shadow-soft:0 10px 24px rgba(36,29,80,.05);
}
body{background:#ECEFF6;}
.app-device{
  background:linear-gradient(180deg,#FBFAFF 0%,#F6F7FB 32%,#F6F7FB 100%);
}
.home-top.v7{margin-top:6px;}
.logo-word{color:var(--purple);letter-spacing:-2px;}
.top-buttons button{
  color:var(--purple);
  border-color:#EEE9FF;
  background:#fff;
}
.hero-v7{
  background:linear-gradient(135deg,#6C4DFF 0%,#7C5CFF 48%,#A875FF 100%);
  color:#fff;
  border-radius:30px;
  padding:21px;
  box-shadow:0 22px 46px rgba(108,77,255,.28);
  position:relative;
  overflow:hidden;
}
.hero-v7:before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-72px;
  top:-76px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
}
.hero-v7:after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:12px;
  bottom:-76px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.hero-v7>*{position:relative;z-index:1;}
.hero-v7-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;}
.hero-v7-top span{background:rgba(255,255,255,.16);padding:8px 11px;border-radius:999px;font-weight:800;}
.hero-v7-top a{font-weight:900;opacity:.9;}
.hero-v7 small{display:block;margin:22px 0 4px;color:rgba(255,255,255,.72);}
.hero-v7 h1{margin:0;font-size:35px;letter-spacing:-1.4px;}
.hero-v7-actions{display:flex;gap:9px;margin-top:20px;}
.hero-v7-actions a{
  flex:1;
  text-align:center;
  border-radius:16px;
  padding:13px 10px;
  font-size:13px;
  font-weight:1000;
  background:#fff;
  color:var(--purple);
}
.hero-v7-actions a:nth-child(2){
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.quick-v7{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:13px;
}
.quick-v7 a{
  background:#fff;
  border:1px solid #EEE9FF;
  border-radius:22px;
  padding:15px 12px;
  box-shadow:var(--shadow-soft);
}
.quick-v7 b,.quick-v7 small{display:block;}
.quick-v7 b{font-size:14px;color:var(--ink);}
.quick-v7 small{font-size:11px;color:var(--sub);margin-top:5px;}
.search-card-v7{margin-top:20px;}
.search-card-v7 a{
  height:50px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  color:#979EAD;
  display:flex;
  align-items:center;
  padding:0 16px;
  box-shadow:var(--shadow-soft);
  font-size:14px;
}
.search-card-v7 a:before{
  content:"";
  width:18px;
  height:18px;
  border:2px solid #B3B8C6;
  border-radius:50%;
  margin-right:10px;
  box-shadow:8px 8px 0 -7px #B3B8C6;
}
.banner-v7{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  margin-top:22px;
}
.banner-v7 a{
  min-width:262px;
  background:#fff;
  border:1px solid #EEE9FF;
  border-radius:24px;
  padding:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow-soft);
}
.banner-v7 span{
  display:inline-flex;
  background:var(--purple-soft);
  color:var(--purple);
  border-radius:999px;
  padding:6px 8px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.5px;
}
.banner-v7 b{display:block;font-size:16px;margin:11px 0 5px;}
.banner-v7 small{display:block;color:var(--sub);font-size:12px;}
.banner-v7 img{
  width:66px;
  height:44px;
  object-fit:contain;
  border-radius:14px;
  background:#F9FAFE;
  padding:4px;
}
.block-head.v7 h2{
  font-size:18px;
  letter-spacing:-.6px;
}
.block-head.v7 a{
  color:var(--purple);
  font-weight:900;
}
.brand-grid-v7{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:11px;
}
.brand-grid-v7 a{
  text-align:center;
  position:relative;
}
.brand-grid-v7 span{
  height:56px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.brand-grid-v7 img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand-grid-v7 b{
  display:block;
  margin-top:7px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-grid-v7 em{
  position:absolute;
  right:-3px;
  top:-6px;
  background:var(--purple);
  color:#fff;
  border-radius:999px;
  padding:3px 5px;
  font-size:9px;
  font-style:normal;
  font-weight:900;
}
.category-v7{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.category-v7 a{text-align:center;}
.category-v7 img{
  width:48px;
  height:48px;
  border-radius:17px;
  display:block;
  margin:0 auto 7px;
  box-shadow:var(--shadow-soft);
  background:#fff;
}
.category-v7 span{
  font-size:11px;
  color:#4C5260;
}
.reward-products-v7{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.reward-products-v7 a{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:12px;
  box-shadow:var(--shadow-soft);
  display:flex;
  gap:12px;
  align-items:center;
}
.reward-thumb-v7{
  width:76px;
  height:76px;
  border-radius:20px;
  background:#FAFAFE;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.reward-thumb-v7 img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.reward-products-v7 div:nth-child(2){flex:1;}
.reward-products-v7 span{
  display:block;
  font-size:11px;
  color:var(--sub);
  font-weight:800;
}
.reward-products-v7 b{
  display:block;
  font-size:14px;
  margin:5px 0;
  line-height:1.35;
}
.reward-products-v7 em{
  font-style:normal;
  color:var(--purple);
  font-size:12px;
  font-weight:900;
}
.tabbar .active{color:var(--purple);}
.primary-btn{
  background:linear-gradient(135deg,var(--purple),var(--purple2))!important;
}
.filter-row .active{
  background:var(--purple)!important;
  border-color:var(--purple)!important;
}
.shop-list-pro article>a{
  background:var(--purple)!important;
}

/* Auth v7 */
.auth-body-v7{
  background:#EEEFF6;
  margin:0;
}
.auth-phone-v7{
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  background:linear-gradient(180deg,#F8F5FF 0%,#FFFFFF 36%,#F7F8FB 100%);
  padding:28px 22px;
}
.auth-visual-v7{
  padding:8px 2px 18px;
}
.auth-visual-v7.compact{
  padding-bottom:10px;
}
.ssol-logo-v7{
  width:66px;
  height:66px;
  border-radius:23px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:20px;
  box-shadow:0 18px 36px rgba(108,77,255,.28);
  margin-bottom:22px;
}
.auth-visual-v7 h1{
  margin:0;
  font-size:30px;
  line-height:1.22;
  letter-spacing:-1.5px;
  color:#171923;
}
.auth-visual-v7 p{
  margin:10px 0 0;
  color:#777F91;
  font-size:14px;
}
.auth-brand-row{
  display:flex;
  gap:10px;
  margin-top:20px;
}
.auth-brand-row img{
  width:76px;
  height:48px;
  border-radius:17px;
  background:#fff;
  border:1px solid var(--line);
  object-fit:contain;
  box-shadow:var(--shadow-soft);
}
.auth-card-v7{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:22px;
  box-shadow:var(--shadow);
}
.auth-card-v7 h2{
  margin:0 0 18px;
  font-size:22px;
  letter-spacing:-.8px;
}
.auth-card-v7 label{
  display:block;
  font-size:13px;
  font-weight:900;
  margin:13px 0 7px;
}
.auth-card-v7 input{
  height:50px;
  border-radius:16px;
  background:#FAFBFE;
}
.auth-card-v7 .primary-btn{
  height:52px;
  margin-top:8px;
  font-size:15px;
}
.auth-bottom-v7{
  margin:16px 0 0;
  text-align:center;
  color:var(--sub);
  font-size:13px;
}
.auth-bottom-v7 a{
  color:var(--purple);
  font-weight:1000;
}
.alert-error{
  border:0;
  background:#FFF1F3;
  color:#D92D4B;
  border-radius:15px;
  padding:12px 13px;
  font-size:13px;
}
@media(max-width:760px){
  .brand-grid-v7{grid-template-columns:repeat(4,1fr);}
}



/* =========================
   SSOLSSOL v8 3D Category / Mockup Match
   ========================= */
.app-device{
  background:#fff;
  box-shadow:0 20px 70px rgba(38,45,70,.10);
}
.home-top.v7{
  margin-top:8px;
}
.logo-word{
  color:#6C4DFF!important;
  font-weight:1000;
}
.top-buttons button{
  font-size:0;
  position:relative;
}
.top-buttons button:first-child:before{
  content:"";
  width:17px;height:17px;
  border:2px solid #23283A;
  border-radius:9px 9px 7px 7px;
  border-bottom-color:transparent;
}
.top-buttons button:first-child:after{
  content:"";
  position:absolute;
  bottom:9px;
  width:6px;height:2px;
  background:#23283A;
  border-radius:99px;
}
.top-buttons button:nth-child(2):before{
  content:"";
  width:17px;height:17px;
  border:2px solid #23283A;
  border-radius:50%;
}
.top-buttons button:nth-child(2):after{
  content:"";
  position:absolute;
  width:8px;height:2px;
  background:#23283A;
  transform:rotate(45deg);
  right:8px;bottom:10px;
  border-radius:99px;
}
.hero-v7{
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 25% 110%, rgba(30,0,100,.18), transparent 36%),
    linear-gradient(135deg,#7D4DFF 0%,#6B35E8 46%,#8A55FF 100%);
}
.hero-v7 h1{
  font-size:32px;
}
.hero-v7-actions a:first-child{
  background:rgba(54,30,126,.35);
  color:#fff;
}
.hero-v7-actions a:nth-child(2){
  display:none;
}
.quick-v7{
  display:none;
}
.search-card-v7{
  display:none;
}
.banner-v7 a{
  min-width:100%;
  background:linear-gradient(135deg,#7D4DFF,#9C5CFF);
  color:#fff;
  border:0;
  border-radius:18px;
}
.banner-v7 a small{
  color:rgba(255,255,255,.82);
}
.banner-v7 a span{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.banner-v7 img{
  width:88px;
  height:64px;
  border:0;
  background:rgba(255,255,255,.18);
}
.brand-grid-v7{
  display:flex;
  overflow-x:auto;
  gap:13px;
  padding-bottom:4px;
}
.brand-grid-v7 a{
  min-width:58px;
}
.brand-grid-v7 span{
  height:58px;
  border-radius:50%;
}
.brand-grid-v7 em{
  position:static;
  display:block;
  background:transparent;
  color:#6C4DFF;
  padding:0;
  margin-top:3px;
  font-size:10px;
}
.category-v7{
  grid-template-columns:repeat(5,1fr);
  gap:13px 12px;
}
.category-v7 img{
  width:54px;
  height:54px;
  border-radius:16px;
  box-shadow:0 12px 22px rgba(108,77,255,.10);
}
.category-v7 span{
  font-weight:800;
  color:#2A2F3B;
}
.reward-products-v7{
  flex-direction:row;
  overflow-x:auto;
}
.reward-products-v7 a{
  min-width:142px;
  display:block;
  border-radius:14px;
  padding:10px;
}
.reward-thumb-v7{
  width:100%;
  height:116px;
  border-radius:12px;
  background:linear-gradient(145deg,#F4F0FF,#FFFFFF);
}
.reward-products-v7 span{
  margin-top:8px;
  color:#D02020;
}
.reward-products-v7 b{
  font-size:12px;
  line-height:1.35;
  min-height:32px;
}
.reward-products-v7 em{
  color:#6C4DFF;
}
.block{
  margin-top:22px;
}
.block-head.v7 h2{
  font-size:18px;
}

/* Full category page */
.category-page-top .search-link{
  font-size:18px;
  color:#111827;
}
.category-page-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding-top:10px;
}
.category-page-grid a{
  min-height:150px;
  border:1px solid #EAEDF4;
  background:#fff;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 30px rgba(30,40,70,.04);
}
.category-page-grid img{
  width:74px;
  height:74px;
  object-fit:contain;
  margin-bottom:13px;
  filter:drop-shadow(0 10px 12px rgba(108,77,255,.13));
}
.category-page-grid b{
  font-size:14px;
  color:#252B38;
  letter-spacing:-.3px;
}

/* Shopping list closer to mockup */
.shop-list-pro article{
  border-radius:14px;
  box-shadow:none;
  border-left:0;
  border-right:0;
  border-top:0;
  padding:13px 2px;
}
.shop-logo-img{
  border:0;
  width:82px;
}
.shop-list-pro article>a{
  border-radius:8px;
  background:#6C4DFF!important;
  padding:9px 13px;
}

/* Product detail */
.product-detail-v8{
  margin-top:4px;
}
.product-main-image{
  height:360px;
  border-radius:0;
  background:linear-gradient(145deg,#CEC2FF,#F7F3FF);
  display:grid;
  place-items:center;
  position:relative;
  margin:0 -18px;
}
.product-main-image img{
  width:72%;
  height:72%;
  object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(40,30,90,.16));
}
.product-main-image span{
  position:absolute;
  right:18px;
  bottom:16px;
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:6px 9px;
  border-radius:999px;
  font-size:11px;
}
.product-detail-body{
  padding:18px 0;
}
.product-detail-body>img{
  width:64px;
  height:34px;
  object-fit:contain;
}
.product-detail-body p{
  margin:8px 0 5px;
  color:#6f7583;
  font-size:13px;
}
.product-detail-body h2{
  margin:0 0 10px;
  font-size:17px;
  letter-spacing:-.4px;
}
.product-detail-body strong{
  display:block;
  font-size:25px;
  letter-spacing:-.8px;
  margin-bottom:13px;
}
.product-badges{
  display:flex;
  gap:7px;
  margin-bottom:15px;
}
.product-badges span{
  background:#F5F7FB;
  color:#596070;
  padding:7px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.product-cta{
  display:block;
  background:linear-gradient(135deg,#6C4DFF,#8B5CF6);
  color:#fff;
  text-align:center;
  border-radius:12px;
  padding:15px;
  font-weight:1000;
}
.product-like{
  width:100%;
  margin-top:10px;
  height:48px;
  border:0;
  border-radius:12px;
  background:#F5F3FF;
  color:#6C4DFF;
  font-weight:900;
}

/* My page match */
.profile-v5{
  background:linear-gradient(135deg,#7D4DFF,#9C5CFF);
  color:#fff;
  border:0;
  border-radius:22px;
}
.profile-v5 p,.profile-v5 a{
  color:rgba(255,255,255,.82);
}
.avatar-v5{
  background:rgba(255,255,255,.22);
}
.avatar-v5:before{
  background:#fff;
}
.my-summary div{
  border-radius:15px;
}
.menu-v5{
  border-radius:18px;
}
.menu-v5 a{
  padding:15px 12px;
}

/* Auth closer to simple shopping app */
.auth-phone-v7{
  background:#fff;
}
.auth-visual-v7{
  padding-top:22px;
}
.ssol-logo-v7{
  width:62px;
  height:62px;
  border-radius:18px;
  box-shadow:0 16px 34px rgba(108,77,255,.24);
}
.auth-visual-v7 h1{
  font-size:28px;
}
.auth-card-v7{
  border-radius:22px;
  box-shadow:0 16px 40px rgba(30,35,60,.07);
}