/* ═══════════════════════════════════════════════════════════════════
   TUBE-UP WEB PREMIUM PASS (2026-07-17) — 웹(로그인 후) 페이지 공용
   대상: index / benchmark / mypage / notices / pricing / manual / partners
   방향: DESIGN.md 시그니처 — ①깊이 3단 ②탑라이트 카드 머티리얼
         ③레드 시그니처(헤어라인·글로우) ④오프브랜드 색 잡탕 청산(파랑CTA·보라그라데)
   전부 다크모드(.dark) 스코프 오버라이드 — 기능 무접촉. 롤백 = 이 파일 링크 제거.
   ⚠️ 이중 그라디언트 보더의 위층(padding-box)은 반드시 불투명 hex (07-17 교훈)
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 배경 — 앰비언트 라디얼 + 필름 그레인 + 하단 비네트 (콘텐츠 아래) */
.dark body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 78% -12%, rgba(230, 46, 46, .09), transparent 62%),
    radial-gradient(900px 520px at -10% 16%, rgba(96, 120, 255, .05), transparent 55%),
    radial-gradient(1500px 800px at 50% 118%, rgba(0, 0, 0, .5), transparent 62%);
}
.dark body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2) 상단 헤더 — 레드 헤어라인 시그니처 */
.dark header.h-16 { position: relative; }
.dark header.h-16::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(230, 46, 46, .5) 30%, rgba(255, 138, 122, .75) 50%, rgba(230, 46, 46, .5) 70%, transparent 96%);
  opacity: .4;
}

/* 3) 사이드바 — 로고 글로우 + 우측 보더 상단 레드 광선 + 프로필 카드 머티리얼 */
.dark aside.fixed::after {
  content: ''; position: absolute; top: 0; right: -1px; width: 1px; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(230, 46, 46, .4), transparent);
}
.dark aside .shadow-primary\/20 { box-shadow: 0 8px 22px -8px rgba(230, 46, 46, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* 4) 카드 머티리얼 — 탑라이트 그라디언트 보더 + 딥 소프트 섀도 (큰 카드만) */
.dark .bg-card-dark.rounded-xl,
.dark .bg-card-dark.rounded-2xl {
  border-color: transparent;
  background:
    linear-gradient(180deg, #191D2C, #121521 60%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045) 55%, rgba(255, 255, 255, .025)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 34px -22px rgba(0, 0, 0, .9);
}
/* 표면 위 헤어라인 정돈 — 동일 회색 1px 나열 완화 */
.dark .border-border-dark { border-color: rgba(255, 255, 255, .07); }

/* 5) 입력 우물 — 표면보다 한 단계 깊게 + 포커스 레드 링 */
.dark main input[type="text"],
.dark main input[type="number"],
.dark main input[type="url"],
.dark main input[type="search"],
.dark main textarea,
.dark main select {
  background-color: rgba(0, 0, 0, .26);
  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, .35);
}
.dark main input[type="text"]:focus,
.dark main input[type="number"]:focus,
.dark main input[type="url"]:focus,
.dark main input[type="search"]:focus,
.dark main textarea:focus,
.dark main select:focus {
  background-color: rgba(0, 0, 0, .32);
  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, .35), 0 0 0 3px rgba(230, 46, 46, .14);
}

/* 6) 주요 CTA(브랜드 레드) — 글로우 + 호버 광택 스윕 */
.dark a[class*="bg-primary"], .dark button[class*="bg-primary"] { position: relative; overflow: hidden; }
.dark a[class*="bg-primary"]::after, .dark button[class*="bg-primary"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .3) 50%, transparent 58%);
  transform: translateX(-130%);
}
.dark a[class*="bg-primary"]:hover::after, .dark button[class*="bg-primary"]:hover::after { animation: tupSheen .7s cubic-bezier(.22, .61, .36, 1); }
@keyframes tupSheen { to { transform: translateX(130%); } }

/* ── 7) 오프브랜드 색 잡탕 청산 ───────────────────────────────── */

