*{ box-sizing: border-box; }

:root{
--tba-bg:#0b1220;
--tba-bg2:#0f172a;
--tba-surface:#111827;
--tba-surface2:#1e293b;
--tba-text:#f8fafc;
--tba-muted:#94a3b8;
--tba-border:#334155;
--tba-accent:#2563eb;
--tba-glow:rgba(37,99,235,.35);
--tba-shadow:0 8px 32px rgba(0,0,0,.18);
}
html[data-theme="light"]{
--tba-bg:#dce4f2;
--tba-bg2:#eef2f9;
--tba-surface:#ffffff;
--tba-surface2:#f1f5fb;
--tba-text:#0c1222;
--tba-muted:#475569;
--tba-border:#b8c5d9;
--tba-accent:#1d4ed8;
--tba-accent-soft:#dbeafe;
--tba-glow:rgba(29,78,216,.12);
--tba-shadow:0 4px 24px rgba(15,23,42,.08);
--tba-shadow-lg:0 12px 40px rgba(15,23,42,.12);
color-scheme:light;
}
 
body{
margin:0;
font-family:Cairo,sans-serif;
background:var(--tba-bg);
color:var(--tba-text);
text-align:center;
padding-top:72px;
position:relative;
overflow-x:hidden;
min-height:100vh;
}
body::before{
content:'';
position:fixed;
inset:0;
z-index:-2;
background:
radial-gradient(ellipse 80% 50% at 20% -10%, rgba(37,99,235,.22), transparent 55%),
radial-gradient(ellipse 60% 40% at 90% 10%, rgba(124,58,237,.18), transparent 50%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(14,165,233,.12), transparent 55%),
linear-gradient(160deg, var(--tba-bg) 0%, var(--tba-bg2) 45%, #0a0f1a 100%);
animation:tbaBgShift 20s ease-in-out infinite;
}
html[data-theme="light"] body::before{
background:
radial-gradient(ellipse 90% 60% at 10% 0%, rgba(59,130,246,.18), transparent 50%),
radial-gradient(ellipse 70% 50% at 95% 5%, rgba(139,92,246,.1), transparent 45%),
radial-gradient(ellipse 80% 40% at 50% 100%, rgba(14,165,233,.08), transparent 50%),
linear-gradient(165deg, #e8eef8 0%, #f4f7fc 40%, #dce4f2 100%);
animation:tbaLightShift 24s ease-in-out infinite;
}
html[data-theme="light"] body::after{
opacity:.35;
background:radial-gradient(circle, rgba(59,130,246,.25), transparent 70%);
}
@keyframes tbaLightShift{
0%,100%{filter:none;}
50%{filter:brightness(1.02);}
}
body::after{
content:'';
position:fixed;
width:320px;height:320px;
top:15%;right:-80px;
border-radius:50%;
background:radial-gradient(circle, var(--tba-glow), transparent 70%);
filter:blur(40px);
opacity:.6;
z-index:-1;
animation:tbaOrbFloat 14s ease-in-out infinite;
pointer-events:none;
}
@keyframes tbaBgShift{
0%,100%{filter:hue-rotate(0deg);}
50%{filter:hue-rotate(8deg);}
}
@keyframes tbaOrbFloat{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(-30px,40px) scale(1.08);}
}
 
.topbar{
position:fixed;
top:0;left:0;right:0;
min-height:60px;
padding:8px 70px 8px 12px;
background:color-mix(in srgb, var(--tba-bg2) 88%, transparent);
backdrop-filter:blur(16px) saturate(1.2);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-weight:bold;
z-index:3000;
box-shadow:0 2px 16px rgba(0,0,0,.45);
border-bottom:1px solid rgba(37,99,235,.25);
}
.topbar-brand{
display:flex;
align-items:center;
gap:10px;
color:#fff;
text-decoration:none;
font-weight:900;
flex-shrink:0;
}
.topbar-logo{
width:44px;
height:44px;
object-fit:contain;
animation:tbaLogoPulse 3s ease-in-out infinite;
filter:drop-shadow(0 0 10px rgba(59,130,246,.5));
}
.tba-logo{
background:transparent!important;
border-radius:12px;
}
@keyframes tbaLogoPulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.05);}
}
.search-wrap{
position:relative;
flex:1;
max-width:420px;
margin:0 auto;
}
#tool-search{
margin:0;
height:40px;
padding:8px 14px;
font-size:14px;
text-align:right;
border-radius:999px;
background:#1e293b;
border:1px solid #334155;
}
.search-results{
display:none;
position:absolute;
top:calc(100% + 6px);
left:0;right:0;
max-height:320px;
overflow-y:auto;
background:#0f172a;
border:1px solid #334155;
border-radius:14px;
box-shadow:0 12px 40px rgba(0,0,0,.5);
z-index:4000;
text-align:right;
}
.search-results.open{display:block;animation:tbaFadeIn .2s ease;}
.search-hit{
display:flex;
gap:12px;
padding:12px 14px;
cursor:pointer;
border-bottom:1px solid #1f2937;
transition:.15s;
}
.search-hit:hover{background:#1e293b;}
.search-hit strong{display:block;color:#fff;font-size:14px;}
.search-hit small{color:#94a3b8;font-size:12px;}
.search-empty{padding:14px;color:#94a3b8;font-size:13px;}
.topbar-fav-btn{
width:42px!important;
height:42px;
margin:0!important;
padding:0!important;
border-radius:50%!important;
background:#1e293b!important;
font-size:18px;
flex-shrink:0;
}
.hero-brand{margin-bottom:8px;}
.hero-logo{
width:min(150px, 38vw);
height:min(150px, 38vw);
object-fit:contain;
margin-bottom:12px;
animation:tbaHeroFloat 4s ease-in-out infinite;
filter:drop-shadow(0 10px 28px rgba(37,99,235,.4));
}
@keyframes tbaHeroFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}
.hero-tagline{color:#60a5fa;font-size:15px;margin:0 0 16px;}
.tba-fade-in{animation:tbaFadeIn .6s ease;}
@keyframes tbaFadeIn{
from{opacity:0;transform:translateY(12px);}
to{opacity:1;transform:translateY(0);}
}
 
.fab{
position:fixed;
top:8px;
right:15px;
width:45px;
height:45px;
border-radius:50%;
background:linear-gradient(135deg,#2563eb,#7c3aed);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:5000;
font-size:20px;
box-shadow:0 4px 20px rgba(37,99,235,.45);
transition:transform .25s, box-shadow .25s;
}
.fab:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(37,99,235,.55);}
.fab:active{transform:scale(.96);}
 
.overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(4px);
z-index:3400;
opacity:0;
transition:opacity .3s ease;
}
.overlay.open{display:block;animation:tbaOverlayIn .3s forwards;}
@keyframes tbaOverlayIn{to{opacity:1;}}
 
.sidebar{
position:fixed;
top:0;
right:-320px;
width:min(320px, 92vw);
height:100vh;
background:color-mix(in srgb, var(--tba-bg2) 75%, transparent);
backdrop-filter:blur(20px) saturate(1.3);
-webkit-backdrop-filter:blur(20px) saturate(1.3);
border-left:1px solid color-mix(in srgb, var(--tba-accent) 35%, var(--tba-border));
padding:64px 14px 20px;
transition:right .35s cubic-bezier(.4,0,.2,1);
overflow-y:auto;
z-index:3500;
text-align:right;
box-shadow:-12px 0 40px rgba(0,0,0,.45);
}
 
.sidebar.open{right:0;}
.sidebar-loaded .item{animation:tbaSidebarItem .4s ease backwards;animation-delay:calc(var(--i, 0) * 0.02s);}
@keyframes tbaSidebarItem{
from{opacity:0;transform:translateX(12px);}
to{opacity:1;transform:none;}
}
.sidebar-head{
display:flex;
align-items:center;
gap:12px;
padding:12px;
margin-bottom:8px;
background:color-mix(in srgb, var(--tba-surface) 80%, transparent);
border-radius:14px;
border:1px solid var(--tba-border);
}
.sidebar-head strong{display:block;font-size:15px;color:var(--tba-text);}
.sidebar-head small{color:var(--tba-muted);font-size:12px;}
.sidebar-loading{
padding:24px;
color:var(--tba-muted);
animation:tbaPulse 1.2s ease-in-out infinite;
}
@keyframes tbaPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
 
.sectionTitle{
color:var(--tba-muted);
font-size:13px;
margin-top:15px;
padding-right:5px;
font-weight:700;
}
 
.item{
padding:10px 12px;
margin:6px 0;
background:color-mix(in srgb, var(--tba-surface) 90%, transparent);
border:1px solid transparent;
border-radius:10px;
cursor:pointer;
transition:background .2s, transform .2s, border-color .2s;
}
 
.item:hover{
background:var(--tba-surface2);
border-color:color-mix(in srgb, var(--tba-accent) 40%, transparent);
transform:translateX(-4px);
}
 
.page{
display:none;
max-width:900px;
margin:auto;
}
 
.page.active{display:block;}
 
input,textarea{
width:100%;
padding:10px;
margin-top:10px;
border:1px solid #374151;
border-radius:10px;
font-family:Cairo;
text-align:center;
background:#1f2937;
color:white;
transition:0.2s;
box-sizing:border-box;
}
 
input:focus, textarea:focus{
outline:none;
border-color:#2563eb;
}
 
button{
width:100%;
padding:10px;
margin-top:10px;
border:none;
border-radius:10px;
font-family:Cairo;
text-align:center;
transition:0.2s;
background:#2563eb;
color:white;
cursor:pointer;
font-size:15px;
}
 
button:hover{
transform:scale(1.03);
background:#1d4ed8;
}
 
.back{
background:#374151;
}
 
.back:hover{
background:#4b5563;
}
 
/* HERO */
.hero{
max-width:900px;
margin:auto;
padding:30px 20px;
}
 
.hero h1{
font-size:42px;
margin-bottom:10px;
font-weight:900;
}
 
/* HOME SECTIONS */
.section-label{
font-size:13px;
color:#94a3b8;
text-transform:uppercase;
letter-spacing:2px;
margin-top:40px;
margin-bottom:8px;
}
 
/* ABOUT */
.about-box{
background:color-mix(in srgb, var(--tba-surface) 90%, transparent);
border:1px solid color-mix(in srgb, var(--tba-accent) 28%, var(--tba-border));
border-radius:20px;
padding:28px 24px;
text-align:right;
line-height:2;
color:var(--tba-muted);
font-size:16px;
position:relative;
overflow:hidden;
box-shadow:var(--tba-shadow, 0 8px 28px rgba(0,0,0,.12));
animation:tbaPanelIn .6s ease;
}
 
.about-box::before{
content:'';
position:absolute;
top:-40px;right:-40px;
width:140px;height:140px;
background:radial-gradient(circle,#2563eb22,transparent 70%);
border-radius:50%;
}
 
.about-box h2{
color:var(--tba-text);
font-size:22px;
margin-bottom:10px;
font-weight:700;
}
 
.about-box .highlight{
color:#60a5fa;
font-weight:700;
}
 
/* TOOLS GRID */
.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:12px;
margin-top:10px;
}
 
.tool-card{
background:linear-gradient(160deg,#111827,#0f172a);
border:1px solid #1f2937;
border-radius:14px;
padding:18px 14px;
text-align:center;
transition:transform .25s, box-shadow .25s, border-color .25s;
position:relative;
}

.tool-card:hover{
background:#1e293b;
border-color:#3b82f6;
transform:translateY(-4px) scale(1.02);
box-shadow:0 10px 24px rgba(37,99,235,.18);
}
.tba-animated-card{animation:tbaCardIn .4s ease backwards;}
@keyframes tbaCardIn{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
.fav-btn{
position:absolute;
top:8px;
left:8px;
width:32px;
height:32px;
border:none;
border-radius:50%;
background:rgba(15,23,42,.85);
color:#94a3b8;
font-size:18px;
cursor:pointer;
z-index:2;
line-height:1;
padding:0;
margin:0!important;
transition:.2s;
}
.fav-btn:hover,.fav-btn.active{
color:#fbbf24;
background:#1e293b;
transform:scale(1.1);
}
.fav-grid .tool-card{padding-top:28px;}
.sidebar-footer{padding:12px 0;border-top:1px solid #1f2937;margin-top:12px;}
.sidebar-suggest-btn{
width:100%;
padding:10px;
background:linear-gradient(135deg,#2563eb,#7c3aed);
border:none;
border-radius:10px;
color:#fff;
font-family:Cairo;
font-weight:700;
cursor:pointer;
margin:0;
}
.sidebar-suggest-btn:hover{filter:brightness(1.1);}
.tba-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
z-index:6000;
align-items:center;
justify-content:center;
padding:20px;
}
.tba-modal.open{display:flex;animation:tbaFadeIn .2s;}
.tba-modal-box{
background:#111827;
border:1px solid #334155;
border-radius:16px;
padding:24px;
max-width:420px;
width:100%;
text-align:right;
}
.tba-modal-box h3{margin:0 0 8px;}
.page.active{animation:tbaPageIn .35s ease;}
@keyframes tbaPageIn{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:none;}
}
body.tba-ready .cat-card{animation:tbaFadeIn .5s ease backwards;}
body.tba-ready .cat-card:nth-child(1){animation-delay:.03s;}
body.tba-ready .cat-card:nth-child(3){animation-delay:.06s;}
body.tba-ready .cat-card:nth-child(5){animation-delay:.09s;}
@media(max-width:640px){
.topbar{flex-wrap:wrap;padding-right:56px;}
.search-wrap{order:3;flex:1 1 100%;max-width:none;}
}
 
.tool-card .icon{
font-size:28px;
margin-bottom:8px;
}
 
.tool-card h4{
margin:0 0 5px;
font-size:15px;
color:white;
}
 
.tool-card p{
margin:0;
font-size:13px;
color:#94a3b8;
}

/* ===== CATEGORY ACCORDION ===== */
.cat-grid{
display:flex;
flex-direction:column;
gap:6px;
margin-top:10px;
}

.cat-card{
display:flex;
align-items:center;
gap:14px;
background:linear-gradient(135deg,#111827 0%,#0f172a 100%);
border:1px solid #1f2937;
border-radius:16px;
padding:16px 20px;
cursor:pointer;
transition:transform .25s, box-shadow .25s, border-color .25s;
user-select:none;
position:relative;
overflow:hidden;
}
.cat-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(105deg,transparent 40%,rgba(37,99,235,.08) 50%,transparent 60%);
transform:translateX(-100%);
transition:transform .6s;
}
.cat-card:hover::before{transform:translateX(100%);}
.cat-card:hover{
background:#1a2332;
border-color:#3b82f6;
transform:translateY(-2px);
box-shadow:0 8px 28px rgba(37,99,235,.2);
}

.cat-icon{
font-size:26px;
flex-shrink:0;
}

.cat-info{
flex:1;
text-align:right;
}

.cat-title{
font-size:16px;
font-weight:700;
color:white;
}

.cat-sub{
font-size:12px;
color:#60a5fa;
margin-top:2px;
}

.cat-arrow{
color:#60a5fa;
font-size:14px;
transition:transform 0.3s;
}

.cat-arrow.open{
transform:rotate(180deg);
}

.cat-tools{
display:none;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:10px;
padding:4px 0 10px;
}

.cat-tools.open{
display:grid;
}

.coming-soon{
opacity:0.6;
cursor:default !important;
}

.coming-soon:hover{
transform:none !important;
background:#111827 !important;
border-color:#1f2937 !important;
}

.soon-badge{
display:inline-block;
background:#7c3aed22;
color:#a78bfa;
border:1px solid #7c3aed44;
font-size:10px;
padding:1px 7px;
border-radius:10px;
margin-right:4px;
vertical-align:middle;
}
 
/* PANELS (goals, pricing, about) */
.tba-panel{
background:color-mix(in srgb, var(--tba-surface) 88%, transparent);
backdrop-filter:blur(12px);
border:1px solid color-mix(in srgb, var(--tba-accent) 22%, var(--tba-border));
border-radius:20px;
padding:24px 20px;
box-shadow:var(--tba-shadow, 0 8px 32px rgba(0,0,0,.15));
}
.tba-animate-panel{animation:tbaPanelIn .65s ease backwards;}
@keyframes tbaPanelIn{
from{opacity:0;transform:translateY(16px);}
to{opacity:1;transform:none;}
}
.tba-animate-banner{animation:tbaBannerPulse 3s ease-in-out infinite;}
@keyframes tbaBannerPulse{
0%,100%{box-shadow:0 4px 20px rgba(124,58,237,.25);}
50%{box-shadow:0 8px 32px rgba(37,99,235,.35);}
}

/* GOALS */
.goals-box{
text-align:right;
}
.tba-goal-item{
display:flex;
align-items:flex-start;
gap:14px;
margin-bottom:18px;
padding:12px 14px;
border-radius:14px;
background:color-mix(in srgb, var(--tba-surface2) 60%, transparent);
border:1px solid transparent;
transition:transform .25s, border-color .25s, box-shadow .25s;
animation:tbaGoalIn .5s ease backwards;
animation-delay:calc(var(--i, 0) * 0.08s);
}
.tba-goal-item:last-child{margin-bottom:0;}
.tba-goal-item:hover{
transform:translateX(-4px);
border-color:color-mix(in srgb, var(--tba-accent) 35%, transparent);
box-shadow:0 8px 24px rgba(37,99,235,.12);
}
@keyframes tbaGoalIn{
from{opacity:0;transform:translateX(10px);}
to{opacity:1;transform:none;}
}
.goal-icon{
font-size:28px;
flex-shrink:0;
margin-top:2px;
animation:tbaIconBob 3s ease-in-out infinite;
animation-delay:calc(var(--i, 0) * 0.15s);
}
.goal-text h4{
margin:0 0 4px;
font-size:16px;
color:var(--tba-text);
}
.goal-text p{
margin:0;
font-size:14px;
color:var(--tba-muted);
line-height:1.7;
}
 
/* CONTACT */
.contact-box{
background:var(--tba-surface);
border:1px solid var(--tba-border);
border-radius:18px;
padding:24px 20px;
}
 
.contact-box p{
color:var(--tba-muted);
font-size:15px;
margin-top:0;
}

.tba-contact-lead{
color:var(--tba-muted);
font-size:15px;
margin:-4px auto 16px;
max-width:560px;
line-height:1.75;
}
.tba-contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:14px;
max-width:900px;
margin:0 auto 8px;
}
.tba-contact-card{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
padding:22px 16px;
border-radius:18px;
border:1px solid var(--tba-border);
background:color-mix(in srgb, var(--tba-surface) 92%, transparent);
backdrop-filter:blur(8px);
cursor:pointer;
text-decoration:none;
color:var(--tba-text);
font-family:Cairo,sans-serif;
transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s, border-color .28s;
animation:tbaContactIn .55s ease backwards;
animation-delay:calc(var(--d, 0) * 0.1s);
position:relative;
overflow:hidden;
}
.tba-contact-card::before{
content:'';
position:absolute;
inset:0;
opacity:0;
transition:opacity .3s;
pointer-events:none;
}
.tba-contact-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 16px 40px rgba(0,0,0,.2);
}
.tba-cc-suggest{border-color:color-mix(in srgb, #7c3aed 45%, var(--tba-border));}
.tba-cc-suggest::before{background:linear-gradient(135deg,rgba(124,58,237,.12),transparent);}
.tba-cc-suggest:hover::before{opacity:1;}
.tba-cc-wa{border-color:color-mix(in srgb, #25D366 40%, var(--tba-border));}
.tba-cc-wa::before{background:linear-gradient(135deg,rgba(37,211,102,.15),transparent);}
.tba-cc-wa:hover::before{opacity:1;}
.tba-cc-ig{border-color:color-mix(in srgb, #dd2a7b 35%, var(--tba-border));}
.tba-cc-ig::before{background:linear-gradient(135deg,rgba(221,42,123,.12),transparent);}
.tba-cc-ig:hover::before{opacity:1;}
.tba-cc-icon{font-size:2rem;line-height:1;animation:tbaIconBob 3s ease-in-out infinite;}
.tba-contact-card strong{font-size:16px;}
.tba-cc-desc{font-size:13px;color:var(--tba-muted);line-height:1.5;}
.tba-cc-cta{
font-size:12px;
font-weight:700;
margin-top:4px;
padding:6px 14px;
border-radius:999px;
background:color-mix(in srgb, var(--tba-accent) 18%, transparent);
color:var(--tba-accent);
}
.tba-cc-wa .tba-cc-cta{background:rgba(37,211,102,.15);color:#25D366;}
.tba-cc-ig .tba-cc-cta{background:rgba(221,42,123,.12);color:#db2777;}
@keyframes tbaContactIn{
from{opacity:0;transform:translateY(20px) scale(.96);}
to{opacity:1;transform:none;}
}
@keyframes tbaIconBob{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-4px);}
}
 
.contact-btns{
display:flex;
flex-direction:column;
gap:12px;
margin-top:16px;
}
 
.contact-btns a{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 20px;
border-radius:12px;
text-decoration:none;
font-weight:700;
font-size:16px;
font-family:Cairo;
transition:0.25s;
}
 
.contact-btns a.wa{
background:#25D366;
color:#fff;
}
 
.contact-btns a.wa:hover{
background:#1ebe57;
transform:scale(1.02);
}
 
.contact-btns a.ig{
background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
color:#fff;
}
 
.contact-btns a.ig:hover{
opacity:0.88;
transform:scale(1.02);
}
 
/* OUTPUT */
pre, .output-box{
background:#1f2937;
border-radius:10px;
padding:15px;
margin-top:10px;
text-align:left;
direction:ltr;
white-space:pre-wrap;
word-break:break-all;
color:#a3e635;
font-size:14px;
border:1px solid #374151;
}
 
.output-box{
text-align:center;
direction:rtl;
color:#60a5fa;
font-size:16px;
}
 
/* ===== AI CHAT ===== */
.chat-box{
background:#0b1220;
border:1px solid #1f2937;
border-radius:14px;
height:420px;
overflow-y:auto;
padding:16px;
margin-top:12px;
display:flex;
flex-direction:column;
gap:12px;
scroll-behavior:smooth;
}
.chat-msg{
max-width:88%;
padding:16px 20px;
border-radius:14px;
font-size:17px;
line-height:1.95;
white-space:pre-wrap;
word-break:break-word;
}
.chat-msg.user{
background:#2563eb;
color:white;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.chat-msg.bot{
background:#1f2937;
color:#e2e8f0;
align-self:flex-start;
border-bottom-left-radius:4px;
text-align:right;
direction:rtl;
white-space:normal;
font-size:18px;
line-height:2;
}
.chat-msg.bot p{
margin:0 0 12px;
}
.chat-msg.bot p:last-child{
margin-bottom:0;
}
.chat-msg.bot .bot-heading{
display:block;
font-size:20px;
font-weight:900;
color:#ffffff;
margin:6px 0 10px;
}
.chat-msg.bot .bot-point{
display:block;
padding:4px 0;
}
.chat-msg.bot strong{
color:#93c5fd;
font-weight:900;
}
.chat-msg.typing{
color:#60a5fa;
font-style:italic;
}
.chat-input-row{
display:flex;
gap:8px;
margin-top:10px;
}
.chat-input-row textarea{
flex:1;
margin:0;
resize:none;
height:50px;
padding:12px;
font-size:16px;
}
.chat-input-row button{
width:auto;
padding:0 20px;
margin:0;
height:50px;
font-size:18px;
}
.chat-attach-btn{
width:50px !important;
padding:0 !important;
background:#374151 !important;
flex-shrink:0;
}
.chat-attach-bar{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
padding:8px 12px;
background:#1e293b;
border:1px solid #334155;
border-radius:10px;
font-size:14px;
color:#cbd5e1;
}
.chat-attach-bar img{
width:48px;
height:48px;
object-fit:cover;
border-radius:8px;
border:1px solid #475569;
}
.chat-attach-bar .chat-attach-remove{
margin-right:auto;
background:#ef4444;
padding:4px 12px;
font-size:13px;
height:auto;
width:auto;
}
.chat-msg.user .chat-attach-thumb{
max-width:160px;
max-height:120px;
border-radius:8px;
margin-bottom:8px;
display:block;
border:1px solid rgba(255,255,255,.25);
}
.chat-msg.user .chat-attach-label{
font-size:12px;
opacity:.9;
margin-bottom:4px;
}

/* ===== AI IMAGE ===== */
.aiimg-result{
margin-top:16px;
text-align:center;
}
.aiimg-result img{
max-width:100%;
border-radius:14px;
border:2px solid #2563eb44;
box-shadow:0 8px 30px rgba(37,99,235,0.2);
}
.style-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:8px;
margin-top:8px;
}
.style-btn{
padding:8px 6px;
border-radius:10px;
border:2px solid #1f2937;
background:#111827;
color:#94a3b8;
cursor:pointer;
font-family:Cairo;
font-size:13px;
transition:0.2s;
}
.style-btn:hover,.style-btn.active{
border-color:#2563eb;
color:white;
background:#1e3a8a;
}

/* ===== BG REMOVE ===== */
.rmbg-wrap{
display:flex;
gap:14px;
margin-top:14px;
flex-wrap:wrap;
}
.rmbg-box{
flex:1;
min-width:200px;
background:#0b1220;
border:1px solid #1f2937;
border-radius:12px;
padding:12px;
text-align:center;
}
.rmbg-box p{
font-size:12px;
color:#94a3b8;
margin:8px 0 0;
}
.rmbg-box img,.rmbg-box canvas{
max-width:100%;
max-height:260px;
border-radius:8px;
}
.checkerboard{
background-image:linear-gradient(45deg,#374151 25%,transparent 25%),
  linear-gradient(-45deg,#374151 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#374151 75%),
  linear-gradient(-45deg,transparent 75%,#374151 75%);
background-size:16px 16px;
background-position:0 0,0 8px,8px -8px,-8px 0px;
}


.gif-section{
background:#111827;
border:1px solid #1f2937;
border-radius:16px;
padding:22px 20px;
margin-bottom:18px;
text-align:right;
}
 
.gif-section-title{
font-size:17px;
font-weight:700;
color:#e2e8f0;
margin:0 0 16px 0;
padding-bottom:12px;
border-bottom:1px solid #1f2937;
}
 
.gif-section label{
display:block;
font-size:14px;
color:#94a3b8;
margin-top:12px;
margin-bottom:4px;
}
 
.range-row{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}
 
.range-row label{
margin:0;
min-width:130px;
font-size:14px;
color:#94a3b8;
}
 
.range-row input[type=range]{
flex:1;
margin:0;
padding:4px;
cursor:pointer;
}
 
.range-row span{
min-width:38px;
text-align:center;
font-size:14px;
color:#60a5fa;
font-weight:700;
}
 
.gif-preview-box{
background:#0b1220;
border:1px dashed #374151;
border-radius:12px;
padding:16px;
margin-top:12px;
min-height:80px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:8px;
}
 
.gif-preview-box img{
max-height:110px;
max-width:110px;
border-radius:8px;
border:2px solid #374151;
object-fit:cover;
}
 
.gif-preview-empty{
color:#4b5563;
font-size:14px;
}
 
.gif-status{
font-size:13px;
color:#94a3b8;
margin-top:8px;
min-height:18px;
text-align:center;
}
 
.gif-progress-wrap{
display:none;
background:#1f2937;
border-radius:10px;
height:10px;
margin-top:12px;
overflow:hidden;
}
 
.gif-progress-bar{
height:100%;
background:linear-gradient(90deg,#2563eb,#60a5fa);
width:0%;
transition:width 0.3s;
border-radius:10px;
}
 
.gif-result-box{
display:none;
background:#0b1220;
border:1px solid #374151;
border-radius:12px;
padding:16px;
margin-top:14px;
text-align:center;
}
 
.gif-result-box img{
max-width:100%;
max-height:320px;
border-radius:10px;
}
 
.btn-green-gif{
background:#10b981 !important;
}
.btn-green-gif:hover{
background:#059669 !important;
}
 
.frame-item{
position:relative;
display:inline-block;
}
 
.frame-del{
position:absolute;
top:-6px;
right:-6px;
width:20px;
height:20px;
border-radius:50%;
background:#ef4444;
font-size:11px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:none;
padding:0;
color:white;
font-weight:bold;
margin:0;
line-height:1;
min-width:20px;
}
 
.frame-del:hover{
background:#dc2626;
transform:scale(1.15) !important;
}
 
.gif-divider{
border:none;
border-top:2px dashed #1f2937;
margin:28px 0 20px;
}
 
/* ===== TEXT TO GIF ===== */
.txt-gif-canvas-wrap{
background:#0b1220;
border:1px solid #374151;
border-radius:12px;
padding:14px;
margin-top:12px;
text-align:center;
}
.txt-gif-canvas-wrap canvas{
border-radius:8px;
max-width:100%;
}
.color-row{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
flex-wrap:wrap;
}
.color-row label{
font-size:13px;
color:#94a3b8;
min-width:110px;
}
.color-row input[type=color]{
width:42px;height:38px;
border:1px solid #374151;
border-radius:8px;
background:#1f2937;
cursor:pointer;
padding:2px;
}


/* ===== LEARN SECTION ===== */
.learn-hero-badge{
display:inline-block;
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:white;
font-size:13px;
font-weight:700;
padding:5px 16px;
border-radius:20px;
margin-bottom:16px;
letter-spacing:1px;
}
.courses-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:16px;
margin-top:16px;
}
.course-card{
background:#111827;
border:1px solid #1f2937;
border-radius:16px;
padding:22px 18px;
text-align:right;
transition:0.25s;
position:relative;
overflow:hidden;
}
.course-card::before{
content:'';
position:absolute;
top:-30px;left:-30px;
width:100px;height:100px;
border-radius:50%;
opacity:0.08;
}
.course-card:hover{
border-color:#2563eb55;
transform:translateY(-4px);
box-shadow:0 8px 24px rgba(37,99,235,0.15);
}
.course-card .c-icon{
font-size:36px;
margin-bottom:10px;
display:block;
}
.course-card .c-lang{
font-size:11px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:6px;
}
.course-card h3{
margin:0 0 8px;
font-size:17px;
color:white;
font-weight:700;
}
.course-card p{
margin:0 0 14px;
font-size:13px;
color:#94a3b8;
line-height:1.8;
}
.course-card .c-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:14px;
justify-content:flex-end;
}
.course-card .c-tag{
font-size:11px;
padding:3px 10px;
border-radius:20px;
background:#1f2937;
color:#60a5fa;
border:1px solid #2563eb33;
}
.course-card .c-level{
font-size:12px;
color:#94a3b8;
margin-bottom:14px;
display:flex;
align-items:center;
gap:6px;
justify-content:flex-end;
}
.course-card .c-dots{
display:flex;gap:3px;
}
.course-card .c-dot{
width:8px;height:8px;
border-radius:50%;
background:#2563eb;
}
.course-card .c-dot.empty{
background:#374151;
}
.course-wa-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 16px;
background:#25D366;
color:white;
text-decoration:none;
border-radius:10px;
font-weight:700;
font-size:14px;
font-family:Cairo;
transition:0.2s;
}
.course-wa-btn:hover{
background:#1ebe57;
transform:scale(1.02);
}
/* color accent per lang */
.accent-html::before{ background:#f97316; }
.accent-css::before{ background:#2563eb; }
.accent-js::before{ background:#eab308; }
.accent-py::before{ background:#3b82f6; }
.accent-react::before{ background:#06b6d4; }
.accent-cpp::before{ background:#8b5cf6; }
.c-lang-html{ color:#f97316; }
.c-lang-css{ color:#60a5fa; }
.c-lang-js{ color:#fbbf24; }
.c-lang-py{ color:#3b82f6; }
.c-lang-react{ color:#22d3ee; }
.c-lang-cpp{ color:#a78bfa; }

/* ===== PRICING CARDS ===== */
.pricing-section-title{
font-size:13px;
color:#94a3b8;
text-transform:uppercase;
letter-spacing:2px;
margin-top:40px;
margin-bottom:6px;
}
.launch-banner{
background:linear-gradient(135deg,#7c3aed,#2563eb,#0ea5e9);
background-size:200% 200%;
animation:tbaBannerShift 8s ease infinite, tbaBannerPulse 3s ease-in-out infinite;
border-radius:16px;
padding:14px 20px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:20px;
font-size:15px;
font-weight:700;
color:white;
border:1px solid rgba(255,255,255,.15);
}
@keyframes tbaBannerShift{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.launch-banner .badge{
background:rgba(255,255,255,0.2);
border-radius:20px;
padding:4px 14px;
font-size:13px;
white-space:nowrap;
}
.pricing-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:16px;
margin-top:8px;
}
.tba-stagger-grid .tba-price-card{
animation:tbaPriceIn .55s ease backwards;
animation-delay:calc(var(--i, 0) * 0.1s);
}
@keyframes tbaPriceIn{
from{opacity:0;transform:translateY(20px) scale(.97);}
to{opacity:1;transform:none;}
}
.price-card{
background:color-mix(in srgb, var(--tba-surface) 92%, transparent);
border:1px solid var(--tba-border);
border-radius:18px;
padding:24px 20px;
text-align:center;
position:relative;
transition:transform .28s, box-shadow .28s, border-color .28s;
}
.price-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 14px 36px rgba(37,99,235,0.2);
border-color:color-mix(in srgb, var(--tba-accent) 45%, var(--tba-border));
}
.price-card.popular{
border-color:var(--tba-accent);
background:linear-gradient(160deg,color-mix(in srgb, var(--tba-accent) 12%, var(--tba-surface)), var(--tba-surface));
}
.price-card .p-icon{
display:inline-block;
animation:tbaIconBob 3.5s ease-in-out infinite;
}
.price-card .pop-badge{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:white;
font-size:12px;
font-weight:700;
padding:4px 16px;
border-radius:20px;
white-space:nowrap;
}
.price-card .p-icon{font-size:32px;margin-bottom:10px;display:block;}
.price-card .p-title{font-size:17px;font-weight:700;color:var(--tba-text);margin-bottom:6px;}
.price-card .p-sessions{font-size:13px;color:var(--tba-muted);margin-bottom:16px;}
.price-card .p-old{
font-size:16px;
color:#64748b;
text-decoration:line-through;
margin-bottom:4px;
}
.price-card .p-new{
font-size:34px;
font-weight:900;
color:#60a5fa;
line-height:1;
margin-bottom:4px;
}
.price-card.popular .p-new{color:#a78bfa;}
.price-card .p-currency{font-size:16px;color:#94a3b8;margin-bottom:12px;}
.price-card .p-discount{
display:inline-block;
background:#10b98122;
color:#10b981;
border:1px solid #10b98144;
font-size:12px;
font-weight:700;
padding:3px 12px;
border-radius:20px;
margin-bottom:14px;
}
.price-card .p-perks{
list-style:none;
padding:0;
margin:0 0 16px;
text-align:right;
}
.price-card .p-perks li{
font-size:13px;
color:#94a3b8;
padding:4px 0;
display:flex;
align-items:center;
gap:8px;
justify-content:flex-end;
}
.price-card .p-perks li::before{content:'✓';color:#10b981;font-weight:700;flex-shrink:0;}
.price-card .p-btn{
display:block;
width:100%;
padding:11px;
border-radius:10px;
background:#2563eb;
color:white;
text-decoration:none;
font-weight:700;
font-family:Cairo;
font-size:14px;
transition:0.2s;
border:none;
cursor:pointer;
}
.price-card.popular .p-btn{background:linear-gradient(135deg,#2563eb,#7c3aed);}
.price-card .p-btn:hover{opacity:0.88;transform:scale(1.02);}

.group-box{
background:color-mix(in srgb, #10b981 10%, var(--tba-surface));
border:1px solid color-mix(in srgb, #10b981 35%, var(--tba-border));
border-radius:18px;
padding:24px 20px;
margin-top:20px;
text-align:right;
}
.group-box h3{color:var(--tba-text);font-size:18px;margin:0 0 8px;}
.group-box p{color:var(--tba-muted);font-size:14px;line-height:1.9;margin:0 0 16px;}
.group-tiers{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.group-tier{
background:color-mix(in srgb, var(--tba-surface2) 80%, transparent);
border:1px solid var(--tba-border);
border-radius:12px;
padding:10px 16px;
font-size:13px;
color:var(--tba-text);
display:flex;
flex-direction:column;
gap:3px;
flex:1;
min-width:120px;
text-align:center;
transition:transform .25s, border-color .25s;
animation:tbaGoalIn .45s ease backwards;
animation-delay:calc(var(--i, 0) * 0.07s);
}
.group-tier:hover{transform:translateY(-3px);border-color:#10b98188;}
.group-tier .gt-n{font-size:11px;color:var(--tba-muted);}
.group-tier .gt-d{font-size:18px;font-weight:900;color:#10b981;}
.group-tier .gt-l{font-size:12px;color:#60a5fa;}

#vid-preview-wrap video{
max-width:100%;
max-height:260px;
border-radius:10px;
border:1px solid #374151;
}
 




/* Course pages: full width, no constraint */
#course-python, #course-javascript, #course-java, #course-cpp {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* box-sizing for course content */
.cscope-python *, .cscope-javascript *, .cscope-java *, .cscope-cpp * {
  box-sizing: border-box;
}

/* ===== PYTHON COURSE STYLES ===== */
.cscope-python {

    --bg-main: #0a0a0f;
    --bg-card: #111118;
    --bg-card2: #16161f;
    --accent-blue: #3b8fe8;
    --accent-gold: #f5a623;
    --accent-blue-light: #5ba3f5;
    --text-main: #e8e8f0;
    --text-muted: #8888aa;
    --text-code: #a8d8a8;
    --border: #2a2a3a;
    --border-accent: #3b5080;
    --gradient-blue: linear-gradient(135deg, #1a3a6b, #0d2040);
    --radius: 12px;
    --radius-sm: 8px;
  
}
.cscope-python .site-header {
  background: #0d0d15;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.cscope-python .logo-area {
  display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-python .logo-icon {
  width: 44px;
    height: 44px;
}
.cscope-python .logo-text {
  font-size: 1.3rem;
    font-weight: 700;
}
.cscope-python .logo-text span:first-child {
  color: #ffffff;
}
.cscope-python .logo-text span:last-child {
  color: var(--accent-blue);
}
.cscope-python .header-badge {
  background: var(--gradient-blue);
    border: 1px solid var(--border-accent);
    color: var(--accent-blue-light);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.cscope-python .hero {
  background: linear-gradient(160deg, #0d1525 0%, #0a0a0f 50%, #0d1520 100%);
    border-bottom: 1px solid var(--border);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cscope-python .hero::before {
  content: '';
    position: absolute;
    top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(59,143,232,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.cscope-python .hero-label {
  display: inline-block;
    background: rgba(59,143,232,0.12);
    border: 1px solid rgba(59,143,232,0.3);
    color: var(--accent-blue-light);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.cscope-python .hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.cscope-python .hero h1 .highlight {
  color: var(--accent-blue);
}
.cscope-python .hero p {
  font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}
.cscope-python .hero-stats {
  display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.cscope-python .stat {
  text-align: center;
}
.cscope-python .stat-num {
  font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-blue);
}
.cscope-python .stat-label {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-python .section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-python .section-title {
  font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-python .section-title::after {
  content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--border));
}
.cscope-python .section-sub {
  color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.cscope-python .outcomes-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.cscope-python .outcome-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cscope-python .outcome-icon {
  width: 36px; height: 36px;
    background: rgba(59,143,232,0.12);
    border: 1px solid rgba(59,143,232,0.25);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cscope-python .outcome-text h4 {
  font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.cscope-python .outcome-text p {
  font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cscope-python .curriculum-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-python .curriculum-inner {
  max-width: 1100px;
    margin: 0 auto;
}
.cscope-python .chapter {
  margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cscope-python .chapter-header {
  background: var(--bg-card2);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.cscope-python .chapter-num {
  background: linear-gradient(135deg, var(--accent-blue), #1a5fb0);
    color: white;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cscope-python .chapter-title-wrap {
  flex: 1;
}
.cscope-python .chapter-title-wrap h3 {
  font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}
.cscope-python .chapter-title-wrap span {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-python .chapter-toggle {
  color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 0.3s;
}
.cscope-python .chapter.open .chapter-toggle {
  transform: rotate(180deg);
}
.cscope-python .chapter-body {
  display: none;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background: #0e0e16;
}
.cscope-python .chapter.open .chapter-body {
  display: block;
}
.cscope-python .code-block {
  background: #0c0c14;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    direction: ltr;
    text-align: left;
    position: relative;
    overflow-x: auto;
}
.cscope-python .code-block pre {
  font-family: 'Fira Code', monospace;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-code);
    white-space: pre;
}
.cscope-python .code-label {
  position: absolute;
    top: 8px; right: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    background: var(--bg-main);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.cscope-python .kw {
  color: #c792ea;
}
.cscope-python .fn {
  color: #82aaff;
}
.cscope-python .str {
  color: #c3e88d;
}
.cscope-python .num {
  color: #f78c6c;
}
.cscope-python .cm {
  color: #546e7a; font-style: italic;
}
.cscope-python .builtin {
  color: #89ddff;
}
.cscope-python .op {
  color: #89ddff;
}
.cscope-python .var {
  color: #eeffff;
}
.cscope-python .cls {
  color: #ffcb6b;
}
.cscope-python .lesson-title {
  font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-blue-light);
    margin: 1.5rem 0 0.75rem;
}
.cscope-python .lesson-title:first-child {
  margin-top: 0;
}
.cscope-python .lesson-desc {
  color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.cscope-python .tip-box {
  background: rgba(245,166,35,0.06);
    border-right: 3px solid var(--accent-gold);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #ddb870;
}
.cscope-python .tip-box strong {
  color: var(--accent-gold);
}
.cscope-python .info-box {
  background: rgba(59,143,232,0.06);
    border-right: 3px solid var(--accent-blue);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #88aadd;
}
.cscope-python .output-block {
  background: #080810;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: #7ec8a0;
    direction: ltr;
    text-align: left;
    margin: 0.5rem 0;
}
.cscope-python .output-block::before {
  content: '▶ Output:';
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.cscope-python .projects-section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-python .projects-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}
.cscope-python .project-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.cscope-python .project-card::before {
  content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--accent-blue), #1a5fb0);
}
.cscope-python .project-level {
  display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.cscope-python .level-beginner {
  background: rgba(99,153,34,0.15); color: #7ec040; border: 1px solid rgba(99,153,34,0.3);
}
.cscope-python .level-intermediate {
  background: rgba(245,166,35,0.12); color: #f5a623; border: 1px solid rgba(245,166,35,0.3);
}
.cscope-python .level-advanced {
  background: rgba(226,75,74,0.12); color: #e86f6e; border: 1px solid rgba(226,75,74,0.3);
}
.cscope-python .project-card h3 {
  font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.cscope-python .project-card p {
  font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.cscope-python .project-tags {
  display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.cscope-python .tag {
  background: rgba(59,143,232,0.1);
    border: 1px solid rgba(59,143,232,0.2);
    color: var(--accent-blue-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
}
.cscope-python .after-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-python .after-inner {
  max-width: 1100px;
    margin: 0 auto;
}
.cscope-python .after-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.cscope-python .after-item {
  background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.cscope-python .after-emoji {
  font-size: 2rem;
    margin-bottom: 0.75rem;
}
.cscope-python .after-item h4 {
  font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.cscope-python .after-item p {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-python .footer {
  background: #08080f;
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
}
.cscope-python .footer-logo {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.cscope-python .footer p {
  color: var(--text-muted);
    font-size: 0.85rem;
}
.cscope-python .page-brand {
  text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #33334a;
    border-top: 1px solid #1a1a28;
    font-family: 'Fira Code', monospace;
    letter-spacing: 1px;
}
.cscope-python .toc-section {
  padding: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-python .toc-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.cscope-python .toc-item {
  display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.88rem;
    transition: border-color 0.2s;
}
.cscope-python .toc-item:hover {
  border-color: var(--accent-blue);
    color: var(--accent-blue-light);
}
.cscope-python .toc-num {
  color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 22px;
}
@media print {
.cscope-python .site-header {
  position: static;
}
}

/* ===== JAVASCRIPT COURSE STYLES ===== */
.cscope-javascript {

    --bg-main: #0a0a0f;
    --bg-card: #111118;
    --bg-card2: #16161f;
    --accent-yellow: #f7df1e;
    --accent-yellow-dark: #c8b400;
    --accent-yellow-light: #ffe55c;
    --text-main: #e8e8f0;
    --text-muted: #8888aa;
    --text-code: #a8d8a8;
    --border: #2a2a3a;
    --border-accent: #504010;
    --gradient-yellow: linear-gradient(135deg, #3a2e00, #201800);
    --radius: 12px;
    --radius-sm: 8px;
  
}
.cscope-javascript .site-header {
  background: #0d0d15;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.cscope-javascript .logo-area {
  display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-javascript .logo-icon {
  width: 44px;
    height: 44px;
}
.cscope-javascript .logo-text {
  font-size: 1.3rem;
    font-weight: 700;
}
.cscope-javascript .logo-text span:first-child {
  color: #ffffff;
}
.cscope-javascript .logo-text span:last-child {
  color: var(--accent-yellow);
}
.cscope-javascript .header-badge {
  background: var(--gradient-yellow);
    border: 1px solid var(--border-accent);
    color: var(--accent-yellow-light);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.cscope-javascript .hero {
  background: linear-gradient(160deg, #1a1500 0%, #0a0a0f 50%, #151200 100%);
    border-bottom: 1px solid var(--border);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cscope-javascript .hero::before {
  content: '';
    position: absolute;
    top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(247,223,30,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.cscope-javascript .hero-label {
  display: inline-block;
    background: rgba(247,223,30,0.1);
    border: 1px solid rgba(247,223,30,0.3);
    color: var(--accent-yellow-light);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.cscope-javascript .hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.cscope-javascript .hero h1 .highlight {
  color: var(--accent-yellow);
}
.cscope-javascript .hero p {
  font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}
.cscope-javascript .hero-stats {
  display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.cscope-javascript .stat {
  text-align: center;
}
.cscope-javascript .stat-num {
  font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-yellow);
}
.cscope-javascript .stat-label {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-javascript .section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-javascript .section-title {
  font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-javascript .section-title::after {
  content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--border));
}
.cscope-javascript .section-sub {
  color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.cscope-javascript .outcomes-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.cscope-javascript .outcome-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cscope-javascript .outcome-icon {
  width: 36px; height: 36px;
    background: rgba(247,223,30,0.1);
    border: 1px solid rgba(247,223,30,0.22);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cscope-javascript .outcome-text h4 {
  font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.cscope-javascript .outcome-text p {
  font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cscope-javascript .curriculum-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-javascript .curriculum-inner {
  max-width: 1100px;
    margin: 0 auto;
}
.cscope-javascript .chapter {
  margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cscope-javascript .chapter-header {
  background: var(--bg-card2);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.cscope-javascript .chapter-num {
  background: linear-gradient(135deg, var(--accent-yellow), #a08000);
    color: #111;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cscope-javascript .chapter-title-wrap {
  flex: 1;
}
.cscope-javascript .chapter-title-wrap h3 {
  font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}
.cscope-javascript .chapter-title-wrap span {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-javascript .chapter-toggle {
  color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 0.3s;
}
.cscope-javascript .chapter.open .chapter-toggle {
  transform: rotate(180deg);
}
.cscope-javascript .chapter-body {
  display: none;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background: #0e0e16;
}
.cscope-javascript .chapter.open .chapter-body {
  display: block;
}
.cscope-javascript .code-block {
  background: #0c0c14;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    direction: ltr;
    text-align: left;
    position: relative;
    overflow-x: auto;
}
.cscope-javascript .code-block pre {
  font-family: 'Fira Code', monospace;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-code);
    white-space: pre;
}
.cscope-javascript .code-label {
  position: absolute;
    top: 8px; right: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    background: var(--bg-main);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.cscope-javascript .kw {
  color: #c792ea;
}
.cscope-javascript .fn {
  color: #82aaff;
}
.cscope-javascript .str {
  color: #c3e88d;
}
.cscope-javascript .num {
  color: #f78c6c;
}
.cscope-javascript .cm {
  color: #546e7a; font-style: italic;
}
.cscope-javascript .builtin {
  color: #89ddff;
}
.cscope-javascript .op {
  color: #89ddff;
}
.cscope-javascript .var {
  color: #eeffff;
}
.cscope-javascript .cls {
  color: #ffcb6b;
}
.cscope-javascript .mth {
  color: #82aaff;
}
.cscope-javascript .lesson-title {
  font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-yellow-light);
    margin: 1.5rem 0 0.75rem;
}
.cscope-javascript .lesson-title:first-child {
  margin-top: 0;
}
.cscope-javascript .lesson-desc {
  color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.cscope-javascript .tip-box {
  background: rgba(247,223,30,0.05);
    border-right: 3px solid var(--accent-yellow);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #ddc870;
}
.cscope-javascript .tip-box strong {
  color: var(--accent-yellow);
}
.cscope-javascript .info-box {
  background: rgba(247,223,30,0.05);
    border-right: 3px solid var(--accent-yellow-dark);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #aaaa66;
}
.cscope-javascript .output-block {
  background: #080810;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: #7ec8a0;
    direction: ltr;
    text-align: left;
    margin: 0.5rem 0;
}
.cscope-javascript .output-block::before {
  content: '▶ Output:';
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.cscope-javascript .projects-section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-javascript .projects-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}
.cscope-javascript .project-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.cscope-javascript .project-card::before {
  content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--accent-yellow), var(--accent-yellow-dark));
}
.cscope-javascript .project-level {
  display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.cscope-javascript .level-beginner {
  background: rgba(99,153,34,0.15);  color: #7ec040; border: 1px solid rgba(99,153,34,0.3);
}
.cscope-javascript .level-intermediate {
  background: rgba(247,223,30,0.10); color: #f7df1e; border: 1px solid rgba(247,223,30,0.3);
}
.cscope-javascript .level-advanced {
  background: rgba(226,75,74,0.12);  color: #e86f6e; border: 1px solid rgba(226,75,74,0.3);
}
.cscope-javascript .project-card h3 {
  font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem;
}
.cscope-javascript .project-card p {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.6;
}
.cscope-javascript .project-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1rem;
}
.cscope-javascript .tag {
  background: rgba(247,223,30,0.08);
    border: 1px solid rgba(247,223,30,0.18);
    color: var(--accent-yellow-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
}
.cscope-javascript .after-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-javascript .after-inner {
  max-width: 1100px; margin: 0 auto;
}
.cscope-javascript .after-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.cscope-javascript .after-item {
  background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.cscope-javascript .after-emoji {
  font-size: 2rem; margin-bottom: 0.75rem;
}
.cscope-javascript .after-item h4 {
  font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem;
}
.cscope-javascript .after-item p {
  font-size: 0.8rem; color: var(--text-muted);
}
.cscope-javascript .footer {
  background: #08080f;
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
}
.cscope-javascript .footer-logo {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.cscope-javascript .footer p {
  color: var(--text-muted); font-size: 0.85rem;
}
.cscope-javascript .page-brand {
  text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #33334a;
    border-top: 1px solid #1a1a28;
    font-family: 'Fira Code', monospace;
    letter-spacing: 1px;
}
.cscope-javascript .toc-section {
  padding: 2rem; max-width: 1100px; margin: 0 auto;
}
.cscope-javascript .toc-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.cscope-javascript .toc-item {
  display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.88rem;
    transition: border-color 0.2s;
}
.cscope-javascript .toc-item:hover {
  border-color: var(--accent-yellow);
    color: var(--accent-yellow-light);
}
.cscope-javascript .toc-num {
  color: var(--accent-yellow);
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 22px;
}
@media print {
.cscope-javascript .site-header {
  position: static;
}
}

/* ===== JAVA COURSE STYLES ===== */
.cscope-java {

    --bg-main: #0a0a0f;
    --bg-card: #111118;
    --bg-card2: #16161f;
    --accent-blue: #e87c3b;
    --accent-gold: #f5a623;
    --accent-blue-light: #f5a07a;
    --text-main: #e8e8f0;
    --text-muted: #8888aa;
    --text-code: #a8d8a8;
    --border: #2a2a3a;
    --border-accent: #804030;
    --gradient-blue: linear-gradient(135deg, #6b2a1a, #402010);
    --radius: 12px;
    --radius-sm: 8px;
  
}
.cscope-java .site-header {
  background: #0d0d15;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.cscope-java .logo-area {
  display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-java .logo-icon {
  width: 44px;
    height: 44px;
}
.cscope-java .logo-text {
  font-size: 1.3rem;
    font-weight: 700;
}
.cscope-java .logo-text span:first-child {
  color: #ffffff;
}
.cscope-java .logo-text span:last-child {
  color: var(--accent-blue);
}
.cscope-java .header-badge {
  background: var(--gradient-blue);
    border: 1px solid var(--border-accent);
    color: var(--accent-blue-light);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.cscope-java .hero {
  background: linear-gradient(160deg, #1a0d08 0%, #0a0a0f 50%, #150d08 100%);
    border-bottom: 1px solid var(--border);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cscope-java .hero::before {
  content: '';
    position: absolute;
    top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(232,124,59,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.cscope-java .hero-label {
  display: inline-block;
    background: rgba(232,124,59,0.12);
    border: 1px solid rgba(232,124,59,0.3);
    color: var(--accent-blue-light);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.cscope-java .hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.cscope-java .hero h1 .highlight {
  color: var(--accent-blue);
}
.cscope-java .hero p {
  font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}
.cscope-java .hero-stats {
  display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.cscope-java .stat {
  text-align: center;
}
.cscope-java .stat-num {
  font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-blue);
}
.cscope-java .stat-label {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-java .section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-java .section-title {
  font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-java .section-title::after {
  content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--border));
}
.cscope-java .section-sub {
  color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.cscope-java .outcomes-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.cscope-java .outcome-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cscope-java .outcome-icon {
  width: 36px; height: 36px;
    background: rgba(232,124,59,0.12);
    border: 1px solid rgba(232,124,59,0.25);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cscope-java .outcome-text h4 {
  font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.cscope-java .outcome-text p {
  font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cscope-java .curriculum-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-java .curriculum-inner {
  max-width: 1100px;
    margin: 0 auto;
}
.cscope-java .chapter {
  margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cscope-java .chapter-header {
  background: var(--bg-card2);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.cscope-java .chapter-num {
  background: linear-gradient(135deg, var(--accent-blue), #b04a10);
    color: white;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cscope-java .chapter-title-wrap {
  flex: 1;
}
.cscope-java .chapter-title-wrap h3 {
  font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}
.cscope-java .chapter-title-wrap span {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-java .chapter-toggle {
  color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 0.3s;
}
.cscope-java .chapter.open .chapter-toggle {
  transform: rotate(180deg);
}
.cscope-java .chapter-body {
  display: none;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background: #0e0e16;
}
.cscope-java .chapter.open .chapter-body {
  display: block;
}
.cscope-java .code-block {
  background: #0c0c14;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    direction: ltr;
    text-align: left;
    position: relative;
    overflow-x: auto;
}
.cscope-java .code-block pre {
  font-family: 'Fira Code', monospace;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-code);
    white-space: pre;
}
.cscope-java .code-label {
  position: absolute;
    top: 8px; right: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    background: var(--bg-main);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.cscope-java .kw {
  color: #c792ea;
}
.cscope-java .fn {
  color: #82aaff;
}
.cscope-java .str {
  color: #c3e88d;
}
.cscope-java .num {
  color: #f78c6c;
}
.cscope-java .cm {
  color: #546e7a; font-style: italic;
}
.cscope-java .builtin {
  color: #89ddff;
}
.cscope-java .op {
  color: #89ddff;
}
.cscope-java .var {
  color: #eeffff;
}
.cscope-java .cls {
  color: #ffcb6b;
}
.cscope-java .ann {
  color: #f5a623;
}
.cscope-java .lesson-title {
  font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-blue-light);
    margin: 1.5rem 0 0.75rem;
}
.cscope-java .lesson-title:first-child {
  margin-top: 0;
}
.cscope-java .lesson-desc {
  color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.cscope-java .tip-box {
  background: rgba(245,166,35,0.06);
    border-right: 3px solid var(--accent-gold);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #ddb870;
}
.cscope-java .tip-box strong {
  color: var(--accent-gold);
}
.cscope-java .info-box {
  background: rgba(232,124,59,0.06);
    border-right: 3px solid var(--accent-blue);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #dd9866;
}
.cscope-java .output-block {
  background: #080810;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: #7ec8a0;
    direction: ltr;
    text-align: left;
    margin: 0.5rem 0;
}
.cscope-java .output-block::before {
  content: '▶ Output:';
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.cscope-java .projects-section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-java .projects-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}
.cscope-java .project-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.cscope-java .project-card::before {
  content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--accent-blue), #b04a10);
}
.cscope-java .project-level {
  display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.cscope-java .level-beginner {
  background: rgba(99,153,34,0.15); color: #7ec040; border: 1px solid rgba(99,153,34,0.3);
}
.cscope-java .level-intermediate {
  background: rgba(245,166,35,0.12); color: #f5a623; border: 1px solid rgba(245,166,35,0.3);
}
.cscope-java .level-advanced {
  background: rgba(226,75,74,0.12); color: #e86f6e; border: 1px solid rgba(226,75,74,0.3);
}
.cscope-java .project-card h3 {
  font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.cscope-java .project-card p {
  font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.cscope-java .project-tags {
  display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.cscope-java .tag {
  background: rgba(232,124,59,0.1);
    border: 1px solid rgba(232,124,59,0.2);
    color: var(--accent-blue-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
}
.cscope-java .after-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-java .after-inner {
  max-width: 1100px;
    margin: 0 auto;
}
.cscope-java .after-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.cscope-java .after-item {
  background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.cscope-java .after-emoji {
  font-size: 2rem;
    margin-bottom: 0.75rem;
}
.cscope-java .after-item h4 {
  font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.cscope-java .after-item p {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-java .footer {
  background: #08080f;
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
}
.cscope-java .footer-logo {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.cscope-java .footer p {
  color: var(--text-muted);
    font-size: 0.85rem;
}
.cscope-java .page-brand {
  text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #33334a;
    border-top: 1px solid #1a1a28;
    font-family: 'Fira Code', monospace;
    letter-spacing: 1px;
}
.cscope-java .toc-section {
  padding: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-java .toc-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.cscope-java .toc-item {
  display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.88rem;
    transition: border-color 0.2s;
}
.cscope-java .toc-item:hover {
  border-color: var(--accent-blue);
    color: var(--accent-blue-light);
}
.cscope-java .toc-num {
  color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 22px;
}
@media print {
.cscope-java .site-header {
  position: static;
}
}

/* ===== CPP COURSE STYLES ===== */
.cscope-cpp {

    --bg-main: #0a0f0a;
    --bg-card: #0f1a0f;
    --bg-card2: #141f14;
    --accent: #00e676;
    --accent-dark: #00b050;
    --accent-light: #69f0ae;
    --text-main: #e8f0e8;
    --text-muted: #6a8a6a;
    --text-code: #a8d8a8;
    --border: #1e2e1e;
    --border-accent: #104020;
    --gradient: linear-gradient(135deg, #0a2a0a, #051005);
    --radius: 12px;
    --radius-sm: 8px;
  
}
.cscope-cpp .site-header {
  background: #080d08;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.cscope-cpp .logo-area {
  display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-cpp .logo-icon {
  width: 44px; height: 44px;
}
.cscope-cpp .logo-text {
  font-size: 1.3rem; font-weight: 700;
}
.cscope-cpp .logo-text span:first-child {
  color: #ffffff;
}
.cscope-cpp .logo-text span:last-child {
  color: var(--accent);
}
.cscope-cpp .header-badge {
  background: var(--gradient);
    border: 1px solid var(--border-accent);
    color: var(--accent-light);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.cscope-cpp .hero {
  background: linear-gradient(160deg, #001a00 0%, #0a0f0a 50%, #001500 100%);
    border-bottom: 1px solid var(--border);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cscope-cpp .hero::before {
  content: '';
    position: absolute;
    top: -100px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(ellipse, rgba(0,230,118,0.09) 0%, transparent 70%);
    pointer-events: none;
}
.cscope-cpp .hero-label {
  display: inline-block;
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.25);
    color: var(--accent-light);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}
.cscope-cpp .hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.cscope-cpp .hero h1 .highlight {
  color: var(--accent);
}
.cscope-cpp .hero p {
  font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}
.cscope-cpp .hero-stats {
  display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.cscope-cpp .stat {
  text-align: center;
}
.cscope-cpp .stat-num {
  font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent);
}
.cscope-cpp .stat-label {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-cpp .section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-cpp .section-title {
  font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cscope-cpp .section-title::after {
  content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--border));
}
.cscope-cpp .section-sub {
  color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.cscope-cpp .outcomes-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.cscope-cpp .outcome-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cscope-cpp .outcome-icon {
  width: 36px; height: 36px;
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.2);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cscope-cpp .outcome-text h4 {
  font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.cscope-cpp .outcome-text p {
  font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cscope-cpp .curriculum-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-cpp .curriculum-inner {
  max-width: 1100px; margin: 0 auto;
}
.cscope-cpp .chapter {
  margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cscope-cpp .chapter-header {
  background: var(--bg-card2);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
}
.cscope-cpp .chapter-num {
  background: linear-gradient(135deg, var(--accent), #006030);
    color: #000;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cscope-cpp .chapter-title-wrap {
  flex: 1;
}
.cscope-cpp .chapter-title-wrap h3 {
  font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}
.cscope-cpp .chapter-title-wrap span {
  font-size: 0.8rem;
    color: var(--text-muted);
}
.cscope-cpp .chapter-toggle {
  color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 0.3s;
}
.cscope-cpp .chapter.open .chapter-toggle {
  transform: rotate(180deg);
}
.cscope-cpp .chapter-body {
  display: none;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    background: #0c120c;
}
.cscope-cpp .chapter.open .chapter-body {
  display: block;
}
.cscope-cpp .code-block {
  background: #080e08;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    direction: ltr;
    text-align: left;
    position: relative;
    overflow-x: auto;
}
.cscope-cpp .code-block pre {
  font-family: 'Fira Code', monospace;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-code);
    white-space: pre;
}
.cscope-cpp .code-label {
  position: absolute;
    top: 8px; right: 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Fira Code', monospace;
    background: var(--bg-main);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.cscope-cpp .kw {
  color: #c792ea;
}
.cscope-cpp .fn {
  color: #82aaff;
}
.cscope-cpp .str {
  color: #c3e88d;
}
.cscope-cpp .num {
  color: #f78c6c;
}
.cscope-cpp .cm {
  color: #546e7a; font-style: italic;
}
.cscope-cpp .builtin {
  color: #89ddff;
}
.cscope-cpp .op {
  color: #89ddff;
}
.cscope-cpp .var {
  color: #eeffff;
}
.cscope-cpp .cls {
  color: #ffcb6b;
}
.cscope-cpp .mth {
  color: #82aaff;
}
.cscope-cpp .pp {
  color: #f07178;
}
.cscope-cpp .typ {
  color: #ffcb6b;
}
.cscope-cpp .lesson-title {
  font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-light);
    margin: 1.5rem 0 0.75rem;
}
.cscope-cpp .lesson-title:first-child {
  margin-top: 0;
}
.cscope-cpp .lesson-desc {
  color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.cscope-cpp .tip-box {
  background: rgba(0,230,118,0.05);
    border-right: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #88cc88;
}
.cscope-cpp .tip-box strong {
  color: var(--accent);
}
.cscope-cpp .info-box {
  background: rgba(0,230,118,0.04);
    border-right: 3px solid var(--accent-dark);
    padding: 0.75rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0.75rem 0;
    font-size: 0.88rem;
    color: #669966;
}
.cscope-cpp .output-block {
  background: #060c06;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: #7ec8a0;
    direction: ltr;
    text-align: left;
    margin: 0.5rem 0;
}
.cscope-cpp .output-block::before {
  content: '▶ Output:';
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.cscope-cpp .projects-section {
  padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cscope-cpp .projects-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}
.cscope-cpp .project-card {
  background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.cscope-cpp .project-card::before {
  content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--accent), var(--accent-dark));
}
.cscope-cpp .project-level {
  display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.cscope-cpp .level-beginner {
  background: rgba(99,153,34,0.15);  color: #7ec040; border: 1px solid rgba(99,153,34,0.3);
}
.cscope-cpp .level-intermediate {
  background: rgba(0,230,118,0.10);  color: #00e676; border: 1px solid rgba(0,230,118,0.3);
}
.cscope-cpp .level-advanced {
  background: rgba(226,75,74,0.12);  color: #e86f6e; border: 1px solid rgba(226,75,74,0.3);
}
.cscope-cpp .project-card h3 {
  font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem;
}
.cscope-cpp .project-card p {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.6;
}
.cscope-cpp .project-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1rem;
}
.cscope-cpp .tag {
  background: rgba(0,230,118,0.07);
    border: 1px solid rgba(0,230,118,0.18);
    color: var(--accent-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Fira Code', monospace;
}
.cscope-cpp .after-section {
  background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
}
.cscope-cpp .after-inner {
  max-width: 1100px; margin: 0 auto;
}
.cscope-cpp .after-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.cscope-cpp .after-item {
  background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.cscope-cpp .after-emoji {
  font-size: 2rem; margin-bottom: 0.75rem;
}
.cscope-cpp .after-item h4 {
  font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem;
}
.cscope-cpp .after-item p {
  font-size: 0.8rem; color: var(--text-muted);
}
.cscope-cpp .footer {
  background: #05080500;
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
    background: #060a06;
}
.cscope-cpp .footer-logo {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.cscope-cpp .footer p {
  color: var(--text-muted); font-size: 0.85rem;
}
.cscope-cpp .page-brand {
  text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #223a22;
    border-top: 1px solid #0a1a0a;
    font-family: 'Fira Code', monospace;
    letter-spacing: 1px;
}
.cscope-cpp .toc-section {
  padding: 2rem; max-width: 1100px; margin: 0 auto;
}
.cscope-cpp .toc-grid {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.cscope-cpp .toc-item {
  display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.88rem;
    transition: border-color 0.2s;
}
.cscope-cpp .toc-item:hover {
  border-color: var(--accent);
    color: var(--accent-light);
}
.cscope-cpp .toc-num {
  color: var(--accent);
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 22px;
}
@media print {
.cscope-cpp .site-header {
  position: static;
}
}

/* ===== SMART TOOLS ===== */
.smarttool-hero{max-width:980px;}
.smart-desc{color:#94a3b8;line-height:1.8;margin:0 auto 16px;max-width:760px;}
.smart-form{background:#111827;border:1px solid #1f2937;border-radius:16px;padding:18px;margin-top:14px;text-align:right;}
.smart-form label{display:block;color:#cbd5e1;font-size:13px;margin:12px 0 5px;}
.smart-form select,.smart-form input[type="color"],.smart-form input[type="file"]{width:100%;padding:10px;margin-top:10px;border:1px solid #374151;border-radius:10px;background:#1f2937;color:white;font-family:Cairo;}
.smart-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:10px;}
.smart-output{min-height:90px;text-align:right;direction:rtl;white-space:pre-wrap;word-break:break-word;color:#d9f99d;}
.smart-preview{margin-top:12px;padding:18px;border-radius:12px;background:#0b1220;border:1px dashed #374151;text-align:center;direction:ltr;overflow:auto;}
.smart-copy-btn{background:#10b981!important;}
.smart-copy-btn:hover{background:#059669!important;}

/* share chip on tools — optional */
.tba-share-hint{font-size:11px;color:#64748b;margin-top:4px;}
.tba-share-bar{
display:none;
position:fixed;
bottom:0;left:0;right:0;
padding:10px 14px;
background:#0f172a;
border-top:1px solid #334155;
z-index:2800;
font-size:13px;
text-align:right;
gap:8px;
flex-wrap:wrap;
align-items:center;
}
.tba-share-bar.show{display:flex;animation:tbaFadeIn .25s;}
.tba-share-bar input{
flex:1;
min-width:120px;
margin:0;
height:36px;
font-size:12px;
direction:ltr;
text-align:left;
}
.tba-share-bar button,.tba-share-bar a{
width:auto!important;
margin:0!important;
padding:6px 14px!important;
height:auto!important;
font-size:13px!important;
}
.tba-share-bar a{display:inline-block;background:#374151;color:#fff;text-decoration:none;border-radius:10px;}

/* theme + recent + related */
.theme-toggle-btn{
width:42px!important;
height:42px;
margin:0!important;
padding:0!important;
border-radius:50%!important;
background:var(--tba-surface2)!important;
font-size:18px;
flex-shrink:0;
border:1px solid var(--tba-border)!important;
}
.recent-grid,.related-grid{
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.mini-card{padding:14px 10px!important;}
.mini-card h4{font-size:13px!important;}
.mini-card p{display:none;}
.tba-related-wrap{
margin:28px auto 16px;
padding:16px;
max-width:900px;
border-top:1px solid var(--tba-border);
animation:tbaFadeIn .4s ease;
}
.tba-privacy-note{
font-size:12px;
color:var(--tba-muted);
margin:24px auto;
max-width:700px;
line-height:1.7;
}
html[data-theme="light"] .topbar{
background:rgba(255,255,255,.9);
border-bottom:1px solid var(--tba-border);
box-shadow:var(--tba-shadow);
}
html[data-theme="light"] .topbar-brand,
html[data-theme="light"] .topbar-brand span{color:var(--tba-text)!important;}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .tool-card h4,
html[data-theme="light"] .cat-title,
html[data-theme="light"] .about-box h2{color:var(--tba-text);}
html[data-theme="light"] .hero-tagline{color:var(--tba-accent);}
html[data-theme="light"] .section-label{color:#64748b;}
html[data-theme="light"] #tool-search,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
background:var(--tba-surface);
color:var(--tba-text);
border-color:var(--tba-border);
}
html[data-theme="light"] .search-results,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .item{
background:var(--tba-surface);
border-color:var(--tba-border);
color:var(--tba-text);
}
html[data-theme="light"] .about-box,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .tba-contact-card,
html[data-theme="light"] .smart-form,
html[data-theme="light"] .tba-modal-box{
background:var(--tba-surface);
border-color:var(--tba-border);
box-shadow:var(--tba-shadow);
}
html[data-theme="light"] .tool-card p,
html[data-theme="light"] .cat-sub,
html[data-theme="light"] .about-box,
html[data-theme="light"] .smart-desc{color:var(--tba-muted);}
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .cat-card:hover{
border-color:var(--tba-accent);
box-shadow:var(--tba-shadow-lg);
}
html[data-theme="light"] .fab{
box-shadow:0 4px 16px rgba(29,78,216,.35);
}
html[data-theme="light"] .tba-share-bar{
background:rgba(255,255,255,.96);
border-top:1px solid var(--tba-border);
color:var(--tba-text);
}
html[data-theme="light"] .tba-share-bar input{
background:var(--tba-surface2);
color:var(--tba-text);
border:1px solid var(--tba-border);
}
html[data-theme="light"] .chat-box{background:var(--tba-surface2);border:1px solid var(--tba-border);}
html[data-theme="light"] .chat-msg.bot{background:#fff;border:1px solid var(--tba-border);color:var(--tba-text);}
html[data-theme="light"] .chat-msg.user{background:var(--tba-accent);color:#fff;}
html[data-theme="light"] pre,
html[data-theme="light"] .output-box,
html[data-theme="light"] .smart-output{background:#f1f5f9;color:#0f172a;border:1px solid var(--tba-border);}
html[data-theme="light"] button.back{background:#64748b;}
html[data-theme="light"] .overlay{background:rgba(15,23,42,.35);}
html[data-theme="light"] .highlight,
html[data-theme="light"] .about-box .highlight{color:var(--tba-accent);}