:root{
  --mx-bg:#080b12;
  --mx-surface:#101620;
  --mx-surface-2:#151d29;
  --mx-line:rgba(190,204,221,.11);
  --mx-green:#8cf3c1;
  --mx-green-2:#c7f6dc;
  --mx-blue:#7fb6ff;
  --mx-text:#f4f7fb;
  --mx-muted:#98a5b7;
  --mx-radius:22px;
}
*{scrollbar-color:#34404f transparent}
body{
  min-width:320px;
  background:
    radial-gradient(circle at 78% 0%,rgba(92,132,181,.08),transparent 24rem),
    linear-gradient(180deg,#090d15 0,#080b12 100%)!important;
  color:var(--mx-text)
}
.site-header{
  height:82px;
  border-bottom:1px solid var(--mx-line)!important;
  background:rgba(8,11,18,.88)!important;
  backdrop-filter:blur(22px)
}
.nav-container{height:82px!important}
.brand-mark{
  border-radius:12px!important;
  background:var(--mx-green)!important;
  color:#09130f!important;
  box-shadow:none!important;
  font-family:'Space Grotesk','IBM Plex Sans Thai',sans-serif!important
}
.sidebar-brand strong{letter-spacing:-.02em}
.sidebar-brand small{color:#8794a5!important}
.guest-nav>a{font-size:13px!important;font-weight:600;color:#aeb8c6!important}
.guest-nav>a:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}
.guest-nav .nav-login{border:0!important;background:transparent!important}
.guest-nav .nav-register{
  height:42px;
  margin-left:4px;
  padding:0 17px!important;
  border-radius:10px!important;
  background:var(--mx-green)!important;
  color:#09130f!important
}
.guest-nav .nav-register:hover{
  background:var(--mx-green)!important;
  color:#09130f!important;
  filter:brightness(1.04)
}
.menu-toggle{
  width:42px;height:42px;border-radius:10px;
  border:1px solid var(--mx-line)!important;
  background:#101620!important;color:white!important
}
.page-main{padding:30px 0 0!important}
.landing-hero{
  min-height:548px!important;
  border-color:var(--mx-line)!important;
  border-radius:28px!important;
  background:
    linear-gradient(90deg,rgba(13,18,29,.98) 0%,rgba(13,18,29,.93) 52%,rgba(13,18,29,.72) 100%)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.25)!important
}
.landing-hero:before{
  right:-120px!important;bottom:-310px!important;top:auto!important;
  width:620px!important;height:620px!important;
  border-color:rgba(140,243,193,.08)!important
}
.landing-hero:after{display:none}
.landing-copy{padding-left:6px;max-width:570px!important}
.landing-kicker{
  height:32px;padding:0 11px;
  border:1px solid var(--mx-line);border-radius:999px;
  color:#b7c1ce!important;background:rgba(255,255,255,.025)!important;
  font-size:11px!important
}
.landing-kicker>span{width:6px!important;height:6px!important;box-shadow:0 0 12px var(--mx-green)!important}
.landing-copy h1{
  max-width:620px;
  font-size:clamp(48px,6vw,72px)!important;
  letter-spacing:-.068em!important;
  line-height:.99!important
}
.landing-copy h1 em{
  color:var(--mx-green)!important;
  background:none!important;-webkit-text-fill-color:currentcolor!important;
  text-shadow:0 0 40px rgba(140,243,193,.08)
}
.landing-copy>p{color:#aab4c3!important;font-size:16px!important;max-width:510px!important}
.landing-actions{margin-top:26px!important}
.landing-btn{
  height:50px!important;
  border-radius:11px!important;
  font-size:13px!important
}
.landing-btn.primary{
  border-radius:11px!important;
  background:var(--mx-green)!important;
  border-color:var(--mx-green)!important;
  color:#09130f!important;
  box-shadow:0 14px 30px rgba(140,243,193,.09)!important
}
.landing-btn.ghost{border-color:var(--mx-line)!important;background:#151c27!important}
.landing-trust{margin-top:28px!important;font-size:10px!important;gap:18px!important}
.hero-proof{margin-top:30px!important}
.hero-shop-preview{
  width:400px!important;height:420px!important;right:38px!important;bottom:-54px!important;
  transform:rotate(1deg)!important;
  border-radius:18px!important;
  box-shadow:0 35px 80px rgba(0,0,0,.42)!important;
  background:#f8fafb!important
}
.preview-banner{height:220px!important;background:linear-gradient(145deg,#274d3c,#172c28)!important}
.preview-banner strong{font-size:38px!important}
.landing-section{padding-top:84px!important}
.landing-heading{margin-bottom:30px!important}
.landing-heading>span{color:var(--mx-green)!important}
.landing-heading h2{font-size:38px!important;letter-spacing:-.045em!important}
.landing-heading p{color:var(--mx-muted)!important}
.demo-grid{gap:16px!important}
.demo-card{border-radius:20px!important;background:#101620!important}
.demo-screen{height:252px!important}
.demo-nav span{letter-spacing:.02em}
.demo-meta{border-top:1px solid rgba(255,255,255,.035)}
.demo-meta span{color:#7f8d9d!important}
.landing-price-strip{
  margin-top:74px!important;border-radius:20px!important;
  border-color:rgba(140,243,193,.15)!important;
  background:linear-gradient(100deg,rgba(140,243,193,.065),rgba(127,182,255,.018))!important;
  box-shadow:none!important
}
.landing-feature-grid article{border-radius:20px!important;background:#101620!important;border-color:var(--mx-line)!important}
.landing-feature-grid article:hover{background:#121a25!important;border-color:rgba(140,243,193,.22)!important}
.landing-feature-icon{border-radius:13px!important;border:1px solid rgba(140,243,193,.08)!important}
.landing-feature-grid p{color:#929fb0!important}
.landing-steps article{border-radius:20px!important;background:#101620!important;border-color:var(--mx-line)!important}
.landing-faq button{border-bottom:0!important;color:#eef3f8!important}
.landing-faq button b{color:#09130f!important;background:var(--mx-green)!important}
.landing-cta{
  border-radius:22px!important;
  border-color:rgba(140,243,193,.12)!important;
  background:linear-gradient(110deg,#101a1d,#101620 60%,#151d29)!important
}
.landing-cta span{color:var(--mx-green)!important}
.site-footer{
  min-height:150px;margin-top:88px;border-top:1px solid var(--mx-line);
  display:grid;grid-template-columns:240px 1fr auto;align-items:center;gap:30px;color:#8794a5
}
.site-footer p{font-size:13px;margin:0;text-align:center}
.site-footer nav{display:flex;gap:18px;font-size:13px}.site-footer nav a:hover{color:white}
.footer-brand{color:white}.footer-brand span:last-child{display:flex;flex-direction:column}

/* Authentication */
.auth-wrap{
  min-height:calc(100vh - 82px)!important;
  padding:42px 0!important;
  background:radial-gradient(circle at 50% 25%,rgba(127,182,255,.07),transparent 22rem)
}
.auth-card{
  width:min(430px,100%)!important;padding:34px!important;border-radius:22px!important;
  border-color:var(--mx-line)!important;background:#101620!important;
  box-shadow:0 30px 80px rgba(0,0,0,.25)
}
.auth-card-head .brand-mark{width:48px!important;height:48px!important;border-radius:14px!important}
.auth-card h1{font-size:28px!important;letter-spacing:-.03em}
.auth-card p{color:var(--mx-muted)!important}
.auth-card label{color:#b5bfcc!important;font-size:12px!important}
.auth-card input{height:50px!important;border-radius:10px!important;border-color:var(--mx-line)!important;background:#0b1018!important;color:white!important}
.auth-card input:focus{border-color:rgba(140,243,193,.55)!important;box-shadow:0 0 0 3px rgba(140,243,193,.06)!important}
.auth-card .btn,.auth-card button[type=submit]{width:100%;height:50px;border-radius:10px!important;background:var(--mx-green)!important;color:#09130f!important}
.auth-switch a{color:var(--mx-green)!important}
.flash{border-color:rgba(127,182,255,.16)!important;background:rgba(127,182,255,.07)!important;border-radius:10px!important;color:#b9d7ff!important}

/* Plans */
.page-heading{margin-bottom:28px!important}
.page-heading>p{color:var(--mx-green)!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.12em}
.page-heading h1{font-size:38px!important;letter-spacing:-.045em!important}
.plans-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.plan-card{
  border-radius:20px!important;padding:28px!important;
  border-color:var(--mx-line)!important;background:#101620!important
}
.plan-card.featured{border-color:rgba(140,243,193,.32)!important;box-shadow:0 24px 60px rgba(0,0,0,.18)!important}
.popular-tag{border-radius:8px!important;background:var(--mx-green)!important;color:#09130f!important;font-weight:800}
.plan-card h2{font-size:19px!important}
.plan-price{padding-bottom:16px;border-bottom:1px solid var(--mx-line)}
.plan-price strong{font-size:42px!important;letter-spacing:-.04em}
.plan-price span{color:#8794a5!important}
.plan-list{color:#abb6c5!important}.plan-list li{font-size:13px}
.plan-card input,.plan-card select{height:50px!important;border-radius:10px!important;background:#0b1018!important;border-color:var(--mx-line)!important}
.plan-card input:focus{border-color:rgba(140,243,193,.55)!important;box-shadow:0 0 0 3px rgba(140,243,193,.06)!important}
.plan-card .btn{height:50px;border-radius:10px!important;background:var(--mx-green)!important;color:#09130f!important}

/* Dashboard */
.app-shell-auth{grid-template-columns:236px minmax(0,1fr)!important}
.sidebar{
  border-right-color:var(--mx-line)!important;
  background:#0c1119!important;padding:20px 14px!important
}
.sidebar>.sidebar-brand{padding:4px 8px 26px!important}
.side-nav a{height:48px!important;border-radius:10px!important;color:#929fb0!important;font-size:13px!important}
.side-nav a:hover,.side-nav a.active{background:rgba(140,243,193,.07)!important;color:#edf4f7!important}
.side-nav a.active{box-shadow:inset 2px 0 var(--mx-green)!important}
.sidebar-user{border-color:var(--mx-line)!important;background:#101620!important;border-radius:12px!important}
.page-main-auth{width:auto!important;max-width:none!important;padding:34px 38px 60px!important}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.summary-card{
  min-height:112px;padding:20px;border-radius:16px;
  border:1px solid var(--mx-line);background:#101620
}
.summary-card span{color:#8996a7;font-size:11px}.summary-card strong{display:block;margin-top:10px;font-size:21px}.summary-card strong.green{color:var(--mx-green)}
.tenant-grid{grid-column:1/-1;margin-top:10px;border-radius:18px!important;border-color:var(--mx-line)!important;background:#101620!important;padding-bottom:12px}
.card-head{height:68px;padding:0 20px;border-bottom:1px solid var(--mx-line);display:flex;align-items:center;justify-content:space-between}
.card-head h2{font-size:16px;margin:0}
.tenant-card{min-height:78px;margin:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--mx-line);display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px}
.tenant-icon{width:42px;height:42px;border-radius:11px;background:rgba(140,243,193,.08);color:var(--mx-green);display:grid;place-items:center;font-weight:800}
.tenant-info{display:flex;flex-direction:column}.tenant-info strong{font-size:13px}.tenant-info span{color:#8996a7;font-size:11px;margin-top:4px}
.tenant-actions{display:flex;align-items:center;gap:8px}.status{border-radius:999px;padding:6px 9px;font-size:10px}.status-active{background:rgba(140,243,193,.08);color:var(--mx-green)}.status-expired{background:rgba(248,113,113,.08);color:#fda4af}
.empty-state{padding:44px;text-align:center}.empty-state-icon{width:52px;height:52px;margin:auto;border-radius:14px;background:rgba(140,243,193,.08);color:var(--mx-green);display:grid;place-items:center}.empty-state h3{margin:14px 0 5px}.empty-state p{margin:0;color:#8996a7;font-size:13px}
.btn,.page-main-auth .btn{border-radius:10px!important;background:var(--mx-green)!important;color:#09130f!important;box-shadow:none!important}
.btn-secondary{background:#151d29!important;color:white!important;border-color:var(--mx-line)!important}
.btn-small{height:36px!important;min-height:36px!important;padding:0 12px!important;font-size:11px!important}
.mobile-header{height:68px;border-bottom:1px solid var(--mx-line);background:#0c1119}

@media(max-width:980px){
  .hero-shop-preview{opacity:.22!important;right:-60px!important;width:340px!important}
  .landing-copy{max-width:590px!important}
  .plans-grid{grid-template-columns:1fr 1fr!important}
  .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer{grid-template-columns:1fr auto}
  .site-footer p{display:none}
}
@media(max-width:760px){
  .site-header{height:72px!important}.nav-container{height:72px!important;width:calc(100% - 28px)!important}
  .guest-nav{
    display:none!important;position:absolute!important;left:14px!important;right:14px!important;top:64px!important;
    padding:9px;border-radius:14px;border:1px solid var(--mx-line);background:#101620!important;
    box-shadow:0 18px 40px rgba(0,0,0,.35)!important
  }
  .guest-nav.open{display:grid!important}.guest-nav>a{height:42px;display:flex;align-items:center}.guest-nav .nav-register{justify-content:center;min-height:42px}
  .menu-toggle{display:grid!important;place-items:center}.page-main{width:calc(100% - 28px)!important;padding-top:14px!important}
  .landing-hero{min-height:520px!important;padding:38px 22px!important;border-radius:20px!important}
  .landing-copy{padding:0!important}.landing-copy h1{font-size:43px!important;line-height:1.02!important}
  .landing-copy>p{font-size:14px!important}.landing-actions{display:grid!important}.landing-actions .landing-btn{width:100%!important}
  .landing-trust{grid-template-columns:1fr!important}
  .landing-section{padding-top:58px!important}.landing-heading h2{font-size:30px!important}
  .demo-grid{grid-template-columns:1fr!important}.demo-screen{height:270px!important}
  .landing-price-strip{margin-top:58px!important;grid-template-columns:1fr!important;text-align:center!important}
  .landing-feature-grid,.plans-grid{grid-template-columns:1fr!important}
  .landing-steps{grid-template-columns:1fr!important}
  .landing-cta{margin-top:58px!important;padding:28px!important;gap:18px!important}
  .site-footer{grid-template-columns:1fr;margin:58px 0 0;padding:28px 0;gap:18px}.site-footer nav{justify-content:center}
  .auth-wrap{min-height:calc(100vh - 72px)!important;padding:20px 0!important}.auth-card{padding:26px!important}
  .app-shell-auth{display:block!important}.sidebar{position:fixed!important;z-index:40;width:236px;left:-236px;transition:.2s}.sidebar.open{left:0}.mobile-header{display:flex!important;align-items:center;justify-content:space-between;padding:0 14px}.mobile-header .menu-toggle{display:grid!important}
  .page-main-auth{width:100%!important;padding:24px 14px 40px!important}.dashboard-grid{grid-template-columns:1fr 1fr}.tenant-grid{grid-column:1/-1}
  .tenant-card{grid-template-columns:42px 1fr}.tenant-actions{grid-column:1/-1;justify-content:flex-end}.page-heading-row{gap:12px}.page-heading-row .btn{white-space:nowrap}
}