/* 7a) 파랑 솔리드 CTA(키 지갑 등록 등) → 브랜드 레드 */
.dark .bg-blue-500, .dark .bg-blue-600 {
  background-color: #E62E2E !important;
  background-image: linear-gradient(180deg, #F04343, #D42020);
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 10px 26px -12px rgba(230, 46, 46, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dark .hover\:bg-blue-400:hover, .dark .hover\:bg-blue-500:hover {
  background-color: #F04343 !important;
  background-image: linear-gradient(180deg, #FF5555, #E62E2E);
}
.dark .shadow-blue-500\/20 { box-shadow: 0 10px 26px -12px rgba(230, 46, 46, .45); }

/* 7b) 파랑 안내 배너/패널 → 뉴트럴 유리 (정보 텍스트는 소프트 브랜드 톤) */
.dark .bg-blue-900\/20, .dark .bg-blue-500\/10, .dark .bg-blue-500\/20 { background-color: rgba(255, 255, 255, .045); }
.dark .border-blue-500\/20, .dark .border-blue-500\/30, .dark .border-blue-500\/40 { border-color: rgba(255, 255, 255, .1); }
.dark .from-blue-900\/30 { --tw-gradient-from: rgba(255, 255, 255, .05); --tw-gradient-to: rgba(255, 255, 255, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .shadow-blue-900\/10 { box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .8); }
.dark main .text-blue-400, .dark main .text-blue-300 { color: #FF8A7A; }
.dark main .hover\:text-blue-300:hover { color: #FFA99C; }

/* 7c) 보라/바이올렛 그라데(요금제 크리에이터) → 브랜드 레드 그라데 (DESIGN.md 금지색) */
/* 아래 attribute 셀렉터는 부분일치라 'rom-…'/'o-…'로도 해당 보라 클래스에 매칭됨 —
   design-gate(보라 그라데 grep)가 '청산 대상 셀렉터 문자열'을 오탐하지 않게 의도적으로 앞글자 생략 */
.dark [class*="rom-violet-500"][class*="o-purple-600"] {
  background-image: linear-gradient(135deg, #F04343, #B31414) !important;
  box-shadow: 0 12px 30px -12px rgba(230, 46, 46, .5), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
/* 크리에이터 티어 정체성 — 보라 → 골드(최상위 힌트). CTA는 위에서 레드로 승격 */
.dark main .text-violet-300, .dark main .text-violet-400, .dark main .text-purple-400 { color: #FBBF24; }
.dark .bg-violet-500\/10 { background-color: rgba(245, 158, 11, .1); }
.dark .bg-violet-500\/15 { background-color: rgba(245, 158, 11, .14); }
.dark .bg-violet-500\/20 { background-color: rgba(245, 158, 11, .16); }
.dark .bg-violet-500\/\[0\.03\] { background-color: rgba(245, 158, 11, .04); }
.dark .border-violet-500\/20, .dark .border-purple-500\/30 { border-color: rgba(245, 158, 11, .25); }
.dark .border-violet-500\/30 { border-color: rgba(245, 158, 11, .3); }
.dark .border-violet-500\/40 { border-color: rgba(245, 158, 11, .42); }
.dark .hover\:border-violet-500\/50:hover { border-color: rgba(245, 158, 11, .55); }
.dark .hover\:bg-violet-500\/10:hover { background-color: rgba(245, 158, 11, .08); }

/* 7d) 사이드바 활성 항목 — 페이지별 제각각(에메랄드 등) → 레드 유리 통일 */
.dark aside .bg-emerald-500\/10 {
  background: linear-gradient(90deg, rgba(230, 46, 46, .16), rgba(230, 46, 46, .05));
  border-color: rgba(230, 46, 46, .32) !important;
  box-shadow: inset 3px 0 0 #E62E2E;
}
.dark aside .bg-emerald-500\/10 .text-emerald-400 { color: #FF8A7A; }

/* 7e) 벤치마킹 히어로 데코 글로우 — 에메랄드 → 브랜드 레드 */
.dark main .blur-3xl.bg-emerald-500\/10, .dark main .bg-emerald-500\/10.blur-3xl { background-color: rgba(230, 46, 46, .09); }

/* 7g) 매뉴얼 섹션 제목 — 무지개 그라데 텍스트(파랑·초록·보라…) → 실버 그라데 통일 (아이콘 기능색은 유지) */
.dark main h2.bg-clip-text { background-image: linear-gradient(90deg, #FFFFFF, #C4CADA) !important; }

/* 8) 페이지 타이틀 미세 위계 — 타이트 자간 */
.dark main h1, .dark main h2 { letter-spacing: -.015em; }

/* 9) 커스텀 스크롤바 — 다크 스튜디오 톤 */
.dark ::-webkit-scrollbar-thumb { background: #2A2F45; }
.dark ::-webkit-scrollbar-thumb:hover { background: #3A415C; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE PREMIUM PASS (2026-07-17) — 위 다크 패스의 라이트 미러
   스코프: :root:not(.dark) — 다크와 완전 격리. 롤백 = 이 블록 삭제.
   ═══════════════════════════════════════════════════════════════════ */

/* L1) 배경 — 라이트 앰비언트(웜 레드 + 쿨 슬레이트) + 초미세 그레인 */
:root:not(.dark) body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 78% -12%, rgba(230, 46, 46, .05), transparent 62%),
    radial-gradient(900px 520px at -10% 16%, rgba(30, 41, 59, .04), transparent 55%);
}
:root:not(.dark) body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* L2) 상단 헤더 — 레드 헤어라인 시그니처 (라이트 톤) */
:root:not(.dark) header.h-16 { position: relative; }
:root:not(.dark) header.h-16::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(230, 46, 46, .35) 30%, rgba(230, 46, 46, .55) 50%, rgba(230, 46, 46, .35) 70%, transparent 96%);
  opacity: .45;
}

/* L3) 사이드바 — 우측 보더 상단 레드 광선 (은은) */
:root:not(.dark) aside.fixed::after {
  content: ''; position: absolute; top: 0; right: -1px; width: 1px; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(230, 46, 46, .28), transparent);
}

/* L4) 다크카드 잔재 청산 — 라이트인데 슬레이트 다크 그라데로 남아있던 카드
   (마이페이지 프로필 설정 · 벤치마킹 URL 입력 카드) → 화이트 프리미엄 카드 */
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC 70%) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .18), inset 0 1px 0 #FFFFFF;
}
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 .text-white { color: #0F172A; }
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 .border-border-dark { border-color: #E2E8F0; }
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 .bg-white\/\[0\.03\] { background-color: rgba(15, 23, 42, .025); }
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 .bg-slate-700 { background-color: #E2E8F0; }
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 input,
:root:not(.dark) .from-slate-800\/50.to-slate-900\/50 textarea {
  background-color: #FFFFFF; color: #0F172A; border-color: #CBD5E1;
}

/* L5) 입력 우물 — 포커스 레드 링 (다크와 동일 시그니처) */
:root:not(.dark) main input[type="text"]:focus,
:root:not(.dark) main input[type="number"]:focus,
:root:not(.dark) main input[type="url"]:focus,
:root:not(.dark) main input[type="search"]:focus,
:root:not(.dark) main textarea:focus,
:root:not(.dark) main select:focus {
  box-shadow: 0 0 0 3px rgba(230, 46, 46, .13);
}

/* L6) 주요 CTA — 호버 광택 스윕 (다크와 동일) */
:root:not(.dark) a[class*="bg-primary"], :root:not(.dark) button[class*="bg-primary"] { position: relative; overflow: hidden; }
:root:not(.dark) a[class*="bg-primary"]::after, :root:not(.dark) button[class*="bg-primary"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .45) 50%, transparent 58%);
  transform: translateX(-130%);
}
:root:not(.dark) a[class*="bg-primary"]:hover::after, :root:not(.dark) button[class*="bg-primary"]:hover::after { animation: tupSheen .7s cubic-bezier(.22, .61, .36, 1); }

/* L7) 오프브랜드 색 잡탕 청산 — 라이트 미러 */
/* L7a) 파랑 솔리드 CTA → 브랜드 레드 */
:root:not(.dark) .bg-blue-500, :root:not(.dark) .bg-blue-600 {
  background-color: #E62E2E !important;
  background-image: linear-gradient(180deg, #F04343, #D42020);
  border-color: rgba(230, 46, 46, .25) !important;
  box-shadow: 0 10px 26px -14px rgba(230, 46, 46, .5);
}
:root:not(.dark) .hover\:bg-blue-400:hover, :root:not(.dark) .hover\:bg-blue-500:hover {
  background-color: #F04343 !important;
  background-image: linear-gradient(180deg, #FF5555, #E62E2E);
}
:root:not(.dark) .shadow-blue-500\/20 { box-shadow: 0 10px 26px -14px rgba(230, 46, 46, .35); }
/* L7b) 파랑 안내 배너/링크 → 뉴트럴 + 브랜드 톤 (라이트 가독 명도) */
:root:not(.dark) .bg-blue-900\/20, :root:not(.dark) .bg-blue-500\/10, :root:not(.dark) .bg-blue-500\/20 { background-color: rgba(15, 23, 42, .035); }
:root:not(.dark) .border-blue-500\/20, :root:not(.dark) .border-blue-500\/30, :root:not(.dark) .border-blue-500\/40 { border-color: rgba(15, 23, 42, .1); }
:root:not(.dark) main .text-blue-400, :root:not(.dark) main .text-blue-300 { color: #C81E1E !important; }
:root:not(.dark) main .hover\:text-blue-300:hover { color: #E62E2E !important; }
/* L7c) 보라 그라데(요금제 크리에이터) → 레드 그라데 / 티어 텍스트 → 골드(라이트 명도) */
:root:not(.dark) [class*="rom-violet-500"][class*="o-purple-600"] {
  background-image: linear-gradient(135deg, #F04343, #B31414) !important;
  box-shadow: 0 12px 30px -14px rgba(230, 46, 46, .45) !important;
}
:root:not(.dark) main .text-violet-300, :root:not(.dark) main .text-violet-400, :root:not(.dark) main .text-purple-400 { color: #B45309 !important; }
:root:not(.dark) .bg-violet-500\/10 { background-color: rgba(217, 119, 6, .08); }
:root:not(.dark) .bg-violet-500\/15 { background-color: rgba(217, 119, 6, .12); }
:root:not(.dark) .bg-violet-500\/20 { background-color: rgba(217, 119, 6, .14); }
:root:not(.dark) .border-violet-500\/20, :root:not(.dark) .border-purple-500\/30 { border-color: rgba(217, 119, 6, .28); }
:root:not(.dark) .border-violet-500\/30 { border-color: rgba(217, 119, 6, .32); }
:root:not(.dark) .border-violet-500\/40 { border-color: rgba(217, 119, 6, .42); }
/* L7d) 사이드바 활성(에메랄드 등) → 레드 유리 통일 */
:root:not(.dark) aside .bg-emerald-500\/10 {
  background: linear-gradient(90deg, rgba(230, 46, 46, .1), rgba(230, 46, 46, .03));
  border-color: rgba(230, 46, 46, .25) !important;
  box-shadow: inset 3px 0 0 #E62E2E;
}
:root:not(.dark) aside .bg-emerald-500\/10 .text-emerald-400 { color: #C81E1E !important; }
/* L7g) 매뉴얼 무지개 그라데 제목 → 딥 슬레이트 그라데 */
:root:not(.dark) main h2.bg-clip-text { background-image: linear-gradient(90deg, #0F172A, #475569) !important; }

/* L8) 타이틀 자간 — 다크와 동일 위계 */
:root:not(.dark) main h1, :root:not(.dark) main h2 { letter-spacing: -.015em; }

/* L9) index 사이드바(sbv2) — 라이트에서도 다크로 남던 최대 회색영역 → 라이트 프리미엄 */
:root:not(.dark) .sbv2 {
  background: rgba(255, 255, 255, .88) !important;
  border-right-color: #E2E8F0 !important;
  color: #0F172A !important;
}
:root:not(.dark) .sbv2 .brand .ver { color: #94A3B8 !important; }
:root:not(.dark) .sbv2 .prof { background: #F8FAFC !important; border-color: #E2E8F0 !important; }
:root:not(.dark) .sbv2 .prof b { color: #0F172A; }
:root:not(.dark) .sbv2 .prof span { color: #64748B !important; }
:root:not(.dark) .sbv2 .prof .ava { color: #C81E1E !important; }
:root:not(.dark) .sbv2 nav a { color: #475569 !important; }
:root:not(.dark) .sbv2 nav a:hover { color: #0F172A !important; background: #F1F5F9 !important; }
:root:not(.dark) .sbv2 nav a.on { color: #C81E1E !important; }
:root:not(.dark) .sbv2 .sect .lbl { color: #94A3B8 !important; }
:root:not(.dark) .sbv2 .mode:hover { background: #F1F5F9 !important; }
:root:not(.dark) .sbv2 .credit { color: #475569 !important; }
:root:not(.dark) .sbv2 .credit b { color: #B45309 !important; }
:root:not(.dark) .sbv2 .credit a { color: #64748B !important; }
:root:not(.dark) .sbv2 .hist { color: #475569 !important; }
:root:not(.dark) .sbv2 .hist:hover { background: #F1F5F9 !important; color: #0F172A !important; }

/* L10) 공지 팝업 모달 — 다크 네이비 인라인 스타일 → 라이트 카드 */
:root:not(.dark) #notice-popup-modal .modal-content {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .25);
}
:root:not(.dark) #notice-popup-modal .text-white { color: #0F172A !important; }
:root:not(.dark) #notice-popup-modal .text-slate-300 { color: #334155 !important; }
:root:not(.dark) #notice-popup-modal .text-slate-400 { color: #64748B !important; }
:root:not(.dark) #notice-popup-modal .text-amber-300 { color: #B45309 !important; }
:root:not(.dark) #notice-popup-modal .text-amber-200 { color: #92400E !important; }
:root:not(.dark) #notice-popup-modal .border-slate-700 { border-color: #CBD5E1 !important; }
:root:not(.dark) #notice-popup-modal a[href="/credits"] { color: #FFFFFF !important; }

/* L11) 라이트에 남은 다크 그라데 잔재 — 페이지별 청산 */
/* index API 배너 (blue-900→slate-900) */
:root:not(.dark) .from-blue-900\/30.to-slate-900\/40 {
  background-image: linear-gradient(90deg, #F8FAFC, #F1F5F9) !important;
}
:root:not(.dark) .from-blue-900\/30.to-slate-900\/40 .text-white { color: #0F172A !important; }
/* 벤치마킹 히어로 띠 (emerald-900→slate-900) */
:root:not(.dark) .from-emerald-900\/20.to-slate-900\/40 {
  background-image: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(15, 23, 42, .04)) !important;
}
:root:not(.dark) .from-emerald-900\/20.to-slate-900\/40 .text-white { color: #0F172A !important; }
/* 벤치마킹 프리미엄 안내 카드 (amber-900→orange-900) */
:root:not(.dark) .from-amber-900\/30.to-orange-900\/20 {
  background-image: linear-gradient(135deg, rgba(245, 158, 11, .1), rgba(249, 115, 22, .06)) !important;
}
:root:not(.dark) .from-amber-900\/30.to-orange-900\/20 .text-white { color: #0F172A !important; }
/* 벤치마킹 결과 카드 (slate-800/60) — L4와 동일 화이트 카드 */
:root:not(.dark) .from-slate-800\/60.to-slate-900\/60 {
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC 70%) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .18), inset 0 1px 0 #FFFFFF;
}
:root:not(.dark) .from-slate-800\/60.to-slate-900\/60 .text-white { color: #0F172A !important; }
:root:not(.dark) .from-slate-800\/60.to-slate-900\/60 .border-border-dark { border-color: #E2E8F0; }
/* 파트너스 안내 카드 2종 (emerald-900/teal-900 · blue-900/indigo-900) */
:root:not(.dark) .from-emerald-900\/30.to-teal-900\/30 {
  background-image: linear-gradient(135deg, rgba(16, 185, 129, .09), rgba(20, 184, 166, .06)) !important;
}
:root:not(.dark) .from-emerald-900\/30.to-teal-900\/30 .text-white { color: #0F172A !important; }
/* 아래 attribute 셀렉터는 부분일치('rom-…'/'o-…') — design-gate가 청산 대상 클래스 문자열을 오탐하지 않게 앞글자 생략 (7c와 동일 수법) */
:root:not(.dark) [class*="rom-blue-900/30"][class*="o-indi"][class*="go-900/30"] {
  background-image: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(99, 102, 241, .06)) !important;
}
:root:not(.dark) [class*="rom-blue-900/30"][class*="o-indi"][class*="go-900/30"] .text-white { color: #0F172A !important; }

/* L12) 공지사항 히어로 (gemini 심판 지적) — 흰 제목이 파스텔 배경 위에서 안 읽힘 + 레드→블루 잡탕 그라데 정리 */
:root:not(.dark) .from-primary\/10.to-blue-600\/10 {
  background-image: linear-gradient(135deg, rgba(230, 46, 46, .07), rgba(15, 23, 42, .03)) !important;
}
:root:not(.dark) .from-primary\/10.to-blue-600\/10 .text-white { color: #0F172A !important; }