/* ============================================================
   Bypass FRP — mobile-first, hand-coded, no frameworks
   ============================================================ */
:root{
	--accent:#1895F5;
	--accent-dark:#0e7cd8;
	--ink:#111827;
	--muted:#6b7280;
	--bg:#ffffff;
	--bg-alt:#f5f6fa;
	--card:#ffffff;
	--border:#e5e7eb;
	--radius:14px;
	--shadow:0 2px 10px rgba(17,24,39,.07);
	--header-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
	color:var(--ink);
	background:var(--bg);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--accent)}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 16px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* ---------- header ---------- */
.site-header{
	position:sticky;top:0;z-index:100;height:var(--header-h);
	background:rgba(255,255,255,.96);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.demo-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.25rem}
.demo-logo svg{color:var(--accent)}
.demo-logo em{font-style:normal;color:var(--accent)}
.custom-logo{max-height:44px;width:auto}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
.primary-nav .nav-list{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.primary-nav .nav-list a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;border-radius:8px}
.primary-nav .nav-list a:hover{background:var(--bg-alt);color:var(--accent)}

/* ---------- hero ---------- */
.hero{
	background:linear-gradient(135deg,#0a2540 0%,#0d3b66 55%,#1895F5 100%);
	color:#fff;
	padding:56px 0 48px;
	text-align:center;
}
.hero-kicker{
	display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px;margin:0 0 16px;
}
.hero h1{margin:0 0 12px;font-size:1.9rem;line-height:1.25;letter-spacing:-.01em}
.hero-sub{margin:0 auto 24px;max-width:640px;color:#d7d9f5;font-size:1.02rem}
.search-wrap{max-width:560px;margin:0 auto}
#bfrp-search{
	width:100%;padding:15px 20px;font-size:1rem;border:0;border-radius:999px;outline:none;
	box-shadow:0 8px 30px rgba(0,0,0,.25);
}
#bfrp-search:focus{box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 0 3px rgba(255,255,255,.5)}
.hero-stats{display:flex;justify-content:center;gap:32px;margin:28px 0 8px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-size:1.6rem}
.hero-stats span{font-size:.8rem;color:#c9cdf2}
.hero-note{font-size:.82rem;color:#b9bdf0;margin:12px 0 0}

/* ---------- sections ---------- */
.section{padding:52px 0}
.section-alt{background:var(--bg-alt)}
.section h2{margin:0 0 8px;font-size:1.55rem;letter-spacing:-.01em;text-align:center}
.section-sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 28px}

/* ---------- tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.tab{
	border:1px solid var(--border);background:#fff;color:var(--ink);
	padding:9px 16px;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;
}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- cards ---------- */
.cards-grid{display:grid;grid-template-columns:1fr;gap:14px}
.bfrp-card,.code-card,.apk-card{
	background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
	padding:18px;box-shadow:var(--shadow);
	display:flex;flex-direction:column;gap:10px;
	transition:transform .15s ease,box-shadow .15s ease;
}
.bfrp-card:hover,.code-card:hover,.apk-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(17,24,39,.12)}
.card-icon{
	width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
	background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);
}
.bfrp-card h3,.apk-card h3{margin:0;font-size:1.02rem}
.card-actions{display:flex;gap:8px;margin-top:auto}
.btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:10px 18px;border-radius:10px;font-weight:700;font-size:.92rem;cursor:pointer;
	text-decoration:none;border:1px solid transparent;flex:1;
}
.btn-open{background:var(--accent);color:#fff}
.btn-open:hover{background:var(--accent-dark);color:#fff}
.btn-copy{background:#fff;border-color:var(--border);color:var(--ink)}
.btn-copy:hover{border-color:var(--accent);color:var(--accent)}
.btn-copy.copied{background:#ecfdf5;border-color:#10b981;color:#047857}

/* secret codes */
.code-card{text-align:center;align-items:center}
.code-card code{
	font-size:1.5rem;font-weight:800;letter-spacing:.05em;color:var(--ink);
	background:var(--bg-alt);padding:10px 18px;border-radius:10px;border:1px dashed var(--border);
}
.code-card p{margin:0;color:var(--muted);font-size:.92rem}
.code-card .card-actions{width:100%}

/* apk cards */
.apk-file{margin:0;font-size:.82rem;color:var(--muted);word-break:break-all;font-family:ui-monospace,monospace}
.apk-note{margin:0;font-size:.82rem;color:var(--muted)}
.disclaimer-note{
	margin-top:24px;font-size:.82rem;color:var(--muted);text-align:center;
	background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;
}
.empty-note{text-align:center;color:var(--muted);font-weight:600}

/* ---------- guide ---------- */
.guide-wrap{max-width:780px}
.guide-content h3{margin:32px 0 10px;font-size:1.2rem}
.guide-content p,.guide-content li{color:#374151}
.guide-content ol{padding-left:22px}
.guide-content li{margin-bottom:8px}

/* ---------- faq ---------- */
.faq-wrap{max-width:780px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.faq-item summary{
	cursor:pointer;padding:16px 18px;font-weight:700;list-style:none;
	display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--accent);flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-answer{padding:0 18px 18px;color:var(--muted)}
.faq-answer p{margin:0}

/* ---------- cta band ---------- */
.cta-band{background:linear-gradient(135deg,#0a2540,#1895F5);color:#fff;text-align:center;padding:48px 0}
.cta-band h2{margin:0 0 8px;font-size:1.5rem}
.cta-band p{margin:0;color:#d7d9f5}

/* ---------- legal pages ---------- */
.page-wrap{max-width:820px;padding-top:40px;padding-bottom:60px}
.page-title{font-size:2rem;margin:0 0 20px;letter-spacing:-.01em}
.legal-article .page-content h2{font-size:1.3rem;margin:28px 0 10px}
.legal-article .page-content p,.legal-article .page-content li{color:#374151}
.contact-form-note{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:18px;margin:20px 0}

/* ---------- footer ---------- */
.site-footer{background:#0f172a;color:#cbd5e1;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:28px;padding:44px 0 28px}
.footer-brand .demo-logo{color:#fff}
.footer-brand p{font-size:.9rem;color:#94a3b8}
.footer-links h4{color:#fff;margin:0 0 12px;font-size:1rem}
.footer-links .nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.footer-links .nav-list a{color:#94a3b8;text-decoration:none;font-size:.92rem;padding:4px 0;display:block}
.footer-links .nav-list a:hover{color:#fff}
.footer-bottom{border-top:1px solid #1e293b;padding:18px 0;text-align:center}
.footer-bottom p{margin:0;font-size:.85rem;color:#64748b}

/* ---------- back to top ---------- */
.to-top{
	position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:50%;
	border:0;background:var(--accent);color:#fff;font-size:1.3rem;cursor:pointer;
	box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s;
}
.to-top.show{opacity:1;pointer-events:auto}

/* ---------- responsive ---------- */
@media (min-width:600px){
	.cards-grid{grid-template-columns:repeat(2,1fr)}
	.hero h1{font-size:2.4rem}
}
@media (min-width:900px){
	.cards-grid{grid-template-columns:repeat(3,1fr)}
	.footer-grid{grid-template-columns:1.4fr 1fr 1fr}
	.section{padding:68px 0}
}
@media (min-width:1200px){
	#open-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:899px){
	.nav-toggle{display:block}
	.primary-nav{
		display:none;position:absolute;top:var(--header-h);left:0;right:0;
		background:#fff;border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(0,0,0,.08);
	}
	.primary-nav.open{display:block}
	.primary-nav .nav-list{flex-direction:column;padding:8px 16px 16px}
	.primary-nav .nav-list a{padding:12px 8px;border-bottom:1px solid var(--bg-alt)}
	.site-header{position:sticky}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*{transition:none!important}
}
section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* ---------- copy protection: no text selection (inputs still work) ---------- */
body{
	-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
	-webkit-touch-callout:none;
}
input,textarea{
	-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
	-webkit-touch-callout:default;
}

/* ---------- card details link (SEO item pages) ---------- */
.card-more{display:inline-block;margin-top:2px;font-size:.85rem;font-weight:600;text-decoration:none}
.card-more:hover{text-decoration:underline}

/* ================= BLOG ("What's New") ================= */
.container-narrow{max-width:780px;margin:0 auto;padding:0 20px}
.blog-hero{background:linear-gradient(135deg,#0a2540 0%,#0d3b66 60%,#1895F5 100%);color:#fff;padding:56px 0 44px;text-align:center}
.blog-hero .kicker{color:#c7d2fe;text-transform:uppercase;letter-spacing:2px;font-size:.8rem;font-weight:700;margin:0 0 8px}
.blog-hero h1{color:#fff;margin:0 0 10px;font-size:2rem}
.blog-hero .lede{color:#e0e7ff;max-width:640px;margin:0 auto 18px;font-size:1.02rem}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.chip:hover{background:rgba(255,255,255,.25)}
.chip.active{background:#fff;color:#0e7cd8}
.chip-count{font-size:.75rem;opacity:.75}
.archive-desc p{margin:0}
.back-link{display:inline-block;margin:18px 0 6px;font-weight:600;text-decoration:none;font-size:.92rem}
.back-link:hover{text-decoration:underline}
.back-link.light{color:#e0e7ff}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(79,70,229,.12)}
.post-thumb{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#eef2ff,#e0e7ff);overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-thumb-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#1895F5;opacity:.6}
.post-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-cat{display:inline-block;align-self:flex-start;background:#e3f2fd;color:#0e7cd8;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:999px;text-decoration:none}
.post-title{margin:0;font-size:1.08rem;line-height:1.4}
.post-title a{color:var(--ink);text-decoration:none}
.post-title a:hover{color:var(--accent)}
.post-excerpt{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.post-meta{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--muted);border-top:1px solid #f1f5f9;padding-top:10px}
.read-more{font-weight:700;text-decoration:none}
.read-more:hover{text-decoration:underline}
.post-pagination{margin:34px 0 10px;text-align:center}
.post-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.post-pagination .page-numbers{display:inline-block;min-width:40px;padding:9px 12px;border:1px solid #e5e7eb;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;background:#fff}
.post-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.no-posts{text-align:center;padding:40px 0;color:var(--muted)}

/* single post */
.single-post{padding:10px 0 0}
.single-title{margin:8px 0 10px;font-size:1.9rem;line-height:1.25}
.single-meta{margin-bottom:18px}
.meta-dot{margin:0 6px}
.single-thumb{margin:0 0 24px;border-radius:14px;overflow:hidden}
.single-thumb img{width:100%;height:auto;display:block}
.single-content{font-size:1.03rem;line-height:1.75;color:#1f2937}
.single-content h2{font-size:1.45rem;margin:30px 0 12px}
.single-content h3{font-size:1.2rem;margin:24px 0 10px}
.single-content p{margin:0 0 16px}
.single-content ul,.single-content ol{margin:0 0 16px;padding-left:24px}
.single-content li{margin-bottom:8px}
.single-content img{max-width:100%;height:auto;border-radius:10px}
.single-content a{color:var(--accent)}
.post-tags{margin:26px 0 6px;font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-tags a{background:#f1f5f9;color:var(--ink);text-decoration:none;padding:5px 12px;border-radius:999px;font-size:.82rem;font-weight:600}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin:26px 0 0;padding:20px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.post-nav-prev,.post-nav-next{flex:1;font-size:.92rem}
.post-nav-next{text-align:right}
.post-nav a{color:var(--ink);text-decoration:none;font-weight:600}
.post-nav a:hover{color:var(--accent)}
.related-wrap .section-title{font-size:1.4rem;margin:0 0 18px}
@media(max-width:900px){
	.post-grid{grid-template-columns:repeat(2,1fr)}
	.blog-hero h1{font-size:1.6rem}
	.single-title{font-size:1.55rem}
}
@media(max-width:600px){
	.post-grid{grid-template-columns:1fr}
	.post-nav{flex-direction:column}
	.post-nav-next{text-align:left}
}

/* ================= DARK MODE ================= */
html.dark{
	color-scheme:dark;
	--accent:#4da3f7;
	--accent-dark:#1895F5;
	--ink:#f1f5f9;
	--muted:#94a3b8;
	--bg:#0b1220;
	--bg-alt:#101a30;
	--card:#131d33;
	--border:#22304d;
	--shadow:0 2px 12px rgba(0,0,0,.45);
}
html.dark .site-header{background:rgba(11,18,32,.94)}
html.dark .tab{background:var(--card);border-color:var(--border);color:var(--ink)}
html.dark .btn-copy{background:var(--card)}
html.dark .disclaimer-note{background:#2a2113;border-color:#8a6d1f;color:#fde68a}
html.dark .bfrp-card:hover,html.dark .code-card:hover,html.dark .apk-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.5)}
html.dark .post-card{background:var(--card);border-color:var(--border)}
html.dark .post-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.5)}
html.dark .post-thumb{background:linear-gradient(135deg,#1a2340,#232f52)}
html.dark .post-cat{background:#12283f;color:#8ec7f8}
html.dark .post-meta{border-color:var(--border)}
html.dark .post-pagination .page-numbers{background:var(--card);border-color:var(--border);color:var(--ink)}
html.dark .single-content{color:#dbe3f0}
html.dark .post-tags a{background:#1a2340;color:var(--ink)}
html.dark .post-nav{border-color:var(--border)}
@media (max-width:899px){
	html.dark .primary-nav{background:var(--card)}
}

/* ---------- dark mode toggle button ---------- */
.header-actions{display:flex;align-items:center;gap:8px}
.dark-toggle{
	background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;
	width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
	cursor:pointer;color:var(--ink);padding:0;flex-shrink:0;
}
.dark-toggle:hover{border-color:var(--accent);color:var(--accent)}
.dark-toggle .icon-sun{display:none}
html.dark .dark-toggle .icon-sun{display:block}
html.dark .dark-toggle .icon-moon{display:none}

/* ---------- logo image ---------- */
.demo-logo img{height:38px;width:auto;display:block}
.demo-logo .logo-dark{display:none}
html.dark .demo-logo .logo-dark{display:block}
html.dark .demo-logo .logo-light{display:none}
.footer-brand .demo-logo img{height:44px}