/* ClashForge macOS visual layer — loaded last to keep every page in one system. */
:root {
  --rc-bg: #111216;
  --rc-surface: rgba(35, 37, 45, .78);
  --rc-card: rgba(42, 44, 53, .78);
  --rc-card-2: #30323b;
  --rc-orange: #0a84ff;
  --rc-orange-2: #409cff;
  --rc-text: #f5f5f7;
  --rc-muted: #a6a9b3;
  --rc-line: rgba(255,255,255,.12);
  --rc-green: #30d158;
  --rc-red: #ff453a;
  --primary: #0a84ff;
  --primary-strong: #64b5ff;
  --secondary: #5e5ce6;
  --panel: rgba(35,37,45,.8);
  --panel-strong: #272932;
  --bg: #111216;
  --bg-soft: #1c1e25;
  --line: rgba(255,255,255,.12);
  --text: #f5f5f7;
  --muted: #a6a9b3;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

body, .admin-body {
  background: radial-gradient(circle at 84% -10%, rgba(94,92,230,.24), transparent 34%), radial-gradient(circle at 8% 86%, rgba(10,132,255,.16), transparent 28%), #111216 !important;
  color: var(--rc-text) !important;
}

.site-header, .rc-header {
  background: rgba(24,25,31,.76) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
}
.rc-header:after { display: none !important; }
.rc-nav-wrap:before {
  content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: #ff5f57; box-shadow: 20px 0 #febc2e, 40px 0 #28c840; margin-right: 42px;
}
[dir="rtl"] .rc-nav-wrap:before { margin-right: 0; margin-left: 42px; }
.rc-logo { font-size: 15px !important; letter-spacing: .4px !important; }
.rc-logo em, .eyebrow, .popular { color: #64b5ff !important; }
.clashforge-brand-icon { border-radius: 8px !important; box-shadow: 0 8px 18px rgba(0,0,0,.3) !important; }
.rc-nav a, .site-nav>a { border-radius: 9px !important; color: #b4b7c1 !important; }
.rc-nav a:hover, .rc-nav a.is-active { color: #fff !important; background: rgba(255,255,255,.12) !important; }
.language-switch { background: rgba(255,255,255,.08) !important; border-color: var(--rc-line) !important; border-radius: 10px !important; }

.btn, .rc-header-cta, .launcher-download {
  background: linear-gradient(180deg, #2495ff, #0077ed) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 10px 22px rgba(0,122,255,.22) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.btn:hover, .rc-header-cta:hover { background: #409cff !important; transform: translateY(-1px); }
.btn.ghost, .btn-secondary, .btn-outline { background: rgba(255,255,255,.07) !important; border-color: var(--rc-line) !important; color: #f5f5f7 !important; box-shadow: none !important; }

.hero, .page-hero { background: linear-gradient(120deg, rgba(17,18,22,.94), rgba(17,18,22,.7)), radial-gradient(circle at 80% 25%, rgba(94,92,230,.35), transparent 31%) !important; min-height: auto !important; }
.hero-image { opacity: .23 !important; filter: saturate(.55) blur(.2px) !important; }
.shade { background: linear-gradient(90deg, rgba(17,18,22,.98), rgba(17,18,22,.72), rgba(17,18,22,.3)) !important; }
.hero:after { display: none !important; }
.hero h1, .page-hero h1, .heading h2, .launcher h2, .community h2 { font-family: Tajawal, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; letter-spacing: -1.6px !important; text-shadow: none !important; color: #f5f5f7 !important; }
.hero h1 em { color: #64b5ff !important; text-shadow: none !important; }
.section, .section-alt, .prices { background: transparent !important; }

.tool, .plan, .product-card, .category-card, .feature-panel, .feature-item,
.purchase-card, .account-panel, .account-product-card, .dashboard-card, .admin-panel,
.video-card, .doc-page, .faq-list details, .installation-steps .install-step, .app {
  background: linear-gradient(145deg, rgba(54,56,67,.76), rgba(31,33,40,.86)) !important;
  border-color: rgba(255,255,255,.13) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.22) !important;
}
.tool:before, .plan:before { display:none !important; }
.tool:hover, .plan:hover, .product-card:hover, .category-card:hover { border-color: rgba(100,181,255,.65) !important; box-shadow: 0 20px 48px rgba(0,0,0,.34) !important; }
.price b, .price-tag, .pricing-plan strong { color: #f5f5f7 !important; }
.pricing-plan.is-recommended { border-color: rgba(10,132,255,.75) !important; background: rgba(10,132,255,.14) !important; }

.community, .launcher { background: linear-gradient(135deg, rgba(44,45,55,.92), rgba(20,21,27,.94)) !important; border-color: rgba(255,255,255,.12) !important; }
.community:before { display:none !important; }
.stats, .appbar { background: rgba(255,255,255,.055) !important; border-color: var(--rc-line) !important; }
.stats:before { display:none !important; }
.appbody article { background: linear-gradient(120deg, rgba(16,17,22,.93), rgba(16,17,22,.46)), url('../images/clashforge-hero.png') center/cover !important; }

.site-footer { background: rgba(13,14,18,.9) !important; border-color: var(--rc-line) !important; }

/* Admin uses the same macOS window material. */
.admin-sidebar { background: rgba(27,29,36,.88) !important; border-color: var(--rc-line) !important; backdrop-filter: blur(20px); }
.admin-sidebar:before { content:""; display:block; width:12px; height:12px; margin:0 8px 24px; border-radius:50%; background:#ff5f57; box-shadow:20px 0 #febc2e,40px 0 #28c840; }
.admin-main { background: radial-gradient(circle at 90% 0, rgba(94,92,230,.16), transparent 26%), transparent !important; }
.admin-nav a:hover, .admin-nav a.is-active { background: rgba(10,132,255,.18) !important; color: #80c4ff !important; }
.admin-welcome { background: linear-gradient(120deg, rgba(10,132,255,.18), rgba(46,48,58,.8)) !important; }
.admin-metric-card:hover, .admin-quick-grid a:hover { border-color: rgba(100,181,255,.65) !important; }
.metric-icon, .feed-icon { background: rgba(10,132,255,.16) !important; color: #64b5ff !important; }
.admin-form input, .admin-form select, .admin-form textarea, .knowledge-search input, .knowledge-search select { background: rgba(15,16,21,.76) !important; border-color: rgba(255,255,255,.14) !important; border-radius: 10px !important; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { border-color: #0a84ff !important; box-shadow: 0 0 0 3px rgba(10,132,255,.2) !important; }

@media (max-width: 760px) { .rc-nav-wrap:before { display:none; } }