/* ════════════════════════════════
   AppInstan — Clean Professional
   White · Blue · Crisp · Modern
════════════════════════════════ */
:root{
  /* ── Teal & Pink Palette ── */
  --bg:       #EFF5F5;
  --bg2:      #FFFFFF;
  --bg3:      #E2EDED;
  --card:     #FFFFFF;
  --border:   #C8DADA;
  --border2:  #A8C8C8;
  --blue:     #234646;
  --blue2:    #1a3535;
  --blue3:    #daeaea;
  --blue4:    #c0dcdc;
  --blue-glow:rgba(35,70,70,0.15);
  --indigo:   #3A7575;
  --teal:     #234646;
  --teal2:    #2E5E5E;
  --teal3:    #3A7575;
  --pink:     #FF877E;
  --pink2:    #EB948C;
  --pink3:    #fde8e6;
  --text:     #0D2626;
  --text2:    #2C4A4A;
  --text3:    #6B9090;
  --white:    #FFFFFF;
  --green:    #2E8B57;
  --yellow:   #D97706;
  --red:      #DC2626;
  --radius:   12px;
  --shadow-sm:0 1px 3px rgba(35,70,70,.10),0 1px 2px rgba(35,70,70,.06);
  --shadow:   0 4px 16px rgba(35,70,70,.10);
  --shadow-lg:0 12px 40px rgba(35,70,70,.16);
  --sans:     'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ease:     cubic-bezier(.4,0,.2,1);

  /* gradient pakai teal */
  --grad:    linear-gradient(135deg,#234646,#3A7575);
  --grad2:   linear-gradient(135deg,#234646,#2E5E5E);
  --glow-v:  rgba(35,70,70,.2);

  /* legacy aliases so JS keeps working */
  --bg2-dark:#EFF5F5; --bg3-dark:#E2EDED; --ink:#0D2626;
  --gold:    #234646; --gold2:#1a3535;
  --violet:  #3A7575; --violet2:#2E5E5E;
  --cyan:    #2E5E5E; --cyan2:#3A7575;
}

:root[data-theme="exclusive"]{
  --bg:       #EEF2EF;
  --bg2:      #FFFFFF;
  --bg3:      #DDE7E1;
  --card:     #FFFFFF;
  --border:   #C8D6CE;
  --border2:  #8EA99A;
  --blue:     #0B3B35;
  --blue2:    #062620;
  --blue3:    #E0ECE5;
  --blue4:    #B7D0C2;
  --blue-glow:rgba(11,59,53,0.22);
  --indigo:   #1C5D57;
  --teal:     #0B3B35;
  --teal2:    #164B43;
  --teal3:    #237266;
  --pink:     #C96F4A;
  --pink2:    #B95A35;
  --pink3:    #F7DED2;
  --text:     #10211D;
  --text2:    #2B4940;
  --text3:    #667C72;
  --white:    #FFFFFF;
  --green:    #167A55;
  --yellow:   #A87520;
  --red:      #B4232F;
  --shadow-sm:0 1px 4px rgba(8,31,27,.14),0 1px 2px rgba(8,31,27,.08);
  --shadow:   0 8px 22px rgba(8,31,27,.13);
  --shadow-lg:0 18px 48px rgba(8,31,27,.22);
  --grad:     linear-gradient(135deg,#082B25,#0B3B35 54%,#94661F);
  --grad2:    linear-gradient(135deg,#062620,#164B43);
  --glow-v:   rgba(148,102,31,.22);
  --bg2-dark:#EEF2EF; --bg3-dark:#DDE7E1; --ink:#10211D;
  --gold:    #B8892F; --gold2:#94661F;
  --violet:  #1C5D57; --violet2:#164B43;
  --cyan:    #237266; --cyan2:#2B8A78;
}

:root[data-theme="vista"]{
  --bg:       #DCEBFA;
  --bg2:      rgba(255,255,255,.82);
  --bg3:      rgba(207,231,250,.74);
  --card:     rgba(255,255,255,.76);
  --border:   rgba(86,145,190,.34);
  --border2:  rgba(44,118,174,.48);
  --blue:     #176AAB;
  --blue2:    #0D4E86;
  --blue3:    rgba(191,226,251,.70);
  --blue4:    rgba(126,194,238,.62);
  --blue-glow:rgba(23,106,171,.24);
  --indigo:   #325FB8;
  --teal:     #0C8A9A;
  --teal2:    #0B7185;
  --teal3:    #24B0C0;
  --pink:     #FF8A4C;
  --pink2:    #E56E2B;
  --pink3:    rgba(255,224,205,.72);
  --text:     #10283D;
  --text2:    #284C66;
  --text3:    #63849B;
  --white:    #FFFFFF;
  --green:    #16896E;
  --yellow:   #B97911;
  --red:      #C73745;
  --shadow-sm:0 1px 5px rgba(17,75,120,.14), inset 0 1px 0 rgba(255,255,255,.55);
  --shadow:   0 10px 28px rgba(17,75,120,.16), inset 0 1px 0 rgba(255,255,255,.48);
  --shadow-lg:0 22px 60px rgba(17,75,120,.24), inset 0 1px 0 rgba(255,255,255,.52);
  --grad:     linear-gradient(135deg,#2F8FD5 0%,#37B6C8 48%,#7BD8F0 100%);
  --grad2:    linear-gradient(135deg,#0D4E86,#176AAB 56%,#24B0C0);
  --glow-v:   rgba(123,216,240,.34);
  --bg2-dark:#DCEBFA; --bg3-dark:#CFE7FA; --ink:#10283D;
  --gold:    #F7C25F; --gold2:#D89518;
  --violet:  #325FB8; --violet2:#244A9A;
  --cyan:    #24B0C0; --cyan2:#7BD8F0;
}

:root[data-theme="seven7"]{
  --bg:       #E8F1FB;
  --bg2:      rgba(255,255,255,.90);
  --bg3:      rgba(214,233,250,.82);
  --card:     rgba(255,255,255,.86);
  --border:   rgba(87,137,188,.38);
  --border2:  rgba(38,103,172,.54);
  --blue:     #1E6DB6;
  --blue2:    #0A4F96;
  --blue3:    rgba(198,226,249,.78);
  --blue4:    rgba(121,184,232,.68);
  --blue-glow:rgba(30,109,182,.25);
  --indigo:   #2457A6;
  --teal:     #167F9E;
  --teal2:    #0D6C8C;
  --teal3:    #27A8C7;
  --pink:     #F39B28;
  --pink2:    #D97A0B;
  --pink3:    rgba(255,232,189,.78);
  --text:     #14293F;
  --text2:    #2F536E;
  --text3:    #6B849B;
  --white:    #FFFFFF;
  --green:    #26845D;
  --yellow:   #C18418;
  --red:      #C73542;
  --shadow-sm:0 1px 4px rgba(19,74,132,.15), inset 0 1px 0 rgba(255,255,255,.70);
  --shadow:   0 9px 26px rgba(19,74,132,.15), inset 0 1px 0 rgba(255,255,255,.62);
  --shadow-lg:0 22px 62px rgba(19,74,132,.24), inset 0 1px 0 rgba(255,255,255,.64);
  --grad:     linear-gradient(180deg,#7BC4F4 0%,#2F89D6 48%,#0A5DAA 100%);
  --grad2:    linear-gradient(180deg,#4BA8E8,#176DB9 54%,#0A4F96);
  --glow-v:   rgba(123,196,244,.35);
  --bg2-dark:#E8F1FB; --bg3-dark:#D6E9FA; --ink:#14293F;
  --gold:    #F6C15C; --gold2:#D08A13;
  --violet:  #2457A6; --violet2:#183E84;
  --cyan:    #27A8C7; --cyan2:#7BD6EF;
}

/* Practical blue themes inspired by the CRM and Indekos layouts. */
:root[data-theme="vista"]{
  --bg:       #EEF4FB;
  --bg2:      #FFFFFF;
  --bg3:      #E6EEF8;
  --card:     #FFFFFF;
  --border:   #D3DEEC;
  --border2:  #B8C9E0;
  --blue:     #1A73E8;
  --blue2:    #1557B0;
  --blue3:    #E8F0FE;
  --blue4:    #CFE0FA;
  --blue-glow:rgba(26,115,232,.18);
  --indigo:   #2F5EA8;
  --teal:     #14B8A6;
  --teal2:    #0F8F82;
  --teal3:    #37C6B8;
  --pink:     #F59E0B;
  --pink2:    #D97706;
  --pink3:    #FFF4DE;
  --text:     #102033;
  --text2:    #31445C;
  --text3:    #66758B;
  --white:    #FFFFFF;
  --green:    #1E8E3E;
  --yellow:   #E37400;
  --red:      #D93025;
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow:   0 14px 36px rgba(15,23,42,.08);
  --shadow-lg:0 24px 58px rgba(15,23,42,.14);
  --grad:     linear-gradient(135deg,#1A73E8,#1557B0);
  --grad2:    linear-gradient(135deg,#1557B0,#0F4B9A);
  --glow-v:   rgba(26,115,232,.18);
  --bg2-dark:#EEF4FB; --bg3-dark:#E6EEF8; --ink:#102033;
  --gold:    #F59E0B; --gold2:#D97706;
  --violet:  #2F5EA8; --violet2:#1D3F78;
  --cyan:    #14B8A6; --cyan2:#37C6B8;
}

:root[data-theme="seven7"]{
  --bg:       #E8EEF8;
  --bg2:      #FFFFFF;
  --bg3:      #E4EDFB;
  --card:     #FFFFFF;
  --border:   #CFDAEE;
  --border2:  #B5C6E3;
  --blue:     #2F5EA8;
  --blue2:    #1D3F78;
  --blue3:    #E4EDFB;
  --blue4:    #C9D9F2;
  --blue-glow:rgba(47,94,168,.18);
  --indigo:   #1D3F78;
  --teal:     #3D69B1;
  --teal2:    #2F5EA8;
  --teal3:    #6D92CF;
  --pink:     #E4A13F;
  --pink2:    #C18418;
  --pink3:    #FFF4DE;
  --text:     #0F1D35;
  --text2:    #31435D;
  --text3:    #61728E;
  --white:    #FFFFFF;
  --green:    #2E7D32;
  --yellow:   #E4A13F;
  --red:      #E53935;
  --shadow-sm:0 10px 24px rgba(29,63,120,.08);
  --shadow:   0 16px 34px rgba(29,63,120,.12),0 8px 20px rgba(47,94,168,.08);
  --shadow-lg:0 28px 60px rgba(29,63,120,.16),0 12px 28px rgba(47,94,168,.10);
  --grad:     linear-gradient(180deg,#4770B4,#2F5EA8);
  --grad2:    linear-gradient(180deg,#365F9F,#1D3F78);
  --glow-v:   rgba(47,94,168,.18);
  --bg2-dark:#E8EEF8; --bg3-dark:#E4EDFB; --ink:#0F1D35;
  --gold:    #E4A13F; --gold2:#C18418;
  --violet:  #2F5EA8; --violet2:#1D3F78;
  --cyan:    #3D69B1; --cyan2:#6D92CF;
}

:root[data-theme="dark_elegant"]{
  --bg:       #0D1412;
  --bg2:      #121D1A;
  --bg3:      #1A2824;
  --card:     #111C19;
  --border:   rgba(179,139,71,.22);
  --border2:  rgba(201,162,86,.38);
  --blue:     #C9A256;
  --blue2:    #E1BF74;
  --blue3:    rgba(201,162,86,.12);
  --blue4:    rgba(201,162,86,.22);
  --blue-glow:rgba(201,162,86,.20);
  --indigo:   #6DAA97;
  --teal:     #2D6F5F;
  --teal2:    #23584C;
  --teal3:    #77B5A1;
  --pink:     #C97D5B;
  --pink2:    #E49B72;
  --pink3:    rgba(201,125,91,.16);
  --text:     #F0E9DC;
  --text2:    #CFC5B4;
  --text3:    #948A7B;
  --white:    #FFFFFF;
  --green:    #67B894;
  --yellow:   #D7A64C;
  --red:      #E0646C;
  --shadow-sm:0 1px 5px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  --shadow:   0 12px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-lg:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  --grad:     linear-gradient(135deg,#0D1412 0%,#18332D 52%,#C9A256 130%);
  --grad2:    linear-gradient(135deg,#121D1A,#23584C 62%,#6E5428);
  --glow-v:   rgba(201,162,86,.24);
  --bg2-dark:#121D1A; --bg3-dark:#1A2824; --ink:#F0E9DC;
  --gold:    #C9A256; --gold2:#E1BF74;
  --violet:  #6DAA97; --violet2:#23584C;
  --cyan:    #77B5A1; --cyan2:#9BD4C2;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700;line-height:1.2;letter-spacing:0;color:var(--text)}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:flex;align-items:center;justify-content:space-between;
  height:66px;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:all .3s var(--ease);
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;cursor:pointer;
}
.nav-logo img{
  height:38px;width:auto;max-width:172px;border-radius:0;
  object-fit:contain;flex-shrink:0;
}
.nav-logo span{
  font-weight:800;font-size:1.15rem;
  color:var(--text);letter-spacing:0;
}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  color:var(--text2);text-decoration:none;
  padding:8px 13px;border-radius:8px;
  font-size:14px;font-weight:500;
  transition:all .15s;cursor:pointer;
}
.nav-links a:hover{color:var(--text);background:var(--bg3)}
.nav-cta{
  background:var(--blue)!important;
  color:var(--white)!important;
  padding:9px 20px!important;border-radius:9px!important;
  font-weight:600!important;font-size:13.5px!important;
  margin-left:6px!important;
  box-shadow:0 2px 8px rgba(37,99,235,.25)!important;
  transition:all .2s!important;
}
.nav-cta:hover{background:var(--blue2)!important;box-shadow:0 4px 16px rgba(37,99,235,.35)!important;transform:translateY(-1px)!important}
.hamburger{
  display:none;background:none;border:none;color:var(--text);font-size:1.3rem;cursor:pointer;
  width:44px;height:44px;padding:0;border-radius:10px;align-items:center;justify-content:center;
}
.hamburger:hover{background:var(--bg3)}
.mobile-overlay{
  display:none;position:fixed;inset:0;z-index:998;
  background:rgba(0,0,0,0);transition:background .3s;
}
.mobile-overlay.open{display:block;background:rgba(0,0,0,0.45);z-index:1001}
.mobile-menu{
  position:fixed;top:0;left:0;bottom:0;z-index:1002;
  width:min(82vw,300px);
  background:var(--white);
  padding:18px 16px 24px;
  flex-direction:column;gap:3px;
  box-shadow:4px 0 24px rgba(0,0,0,.15);
  transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-brand{
  display:flex;align-items:center;gap:10px;
  width:100%;min-height:52px;padding:8px 6px 16px;margin:0 0 8px;
  border:0;border-bottom:1px solid var(--border);
  background:transparent;color:var(--text);text-align:left;cursor:pointer;
}
.mobile-menu-brand img{
  height:38px;width:auto;max-width:180px;border-radius:0;
  object-fit:contain;flex-shrink:0;
}
.mobile-menu-brand span{
  font-weight:800;font-size:1.08rem;color:var(--text);letter-spacing:0;
}
.mobile-menu a{
  color:var(--text);text-decoration:none;
  padding:12px 16px;border-radius:10px;font-size:15px;
  cursor:pointer;font-weight:500;transition:.15s;
  display:flex;align-items:center;gap:10px;
}
.mobile-menu a:hover{background:var(--bg3);color:var(--blue);}
.mobile-menu .menu-divider{
  height:1px;background:var(--border);margin:10px 0;
}
.auth-remember{
  display:flex;align-items:center;gap:9px;margin:-4px 0 14px;
  color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;user-select:none;
}
.auth-remember input{
  width:18px;height:18px;accent-color:var(--blue);flex:0 0 auto;
}

/* PAGE SYSTEM */
.page{display:none;min-height:100vh;padding-top:66px}
.page.active{display:block}
body.admin-mode > nav,
body.admin-mode .mobile-overlay,
body.admin-mode .mobile-menu,
body.admin-mode .wa-float{display:none!important}
body.admin-mode #page-admin{padding-top:0}
body.admin-mode .admin-shell{min-height:100vh}
body.admin-mode .admin-sidebar{top:0;height:100vh}

/* ── HERO ── */
.hero{
  min-height:auto;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px 5%;
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#FFFFFF 0%,var(--bg) 55%,#daeaea 100%);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%,rgba(37,99,235,.07) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 70%,rgba(79,70,229,.04) 0%,transparent 50%);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.04) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent 80%);
  pointer-events:none;
}
.hero-content{position:relative;z-index:1;max-width:620px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue3);
  border:1px solid rgba(37,99,235,.2);
  color:var(--blue);
  padding:4px 12px;border-radius:100px;
  font-size:11px;margin-bottom:18px;font-weight:600;
  letter-spacing:.04em;
}
.hero-badge span{
  width:6px;height:6px;background:var(--blue);
  border-radius:50%;animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
h1.hero-title{
  font-size:clamp(1.7rem,4.2vw,2.95rem);
  font-weight:900;line-height:1.08;
  margin-bottom:20px;color:var(--text);
  letter-spacing:0;
}
h1.hero-title em{
  font-style:normal;color:var(--blue);
}
.hero-sub{
  font-size:0.88rem;color:var(--text2);
  max-width:460px;margin:0 auto 24px;line-height:1.75;font-weight:400;
}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-primary{
  background:var(--blue);color:var(--white);
  padding:10px 22px;border-radius:var(--radius);
  text-decoration:none;font-weight:600;font-size:14.5px;
  border:none;cursor:pointer;
  transition:all .2s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 16px rgba(37,99,235,.3);
}
.btn-primary:hover{background:var(--blue2);transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,.35)}
.btn-outline{
  background:var(--white);color:var(--text);
  padding:10px 20px;border-radius:var(--radius);
  text-decoration:none;font-weight:500;font-size:14.5px;
  border:1.5px solid var(--border);cursor:pointer;
  transition:all .2s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue3)}
.hero-stats{
  display:flex;gap:44px;justify-content:center;flex-wrap:wrap;
  margin-top:32px;padding-top:22px;
  border-top:1px solid var(--border);
}
.stat{text-align:center}
.stat-num{font-size:1.4rem;font-weight:800;color:var(--text)}
.stat-label{font-size:12px;color:var(--text3);margin-top:2px;font-weight:500}

/* ── SECTIONS ── */
section{padding:80px 5%}
.section-label{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);
  background:var(--blue3);
  padding:4px 12px;border-radius:100px;
  margin-bottom:16px;
}
.section-title{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;color:var(--text);margin-bottom:10px}
.section-sub{color:var(--text2);max-width:520px;line-height:1.7;font-weight:400;font-size:14px}
.section-header{margin-bottom:36px}
.section-header.center{text-align:center}
.section-header.center .section-sub{margin:0 auto}
/* Page header (blog/produk/kontak) — lebih compact */
.page-header{
  padding:28px 5% 22px;
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.page-header .section-label{margin-bottom:6px}
.page-header h2{font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:800;color:var(--text);margin:0}
.page-header p{font-size:13px;color:var(--text3);margin-top:4px}

.lead-magnet-section{background:#FFFFFF;padding:54px 5%;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lead-magnet-wrap{max-width:1050px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:34px;align-items:center}
.lead-copy h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:850;color:var(--text);line-height:1.18;margin:0 0 14px}
.lead-copy p{font-size:15px;color:var(--text2);line-height:1.8;max-width:620px}
.lead-benefits{display:grid;gap:12px;margin-top:22px}
.lead-benefits div{display:flex;align-items:center;gap:12px;color:var(--text2);font-size:14px}
.lead-benefits strong{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.lead-form{background:#F8FCFC;border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:0 16px 38px rgba(13,38,38,.08);display:grid;gap:12px}
.lead-form h3{font-size:1.15rem;font-weight:850;margin:0;color:var(--text)}
.lead-form p{font-size:13px;color:var(--text3);margin:0 0 4px}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1px solid var(--border);border-radius:9px;padding:11px 12px;font-size:14px;color:var(--text);font-family:inherit;background:#FFFFFF}
.lead-form textarea{min-height:94px;resize:vertical}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(35,70,70,.10)}
.lead-form small{font-size:11.5px;color:var(--text3);line-height:1.55}
.closing-section{padding:44px 5%;background:linear-gradient(135deg,#102D2D,#234646)}
.closing-box{max-width:1050px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#FFFFFF}
.closing-box .section-label{background:rgba(255,255,255,.12);color:#FFFFFF}
.closing-box h2{font-size:clamp(1.45rem,2.8vw,2.2rem);font-weight:850;color:#FFFFFF;margin:0 0 10px}
.closing-box p{color:rgba(255,255,255,.82);line-height:1.75;max-width:650px}
.closing-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.closing-actions .btn-outline{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.34)}
.closing-actions .btn-outline:hover{background:rgba(255,255,255,.10);color:#FFFFFF}
.faq-section{background:#FFFFFF;border-top:1px solid var(--border);padding:70px 5%}
.faq-grid{max-width:950px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.faq-item{border:1px solid var(--border);border-radius:12px;padding:20px;background:#FAFCFC}
.faq-item h3{font-size:1rem;font-weight:800;color:var(--text);margin:0 0 8px}
.faq-item p{font-size:13.5px;color:var(--text2);line-height:1.75;margin:0}

/* ── FEATURE CARDS ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.feature-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:28px;
  transition:all .25s var(--ease);
  cursor:default;
}
.feature-card:hover{
  border-color:rgba(37,99,235,.3);
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
}
.feature-icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--blue3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:16px;
}
.feature-card h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:7px}
.feature-card p{font-size:13.5px;color:var(--text2);line-height:1.75}

/* ── PRODUCT CARDS ── */
#page-products section{
  padding-top:34px;
}
.product-catalog-panel{
  display:grid;
  gap:0;
  margin-bottom:22px
}
.product-catalog-toolbar{
  display:block;
  width:100%;
  margin-bottom:18px
}
.product-catalog-search{
  position:relative;isolation:isolate;
  display:flex;align-items:center;gap:14px;
  width:100%;
  min-height:64px;padding:0 18px;border:1px solid rgba(35,70,70,.14);border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,251,.96));
  box-shadow:
    0 14px 30px rgba(35,70,70,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)
}
.product-catalog-search:before{
  content:'';position:absolute;inset:0 auto 0 0;width:74px;z-index:0;
  background:linear-gradient(180deg,rgba(35,70,70,.08),rgba(35,70,70,.03))
}
.product-catalog-search:focus-within{
  border-color:rgba(35,70,70,.34);
  box-shadow:
    0 18px 36px rgba(35,70,70,.12),
    0 0 0 4px rgba(35,70,70,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
  transform:translateY(-1px)
}
.product-catalog-search-icon{
  position:relative;z-index:1;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:linear-gradient(180deg,var(--blue),var(--teal3));
  color:#FFFFFF;box-shadow:0 10px 20px rgba(35,70,70,.18)
}
.product-catalog-search-icon svg{
  width:16px;height:16px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round
}
.product-catalog-search input{
  position:relative;z-index:1;
  width:100%;border:0;outline:none;background:transparent;
  min-width:0;height:100%;
  font-size:17px;font-weight:700;line-height:1.2;color:var(--text);
  padding:20px 0
}
.product-catalog-search input::placeholder{color:#8AA1A1;font-weight:500}
.product-catalog-summary{
  font-size:12.5px;color:var(--text3);font-weight:800;line-height:1.5;
  padding:12px 4px 0;letter-spacing:.01em
}
.products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.product-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;
  transition:all .25s var(--ease);
  box-shadow:var(--shadow-sm);
}
.product-card:hover{
  border-color:rgba(37,99,235,.35);
  box-shadow:var(--shadow-lg);
  transform:translateY(-5px);
}
.subscription-card{
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFF 100%);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}
.subscription-card:hover{
  transform:translateY(-6px);
  border-color:rgba(37,99,235,.28);
  box-shadow:0 24px 56px rgba(37,99,235,.16);
}
.subscription-card-top{
  padding:22px 22px 16px;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 42%),
    linear-gradient(135deg,#EFF6FF 0%,#FFFFFF 64%);
  border-bottom:1px solid rgba(148,163,184,.16);
}
.subscription-card-meta{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.subscription-card-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.subscription-card-title{font-size:1.08rem;font-weight:800;color:var(--text);line-height:1.35;margin:0}
.subscription-card-subtitle{margin-top:6px;font-size:13px;color:var(--text2);line-height:1.6}
.subscription-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;
  border:1px solid transparent;white-space:nowrap;
}
.subscription-badge-active{background:rgba(16,185,129,.14);color:#047857;border-color:rgba(16,185,129,.22)}
.subscription-badge-expired{background:rgba(239,68,68,.10);color:#B91C1C;border-color:rgba(239,68,68,.16)}
.subscription-badge-inactive{background:rgba(100,116,139,.10);color:#475569;border-color:rgba(100,116,139,.14)}
.subscription-badge-not_set{background:rgba(148,163,184,.12);color:#475569;border-color:rgba(148,163,184,.18)}
.subscription-highlight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.subscription-stat{
  padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.82);
  border:1px solid rgba(148,163,184,.16);backdrop-filter:blur(10px);
}
.subscription-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:700;margin-bottom:6px}
.subscription-stat-value{font-size:14px;font-weight:700;color:var(--text);line-height:1.45}
.subscription-card-body{padding:18px 22px 22px}
.subscription-section{display:flex;flex-direction:column;gap:12px}
.subscription-section + .subscription-section{margin-top:16px;padding-top:16px;border-top:1px solid rgba(148,163,184,.16)}
.subscription-section-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.subscription-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.subscription-kv-item{padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid rgba(148,163,184,.14)}
.subscription-kv-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.subscription-kv-value{font-size:14px;font-weight:700;color:var(--text);line-height:1.45}
.subscription-notes{
  padding:14px 15px;border-radius:14px;background:#FCFDFE;border:1px solid rgba(148,163,184,.16);
  color:var(--text2);font-size:13px;line-height:1.7;
}
.subscription-actions{display:flex;gap:10px;flex-wrap:wrap}
.subscription-action-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 16px;border-radius:12px;text-decoration:none;
  font-size:13px;font-weight:700;transition:.18s;
}
.subscription-action-link.primary{background:var(--blue);color:var(--white);box-shadow:0 10px 24px rgba(37,99,235,.22)}
.subscription-action-link.primary:hover{background:#1D4ED8}
.subscription-action-link.secondary{background:rgba(37,99,235,.08);color:var(--blue);border:1px solid rgba(37,99,235,.12)}
.subscription-action-link.secondary:hover{background:rgba(37,99,235,.14)}
.product-thumb{
  height:auto;aspect-ratio:1/1;background:var(--blue3);
  display:flex;align-items:center;justify-content:center;
  position:relative;font-size:3.8rem;
}
.product-badge{
  position:absolute;top:12px;right:12px;
  background:var(--blue);color:var(--white);
  padding:4px 12px;border-radius:100px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
}
.product-body{padding:22px}
.product-body h3{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:7px}
.product-body p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:14px}
.product-price{font-size:1.45rem;font-weight:800;color:var(--blue)}
.product-price-note{font-size:12px;color:var(--text3);line-height:1.5;margin:5px 0 13px}
.product-actions{display:flex;gap:8px}
.product-card{cursor:pointer}
.product-category-chip{margin-bottom:10px}
.product-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#234646}
.product-placeholder .ui-icon{width:58px;height:58px;opacity:.72}
.product-placeholder .ui-icon svg{width:58px;height:58px;stroke-width:1.4}
.product-actions .btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.product-actions .ui-icon{width:15px;height:15px}
.product-actions .ui-icon svg{width:15px;height:15px}
.btn-sm{
  flex:1;padding:10px 14px;border-radius:9px;
  font-size:13px;font-weight:600;text-align:center;
  cursor:pointer;border:none;transition:all .18s;
  text-decoration:none;display:inline-block;
}
.btn-sm-primary{background:var(--blue);color:var(--white)}
.btn-sm-primary:hover{background:var(--blue2)}
.btn-sm-outline{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.btn-sm-outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue3)}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.testi-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:24px;
  transition:all .25s;box-shadow:var(--shadow-sm);
}
.testi-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border2);transform:translateY(-2px)}
.testi-stars{color:#F59E0B;font-size:13px;margin-bottom:12px;letter-spacing:1px}
.testi-text{color:var(--text2);font-size:14px;line-height:1.75;margin-bottom:16px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:var(--white);flex-shrink:0;
}
.testi-name{font-weight:600;font-size:14px;color:var(--text)}
.testi-role{font-size:12px;color:var(--text3)}

/* ── CTA SECTION ── */
.cta-section{
  background:linear-gradient(135deg,var(--blue) 0%,var(--teal3) 100%);
  border-radius:20px;padding:64px 48px;text-align:center;
  margin:0 5% 80px;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.06);
  top:-100px;right:-80px;pointer-events:none;
}
.cta-section::after{
  content:'';position:absolute;
  width:250px;height:250px;border-radius:50%;
  background:rgba(255,255,255,.04);
  bottom:-80px;left:-40px;pointer-events:none;
}
.cta-section h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--white);margin-bottom:14px;position:relative;z-index:1}
.cta-section p{color:rgba(255,255,255,.8);max-width:460px;margin:0 auto 28px;position:relative;z-index:1;line-height:1.7}

/* ── FOOTER ── */
footer{background:var(--text);padding:56px 5% 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-col h4{font-weight:700;color:var(--white);margin-bottom:16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.footer-col a{
  display:block;color:rgba(255,255,255,.5);
  text-decoration:none;font-size:13.5px;
  margin-bottom:10px;transition:.2s;cursor:pointer;
}
.footer-col a:hover{color:rgba(255,255,255,.85)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
}
.footer-bottom p{color:rgba(255,255,255,.35);font-size:13px}

/* ── FLOATING WA ── */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:999;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:var(--white);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:1.55rem;
  box-shadow:0 4px 18px rgba(37,211,102,.4);
  transition:all .3s;animation:bounce 3s ease-in-out infinite;
}
.wa-float:hover{transform:scale(1.1)!important;animation:none}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── PRODUCT DETAIL ── */
.demo-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;padding:40px 5%;max-width:1160px;margin:0 auto}
.demo-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.demo-card h1{font-size:1.35rem;font-weight:800;color:var(--text);margin-bottom:8px}
.demo-price{font-size:1.9rem;font-weight:800;color:var(--blue)}

/* ── CHECKOUT ── */
.checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;padding:40px 5%;max-width:1060px;margin:0 auto}
.checkout-form-card,.order-summary-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:26px;box-shadow:var(--shadow-sm);
}
.checkout-form-card,.order-summary-card,.feature-card,.product-card,.testi-card,.faq-item{
  box-shadow:0 10px 28px rgba(13,38,38,.055);
}
.checkout-form-card:hover,.order-summary-card:hover{
  border-color:#BBD4D4;box-shadow:0 14px 34px rgba(13,38,38,.075);
}
.checkout-form-card h2,.order-summary-card h2{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:22px}
.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:11.5px;font-weight:600;
  color:var(--text2);margin-bottom:7px;letter-spacing:.04em;text-transform:uppercase;
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;background:var(--bg);border:1.5px solid var(--border);
  color:var(--text);padding:11px 13px;border-radius:10px;
  font-family:var(--sans);font-size:14px;outline:none;transition:.18s;
}
.form-group input::placeholder,.form-group textarea::placeholder{color:#89A7A7}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--blue);background:var(--white);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select option{background:var(--white);color:var(--text)}
.form-checkline{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--bg);color:var(--text2);font-size:13px;font-weight:700;
}
.form-checkline input{width:17px;height:17px;accent-color:var(--blue)}
.payment-method{
  border:2px solid var(--border);border-radius:12px;
  padding:13px 15px;cursor:pointer;transition:.18s;
  display:flex;align-items:center;gap:12px;
  margin-bottom:10px;background:var(--bg);
}
.payment-method:hover{border-color:var(--blue)}
.payment-method.selected{border-color:var(--blue);background:var(--blue3)}
.payment-method input{width:16px;height:16px;accent-color:var(--blue)}
.payment-method-info h4{font-size:14px;font-weight:600;color:var(--text)}
.payment-method-info p{font-size:12px;color:var(--text3)}
.order-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.order-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0}
.order-total span{font-size:1.45rem;font-weight:800;color:var(--blue)}
.upload-box{
  border:2px dashed var(--border2);border-radius:12px;
  padding:26px;text-align:center;cursor:pointer;transition:.18s;
  background:var(--bg);
}
.upload-box:hover{border-color:var(--blue);background:var(--blue3)}
.upload-box p{color:var(--text3);font-size:13px;margin-top:8px}

/* ── DASHBOARD ── */
.dashboard-layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 66px)}
.sidebar{
  background:var(--white);border-right:1px solid var(--border);
  padding:20px 10px;display:flex;flex-direction:column;gap:3px;
}
.sidebar-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;cursor:pointer;
  transition:.15s;color:var(--text2);
  font-size:14px;font-weight:500;text-decoration:none;
}
.sidebar-item:hover{background:var(--bg3);color:var(--text)}
.sidebar-item.active{background:var(--blue3);color:var(--blue);font-weight:600}
.sidebar-item span{font-size:1.05rem}
.dashboard-main{padding:28px;overflow-y:auto;background:var(--bg)}
.dash-welcome{margin-bottom:28px}
.dash-welcome h2{font-size:1.55rem;font-weight:800;color:var(--text)}
.dash-welcome p{color:var(--text2);font-size:14px}
.service-portal{
  background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.service-portal-hero{
  padding:26px 28px 18px;
  background:
    linear-gradient(135deg, rgba(15,23,42,.02) 0%, rgba(15,23,42,.02) 18%, transparent 18%, transparent 100%),
    linear-gradient(90deg, rgba(148,163,184,.06) 0%, rgba(148,163,184,.04) 100%);
}
.service-portal-head{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;
}
.service-portal-title{
  font-size:2.1rem;font-weight:800;line-height:1.1;color:#111827;margin:0 0 12px;
}
.service-portal-breadcrumb{
  display:flex;gap:10px;flex-wrap:wrap;
  color:#94A3B8;font-size:13px;
}
.service-portal-breadcrumb span{color:#64748B}
.service-portal-search{
  min-width:300px;max-width:360px;flex:1;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.92);border:1px solid var(--border);
  border-radius:12px;padding:0 16px;height:58px;
}
.service-portal-search-icon{font-size:1.25rem;color:#0F172A}
.service-portal-search input{
  border:none;background:transparent;outline:none;width:100%;
  font-size:14px;color:var(--text);
}
.service-portal-search input::placeholder{color:#94A3B8}
.service-portal-panel{background:var(--white);border-top:1px solid rgba(148,163,184,.12)}
.service-toolbar{
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  padding:22px 28px;border-bottom:1px solid var(--border);
}
.service-view-control{display:flex;align-items:center;gap:14px;color:#475569;font-size:14px}
.service-select{
  min-width:128px;height:40px;padding:0 38px 0 14px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);
  font-size:14px;color:#0F172A;outline:none;
}
.service-table-wrap{overflow-x:auto}
.service-table{width:100%;border-collapse:collapse}
.service-table thead th{
  background:#fff;border-bottom:1px solid var(--border);
  padding:18px 28px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#64748B;
}
.service-table tbody td{
  padding:22px 28px;border-bottom:1px solid var(--border);
  vertical-align:top;font-size:14px;color:#334155;background:#fff;
}
.service-table tbody tr:hover td{background:#FCFDFE}
.service-product-name{font-size:1rem;font-weight:800;color:#111827;line-height:1.5;margin-bottom:6px}
.service-product-sub{font-size:14px;color:#F97316;line-height:1.6}
.service-product-meta{display:flex;flex-direction:column;gap:5px}
.service-product-note{font-size:13px;color:#64748B;line-height:1.65}
.service-link-inline{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:#2563EB;text-decoration:none;
}
.service-link-inline:hover{text-decoration:underline}
.service-price-main,.service-date-main,.service-status-main{font-size:15px;font-weight:700;color:#0F172A;line-height:1.5}
.service-price-sub,.service-date-sub{margin-top:6px;font-size:13px;color:#64748B}
.service-status{
  display:inline-flex;align-items:center;gap:10px;
  color:#22C55E;font-weight:700;font-size:15px;
}
.service-status-dot{
  width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid currentColor;font-size:11px;line-height:1;
}
.service-status.expired{color:#EF4444}
.service-status.pending{color:#94A3B8}
.service-actions{text-align:right}
.service-action-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 14px;border:none;border-radius:10px;
  background:#EFF6FF;color:#2563EB;cursor:pointer;font-size:13px;font-weight:700;text-decoration:none;
}
.service-action-btn:hover{background:#DBEAFE}
.service-pagination{
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  padding:16px 28px;background:#fff;
}
.service-pagination-left{display:flex;align-items:center;gap:12px;color:#475569}
.service-page-controls{display:flex;align-items:center;gap:6px}
.service-page-btn{
  min-width:44px;height:40px;padding:0 14px;border:none;border-radius:8px;
  background:#F8FAFC;color:#94A3B8;font-size:14px;cursor:pointer;
}
.service-page-btn.active{background:#FFF1E8;color:#F97316}
.service-empty{
  padding:40px 28px;color:#64748B;font-size:14px;background:#fff;text-align:center;
}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px;margin-bottom:28px}
.dash-stat-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:14px;padding:20px;box-shadow:var(--shadow-sm);
}
.dash-stat-card h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:8px}
.dash-stat-card .value{font-size:1.8rem;font-weight:800;color:var(--text)}
.dash-stat-card .change{font-size:12px;color:var(--green);margin-top:4px;font-weight:500}
.table-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.table-card-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg)}
.table-card-header h3{font-size:.95rem;font-weight:700;color:var(--text)}
table{width:100%;border-collapse:collapse}
th{padding:11px 18px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg)}
td{padding:13px 18px;font-size:14px;color:var(--text2);border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg)}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600}
.badge-pending{background:#FEF3C7;color:#92400E}
.badge-paid{background:#D1FAE5;color:#065F46}
.badge-verified{background:var(--blue3);color:var(--blue)}
.badge-rejected{background:#FEE2E2;color:#991B1B}

/* ── REFERRAL ── */
.ref-code-box{
  background:var(--blue3);border:1.5px solid rgba(37,99,235,.25);
  border-radius:14px;padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;
}
.ref-code{font-size:1.5rem;font-weight:800;color:var(--blue);letter-spacing:3px}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}

/* ── BLOG ── */
.blog-home{padding:46px 5% 72px;background:#FFFFFF}
.blog-hero{max-width:1120px;margin:0 auto 30px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.blog-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:850;color:var(--text);line-height:1.12;max-width:760px;margin:10px 0 12px}
.blog-hero p{max-width:680px;color:var(--text2);font-size:16px;line-height:1.8}
.blog-layout,.article-layout{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:42px;align-items:start}
.blog-main{min-width:0}
.blog-toolbar{margin:0 0 22px;display:flex;gap:10px;flex-wrap:wrap}
.blog-filter{border:1px solid var(--border);background:var(--white);color:var(--text2);border-radius:3px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;transition:.18s}
.blog-filter:hover{border-color:rgba(37,99,235,.35);color:var(--blue);background:var(--blue3)}
.blog-filter.active{background:var(--text);border-color:var(--text);color:var(--white)}
.blog-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--border)}
.blog-card{background:var(--white);border-bottom:1px solid var(--border);overflow:hidden;transition:.18s;cursor:pointer;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;padding:24px 0;min-height:0}
.blog-card:hover{background:#FAFCFF}
.blog-thumb{height:112px;background:#F1F5F9;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:1.7rem;font-weight:900}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body{padding:0;display:flex;flex-direction:column;min-width:0}
.blog-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.blog-cat{display:inline-flex;align-items:center;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.blog-date{font-size:12px;color:var(--text3);white-space:nowrap}
.blog-body h3{font-size:1.32rem;font-weight:800;color:var(--text);margin:0 0 10px;line-height:1.35}
.blog-body p{font-size:14.5px;color:var(--text2);line-height:1.8;margin:0 0 16px}
.blog-meta{margin-top:auto;font-size:12px;color:var(--text3);display:flex;align-items:center;justify-content:space-between;gap:12px}
.blog-readmore{color:var(--blue);font-weight:800}
.blog-sidebar{position:sticky;top:86px;display:flex;flex-direction:column;gap:22px}
.blog-widget{border-bottom:1px solid var(--border);padding-bottom:22px}
.blog-widget h3{font-size:14px;color:var(--text);font-weight:850;margin:0 0 13px;text-transform:uppercase;letter-spacing:.08em}
.blog-search input{width:100%;height:42px;border:1px solid var(--border);border-radius:3px;padding:0 12px;font-size:14px;color:var(--text);background:#FFFFFF}
.blog-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.blog-counters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.blog-counter{border:1px solid var(--border);padding:12px;background:#FAFCFF}
.blog-counter strong{display:block;font-size:1.25rem;color:var(--text);line-height:1}
.blog-counter span{display:block;font-size:11px;color:var(--text3);margin-top:6px;text-transform:uppercase;font-weight:700;letter-spacing:.06em}
.blog-category-list,.blog-recent-list{display:grid;gap:10px}
.blog-category-link,.blog-recent-link{display:flex;justify-content:space-between;gap:12px;color:var(--text2);font-size:14px;line-height:1.45;cursor:pointer;text-decoration:none;background:none;border:0;padding:0;text-align:left;font-family:inherit;width:100%}
.blog-category-link:hover,.blog-recent-link:hover{color:var(--blue)}
.blog-category-link span:last-child{color:var(--text3)}
.blog-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 6px;border-top:1px solid var(--border)}
.blog-pagination-copy{display:grid;gap:4px}
.blog-pagination-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blog-pagination-count{font-size:13px;font-weight:800;color:var(--text)}
.blog-pagination-note{font-size:12px;color:var(--text3)}
.blog-page-btn{border:1px solid var(--border);background:var(--white);color:var(--text);border-radius:999px;padding:11px 16px;font-size:12px;font-weight:800;letter-spacing:.03em;cursor:pointer;transition:.18s}
.blog-page-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.blog-page-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.blog-page-btn-primary{background:var(--blue);border-color:var(--blue);color:#FFFFFF;box-shadow:0 12px 24px rgba(13,38,38,.10)}
.blog-page-btn-primary:hover:not(:disabled){color:#FFFFFF;filter:brightness(1.04)}
.blog-load-more{border:1px solid var(--blue);background:var(--blue);color:#FFFFFF;border-radius:999px;padding:11px 18px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:.18s;box-shadow:0 12px 24px rgba(13,38,38,.10)}
.blog-load-more:hover{transform:translateY(-1px);filter:brightness(1.04)}
.blog-share,.article-share{display:flex;gap:9px;flex-wrap:wrap}
.article-share button{width:38px;height:38px;border:1px solid var(--border);background:#FFFFFF;border-radius:50%;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.18s}
.article-share button svg{width:17px;height:17px;display:block}
.article-share button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue3);transform:translateY(-1px)}
.inline-share{margin:0}
.article-action-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.sidebar-share button{width:42px;height:42px}
.article-shell{max-width:1120px;margin:0 auto;padding:22px 5% 72px}
.article-breadcrumb{font-size:13px;color:var(--text3);display:flex;gap:8px;align-items:center;margin:8px 0 24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-breadcrumb span:first-child{color:var(--blue);font-weight:700;cursor:pointer}
.article-breadcrumb strong{font-weight:600;color:var(--text3);overflow:hidden;text-overflow:ellipsis}
.article-card{background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 14px 34px rgba(15,23,42,.05)}
.article-card header{padding:34px 42px 24px}
.article-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.article-category{display:inline-flex;background:#EDF6F6;color:#163838;border-radius:999px;padding:7px 13px;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.article-meta{display:none}
.article-meta-clean{font-size:14px;color:#6B8585;line-height:1.5}
.article-title{font-size:clamp(1.35rem,1.65vw,1.72rem);font-weight:800;color:var(--text);line-height:1.34;margin:0 0 14px;letter-spacing:0;max-width:720px}
.article-lead{font-size:14.5px;color:#425F5F;line-height:1.72;margin:0 0 8px;max-width:700px}
.article-content{border-top:1px solid var(--border);padding:24px 42px 12px;color:var(--text);font-size:15px;line-height:1.78;max-width:none}
.article-content > *{max-width:700px}
.article-content .article-main-image{max-width:720px;margin:0 0 26px}
.article-main-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--border);box-shadow:0 16px 36px rgba(13,38,38,.08)}
.article-main-image figcaption{font-size:12px;color:var(--text3);line-height:1.6;margin-top:8px}
.article-content p{margin:0 0 22px;color:#223F3F}
.article-content h2{font-size:1.18rem;color:var(--text);line-height:1.35;margin:32px 0 12px;font-weight:820}
.article-content h3{font-size:1.02rem;color:var(--text);line-height:1.4;margin:24px 0 10px;font-weight:800}
.article-content ul{margin:0 0 22px;padding-left:22px;color:var(--text2)}
.article-content li{margin:8px 0}
.article-actions{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:0;padding:22px 42px 34px;border-top:1px solid var(--border);max-width:none}
.article-engagement{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;padding:0}
.article-like-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);background:#FFFFFF;color:var(--text);border-radius:999px;padding:10px 15px;font-size:13px;font-weight:800;cursor:pointer;transition:.18s}
.article-like-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.article-like-btn:hover,.article-like-btn.liked{border-color:rgba(37,99,235,.38);color:var(--blue);background:var(--blue3)}
.article-comments{margin:34px 42px 38px;max-width:700px;border-top:1px solid var(--border);padding-top:28px}
.article-comments h2{font-size:1.25rem;color:var(--text);margin:0 0 16px;font-weight:850}
.comment-list{display:grid;gap:14px;margin-bottom:24px}
.comment-item{border:1px solid var(--border);border-radius:10px;padding:15px 16px;background:#FFFFFF}
.comment-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.comment-head strong{font-size:14px;color:var(--text)}
.comment-head span{font-size:12px;color:var(--text3)}
.comment-item p{font-size:14.5px;line-height:1.72;color:var(--text2);margin:0}
.comment-form{border:1px solid var(--border);border-radius:10px;padding:18px;background:#FAFCFF;display:grid;gap:12px}
.comment-form-row{display:grid;grid-template-columns:1fr 180px;gap:12px}
.comment-form input,.comment-form textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:11px 12px;font-size:14px;color:var(--text);background:#FFFFFF;font-family:inherit}
.comment-form textarea{min-height:112px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.captcha-label{font-size:12px;color:var(--text3);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}

.article-editor-modal{max-width:min(980px,94vw);height:min(88vh,820px);display:flex;flex-direction:column}
.article-editor-modal .modal-header{flex-shrink:0}
.article-title-ai-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:10px}
.article-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.article-editor-group{display:flex;flex-direction:column;min-height:0;flex:1}
.article-editor-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px;border:1px solid var(--border);border-bottom:0;border-radius:10px 10px 0 0;background:#F8FBFB}
.article-editor-toolbar button{height:34px;border:1px solid var(--border);background:#FFFFFF;color:var(--text);border-radius:8px;padding:0 12px;font-size:12px;font-weight:800;cursor:pointer}
.article-editor-toolbar button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue3)}
.article-editor-toolbar select{height:34px;border:1px solid var(--border);background:#FFFFFF;color:var(--text);border-radius:8px;padding:0 10px;font-size:12px;font-weight:700;max-width:220px}
.article-product-insert-row{display:grid;grid-template-columns:auto minmax(220px,320px);gap:10px;align-items:center;padding:10px 12px;border-left:1px solid var(--border);border-right:1px solid var(--border);background:#FFFFFF}
.article-product-insert-row label{font-size:11px!important;font-weight:900!important;color:var(--text3)!important;text-transform:uppercase;margin:0!important;white-space:nowrap}
.article-product-insert-row select{height:38px;border:1px solid var(--border);background:#FFFFFF;color:var(--text);border-radius:10px;padding:0 12px;font-size:13px;font-weight:800;width:100%;min-width:0}
.article-editor-textarea{min-height:430px;flex:1;width:100%;overflow:auto;border-radius:0 0 10px 10px;border:1px solid var(--border);padding:22px;font-size:16px;line-height:1.85;color:var(--text);font-family:var(--sans);background:#FFFFFF}
.article-editor-textarea:empty:before{content:attr(data-placeholder);color:var(--text3)}
.article-editor-textarea h2{font-size:1.35rem;line-height:1.35;margin:26px 0 10px;color:var(--text)}
.article-editor-textarea h3{font-size:1.12rem;line-height:1.4;margin:20px 0 8px;color:var(--text)}
.article-editor-textarea p{margin:0 0 16px}
.article-editor-textarea ul,.article-editor-textarea ol{padding-left:24px;margin:0 0 16px}
.article-product-token{display:block;margin:14px 0;padding:12px 14px;border:1px dashed var(--blue);border-radius:10px;background:var(--blue3);color:var(--blue);font-size:13px;font-weight:800}
.article-editor-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.article-editor-help{font-size:12px;color:var(--text3);line-height:1.6;margin-top:8px}
.article-image-preview{
  min-height:96px;border:1px dashed #BFD7D7;border-radius:12px;background:#F8FCFC;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#6B9090;font-size:12.5px;line-height:1.55;padding:12px;overflow:hidden;
}
.article-image-preview.has-image{border-style:solid;background:#FFFFFF;padding:0}
.article-image-preview img{width:100%;height:150px;object-fit:cover;display:block}
.article-image-preview.is-error{border-color:#F3C8C8;background:#FFF8F8;color:#B91C1C}
.article-generate-progress{
  margin:12px 0 0;padding:12px;border:1px solid var(--border);border-radius:12px;
  background:#F8FCFC;display:none;gap:9px;
}
.article-generate-progress.show{display:grid}
.article-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text2);font-size:12.5px;font-weight:700}
.article-progress-percent{color:var(--blue);font-variant-numeric:tabular-nums}
.article-progress-track{height:8px;background:var(--bg3);border-radius:999px;overflow:hidden;border:1px solid rgba(35,70,70,.08)}
.article-progress-fill{height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .35s var(--ease)}
.article-progress-note{font-size:11.5px;color:var(--text3);line-height:1.55}
.article-product-embed{max-width:700px;margin:24px 0;border:1px solid var(--border);border-radius:10px;background:#F8FBFB;padding:16px;display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:14px;align-items:center;cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.article-product-embed:hover,.article-product-embed:focus-visible{background:#FFFFFF;border-color:#BFD7D7;box-shadow:0 16px 34px rgba(13,38,38,.08);transform:translateY(-1px);outline:none}
.article-product-embed img{width:82px;height:62px;object-fit:cover;border-radius:8px;background:#EEF3F3}
.article-product-placeholder{
  width:82px;height:62px;border-radius:8px;background:#EEF3F3;color:#234646;
  display:flex;align-items:center;justify-content:center;
}
.article-product-placeholder .ui-icon{width:28px;height:28px;opacity:.7}
.article-product-placeholder .ui-icon svg{width:28px;height:28px}
.article-product-embed h4{font-size:15px;margin:0 0 5px;color:var(--text)}
.article-product-embed p{font-size:13px!important;line-height:1.55!important;margin:0!important;color:var(--text2)!important}
.article-product-embed button{white-space:nowrap}

/* Professional article composer */
#addArticleModal{padding:18px;background:rgba(13,38,38,.42);backdrop-filter:blur(10px)}
#addArticleModal .article-editor-modal{
  position:relative;max-width:min(1180px,96vw);height:min(92vh,900px);padding:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto auto auto minmax(0,1fr) auto;
  gap:0;background:#F7FBFB;border:1px solid #D2E4E4;border-radius:22px;
  box-shadow:0 34px 90px rgba(13,38,38,.26);
}
#addArticleModal .modal-header{
  grid-column:1/-1;margin:0;padding:18px 22px;border-bottom:1px solid #D7E5E5;
  background:linear-gradient(180deg,#FFFFFF,#FAFDFD);align-items:center;
}
#addArticleModal .modal-header h3{font-size:1.15rem;font-weight:950}
#addArticleModal .modal-header h3:before{
  content:'AppInstan Editorial';display:block;margin-bottom:4px;
  color:#6B9090;font-size:10.5px;font-weight:900;text-transform:uppercase;
}
#addArticleModal .modal-close{border-radius:999px}
#addArticleModal .article-title-section{
  grid-column:1;grid-row:2;margin:0;padding:26px 48px 22px;background:#FFFFFF;border-bottom:1px solid #DDEAEA;
  border-right:1px solid #D7E5E5;
}
#addArticleModal .article-title-section label{
  color:#6B9090;font-size:11px;font-weight:950;text-transform:uppercase;
}
#addArticleModal .article-title-ai-row{
  grid-template-columns:minmax(0,1fr) 154px;gap:18px;align-items:end;
}
#addArticleModal #artTitle{
  min-height:54px;border:0;border-bottom:2px solid #D7E5E5;border-radius:0;background:#FFFFFF;
  padding:8px 2px;font-size:1.72rem;font-weight:950;line-height:1.22;color:#0D2626;
  width:100%;min-width:0;
}
#addArticleModal #artTitle:focus{box-shadow:none;border-color:#234646}
#addArticleModal #articleAiBtn{position:static;min-height:46px;padding:0 16px;white-space:nowrap}
#addArticleModal .article-category-section,
#addArticleModal .article-image-section,
#addArticleModal .article-seo-grid,
#addArticleModal > .article-editor-modal > .btn-full{
  grid-column:2;background:#FFFFFF;border-left:1px solid #D7E5E5;margin:0;padding:18px 20px;
}
#addArticleModal .article-category-section{grid-row:2;align-self:stretch;border-bottom:1px solid #E3EEEE}
#addArticleModal .article-image-section{grid-row:3;align-self:stretch;border-bottom:1px solid #E3EEEE}
#addArticleModal .article-seo-grid{
  grid-row:4;align-self:stretch;display:block;overflow:auto;max-height:calc(92vh - 405px);
}
#addArticleModal .article-seo-grid .form-group{margin-bottom:14px}
#addArticleModal > .article-editor-modal > .btn-full{
  position:absolute!important;right:0;bottom:0;width:330px!important;z-index:40;
  border-top:1px solid #E3EEEE;border-left:1px solid #D7E5E5;border-radius:0 0 22px 0;
  min-height:64px;display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#FFFFFF;box-shadow:0 -12px 34px rgba(13,38,38,.12);
}
#addArticleModal .article-editor-group{
  grid-column:1;grid-row:3 / 6;margin:0;padding:20px 24px 24px;min-height:0;background:#F7FBFB;
}
#addArticleModal .article-editor-group > label{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  color:#6B9090;font-size:11px;font-weight:950;text-transform:uppercase;
}
#addArticleModal .article-editor-toolbar{
  position:sticky;top:0;z-index:2;padding:9px;border:1px solid #D7E5E5;border-radius:14px 14px 0 0;
  background:#FFFFFF;box-shadow:0 8px 20px rgba(13,38,38,.045);
}
#addArticleModal .article-editor-toolbar button{
  min-width:38px;height:36px;border-radius:10px;border-color:#D7E5E5;background:#F8FCFC;
}
#addArticleModal .article-editor-toolbar select{
  margin-left:auto;height:36px;border-radius:10px;border-color:#D7E5E5;background:#F8FCFC;
}
#addArticleModal .article-product-insert-row{
  border-color:#D7E5E5;background:#FFFFFF;box-shadow:0 8px 20px rgba(13,38,38,.035);
}
#addArticleModal .article-product-insert-row select{
  border-color:#D7E5E5;background:#F8FCFC;
}
#addArticleModal .article-editor-toolbar button:first-child{
  background:#EAF3F3;color:#173E3E;border-color:#BFD7D7;min-width:112px;
}
#addArticleModal .article-editor-textarea{
  min-height:0;height:100%;padding:34px 42px;max-width:none;border:1px solid #D7E5E5;border-top:0;
  border-radius:0 0 16px 16px;background:#FFFFFF;font-size:16px;line-height:1.9;
  box-shadow:0 18px 44px rgba(13,38,38,.055);
}
#addArticleModal .article-editor-textarea a{color:var(--blue);font-weight:800;text-decoration:underline}
#addArticleModal .article-editor-textarea blockquote{
  margin:22px 0;padding:14px 18px;border-left:4px solid var(--blue);background:#F4FAFA;color:#294D4D;border-radius:0 12px 12px 0;
}
#addArticleModal .article-editor-textarea figure.article-editor-image{margin:24px 0;max-width:100%}
#addArticleModal .article-editor-textarea figure.article-editor-image img{
  width:100%;height:auto;border-radius:14px;border:1px solid #D7E5E5;box-shadow:0 10px 24px rgba(13,38,38,.06);
}
#addArticleModal .article-editor-textarea figure.article-editor-image figcaption{
  margin-top:8px;text-align:center;color:#6B9090;font-size:12.5px;font-style:italic;
}
#addArticleModal .article-editor-textarea:focus{box-shadow:0 18px 44px rgba(13,38,38,.075)}
#addArticleModal .article-editor-help{
  margin-top:12px;padding:12px 14px;border:1px solid #D7E5E5;border-radius:12px;background:#FFFFFF;
}
#addArticleModal .form-group label{font-weight:900}
#addArticleModal input,#addArticleModal select,#addArticleModal textarea{background:#FBFDFD}

/* Blog & Article polish */
.blog-home{
  padding:42px 5% 76px;
  background:linear-gradient(180deg,#F8FCFC 0%,#FFFFFF 260px);
}
.blog-hero{
  padding:28px 30px;border:1px solid #D7E5E5;border-radius:18px;background:#FFFFFF;
  box-shadow:0 14px 36px rgba(13,38,38,.06);
}
.blog-hero h1{font-size:clamp(1.75rem,3.4vw,2.65rem);font-weight:900;letter-spacing:0}
.blog-hero p{color:#496969;font-size:15.5px}
.blog-layout,.article-layout{gap:34px}
.blog-toolbar{
  padding:10px;border:1px solid #D7E5E5;border-radius:15px;background:#FFFFFF;
  box-shadow:0 8px 24px rgba(13,38,38,.045);
}
.blog-filter{border:1px solid transparent;border-radius:10px;background:transparent;color:#496969;font-weight:850}
.blog-filter:hover{border-color:#C8DADA;color:var(--blue);background:#F4FAFA}
.blog-filter.active{background:var(--blue);border-color:var(--blue);color:#FFFFFF;box-shadow:0 8px 18px rgba(35,70,70,.16)}
.blog-grid{gap:14px;border-top:0}
.blog-card{
  border:1px solid #D7E5E5;border-radius:16px;padding:18px;grid-template-columns:142px minmax(0,1fr);
  gap:20px;box-shadow:0 10px 26px rgba(13,38,38,.05);
}
.blog-card:hover{background:#FFFFFF;border-color:#BFD7D7;box-shadow:0 16px 38px rgba(13,38,38,.08);transform:translateY(-1px)}
.blog-thumb{height:112px;border-radius:13px;background:linear-gradient(135deg,#EDF6F6,#FFFFFF);border:1px solid #D7E5E5;font-size:1.6rem;font-weight:950}
.blog-body{padding:2px 4px 2px 0}
.blog-cat{background:#EDF6F6;border:1px solid #D7E5E5;border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:900}
.blog-body h3{font-size:1.18rem;font-weight:900;letter-spacing:0}
.blog-body p{font-size:14px;color:#496969}
.blog-sidebar{gap:16px}
.blog-widget{border:1px solid #D7E5E5;border-radius:16px;padding:18px;background:#FFFFFF;box-shadow:0 10px 26px rgba(13,38,38,.05)}
.blog-widget h3{font-size:12px;font-weight:950}
.blog-search input{height:44px;border:1px solid #C8DADA;border-radius:11px;background:#FBFDFD}
.blog-search input:focus{border-color:var(--blue);background:#FFFFFF;box-shadow:0 0 0 3px rgba(35,70,70,.12)}
.blog-counter{border:1px solid #D7E5E5;border-radius:12px;background:#F8FCFC}
.blog-category-link,.blog-recent-link{
  background:#FBFDFD;border:1px solid transparent;border-radius:10px;padding:9px 10px;color:#3F6060;transition:.16s;
}
.blog-category-link:hover,.blog-recent-link:hover{background:#F1F8F8;border-color:#D7E5E5;color:var(--blue)}
.blog-pagination{padding:20px 2px 2px;border-top:1px solid #D7E5E5}
.blog-pagination-count{font-weight:900}
.blog-page-btn{border-color:#C8DADA;border-radius:999px;background:#FFFFFF}
.blog-page-btn:hover:not(:disabled){border-color:#7FA6A6;background:#F4FAFA}
.blog-page-btn-primary{background:linear-gradient(135deg,var(--blue),#2F7A7A);border-color:transparent;box-shadow:0 14px 30px rgba(13,38,38,.14)}
.blog-page-btn-primary:hover:not(:disabled){box-shadow:0 16px 34px rgba(13,38,38,.18)}
.blog-load-more{background:linear-gradient(135deg,var(--blue),#2F7A7A);border-color:transparent;box-shadow:0 14px 30px rgba(13,38,38,.14)}
.blog-load-more:hover{box-shadow:0 16px 34px rgba(13,38,38,.18)}
.article-shell{padding-top:28px;background:linear-gradient(180deg,#F8FCFC 0%,transparent 240px)}
.article-breadcrumb{background:#FFFFFF;border:1px solid #D7E5E5;border-radius:12px;padding:10px 12px;margin-bottom:18px}
.article-card{border-color:#D7E5E5;border-radius:18px;box-shadow:0 18px 44px rgba(13,38,38,.075)}
.article-card header{padding:32px 42px 22px;background:linear-gradient(180deg,#FFFFFF,#FCFEFE)}
.article-title{font-size:clamp(1.42rem,1.9vw,1.95rem);font-weight:900;max-width:760px}
.article-content{padding-top:28px;font-size:15.5px;line-height:1.86}
.article-content > *{max-width:720px}
.article-content p{color:#1D3A3A;margin-bottom:20px}
.article-content h2{font-size:1.32rem;margin-top:34px;font-weight:900}
.article-content h3{font-size:1.12rem;font-weight:900}
.article-share button,.article-like-btn{box-shadow:0 6px 16px rgba(13,38,38,.055)}
.article-comments{border-top:1px solid #D7E5E5}
.comment-item{border-color:#D7E5E5;border-radius:14px;box-shadow:0 8px 20px rgba(13,38,38,.04)}
.comment-form{border-color:#D7E5E5;border-radius:14px;background:#F8FCFC}
.comment-form input,.comment-form textarea{border-color:#C8DADA;border-radius:10px}
.article-product-embed{border-color:#D7E5E5;border-radius:14px;background:#F8FCFC;box-shadow:0 10px 24px rgba(13,38,38,.045)}
.admin-tab-logout{color:var(--red)!important}
.admin-tab-logout .admin-tab-icon{background:#FFF5F5;color:var(--red)}
.admin-tab-logout:hover{background:rgba(220,38,38,.08)!important;color:var(--red)!important}

/* Global polish pass */
body{font-size:15px;line-height:1.65;text-rendering:optimizeLegibility}
body *,body *::before,body *::after{letter-spacing:0}
section{padding-top:72px;padding-bottom:72px}
.section-header{max-width:760px;margin:0 auto 34px}
.section-header:not(.center){margin-left:0}
.section-label{border:1px solid #D7E5E5;background:#EDF6F6;color:#173E3E;font-weight:850}
.section-title{font-weight:900;line-height:1.22}
.section-sub{color:#496969;font-size:14.5px}
.page-header{
  background:linear-gradient(180deg,#FFFFFF,#F8FCFC);
  border-bottom:1px solid #D7E5E5;
  padding:30px 5% 26px;
}
.page-header h2{font-weight:900}
.page-header p{max-width:680px;color:#5C7D7D;line-height:1.7}
.lead-magnet-section{
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FCFC 100%);
  border-color:#D7E5E5;
}
.lead-copy h2{font-weight:900}
.lead-copy p,.lead-benefits div{color:#456868}
.lead-form{
  border-color:#D7E5E5;border-radius:18px;background:#FFFFFF;
  box-shadow:0 18px 46px rgba(13,38,38,.075);
}
.lead-form h3{font-weight:900}
.lead-form input,.lead-form select,.lead-form textarea,
.form-group input,.form-group select,.form-group textarea{
  border-color:#C8DADA;background:#FBFDFD;border-radius:11px;
}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--blue);background:#FFFFFF;box-shadow:0 0 0 3px rgba(35,70,70,.12);
}
.features-grid,.products-grid{align-items:stretch}
.feature-card,.product-card,.testi-card,.faq-item,.demo-card,.checkout-form-card,.order-summary-card,.table-card,.dash-stat-card{
  border-color:#D7E5E5;border-radius:18px;box-shadow:0 12px 30px rgba(13,38,38,.055);
}
.feature-card:hover,.product-card:hover,.testi-card:hover,.faq-item:hover{
  border-color:#BFD7D7;box-shadow:0 18px 46px rgba(13,38,38,.085);transform:translateY(-2px);
}
.feature-card h3,.faq-item h3{font-weight:900}
.feature-card p,.faq-item p{color:#496969}
.product-card{background:linear-gradient(180deg,#FFFFFF,#FCFEFE)}
.product-card img,.product-image,.product-thumb,.prod-slide-wrap{
  background:#EEF6F6;border-bottom:1px solid #D7E5E5;object-fit:cover;
}
.product-card h3,.product-title,.subscription-card-title{font-weight:900}
.product-card p,.product-desc,.subscription-card-subtitle{color:#496969}
.btn-primary,.btn-outline,.service-action-btn,.admin-btn,.article-like-btn{
  border-radius:11px;font-weight:850;
}
.btn-primary{box-shadow:0 10px 22px rgba(35,70,70,.18)}
.btn-outline{border-color:#C8DADA;background:#FFFFFF}
.checkout-layout,.demo-layout{gap:28px}
.checkout-form-card h2,.order-summary-card h2{font-weight:900}
.payment-method,.upload-box{border-color:#C8DADA;background:#F8FCFC}
.payment-method:hover,.upload-box:hover{border-color:var(--blue);background:#F2FAFA}
.dashboard-main{background:linear-gradient(180deg,#F6FAFA,#EFF5F5)}
.sidebar{border-color:#D7E5E5;box-shadow:1px 0 0 rgba(13,38,38,.025)}
.sidebar-item{border-radius:11px}
.sidebar-item.active{background:#E4F1F1;color:#173E3E;font-weight:850}
.table-card{overflow:hidden}
th{background:#F7FBFB;color:#5C7D7D;font-weight:850}
td{color:#2C4A4A}
.auth-container{background:linear-gradient(160deg,#FFFFFF 0%,#EFF5F5 56%,#E1EEEE 100%)}
.auth-card{border-color:#D7E5E5;border-radius:22px;box-shadow:0 24px 70px rgba(13,38,38,.13)}
.auth-card h2{font-weight:900}
.toast{border-color:#D7E5E5;border-radius:14px;box-shadow:0 18px 44px rgba(13,38,38,.12)}

/* ── ADMIN ── */
#page-admin{background:#F3F7F7;height:100vh;overflow:hidden}
.admin-shell{display:grid;grid-template-columns:260px minmax(0,1fr);height:100vh;min-height:0;background:#F3F7F7;overflow:hidden}
.admin-sidebar{
  position:sticky;top:0;height:100vh;min-height:0;
  background:#FFFFFF;border-right:1px solid var(--border);
  padding:0 14px 16px;display:flex;flex-direction:column;gap:14px;
  box-shadow:1px 0 0 rgba(13,38,38,.02);
  overflow:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(35,70,70,.28) transparent;
}
.admin-sidebar::-webkit-scrollbar{width:6px}
.admin-sidebar::-webkit-scrollbar-thumb{background:rgba(35,70,70,.24);border-radius:999px}
.admin-brand{
  position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:10px;
  min-height:70px;padding:14px 6px;border-bottom:1px solid var(--border);
  background:#FFFFFF;flex:0 0 auto;
}
.admin-brand-mark{
  width:100%;min-height:42px;border-radius:12px;background:var(--card);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;letter-spacing:0;box-shadow:0 8px 18px rgba(13,38,38,.08);
  border:1px solid var(--border);
  overflow:hidden;padding:8px 10px;
}
.admin-brand-mark img{display:block;max-width:100%;max-height:48px;width:auto;height:auto;object-fit:contain}
.admin-brand-fallback{display:none;font-size:16px;font-weight:900;line-height:1.2;text-align:center;word-break:break-word}
.admin-brand strong{display:block;font-size:15px;color:var(--text);line-height:1.2}
.admin-brand span{display:block;font-size:12px;color:var(--text3);margin-top:3px}
.admin-tabs{overflow-y:auto;min-height:0;padding-right:2px}
.admin-user-card{
  display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FBFB 100%);border-radius:14px;
  width:100%;font:inherit;text-align:left;cursor:pointer;transition:.18s;
}
.admin-user-card:hover{border-color:#B8D2D2;background:#FFFFFF;box-shadow:0 10px 24px rgba(13,38,38,.08)}
.admin-user-card:focus-visible{outline:3px solid rgba(47,143,213,.22);outline-offset:2px}
.admin-user-avatar{
  width:38px;height:38px;border-radius:11px;background:var(--blue3);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;
}
.admin-user-card strong{display:block;font-size:13px;color:var(--text);line-height:1.25}
.admin-user-card span{display:block;font-size:11px;color:var(--text3);margin-top:3px;max-width:168px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-tabs{display:flex;flex-direction:column;gap:4px;background:transparent;margin:0;border:none;box-shadow:none;flex:1 1 auto}
.admin-tab{
  width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  cursor:pointer;font-size:13px;font-weight:700;color:var(--text2);border:1px solid transparent;
  background:transparent;transition:.18s;white-space:nowrap;text-align:left;
}
.admin-tab:hover{background:#F3F8F8;color:var(--text)}
.admin-tab.active{background:var(--blue);color:#FFFFFF;box-shadow:0 10px 22px rgba(35,70,70,.20);border-color:var(--blue)}
.admin-tab-icon{
  width:30px;height:30px;border-radius:10px;background:#fff3ed;color:#dd4814;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid rgba(221,72,20,.16);
}
.admin-tab-icon svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.admin-tab-icon svg path:first-child:last-child{fill:currentColor;stroke:none}
.admin-tab.active .admin-tab-icon{background:rgba(255,255,255,.18);color:#FFFFFF;border-color:rgba(255,255,255,.24)}
.admin-logout{
  margin-top:8px;border:1px solid rgba(220,38,38,.16);background:rgba(220,38,38,.06);
  color:var(--red);border-radius:12px;padding:11px 12px;font-weight:800;cursor:pointer;transition:.18s;text-align:left;
}
.admin-logout:hover{background:rgba(220,38,38,.10)}
.admin-main{min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.admin-topbar{
  position:sticky;top:0;z-index:7;
  min-height:86px;background:#FFFFFF;border-bottom:1px solid var(--border);
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex:0 0 auto;
}
.admin-eyebrow{font-size:10px;color:var(--blue);font-weight:850;letter-spacing:.12em;margin-bottom:4px}
.admin-topbar h2{font-size:1.32rem;font-weight:900;color:var(--text);margin:0;line-height:1.2}
.admin-topbar p{font-size:12.5px;color:var(--text2);margin-top:4px;max-width:560px;line-height:1.45}
.admin-topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-topbar-actions .btn-outline,.admin-topbar-actions .btn-primary{padding:9px 14px;font-size:13px;min-height:38px}
.admin-drawer-overlay{display:none}
.admin-menu-toggle{
  display:none;width:38px;height:38px;border:1px solid #D7E5E5;border-radius:11px;background:#FFFFFF;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;flex:0 0 auto;
}
.admin-menu-toggle span{width:17px;height:2px;border-radius:999px;background:#173E3E;display:block}
.admin-content{padding:22px 28px 38px;min-width:0;overflow:auto;min-height:0;flex:1 1 auto}
.admin-page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.admin-page-title span{font-size:1.05rem;font-weight:850;color:var(--text)}
.admin-page-title small{font-size:12px;color:var(--text3);font-weight:600}
.admin-panel{min-width:0}
#page-admin .table-card{
  border-radius:16px;border:1px solid var(--border);box-shadow:0 12px 28px rgba(13,38,38,.06);
  overflow:auto;background:#FFFFFF;
}
#page-admin .table-card-header{background:#FFFFFF;padding:16px 18px}
#page-admin .table-card-header h3{font-size:1rem;font-weight:850}
#page-admin table{min-width:720px}
#page-admin th{background:#F7FBFB;color:#5F7F7F;font-weight:800;padding:13px 16px}
#page-admin td{padding:14px 16px;color:#284646;vertical-align:middle}
#page-admin tr:hover td{background:#FAFDFD}
#page-admin .dash-stats{margin-bottom:20px}
#page-admin .dash-stats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#page-admin .dash-stat-card{border-radius:16px;border-color:var(--border);box-shadow:0 10px 24px rgba(13,38,38,.05)}
.dash-stat-clickable{
  appearance:none;text-align:left;width:100%;font-family:inherit;cursor:pointer;
}
.dash-stat-clickable:hover{
  border-color:var(--blue);box-shadow:0 14px 32px rgba(35,70,70,.12);transform:translateY(-1px);
}
.dash-stat-clickable:focus-visible{
  outline:3px solid rgba(35,70,70,.18);outline-offset:2px;
}
#page-admin .admin-content{
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 260px),
    #F3F7F7;
}
#page-admin .admin-panel > .checkout-form-card,
#page-admin .admin-panel > .table-card,
#page-admin .admin-panel > .dash-stats + .checkout-form-card{
  animation:adminPanelIn .18s ease-out;
}
@keyframes adminPanelIn{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
#page-admin .checkout-form-card{
  border-radius:18px;border-color:#D7E5E5;background:#FFFFFF;
  box-shadow:0 12px 28px rgba(13,38,38,.055);
}
#page-admin .checkout-form-card h2,
#page-admin .checkout-form-card h3,
#page-admin .checkout-form-card h4{letter-spacing:0}
#page-admin .form-group input,
#page-admin .form-group select,
#page-admin .form-group textarea,
#page-admin input[type="url"],
#page-admin input[type="text"],
#page-admin input[type="number"],
#page-admin input[type="password"],
#page-admin input[type="email"],
#page-admin textarea,
#page-admin select{
  background:#FBFDFD;border:1px solid #CBDEDE;border-radius:10px;
  min-height:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
#page-admin .form-group input:focus,
#page-admin .form-group select:focus,
#page-admin .form-group textarea:focus,
#page-admin input:focus,
#page-admin textarea:focus,
#page-admin select:focus{
  background:#FFFFFF;border-color:#3A7575;box-shadow:0 0 0 3px rgba(58,117,117,.12);
}
#page-admin .table-card{
  border-radius:18px;border-color:#D7E5E5;background:#FFFFFF;
  box-shadow:0 12px 28px rgba(13,38,38,.055);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#page-admin .table-card table{border-collapse:separate;border-spacing:0}
#page-admin .table-card thead th{
  background:#F7FAFA;color:#557575;border-bottom:1px solid #D7E5E5;
  padding:13px 18px;font-size:11px;font-weight:850;letter-spacing:.075em;
}
#page-admin .table-card tbody td{
  padding:15px 18px;border-bottom:1px solid #E3EEEE;color:#294747;vertical-align:middle;
}
#page-admin .table-card tbody tr:nth-child(even) td{background:#FCFEFE}
#page-admin .table-card tbody tr:hover td{background:#F2F8F8}
#page-admin .table-card tbody tr:last-child td{border-bottom:0}
#page-admin .table-card img{box-shadow:0 1px 0 rgba(13,38,38,.08)}
#page-admin .badge{
  border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:850;
  letter-spacing:.045em;text-transform:uppercase;border:1px solid transparent;
}
#page-admin .badge-paid{background:#E4F8EF;color:#047857;border-color:#BFEED9}
#page-admin .badge-pending{background:#FFF6DB;color:#92400E;border-color:#FDE7A3}
#page-admin .badge-verified{background:#E8F1F1;color:#234646;border-color:#C8DADA}
#page-admin .badge-rejected,#page-admin .badge-failed{background:#FDECEC;color:#B91C1C;border-color:#F8CACA}
#page-admin .btn-sm{
  flex:0 0 auto;min-height:34px;border-radius:9px;padding:7px 11px!important;
  font-size:12px!important;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
#page-admin .btn-sm-outline{background:#FFFFFF;border:1px solid #C8DADA;color:#234646}
#page-admin .btn-sm-outline:hover{background:#EDF6F6;border-color:#8DBABA;color:#123232}
#page-admin .btn-primary,
#page-admin .btn-outline{
  min-height:42px;border-radius:10px;font-weight:850;letter-spacing:0;
}
#page-admin .admin-page-title{
  background:#FFFFFF;border:1px solid #D7E5E5;border-radius:16px;
  padding:18px 20px;margin-bottom:20px;box-shadow:0 10px 24px rgba(13,38,38,.045);
}
#page-admin .admin-page-title span{font-size:1.12rem;font-weight:900}
#page-admin .admin-page-title small{font-size:13px;color:#6B9090}
#page-admin .admin-topbar{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFD 100%);
  box-shadow:0 1px 0 rgba(13,38,38,.04);
}
#page-admin .admin-topbar h2{font-size:1.45rem;font-weight:900;letter-spacing:0}
#page-admin .admin-topbar p{font-size:13.5px;color:#5D7C7C}
#page-admin .admin-topbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#page-admin .admin-tabs{gap:6px}
#page-admin .admin-tab{border-radius:11px;min-height:44px}
#page-admin .admin-tab.active{box-shadow:0 10px 20px rgba(35,70,70,.16)}
#page-admin .dash-stat-card{
  background:linear-gradient(180deg,#FFFFFF,#FBFDFD);
  border-color:#D7E5E5;
}
#page-admin .dash-stat-card .value{font-size:1.65rem}
.admin-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 16px;padding:16px 18px;border:1px solid #D7E5E5;border-radius:16px;
  background:#FFFFFF;box-shadow:0 10px 24px rgba(13,38,38,.045);
}
.admin-section-head h3{font-size:1.05rem;font-weight:900;color:var(--text);margin:0}
.admin-section-head p{font-size:13px;color:#6B9090;margin:4px 0 0;line-height:1.5}
.admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-action-icons{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:max-content}
#page-admin th:last-child,
#page-admin td:last-child{
  min-width:128px;
  white-space:nowrap;
}
#page-admin td:last-child .admin-action-icons{
  justify-content:flex-start;
}
.admin-icon-btn{
  width:34px;height:34px;min-width:34px;padding:0;border-radius:9px;border:1px solid #C8DADA;
  background:#FFFFFF;color:#234646;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.admin-icon-btn .ui-icon,.admin-icon-btn .ui-icon svg{width:16px;height:16px}
.admin-icon-btn:hover{background:#EDF6F6;border-color:#8DBABA;color:#123232;transform:translateY(-1px)}
.admin-icon-danger{color:var(--red);border-color:#F3C8C8;background:#FFF8F8}
.admin-icon-danger:hover{background:#FDECEC;border-color:#EFA4A4;color:#B91C1C}
.admin-icon-edit{color:#176B87}
.admin-icon-pin{color:#6B8585}
.admin-icon-pin.is-active{background:#EDF6F6;border-color:#7FB7C9;color:#176B87}
.admin-icon-pin.is-active .ui-icon{transform:rotate(-18deg)}
.integration-card{width:100%;max-width:980px;margin-bottom:20px;overflow:visible}
#adminTab-aIntegrations .integrations-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
  width:100%;max-width:1180px;padding:0 0 36px;align-items:start;
}
#adminTab-aIntegrations .integration-card{
  width:100%;max-width:none;min-width:0;margin-bottom:0;box-sizing:border-box;
}
#adminTab-aIntegrations .integration-actions{
  align-items:stretch;justify-content:flex-start;
}
#adminTab-aIntegrations .integration-actions .btn-primary,
#adminTab-aIntegrations .integration-actions .btn-outline{
  flex:0 1 auto;min-width:150px;max-width:100%;
}
#adminTab-aIntegrations .integration-card table{width:100%;table-layout:auto}
#adminTab-aIntegrations .integration-card td{overflow-wrap:anywhere;word-break:break-word}
@media(min-width:1180px){
  #adminTab-aIntegrations .integrations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #adminTab-aIntegrations .integration-suite-card,
  #adminTab-aIntegrations .integration-matrix-card,
  #adminTab-aIntegrations .integration-status-card{grid-column:1 / -1}
}
.integration-card.table-card{overflow:auto}
.integration-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.integration-actions:last-child{margin-bottom:0}
.integration-actions .btn-primary,.integration-actions .btn-outline{white-space:normal;min-width:max-content}
.integration-table-wrap{
  width:100%;overflow-x:auto;overflow-y:visible;padding:0 2px 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.integration-suite-table{min-width:920px}
.integration-suite-table th:last-child,.integration-suite-table td:last-child{padding-right:24px}
.integration-action-cell{white-space:nowrap;text-align:right}
.integration-action-btn{min-width:72px;white-space:nowrap}
.about-license-wrap{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:18px;align-items:start;max-width:980px}
.about-license-card h2{margin:0 0 12px!important;font-size:1.25rem!important;color:var(--text)}
.about-license-card p{color:var(--text2);font-size:14px;line-height:1.8;margin:0 0 14px}
.about-kicker{display:inline-flex;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:var(--blue3);color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.about-visit-link{display:inline-flex;margin-top:4px}
.about-license-terms ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.about-license-terms li{position:relative;padding-left:18px;color:var(--text2);font-size:14px;line-height:1.7}
.about-license-terms li:before{content:'';position:absolute;left:0;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.about-copyright{grid-column:1/-1;color:var(--text3);font-size:13px;text-align:center;padding:8px 0 0}
.about-copyright a{color:var(--blue);font-weight:800}
.about-copyright a:hover{text-decoration:underline}
.admin-cell-title{font-weight:850;color:#143333;line-height:1.45}
.admin-cell-muted{font-size:12.5px;color:#6B9090;line-height:1.5;margin-top:2px}
.admin-thumb{
  width:52px;height:52px;border-radius:12px;object-fit:cover;background:#EEF5F5;
  border:1px solid #D7E5E5;display:flex;align-items:center;justify-content:center;font-size:1.35rem;
}
.admin-empty{
  text-align:center!important;color:#6B9090!important;padding:30px!important;background:#FCFEFE!important;
}
.admin-mobile-cards{display:none}
.admin-mobile-edit-card{
  position:relative;width:100%;border:1px solid #D7E5E5;border-radius:14px;
  background:#FFFFFF;box-shadow:0 10px 24px rgba(13,38,38,.055);
  padding:14px;cursor:pointer;color:var(--text);
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.admin-mobile-edit-card:hover,.admin-mobile-edit-card:focus-visible{
  background:#F8FCFC;border-color:#9FCACA;box-shadow:0 14px 30px rgba(13,38,38,.09);
  outline:none;transform:translateY(-1px);
}
.admin-mobile-edit-card:after{
  content:'Edit';position:absolute;top:12px;right:12px;border-radius:999px;
  background:#EDF6F6;color:#234646;border:1px solid #C8DADA;
  padding:4px 9px;font-size:10.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
}
.admin-mobile-product-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:start}
.admin-mobile-article-card{display:grid;gap:12px}
.admin-mobile-user-card,.admin-mobile-lead-card{display:grid;gap:12px;cursor:default}
.admin-mobile-user-card:after,.admin-mobile-lead-card:after{display:none}
.admin-mobile-card-index{
  position:absolute;left:12px;top:12px;z-index:1;border-radius:999px;background:rgba(255,255,255,.92);
  border:1px solid #D7E5E5;color:#6B9090;font-size:10px;font-weight:900;padding:2px 6px;
}
.admin-mobile-card-media{
  width:54px;height:54px;border-radius:12px;overflow:hidden;border:1px solid #D7E5E5;background:#EEF5F5;
  display:flex;align-items:center;justify-content:center;color:#234646;font-size:1.2rem;font-weight:900;
}
.admin-mobile-card-media img{width:100%;height:100%;display:block;object-fit:cover}
.admin-mobile-card-body{display:grid;min-width:0;padding-right:48px;gap:5px;text-align:left}
.admin-mobile-card-body strong{color:#143333;font-size:14px;font-weight:900;line-height:1.35;word-break:break-word}
.admin-mobile-card-body small{color:#6B9090;font-size:12px;line-height:1.45}
.admin-mobile-card-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#6B9090;font-size:11.5px;font-weight:750;
}
.admin-mobile-card-meta a{color:var(--blue);font-weight:900;text-decoration:none}
.admin-mobile-card-actions{
  grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:2px;
}
.admin-mobile-card-actions .btn-sm{min-height:32px!important;padding:6px 9px!important}
.admin-mobile-toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border:1px solid #D7E5E5;border-radius:12px;background:#F8FCFC;color:#294747;font-size:12px;font-weight:850;
}
.admin-mobile-lead-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;
}
.admin-mobile-lead-head .admin-mobile-card-body{padding-right:0}
.admin-mobile-lead-contact{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;
  border:1px solid #D7E5E5;border-radius:12px;background:#F8FCFC;min-width:0;
}
.admin-mobile-lead-contact span{display:grid;gap:2px;min-width:0}
.admin-mobile-lead-contact small{
  color:#6B9090;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}
.admin-mobile-lead-contact strong{
  color:#143333;font-size:13px;font-weight:950;line-height:1.25;word-break:break-word;
}
.admin-mobile-wa-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 12px;
  border-radius:10px;border:1px solid #128C7E;background:#25D366;color:#073B33!important;
  font-size:12px;font-weight:950;text-decoration:none;white-space:nowrap;box-shadow:0 8px 18px rgba(37,211,102,.18);
}
.admin-mobile-wa-btn.is-disabled{
  background:#EDF5F5;border-color:#D7E5E5;color:#8AA5A5!important;box-shadow:none;cursor:not-allowed;
}
.admin-mobile-lead-need{
  display:block;padding:10px 12px;border-radius:12px;background:#F8FCFC;border:1px solid #E3EEEE;
  color:#294747;font-size:12.5px;line-height:1.55;font-weight:700;word-break:break-word;
}
.admin-mobile-lead-card select{min-width:150px!important;max-width:100%;min-height:34px}
.admin-mobile-empty{
  border:1px dashed #C8DADA;border-radius:14px;padding:22px;text-align:center;
  color:#6B9090;background:#FCFEFE;font-size:13px;font-weight:750;
}

/* ── AUTH ── */
.auth-container{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--bg);
}
.auth-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:20px;padding:40px;width:100%;max-width:420px;
  box-shadow:var(--shadow-lg);
}
.auth-card h2{font-size:1.6rem;font-weight:800;color:var(--text);margin-bottom:6px;text-align:center}
.auth-card .sub{color:var(--text2);text-align:center;margin-bottom:26px;font-size:14px}
.auth-card .logo-center{
  display:flex;justify-content:center;align-items:center;gap:10px;margin:0 auto 24px;
  width:min(100%,240px);min-height:70px;padding:14px 18px;border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(13,38,38,.08);
}
.auth-card .logo-center img{height:44px;width:auto;max-width:190px;border-radius:0;object-fit:contain}
.auth-card .logo-center span{font-weight:800;font-size:1.2rem;color:var(--text)}
.auth-link{color:var(--blue);text-decoration:none;font-weight:600;cursor:pointer}
.auth-link:hover{text-decoration:underline}
.btn-full{width:100%;justify-content:center}
.auth-divider{
  display:flex;align-items:center;gap:12px;
  margin:18px 0 16px;color:var(--text3);font-size:12px;font-weight:600;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.google-auth-wrap{display:flex;flex-direction:column;gap:10px}
.google-auth-note{font-size:12px;color:var(--text3);text-align:center}
.alert{padding:12px 15px;border-radius:10px;font-size:14px;margin-bottom:14px}
.alert-success{background:#D1FAE5;border:1px solid #A7F3D0;color:#065F46}
.alert-error{background:#FEE2E2;border:1px solid #FECACA;color:#991B1B}

/* ── TOAST ── */
.toast{
  position:fixed;top:78px;right:18px;z-index:3000;
  background:var(--white);border:1px solid var(--border);
  border-left:4px solid var(--blue);
  border-radius:12px;padding:13px 18px;
  min-width:270px;max-width:340px;
  box-shadow:var(--shadow-lg);
  transform:translateX(calc(100% + 18px));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;gap:10px;
}
.toast.show{transform:translateX(0)}
.toast-icon{font-size:1.2rem}
.toast-text{flex:1;font-size:14px;color:var(--text);font-weight:500}

/* ── LOADING ── */
/* Reusable UI primitives */
.ui-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor}
.ui-icon svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-state{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:92px;padding:22px;border:1px solid #D7E5E5;border-radius:16px;
  background:#FFFFFF;color:#5C7D7D;font-size:14px;font-weight:750;text-align:center;
  box-shadow:0 10px 26px rgba(13,38,38,.045);
}
.ui-state .ui-icon{color:#234646}
.ui-state-error{border-color:#F1C7C7;background:#FFF8F8;color:#A23A3A}
.ui-state-error .ui-icon{color:#DC2626}
.ui-stars{display:inline-flex;align-items:center;gap:2px}
.ui-stars span{width:15px;height:15px;display:block;clip-path:polygon(50% 3%,61% 36%,96% 36%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,4% 36%,39% 36%);background:#C8DADA}
.ui-stars span.active{background:#F59E0B}
.ui-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid #D7E5E5;background:#EDF6F6;color:#173E3E;
  font-size:11px;font-weight:900;
}
.ui-action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ui-check-item{display:flex;align-items:flex-start;gap:9px;color:#2C4A4A;font-size:14px;line-height:1.65;padding:5px 0}
.ui-check-item .ui-icon{width:17px;height:17px;color:var(--green);margin-top:2px}
.ui-check-item .ui-icon svg{width:17px;height:17px}

.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text3);font-size:14px;gap:10px}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFEFE 100%);
  border:1px solid #D5E4E4;border-radius:18px;padding:28px;width:100%;max-width:460px;
  box-shadow:0 24px 70px rgba(13,38,38,.22);
}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:-4px 0 22px;padding-bottom:14px;border-bottom:1px solid #E3EEEE}
.modal-header h3{font-size:1.12rem;font-weight:900;color:var(--text);letter-spacing:0;line-height:1.35}
.modal-close{
  width:34px;height:34px;border-radius:10px;background:#F4F8F8;border:1px solid #D7E5E5;
  color:var(--text3);font-size:1rem;cursor:pointer;transition:.15s;padding:0;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.modal-close:hover{color:var(--text);background:#EAF3F3;border-color:#C2DADA}
.stars-input{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.stars-input span{width:24px;height:24px;cursor:pointer;transition:.2s;clip-path:polygon(50% 3%,61% 36%,96% 36%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,4% 36%,39% 36%);background:#C8DADA}
.stars-input span.active{background:#F59E0B;transform:translateY(-1px)}
.wa-agent-modal{max-width:420px;padding:0;overflow:hidden;border-radius:8px;background:#EFEAE2}
.wa-agent-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 10px;border-bottom:0;background:#008069;
}
.wa-agent-profile{display:flex;align-items:center;gap:10px;min-width:0}
.wa-agent-avatar{
  width:38px;height:38px;border-radius:50%;background:#D9FDD3;color:#075E54;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;flex:0 0 38px;
  overflow:hidden;border:1px solid rgba(255,255,255,.38);
}
.wa-agent-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.wa-agent-head h3{margin:0;color:#FFFFFF!important;font-size:.98rem;font-weight:700;line-height:1.15}
.wa-agent-head p{margin:2px 0 0;color:rgba(255,255,255,.82)!important;font-size:11.5px;line-height:1.2;display:flex;align-items:center;gap:4px}
.wa-agent-online-dot{width:6px;height:6px;border-radius:50%;background:#70E18A;box-shadow:0 0 0 2px rgba(112,225,138,.18);display:inline-block}
.wa-agent-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.wa-agent-actions button{
  width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#FFFFFF;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.wa-agent-actions button:hover{background:rgba(255,255,255,.12)}
.wa-agent-actions svg{width:19px;height:19px;fill:currentColor;display:block}
.wa-agent-chat{
  height:420px;overflow-y:auto;padding:16px 14px 18px;
  background-color:#EFEAE2;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(120,105,85,.08) 0 1.5px, transparent 2px),
    radial-gradient(circle at 48px 38px, rgba(120,105,85,.06) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  background-size:64px 64px,72px 72px,100% 100%;
  display:flex;flex-direction:column;gap:6px;
}
.wa-agent-bubble{
  position:relative;max-width:82%;min-width:74px;padding:6px 8px 17px;border-radius:7.5px;
  font-size:14.2px;line-height:1.45;box-shadow:0 1px .5px rgba(11,20,26,.13);
  white-space:pre-wrap;color:#111B21;
}
.wa-agent-bubble.is-bot{align-self:flex-start;background:#fff;border-top-left-radius:0}
.wa-agent-bubble.is-user{align-self:flex-end;background:#D9FDD3;border-top-right-radius:0}
.wa-agent-bubble.is-bot:before{
  content:'';position:absolute;left:-8px;top:0;border-top:8px solid #fff;border-left:8px solid transparent;
}
.wa-agent-bubble.is-user:before{
  content:'';position:absolute;right:-8px;top:0;border-top:8px solid #D9FDD3;border-right:8px solid transparent;
}
.wa-agent-text{display:block;padding-right:42px;word-break:break-word}
.wa-agent-meta{
  position:absolute;right:7px;bottom:3px;display:inline-flex;align-items:center;gap:3px;
  color:#667781;font-size:10.5px;line-height:1;white-space:nowrap;
}
.wa-checks{font-size:12px;letter-spacing:-3px;margin-left:2px;color:#8696A0;font-weight:700}
.wa-checks.is-read{color:#53BDEB}
.wa-agent-bubble.is-typing{min-width:54px;padding:10px 13px;background:#fff;border-top-left-radius:0}
.wa-agent-bubble.is-typing .wa-agent-meta{display:none}
.wa-typing-dots{display:inline-flex;align-items:center;gap:4px;height:14px}
.wa-typing-dots i{
  width:6px;height:6px;border-radius:50%;background:#8696A0;display:block;
  animation:waTypingDot 1.25s infinite ease-in-out;
}
.wa-typing-dots i:nth-child(2){animation-delay:.16s}
.wa-typing-dots i:nth-child(3){animation-delay:.32s}
@keyframes waTypingDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.wa-agent-input{display:flex;gap:8px;padding:8px 10px;background:#F0F2F5;border-top:0}
.wa-agent-input input{
  flex:1;min-width:0;border:0;border-radius:22px;padding:11px 16px;
  background:#fff;color:#111B21;outline:none;font-size:14px;
}
.wa-agent-input .btn-primary{
  width:44px;height:44px;border-radius:50%;padding:0;font-size:0;background:#00A884;box-shadow:none;position:relative;flex:0 0 44px;
}
.wa-agent-input .btn-primary:before{
  content:'';position:absolute;left:16px;top:12px;width:0;height:0;
  border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid #fff;
}
@media(max-width:520px){
  .wa-agent-modal{max-width:calc(100vw - 10px);border-radius:8px}
  .wa-agent-chat{height:62vh}
}

/* Product composer */
#addProductModal{padding:18px;background:rgba(13,38,38,.42);backdrop-filter:blur(10px)}
#addProductModal .modal{
  max-width:min(1120px,96vw)!important;max-height:92vh!important;padding:0!important;overflow:hidden!important;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto auto minmax(0,1fr) auto;
  border-radius:22px;background:#F7FBFB;border:1px solid #D2E4E4;box-shadow:0 34px 90px rgba(13,38,38,.26);
}
#addProductModal .modal-header{grid-column:1/-1;margin:0;padding:18px 22px;background:#FFFFFF}
#addProductModal .modal-header h3:before{
  content:'AppInstan Catalog';display:block;margin-bottom:4px;color:#6B9090;font-size:10.5px;font-weight:900;text-transform:uppercase;
}
#addProductModal .modal > input[type="hidden"]{display:none}
#addProductModal .product-editor-main{
  grid-column:1;grid-row:2 / 5;display:grid!important;grid-template-columns:1fr 1fr;gap:14px;
  padding:24px 28px;overflow:auto;background:#FFFFFF;border-right:1px solid #D7E5E5;
}
#addProductModal .product-editor-side{
  grid-column:2;margin:0;padding:18px 20px;background:#FFFFFF;border-left:1px solid #D7E5E5;
}
#addProductModal .product-editor-features{grid-row:2;border-bottom:1px solid #E3EEEE}
#addProductModal .product-editor-includes{grid-row:3 / 5;overflow:auto}
#addProductModal .product-editor-images{
  min-height:220px;display:flex;flex-direction:column;gap:12px;margin-top:6px;
}
#addProductModal .product-editor-images label{line-height:1.45}
#addProductModal .product-editor-images .img-upload-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;
}
#addProductModal .product-editor-images .img-slot{
  min-height:118px;border-radius:14px;background:#F8FCFC;
}
#addProductModal .product-editor-images .img-slot:not(.has-img){
  grid-column:span 1;min-height:118px;border-style:dashed;
  background:linear-gradient(180deg,#FFFFFF,#F4FAFA);
}
#addProductModal .product-editor-images .img-slot:not(.has-img)::after{
  content:'Tambah gambar produk';margin-left:8px;color:#5C7D7D;font-size:13px;font-weight:850;
}
#addProductModal .product-editor-images .add-icon{
  width:32px;height:32px;border-radius:999px;background:#E4F1F1;color:#173E3E;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:900;
}
#addProductModal #productSaveBtn{
  grid-column:2;grid-row:5;margin:0!important;border-radius:0 0 22px 0;min-height:64px;
}
#addProductModal #prodName{font-size:1.35rem;font-weight:900;min-height:48px}
#addProductModal textarea{min-height:96px}

/* Backup */
.backup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.backup-card h2{font-size:1.12rem;font-weight:950;margin-bottom:8px}
.backup-card p{color:#5C7D7D;font-size:14px;line-height:1.7;margin-bottom:16px}
.backup-list{display:grid;gap:9px;margin:0 0 18px}
.backup-list li{display:flex;align-items:center;gap:8px;color:#2C4A4A;font-size:14px}
.backup-submit-btn{margin-top:12px;width:100%;justify-content:center}
.backup-preview{margin-top:14px}
.backup-summary{display:grid;gap:7px;padding:16px;border:1px solid #D7E5E5;border-radius:14px;background:#F8FCFC}
.backup-summary-success{border-color:rgba(46,139,87,.24);background:rgba(46,139,87,.07)}
.backup-summary strong{color:var(--text);font-weight:950}
.backup-summary span,.backup-summary small{color:#5C7D7D;font-size:13px}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .product-catalog-summary{width:100%}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subscription-highlight,.subscription-kv{grid-template-columns:1fr}
  .service-portal-head,.service-toolbar,.service-pagination{flex-direction:column;align-items:stretch}
  .service-portal-search{min-width:0;max-width:none}
  .service-table thead th,.service-table tbody td,.service-pagination,.service-toolbar,.service-portal-hero{padding-left:18px;padding-right:18px}
  .demo-layout,.checkout-layout{grid-template-columns:1fr}
  .dashboard-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .ref-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav-links{display:none}.hamburger{display:block}
  nav{padding:0 4%;height:62px}
  .page{padding-top:62px}
  body[data-page="products"] nav{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid rgba(215,229,229,.52);
    box-shadow:0 10px 24px rgba(35,70,70,.06)
  }
  body[data-page="products"] .hamburger{
    border:1px solid rgba(35,70,70,.08);
    background:rgba(255,255,255,.38)
  }
  body[data-page="products"] .nav-logo{
    padding:6px 0
  }
  body[data-page="products"] #page-products{
    background:linear-gradient(180deg,#FFFFFF 0%,#F8FCFC 18%,#FFF7F4 100%)
  }
  body[data-page="products"] #page-products .page-header{
    padding:16px 4% 10px;
    background:transparent;
    border-bottom:0
  }
  body[data-page="products"] #page-products .page-header .section-label{
    margin-bottom:8px
  }
  body[data-page="products"] #page-products .page-header h2{
    font-size:1.42rem;
    line-height:1.15
  }
  body[data-page="products"] #page-products section{
    padding-top:10px;
    background:transparent
  }
  body[data-page="products"] #page-products .product-catalog-panel{
    gap:10px;
    margin-bottom:16px;
    padding:12px;
    border:1px solid rgba(215,229,229,.92);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,253,253,.72));
    backdrop-filter:blur(14px);
    box-shadow:0 18px 38px rgba(35,70,70,.07)
  }
  body[data-page="products"] #page-products .product-catalog-toolbar{
    margin-bottom:0
  }
  body[data-page="products"] #page-products .product-catalog-search{
    min-height:58px;
    padding:0 16px;
    border-radius:18px;
    border-color:rgba(35,70,70,.10);
    background:rgba(255,255,255,.88);
    box-shadow:
      0 12px 24px rgba(35,70,70,.06),
      inset 0 1px 0 rgba(255,255,255,.95)
  }
  body[data-page="products"] #page-products .product-catalog-search:before{
    width:56px
  }
  body[data-page="products"] #page-products .product-catalog-search-icon{
    width:32px;height:32px;border-radius:10px
  }
  body[data-page="products"] #page-products .product-catalog-search input{
    font-size:15px;
    padding:16px 0
  }
  body[data-page="products"] #page-products .product-catalog-summary{
    padding:2px 2px 0;
    font-size:11.5px;
    color:#6B9090
  }
  body[data-page="products"] #productCategoryChips{
    display:none!important
  }
  .nav-logo img{height:34px;max-width:150px}
  .hero-stats{gap:22px}
  .footer-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .products-grid .loading{grid-column:1/-1}
  .product-card{border-radius:8px;box-shadow:0 2px 8px rgba(15,23,42,.06)}
  .product-card:hover{transform:none}
  .product-thumb{height:auto;aspect-ratio:1/1;font-size:2.6rem}
  .prod-slide-wrap{aspect-ratio:1/1;border-radius:8px 8px 0 0}
  .product-badge{top:8px;right:8px;padding:3px 8px;font-size:9px}
  .slide-btn{display:none}
  .slide-dots{bottom:5px;gap:4px}
  .slide-dot{width:5px;height:5px}
  .slide-dot.active{width:13px}
  .product-body{padding:9px}
  .product-body h3{
    font-size:13px;line-height:1.35;margin-bottom:5px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:36px;
  }
  .product-body p{display:none}
  .product-price{font-size:15px;line-height:1.25}
  .product-price-note{
    font-size:10.5px;line-height:1.35;margin:3px 0 8px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .product-actions{gap:6px}
  .btn-sm{padding:8px 6px;border-radius:7px;font-size:11.5px;line-height:1.2}
  .ref-stats{grid-template-columns:1fr}
  .service-portal-title{font-size:1.7rem}
  section{padding:56px 4%}
  .cta-section{padding:48px 24px;margin:0 4% 60px}
  .wa-float{width:48px;height:48px;right:14px;bottom:14px}
  .hero-btns .btn-primary,.hero-btns .btn-outline,
  .closing-actions .btn-primary,.closing-actions .btn-outline{width:100%;justify-content:center}
  .lead-form{padding:18px}
  .checkout-layout{padding:24px 4% 72px}
  .checkout-form-card,.order-summary-card{padding:20px}
}
@media(max-width:380px){
  body[data-page="products"] #page-products section{padding-top:8px}
  body[data-page="products"] #page-products .product-catalog-panel{
    padding:10px;
    border-radius:20px
  }
  .product-catalog-search{flex-basis:100%;min-height:60px;padding:0 14px;gap:10px}
  .product-catalog-search:before{width:58px}
  .product-catalog-search-icon{width:30px;height:30px;border-radius:10px}
  .product-catalog-search input{font-size:16px;padding:18px 0}
  .products-grid{grid-template-columns:1fr;gap:14px}
  .product-body{padding:14px}
  .product-body h3{min-height:0;font-size:14px}
  .product-body p{display:block;font-size:12.5px;margin-bottom:10px}
}

/* ── ADMIN & DASHBOARD MOBILE ── */
@media(max-width:900px){
  .admin-action-icons{gap:5px}
  .admin-icon-btn{width:32px;height:32px;min-width:32px;border-radius:8px}
  .integration-card{max-width:100%;padding:18px}
  .integration-suite-table{min-width:820px}
  .integration-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .integration-actions .btn-primary,.integration-actions .btn-outline{width:100%;min-width:0}
  .about-license-wrap{grid-template-columns:1fr}
  /* Dashboard sidebar jadi bottom nav */
  .dashboard-layout{grid-template-columns:1fr;min-height:unset}
  .sidebar{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;gap:0;
    border-right:none;border-bottom:1px solid var(--border);
    padding:6px 4px;
    position:sticky;top:66px;z-index:100;
    background:var(--white);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar > div:first-child{display:none} /* hide user info */
  .sidebar > div:last-child{display:none}  /* hide logout spacer */
  .sidebar-item{
    flex-shrink:0;padding:8px 12px;
    border-left:none!important;border-bottom:3px solid transparent;
    font-size:12px;white-space:nowrap;border-radius:0;
    flex-direction:column;gap:2px;align-items:center;
  }
  .sidebar-item.active{
    border-bottom-color:var(--blue)!important;
    background:var(--blue3);
  }
  .sidebar-item span{font-size:1.1rem}
  .dashboard-main{padding:16px}
  /* Admin shell mobile */
  #page-admin{height:100vh;overflow:hidden}
  .admin-shell{display:block;height:100vh;overflow:hidden}
  .admin-sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(82vw,290px);height:100vh;max-height:none;
    border-right:1px solid var(--border);border-bottom:0;
    padding:12px;gap:12px;overflow:hidden;z-index:1200;
    transform:translateX(-105%);transition:transform .24s var(--ease);
    box-shadow:18px 0 50px rgba(13,38,38,.18);
  }
  body.admin-menu-open .admin-sidebar{transform:translateX(0)}
  .admin-drawer-overlay{
    display:block;position:fixed;inset:0;z-index:1190;background:rgba(13,38,38,.38);
    backdrop-filter:blur(2px);opacity:0;pointer-events:none;border:0;padding:0;
  }
  body.admin-menu-open .admin-drawer-overlay{opacity:1;pointer-events:auto}
  .admin-brand{display:flex;align-items:center;justify-content:center;min-height:86px;padding:12px 6px 10px}
  .admin-brand-mark{width:156px;height:64px;min-height:64px;padding:8px 12px}
  .admin-brand-mark img{max-width:132px;max-height:52px;width:auto;height:auto}
  .admin-user-card{display:flex}
  .admin-tabs{flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .admin-tab{flex-shrink:0;width:100%;font-size:13px;padding:10px 12px}
  .admin-tab-icon{width:28px;height:28px;border-radius:9px}
  .admin-logout{display:block}
  .admin-main{height:100vh;overflow:hidden}
  .admin-topbar{
    position:sticky;top:0;z-index:20;padding:8px 10px;
    align-items:center;flex-direction:row;flex-wrap:wrap;min-height:54px;gap:8px;
  }
  .admin-menu-toggle{display:inline-flex}
  .admin-eyebrow,.admin-topbar p{display:none}
  #page-admin .admin-topbar h2{font-size:1rem;line-height:1.2;min-width:0;flex:1}
  #page-admin .admin-topbar-actions{
    order:3;flex:0 0 100%;max-width:100%;margin-left:0;gap:6px;
    justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  #page-admin .admin-topbar-actions::-webkit-scrollbar{display:none}
  #page-admin .admin-topbar-actions .btn-outline,#page-admin .admin-topbar-actions .btn-primary{
    min-height:34px;padding:7px 10px;font-size:12px;white-space:nowrap;flex:0 0 auto;
  }
  .admin-content{padding:18px 16px 32px;overflow:auto}
  .admin-page-title{align-items:flex-start;flex-direction:column;gap:4px}
  .admin-mobile-cards{display:grid;gap:10px;margin-bottom:14px}
  #page-admin .admin-responsive-table{display:none}
  /* Tables scroll on mobile */
  .table-card{overflow-x:auto}
  .table-card::after{
    content:'Geser tabel';position:sticky;left:12px;bottom:8px;display:inline-flex;
    margin:0 0 8px 12px;padding:4px 8px;border-radius:999px;background:rgba(35,70,70,.08);
    color:var(--text3);font-size:11px;font-weight:700;
  }
  table{min-width:500px}
  /* Admin modal full width */
  .modal{max-width:100%!important;margin:0 10px;max-height:95vh;overflow-y:auto}
  /* Dash stats 2 col */
  .dash-stats{grid-template-columns:1fr 1fr}
  #page-admin table{min-width:680px}
}
@media(max-width:480px){
  .dash-stats{grid-template-columns:1fr}
  .admin-content{padding:14px 10px 28px}
  #page-admin .admin-topbar-actions{max-width:100%}
  .admin-section-head{align-items:stretch}
  .admin-section-head .admin-actions{width:100%}
  .admin-section-head .admin-actions .btn-primary,
  .admin-section-head .admin-actions .btn-outline{width:100%;justify-content:center}
  .admin-mobile-edit-card{padding:12px;border-radius:12px}
  .admin-mobile-card-body{padding-right:0}
  .admin-mobile-card-actions{gap:8px}
  .admin-mobile-user-card .admin-mobile-card-actions .btn-sm,
  .admin-mobile-lead-card .admin-mobile-card-actions .btn-sm{flex:1 1 auto;justify-content:center}
  .admin-mobile-lead-card select{flex:1 1 150px}
  .admin-mobile-lead-contact{align-items:stretch;flex-direction:column}
  .admin-mobile-wa-btn{width:100%}
  .modal-overlay{padding:8px}
  .modal{margin:0;max-height:96vh;border-radius:16px;padding:20px}
  /* Product modal grid → single col */
  #addProductModal .modal [style*="grid-template-columns:1fr 1fr"]{display:block}
}

/* ── HERO TRUST BADGES ── */
.hero-trust{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
  margin:20px 0 0;
}
.trust-item{
  display:inline-flex;align-items:center;
  font-size:13px;color:var(--text2);font-weight:500;
  background:var(--white);
  padding:6px 14px;border-radius:100px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

/* ── HERO OVERRIDE — teal theme ── */
.hero{
  background:linear-gradient(165deg,#FFFFFF 0%,var(--bg) 55%,#daeaea 100%);
}
.hero-bg{
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%,rgba(35,70,70,.09) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 70%,rgba(58,117,117,.06) 0%,transparent 50%);
}
.hero-grid{
  background-image:
    linear-gradient(rgba(35,70,70,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,70,70,.05) 1px,transparent 1px);
}
.hero-badge{
  background:var(--blue3);
  border:1px solid rgba(35,70,70,.2);
  color:var(--blue);
}
.hero-badge span{background:var(--pink);}
h1.hero-title em{color:var(--pink);}

/* ── BTN OVERRIDE ── */
.btn-primary{
  background:var(--blue);
  box-shadow:0 4px 16px rgba(35,70,70,.28);
}
.btn-primary:hover{background:var(--blue2);box-shadow:0 8px 24px rgba(35,70,70,.35);}
.nav-cta{background:var(--blue)!important;}
.nav-cta:hover{background:var(--blue2)!important;}

/* section label pink accent */
.section-label{
  background:var(--blue3);
  color:var(--blue);
}


/* ── CAPTCHA ── */
.captcha-box{
  display:flex;align-items:center;gap:10px;
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:10px;padding:12px 14px;
  
}
.captcha-question{
  flex:1;font-size:15px;font-weight:700;
  color:var(--text);letter-spacing:.05em;
  font-family:monospace;
}
.captcha-refresh{
  background:none;border:none;cursor:pointer;
  color:var(--text3);font-size:1.1rem;padding:4px;
  transition:.2s;border-radius:6px;
}
.captcha-refresh:hover{color:var(--blue);background:var(--blue3);}
.captcha-input-wrap{display:flex;gap:8px;align-items:center;margin-top:8px;}

/* ── PRODUCT IMAGE UPLOAD ── */
.img-upload-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  margin-bottom:8px;
}
.img-slot{
  aspect-ratio:1;border:2px dashed var(--border2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--bg);transition:.2s;
}
.img-slot:hover{border-color:var(--blue);background:var(--blue3);}
.img-slot.has-img{border-style:solid;border-color:var(--border);}
.img-slot img{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.img-slot .del-img{
  position:absolute;top:3px;right:3px;
  width:20px;height:20px;border-radius:50%;
  background:rgba(220,38,38,.85);color:white;
  border:none;cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.15s;
}
.img-slot:hover .del-img{opacity:1;}
.img-slot .add-icon{font-size:1.5rem;color:var(--text3);}
/* Product detail image gallery */
.prod-gallery{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.prod-gallery-main{
  width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:5rem;
}
.prod-gallery-main img{width:100%;height:100%;object-fit:cover;}
.prod-gallery-thumbs{display:flex;gap:6px;flex-wrap:wrap;}
.prod-thumb-item{
  width:56px;height:56px;border-radius:8px;overflow:hidden;
  border:2px solid var(--border);cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);font-size:1.3rem;
}
.prod-thumb-item:hover,.prod-thumb-item.active{border-color:var(--blue);}
.prod-thumb-item img{width:100%;height:100%;object-fit:cover;}

/* ── PRODUCT SLIDESHOW ── */
.prod-slide-wrap{
  position:relative;width:100%;aspect-ratio:1/1;
  background:var(--bg3);border-radius:14px 14px 0 0;
  overflow:hidden;
}
.prod-slide-track{
  display:flex;width:100%;height:100%;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.prod-slide-item{
  flex-shrink:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;
}
.prod-slide-item img{
  width:100%;height:100%;object-fit:cover;
}
.slide-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;border:none;
  cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;z-index:2;
}
.slide-btn:hover{background:rgba(0,0,0,.7);}
.slide-btn.prev{left:8px;}
.slide-btn.next{right:8px;}
.slide-dots{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:2;
}
.slide-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.5);border:none;cursor:pointer;
  padding:0;transition:.2s;
}
.slide-dot.active{background:#fff;width:16px;border-radius:4px;}
/* Gallery in product detail */
.prod-gallery{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.prod-gallery-main{
  width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--bg3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:5rem;
  position:relative;
}
.prod-gallery-main img{width:100%;height:100%;object-fit:cover}
.prod-gallery-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.prod-thumb-item{
  width:56px;height:56px;border-radius:8px;overflow:hidden;
  border:2px solid var(--border);cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);font-size:1.3rem;
}
.prod-thumb-item:hover,.prod-thumb-item.active{border-color:var(--blue)}

/* Theme: Exclusive */
:root[data-theme="exclusive"] body{
  background:
    radial-gradient(circle at 18% 0%,rgba(184,137,47,.18),transparent 32%),
    linear-gradient(180deg,#F6F7F2 0%,#EEF2EF 48%,#E5ECE6 100%);
}
:root[data-theme="exclusive"] nav{
  background:rgba(247,248,244,.94);
  border-bottom-color:rgba(11,59,53,.18);
  box-shadow:0 8px 28px rgba(8,31,27,.08);
}
:root[data-theme="exclusive"] .nav-logo span,
:root[data-theme="exclusive"] .admin-brand strong{color:#082B25}
:root[data-theme="exclusive"] .hero{
  background:
    linear-gradient(135deg,rgba(8,43,37,.96),rgba(11,59,53,.88) 48%,rgba(148,102,31,.88)),
    linear-gradient(180deg,#10211D,#0B3B35);
  color:#FFFFFF;
}
:root[data-theme="exclusive"] .hero-bg{
  background:
    radial-gradient(circle at 18% 18%,rgba(220,176,90,.24),transparent 28%),
    radial-gradient(circle at 82% 26%,rgba(201,111,74,.18),transparent 30%);
  opacity:1;
}
:root[data-theme="exclusive"] .hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
}
:root[data-theme="exclusive"] h1.hero-title,
:root[data-theme="exclusive"] .hero-sub{color:#FFFFFF}
:root[data-theme="exclusive"] .hero-sub{opacity:.88}
:root[data-theme="exclusive"] h1.hero-title em{color:#E5B75B}
:root[data-theme="exclusive"] .hero-badge{
  background:rgba(255,255,255,.12);
  border-color:rgba(229,183,91,.38);
  color:#F8E5B2;
}
:root[data-theme="exclusive"] .hero-badge span{background:#E5B75B}
:root[data-theme="exclusive"] .hero-stats{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 50px rgba(0,0,0,.16);
}
:root[data-theme="exclusive"] .hero-stat .num{color:#FFFFFF}
:root[data-theme="exclusive"] .hero-stat .label{color:rgba(255,255,255,.72)}
:root[data-theme="exclusive"] .section-label{
  background:#F3E5C3;
  color:#6E4A13;
}
:root[data-theme="exclusive"] .product-card,
:root[data-theme="exclusive"] .feature-card,
:root[data-theme="exclusive"] .checkout-form-card,
:root[data-theme="exclusive"] .table-card,
:root[data-theme="exclusive"] .blog-widget,
:root[data-theme="exclusive"] .dash-stat-card{
  border-color:rgba(11,59,53,.16);
  box-shadow:0 12px 34px rgba(8,31,27,.10);
}
:root[data-theme="exclusive"] .product-card:hover,
:root[data-theme="exclusive"] .feature-card:hover{
  border-color:rgba(184,137,47,.42);
  box-shadow:0 20px 46px rgba(8,31,27,.16);
}
:root[data-theme="exclusive"] .btn-primary,
:root[data-theme="exclusive"] .nav-cta,
:root[data-theme="exclusive"] .btn-sm-primary{
  background:linear-gradient(135deg,#082B25,#0B3B35 58%,#9A6A20)!important;
  color:#FFFFFF!important;
  box-shadow:0 10px 24px rgba(8,43,37,.24)!important;
}
:root[data-theme="exclusive"] .btn-primary:hover,
:root[data-theme="exclusive"] .nav-cta:hover,
:root[data-theme="exclusive"] .btn-sm-primary:hover{
  background:linear-gradient(135deg,#061F1B,#0B3B35 52%,#B8892F)!important;
  box-shadow:0 14px 30px rgba(8,43,37,.30)!important;
}
:root[data-theme="exclusive"] .admin-shell{
  background:linear-gradient(180deg,#ECF1EC,#DDE7E1);
}
:root[data-theme="exclusive"] .admin-sidebar{
  background:linear-gradient(180deg,#082B25,#0B3B35);
  border-right-color:rgba(229,183,91,.18);
}
:root[data-theme="exclusive"] .admin-brand,
:root[data-theme="exclusive"] .admin-user-card{
  background:rgba(255,255,255,.08);
  border-color:rgba(229,183,91,.18);
}
:root[data-theme="exclusive"] .admin-brand strong,
:root[data-theme="exclusive"] .admin-user-card strong{color:#FFFFFF}
:root[data-theme="exclusive"] .admin-brand span,
:root[data-theme="exclusive"] .admin-user-card span{color:rgba(255,255,255,.68)}
:root[data-theme="exclusive"] .admin-brand-mark{
  background:#E5B75B;
  color:#082B25;
}
:root[data-theme="exclusive"] .admin-tab{
  color:rgba(255,255,255,.78);
  border-color:transparent;
}
:root[data-theme="exclusive"] .admin-tab:hover{
  background:rgba(255,255,255,.09);
  color:#FFFFFF;
}
:root[data-theme="exclusive"] .admin-tab.active{
  background:linear-gradient(135deg,#E5B75B,#B8892F);
  color:#082B25;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
:root[data-theme="exclusive"] .admin-tab.active .admin-tab-icon{
  background:rgba(8,43,37,.12);
  color:#082B25;
}
:root[data-theme="exclusive"] .admin-tab-icon{
  background:rgba(255,255,255,.09);
  color:#F8E5B2;
}
:root[data-theme="exclusive"] .admin-main{
  background:linear-gradient(180deg,#F6F7F2,#EEF2EF);
}
:root[data-theme="exclusive"] .admin-topbar{
  background:rgba(255,255,255,.82);
  border-bottom-color:rgba(11,59,53,.14);
  box-shadow:0 10px 30px rgba(8,31,27,.06);
}

/* Theme: Vista */
:root[data-theme="vista"] body{
  background:
    radial-gradient(circle at 18% 0%,rgba(124,216,240,.58),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.72),transparent 28%),
    linear-gradient(180deg,#B9DDF5 0%,#DCEBFA 46%,#C9E8EE 100%);
}
:root[data-theme="vista"] nav{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(205,232,250,.66));
  border-bottom-color:rgba(47,143,213,.34);
  box-shadow:0 10px 30px rgba(17,75,120,.14), inset 0 1px 0 rgba(255,255,255,.76);
}
:root[data-theme="vista"] .mobile-menu,
:root[data-theme="vista"] .checkout-form-card,
:root[data-theme="vista"] .feature-card,
:root[data-theme="vista"] .product-card,
:root[data-theme="vista"] .table-card,
:root[data-theme="vista"] .blog-widget,
:root[data-theme="vista"] .dash-stat-card,
:root[data-theme="vista"] .auth-card{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(232,246,255,.62));
  border:1px solid rgba(82,151,204,.35);
  box-shadow:0 16px 40px rgba(17,75,120,.15), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
}
:root[data-theme="vista"] .hero{
  background:
    linear-gradient(135deg,rgba(12,78,134,.92),rgba(47,143,213,.72) 45%,rgba(36,176,192,.66)),
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.45),transparent 26%);
  color:#FFFFFF;
}
:root[data-theme="vista"] .hero-bg{
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.46),transparent 24%),
    radial-gradient(circle at 72% 28%,rgba(123,216,240,.42),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 44%);
  opacity:1;
}
:root[data-theme="vista"] .hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
}
:root[data-theme="vista"] h1.hero-title,
:root[data-theme="vista"] .hero-sub{color:#FFFFFF;text-shadow:0 2px 12px rgba(8,48,88,.25)}
:root[data-theme="vista"] h1.hero-title em{color:#FFF3A7}
:root[data-theme="vista"] .hero-badge{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  border-color:rgba(255,255,255,.46);
  color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56),0 8px 24px rgba(13,78,134,.18);
}
:root[data-theme="vista"] .hero-badge span{background:#FFF3A7}
:root[data-theme="vista"] .hero-stats{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.34);
  box-shadow:0 18px 42px rgba(13,78,134,.22), inset 0 1px 0 rgba(255,255,255,.44);
  backdrop-filter:blur(14px);
}
:root[data-theme="vista"] .hero-stat .num{color:#FFFFFF}
:root[data-theme="vista"] .hero-stat .label{color:rgba(255,255,255,.78)}
:root[data-theme="vista"] .btn-primary,
:root[data-theme="vista"] .nav-cta,
:root[data-theme="vista"] .btn-sm-primary{
  background:linear-gradient(180deg,#6BC8F1 0%,#2082C3 52%,#0D5C9C 100%)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:0 10px 24px rgba(17,75,120,.24), inset 0 1px 0 rgba(255,255,255,.58)!important;
}
:root[data-theme="vista"] .btn-primary:hover,
:root[data-theme="vista"] .nav-cta:hover,
:root[data-theme="vista"] .btn-sm-primary:hover{
  background:linear-gradient(180deg,#85D9FA 0%,#2D92D2 52%,#0D5C9C 100%)!important;
}
:root[data-theme="vista"] .btn-outline,
:root[data-theme="vista"] .btn-sm-outline{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(222,241,254,.64));
  border-color:rgba(82,151,204,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}
:root[data-theme="vista"] .section-label,
:root[data-theme="vista"] .badge-verified,
:root[data-theme="vista"] .sidebar-item.active{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(191,226,251,.72));
  color:#0D4E86;
  border:1px solid rgba(82,151,204,.30);
}
:root[data-theme="vista"] .admin-shell,
:root[data-theme="vista"] #page-admin{
  background:
    radial-gradient(circle at 20% 0%,rgba(123,216,240,.42),transparent 32%),
    linear-gradient(180deg,#C9E6F8,#DCEBFA);
}
:root[data-theme="vista"] .admin-sidebar{
  background:linear-gradient(180deg,rgba(15,95,156,.84),rgba(18,123,151,.72));
  border-right-color:rgba(255,255,255,.35);
  box-shadow:8px 0 34px rgba(17,75,120,.20), inset -1px 0 0 rgba(255,255,255,.24);
  backdrop-filter:blur(16px);
}
:root[data-theme="vista"] .admin-brand,
:root[data-theme="vista"] .admin-user-card{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48);
}
:root[data-theme="vista"] .admin-brand strong,
:root[data-theme="vista"] .admin-user-card strong{color:#FFFFFF}
:root[data-theme="vista"] .admin-brand span,
:root[data-theme="vista"] .admin-user-card span{color:rgba(255,255,255,.72)}
:root[data-theme="vista"] .admin-brand-mark{
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 10px 24px rgba(13,78,134,.20), inset 0 1px 0 rgba(255,255,255,.60);
}
:root[data-theme="vista"] .admin-tab{
  color:rgba(255,255,255,.82);
  border-color:transparent;
}
:root[data-theme="vista"] .admin-tab:hover{
  background:rgba(255,255,255,.15);
  color:#FFFFFF;
}
:root[data-theme="vista"] .admin-tab.active{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(190,226,251,.72));
  color:#0D4E86;
  border-color:rgba(255,255,255,.48);
  box-shadow:0 12px 30px rgba(13,78,134,.25), inset 0 1px 0 rgba(255,255,255,.80);
}
:root[data-theme="vista"] .admin-tab-icon{
  background:rgba(255,255,255,.18);
  color:#FFFFFF;
}
:root[data-theme="vista"] .admin-tab.active .admin-tab-icon{
  background:rgba(13,78,134,.10);
  color:#0D4E86;
}
:root[data-theme="vista"] .admin-main{
  background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(220,235,250,.58));
}
:root[data-theme="vista"] .admin-topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(221,241,255,.62));
  border-bottom-color:rgba(82,151,204,.30);
  box-shadow:0 10px 30px rgba(17,75,120,.10), inset 0 1px 0 rgba(255,255,255,.74);
  backdrop-filter:blur(14px);
}

/* Theme: Seven7 */
:root[data-theme="seven7"] body{
  background:
    radial-gradient(circle at 18% -4%,rgba(123,196,244,.50),transparent 34%),
    radial-gradient(circle at 86% 10%,rgba(255,255,255,.78),transparent 28%),
    linear-gradient(180deg,#C7E3F8 0%,#E8F1FB 48%,#D9EAF8 100%);
}
:root[data-theme="seven7"] nav{
  background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(217,237,252,.76) 48%,rgba(179,217,246,.68) 100%);
  border-bottom-color:rgba(38,103,172,.32);
  box-shadow:0 8px 26px rgba(19,74,132,.13), inset 0 1px 0 rgba(255,255,255,.86);
}
:root[data-theme="seven7"] .checkout-form-card,
:root[data-theme="seven7"] .feature-card,
:root[data-theme="seven7"] .product-card,
:root[data-theme="seven7"] .table-card,
:root[data-theme="seven7"] .blog-widget,
:root[data-theme="seven7"] .dash-stat-card,
:root[data-theme="seven7"] .auth-card,
:root[data-theme="seven7"] .mobile-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(238,247,255,.76));
  border:1px solid rgba(87,137,188,.38);
  box-shadow:0 14px 36px rgba(19,74,132,.14), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
}
:root[data-theme="seven7"] .hero{
  background:
    linear-gradient(180deg,rgba(72,166,232,.90) 0%,rgba(31,115,196,.86) 45%,rgba(10,82,151,.92) 100%),
    radial-gradient(circle at 28% 10%,rgba(255,255,255,.44),transparent 24%);
  color:#FFFFFF;
}
:root[data-theme="seven7"] .hero-bg{
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),transparent 35%),
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.36),transparent 22%),
    radial-gradient(circle at 76% 26%,rgba(123,214,239,.34),transparent 30%);
  opacity:1;
}
:root[data-theme="seven7"] .hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.095) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.095) 1px,transparent 1px);
}
:root[data-theme="seven7"] h1.hero-title,
:root[data-theme="seven7"] .hero-sub{color:#FFFFFF;text-shadow:0 2px 14px rgba(3,42,82,.28)}
:root[data-theme="seven7"] h1.hero-title em{color:#FFE48B}
:root[data-theme="seven7"] .hero-badge{
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));
  border-color:rgba(255,255,255,.54);
  color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 8px 22px rgba(10,79,150,.20);
}
:root[data-theme="seven7"] .hero-badge span{background:#FFE48B}
:root[data-theme="seven7"] .hero-stats{
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.13));
  border-color:rgba(255,255,255,.44);
  box-shadow:0 18px 42px rgba(10,79,150,.22), inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
}
:root[data-theme="seven7"] .hero-stat .num{color:#FFFFFF}
:root[data-theme="seven7"] .hero-stat .label{color:rgba(255,255,255,.80)}
:root[data-theme="seven7"] .btn-primary,
:root[data-theme="seven7"] .nav-cta,
:root[data-theme="seven7"] .btn-sm-primary{
  background:linear-gradient(180deg,#8AD1FF 0%,#2C8CDC 45%,#0757A4 100%)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:0 9px 22px rgba(10,79,150,.24), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(0,49,108,.24)!important;
}
:root[data-theme="seven7"] .btn-primary:hover,
:root[data-theme="seven7"] .nav-cta:hover,
:root[data-theme="seven7"] .btn-sm-primary:hover{
  background:linear-gradient(180deg,#A3DDFF 0%,#3B98E4 45%,#0757A4 100%)!important;
}
:root[data-theme="seven7"] .btn-outline,
:root[data-theme="seven7"] .btn-sm-outline{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(223,240,253,.74));
  border-color:rgba(87,137,188,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
:root[data-theme="seven7"] .section-label,
:root[data-theme="seven7"] .badge-verified,
:root[data-theme="seven7"] .sidebar-item.active{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(198,226,249,.78));
  color:#0A4F96;
  border:1px solid rgba(87,137,188,.30);
}
:root[data-theme="seven7"] .admin-shell,
:root[data-theme="seven7"] #page-admin{
  background:
    radial-gradient(circle at 18% 0%,rgba(123,196,244,.44),transparent 34%),
    linear-gradient(180deg,#CFE7FA,#E8F1FB);
}
:root[data-theme="seven7"] .admin-sidebar{
  background:linear-gradient(180deg,rgba(12,90,163,.92),rgba(14,106,172,.84) 52%,rgba(8,70,128,.90));
  border-right-color:rgba(255,255,255,.38);
  box-shadow:8px 0 32px rgba(19,74,132,.23), inset -1px 0 0 rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.32);
  backdrop-filter:blur(12px);
}
:root[data-theme="seven7"] .admin-brand,
:root[data-theme="seven7"] .admin-user-card{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  border-color:rgba(255,255,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
:root[data-theme="seven7"] .admin-brand strong,
:root[data-theme="seven7"] .admin-user-card strong{color:#FFFFFF}
:root[data-theme="seven7"] .admin-brand span,
:root[data-theme="seven7"] .admin-user-card span{color:rgba(255,255,255,.76)}
:root[data-theme="seven7"] .admin-brand-mark{
  background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.16));
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 9px 22px rgba(10,79,150,.24), inset 0 1px 0 rgba(255,255,255,.76);
}
:root[data-theme="seven7"] .admin-tab{
  color:rgba(255,255,255,.84);
  border-color:transparent;
}
:root[data-theme="seven7"] .admin-tab:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  color:#FFFFFF;
}
:root[data-theme="seven7"] .admin-tab.active{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(190,226,251,.78) 55%,rgba(142,199,240,.68));
  color:#0A4F96;
  border-color:rgba(255,255,255,.58);
  box-shadow:0 10px 28px rgba(10,79,150,.26), inset 0 1px 0 rgba(255,255,255,.90);
}
:root[data-theme="seven7"] .admin-tab-icon{
  background:rgba(255,255,255,.20);
  color:#FFFFFF;
}
:root[data-theme="seven7"] .admin-tab.active .admin-tab-icon{
  background:rgba(10,79,150,.10);
  color:#0A4F96;
}
:root[data-theme="seven7"] .admin-main{
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(232,241,251,.68));
}
:root[data-theme="seven7"] .admin-topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(223,240,253,.72));
  border-bottom-color:rgba(87,137,188,.32);
  box-shadow:0 10px 28px rgba(19,74,132,.11), inset 0 1px 0 rgba(255,255,255,.84);
  backdrop-filter:blur(10px);
}

/* Practical Vista and Seven7 refresh */
:root[data-theme="vista"] body,
:root[data-theme="seven7"] body{
  background:
    linear-gradient(90deg,rgba(26,115,232,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(26,115,232,.045) 1px,transparent 1px),
    radial-gradient(circle at 86% 6%,var(--blue3),transparent 30%),
    linear-gradient(180deg,#F8FBFF 0%,var(--bg) 48%,var(--bg3) 100%);
  background-size:44px 44px,44px 44px,100% 100%,auto;
}
:root[data-theme="vista"] nav,
:root[data-theme="seven7"] nav{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(29,63,120,.08);
  backdrop-filter:blur(14px);
}
:root[data-theme="vista"] .nav-links a:hover,
:root[data-theme="seven7"] .nav-links a:hover{
  background:var(--blue3);
  color:var(--blue2);
}
:root[data-theme="vista"] .mobile-menu,
:root[data-theme="vista"] .checkout-form-card,
:root[data-theme="vista"] .feature-card,
:root[data-theme="vista"] .product-card,
:root[data-theme="vista"] .table-card,
:root[data-theme="vista"] .blog-widget,
:root[data-theme="vista"] .dash-stat-card,
:root[data-theme="vista"] .auth-card,
:root[data-theme="seven7"] .mobile-menu,
:root[data-theme="seven7"] .checkout-form-card,
:root[data-theme="seven7"] .feature-card,
:root[data-theme="seven7"] .product-card,
:root[data-theme="seven7"] .table-card,
:root[data-theme="seven7"] .blog-widget,
:root[data-theme="seven7"] .dash-stat-card,
:root[data-theme="seven7"] .auth-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:var(--shadow);
  backdrop-filter:none;
}
:root[data-theme="vista"] .hero,
:root[data-theme="seven7"] .hero{
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(circle at 16% 12%,rgba(20,184,166,.24),transparent 28%),
    radial-gradient(circle at 88% 8%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(135deg,#102033 0%,var(--blue2) 48%,var(--blue) 100%);
  background-size:44px 44px,44px 44px,100% 100%,100% 100%,auto;
  color:#FFFFFF;
}
:root[data-theme="vista"] .hero-bg,
:root[data-theme="seven7"] .hero-bg{
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%);
  opacity:1;
}
:root[data-theme="vista"] .hero-grid,
:root[data-theme="seven7"] .hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
}
:root[data-theme="vista"] h1.hero-title,
:root[data-theme="vista"] .hero-sub,
:root[data-theme="seven7"] h1.hero-title,
:root[data-theme="seven7"] .hero-sub{
  color:#FFFFFF;
  text-shadow:none;
}
:root[data-theme="vista"] h1.hero-title em,
:root[data-theme="seven7"] h1.hero-title em{color:#FDE68A}
:root[data-theme="vista"] .hero-badge,
:root[data-theme="vista"] .hero-stats,
:root[data-theme="seven7"] .hero-badge,
:root[data-theme="seven7"] .hero-stats{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 42px rgba(15,23,42,.18);
  backdrop-filter:blur(10px);
}
:root[data-theme="vista"] .hero-badge,
:root[data-theme="seven7"] .hero-badge{color:#FFFFFF}
:root[data-theme="vista"] .hero-badge span,
:root[data-theme="seven7"] .hero-badge span{background:var(--pink)}
:root[data-theme="vista"] .hero-stat .num,
:root[data-theme="seven7"] .hero-stat .num{color:#FFFFFF}
:root[data-theme="vista"] .hero-stat .label,
:root[data-theme="seven7"] .hero-stat .label{color:rgba(255,255,255,.76)}
:root[data-theme="vista"] .btn-primary,
:root[data-theme="vista"] .nav-cta,
:root[data-theme="vista"] .btn-sm-primary,
:root[data-theme="seven7"] .btn-primary,
:root[data-theme="seven7"] .nav-cta,
:root[data-theme="seven7"] .btn-sm-primary{
  background:var(--grad)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 10px 22px var(--blue-glow)!important;
}
:root[data-theme="vista"] .btn-primary:hover,
:root[data-theme="vista"] .nav-cta:hover,
:root[data-theme="vista"] .btn-sm-primary:hover,
:root[data-theme="seven7"] .btn-primary:hover,
:root[data-theme="seven7"] .nav-cta:hover,
:root[data-theme="seven7"] .btn-sm-primary:hover{background:var(--grad2)!important}
:root[data-theme="vista"] .btn-outline,
:root[data-theme="vista"] .btn-sm-outline,
:root[data-theme="seven7"] .btn-outline,
:root[data-theme="seven7"] .btn-sm-outline{
  background:#FFFFFF;
  border-color:var(--border);
  box-shadow:none;
}
:root[data-theme="vista"] .section-label,
:root[data-theme="vista"] .badge-verified,
:root[data-theme="vista"] .sidebar-item.active,
:root[data-theme="seven7"] .section-label,
:root[data-theme="seven7"] .badge-verified,
:root[data-theme="seven7"] .sidebar-item.active{
  background:var(--blue3);
  color:var(--blue2);
  border:1px solid var(--border);
}
:root[data-theme="vista"] .admin-shell,
:root[data-theme="vista"] #page-admin,
:root[data-theme="seven7"] .admin-shell,
:root[data-theme="seven7"] #page-admin{
  background:
    linear-gradient(90deg,rgba(26,115,232,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(26,115,232,.045) 1px,transparent 1px),
    radial-gradient(circle at 88% 8%,var(--blue3),transparent 30%),
    var(--bg);
  background-size:44px 44px,44px 44px,100% 100%,auto;
}
:root[data-theme="vista"] .admin-sidebar,
:root[data-theme="seven7"] .admin-sidebar{
  background:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(circle at 18% 12%,rgba(20,184,166,.28),transparent 30%),
    radial-gradient(circle at 86% 4%,rgba(26,115,232,.34),transparent 26%),
    linear-gradient(180deg,#102033 0%,#0F172A 56%,#0A1020 100%);
  background-size:44px 44px,44px 44px,100% 100%,100% 100%,auto;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:10px 0 30px rgba(15,23,42,.14);
  backdrop-filter:none;
}
:root[data-theme="vista"] .admin-brand,
:root[data-theme="vista"] .admin-user-card,
:root[data-theme="seven7"] .admin-brand,
:root[data-theme="seven7"] .admin-user-card{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}
:root[data-theme="vista"] .admin-brand-mark,
:root[data-theme="seven7"] .admin-brand-mark{
  background:linear-gradient(135deg,var(--blue),var(--teal));
  border:0;
  box-shadow:0 10px 24px var(--blue-glow);
}
:root[data-theme="vista"] .admin-tab,
:root[data-theme="seven7"] .admin-tab{
  color:rgba(226,232,240,.76);
  border-color:transparent;
}
:root[data-theme="vista"] .admin-tab:hover,
:root[data-theme="seven7"] .admin-tab:hover{
  background:rgba(255,255,255,.07);
  color:#FFFFFF;
}
:root[data-theme="vista"] .admin-tab.active,
:root[data-theme="seven7"] .admin-tab.active{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#FFFFFF;
  border-color:transparent;
  box-shadow:0 10px 24px var(--blue-glow);
}
:root[data-theme="vista"] .admin-tab-icon,
:root[data-theme="seven7"] .admin-tab-icon{
  background:rgba(255,255,255,.08);
  color:inherit;
}
:root[data-theme="vista"] .admin-tab.active .admin-tab-icon,
:root[data-theme="seven7"] .admin-tab.active .admin-tab-icon{
  background:rgba(255,255,255,.16);
  color:#FFFFFF;
}
:root[data-theme="vista"] .admin-main,
:root[data-theme="seven7"] .admin-main{background:var(--bg)}
:root[data-theme="vista"] .admin-topbar,
:root[data-theme="seven7"] .admin-topbar{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(29,63,120,.08);
  backdrop-filter:blur(14px);
}
:root[data-theme="vista"] th,
:root[data-theme="seven7"] th{
  background:#F8FAFC;
  color:var(--text3);
  border-bottom-color:var(--border);
}
:root[data-theme="vista"] td,
:root[data-theme="seven7"] td{border-bottom-color:#E8EEF6}
:root[data-theme="vista"] tr:hover td,
:root[data-theme="vista"] #page-admin .table-card tbody tr:hover td,
:root[data-theme="seven7"] tr:hover td,
:root[data-theme="seven7"] #page-admin .table-card tbody tr:hover td{background:#F8FAFC}
:root[data-theme="vista"] input,
:root[data-theme="vista"] textarea,
:root[data-theme="vista"] select,
:root[data-theme="seven7"] input,
:root[data-theme="seven7"] textarea,
:root[data-theme="seven7"] select{
  background:#FFFFFF;
  border-color:var(--border);
  color:var(--text);
}
:root[data-theme="vista"] input:focus,
:root[data-theme="vista"] textarea:focus,
:root[data-theme="vista"] select:focus,
:root[data-theme="seven7"] input:focus,
:root[data-theme="seven7"] textarea:focus,
:root[data-theme="seven7"] select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-glow);
}

/* Contrast guard for Vista and Seven7 */
:root[data-theme="vista"] body,
:root[data-theme="seven7"] body{color:var(--text)}
:root[data-theme="vista"] h1,
:root[data-theme="vista"] h2,
:root[data-theme="vista"] h3,
:root[data-theme="vista"] h4,
:root[data-theme="vista"] .section-title,
:root[data-theme="vista"] .product-title,
:root[data-theme="vista"] .blog-title,
:root[data-theme="vista"] .article-title,
:root[data-theme="vista"] .admin-page-title,
:root[data-theme="vista"] .modal h2,
:root[data-theme="seven7"] h1,
:root[data-theme="seven7"] h2,
:root[data-theme="seven7"] h3,
:root[data-theme="seven7"] h4,
:root[data-theme="seven7"] .section-title,
:root[data-theme="seven7"] .product-title,
:root[data-theme="seven7"] .blog-title,
:root[data-theme="seven7"] .article-title,
:root[data-theme="seven7"] .admin-page-title,
:root[data-theme="seven7"] .modal h2{color:var(--text)!important}
:root[data-theme="vista"] p,
:root[data-theme="vista"] label,
:root[data-theme="vista"] td,
:root[data-theme="vista"] .section-sub,
:root[data-theme="vista"] .product-desc,
:root[data-theme="vista"] .blog-excerpt,
:root[data-theme="vista"] .article-content,
:root[data-theme="vista"] .checkout-form-card,
:root[data-theme="vista"] .feature-card,
:root[data-theme="vista"] .product-card,
:root[data-theme="vista"] .table-card,
:root[data-theme="vista"] .blog-widget,
:root[data-theme="vista"] .dash-stat-card,
:root[data-theme="vista"] .auth-card,
:root[data-theme="vista"] .modal,
:root[data-theme="seven7"] p,
:root[data-theme="seven7"] label,
:root[data-theme="seven7"] td,
:root[data-theme="seven7"] .section-sub,
:root[data-theme="seven7"] .product-desc,
:root[data-theme="seven7"] .blog-excerpt,
:root[data-theme="seven7"] .article-content,
:root[data-theme="seven7"] .checkout-form-card,
:root[data-theme="seven7"] .feature-card,
:root[data-theme="seven7"] .product-card,
:root[data-theme="seven7"] .table-card,
:root[data-theme="seven7"] .blog-widget,
:root[data-theme="seven7"] .dash-stat-card,
:root[data-theme="seven7"] .auth-card,
:root[data-theme="seven7"] .modal{color:var(--text2)!important}
:root[data-theme="vista"] small,
:root[data-theme="vista"] th,
:root[data-theme="vista"] .text-muted,
:root[data-theme="vista"] .stat-label,
:root[data-theme="vista"] .product-price-note,
:root[data-theme="vista"] .blog-date,
:root[data-theme="vista"] .blog-meta,
:root[data-theme="vista"] .article-meta,
:root[data-theme="vista"] .article-breadcrumb,
:root[data-theme="vista"] .subscription-section-title,
:root[data-theme="seven7"] small,
:root[data-theme="seven7"] th,
:root[data-theme="seven7"] .text-muted,
:root[data-theme="seven7"] .stat-label,
:root[data-theme="seven7"] .product-price-note,
:root[data-theme="seven7"] .blog-date,
:root[data-theme="seven7"] .blog-meta,
:root[data-theme="seven7"] .article-meta,
:root[data-theme="seven7"] .article-breadcrumb,
:root[data-theme="seven7"] .subscription-section-title{color:var(--text3)!important}
:root[data-theme="vista"] nav,
:root[data-theme="vista"] .mobile-menu,
:root[data-theme="seven7"] nav,
:root[data-theme="seven7"] .mobile-menu{color:var(--text)}
:root[data-theme="vista"] .nav-logo span,
:root[data-theme="vista"] .nav-links a,
:root[data-theme="vista"] .mobile-menu a,
:root[data-theme="seven7"] .nav-logo span,
:root[data-theme="seven7"] .nav-links a,
:root[data-theme="seven7"] .mobile-menu a{color:var(--text2)!important}
:root[data-theme="vista"] .nav-links a:hover,
:root[data-theme="vista"] .mobile-menu a:hover,
:root[data-theme="seven7"] .nav-links a:hover,
:root[data-theme="seven7"] .mobile-menu a:hover{color:var(--blue2)!important}
:root[data-theme="vista"] .hero,
:root[data-theme="vista"] .hero *,
:root[data-theme="vista"] .closing-section,
:root[data-theme="vista"] .closing-section *,
:root[data-theme="vista"] .cta-section,
:root[data-theme="vista"] .cta-section *,
:root[data-theme="seven7"] .hero,
:root[data-theme="seven7"] .hero *,
:root[data-theme="seven7"] .closing-section,
:root[data-theme="seven7"] .closing-section *,
:root[data-theme="seven7"] .cta-section,
:root[data-theme="seven7"] .cta-section *{color:#FFFFFF!important}
:root[data-theme="vista"] .hero-title em,
:root[data-theme="seven7"] .hero-title em{color:#FDE68A!important}
:root[data-theme="vista"] .admin-sidebar,
:root[data-theme="vista"] .admin-sidebar *,
:root[data-theme="seven7"] .admin-sidebar,
:root[data-theme="seven7"] .admin-sidebar *{color:rgba(226,232,240,.82)!important}
:root[data-theme="vista"] .admin-sidebar strong,
:root[data-theme="vista"] .admin-sidebar .admin-brand strong,
:root[data-theme="vista"] .admin-sidebar .admin-user-card strong,
:root[data-theme="vista"] .admin-tab.active,
:root[data-theme="vista"] .admin-tab.active *,
:root[data-theme="vista"] .admin-tab:hover,
:root[data-theme="vista"] .admin-tab:hover *,
:root[data-theme="seven7"] .admin-sidebar strong,
:root[data-theme="seven7"] .admin-sidebar .admin-brand strong,
:root[data-theme="seven7"] .admin-sidebar .admin-user-card strong,
:root[data-theme="seven7"] .admin-tab.active,
:root[data-theme="seven7"] .admin-tab.active *,
:root[data-theme="seven7"] .admin-tab:hover,
:root[data-theme="seven7"] .admin-tab:hover *{color:#FFFFFF!important}
:root[data-theme="vista"] .admin-sidebar span,
:root[data-theme="vista"] .admin-sidebar small,
:root[data-theme="vista"] .admin-sidebar .sidebar-section,
:root[data-theme="seven7"] .admin-sidebar span,
:root[data-theme="seven7"] .admin-sidebar small,
:root[data-theme="seven7"] .admin-sidebar .sidebar-section{color:rgba(203,213,225,.68)!important}
:root[data-theme="vista"] .admin-main,
:root[data-theme="vista"] .admin-topbar,
:root[data-theme="vista"] #page-admin .card,
:root[data-theme="vista"] #page-admin .modal,
:root[data-theme="seven7"] .admin-main,
:root[data-theme="seven7"] .admin-topbar,
:root[data-theme="seven7"] #page-admin .card,
:root[data-theme="seven7"] #page-admin .modal{color:var(--text)!important}
:root[data-theme="vista"] .admin-topbar *,
:root[data-theme="vista"] .admin-main .card *,
:root[data-theme="vista"] #page-admin .modal *,
:root[data-theme="seven7"] .admin-topbar *,
:root[data-theme="seven7"] .admin-main .card *,
:root[data-theme="seven7"] #page-admin .modal *{color:inherit}
:root[data-theme="vista"] .admin-main .card p,
:root[data-theme="vista"] .admin-main .card label,
:root[data-theme="vista"] .admin-main .card td,
:root[data-theme="vista"] #page-admin .modal p,
:root[data-theme="vista"] #page-admin .modal label,
:root[data-theme="seven7"] .admin-main .card p,
:root[data-theme="seven7"] .admin-main .card label,
:root[data-theme="seven7"] .admin-main .card td,
:root[data-theme="seven7"] #page-admin .modal p,
:root[data-theme="seven7"] #page-admin .modal label{color:var(--text2)!important}
:root[data-theme="vista"] .btn-primary,
:root[data-theme="vista"] .btn-primary *,
:root[data-theme="vista"] .btn-sm-primary,
:root[data-theme="vista"] .btn-sm-primary *,
:root[data-theme="vista"] .nav-cta,
:root[data-theme="vista"] .nav-cta *,
:root[data-theme="vista"] .btn-success,
:root[data-theme="vista"] .btn-danger,
:root[data-theme="vista"] .btn-wa,
:root[data-theme="seven7"] .btn-primary,
:root[data-theme="seven7"] .btn-primary *,
:root[data-theme="seven7"] .btn-sm-primary,
:root[data-theme="seven7"] .btn-sm-primary *,
:root[data-theme="seven7"] .nav-cta,
:root[data-theme="seven7"] .nav-cta *,
:root[data-theme="seven7"] .btn-success,
:root[data-theme="seven7"] .btn-danger,
:root[data-theme="seven7"] .btn-wa{color:#FFFFFF!important}
:root[data-theme="vista"] .btn-outline,
:root[data-theme="vista"] .btn-sm-outline,
:root[data-theme="vista"] .btn-secondary,
:root[data-theme="seven7"] .btn-outline,
:root[data-theme="seven7"] .btn-sm-outline,
:root[data-theme="seven7"] .btn-secondary{color:var(--text)!important}
:root[data-theme="vista"] .badge:not(.badge-verified),
:root[data-theme="seven7"] .badge:not(.badge-verified){color:inherit}

/* Theme: Dark Elegant */
:root[data-theme="dark_elegant"] body{
  background:
    radial-gradient(circle at 18% 0%,rgba(201,162,86,.13),transparent 32%),
    radial-gradient(circle at 82% 12%,rgba(103,184,148,.10),transparent 28%),
    linear-gradient(180deg,#0A100F 0%,#0D1412 48%,#121D1A 100%);
}
:root[data-theme="dark_elegant"] h1,
:root[data-theme="dark_elegant"] h2,
:root[data-theme="dark_elegant"] h3,
:root[data-theme="dark_elegant"] h4{color:var(--text)}
:root[data-theme="dark_elegant"] nav{
  background:rgba(13,20,18,.88);
  border-bottom-color:rgba(201,162,86,.22);
  box-shadow:0 12px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
}
:root[data-theme="dark_elegant"] .nav-logo span,
:root[data-theme="dark_elegant"] .nav-links a{color:var(--text2)}
:root[data-theme="dark_elegant"] .nav-links a:hover{background:rgba(201,162,86,.10);color:var(--text)}
:root[data-theme="dark_elegant"] .checkout-form-card,
:root[data-theme="dark_elegant"] .feature-card,
:root[data-theme="dark_elegant"] .product-card,
:root[data-theme="dark_elegant"] .table-card,
:root[data-theme="dark_elegant"] .blog-widget,
:root[data-theme="dark_elegant"] .dash-stat-card,
:root[data-theme="dark_elegant"] .auth-card,
:root[data-theme="dark_elegant"] .mobile-menu{
  background:linear-gradient(180deg,rgba(22,34,31,.94),rgba(13,20,18,.92));
  border:1px solid rgba(201,162,86,.20);
  box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="dark_elegant"] .hero{
  background:
    linear-gradient(135deg,rgba(8,14,13,.98),rgba(18,39,34,.94) 54%,rgba(92,68,29,.88)),
    radial-gradient(circle at 24% 20%,rgba(201,162,86,.16),transparent 26%);
  color:var(--text);
}
:root[data-theme="dark_elegant"] .hero-bg{
  background:
    radial-gradient(circle at 18% 18%,rgba(201,162,86,.18),transparent 25%),
    radial-gradient(circle at 78% 26%,rgba(103,184,148,.14),transparent 30%);
  opacity:1;
}
:root[data-theme="dark_elegant"] .hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}
:root[data-theme="dark_elegant"] h1.hero-title,
:root[data-theme="dark_elegant"] .hero-sub{color:var(--text)}
:root[data-theme="dark_elegant"] .hero-sub{color:var(--text2)}
:root[data-theme="dark_elegant"] h1.hero-title em{color:#E1BF74}
:root[data-theme="dark_elegant"] .hero-badge{
  background:rgba(201,162,86,.12);
  border-color:rgba(201,162,86,.28);
  color:#E1BF74;
}
:root[data-theme="dark_elegant"] .hero-badge span{background:#E1BF74}
:root[data-theme="dark_elegant"] .hero-stats{
  background:rgba(255,255,255,.045);
  border-color:rgba(201,162,86,.18);
  box-shadow:0 22px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
}
:root[data-theme="dark_elegant"] .hero-stat .num{color:#F4E4BF}
:root[data-theme="dark_elegant"] .hero-stat .label{color:var(--text3)}
:root[data-theme="dark_elegant"] .btn-primary,
:root[data-theme="dark_elegant"] .nav-cta,
:root[data-theme="dark_elegant"] .btn-sm-primary{
  background:linear-gradient(135deg,#B68C3D,#E1BF74 48%,#7C5B24)!important;
  color:#111814!important;
  border:1px solid rgba(255,232,180,.35)!important;
  box-shadow:0 12px 28px rgba(201,162,86,.20), inset 0 1px 0 rgba(255,255,255,.28)!important;
}
:root[data-theme="dark_elegant"] .btn-primary:hover,
:root[data-theme="dark_elegant"] .nav-cta:hover,
:root[data-theme="dark_elegant"] .btn-sm-primary:hover{
  background:linear-gradient(135deg,#C99D4D,#F0CF83 48%,#8E6829)!important;
}
:root[data-theme="dark_elegant"] .btn-outline,
:root[data-theme="dark_elegant"] .btn-sm-outline,
:root[data-theme="dark_elegant"] input,
:root[data-theme="dark_elegant"] textarea,
:root[data-theme="dark_elegant"] select{
  background:#0F1816;
  border-color:rgba(201,162,86,.22);
  color:var(--text);
}
:root[data-theme="dark_elegant"] input::placeholder,
:root[data-theme="dark_elegant"] textarea::placeholder{color:#766D61}
:root[data-theme="dark_elegant"] th{background:#111C19;color:#A99C88;border-bottom-color:rgba(201,162,86,.18)}
:root[data-theme="dark_elegant"] td{color:var(--text2);border-bottom-color:rgba(201,162,86,.12)}
:root[data-theme="dark_elegant"] tr:hover td,
:root[data-theme="dark_elegant"] #page-admin .table-card tbody tr:hover td{background:rgba(201,162,86,.07)}
:root[data-theme="dark_elegant"] #page-admin .table-card tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
:root[data-theme="dark_elegant"] .section-label,
:root[data-theme="dark_elegant"] .badge-verified,
:root[data-theme="dark_elegant"] .sidebar-item.active{
  background:rgba(201,162,86,.12);
  color:#E1BF74;
  border:1px solid rgba(201,162,86,.22);
}
:root[data-theme="dark_elegant"] .admin-shell,
:root[data-theme="dark_elegant"] #page-admin{
  background:
    radial-gradient(circle at 18% 0%,rgba(201,162,86,.10),transparent 34%),
    linear-gradient(180deg,#0A100F,#0D1412);
}
:root[data-theme="dark_elegant"] .admin-sidebar{
  background:linear-gradient(180deg,#0A100F,#101B18 56%,#0D1412);
  border-right-color:rgba(201,162,86,.18);
  box-shadow:8px 0 34px rgba(0,0,0,.35), inset -1px 0 0 rgba(255,255,255,.025);
}
:root[data-theme="dark_elegant"] .admin-brand,
:root[data-theme="dark_elegant"] .admin-user-card{
  background:rgba(255,255,255,.035);
  border-color:rgba(201,162,86,.18);
}
:root[data-theme="dark_elegant"] .admin-brand strong,
:root[data-theme="dark_elegant"] .admin-user-card strong{color:var(--text)}
:root[data-theme="dark_elegant"] .admin-brand span,
:root[data-theme="dark_elegant"] .admin-user-card span{color:var(--text3)}
:root[data-theme="dark_elegant"] .admin-brand-mark{
  background:linear-gradient(135deg,#1A2824,#2D6F5F);
  color:#E1BF74;
  border:1px solid rgba(201,162,86,.22);
}
:root[data-theme="dark_elegant"] .admin-tab{
  color:var(--text2);
  border-color:transparent;
}
:root[data-theme="dark_elegant"] .admin-tab:hover{
  background:rgba(201,162,86,.08);
  color:var(--text);
}
:root[data-theme="dark_elegant"] .admin-tab.active{
  background:linear-gradient(135deg,#B68C3D,#E1BF74);
  color:#111814;
  border-color:rgba(255,232,180,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
:root[data-theme="dark_elegant"] .admin-tab-icon{
  background:rgba(255,255,255,.05);
  color:#E1BF74;
}
:root[data-theme="dark_elegant"] .admin-tab.active .admin-tab-icon{
  background:rgba(17,24,20,.12);
  color:#111814;
}
:root[data-theme="dark_elegant"] .admin-main{
  background:linear-gradient(180deg,#0D1412,#121D1A);
}
:root[data-theme="dark_elegant"] .admin-topbar{
  background:rgba(18,29,26,.92);
  border-bottom-color:rgba(201,162,86,.18);
  box-shadow:0 12px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035);
}
.prod-thumb-item img{width:100%;height:100%;object-fit:cover}

/* ── TOGGLE SWITCH ── */
.toggle-switch{position:relative;display:inline-block;width:46px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;cursor:pointer;inset:0;
  background:#D1D5DB;border-radius:24px;
  transition:.25s;
}
.toggle-slider:before{
  content:'';position:absolute;
  height:18px;width:18px;left:3px;bottom:3px;
  background:white;border-radius:50%;
  transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider{background:var(--blue)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(22px)}

/* QRIS default hidden — JS akan tampilkan jika aktif */
#pm-qris { display: none; }
#pm-transfer { display: none; }

/* Lightbox */
.lightbox{
  display:none;position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,.92);align-items:center;justify-content:center;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;object-fit:contain;}
.lightbox-close{
  position:fixed;top:16px;right:20px;color:white;font-size:2rem;
  cursor:pointer;background:none;border:none;line-height:1;z-index:5001;
}
.lightbox-prev,.lightbox-next{
  position:fixed;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.15);color:white;border:none;
  font-size:2rem;cursor:pointer;padding:12px 16px;border-radius:8px;
  z-index:5001;
}
.lightbox-prev{left:10px;} .lightbox-next{right:10px;}

/* ── PRODUCT DETAIL MOBILE-FIRST ── */
.pd-wrap{display:flex;flex-direction:column;gap:0;padding:12px 4% 20px;max-width:960px;margin:0 auto}
.pd-title{font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:4px;line-height:1.3}
.pd-stars{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.pd-price{font-size:1.8rem;font-weight:800;color:var(--blue);margin-bottom:4px}
.pd-price-old{font-size:13px;color:var(--text3);text-decoration:line-through;margin-bottom:16px}
.pd-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.pd-section{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:12px}
.pd-section h4{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.pd-wrap{
  background:
    radial-gradient(circle at 16% 0%,rgba(58,117,117,.10),transparent 32%),
    linear-gradient(180deg,#F7FCFC 0%,#EFF5F5 100%);
}
.pd-left{
  min-width:0;position:relative;padding:18px;border:1px solid #D7E5E5;border-radius:24px;
  background:
    linear-gradient(135deg,rgba(237,246,246,.92),rgba(255,255,255,.96) 48%,rgba(248,252,252,.98)),
    radial-gradient(circle at 12% 8%,rgba(35,70,70,.08),transparent 30%);
  box-shadow:0 18px 52px rgba(13,38,38,.065);
}
.pd-left > div[style*="margin-top:14px"],
.pd-left > .pd-btns,
.pd-left > .pd-share-wrap{display:none}
.pd-left .mag-wrap{
  background:#FFFFFF;border:1px solid #D7E5E5;border-radius:20px;padding:10px;
  box-shadow:0 18px 48px rgba(13,38,38,.08);
}
.pd-left .mag-wrap img{border-radius:14px!important}
.pd-category-chip{margin-bottom:12px}
.pd-image-empty{
  min-height:300px;border:1px solid #D7E5E5;border-radius:18px;background:#F3FAFA;
  display:flex;align-items:center;justify-content:center;color:#234646;
}
.pd-image-empty .ui-icon{width:76px;height:76px;opacity:.68}
.pd-image-empty .ui-icon svg{width:76px;height:76px;stroke-width:1.25}
.pd-thumbs{padding:8px 2px 0}
.pd-thumb{background:#FFFFFF;box-shadow:0 8px 18px rgba(13,38,38,.055)}
.pd-value-panel{
  margin:20px 0 14px;padding:22px;border:1px solid #D7E5E5;border-radius:20px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFEFE 100%);
  box-shadow:0 14px 36px rgba(13,38,38,.06);
}
.pd-mini-label{
  display:inline-flex;margin-bottom:8px;padding:5px 10px;border-radius:999px;
  background:#EDF6F6;border:1px solid #D7E5E5;color:#173E3E;
  font-size:10.5px;font-weight:900;text-transform:uppercase;
}
.pd-value-panel h2{font-size:1.28rem;font-weight:950;line-height:1.28;color:var(--text);margin:0 0 8px}
.pd-value-panel p{font-size:14.5px;line-height:1.78;color:#456868;margin:0}
.pd-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.pd-value-grid div{border:1px solid #D7E5E5;border-radius:14px;background:#F8FCFC;padding:14px}
.pd-value-grid strong{display:block;font-size:13px;font-weight:950;color:#143333;margin-bottom:5px}
.pd-value-grid span{display:block;font-size:12.5px;line-height:1.55;color:#5C7D7D}
.pd-section{
  border-color:#D7E5E5;border-radius:18px;background:#FFFFFF;
  box-shadow:0 10px 28px rgba(13,38,38,.045);
}
.pd-section h4{font-weight:950;color:#143333}
.pd-demo-card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(58,117,117,.10), transparent 28%),
    linear-gradient(180deg,#FFFFFF 0%,#F9FDFC 100%);
  border:1px solid #D2E3E3;
  box-shadow:0 18px 38px rgba(13,38,38,.06);
}
.pd-demo-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--teal3),var(--pink));
  opacity:.92;
}
.pd-demo-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.pd-demo-head h4{font-size:1rem;letter-spacing:.02em;margin:0 0 6px;text-transform:none}
.pd-demo-head p{margin:0;color:#5B7777;font-size:13.5px;line-height:1.7;max-width:640px}
.pd-demo-cta-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-bottom:16px;
}
.pd-demo-cta{
  border-radius:16px;border:1px solid #D2E3E3;padding:15px 16px;text-decoration:none;
  display:flex;align-items:center;gap:12px;cursor:pointer;transition:.18s var(--ease);
  background:#FFFFFF;color:var(--text);box-shadow:0 10px 24px rgba(13,38,38,.035);
}
.pd-demo-cta:hover{transform:translateY(-1px);border-color:#9EBDBD;box-shadow:0 14px 30px rgba(13,38,38,.07)}
.pd-demo-cta strong{display:block;font-size:14px;font-weight:900;color:#143333}
.pd-demo-cta small{display:block;font-size:12.2px;line-height:1.55;color:#648282;margin-top:2px}
.pd-demo-cta-icon{
  width:44px;height:44px;border-radius:14px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#EAF6F6,#F7FCFC);
  color:var(--blue);border:1px solid #D9E9E9;
}
.pd-demo-cta-icon .ui-icon{width:20px;height:20px}
.pd-demo-cta-icon .ui-icon svg{width:20px;height:20px}
.pd-demo-cta-primary{
  background:linear-gradient(135deg,var(--blue3),#FFFFFF 72%);
}
.pd-demo-cta-secondary{
  justify-content:flex-start;text-align:left;
  background:linear-gradient(135deg,#FFFFFF,#F6FBFB);
}
.pd-demo-fields{display:grid;gap:12px}
.pd-demo-field{display:grid;gap:7px}
.pd-demo-field-label{
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6A8A8A;
}
.pd-demo-field-box{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid #D2E3E3;border-radius:16px;padding:14px 16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FCFC 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.pd-demo-field-box strong{
  font-size:1.08rem;font-weight:900;color:#123535;letter-spacing:.01em;
}
.pd-demo-copy{
  border:none;background:var(--blue3);color:var(--blue);border-radius:999px;
  padding:9px 15px;font-size:12.5px;font-weight:900;cursor:pointer;transition:.16s var(--ease);
}
.pd-demo-copy:hover{background:var(--blue);color:#FFFFFF}
.pd-demo-note{
  margin-top:14px;padding:14px 16px;border-radius:14px;
  background:rgba(237,246,246,.95);border:1px solid #D9E9E9;
  color:#476666;font-size:13.5px;line-height:1.72;
}
.pd-demo-quick{
  background:
    linear-gradient(180deg,#FFFFFF 0%,#F9FCFC 100%),
    radial-gradient(circle at top right,rgba(58,117,117,.08),transparent 30%);
  border:1px solid #D7E5E5;
}
.pd-demo-quick h4{margin-bottom:12px}
.pd-demo-quick-row{
  display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid #E4EFEF;
}
.pd-demo-quick-row:first-of-type{border-top:0;padding-top:0}
.pd-demo-quick-row span{
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#708D8D;
}
.pd-demo-quick-row strong{
  min-width:0;font-size:14px;font-weight:900;color:#143333;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pd-demo-quick .pd-demo-copy{padding:7px 12px;font-size:11.5px}
.pd-demo-quick-note{
  margin:10px 0 0;font-size:12.8px;line-height:1.7;color:#5A7878;
}
.pd-cta-primary,.pd-cta-secondary{
  display:flex!important;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;
}
.pd-cta-primary .ui-icon,.pd-cta-secondary .ui-icon{width:17px;height:17px}
.pd-cta-primary .ui-icon svg,.pd-cta-secondary .ui-icon svg{width:17px;height:17px}
.pd-review-item{padding:14px 0;border-bottom:1px solid #D7E5E5}
.pd-review-item:last-child{border-bottom:0}
.pd-review-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.pd-review-head span{font-size:14px;font-weight:850;color:var(--text)}
.pd-review-head small{font-size:12px;color:var(--text3)}
.pd-review-item p{font-size:13.5px;color:#496969;line-height:1.7;margin:8px 0 0}
/* Desktop: 2 col */
@media(min-width:768px){
  .pd-wrap{flex-direction:row;align-items:flex-start;gap:36px;padding:34px 5%;max-width:1180px}
  .pd-left{flex:1 1 auto;max-width:740px;padding:24px}
  .pd-right{width:360px;flex-shrink:0;position:sticky;top:88px}
  .pd-right .pd-section:first-child{padding:22px;box-shadow:0 22px 58px rgba(13,38,38,.11)}
}
@media(max-width:767px){
  .pd-demo-cta-grid{grid-template-columns:1fr}
  .pd-demo-field-box{align-items:flex-start;flex-direction:column}
  .pd-demo-copy{width:100%;justify-content:center}
  .pd-demo-quick-row{grid-template-columns:1fr}
  .pd-demo-quick .pd-demo-copy{width:100%}
}

/* ── MAGNIFIER (desktop only) ── */
.mag-wrap{position:relative;overflow:hidden;border-radius:14px;cursor:crosshair}
.mag-wrap img{display:block;width:100%;transition:.2s}
.magnifier-glass{
  display:none;
  position:absolute;
  width:160px;height:160px;
  border-radius:50%;
  border:2px solid var(--border2);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:10;
}
@media(min-width:768px){
  .mag-wrap:hover .magnifier-glass{display:block}
}

/* ── GALLERY THUMBS ── */
.pd-thumbs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pd-thumb{width:54px;height:54px;border-radius:8px;overflow:hidden;border:2px solid var(--border);cursor:pointer;transition:.15s}
.pd-thumb:hover,.pd-thumb.active{border-color:var(--blue)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-share-wrap{margin-top:16px}
.pd-share-wrap.is-compact{margin-top:12px}
.pd-share-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.pd-share-wrap.is-compact .pd-share-title{font-size:12px}
.pd-share-bar{
  display:flex;gap:3px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pd-share-bar::-webkit-scrollbar{display:none}
.pd-share-btn{
  width:34px;height:34px;border:none;border-radius:4px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:#fff;box-shadow:0 8px 18px rgba(15,23,42,.12);transition:.18s ease;
}
.pd-share-btn:hover{transform:translateY(-1px);filter:brightness(.96)}
.pd-share-btn svg{width:15px;height:15px;display:block}
.pd-share-icon{display:inline-flex}
.pd-share-btn.whatsapp{background:#45d854}
.pd-share-btn.facebook{background:#3b5998}
.pd-share-btn.telegram{background:#27a7e7}
.pd-share-btn.instagram{background:#e4405f}
.pd-share-btn.copy{background:#5d6d7e}
.pd-share-btn.x{background:#1f2937}
.pd-share-btn.threads{background:#111827}
.pd-share-btn.discord{background:#5865f2}
.pd-share-btn.more{background:#4b5563}
@media(max-width:767px){
  .pd-share-wrap{text-align:center}
  .pd-share-title{font-size:14px;margin-bottom:12px}
  .pd-share-wrap.is-compact .pd-share-title{font-size:14px}
  .pd-share-bar{
    width:100%;margin:0 auto;padding:0 1px;
    display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
    gap:clamp(2px,1vw,6px);overflow:visible;
  }
  .pd-share-btn{
    width:100%;height:auto;aspect-ratio:1/1;min-width:0;
    border-radius:clamp(6px,1.8vw,9px);
  }
  .pd-share-btn svg{width:clamp(12px,3.8vw,18px);height:clamp(12px,3.8vw,18px)}
}
.stats-filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px;
}
.stats-filter-group{display:flex;flex-direction:column;gap:6px}
.stats-filter-group label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.stats-date-input{
  min-width:150px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--white);color:var(--text);font-size:13px;
}
.stats-chart-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:18px;
}
.stats-chart-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;
}
.stats-chart-legend{display:flex;gap:14px;flex-wrap:wrap}
.stats-chart-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);font-weight:600}
.stats-dot{width:10px;height:10px;border-radius:50%}
.stats-canvas-wrap{width:100%;overflow:hidden}
#visitorStatsChart{width:100%;height:300px;display:block}
@media(max-width:767px){
  #visitorStatsChart{height:240px}
  .stats-date-input{min-width:132px}
}
.seo-ai-grid{display:grid;grid-template-columns:minmax(300px,520px) minmax(0,1fr);gap:18px;align-items:start}
.seo-ai-form textarea{min-height:180px}
.seo-ai-list{display:grid;gap:10px}
.seo-ai-list div{padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#F7FBFB;color:var(--text2);font-size:13px;line-height:1.55}
.seo-audit-empty p{color:var(--text2);font-size:14px;line-height:1.75;margin:0}
.seo-audit-result{display:grid;gap:16px}
.seo-audit-score-card{display:flex;align-items:center;gap:18px;margin-bottom:0!important}
.seo-audit-score{width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:950;background:var(--bg3);color:var(--text)}
.seo-audit-score-card h2{margin:0 0 6px!important;font-size:1.2rem!important}
.seo-audit-score-card p{margin:0;color:var(--text2);font-size:13.5px;line-height:1.65}
.seo-audit-good .seo-audit-score{background:#DCFCE7;color:#047857}
.seo-audit-warn .seo-audit-score{background:#FEF3C7;color:#B45309}
.seo-audit-bad .seo-audit-score{background:#FEE2E2;color:#B91C1C}
.seo-audit-stats{margin-bottom:0}
.seo-audit-advice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.seo-audit-advice section{padding:14px;border:1px solid var(--border);border-radius:10px;background:#F7FBFB}
.seo-audit-advice h3{font-size:.95rem;margin:0 0 10px;color:var(--text)}
.seo-audit-advice ul{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.seo-audit-advice li{font-size:13px;line-height:1.55;color:var(--text2);padding-left:16px;position:relative}
.seo-audit-advice li:before{content:'';position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.seo-audit-optimize-btn{width:100%;margin-top:14px}
.seo-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.seo-ai-result label{display:block;font-size:12px;font-weight:800;color:var(--text);margin-bottom:6px}
.seo-ai-result pre{white-space:pre-wrap;word-break:break-word;margin:0;padding:12px;border:1px solid var(--border);border-radius:8px;background:#F7FBFB;color:var(--text2);font-size:12.5px;line-height:1.6}
.ai-assistant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.ai-assistant-card{display:flex;flex-direction:column;gap:14px}
.ai-assistant-card-wide{grid-column:1/-1}
.ai-assistant-card-head{display:flex;align-items:flex-start;gap:12px}
.ai-assistant-card-head .ui-icon{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#ECF7F7;color:var(--blue);display:flex;align-items:center;justify-content:center}
.ai-assistant-card-head .ui-icon svg{width:20px;height:20px}
.ai-assistant-card-head h2{margin:0 0 4px!important;font-size:1.05rem!important}
.ai-assistant-card-head p{margin:0;color:var(--text3);font-size:13px;line-height:1.55}
.ai-assistant-inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.ai-assistant-actions{display:grid;gap:10px}
.ai-assistant-status{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;background:#F7FBFB;padding:12px 14px;color:var(--text)}
.ai-assistant-status span{font-size:12px;color:var(--text3)}
.ai-assistant-result{margin-top:18px}
.ai-assistant-output-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.ai-assistant-output-head h2{margin:0 0 6px!important}
.ai-assistant-output-head p{margin:0;color:var(--text3);line-height:1.55}
.ai-assistant-preview{margin-top:16px;border:1px solid var(--border);border-radius:10px;background:#FBFFFF;padding:18px 20px;color:var(--text2);line-height:1.75;max-height:420px;overflow:auto}
.ai-assistant-preview h2{font-size:1.15rem;margin:20px 0 8px;color:var(--text)}
.ai-assistant-preview h3{font-size:1rem;margin:16px 0 8px;color:var(--text)}
.ai-assistant-preview p{margin:0 0 12px}
@media(max-width:900px){.ai-assistant-grid{grid-template-columns:1fr}.ai-assistant-inline-form,.ai-assistant-output-head{grid-template-columns:1fr;display:grid}.ai-assistant-status{align-items:flex-start;flex-direction:column}}
@media(max-width:900px){.seo-ai-grid{grid-template-columns:1fr}}
@media(max-width:900px){.seo-audit-advice{grid-template-columns:1fr}.seo-audit-score-card{align-items:flex-start}.seo-audit-score{width:72px;height:72px;font-size:1.65rem;flex:0 0 72px}}
@media(max-width:980px){
  .blog-layout,.article-layout{grid-template-columns:1fr;gap:32px}
  .blog-sidebar{position:static}
  .blog-pagination{flex-direction:column;align-items:flex-start}
  .blog-pagination-actions{width:100%}
  .blog-page-btn{flex:1}
  .blog-load-more{width:100%;justify-content:center;text-align:center}
  .lead-magnet-wrap{grid-template-columns:1fr}
  .closing-box{flex-direction:column;align-items:flex-start}
  .closing-actions{justify-content:flex-start}
  .faq-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  section{padding-top:48px;padding-bottom:48px}
  .section-header{margin-bottom:24px}
  .section-title{font-size:1.45rem}
  .page-header{padding:22px 4% 18px}
  .page-header h2{font-size:1.35rem}
  .lead-form,.checkout-form-card,.order-summary-card,.demo-card,.auth-card{border-radius:16px}
  .feature-card,.product-card,.faq-item,.testi-card{border-radius:14px}
  .blog-home{padding:24px 4% 54px}
  .blog-hero{padding:22px 18px;border-radius:16px;margin-bottom:18px}
  .blog-hero h1{font-size:2rem}
  .blog-hero p{font-size:14.5px}
  .blog-toolbar{border-radius:14px;padding:8px}
  .blog-filter{font-size:12px;padding:8px 10px}
  .blog-card{grid-template-columns:1fr;gap:14px;padding:16px;border-radius:15px}
  .blog-thumb{height:92px;border-radius:12px}
  .blog-widget{border-radius:15px;padding:16px}
  .article-shell{padding:16px 4% 48px}
  .article-card{border-radius:14px}
  .article-card header{padding:22px 20px 18px}
  .article-content{padding:22px 20px 8px}
  .article-engagement{padding:0}
  .article-comments{margin:28px 20px 30px}
  .article-actions{padding:20px 20px 26px}
  .article-title{font-size:1.42rem}
  .article-lead{font-size:14px}
  .article-content{font-size:14.5px;line-height:1.78}
  .article-content .article-main-image{margin-bottom:22px}
  .article-main-image img{border-radius:12px}
  .comment-form-row{grid-template-columns:1fr}
  .article-product-embed{grid-template-columns:1fr;gap:12px}
  .article-product-embed img{width:100%;height:140px}
  .article-editor-modal{height:92vh}
  #addArticleModal{padding:10px}
  #addArticleModal .article-editor-modal{
    display:flex;flex-direction:column;max-width:100%;height:94vh;overflow:auto;border-radius:18px;padding-bottom:0;
  }
  #addArticleModal .modal-header,
  #addArticleModal .article-title-section,
  #addArticleModal .article-category-section,
  #addArticleModal .article-image-section,
  #addArticleModal .article-seo-grid,
  #addArticleModal .article-editor-group,
  #addArticleModal > .article-editor-modal > .btn-full{
    grid-column:auto;grid-row:auto;border-left:0;border-right:0;padding-left:18px;padding-right:18px;width:100%;
  }
  #addArticleModal .modal-header{order:1;position:sticky;top:0;z-index:12}
  #addArticleModal .article-title-section{order:2}
  #addArticleModal .article-category-section{order:3;align-self:auto}
  #addArticleModal .article-image-section{order:4;align-self:auto}
  #addArticleModal .article-editor-group{order:5;min-height:auto;padding-top:16px}
  #addArticleModal .article-seo-grid{order:6;display:block;max-height:none;overflow:visible}
  #addArticleModal #artTitle{font-size:1.35rem;min-height:46px}
  #addArticleModal .article-title-ai-row{grid-template-columns:1fr}
  #addArticleModal #articleAiBtn{position:static;min-height:44px;width:100%;white-space:normal}
  #addArticleModal > .article-editor-modal > .btn-full{
    order:6;position:sticky!important;left:0!important;right:auto!important;bottom:0!important;width:100%!important;
    border-radius:0 0 18px 18px;min-height:58px;flex-shrink:0;z-index:20;
  }
  #addArticleModal .article-editor-toolbar{position:static;display:flex;overflow:visible;flex-wrap:wrap;gap:8px}
  #addArticleModal .article-editor-toolbar button{flex:1 1 calc(25% - 8px);min-width:64px;padding:0 8px}
  #addArticleModal .article-editor-toolbar button:first-child{flex-basis:100%;min-width:0}
  #addArticleModal .article-product-insert-row{grid-template-columns:1fr;padding:12px 0 0;border-left:0;border-right:0;background:transparent;box-shadow:none}
  #addArticleModal .article-product-insert-row label{display:block}
  #addArticleModal .article-product-insert-row select{width:100%;min-height:44px;font-size:13px}
  #addArticleModal .article-editor-textarea{padding:22px 18px;min-height:360px}
  .article-title-ai-row,.article-seo-grid{grid-template-columns:1fr}
  .article-editor-textarea{min-height:300px;padding:16px;font-size:15px}
  #addProductModal{padding:10px}
  #addProductModal .modal{
    display:flex;flex-direction:column;max-width:100%!important;max-height:94vh!important;overflow:auto!important;border-radius:18px;
  }
  #addProductModal .product-editor-main{
    display:grid!important;grid-template-columns:1fr!important;padding:18px;border-right:0;overflow:visible;
  }
  #addProductModal .product-editor-images .img-upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #addProductModal .product-editor-side{
    grid-column:auto;grid-row:auto;border-left:0;padding:18px;width:100%;
  }
  #addProductModal .product-editor-images .img-slot:not(.has-img){min-height:110px}
  #addProductModal #productSaveBtn{grid-column:auto;grid-row:auto;border-radius:0 0 18px 18px;position:sticky;bottom:0;z-index:8}
  .backup-grid{grid-template-columns:1fr}
}

/* Final theme contrast system: every non-original theme controls readable text. */
:root[data-theme="exclusive"] body,
:root[data-theme="vista"] body,
:root[data-theme="seven7"] body,
:root[data-theme="dark_elegant"] body{color:var(--text)}

:root[data-theme="exclusive"] h1,
:root[data-theme="exclusive"] h2,
:root[data-theme="exclusive"] h3,
:root[data-theme="exclusive"] h4,
:root[data-theme="exclusive"] .section-title,
:root[data-theme="exclusive"] .product-title,
:root[data-theme="exclusive"] .blog-title,
:root[data-theme="exclusive"] .article-title,
:root[data-theme="exclusive"] .admin-page-title,
:root[data-theme="exclusive"] .modal h2,
:root[data-theme="vista"] h1,
:root[data-theme="vista"] h2,
:root[data-theme="vista"] h3,
:root[data-theme="vista"] h4,
:root[data-theme="vista"] .section-title,
:root[data-theme="vista"] .product-title,
:root[data-theme="vista"] .blog-title,
:root[data-theme="vista"] .article-title,
:root[data-theme="vista"] .admin-page-title,
:root[data-theme="vista"] .modal h2,
:root[data-theme="seven7"] h1,
:root[data-theme="seven7"] h2,
:root[data-theme="seven7"] h3,
:root[data-theme="seven7"] h4,
:root[data-theme="seven7"] .section-title,
:root[data-theme="seven7"] .product-title,
:root[data-theme="seven7"] .blog-title,
:root[data-theme="seven7"] .article-title,
:root[data-theme="seven7"] .admin-page-title,
:root[data-theme="seven7"] .modal h2,
:root[data-theme="dark_elegant"] h1,
:root[data-theme="dark_elegant"] h2,
:root[data-theme="dark_elegant"] h3,
:root[data-theme="dark_elegant"] h4,
:root[data-theme="dark_elegant"] .section-title,
:root[data-theme="dark_elegant"] .product-title,
:root[data-theme="dark_elegant"] .blog-title,
:root[data-theme="dark_elegant"] .article-title,
:root[data-theme="dark_elegant"] .admin-page-title,
:root[data-theme="dark_elegant"] .modal h2{color:var(--text)!important}

:root[data-theme="exclusive"] p,
:root[data-theme="exclusive"] label,
:root[data-theme="exclusive"] td,
:root[data-theme="exclusive"] .section-sub,
:root[data-theme="exclusive"] .product-desc,
:root[data-theme="exclusive"] .blog-excerpt,
:root[data-theme="exclusive"] .article-content,
:root[data-theme="exclusive"] .checkout-form-card,
:root[data-theme="exclusive"] .feature-card,
:root[data-theme="exclusive"] .product-card,
:root[data-theme="exclusive"] .table-card,
:root[data-theme="exclusive"] .blog-widget,
:root[data-theme="exclusive"] .dash-stat-card,
:root[data-theme="exclusive"] .auth-card,
:root[data-theme="exclusive"] .modal,
:root[data-theme="vista"] p,
:root[data-theme="vista"] label,
:root[data-theme="vista"] td,
:root[data-theme="vista"] .section-sub,
:root[data-theme="vista"] .product-desc,
:root[data-theme="vista"] .blog-excerpt,
:root[data-theme="vista"] .article-content,
:root[data-theme="vista"] .checkout-form-card,
:root[data-theme="vista"] .feature-card,
:root[data-theme="vista"] .product-card,
:root[data-theme="vista"] .table-card,
:root[data-theme="vista"] .blog-widget,
:root[data-theme="vista"] .dash-stat-card,
:root[data-theme="vista"] .auth-card,
:root[data-theme="vista"] .modal,
:root[data-theme="seven7"] p,
:root[data-theme="seven7"] label,
:root[data-theme="seven7"] td,
:root[data-theme="seven7"] .section-sub,
:root[data-theme="seven7"] .product-desc,
:root[data-theme="seven7"] .blog-excerpt,
:root[data-theme="seven7"] .article-content,
:root[data-theme="seven7"] .checkout-form-card,
:root[data-theme="seven7"] .feature-card,
:root[data-theme="seven7"] .product-card,
:root[data-theme="seven7"] .table-card,
:root[data-theme="seven7"] .blog-widget,
:root[data-theme="seven7"] .dash-stat-card,
:root[data-theme="seven7"] .auth-card,
:root[data-theme="seven7"] .modal,
:root[data-theme="dark_elegant"] p,
:root[data-theme="dark_elegant"] label,
:root[data-theme="dark_elegant"] td,
:root[data-theme="dark_elegant"] .section-sub,
:root[data-theme="dark_elegant"] .product-desc,
:root[data-theme="dark_elegant"] .blog-excerpt,
:root[data-theme="dark_elegant"] .article-content,
:root[data-theme="dark_elegant"] .checkout-form-card,
:root[data-theme="dark_elegant"] .feature-card,
:root[data-theme="dark_elegant"] .product-card,
:root[data-theme="dark_elegant"] .table-card,
:root[data-theme="dark_elegant"] .blog-widget,
:root[data-theme="dark_elegant"] .dash-stat-card,
:root[data-theme="dark_elegant"] .auth-card,
:root[data-theme="dark_elegant"] .modal{color:var(--text2)!important}

:root[data-theme="exclusive"] small,
:root[data-theme="exclusive"] th,
:root[data-theme="exclusive"] .text-muted,
:root[data-theme="exclusive"] .stat-label,
:root[data-theme="exclusive"] .product-price-note,
:root[data-theme="exclusive"] .blog-date,
:root[data-theme="exclusive"] .blog-meta,
:root[data-theme="exclusive"] .article-meta,
:root[data-theme="exclusive"] .article-breadcrumb,
:root[data-theme="exclusive"] .subscription-section-title,
:root[data-theme="vista"] small,
:root[data-theme="vista"] th,
:root[data-theme="vista"] .text-muted,
:root[data-theme="vista"] .stat-label,
:root[data-theme="vista"] .product-price-note,
:root[data-theme="vista"] .blog-date,
:root[data-theme="vista"] .blog-meta,
:root[data-theme="vista"] .article-meta,
:root[data-theme="vista"] .article-breadcrumb,
:root[data-theme="vista"] .subscription-section-title,
:root[data-theme="seven7"] small,
:root[data-theme="seven7"] th,
:root[data-theme="seven7"] .text-muted,
:root[data-theme="seven7"] .stat-label,
:root[data-theme="seven7"] .product-price-note,
:root[data-theme="seven7"] .blog-date,
:root[data-theme="seven7"] .blog-meta,
:root[data-theme="seven7"] .article-meta,
:root[data-theme="seven7"] .article-breadcrumb,
:root[data-theme="seven7"] .subscription-section-title,
:root[data-theme="dark_elegant"] small,
:root[data-theme="dark_elegant"] th,
:root[data-theme="dark_elegant"] .text-muted,
:root[data-theme="dark_elegant"] .stat-label,
:root[data-theme="dark_elegant"] .product-price-note,
:root[data-theme="dark_elegant"] .blog-date,
:root[data-theme="dark_elegant"] .blog-meta,
:root[data-theme="dark_elegant"] .article-meta,
:root[data-theme="dark_elegant"] .article-breadcrumb,
:root[data-theme="dark_elegant"] .subscription-section-title{color:var(--text3)!important}

:root[data-theme="exclusive"] .nav-logo span,
:root[data-theme="exclusive"] .nav-links a,
:root[data-theme="exclusive"] .mobile-menu a,
:root[data-theme="vista"] .nav-logo span,
:root[data-theme="vista"] .nav-links a,
:root[data-theme="vista"] .mobile-menu a,
:root[data-theme="seven7"] .nav-logo span,
:root[data-theme="seven7"] .nav-links a,
:root[data-theme="seven7"] .mobile-menu a{color:var(--text2)!important}
:root[data-theme="exclusive"] .nav-links a:hover,
:root[data-theme="exclusive"] .mobile-menu a:hover,
:root[data-theme="vista"] .nav-links a:hover,
:root[data-theme="vista"] .mobile-menu a:hover,
:root[data-theme="seven7"] .nav-links a:hover,
:root[data-theme="seven7"] .mobile-menu a:hover{color:var(--blue2)!important}

:root[data-theme="dark_elegant"] .nav-logo span,
:root[data-theme="dark_elegant"] .nav-links a,
:root[data-theme="dark_elegant"] .mobile-menu a{color:var(--text2)!important}
:root[data-theme="dark_elegant"] .nav-links a:hover,
:root[data-theme="dark_elegant"] .mobile-menu a:hover{color:var(--text)!important}

:root[data-theme="exclusive"] .hero,
:root[data-theme="exclusive"] .hero *,
:root[data-theme="exclusive"] .closing-section,
:root[data-theme="exclusive"] .closing-section *,
:root[data-theme="exclusive"] .cta-section,
:root[data-theme="exclusive"] .cta-section *,
:root[data-theme="vista"] .hero,
:root[data-theme="vista"] .hero *,
:root[data-theme="vista"] .closing-section,
:root[data-theme="vista"] .closing-section *,
:root[data-theme="vista"] .cta-section,
:root[data-theme="vista"] .cta-section *,
:root[data-theme="seven7"] .hero,
:root[data-theme="seven7"] .hero *,
:root[data-theme="seven7"] .closing-section,
:root[data-theme="seven7"] .closing-section *,
:root[data-theme="seven7"] .cta-section,
:root[data-theme="seven7"] .cta-section *{color:#FFFFFF!important}
:root[data-theme="exclusive"] .hero-title em,
:root[data-theme="vista"] .hero-title em,
:root[data-theme="seven7"] .hero-title em{color:#FDE68A!important}
:root[data-theme="dark_elegant"] .hero,
:root[data-theme="dark_elegant"] .hero *,
:root[data-theme="dark_elegant"] .closing-section,
:root[data-theme="dark_elegant"] .closing-section *,
:root[data-theme="dark_elegant"] .cta-section,
:root[data-theme="dark_elegant"] .cta-section *{color:var(--text)!important}
:root[data-theme="dark_elegant"] .hero-sub,
:root[data-theme="dark_elegant"] .closing-section p,
:root[data-theme="dark_elegant"] .cta-section p{color:var(--text2)!important}
:root[data-theme="dark_elegant"] .hero-title em{color:var(--blue2)!important}

:root[data-theme="exclusive"] .admin-sidebar,
:root[data-theme="exclusive"] .admin-sidebar *,
:root[data-theme="vista"] .admin-sidebar,
:root[data-theme="vista"] .admin-sidebar *,
:root[data-theme="seven7"] .admin-sidebar,
:root[data-theme="seven7"] .admin-sidebar *,
:root[data-theme="dark_elegant"] .admin-sidebar,
:root[data-theme="dark_elegant"] .admin-sidebar *{color:rgba(226,232,240,.82)!important}
:root[data-theme="exclusive"] .admin-sidebar strong,
:root[data-theme="exclusive"] .admin-tab.active,
:root[data-theme="exclusive"] .admin-tab.active *,
:root[data-theme="exclusive"] .admin-tab:hover,
:root[data-theme="exclusive"] .admin-tab:hover *,
:root[data-theme="vista"] .admin-sidebar strong,
:root[data-theme="vista"] .admin-tab.active,
:root[data-theme="vista"] .admin-tab.active *,
:root[data-theme="vista"] .admin-tab:hover,
:root[data-theme="vista"] .admin-tab:hover *,
:root[data-theme="seven7"] .admin-sidebar strong,
:root[data-theme="seven7"] .admin-tab.active,
:root[data-theme="seven7"] .admin-tab.active *,
:root[data-theme="seven7"] .admin-tab:hover,
:root[data-theme="seven7"] .admin-tab:hover *,
:root[data-theme="dark_elegant"] .admin-sidebar strong,
:root[data-theme="dark_elegant"] .admin-tab.active,
:root[data-theme="dark_elegant"] .admin-tab.active *,
:root[data-theme="dark_elegant"] .admin-tab:hover,
:root[data-theme="dark_elegant"] .admin-tab:hover *{color:#FFFFFF!important}
:root[data-theme="exclusive"] .admin-sidebar span,
:root[data-theme="exclusive"] .admin-sidebar small,
:root[data-theme="exclusive"] .admin-sidebar .sidebar-section,
:root[data-theme="vista"] .admin-sidebar span,
:root[data-theme="vista"] .admin-sidebar small,
:root[data-theme="vista"] .admin-sidebar .sidebar-section,
:root[data-theme="seven7"] .admin-sidebar span,
:root[data-theme="seven7"] .admin-sidebar small,
:root[data-theme="seven7"] .admin-sidebar .sidebar-section,
:root[data-theme="dark_elegant"] .admin-sidebar span,
:root[data-theme="dark_elegant"] .admin-sidebar small,
:root[data-theme="dark_elegant"] .admin-sidebar .sidebar-section{color:rgba(203,213,225,.68)!important}

:root[data-theme="exclusive"] input,
:root[data-theme="exclusive"] textarea,
:root[data-theme="exclusive"] select,
:root[data-theme="vista"] input,
:root[data-theme="vista"] textarea,
:root[data-theme="vista"] select,
:root[data-theme="seven7"] input,
:root[data-theme="seven7"] textarea,
:root[data-theme="seven7"] select{background:#FFFFFF;color:var(--text)!important}
:root[data-theme="dark_elegant"] input,
:root[data-theme="dark_elegant"] textarea,
:root[data-theme="dark_elegant"] select{background:#0F1816;color:var(--text)!important}

:root[data-theme="exclusive"] .btn-primary,
:root[data-theme="exclusive"] .btn-primary *,
:root[data-theme="exclusive"] .btn-sm-primary,
:root[data-theme="exclusive"] .btn-sm-primary *,
:root[data-theme="exclusive"] .nav-cta,
:root[data-theme="exclusive"] .nav-cta *,
:root[data-theme="exclusive"] .btn-success,
:root[data-theme="exclusive"] .btn-danger,
:root[data-theme="exclusive"] .btn-wa,
:root[data-theme="vista"] .btn-primary,
:root[data-theme="vista"] .btn-primary *,
:root[data-theme="vista"] .btn-sm-primary,
:root[data-theme="vista"] .btn-sm-primary *,
:root[data-theme="vista"] .nav-cta,
:root[data-theme="vista"] .nav-cta *,
:root[data-theme="vista"] .btn-success,
:root[data-theme="vista"] .btn-danger,
:root[data-theme="vista"] .btn-wa,
:root[data-theme="seven7"] .btn-primary,
:root[data-theme="seven7"] .btn-primary *,
:root[data-theme="seven7"] .btn-sm-primary,
:root[data-theme="seven7"] .btn-sm-primary *,
:root[data-theme="seven7"] .nav-cta,
:root[data-theme="seven7"] .nav-cta *,
:root[data-theme="seven7"] .btn-success,
:root[data-theme="seven7"] .btn-danger,
:root[data-theme="seven7"] .btn-wa,
:root[data-theme="dark_elegant"] .btn-success,
:root[data-theme="dark_elegant"] .btn-danger,
:root[data-theme="dark_elegant"] .btn-wa{color:#FFFFFF!important}
:root[data-theme="dark_elegant"] .btn-primary,
:root[data-theme="dark_elegant"] .btn-primary *,
:root[data-theme="dark_elegant"] .btn-sm-primary,
:root[data-theme="dark_elegant"] .btn-sm-primary *,
:root[data-theme="dark_elegant"] .nav-cta,
:root[data-theme="dark_elegant"] .nav-cta *{color:#111814!important}

.nav-links .nav-cta,
.nav-links .nav-cta:link,
.nav-links .nav-cta:visited,
.nav-links .nav-cta:hover,
.nav-links .nav-cta:active,
.nav-links .nav-cta *,
.mobile-menu .nav-cta,
.mobile-menu .nav-cta:link,
.mobile-menu .nav-cta:visited,
.mobile-menu .nav-cta:hover,
.mobile-menu .nav-cta:active,
.mobile-menu .nav-cta *{
  color:#FFFFFF!important;
}
:root[data-theme="exclusive"] .btn-outline,
:root[data-theme="exclusive"] .btn-sm-outline,
:root[data-theme="exclusive"] .btn-secondary,
:root[data-theme="vista"] .btn-outline,
:root[data-theme="vista"] .btn-sm-outline,
:root[data-theme="vista"] .btn-secondary,
:root[data-theme="seven7"] .btn-outline,
:root[data-theme="seven7"] .btn-sm-outline,
:root[data-theme="seven7"] .btn-secondary{color:var(--text)!important}
:root[data-theme="dark_elegant"] .btn-outline,
:root[data-theme="dark_elegant"] .btn-sm-outline,
:root[data-theme="dark_elegant"] .btn-secondary{color:var(--text)!important}

:root[data-theme="exclusive"] .hero .trust-item,
:root[data-theme="vista"] .hero .trust-item,
:root[data-theme="seven7"] .hero .trust-item{
  background:#FFFFFF!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
}
:root[data-theme="exclusive"] .hero .trust-item *,
:root[data-theme="vista"] .hero .trust-item *,
:root[data-theme="seven7"] .hero .trust-item *{color:var(--text)!important}

:root[data-theme="dark_elegant"] .hero .trust-item{
  background:#121D1A!important;
  color:var(--text)!important;
  border-color:rgba(201,162,86,.24)!important;
  box-shadow:var(--shadow-sm)!important;
}
:root[data-theme="dark_elegant"] .hero .trust-item *{color:var(--text)!important}
:root[data-theme="exclusive"] .auth-card .logo-center,
:root[data-theme="vista"] .auth-card .logo-center,
:root[data-theme="seven7"] .auth-card .logo-center,
:root[data-theme="dark_elegant"] .auth-card .logo-center{
  background:var(--card)!important;
  border-color:var(--border)!important;
  box-shadow:0 12px 28px rgba(13,38,38,.08)!important;
}
:root[data-theme="exclusive"] .auth-card .logo-center *,
:root[data-theme="vista"] .auth-card .logo-center *,
:root[data-theme="seven7"] .auth-card .logo-center *,
:root[data-theme="dark_elegant"] .auth-card .logo-center *{color:var(--text)!important}
:root .auth-card .logo-center,
:root .admin-brand-mark{
  background:transparent!important;
  border:0!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
:root .auth-card .logo-center{padding:0!important;min-height:0!important}
:root .auth-card .logo-center *,
:root .admin-brand-mark *{color:var(--text)!important}
:root .auth-card .logo-center img,
:root .admin-brand-mark img{filter:drop-shadow(0 2px 4px rgba(13,38,38,.16))}
@media(max-width:900px){
  :root #page-admin .admin-brand{min-height:128px;padding:16px 10% 14px;justify-content:center}
  :root #page-admin .admin-brand-mark{width:100%;height:96px;min-height:96px;padding:10px 0}
  :root #page-admin .admin-brand-mark img{max-width:100%;max-height:82px;width:auto;height:auto}
}
@media(max-width:480px){
  :root #page-admin .admin-brand{min-height:118px;padding:14px 10% 12px}
  :root #page-admin .admin-brand-mark{width:100%;height:90px;min-height:90px;padding:8px 0}
  :root #page-admin .admin-brand-mark img{max-width:100%;max-height:76px}
}

/* Theme: Elegan Soft */
:root[data-theme="soft_elegant"]{
  --bg:       #F7F2EC;
  --bg2:      #FFFDF9;
  --bg3:      #EFE5DC;
  --card:     #FFFDF9;
  --border:   #E2D4C9;
  --border2:  #CDB7AA;
  --blue:     #7B5D68;
  --blue2:    #563C48;
  --blue3:    #F1E3E7;
  --blue4:    #D9C0C9;
  --blue-glow:rgba(123,93,104,.18);
  --indigo:   #846B8A;
  --teal:     #738C7B;
  --teal2:    #587062;
  --teal3:    #A4B8AA;
  --pink:     #C78F82;
  --pink2:    #A86C62;
  --pink3:    #F5E1DB;
  --text:     #2C2423;
  --text2:    #5A4A48;
  --text3:    #887872;
  --white:    #FFFFFF;
  --green:    #5F8A6E;
  --yellow:   #B98243;
  --red:      #B84F5A;
  --shadow-sm:0 3px 12px rgba(86,60,72,.07), inset 0 1px 0 rgba(255,255,255,.74);
  --shadow:   0 16px 38px rgba(86,60,72,.10), 0 6px 16px rgba(123,93,104,.06), inset 0 1px 0 rgba(255,255,255,.72);
  --shadow-lg:0 30px 74px rgba(86,60,72,.16), 0 12px 28px rgba(123,93,104,.08), inset 0 1px 0 rgba(255,255,255,.78);
  --grad:     linear-gradient(135deg,#563C48 0%,#7B5D68 46%,#C78F82 100%);
  --grad2:    linear-gradient(135deg,#4A3340 0%,#6F5260 54%,#A86C62 100%);
  --glow-v:   rgba(199,143,130,.22);
  --bg2-dark:#F7F2EC; --bg3-dark:#EFE5DC; --ink:#2C2423;
  --gold:    #C6A46A; --gold2:#A77F3E;
  --violet:  #846B8A; --violet2:#604A66;
  --cyan:    #738C7B; --cyan2:#A4B8AA;
}
:root[data-theme="soft_elegant"] body{
  background:
    linear-gradient(rgba(123,93,104,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,93,104,.032) 1px,transparent 1px),
    radial-gradient(circle at 16% 0%,rgba(199,143,130,.22),transparent 31%),
    radial-gradient(circle at 86% 12%,rgba(164,184,170,.20),transparent 30%),
    linear-gradient(180deg,#FFFDF9 0%,#F7F2EC 48%,#EFE5DC 100%);
  background-size:44px 44px,44px 44px,auto,auto,auto;
  color:var(--text);
}
:root[data-theme="soft_elegant"] h1,
:root[data-theme="soft_elegant"] h2,
:root[data-theme="soft_elegant"] h3,
:root[data-theme="soft_elegant"] h4,
:root[data-theme="soft_elegant"] .section-title,
:root[data-theme="soft_elegant"] .product-title,
:root[data-theme="soft_elegant"] .blog-title,
:root[data-theme="soft_elegant"] .article-title,
:root[data-theme="soft_elegant"] .admin-page-title,
:root[data-theme="soft_elegant"] .modal h2{color:var(--text)!important}
:root[data-theme="soft_elegant"] p,
:root[data-theme="soft_elegant"] label,
:root[data-theme="soft_elegant"] td,
:root[data-theme="soft_elegant"] .section-sub,
:root[data-theme="soft_elegant"] .product-desc,
:root[data-theme="soft_elegant"] .blog-excerpt,
:root[data-theme="soft_elegant"] .article-content,
:root[data-theme="soft_elegant"] .checkout-form-card,
:root[data-theme="soft_elegant"] .feature-card,
:root[data-theme="soft_elegant"] .product-card,
:root[data-theme="soft_elegant"] .table-card,
:root[data-theme="soft_elegant"] .blog-widget,
:root[data-theme="soft_elegant"] .dash-stat-card,
:root[data-theme="soft_elegant"] .auth-card,
:root[data-theme="soft_elegant"] .modal{color:var(--text2)!important}
:root[data-theme="soft_elegant"] small,
:root[data-theme="soft_elegant"] th,
:root[data-theme="soft_elegant"] .text-muted,
:root[data-theme="soft_elegant"] .stat-label,
:root[data-theme="soft_elegant"] .product-price-note,
:root[data-theme="soft_elegant"] .blog-date,
:root[data-theme="soft_elegant"] .blog-meta,
:root[data-theme="soft_elegant"] .article-meta,
:root[data-theme="soft_elegant"] .article-breadcrumb,
:root[data-theme="soft_elegant"] .subscription-section-title{color:var(--text3)!important}
:root[data-theme="soft_elegant"] nav{
  background:linear-gradient(180deg,rgba(255,253,249,.90),rgba(247,242,236,.76));
  border-bottom-color:rgba(205,183,170,.62);
  box-shadow:0 14px 34px rgba(86,60,72,.08), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
}
:root[data-theme="soft_elegant"] .nav-logo span,
:root[data-theme="soft_elegant"] .nav-links a,
:root[data-theme="soft_elegant"] .mobile-menu a{color:var(--text2)!important}
:root[data-theme="soft_elegant"] .nav-links a:hover,
:root[data-theme="soft_elegant"] .mobile-menu a:hover{
  background:rgba(241,227,231,.82);
  color:var(--blue2)!important;
}
:root[data-theme="soft_elegant"] .mobile-menu,
:root[data-theme="soft_elegant"] .checkout-form-card,
:root[data-theme="soft_elegant"] .feature-card,
:root[data-theme="soft_elegant"] .product-card,
:root[data-theme="soft_elegant"] .table-card,
:root[data-theme="soft_elegant"] .blog-widget,
:root[data-theme="soft_elegant"] .dash-stat-card,
:root[data-theme="soft_elegant"] .auth-card{
  background:linear-gradient(180deg,rgba(255,253,249,.94),rgba(250,246,240,.88));
  border:1px solid rgba(226,212,201,.92);
  box-shadow:var(--shadow);
}
:root[data-theme="soft_elegant"] .product-card:hover,
:root[data-theme="soft_elegant"] .feature-card:hover{
  border-color:rgba(199,143,130,.62);
  box-shadow:var(--shadow-lg);
}
:root[data-theme="soft_elegant"] .hero{
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.13),transparent 28%),
    linear-gradient(145deg,var(--blue) 0%,var(--blue2) 54%,var(--indigo) 100%);
  color:#FFFFFF;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
:root[data-theme="soft_elegant"] .hero-bg{
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 42%),
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.08),transparent 28%),
    radial-gradient(circle at 82% 0%,rgba(255,255,255,.07),transparent 26%);
  opacity:1;
}
:root[data-theme="soft_elegant"] .hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:36px 36px;
  opacity:1;
}
:root[data-theme="soft_elegant"] .hero,
:root[data-theme="soft_elegant"] .hero *,
:root[data-theme="soft_elegant"] .closing-section,
:root[data-theme="soft_elegant"] .closing-section *,
:root[data-theme="soft_elegant"] .cta-section,
:root[data-theme="soft_elegant"] .cta-section *{color:#FFFFFF!important}
:root[data-theme="soft_elegant"] .hero-sub,
:root[data-theme="soft_elegant"] .closing-section p,
:root[data-theme="soft_elegant"] .cta-section p{color:rgba(255,255,255,.84)!important}
:root[data-theme="soft_elegant"] .hero-title em{color:#FFE5B6!important}
:root[data-theme="soft_elegant"] .hero-badge{
  background:rgba(255,253,249,.16);
  border-color:rgba(255,253,249,.30);
  color:#FFFFFF;
}
:root[data-theme="soft_elegant"] .hero-badge span{background:#FFE5B6}
:root[data-theme="soft_elegant"] .hero-stats{
  background:rgba(255,253,249,.14);
  border-color:rgba(255,253,249,.25);
  box-shadow:0 24px 64px rgba(86,60,72,.24), inset 0 1px 0 rgba(255,255,255,.20);
}
:root[data-theme="soft_elegant"] .hero-stat .num{color:#FFFFFF}
:root[data-theme="soft_elegant"] .hero-stat .label{color:rgba(255,255,255,.78)!important}
:root[data-theme="soft_elegant"] .hero .trust-item{
  background:#FFFDF9!important;
  color:var(--text)!important;
  border-color:rgba(226,212,201,.92)!important;
  box-shadow:var(--shadow-sm)!important;
}
:root[data-theme="soft_elegant"] .hero .trust-item *{color:var(--text)!important}
:root[data-theme="soft_elegant"] .closing-section,
:root[data-theme="soft_elegant"] .cta-section{
  background:linear-gradient(135deg,#563C48 0%,#7B5D68 52%,#A86C62 100%)!important;
}
:root[data-theme="soft_elegant"] .btn-primary,
:root[data-theme="soft_elegant"] .nav-cta,
:root[data-theme="soft_elegant"] .btn-sm-primary{
  background:linear-gradient(135deg,#563C48 0%,#7B5D68 48%,#A86C62 100%)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 12px 26px rgba(86,60,72,.18), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
:root[data-theme="soft_elegant"] .btn-primary *,
:root[data-theme="soft_elegant"] .nav-cta *,
:root[data-theme="soft_elegant"] .btn-sm-primary *,
:root[data-theme="soft_elegant"] .btn-success,
:root[data-theme="soft_elegant"] .btn-danger,
:root[data-theme="soft_elegant"] .btn-wa{color:#FFFFFF!important}
:root[data-theme="soft_elegant"] .btn-primary:hover,
:root[data-theme="soft_elegant"] .nav-cta:hover,
:root[data-theme="soft_elegant"] .btn-sm-primary:hover{
  background:linear-gradient(135deg,#4A3340 0%,#6F5260 48%,#9B625A 100%)!important;
}
:root[data-theme="soft_elegant"] .btn-outline,
:root[data-theme="soft_elegant"] .btn-sm-outline,
:root[data-theme="soft_elegant"] .btn-secondary{
  background:rgba(255,253,249,.78)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
:root[data-theme="soft_elegant"] .section-label,
:root[data-theme="soft_elegant"] .badge-verified,
:root[data-theme="soft_elegant"] .sidebar-item.active{
  background:linear-gradient(135deg,rgba(245,225,219,.92),rgba(241,227,231,.88));
  color:var(--blue2)!important;
  border:1px solid rgba(199,143,130,.32);
}
:root[data-theme="soft_elegant"] input,
:root[data-theme="soft_elegant"] textarea,
:root[data-theme="soft_elegant"] select{
  background:#FFFDF9;
  border-color:var(--border);
  color:var(--text)!important;
}
:root[data-theme="soft_elegant"] input:focus,
:root[data-theme="soft_elegant"] textarea:focus,
:root[data-theme="soft_elegant"] select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-glow);
}
:root[data-theme="soft_elegant"] input::placeholder,
:root[data-theme="soft_elegant"] textarea::placeholder{color:#A4938C}
:root[data-theme="soft_elegant"] th{
  background:#FBF6F0;
  color:var(--text3)!important;
  border-bottom-color:var(--border);
}
:root[data-theme="soft_elegant"] td{border-bottom-color:#EEE4DC}
:root[data-theme="soft_elegant"] tr:hover td,
:root[data-theme="soft_elegant"] #page-admin .table-card tbody tr:hover td{background:#FBF6F0}
:root[data-theme="soft_elegant"] .admin-shell,
:root[data-theme="soft_elegant"] #page-admin{
  background:
    radial-gradient(circle at 18% 0%,rgba(199,143,130,.18),transparent 34%),
    radial-gradient(circle at 90% 18%,rgba(164,184,170,.16),transparent 32%),
    linear-gradient(180deg,#FFFDF9 0%,#F7F2EC 100%);
}
:root[data-theme="soft_elegant"] .admin-sidebar{
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(180deg,#4A3340 0%,#563C48 54%,#6F5260 100%);
  background-size:36px 36px,36px 36px,auto;
  border-right-color:rgba(255,253,249,.12);
  box-shadow:8px 0 34px rgba(86,60,72,.20), inset -1px 0 0 rgba(255,255,255,.05);
}
:root[data-theme="soft_elegant"] .admin-sidebar,
:root[data-theme="soft_elegant"] .admin-sidebar *{color:rgba(255,255,255,.80)!important}
:root[data-theme="soft_elegant"] .admin-sidebar strong,
:root[data-theme="soft_elegant"] .admin-sidebar .admin-brand strong,
:root[data-theme="soft_elegant"] .admin-sidebar .admin-user-card strong,
:root[data-theme="soft_elegant"] .admin-tab.active,
:root[data-theme="soft_elegant"] .admin-tab.active *,
:root[data-theme="soft_elegant"] .admin-tab:hover,
:root[data-theme="soft_elegant"] .admin-tab:hover *{color:#FFFFFF!important}
:root[data-theme="soft_elegant"] .admin-sidebar span,
:root[data-theme="soft_elegant"] .admin-sidebar small,
:root[data-theme="soft_elegant"] .admin-sidebar .sidebar-section{color:rgba(255,255,255,.62)!important}
:root[data-theme="soft_elegant"] .admin-brand,
:root[data-theme="soft_elegant"] .admin-user-card{
  background:rgba(255,253,249,.08);
  border-color:rgba(255,253,249,.16);
}
:root[data-theme="soft_elegant"] .admin-tab{
  color:rgba(255,255,255,.74);
  border-color:transparent;
}
:root[data-theme="soft_elegant"] .admin-tab:hover{
  background:rgba(255,253,249,.10);
  color:#FFFFFF;
}
:root[data-theme="soft_elegant"] .admin-tab.active{
  background:linear-gradient(135deg,#C78F82,#A86C62);
  color:#FFFFFF;
  border-color:rgba(255,253,249,.18);
  box-shadow:0 12px 28px rgba(58,38,48,.22);
}
:root[data-theme="soft_elegant"] .admin-tab-icon{
  background:rgba(255,253,249,.09);
  color:inherit;
}
:root[data-theme="soft_elegant"] .admin-tab.active .admin-tab-icon{
  background:rgba(255,253,249,.18);
  color:#FFFFFF;
}
:root[data-theme="soft_elegant"] .admin-main{background:transparent}
:root[data-theme="soft_elegant"] .admin-topbar{
  background:rgba(255,253,249,.88);
  border-bottom:1px solid rgba(226,212,201,.74);
  box-shadow:0 12px 28px rgba(86,60,72,.08);
  backdrop-filter:blur(16px);
}
:root[data-theme="soft_elegant"] .admin-main,
:root[data-theme="soft_elegant"] .admin-topbar,
:root[data-theme="soft_elegant"] #page-admin .card,
:root[data-theme="soft_elegant"] #page-admin .modal{color:var(--text)!important}
:root[data-theme="soft_elegant"] .auth-card .logo-center{
  background:var(--card)!important;
  border-color:var(--border)!important;
  box-shadow:0 12px 28px rgba(86,60,72,.08)!important;
}
:root[data-theme="soft_elegant"] .auth-card .logo-center *{color:var(--text)!important}

/* Premium soft theme guardrails */
:root[data-theme="exclusive"]{
  --bg:#F5F3EC;--bg2:#FFFEFA;--bg3:#ECE7DC;--card:#FFFEFA;
  --border:#DDD5C6;--border2:#C9BCA8;
  --blue:#31473D;--blue2:#20342B;--blue3:#E8EFE8;--blue4:#D2DED2;
  --blue-glow:rgba(49,71,61,.16);--indigo:#52695E;
  --teal:#41675A;--teal2:#314F45;--teal3:#6F8B7E;
  --pink:#B78A58;--pink2:#9A7144;--pink3:#F1E4D4;
  --text:#211E19;--text2:#4E463A;--text3:#82786A;
  --green:#55795F;--yellow:#A5783D;--red:#A64E4E;
  --shadow-sm:0 4px 14px rgba(35,30,22,.06);
  --shadow:0 16px 40px rgba(35,30,22,.10);
  --shadow-lg:0 28px 70px rgba(35,30,22,.16);
  --grad:linear-gradient(135deg,#20342B 0%,#31473D 58%,#7E633D 100%);
  --grad2:linear-gradient(135deg,#1A2B24,#3D584D);
}
:root[data-theme="vista"]{
  --bg:#F0F6FA;--bg2:#FFFFFF;--bg3:#E5EEF5;--card:#FFFFFF;
  --border:#D5E1EA;--border2:#B8CAD8;
  --blue:#356D96;--blue2:#244F72;--blue3:#E6F0F7;--blue4:#CFE0EC;
  --blue-glow:rgba(53,109,150,.15);--indigo:#506E9C;
  --teal:#4C8C93;--teal2:#346C73;--teal3:#7AAEB3;
  --pink:#C49A63;--pink2:#A9793F;--pink3:#F3E8D8;
  --text:#182A36;--text2:#405363;--text3:#748392;
  --green:#4D8069;--yellow:#A87836;--red:#B9575B;
  --shadow-sm:0 4px 14px rgba(24,42,54,.06);
  --shadow:0 16px 38px rgba(24,42,54,.10);
  --shadow-lg:0 28px 68px rgba(24,42,54,.16);
  --grad:linear-gradient(135deg,#244F72 0%,#356D96 54%,#4C8C93 100%);
  --grad2:linear-gradient(135deg,#203F5B,#2F657E);
}
:root[data-theme="seven7"]{
  --bg:#EEF2F7;--bg2:#FFFFFF;--bg3:#E3EAF3;--card:#FFFFFF;
  --border:#D4DDEA;--border2:#B7C5D8;
  --blue:#496E9F;--blue2:#304D78;--blue3:#E7EEF8;--blue4:#CFDBED;
  --blue-glow:rgba(73,110,159,.15);--indigo:#3F5F8C;
  --teal:#5F7F91;--teal2:#456675;--teal3:#86A2B1;
  --pink:#BE965E;--pink2:#9D7644;--pink3:#F2E7D5;
  --text:#172438;--text2:#3E4D62;--text3:#747F91;
  --green:#587C63;--yellow:#AA7B38;--red:#AD5358;
  --shadow-sm:0 4px 14px rgba(23,36,56,.06);
  --shadow:0 16px 40px rgba(23,36,56,.10);
  --shadow-lg:0 28px 70px rgba(23,36,56,.16);
  --grad:linear-gradient(135deg,#304D78 0%,#496E9F 56%,#5F7F91 100%);
  --grad2:linear-gradient(135deg,#263D62,#3F5F8C);
}
:root[data-theme="dark_elegant"]{
  --bg:#101513;--bg2:#171D1A;--bg3:#202722;--card:#171D1A;
  --border:rgba(222,207,174,.16);--border2:rgba(222,207,174,.28);
  --blue:#D9C28B;--blue2:#F0DFAE;--blue3:rgba(217,194,139,.12);--blue4:rgba(217,194,139,.20);
  --blue-glow:rgba(217,194,139,.18);--indigo:#98A995;
  --teal:#678879;--teal2:#4A6A5D;--teal3:#A8BDAF;
  --pink:#C69A78;--pink2:#DDB493;--pink3:rgba(198,154,120,.14);
  --text:#F3EEE4;--text2:#D3CAB9;--text3:#9D9383;
  --green:#8AB79B;--yellow:#D3AD65;--red:#D47A7D;
  --shadow-sm:0 5px 16px rgba(0,0,0,.24);
  --shadow:0 18px 46px rgba(0,0,0,.34);
  --shadow-lg:0 34px 86px rgba(0,0,0,.48);
  --grad:linear-gradient(135deg,#101513 0%,#26352E 58%,#6F5B36 100%);
  --grad2:linear-gradient(135deg,#171D1A,#30443A);
}
:root[data-theme="soft_elegant"]{
  --bg:#F8F4EF;--bg2:#FFFDF9;--bg3:#EFE8E0;--card:#FFFDF9;
  --border:#E2D7CB;--border2:#CABBAA;
  --blue:#735B66;--blue2:#4E3D46;--blue3:#F0E7EA;--blue4:#D9C6CD;
  --blue-glow:rgba(115,91,102,.15);--indigo:#7A6B82;
  --teal:#7A8C7C;--teal2:#607363;--teal3:#A9B8AA;
  --pink:#BD8E80;--pink2:#9E6E63;--pink3:#F3E2DC;
  --text:#292322;--text2:#564A46;--text3:#84766F;
  --green:#6B8B73;--yellow:#A67C46;--red:#A95761;
  --shadow-sm:0 4px 14px rgba(70,52,58,.06);
  --shadow:0 16px 38px rgba(70,52,58,.10);
  --shadow-lg:0 30px 72px rgba(70,52,58,.16);
  --grad:linear-gradient(135deg,#4E3D46 0%,#735B66 56%,#9E6E63 100%);
  --grad2:linear-gradient(135deg,#40323A,#66505B);
}

:root[data-theme="exclusive"] body,
:root[data-theme="vista"] body,
:root[data-theme="seven7"] body,
:root[data-theme="soft_elegant"] body{
  background:
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),
    radial-gradient(circle at 14% 0%,var(--blue3),transparent 30%),
    radial-gradient(circle at 90% 10%,var(--pink3),transparent 28%),
    linear-gradient(180deg,var(--bg2) 0%,var(--bg) 56%,var(--bg3) 100%)!important;
  background-size:46px 46px,46px 46px,auto,auto,auto;
}
:root[data-theme="dark_elegant"] body{
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 16% 0%,rgba(217,194,139,.10),transparent 31%),
    radial-gradient(circle at 90% 12%,rgba(103,136,121,.10),transparent 30%),
    linear-gradient(180deg,#101513 0%,#171D1A 58%,#0D1110 100%)!important;
  background-size:46px 46px,46px 46px,auto,auto,auto;
}
:root[data-theme="exclusive"] nav,
:root[data-theme="vista"] nav,
:root[data-theme="seven7"] nav,
:root[data-theme="soft_elegant"] nav{
  background:rgba(255,253,249,.86)!important;
  border-bottom-color:rgba(120,110,96,.18)!important;
  box-shadow:0 14px 34px rgba(24,31,38,.07)!important;
  backdrop-filter:blur(18px);
}
:root[data-theme="dark_elegant"] nav{
  background:rgba(16,21,19,.88)!important;
  border-bottom-color:rgba(222,207,174,.14)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px);
}
:root[data-theme="exclusive"] .mobile-menu,
:root[data-theme="exclusive"] .checkout-form-card,
:root[data-theme="exclusive"] .feature-card,
:root[data-theme="exclusive"] .product-card,
:root[data-theme="exclusive"] .table-card,
:root[data-theme="exclusive"] .blog-widget,
:root[data-theme="exclusive"] .dash-stat-card,
:root[data-theme="exclusive"] .auth-card,
:root[data-theme="vista"] .mobile-menu,
:root[data-theme="vista"] .checkout-form-card,
:root[data-theme="vista"] .feature-card,
:root[data-theme="vista"] .product-card,
:root[data-theme="vista"] .table-card,
:root[data-theme="vista"] .blog-widget,
:root[data-theme="vista"] .dash-stat-card,
:root[data-theme="vista"] .auth-card,
:root[data-theme="seven7"] .mobile-menu,
:root[data-theme="seven7"] .checkout-form-card,
:root[data-theme="seven7"] .feature-card,
:root[data-theme="seven7"] .product-card,
:root[data-theme="seven7"] .table-card,
:root[data-theme="seven7"] .blog-widget,
:root[data-theme="seven7"] .dash-stat-card,
:root[data-theme="seven7"] .auth-card,
:root[data-theme="soft_elegant"] .mobile-menu,
:root[data-theme="soft_elegant"] .checkout-form-card,
:root[data-theme="soft_elegant"] .feature-card,
:root[data-theme="soft_elegant"] .product-card,
:root[data-theme="soft_elegant"] .table-card,
:root[data-theme="soft_elegant"] .blog-widget,
:root[data-theme="soft_elegant"] .dash-stat-card,
:root[data-theme="soft_elegant"] .auth-card{
  background:rgba(255,253,249,.92)!important;
  border-color:var(--border)!important;
  color:var(--text2)!important;
  box-shadow:var(--shadow)!important;
}
:root[data-theme="dark_elegant"] .mobile-menu,
:root[data-theme="dark_elegant"] .checkout-form-card,
:root[data-theme="dark_elegant"] .feature-card,
:root[data-theme="dark_elegant"] .product-card,
:root[data-theme="dark_elegant"] .table-card,
:root[data-theme="dark_elegant"] .blog-widget,
:root[data-theme="dark_elegant"] .dash-stat-card,
:root[data-theme="dark_elegant"] .auth-card{
  background:#171D1A!important;
  border-color:var(--border)!important;
  color:var(--text2)!important;
  box-shadow:var(--shadow)!important;
}
:root[data-theme="exclusive"] .hero,
:root[data-theme="exclusive"] .closing-section,
:root[data-theme="exclusive"] .cta-section,
:root[data-theme="vista"] .hero,
:root[data-theme="vista"] .closing-section,
:root[data-theme="vista"] .cta-section,
:root[data-theme="seven7"] .hero,
:root[data-theme="seven7"] .closing-section,
:root[data-theme="seven7"] .cta-section,
:root[data-theme="soft_elegant"] .hero,
:root[data-theme="soft_elegant"] .closing-section,
:root[data-theme="soft_elegant"] .cta-section,
:root[data-theme="dark_elegant"] .hero,
:root[data-theme="dark_elegant"] .closing-section,
:root[data-theme="dark_elegant"] .cta-section{
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.10),transparent 28%),
    linear-gradient(135deg,var(--blue2) 0%,var(--blue) 58%,var(--teal2) 100%)!important;
  color:#FFFFFF!important;
}
:root[data-theme="exclusive"] .hero *,
:root[data-theme="exclusive"] .closing-section *,
:root[data-theme="exclusive"] .cta-section *,
:root[data-theme="vista"] .hero *,
:root[data-theme="vista"] .closing-section *,
:root[data-theme="vista"] .cta-section *,
:root[data-theme="seven7"] .hero *,
:root[data-theme="seven7"] .closing-section *,
:root[data-theme="seven7"] .cta-section *,
:root[data-theme="soft_elegant"] .hero *,
:root[data-theme="soft_elegant"] .closing-section *,
:root[data-theme="soft_elegant"] .cta-section *,
:root[data-theme="dark_elegant"] .hero *,
:root[data-theme="dark_elegant"] .closing-section *,
:root[data-theme="dark_elegant"] .cta-section *{color:#FFFFFF!important}
:root[data-theme="exclusive"] .hero-sub,
:root[data-theme="vista"] .hero-sub,
:root[data-theme="seven7"] .hero-sub,
:root[data-theme="soft_elegant"] .hero-sub,
:root[data-theme="dark_elegant"] .hero-sub{color:rgba(255,255,255,.84)!important}

:root[data-theme="exclusive"] .auth-card .logo-center,
:root[data-theme="exclusive"] .admin-brand-mark,
:root[data-theme="vista"] .auth-card .logo-center,
:root[data-theme="vista"] .admin-brand-mark,
:root[data-theme="seven7"] .auth-card .logo-center,
:root[data-theme="seven7"] .admin-brand-mark,
:root[data-theme="dark_elegant"] .auth-card .logo-center,
:root[data-theme="dark_elegant"] .admin-brand-mark,
:root[data-theme="soft_elegant"] .auth-card .logo-center,
:root[data-theme="soft_elegant"] .admin-brand-mark{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
:root[data-theme="exclusive"] .auth-card .logo-center,
:root[data-theme="vista"] .auth-card .logo-center,
:root[data-theme="seven7"] .auth-card .logo-center,
:root[data-theme="dark_elegant"] .auth-card .logo-center,
:root[data-theme="soft_elegant"] .auth-card .logo-center{padding:0!important;min-height:0!important}
:root[data-theme="exclusive"] .nav-logo,
:root[data-theme="vista"] .nav-logo,
:root[data-theme="seven7"] .nav-logo,
:root[data-theme="dark_elegant"] .nav-logo,
:root[data-theme="soft_elegant"] .nav-logo{background:transparent!important;box-shadow:none!important}
:root[data-theme="exclusive"] .auth-card .logo-center *,
:root[data-theme="vista"] .auth-card .logo-center *,
:root[data-theme="seven7"] .auth-card .logo-center *,
:root[data-theme="soft_elegant"] .auth-card .logo-center *{color:var(--text)!important}
:root[data-theme="dark_elegant"] .auth-card .logo-center *{color:var(--text)!important}
:root[data-theme="exclusive"] .admin-sidebar .admin-brand-mark *,
:root[data-theme="vista"] .admin-sidebar .admin-brand-mark *,
:root[data-theme="seven7"] .admin-sidebar .admin-brand-mark *,
:root[data-theme="soft_elegant"] .admin-sidebar .admin-brand-mark *,
:root[data-theme="dark_elegant"] .admin-sidebar .admin-brand-mark *{color:#FFFFFF!important}
:root[data-theme="exclusive"] .auth-card .logo-center img,
:root[data-theme="exclusive"] .admin-brand-mark img,
:root[data-theme="vista"] .auth-card .logo-center img,
:root[data-theme="vista"] .admin-brand-mark img,
:root[data-theme="seven7"] .auth-card .logo-center img,
:root[data-theme="seven7"] .admin-brand-mark img,
:root[data-theme="soft_elegant"] .auth-card .logo-center img,
:root[data-theme="soft_elegant"] .admin-brand-mark img{filter:drop-shadow(0 2px 5px rgba(24,31,38,.14))!important}
:root[data-theme="dark_elegant"] .auth-card .logo-center img,
:root[data-theme="dark_elegant"] .admin-brand-mark img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.34))!important}

.theme-option-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px;
}
.theme-option-card{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  min-height:132px;padding:14px;border:1.5px solid rgba(120,135,150,.24);
  border-radius:14px;cursor:pointer;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.07);
  transition:.18s ease;background:#FFFFFF;
}
.theme-option-card::before{
  content:"";position:absolute;inset:0;opacity:.9;pointer-events:none;
}
.theme-option-card:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(15,23,42,.11)}
.theme-option-card.is-active{
  border-color:rgba(35,70,70,.52);box-shadow:0 0 0 3px rgba(35,70,70,.10),0 18px 42px rgba(15,23,42,.12);
}
.theme-option-card input{
  position:relative;z-index:2;margin-top:4px;width:16px;height:16px;accent-color:#31473D;
}
.theme-option-copy{position:relative;z-index:2;display:grid;gap:5px}
.theme-option-copy strong{display:block;font-size:14px;font-weight:900;letter-spacing:0;color:#182A36}
.theme-option-copy small{display:block;font-size:12px;line-height:1.55;color:#566778}
.theme-option-preview{
  position:relative;z-index:2;grid-column:1/-1;height:54px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
.theme-option-top{position:absolute;left:0;right:0;top:0;height:13px;background:rgba(255,255,255,.75)}
.theme-option-side{position:absolute;left:0;top:13px;bottom:0;width:34%;background:rgba(20,32,46,.78)}
.theme-option-lines{position:absolute;left:40%;right:8%;top:22px;display:grid;gap:5px}
.theme-option-lines i{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.72)}
.theme-option-lines i:nth-child(2){width:78%}
.theme-option-lines i:nth-child(3){width:54%}
.theme-option-pill{position:absolute;right:8px;top:6px;width:34px;height:7px;border-radius:99px;background:rgba(255,255,255,.70)}
.theme-option-original{
  background:linear-gradient(145deg,#FFFFFF 0%,#EEF5F5 58%,#E2EDED 100%);
}
.theme-option-original::before{
  background:radial-gradient(circle at 14% 0%,rgba(35,70,70,.12),transparent 38%);
}
.theme-option-original .theme-option-preview{background:linear-gradient(135deg,#234646,#3A7575)}
.theme-option-original .theme-option-side{background:#234646}
.theme-option-original .theme-option-pill{background:#FF877E}
.theme-option-exclusive{
  background:linear-gradient(145deg,#FFFEFA 0%,#F5F3EC 55%,#ECE7DC 100%);
  border-color:#DDD5C6;
}
.theme-option-exclusive::before{
  background:radial-gradient(circle at 88% 0%,rgba(183,138,88,.26),transparent 36%);
}
.theme-option-exclusive .theme-option-preview{background:linear-gradient(135deg,#20342B,#31473D 62%,#7E633D)}
.theme-option-exclusive .theme-option-side{background:#20342B}
.theme-option-exclusive .theme-option-pill{background:#B78A58}
.theme-option-vista{
  background:linear-gradient(145deg,#FFFFFF 0%,#F0F6FA 56%,#E5EEF5 100%);
  border-color:#D5E1EA;
}
.theme-option-vista::before{
  background:radial-gradient(circle at 16% 0%,rgba(76,140,147,.20),transparent 34%);
}
.theme-option-vista .theme-option-preview{background:linear-gradient(135deg,#244F72,#356D96 58%,#4C8C93)}
.theme-option-vista .theme-option-side{background:#244F72}
.theme-option-vista .theme-option-pill{background:#C49A63}
.theme-option-seven7{
  background:linear-gradient(145deg,#FFFFFF 0%,#EEF2F7 56%,#E3EAF3 100%);
  border-color:#D4DDEA;
}
.theme-option-seven7::before{
  background:radial-gradient(circle at 12% 0%,rgba(73,110,159,.18),transparent 35%);
}
.theme-option-seven7 .theme-option-preview{background:linear-gradient(135deg,#304D78,#496E9F 58%,#5F7F91)}
.theme-option-seven7 .theme-option-side{background:#304D78}
.theme-option-seven7 .theme-option-pill{background:#BE965E}
.theme-option-dark_elegant{
  background:linear-gradient(145deg,#101513 0%,#171D1A 54%,#202722 100%);
  border-color:rgba(222,207,174,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.20);
}
.theme-option-dark_elegant::before{
  background:radial-gradient(circle at 90% 0%,rgba(217,194,139,.18),transparent 38%);
}
.theme-option-dark_elegant .theme-option-copy strong{color:#F3EEE4}
.theme-option-dark_elegant .theme-option-copy small{color:#D3CAB9}
.theme-option-dark_elegant .theme-option-preview{background:linear-gradient(135deg,#101513,#26352E 58%,#6F5B36)}
.theme-option-dark_elegant .theme-option-side{background:#101513}
.theme-option-dark_elegant .theme-option-pill{background:#D9C28B}
.theme-option-soft_elegant{
  background:linear-gradient(145deg,#FFFDF9 0%,#F8F4EF 54%,#EFE8E0 100%);
  border-color:#E2D7CB;
}
.theme-option-soft_elegant::before{
  background:radial-gradient(circle at 88% 0%,rgba(189,142,128,.24),transparent 36%);
}
.theme-option-soft_elegant .theme-option-preview{background:linear-gradient(135deg,#4E3D46,#735B66 58%,#9E6E63)}
.theme-option-soft_elegant .theme-option-side{background:#4E3D46}
.theme-option-soft_elegant .theme-option-pill{background:#A9B8AA}

/* Theme readability polish for hero, CTA, stats, and footer */
:root[data-theme="exclusive"]{
  --theme-cta-fill:#20342B;
  --theme-cta-hover:#17281F;
  --theme-cta-text:#FFFFFF;
  --theme-cta-outline-bg:rgba(255,255,255,.94);
  --theme-cta-outline-text:#20342B;
  --theme-cta-outline-border:rgba(255,255,255,.70);
  --theme-stat-bg:rgba(32,52,43,.42);
  --theme-stat-border:rgba(255,255,255,.20);
  --theme-stat-accent:#F4D7A4;
  --theme-footer-bg:#13241D;
  --theme-grid-line:rgba(255,247,226,.145);
  --theme-grid-major:rgba(244,215,164,.20);
  --theme-grid-glow:rgba(244,215,164,.18);
  --theme-sidebar-start:#082B25;
  --theme-sidebar-end:#0B3B35;
  --theme-sidebar-line-x:rgba(255,255,255,.045);
  --theme-sidebar-line-y:rgba(255,255,255,.04);
  --theme-sidebar-glow-a:rgba(229,183,91,.24);
  --theme-sidebar-glow-b:rgba(255,255,255,.10);
}
:root[data-theme="vista"]{
  --theme-cta-fill:#1D4F6D;
  --theme-cta-hover:#153E57;
  --theme-cta-text:#FFFFFF;
  --theme-cta-outline-bg:rgba(255,255,255,.94);
  --theme-cta-outline-text:#173D55;
  --theme-cta-outline-border:rgba(255,255,255,.74);
  --theme-stat-bg:rgba(20,61,86,.38);
  --theme-stat-border:rgba(255,255,255,.22);
  --theme-stat-accent:#F1D1A0;
  --theme-footer-bg:#102C3E;
  --theme-grid-line:rgba(255,255,255,.18);
  --theme-grid-major:rgba(241,209,160,.18);
  --theme-grid-glow:rgba(165,220,232,.20);
  --theme-sidebar-start:#123C5A;
  --theme-sidebar-end:#1A5677;
  --theme-sidebar-line-x:rgba(255,255,255,.045);
  --theme-sidebar-line-y:rgba(255,255,255,.04);
  --theme-sidebar-glow-a:rgba(76,140,147,.30);
  --theme-sidebar-glow-b:rgba(26,115,232,.32);
}
:root[data-theme="seven7"]{
  --theme-cta-fill:#263F65;
  --theme-cta-hover:#1D3150;
  --theme-cta-text:#FFFFFF;
  --theme-cta-outline-bg:rgba(255,255,255,.94);
  --theme-cta-outline-text:#263F65;
  --theme-cta-outline-border:rgba(255,255,255,.74);
  --theme-stat-bg:rgba(28,48,78,.40);
  --theme-stat-border:rgba(255,255,255,.22);
  --theme-stat-accent:#EAC793;
  --theme-footer-bg:#111F36;
  --theme-grid-line:rgba(255,255,255,.17);
  --theme-grid-major:rgba(234,199,147,.18);
  --theme-grid-glow:rgba(162,195,231,.18);
  --theme-sidebar-start:#1C3155;
  --theme-sidebar-end:#294A73;
  --theme-sidebar-line-x:rgba(255,255,255,.045);
  --theme-sidebar-line-y:rgba(255,255,255,.04);
  --theme-sidebar-glow-a:rgba(95,127,145,.28);
  --theme-sidebar-glow-b:rgba(73,110,159,.34);
}
:root[data-theme="soft_elegant"]{
  --theme-cta-fill:#4E3D46;
  --theme-cta-hover:#3F3038;
  --theme-cta-text:#FFFFFF;
  --theme-cta-outline-bg:rgba(255,255,255,.95);
  --theme-cta-outline-text:#4E3D46;
  --theme-cta-outline-border:rgba(255,255,255,.74);
  --theme-stat-bg:rgba(78,61,70,.40);
  --theme-stat-border:rgba(255,255,255,.22);
  --theme-stat-accent:#F0D0C4;
  --theme-footer-bg:#2F252A;
  --theme-grid-line:rgba(255,248,242,.16);
  --theme-grid-major:rgba(240,208,196,.20);
  --theme-grid-glow:rgba(240,208,196,.18);
  --theme-sidebar-start:#4A3340;
  --theme-sidebar-end:#6F5260;
  --theme-sidebar-line-x:rgba(255,255,255,.04);
  --theme-sidebar-line-y:rgba(255,255,255,.035);
  --theme-sidebar-glow-a:rgba(189,142,128,.26);
  --theme-sidebar-glow-b:rgba(164,184,170,.16);
}
:root[data-theme="dark_elegant"]{
  --theme-cta-fill:#D9C28B;
  --theme-cta-hover:#E5CEA0;
  --theme-cta-text:#111713;
  --theme-cta-outline-bg:rgba(255,255,255,.12);
  --theme-cta-outline-text:#F7F0E3;
  --theme-cta-outline-border:rgba(217,194,139,.52);
  --theme-stat-bg:rgba(255,255,255,.08);
  --theme-stat-border:rgba(217,194,139,.22);
  --theme-stat-accent:#E7D2A1;
  --theme-footer-bg:#0D1210;
  --theme-grid-line:rgba(255,246,222,.105);
  --theme-grid-major:rgba(231,210,161,.16);
  --theme-grid-glow:rgba(231,210,161,.14);
  --theme-sidebar-start:#101513;
  --theme-sidebar-end:#1B231F;
  --theme-sidebar-line-x:rgba(255,255,255,.035);
  --theme-sidebar-line-y:rgba(255,255,255,.032);
  --theme-sidebar-glow-a:rgba(217,194,139,.18);
  --theme-sidebar-glow-b:rgba(77,128,104,.16);
}

:root[data-theme="exclusive"] .hero-grid,
:root[data-theme="vista"] .hero-grid,
:root[data-theme="seven7"] .hero-grid,
:root[data-theme="soft_elegant"] .hero-grid,
:root[data-theme="dark_elegant"] .hero-grid{
  background-image:
    linear-gradient(var(--theme-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--theme-grid-line) 1px,transparent 1px),
    linear-gradient(var(--theme-grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--theme-grid-major) 1px,transparent 1px)!important;
  background-size:44px 44px,44px 44px,176px 176px,176px 176px!important;
  opacity:1!important;
  filter:drop-shadow(0 0 10px var(--theme-grid-glow));
}
:root[data-theme="exclusive"] .hero-grid::before,
:root[data-theme="vista"] .hero-grid::before,
:root[data-theme="seven7"] .hero-grid::before,
:root[data-theme="soft_elegant"] .hero-grid::before,
:root[data-theme="dark_elegant"] .hero-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%,var(--theme-grid-glow),transparent 18%),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.13),transparent 16%),
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,.13) 46%,transparent 58%);
  opacity:.72;
  pointer-events:none;
  mix-blend-mode:screen;
}

:root[data-theme="exclusive"] .admin-sidebar,
:root[data-theme="vista"] .admin-sidebar,
:root[data-theme="seven7"] .admin-sidebar,
:root[data-theme="soft_elegant"] .admin-sidebar,
:root[data-theme="dark_elegant"] .admin-sidebar{
  background:
    linear-gradient(90deg,var(--theme-sidebar-line-x) 1px,transparent 1px),
    linear-gradient(180deg,var(--theme-sidebar-line-y) 1px,transparent 1px),
    radial-gradient(circle at 18% 12%,var(--theme-sidebar-glow-a),transparent 30%),
    radial-gradient(circle at 86% 4%,var(--theme-sidebar-glow-b),transparent 26%),
    radial-gradient(circle at 70% 88%,rgba(245,158,11,.10),transparent 32%),
    linear-gradient(180deg,var(--theme-sidebar-start) 0%,var(--theme-sidebar-end) 58%,rgba(10,16,32,.96) 100%)!important;
  background-size:44px 44px,44px 44px,100% 100%,100% 100%,100% 100%,auto!important;
  background-position:center top!important;
}
:root[data-theme="exclusive"] .sidebar,
:root[data-theme="vista"] .sidebar,
:root[data-theme="seven7"] .sidebar,
:root[data-theme="soft_elegant"] .sidebar,
:root[data-theme="dark_elegant"] .sidebar{
  background-image:
    linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(15,23,42,.03) 1px,transparent 1px)!important;
  background-size:44px 44px,44px 44px!important;
  background-position:center top!important;
}

:root[data-theme="exclusive"] .hero .btn-primary,
:root[data-theme="exclusive"] .closing-section .btn-primary,
:root[data-theme="exclusive"] .cta-section .btn-primary,
:root[data-theme="vista"] .hero .btn-primary,
:root[data-theme="vista"] .closing-section .btn-primary,
:root[data-theme="vista"] .cta-section .btn-primary,
:root[data-theme="seven7"] .hero .btn-primary,
:root[data-theme="seven7"] .closing-section .btn-primary,
:root[data-theme="seven7"] .cta-section .btn-primary,
:root[data-theme="soft_elegant"] .hero .btn-primary,
:root[data-theme="soft_elegant"] .closing-section .btn-primary,
:root[data-theme="soft_elegant"] .cta-section .btn-primary,
:root[data-theme="dark_elegant"] .hero .btn-primary,
:root[data-theme="dark_elegant"] .closing-section .btn-primary,
:root[data-theme="dark_elegant"] .cta-section .btn-primary{
  background:var(--theme-cta-fill)!important;
  color:var(--theme-cta-text)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18)!important;
  text-shadow:none!important;
}
:root[data-theme="exclusive"] .hero .btn-primary:hover,
:root[data-theme="exclusive"] .closing-section .btn-primary:hover,
:root[data-theme="exclusive"] .cta-section .btn-primary:hover,
:root[data-theme="vista"] .hero .btn-primary:hover,
:root[data-theme="vista"] .closing-section .btn-primary:hover,
:root[data-theme="vista"] .cta-section .btn-primary:hover,
:root[data-theme="seven7"] .hero .btn-primary:hover,
:root[data-theme="seven7"] .closing-section .btn-primary:hover,
:root[data-theme="seven7"] .cta-section .btn-primary:hover,
:root[data-theme="soft_elegant"] .hero .btn-primary:hover,
:root[data-theme="soft_elegant"] .closing-section .btn-primary:hover,
:root[data-theme="soft_elegant"] .cta-section .btn-primary:hover,
:root[data-theme="dark_elegant"] .hero .btn-primary:hover,
:root[data-theme="dark_elegant"] .closing-section .btn-primary:hover,
:root[data-theme="dark_elegant"] .cta-section .btn-primary:hover{
  background:var(--theme-cta-hover)!important;
  transform:translateY(-1px);
}

:root[data-theme="exclusive"] .hero .btn-outline,
:root[data-theme="exclusive"] .closing-section .btn-outline,
:root[data-theme="exclusive"] .cta-section .btn-outline,
:root[data-theme="vista"] .hero .btn-outline,
:root[data-theme="vista"] .closing-section .btn-outline,
:root[data-theme="vista"] .cta-section .btn-outline,
:root[data-theme="seven7"] .hero .btn-outline,
:root[data-theme="seven7"] .closing-section .btn-outline,
:root[data-theme="seven7"] .cta-section .btn-outline,
:root[data-theme="soft_elegant"] .hero .btn-outline,
:root[data-theme="soft_elegant"] .closing-section .btn-outline,
:root[data-theme="soft_elegant"] .cta-section .btn-outline,
:root[data-theme="dark_elegant"] .hero .btn-outline,
:root[data-theme="dark_elegant"] .closing-section .btn-outline,
:root[data-theme="dark_elegant"] .cta-section .btn-outline{
  background:var(--theme-cta-outline-bg)!important;
  color:var(--theme-cta-outline-text)!important;
  border:1px solid var(--theme-cta-outline-border)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.35)!important;
  text-shadow:none!important;
}
:root[data-theme="exclusive"] .hero .btn-primary *,
:root[data-theme="exclusive"] .hero .btn-outline *,
:root[data-theme="exclusive"] .closing-section .btn-primary *,
:root[data-theme="exclusive"] .closing-section .btn-outline *,
:root[data-theme="exclusive"] .cta-section .btn-primary *,
:root[data-theme="exclusive"] .cta-section .btn-outline *,
:root[data-theme="vista"] .hero .btn-primary *,
:root[data-theme="vista"] .hero .btn-outline *,
:root[data-theme="vista"] .closing-section .btn-primary *,
:root[data-theme="vista"] .closing-section .btn-outline *,
:root[data-theme="vista"] .cta-section .btn-primary *,
:root[data-theme="vista"] .cta-section .btn-outline *,
:root[data-theme="seven7"] .hero .btn-primary *,
:root[data-theme="seven7"] .hero .btn-outline *,
:root[data-theme="seven7"] .closing-section .btn-primary *,
:root[data-theme="seven7"] .closing-section .btn-outline *,
:root[data-theme="seven7"] .cta-section .btn-primary *,
:root[data-theme="seven7"] .cta-section .btn-outline *,
:root[data-theme="soft_elegant"] .hero .btn-primary *,
:root[data-theme="soft_elegant"] .hero .btn-outline *,
:root[data-theme="soft_elegant"] .closing-section .btn-primary *,
:root[data-theme="soft_elegant"] .closing-section .btn-outline *,
:root[data-theme="soft_elegant"] .cta-section .btn-primary *,
:root[data-theme="soft_elegant"] .cta-section .btn-outline *,
:root[data-theme="dark_elegant"] .hero .btn-primary *,
:root[data-theme="dark_elegant"] .hero .btn-outline *,
:root[data-theme="dark_elegant"] .closing-section .btn-primary *,
:root[data-theme="dark_elegant"] .closing-section .btn-outline *,
:root[data-theme="dark_elegant"] .cta-section .btn-primary *,
:root[data-theme="dark_elegant"] .cta-section .btn-outline *{
  color:inherit!important;
  stroke:currentColor!important;
}

:root[data-theme="exclusive"] .hero .hero-stats,
:root[data-theme="vista"] .hero .hero-stats,
:root[data-theme="seven7"] .hero .hero-stats,
:root[data-theme="soft_elegant"] .hero .hero-stats,
:root[data-theme="dark_elegant"] .hero .hero-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0!important;
  width:min(720px,100%);
  margin:32px auto 0!important;
  padding:12px 14px!important;
  border:1px solid var(--theme-stat-border)!important;
  border-radius:18px;
  background:linear-gradient(135deg,var(--theme-stat-bg),rgba(255,255,255,.07))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
}
:root[data-theme="exclusive"] .hero .stat,
:root[data-theme="vista"] .hero .stat,
:root[data-theme="seven7"] .hero .stat,
:root[data-theme="soft_elegant"] .hero .stat,
:root[data-theme="dark_elegant"] .hero .stat{
  padding:7px 14px;
  border-right:1px solid var(--theme-stat-border);
}
:root[data-theme="exclusive"] .hero .stat:last-child,
:root[data-theme="vista"] .hero .stat:last-child,
:root[data-theme="seven7"] .hero .stat:last-child,
:root[data-theme="soft_elegant"] .hero .stat:last-child,
:root[data-theme="dark_elegant"] .hero .stat:last-child{border-right:0}
:root[data-theme="exclusive"] .hero .stat-num,
:root[data-theme="vista"] .hero .stat-num,
:root[data-theme="seven7"] .hero .stat-num,
:root[data-theme="soft_elegant"] .hero .stat-num,
:root[data-theme="dark_elegant"] .hero .stat-num{
  color:var(--theme-stat-accent)!important;
  font-size:1.32rem;
  line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}
:root[data-theme="exclusive"] .hero .stat-label,
:root[data-theme="vista"] .hero .stat-label,
:root[data-theme="seven7"] .hero .stat-label,
:root[data-theme="soft_elegant"] .hero .stat-label,
:root[data-theme="dark_elegant"] .hero .stat-label{
  color:rgba(255,255,255,.82)!important;
  font-weight:650;
}

:root[data-theme="exclusive"] .closing-box .section-label,
:root[data-theme="vista"] .closing-box .section-label,
:root[data-theme="seven7"] .closing-box .section-label,
:root[data-theme="soft_elegant"] .closing-box .section-label,
:root[data-theme="dark_elegant"] .closing-box .section-label{
  background:rgba(255,255,255,.16)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.22);
  text-shadow:0 1px 8px rgba(0,0,0,.26);
}
:root[data-theme="exclusive"] .closing-box h2,
:root[data-theme="exclusive"] .cta-section h2,
:root[data-theme="vista"] .closing-box h2,
:root[data-theme="vista"] .cta-section h2,
:root[data-theme="seven7"] .closing-box h2,
:root[data-theme="seven7"] .cta-section h2,
:root[data-theme="soft_elegant"] .closing-box h2,
:root[data-theme="soft_elegant"] .cta-section h2,
:root[data-theme="dark_elegant"] .closing-box h2,
:root[data-theme="dark_elegant"] .cta-section h2{
  color:#FFFFFF!important;
  text-shadow:0 3px 18px rgba(0,0,0,.32);
}
:root[data-theme="exclusive"] .closing-box p,
:root[data-theme="exclusive"] .cta-section p,
:root[data-theme="vista"] .closing-box p,
:root[data-theme="vista"] .cta-section p,
:root[data-theme="seven7"] .closing-box p,
:root[data-theme="seven7"] .cta-section p,
:root[data-theme="soft_elegant"] .closing-box p,
:root[data-theme="soft_elegant"] .cta-section p,
:root[data-theme="dark_elegant"] .closing-box p,
:root[data-theme="dark_elegant"] .cta-section p{
  color:rgba(255,255,255,.88)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.26);
}

:root[data-theme="exclusive"] footer,
:root[data-theme="vista"] footer,
:root[data-theme="seven7"] footer,
:root[data-theme="soft_elegant"] footer,
:root[data-theme="dark_elegant"] footer{
  background:var(--theme-footer-bg)!important;
}
:root[data-theme="exclusive"] footer p,
:root[data-theme="exclusive"] footer .footer-bottom p,
:root[data-theme="vista"] footer p,
:root[data-theme="vista"] footer .footer-bottom p,
:root[data-theme="seven7"] footer p,
:root[data-theme="seven7"] footer .footer-bottom p,
:root[data-theme="soft_elegant"] footer p,
:root[data-theme="soft_elegant"] footer .footer-bottom p,
:root[data-theme="dark_elegant"] footer p,
:root[data-theme="dark_elegant"] footer .footer-bottom p{
  color:rgba(255,255,255,.72)!important;
}
:root[data-theme="exclusive"] footer .footer-col a,
:root[data-theme="vista"] footer .footer-col a,
:root[data-theme="seven7"] footer .footer-col a,
:root[data-theme="soft_elegant"] footer .footer-col a,
:root[data-theme="dark_elegant"] footer .footer-col a{
  color:rgba(255,255,255,.76)!important;
}

@media(max-width:640px){
  :root[data-theme="exclusive"] .hero .hero-stats,
  :root[data-theme="vista"] .hero .hero-stats,
  :root[data-theme="seven7"] .hero .hero-stats,
  :root[data-theme="soft_elegant"] .hero .hero-stats,
  :root[data-theme="dark_elegant"] .hero .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:10px!important;
  }
  :root[data-theme="exclusive"] .hero .stat,
  :root[data-theme="vista"] .hero .stat,
  :root[data-theme="seven7"] .hero .stat,
  :root[data-theme="soft_elegant"] .hero .stat,
  :root[data-theme="dark_elegant"] .hero .stat{border-right:0}
  :root[data-theme="exclusive"] .hero .stat:nth-child(odd),
  :root[data-theme="vista"] .hero .stat:nth-child(odd),
  :root[data-theme="seven7"] .hero .stat:nth-child(odd),
  :root[data-theme="soft_elegant"] .hero .stat:nth-child(odd),
  :root[data-theme="dark_elegant"] .hero .stat:nth-child(odd){border-right:1px solid var(--theme-stat-border)}
  :root[data-theme="exclusive"] .hero .stat:nth-child(-n+2),
  :root[data-theme="vista"] .hero .stat:nth-child(-n+2),
  :root[data-theme="seven7"] .hero .stat:nth-child(-n+2),
  :root[data-theme="soft_elegant"] .hero .stat:nth-child(-n+2),
  :root[data-theme="dark_elegant"] .hero .stat:nth-child(-n+2){border-bottom:1px solid var(--theme-stat-border)}
}

.wa-agent-modal .wa-agent-head .wa-agent-profile h3,
.wa-agent-modal .wa-agent-head .wa-agent-profile p,
.wa-agent-modal .wa-agent-head .wa-agent-profile p span:not(.wa-agent-online-dot){
  color:#FFFFFF!important;
}
.wa-agent-modal .wa-agent-head .wa-agent-profile p{
  opacity:.84;
}

#waLeadModal .wa-agent-modal{
  padding:0!important;
  overflow:hidden;
}
@media(max-width:520px){
  #waLeadModal{
    padding:0!important;
    align-items:flex-end;
  }
  #waLeadModal .wa-agent-modal{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    border-radius:8px 8px 0 0!important;
    max-height:92vh!important;
    display:flex;
    flex-direction:column;
  }
  #waLeadModal .wa-agent-head,
  #waLeadModal .wa-agent-input{
    flex:0 0 auto;
  }
  #waLeadModal .wa-agent-chat{
    flex:1 1 auto;
    height:auto!important;
    min-height:360px;
    max-height:none;
  }
}
@media(max-width:380px){
  #waLeadModal .wa-agent-chat{min-height:330px}
  #waLeadModal .wa-agent-input{gap:7px;padding:8px}
}