/* =========================
   RESET / BASE
========================= */

*,
*::before,
*::after{
box-sizing:border-box;
}

textarea,
input,
button{
font-family:inherit;
-webkit-appearance:none;
appearance:none;
}

/* =========================
   ROOT VARIABLES
========================= */

:root{

--primary:#6366f1;
--accent:#3b82f6;

--text-main:#0f172a;
--text-muted:#475569;

--bg:#f8fafc;
--card-bg:#ffffff;
--input-bg:#ffffff;

--border:#cbd5e1;
--border-strong:#94a3b8;

--input-border:#cbd5e1;
--input-border-focus:#6366f1;

--success:#22c55e;

}

/* =========================
   DARK MODE
========================= */

body.dark-mode{

--bg:#020617;
--card-bg:#0f172a;
--input-bg:#020617;

--text-main:#e5e7eb;
--text-muted:#94a3b8;

--border:#1e293b;
--border-strong:#334155;

--input-border:#334155;
--input-border-focus:#3b82f6;

}

/* =========================
   BODY
========================= */

body{

margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

background:var(--bg,#f8fafc);
color:var(--text-main,#0f172a);

line-height:1.6;

}

/* =========================
   HERO
========================= */

.page-hero{

display:flex;
justify-content:space-between;
flex-wrap:wrap;

margin-bottom:32px;

}

h1{

font-size:2.2rem;
font-weight:800;
margin-bottom:6px;

color:var(--text-main,#0f172a);

}

.hero-sub{

color:var(--text-muted,#475569);
font-size:0.95rem;

}

/* =========================
   CARD
========================= */

.card{

background:var(--card-bg,#ffffff);

border:2px solid var(--border,#cbd5e1);
border-radius:14px;

padding:24px;
margin-bottom:24px;

box-shadow:0 4px 12px rgba(0,0,0,0.05);

}

/* =========================
   LABEL
========================= */

.input-label{

margin-bottom:10px;
font-weight:600;

color:var(--text-main,#0f172a);

}

/* =========================
   INPUT / TEXTAREA
========================= */

.glass-input,
#htmlInput,
#htmlOutput{

width:100%;

padding:14px;

border-radius:10px;

background:var(--input-bg,#ffffff);
color:var(--text-main,#0f172a);

border:1.5px solid var(--input-border,#cbd5e1);

font-family:"JetBrains Mono",monospace;
font-size:0.95rem;

outline:none;

transition:border 0.2s ease,box-shadow 0.2s ease;

resize:vertical;

min-height:250px;

}

/* Hover */

#htmlInput:hover,
#htmlOutput:hover{

border-color:var(--accent,#3b82f6);

}

/* Focus */

.glass-input:focus,
#htmlInput:focus,
#htmlOutput:focus{

border-color:var(--input-border-focus,#6366f1);

box-shadow:0 0 0 2px rgba(99,102,241,0.2);

}

/* =========================
   OUTPUT WRAPPER
========================= */

.output-wrapper{

position:relative;

}

/* Prevent text overlap */

#htmlOutput{

padding-top:40px;

}

/* =========================
   COPY BUTTON
========================= */

.output-wrapper .copy-btn{

position:absolute;

top:10px;
right:10px;

z-index:10;

background:var(--card-bg,#ffffff);

border:1px solid var(--border,#cbd5e1);

padding:6px 12px;

border-radius:6px;

font-size:0.8rem;
font-weight:600;

cursor:pointer;

transition:all 0.2s ease;

}

.output-wrapper .copy-btn:hover{

background:var(--primary,#6366f1);
color:#fff;

}

.output-wrapper .copy-btn.copied{

background:var(--success,#22c55e);
color:#fff;

}

/* =========================
   OUTPUT BOX
========================= */

.output-box{

background:var(--bg,#f8fafc);

border:1.5px solid var(--border-strong,#94a3b8);

border-radius:10px;

min-height:250px;

line-height:1.6;

}

/* =========================
   BUTTONS
========================= */

.primary-btn{

padding:10px 18px;

border-radius:8px;

border:none;

font-weight:700;

cursor:pointer;

background:linear-gradient(135deg,var(--primary,#6366f1),var(--accent,#3b82f6));

color:#fff;

transition:transform 0.2s ease;

}

.primary-btn:hover{

transform:translateY(-1px);

}

.copy-btn{

background:var(--card-bg,#ffffff);

border:1px solid var(--border,#cbd5e1);

padding:6px 12px;

border-radius:6px;

font-size:0.85rem;
font-weight:600;

cursor:pointer;

}

/* =========================
   STATS BAR
========================= */

.stats-bar{

display:flex;
flex-wrap:wrap;

gap:12px;

margin-top:16px;

padding:12px;

border-radius:10px;

background:var(--bg,#f8fafc);

border:1px solid var(--border,#cbd5e1);

}

.stat-badge{

font-weight:600;
font-size:0.9rem;

}

.stat-badge span{

color:var(--primary,#6366f1);

font-family:monospace;
font-weight:800;

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

.page-hero{
flex-direction:column;
}

.card{
padding:16px;
}

}