/* rubbrief storefront — true-black modern skin + motion (dark theme only; light theme untouched) */
:root:not([data-theme="light"]){
  --bg-body:#000;--bg-header:rgba(0,0,0,0.72);--bg-nav:#0B0B0D;--bg-card:#0B0B0D;--bg-input:#0E0E11;--bg-card-hover:#121215;--bg-glass:rgba(10,10,12,0.72);
  --text-white:#FFFFFF;--text-gray:#BAC0CA;--text-dim:#8D94A1;
  --border-subtle:rgba(255,255,255,0.08);--border-hover:rgba(216,180,254,0.38);--border-focus:rgba(216,180,254,0.6);
  --rb-glow:167,139,250;--rb-pink:216,180,254;
}
:root:not([data-theme="light"]) body{background:#000;color:#fff;}

/* header: blurred black bar, outlined pill nav */
:root:not([data-theme="light"]) .site-header{background:rgba(0,0,0,0.72)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,0.07)!important;}
:root:not([data-theme="light"]) .nav-bar{background:transparent!important;border:none!important;gap:6px;}
:root:not([data-theme="light"]) .nav-bar a{border:1px solid rgba(255,255,255,0.14);border-radius:999px!important;color:#E7E9EE!important;transition:background .25s,border-color .25s,transform .2s;}
:root:not([data-theme="light"]) .nav-bar a:hover{background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.4);transform:translateY(-1px);}
:root:not([data-theme="light"]) .nav-bar a.active{background:linear-gradient(135deg,rgba(var(--rb-glow),0.55),rgba(var(--rb-pink),0.22))!important;border-color:rgba(var(--rb-pink),0.55);color:#fff!important;box-shadow:0 10px 26px -12px rgba(var(--rb-glow),0.9);}
:root:not([data-theme="light"]) .search-box,:root:not([data-theme="light"]) .icon-btn{background:#0B0B0D!important;border:1px solid rgba(255,255,255,0.12)!important;border-radius:999px!important;}
:root:not([data-theme="light"]) .btn-login{border:1px solid rgba(255,255,255,0.3)!important;border-radius:999px!important;background:transparent!important;color:#fff!important;}
:root:not([data-theme="light"]) .btn-register,:root:not([data-theme="light"]) .auth-submit,:root:not([data-theme="light"]) .btn-buy{background:linear-gradient(135deg,#C4B5FD,#E9D5FF)!important;color:#160E22!important;border:none!important;border-radius:999px!important;box-shadow:0 10px 26px -12px rgba(var(--rb-glow),0.9)!important;transition:transform .2s,box-shadow .25s!important;}
:root:not([data-theme="light"]) .btn-register:hover,:root:not([data-theme="light"]) .auth-submit:hover,:root:not([data-theme="light"]) .btn-buy:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(var(--rb-glow),1)!important;}
:root:not([data-theme="light"]) .user-dropdown{background:#0B0B0D!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:18px!important;box-shadow:0 24px 50px -20px rgba(0,0,0,0.95)!important;}

/* hero */
:root:not([data-theme="light"]) .page-hero{background:#000!important;}
:root:not([data-theme="light"]) .page-hero-bg{opacity:.55;}
:root:not([data-theme="light"]) .page-hero h1{letter-spacing:-0.025em;font-weight:700;}

/* filter pills */
:root:not([data-theme="light"]) .filter-btn{background:transparent!important;border:1px solid rgba(255,255,255,0.25)!important;border-radius:999px!important;color:#F1F1F4!important;transition:background .25s,border-color .25s,transform .2s;}
:root:not([data-theme="light"]) .filter-btn:hover{border-color:rgba(255,255,255,0.6)!important;transform:translateY(-1px);}
:root:not([data-theme="light"]) .filter-btn.active{background:linear-gradient(135deg,rgba(var(--rb-glow),0.55),rgba(var(--rb-pink),0.22))!important;border-color:rgba(var(--rb-pink),0.55)!important;color:#fff!important;}

/* product / content cards: black, rounded, glow from below */
:root:not([data-theme="light"]) .item-card,:root:not([data-theme="light"]) .auth-card{position:relative;background:linear-gradient(180deg,#0E0E11,#07070A)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:24px!important;overflow:hidden;box-shadow:0 26px 50px -30px rgba(0,0,0,0.95)!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s!important;}
:root:not([data-theme="light"]) .item-card::after{content:"";position:absolute;left:8%;right:8%;bottom:-70px;height:140px;background:radial-gradient(ellipse at center,rgba(var(--rb-glow),0.22),transparent 70%);pointer-events:none;opacity:.6;transition:opacity .4s;}
:root:not([data-theme="light"]) .item-card:hover{transform:translateY(-6px);border-color:rgba(var(--rb-pink),0.38)!important;box-shadow:0 30px 60px -28px rgba(var(--rb-glow),0.55)!important;}
:root:not([data-theme="light"]) .item-card:hover::after{opacity:1;}
:root:not([data-theme="light"]) .item-thumb{border-radius:18px;margin:8px 8px 0;overflow:hidden;}
:root:not([data-theme="light"]) .item-tag{background:rgba(0,0,0,0.6)!important;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.18);border-radius:999px!important;color:#fff!important;}
:root:not([data-theme="light"]) .item-price{color:#fff!important;letter-spacing:-0.02em;}

/* forms */
:root:not([data-theme="light"]) .form-input,:root:not([data-theme="light"]) input[type="text"],:root:not([data-theme="light"]) input[type="email"],:root:not([data-theme="light"]) input[type="password"],:root:not([data-theme="light"]) input[type="search"],:root:not([data-theme="light"]) textarea,:root:not([data-theme="light"]) select{background:#0B0B0D;border-color:rgba(255,255,255,0.12);color:#fff;}
:root:not([data-theme="light"]) .form-input:focus{border-color:rgba(var(--rb-pink),0.6)!important;box-shadow:0 0 0 4px rgba(var(--rb-glow),0.15)!important;}

/* footer */
:root:not([data-theme="light"]) .site-footer{background:#000!important;border-top:1px solid rgba(255,255,255,0.07)!important;}

/* inline-styled navy panels left in page markup */
:root:not([data-theme="light"]) [style*="#0D0B20"],:root:not([data-theme="light"]) [style*="#0d0b20"],:root:not([data-theme="light"]) [style*="#09081A"],:root:not([data-theme="light"]) [style*="#13112A"],:root:not([data-theme="light"]) [style*="rgba(14,13,32"],:root:not([data-theme="light"]) [style*="rgba(21,19,48"]{background-color:#0B0B0D!important;}

/* motion */
@keyframes rbUp{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
.rb-in{animation:rbUp .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--rb-d,0ms);}
@media (prefers-reduced-motion:reduce){.rb-in{animation:none!important;}}

/* ===== frosted glass (dark) ===== */
@keyframes rbDrift{0%{background-position:0 0,0 0,0 0,0 0,0 0;}100%{background-position:-60px 40px,50px -30px,0 0,-80px 60px,70px -50px;}}
:root:not([data-theme="light"]){background:#000!important;}
:root:not([data-theme="light"]) body{background:transparent!important;}
:root:not([data-theme="light"]) body::before{content:"";position:fixed;inset:-80px;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 82% 18%,rgba(255,255,255,0.075),transparent 62%),radial-gradient(40% 38% at 12% 88%,rgba(167,139,250,0.10),transparent 66%),radial-gradient(30% 30% at 50% 55%,rgba(255,255,255,0.03),transparent 70%),repeating-radial-gradient(ellipse at 72% 62%,rgba(255,255,255,0.045) 0 1.5px,transparent 2px 46px),repeating-radial-gradient(ellipse at 18% 30%,rgba(255,255,255,0.03) 0 1px,transparent 1.5px 60px),#000;filter:blur(0.4px);animation:rbDrift 40s ease-in-out infinite alternate;}
:root:not([data-theme="light"]) .page-hero{background:transparent!important;}
:root:not([data-theme="light"]) .site-header,:root:not([data-theme="light"]) .item-card,:root:not([data-theme="light"]) .auth-card,:root:not([data-theme="light"]) .user-dropdown,:root:not([data-theme="light"]) .stat-card,:root:not([data-theme="light"]) .hero-stat,:root:not([data-theme="light"]) .glass-card,:root:not([data-theme="light"]) .cart-item,:root:not([data-theme="light"]) .summary-card,:root:not([data-theme="light"]) .checkout-card{
  background:linear-gradient(160deg,rgba(255,255,255,0.075) 0%,rgba(255,255,255,0.025) 40%,rgba(255,255,255,0.04) 100%),rgba(22,22,26,0.55)!important;
  backdrop-filter:blur(24px) saturate(1.35)!important;-webkit-backdrop-filter:blur(24px) saturate(1.35)!important;
  border:1px solid rgba(255,255,255,0.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 30px 60px -30px rgba(0,0,0,0.9)!important;}
:root:not([data-theme="light"]) .site-header{border-width:0 0 1px 0!important;border-radius:0!important;}
:root:not([data-theme="light"]) .site-footer{background:rgba(10,10,12,0.6)!important;backdrop-filter:blur(20px);}
:root:not([data-theme="light"]) .nav-bar a,:root:not([data-theme="light"]) .filter-btn,:root:not([data-theme="light"]) .search-box,:root:not([data-theme="light"]) .icon-btn{background:rgba(255,255,255,0.05)!important;backdrop-filter:blur(12px);}
@media (prefers-reduced-motion:reduce){:root:not([data-theme="light"]) body::before{animation:none;}}

/* Performance: static background; live blur only on the header */
:root:not([data-theme="light"]) body::before{animation:none!important;filter:none!important;inset:0!important;transform:translateZ(0);}
:root:not([data-theme="light"]) body *:not(#rb-nb){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
:root:not([data-theme="light"]) .site-header:not(#rb-nb){backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;}
:root:not([data-theme="light"]) .item-card,:root:not([data-theme="light"]) .auth-card,:root:not([data-theme="light"]) .stat-card,:root:not([data-theme="light"]) .glass-card,:root:not([data-theme="light"]) .cart-item,:root:not([data-theme="light"]) .summary-card,:root:not([data-theme="light"]) .checkout-card{background:linear-gradient(160deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.025) 40%,rgba(255,255,255,0.045) 100%),rgba(20,20,24,0.92)!important;}
:root:not([data-theme="light"]) .user-dropdown{background:rgba(20,20,24,0.97)!important;}

/* ===== Phones (all themes) ===== */
@media (max-width: 768px){
  html,body{overflow-x:hidden!important;}
  img,video,iframe{max-width:100%!important;}
  /* Shop listing pages: courses, e-books, documents, plugins */
  .lp-layout{grid-template-columns:minmax(0,1fr)!important;}
  .lp-sidebar,.lp-main,.lp-filter-block{min-width:0!important;max-width:100%!important;}
  .lp-page{padding:14px 14px 48px!important;}
  .lp-topbar{flex-wrap:wrap!important;gap:10px!important;margin-bottom:14px!important;}
  .lp-search{max-width:none!important;flex:1 1 100%!important;}
  .lp-topbar > form:not(.lp-search){flex:1 1 100%!important;}
  .lp-sort{min-width:0!important;width:100%!important;}
  .lp-sidebar{display:flex!important;flex-direction:column!important;gap:10px!important;}
  .lp-filter-block{padding:12px 12px 10px!important;}
  .lp-filter-title{font-size:13px!important;margin-bottom:8px!important;}
  .lp-filter-list{flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;padding-bottom:2px!important;}
  .lp-filter-list::-webkit-scrollbar{display:none!important;}
  .lp-filter-item{flex:0 0 auto!important;padding:7px 12px!important;border:1px solid rgba(124,58,237,0.25)!important;border-radius:999px!important;white-space:nowrap!important;}
  .lp-filter-item .label{flex:none!important;}
  .lp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .lp-card-body{padding:10px 10px 12px!important;}
  .lp-card-title{font-size:13px!important;min-height:34px!important;margin-bottom:6px!important;}
  .lp-card-info{gap:8px!important;font-size:11px!important;flex-wrap:wrap!important;margin-bottom:8px!important;}
  .lp-card-price{margin-bottom:10px!important;}
  .lp-card-price .current{font-size:16px!important;}
  .lp-card-buy{padding:10px 6px!important;font-size:12px!important;}
  .lp-card-cart{width:38px!important;height:38px!important;}
  /* Course page: side padding + no scrollbar under tabs */
  .cd-main-layout.cd-page{padding-left:16px!important;padding-right:16px!important;}
  .cd-tabs{scrollbar-width:none!important;}
  .cd-tabs::-webkit-scrollbar{display:none!important;}
  /* Home: 4 stats in one row */
  .stats-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
  .stat-card{padding:12px 4px!important;border-radius:12px!important;}
  .stat-icon{width:32px!important;height:32px!important;font-size:13px!important;margin-bottom:8px!important;border-radius:10px!important;}
  .stat-num{font-size:17px!important;}
  .stat-lbl{font-size:11px!important;}
  /* Lesson page: whole page scrolls, compact header */
  body:has(.watch-container){height:auto!important;overflow:auto!important;}
  .watch-container{height:auto!important;overflow:visible!important;}
  .watch-header{padding:0 12px!important;height:58px!important;gap:10px!important;}
  .back-btn{font-size:0!important;padding:10px 13px!important;gap:0!important;}
  .back-btn i{font-size:15px!important;}
  .course-header-title{max-width:none!important;flex:1!important;font-size:14px!important;}
  .watch-main{padding:12px!important;gap:14px!important;}
  .watch-sidebar{height:auto!important;max-height:none!important;}
  .gd-corner-guard{width:52px!important;height:46px!important;}
  .lesson-actions .la-btn{flex:1 1 auto!important;justify-content:center!important;}
  /* Forms: 16px inputs stop iPhone from zooming in */
  input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],select,textarea{font-size:16px!important;}
}

/* ===== Readability in every theme ===== */
.lp-card-buy[style*="10B981"],.cd-btn-cart[style*="10B981"],.cd-mobile-btn[style*="10B981"]{background:#059669!important;}
.feed-tag{box-shadow:inset 0 0 0 100px rgba(0,0,0,0.22);text-shadow:0 1px 2px rgba(0,0,0,0.35);}
/* Light mode: darker grey and orange so small text reads on white */
[data-theme="light"]{--text-dim:#64748B;--orange-hot:#EA580C;}
[data-theme="light"] .kbd,[data-theme="light"] .old,[data-theme="light"] .info-level,[data-theme="light"] .info-duration,[data-theme="light"] .info-students,[data-theme="light"] .cd-dim,[data-theme="light"] .cd-price-original,[data-theme="light"] .cd-tab:not(.active),[data-theme="light"] .lp-empty p,[data-theme="light"] .site-footer span,[data-theme="light"] .lp-card-info,[data-theme="light"] .lp-card-info span{color:#64748B!important;}
[data-theme="light"] .feed-price,[data-theme="light"] .cd-price-current,[data-theme="light"] .cd-rating,[data-theme="light"] .lp-popular-rank{color:#EA580C!important;}
[data-theme="light"] .cd-breadcrumb span,[data-theme="light"] .cd-breadcrumb a{color:#475569!important;}
[data-theme="light"] .lp-popular-meta,[data-theme="light"] .lp-popular-meta span,[data-theme="light"] .lp-hero-meta,[data-theme="light"] .lp-hero-meta span,[data-theme="light"] [class*="-meta"] span{color:#64748B!important;}
.feed-tag{box-shadow:inset 0 0 0 100px rgba(0,0,0,0.3)!important;}

/* Header fits with the extra "รับตัดต่อ" item: compact menu on laptops, menu button on tablets */
@media (max-width:1560px){.nav-bar a>i{display:none!important}.nav-bar a{padding-left:12px!important;padding-right:12px!important}.nav-bar{gap:4px!important}}
@media (max-width:1300px){.site-header .kbd{display:none!important}.nav-bar a{padding-left:10px!important;padding-right:10px!important;font-size:13px!important}}
@media (max-width:1180px){.site-header .nav-bar{display:none!important}.site-header .mobile-menu-btn{display:flex!important}}
.nav-bar a.nav-agency:not(.active){color:#3DFF8C!important}
[data-theme="light"] .nav-bar a.nav-agency:not(.active){color:#047857!important}

/* ===== Glass product cards (feed cards + works strip) ===== */
:root:not([data-theme="light"]) .feed-card:not(#rb-nb){background:linear-gradient(155deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.025) 45%,rgba(124,58,237,.06) 100%)!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.02),0 18px 40px -22px rgba(0,0,0,.85)!important;}
:root:not([data-theme="light"]) .feed-card:not(#rb-nb):hover{border-color:rgba(167,139,250,.45)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 22px 50px -22px rgba(123,20,231,.55)!important;}
:root:not([data-theme="light"]) .feed-card .feed-body{background:transparent!important;}
:root:not([data-theme="light"]) .hb-strip-item:not(#rb-nb){background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;}
[data-theme="light"] .feed-card:not(#rb-nb){background:linear-gradient(155deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 55%,rgba(237,233,254,.6) 100%)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(124,58,237,.10),0 18px 40px -24px rgba(91,33,182,.35)!important;}
[data-theme="light"] .feed-card:not(#rb-nb):hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(124,58,237,.3),0 22px 50px -24px rgba(91,33,182,.45)!important;}
[data-theme="light"] .feed-card .feed-body{background:transparent!important;}