/* ===================================================== */
/* ===================== GLOBAL ======================== */
/* ===================================================== */

:root{
--bg:#a8c4dc;
--surface:#c2d6e8;
--surface-soft:#b8cfe2;
--text:#111827;
--text-muted:#4b5563;
--border:#c7d8ea;
--primary:#2563eb;
--primary-hover:#1e4fd6;
--primary-soft:#d6e8fb;
--radius-sm:8px;
--radius-md:12px;
--space-1:6px;
--space-2:10px;
--space-3:14px;
--space-4:20px;
--space-5:30px;
--space-6:40px;
--shadow-soft:0 4px 16px rgba(0,0,0,0.05);
--shadow-card:0 8px 20px rgba(0,0,0,0.08);
--shadow-card-hover:0 20px 40px rgba(0,0,0,0.18);
}

html{
min-height:100%;
background:#8abef0;
}

body{
font-family:"Avenir Next", "Segoe UI", Arial, sans-serif;
background:
radial-gradient(1180px 580px at 4% -20%, #3aa0f4 0%, rgba(58,160,244,0) 68%),
radial-gradient(920px 440px at 96% -24%, #62b5f8 0%, rgba(98,181,248,0) 60%),
radial-gradient(780px 380px at 52% 10%, #1ea7ff 0%, rgba(30,167,255,0) 54%),
linear-gradient(180deg, #8abef0 0%, #a8cbed 180px, var(--bg) 400px);
max-width:1100px;
margin:0 auto;
padding:88px var(--space-6) var(--space-6);
min-height:100dvh;
color:var(--text);
transition:background .25s,color .25s;
line-height:1.55;
overflow-x:hidden;
}

main{
margin-top:30px;
}

section{
margin:60px auto;
background:
radial-gradient(260px 160px at 100% 0%, rgba(178,206,230,0.22) 0%, rgba(178,206,230,0) 72%),
radial-gradient(220px 140px at 0% 100%, rgba(125, 211, 252, 0.12) 0%, rgba(125, 211, 252, 0) 72%),
linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
padding:var(--space-5);
border-radius:var(--radius-md);
border:1px solid var(--border);
max-width:1000px;
box-shadow:0 10px 28px rgba(29,78,216,0.09);
}


/* ===================================================== */
/* ===================== TITLES ======================== */
/* ===================================================== */

h1{
margin-bottom:var(--space-4);
font-size:clamp(2rem, 4vw, 2.6rem);
line-height:1.15;
letter-spacing:-0.02em;
font-weight:800;
max-width:20ch;
}

h2{
text-align:center;
margin-bottom:25px;
font-size:clamp(1.5rem, 3vw, 1.9rem);
line-height:1.2;
letter-spacing:-0.01em;
font-weight:750;
}

p{
color:var(--text-muted);
max-width:72ch;
}


/* ===================================================== */
/* ===================== NAVBAR ======================== */
/* ===================================================== */

/* ----------- Nav Search Button ----------- */

.nav-right .nav-btn.nav-search-btn{
gap:5px;
cursor:pointer;
margin:0;
box-sizing:border-box;
}

.nav-search-label{
display:inline;
}

.nav-right .nav-btn.nav-search-btn span{
display:inline-flex;
align-items:center;
line-height:1;
}

.nav-right .nav-btn.nav-search-btn:hover{
background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* ----------- Search Overlay ----------- */

.search-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,0.45);
backdrop-filter:blur(4px);
z-index:400;
display:flex;
justify-content:center;
padding-top:min(18vh, 140px);
animation:overlayIn .15s ease;
}

.search-overlay.hidden{
display:none;
}

@keyframes overlayIn{
from{ opacity:0; }
to{ opacity:1; }
}

.search-modal{
width:min(520px, calc(100vw - 32px));
max-height:min(460px, 60vh);
background:#fff;
border-radius:var(--radius-md);
border:1px solid var(--border);
box-shadow:0 20px 60px rgba(0,0,0,0.18);
display:flex;
flex-direction:column;
overflow:hidden;
animation:modalIn .18s ease;
}

@keyframes modalIn{
from{ opacity:0; transform:translateY(-10px) scale(0.97); }
to{ opacity:1; transform:translateY(0) scale(1); }
}

.search-modal input{
width:100%;
padding:14px 18px;
font-size:16px;
border:none;
border-bottom:1px solid var(--border);
outline:none;
background:transparent;
color:var(--text);
box-sizing:border-box;
}

.search-results{
overflow-y:auto;
flex:1;
padding:6px;
}

.search-result-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:var(--radius-sm);
text-decoration:none;
color:var(--text);
font-size:14px;
transition:.12s ease;
}

.search-result-item:hover{
background:rgba(59,130,246,0.08);
}

.search-result-icon{
font-size:18px;
flex-shrink:0;
}

.search-result-name{
font-weight:500;
}

.search-no-results{
padding:24px;
text-align:center;
color:#94a3b8;
font-size:14px;
}

/* ----------- Dark mode search ----------- */

body.dark .search-overlay{
background:rgba(2,8,20,0.55);
}

body.dark .search-modal{
background:linear-gradient(180deg, rgba(10, 30, 52, 0.98) 0%, rgba(15, 25, 48, 0.96) 100%);
border-color:rgba(96, 165, 250, 0.25);
box-shadow:0 20px 60px rgba(0,0,0,0.50);
}

body.dark .search-modal input{
border-bottom-color:rgba(96, 165, 250, 0.20);
color:#e5e7eb;
}

body.dark .search-modal input::placeholder{
color:#64748b;
}

body.dark .search-result-item{
color:#e5e7eb;
}

body.dark .search-result-item:hover{
background:rgba(96, 165, 250, 0.12);
}

body.dark .nav-right .nav-btn.nav-search-btn{
color:#ffffff;
}

/* ----------------------------------------- */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px var(--space-4);
margin-bottom:0;
background:rgba(237,245,252,0.96);
backdrop-filter:blur(10px);
border-radius:0 0 var(--radius-md) var(--radius-md);
box-shadow:0 4px 20px rgba(0,0,0,0.06);
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
width:min(calc(100vw - 24px), 1100px);
box-sizing:border-box;
z-index:300;
border:1px solid var(--border);
border-top:none;
transition:padding .22s ease, box-shadow .22s ease, background .22s ease, width .22s ease;
}

.navbar::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:-1px;
height:1px;
background:linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,.55), rgba(59,130,246,0));
pointer-events:none;
}

.navbar.nav-compact{
padding:8px 14px;
width:min(calc(100vw - 12px), 1040px);
box-shadow:0 10px 24px rgba(15,23,42,0.16);
background:rgba(194,214,232,0.96);
}

.nav-brand{
font-weight:700;
font-size:18px;
color:var(--text);
text-decoration:none;
}

.nav-right{
display:flex;
align-items:center;
gap:10px;
}

.nav-right a.nav-btn,
.nav-right .nav-btn.nav-search-btn{
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
margin-left:0;
text-decoration:none;
background:linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
color:white;
font-weight:500;
font-size:15px;
padding:0 16px;
border-radius:var(--radius-sm);
height:40px;
line-height:1;
transition:.2s ease;
border:1px solid #1d4ed8;
box-shadow:0 6px 14px rgba(37,99,235,0.2);
box-sizing:border-box;
}

.nav-right a.nav-btn:hover,
.nav-right .nav-btn.nav-search-btn:hover{
background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

.nav-right #themeToggle{
margin:0;
height:40px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
}

/* COMPACT NAVBAR STATE - OVERRIDE */
.navbar.nav-compact .nav-brand{
font-size:16px;
}

.navbar.nav-compact .nav-right a.nav-btn,
.navbar.nav-compact .nav-right #themeToggle,
.navbar.nav-compact .nav-right .nav-btn.nav-search-btn{
height:36px;
line-height:36px;
font-size:13px;
}


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

.hero{
text-align:center;
margin-bottom:70px;
padding:60px 30px;
background:linear-gradient(160deg, #c2d6e8 0%, #b8d0e6 45%, #afc8de 100%);
border:1px solid var(--border);
border-radius:14px;
box-shadow:var(--shadow-soft);
max-width:1000px;
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
isolation:isolate;
}

.hero::before{
content:"";
position:absolute;
width:360px;
height:360px;
background:radial-gradient(circle at center, rgba(37,99,235,0.2) 0%, rgba(37,99,235,0) 72%);
top:-160px;
right:-90px;
z-index:-1;
}

.hero::after{
content:"";
position:absolute;
width:320px;
height:320px;
background:radial-gradient(circle at center, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0) 70%);
bottom:-170px;
left:-100px;
z-index:-1;
}

.hero-eyebrow{
display:inline-flex;
align-items:center;
padding:6px 12px;
border:1px solid #7cb5f1;
border-radius:999px;
background:linear-gradient(180deg, #b8d0e6 0%, #a4c0da 100%);
color:#1e40af;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
margin:0 auto 16px auto;
}

.hero h1{
font-size:36px;
margin-top:0;
margin-bottom:25px;
max-width:18ch;
margin-left:auto;
margin-right:auto;
line-height:1.08;
letter-spacing:-0.02em;

}

.hero-subtitle{
color:var(--text-muted);
margin-bottom:25px;
font-size:18px;
max-width:700px;
margin:0 auto 30px auto;
line-height:1.6;
font-weight:500;
text-wrap:balance;
}

.hero-actions{
margin-top:20px;
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
}

.hero-search-wrap{
max-width:560px;
margin:0 auto;
padding:10px;
border-radius:16px;
background:linear-gradient(180deg, rgba(178,206,230,0.50) 0%, rgba(168,196,220,0.30) 100%);
border:1px solid rgba(168, 200, 232, 0.45);
backdrop-filter:blur(8px);
transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hero-search-wrap:focus-within{
border-color:rgba(59, 130, 246, 0.55);
box-shadow:0 10px 26px rgba(37,99,235,0.16);
}

.hero-note{
font-size:13px;
margin:14px auto 0 auto;
color:#355070;
}

.hero-stats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:22px auto 0 auto;
max-width:700px;
}

.stat-card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
padding:12px;
background:
radial-gradient(180px 110px at 100% 0%, rgba(178,206,230,0.38) 0%, rgba(178,206,230,0) 70%),
linear-gradient(180deg, rgba(194,214,232,0.96) 0%, rgba(180,202,222,0.93) 100%);
border:1px solid #a8c8e8;
border-radius:12px;
backdrop-filter:blur(4px);
box-shadow:0 6px 18px rgba(37,99,235,0.12);
}

.stat-card strong{
font-size:22px;
line-height:1;
color:#0f172a;
}

.stat-card span{
font-size:12px;
font-weight:600;
color:#475569;
}

.quick-links{
margin:18px auto 0 auto;
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
max-width:760px;
}

.quick-chip{
display:inline-flex;
align-items:center;
height:34px;
padding:0 12px;
border-radius:999px;
background:linear-gradient(180deg, #c2d6e8 0%, #b0c8de 100%);
border:1px solid #8fb0cc;
color:#1e3a8a;
text-decoration:none;
font-size:13px;
font-weight:600;
transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
box-shadow:0 2px 8px rgba(30,58,138,0.08);
}

.quick-chip:hover{
background:linear-gradient(180deg, #a8c2d8 0%, #96b6d0 100%);
border-color:#5fa2de;
color:#1d4ed8;
transform:translateY(-2px);
box-shadow:0 8px 16px rgba(37,99,235,0.15);
}

.home-intro{
max-width:860px;
margin:0 auto;
text-align:center;
padding:24px;
border-radius:16px;
background:
radial-gradient(220px 140px at 100% 0%, rgba(178,206,230,0.34) 0%, rgba(178,206,230,0) 72%),
linear-gradient(180deg, rgba(188,210,230,0.72) 0%, rgba(176,200,222,0.62) 100%);
border:1px solid rgba(168, 200, 232, 0.55);
backdrop-filter:blur(8px);
box-shadow:0 10px 24px rgba(37,99,235,0.08);
}

.home-intro h2{
margin-bottom:12px;
}

.home-intro p{
margin:0 auto 10px auto;
}

.category-grid{
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

.category-card{
align-items:flex-start;
}

.category-card .tool-title{
font-weight:700;
}

.category-meta{
display:block;
font-size:12px;
font-weight:500;
color:#3d5874;
margin-top:4px;
line-height:1.4;
}


/* ===================================================== */
/* ====================== LOGO ========================= */
/* ===================================================== */

.logo{
width:320px;
max-width:100%;
height:auto;
display:block;
margin:auto;
margin-bottom:0;
}


/* ===================================================== */
/* ====================== INPUTS ======================= */
/* ===================================================== */

input, textarea{
width:100%;
padding:12px;
border:1px solid #d1d5db;
border-radius:var(--radius-sm);
font-size:14px;
box-sizing:border-box;
background:var(--surface);
color:var(--text);
transition:border-color .18s ease, box-shadow .18s ease, background .2s ease;
}

select{
padding:12px;
border:1px solid #d1d5db;
border-radius:var(--radius-sm);
background:var(--surface);
color:var(--text);
}

textarea{
height:220px;
font-family:monospace;
line-height:1.45;
}

input::placeholder,
textarea::placeholder{
color:#94a3b8;
}

#toolSearch{
max-width:400px;
margin:10px auto 0px auto;
display:block;
height:44px;
line-height:44px;
padding:0 12px;
border:none;
border-radius:10px;
background:transparent;
box-shadow:none;
text-align:center;
}

#toolSearch:focus{
border:none;
box-shadow:none;
outline:none;
}

#toolSearch::placeholder{
text-align:center;
}


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

button{
margin-right:8px;
margin-top:6px;
background:linear-gradient(180deg, #3b82f6 0%, var(--primary) 100%);
color:white;
border:none;
padding:10px 18px;
border-radius:var(--radius-sm);
cursor:pointer;
transition:.2s ease;
font-weight:600;
letter-spacing:.01em;
}

button:hover{
background:var(--primary-hover);
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

button:active{
transform:translateY(0);
box-shadow:0 3px 8px rgba(0,0,0,0.12);
}

.btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
background:linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
color:#fff;
font-weight:600;
height:42px;
padding:0 20px;
border-radius:999px;
transition:.2s ease;
box-shadow:0 8px 18px rgba(37,99,235,0.25);
border:1px solid #1d4ed8;
}

.btn-primary:hover{
background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
transform:translateY(-2px);
}

.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
height:42px;
padding:0 18px;
border-radius:999px;
text-decoration:none;
font-weight:600;
font-size:14px;
background:linear-gradient(180deg, #c8ddf0 0%, #b4ccdf 100%);
border:1px solid #c7dcff;
color:#1e3a8a;
box-shadow:0 6px 14px rgba(37,99,235,0.12);
transition:.2s ease;
}

.btn-secondary:hover{
transform:translateY(-2px);
background:linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
border-color:#60a5fa;
color:#1e40af;
}

.btn-copy{
background:#e8eefc;
color:#1e3a8a;
border:1px solid #bfdbfe;
box-shadow:0 1px 2px rgba(30, 58, 138, 0.08);
}

.btn-copy:hover{
background:#dbeafe;
color:#1e40af;
border-color:#93c5fd;
box-shadow:0 6px 14px rgba(37,99,235,0.16);
}

.btn-copy:focus-visible{
outline:2px solid #60a5fa;
outline-offset:2px;
}


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

pre{
margin-top:20px;
background:var(--surface);
padding:15px;
border:1px solid #d1d5db;
border-radius:var(--radius-sm);
overflow-x:auto;
line-height:1.5;
font-size:13.5px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}


/* ===================================================== */
/* ==================== TOOL LAYOUT ==================== */
/* ===================================================== */

.tool-container{
background:
radial-gradient(280px 180px at 100% 0%, rgba(178,206,230,0.18) 0%, rgba(178,206,230,0) 72%),
radial-gradient(220px 150px at 0% 100%, rgba(125, 211, 252, 0.10) 0%, rgba(125, 211, 252, 0) 72%),
linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
padding:var(--space-5);
border-radius:var(--radius-md);
box-shadow:var(--shadow-soft);
border:1px solid var(--border);
margin-top:20px;
max-width:800px;
margin-left:auto;
margin-right:auto;
}


/* ===================================================== */
/* ==================== TOOLS GRID ===================== */
/* ===================================================== */

.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:24px;
margin:0 auto 40px auto;
max-width:1000px;
align-items:stretch; /* 🔥 FIX */
}


/* ===================================================== */
/* ==================== TOOL CARDS ===================== */
/* ===================================================== */

.tool-card{
border:1px solid #c9daf6;
padding:18px;
border-radius:var(--radius-md);
background:linear-gradient(180deg, #c2d6e8 0%, #b4cade 100%);

display:flex;
flex-direction:column;
align-items:flex-start; /* 🔥 millor lectura */
justify-content:center;

gap:6px;

text-align:left;

transition:all .25s cubic-bezier(.4,0,.2,1);
box-shadow:0 10px 24px rgba(15,23,42,0.08);
cursor:pointer;

min-height:90px;
position:relative;
overflow:hidden;
}

.tool-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.46) 50%, rgba(255,255,255,0) 60%);
transform:translateX(-120%);
transition:transform .6s ease;
pointer-events:none;
}

.tool-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 22px 42px rgba(37,99,235,0.22);
border-color:#6ea9dc;
}

.tool-card:hover::before{
transform:translateX(120%);
}

.tool-card a{
display:flex; /* 🔥 FIX */
align-items:center;
justify-content:center;
width:100%;
height:100%;
gap:8px;
text-decoration:none;
color:#0f172a;
font-weight:700;
font-size:15px;
transition:.2s;
}

.tool-card a::after{
content:"→";
margin-left:6px;
opacity:0;
transform:translateX(-5px);
transition:.2s;
}

.tool-card:hover a{
color:var(--primary);
}

.tool-card:hover a::after{
opacity:1;
transform:translateX(0);
}


/* ===================================================== */
/* ================= CATEGORY FILTER =================== */
/* ===================================================== */

.category-filters{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin:30px auto 40px auto;
max-width:1000px;
}

.filter-btn{
background:#e2e8f0;
border:1px solid #cbd5e1;
padding:10px 16px;
border-radius:999px;
cursor:pointer;
font-size:14px;
transition:.2s;
color:#111827;
font-weight:500;
}

.filter-btn:hover{
background:#cbd5e1;
}

.filter-btn.active{
background:var(--primary);
color:white;
border-color:var(--primary);
}


/* ===================================================== */
/* ====================== FOOTER ======================= */
/* ===================================================== */

.footer{
margin-top:60px;
padding:30px 20px;
background:
radial-gradient(260px 160px at 100% 0%, rgba(178,206,230,0.40) 0%, rgba(178,206,230,0) 72%),
radial-gradient(220px 140px at 0% 100%, rgba(125, 211, 252, 0.10) 0%, rgba(125, 211, 252, 0) 72%),
linear-gradient(180deg, #c2d6e8 0%, #b4cade 100%);
border-radius:var(--radius-md);
box-shadow:0 10px 24px rgba(37,99,235,0.08);
text-align:center;
border:1px solid var(--border);
}

.footer-links a{
margin:0 10px;
font-size:14px;
color:#374151;
text-decoration:none;
}

.footer-links a:hover{
color:var(--primary);
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(12px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes popIn{
from{
opacity:0;
transform:scale(.98) translateY(6px);
}
to{
opacity:1;
transform:scale(1) translateY(0);
}
}

body:not(.ui-ready) .hero,
body:not(.ui-ready) section,
body:not(.ui-ready) .tool-container,
body:not(.ui-ready) .tools-grid,
body:not(.ui-ready) .footer{
opacity:0;
transform:translateY(10px);
}

body.ui-ready .hero,
body.ui-ready section,
body.ui-ready .tool-container,
body.ui-ready .tools-grid,
body.ui-ready .footer{
animation:fadeUp .45s ease both;
}

body.ui-ready .tool-card{
animation:popIn .35s ease both;
}

body.ui-ready .tool-card:nth-child(1){ animation-delay:.02s; }
body.ui-ready .tool-card:nth-child(2){ animation-delay:.05s; }
body.ui-ready .tool-card:nth-child(3){ animation-delay:.08s; }
body.ui-ready .tool-card:nth-child(4){ animation-delay:.11s; }
body.ui-ready .tool-card:nth-child(5){ animation-delay:.14s; }
body.ui-ready .tool-card:nth-child(6){ animation-delay:.17s; }

pre.output-state,
div#status.output-state{
border-left:4px solid transparent;
transition:background .2s ease, border-color .2s ease, color .2s ease;
padding-left:44px;
position:relative;
min-height:44px;
display:flex;
align-items:center;
}

div#status.output-state{
padding:10px 12px 10px 44px;
border-radius:10px;
margin:8px 0;
font-weight:600;
}

pre.output-state::before,
div#status.output-state::before{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
font-size:16px;
}

pre.output-success,
div#status.output-success{
border-left-color:#16a34a;
background:#f0fdf4;
}

pre.output-success::before,
div#status.output-success::before{ 
content:"✓"; 
color:#15803d; 
}

pre.output-error,
div#status.output-error{
border-left-color:#dc2626;
background:#fef2f2;
}

pre.output-error::before,
div#status.output-error::before{ 
content:"!"; 
color:#b91c1c; 
}

pre.output-info,
div#status.output-info{
border-left-color:#2563eb;
background:#eff6ff;
}

pre.output-info::before,
div#status.output-info::before{ 
content:"i"; 
color:#1d4ed8; 
}

.toast-stack{
position:fixed;
right:18px;
bottom:18px;
display:flex;
flex-direction:column;
gap:10px;
z-index:200;
pointer-events:none;
}

.toast{
min-width:220px;
max-width:340px;
padding:10px 14px;
border-radius:10px;
box-shadow:0 8px 26px rgba(0,0,0,0.2);
background:var(--surface);
border:1px solid var(--border);
color:var(--text);
font-size:14px;
line-height:1.35;
opacity:0;
transform:translateY(8px);
animation:toastIn .2s ease forwards;
}

.toast-success{ border-left:4px solid #16a34a; }
.toast-error{ border-left:4px solid #dc2626; }
.toast-info{ border-left:4px solid #2563eb; }

@keyframes toastIn{
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes toastOut{
to{
opacity:0;
transform:translateY(8px);
}
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
outline:3px solid rgba(37,99,235,0.35);
outline-offset:2px;
}


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

body.dark{
--bg:#0b1220;
--surface:#111827;
--surface-soft:#0f172a;
--text:#e5e7eb;
--text-muted:#9ca3af;
--border:#1f2937;
--primary-soft:#13233f;
background:
radial-gradient(1180px 600px at 4% -18%, rgba(34, 211, 238, 0.38) 0%, rgba(34, 211, 238, 0) 70%),
radial-gradient(980px 500px at 96% -22%, rgba(236, 72, 153, 0.14) 0%, rgba(236, 72, 153, 0) 64%),
radial-gradient(860px 420px at 52% 8%, rgba(56, 189, 248, 0.30) 0%, rgba(56, 189, 248, 0) 58%),
radial-gradient(760px 360px at 32% 22%, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 58%),
linear-gradient(180deg, #101d38 0%, #0a1020 240px);
color:var(--text);
}

body.dark .hero,
body.dark section,
body.dark .tool-container,
body.dark .footer{
background:
radial-gradient(320px 180px at 100% 0%, rgba(34, 211, 238, 0.12) 0%, rgba(34, 211, 238, 0) 74%),
radial-gradient(260px 160px at 0% 100%, rgba(236, 72, 153, 0.08) 0%, rgba(236, 72, 153, 0) 74%),
linear-gradient(180deg, rgba(13, 31, 58, 0.88) 0%, rgba(17, 29, 54, 0.82) 100%);
border-color:rgba(96, 165, 250, 0.34);
backdrop-filter:blur(14px);
box-shadow:0 12px 36px rgba(0,0,0,0.38), 0 0 0 1px rgba(34, 211, 238, 0.06);
}

body.dark .hero-eyebrow{
background:#13233f;
border-color:#1d4ed8;
color:#bfdbfe;
}

body.dark .hero-note,
body.dark .stat-card span,
body.dark .category-meta{
color:#94a3b8;
}

body.dark .stat-card{
background:
radial-gradient(180px 110px at 100% 0%, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 72%),
linear-gradient(180deg, rgba(11, 36, 64, 0.86) 0%, rgba(18, 28, 58, 0.76) 100%);
border-color:rgba(96, 165, 250, 0.42);
box-shadow:0 12px 28px rgba(0,0,0,0.28);
}

body.dark .stat-card strong{
color:#dbeafe;
}

body.dark .quick-chip{
background:linear-gradient(180deg, rgba(11, 36, 64, 0.90) 0%, rgba(18, 31, 60, 0.84) 100%);
border-color:rgba(96, 165, 250, 0.40);
color:#dbeafe;
}

body.dark .quick-chip:hover{
background:linear-gradient(180deg, rgba(20, 108, 190, 0.96) 0%, rgba(35, 79, 154, 0.90) 100%);
border-color:#7dd3fc;
color:#eff6ff;
}

body.dark .hero-search-wrap{
background:
radial-gradient(220px 120px at 15% 0%, rgba(34, 211, 238, 0.14) 0%, rgba(34, 211, 238, 0) 72%),
linear-gradient(180deg, rgba(7, 15, 31, 0.72) 0%, rgba(12, 23, 42, 0.66) 100%);
border-color:rgba(96, 165, 250, 0.22);
box-shadow:0 26px 55px rgba(2, 8, 24, 0.42);
}

body.dark .hero-search-wrap:focus-within{
border-color:rgba(125, 211, 252, 0.72);
box-shadow:0 22px 48px rgba(2, 8, 24, 0.56), 0 0 0 1px rgba(34, 211, 238, 0.24);
}

body.dark .home-intro{
background:
radial-gradient(220px 120px at 12% 0%, rgba(34, 211, 238, 0.14) 0%, rgba(34, 211, 238, 0) 72%),
linear-gradient(180deg, rgba(7, 15, 31, 0.74) 0%, rgba(12, 23, 42, 0.68) 100%);
border-color:rgba(96, 165, 250, 0.22);
box-shadow:0 28px 58px rgba(2, 8, 24, 0.44);
}

body.dark .tool-card{
background:linear-gradient(180deg, rgba(11, 35, 63, 0.92) 0%, rgba(18, 29, 58, 0.86) 100%);
border-color:rgba(96, 165, 250, 0.38);
box-shadow:0 16px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(34, 211, 238, 0.06);
}

body.dark .filter-btn{
background:linear-gradient(180deg, rgba(11, 36, 64, 0.90) 0%, rgba(18, 31, 60, 0.84) 100%);
border:1px solid rgba(96, 165, 250, 0.38);
color:#e5e7eb;
}

body.dark .filter-btn:hover{
background:linear-gradient(180deg, rgba(19, 95, 172, 0.94) 0%, rgba(31, 70, 148, 0.88) 100%);
}

body.dark a{
color:#93c5fd;
}

body.dark a:visited{
color:#c4b5fd;
}

body.dark .nav-right a.nav-btn,
body.dark .nav-right a.nav-btn:visited{
color:#ffffff;
}

body.dark .nav-brand{
color:#f9fafb;
}

body.dark input,
body.dark textarea{
background:linear-gradient(180deg, rgba(10, 30, 52, 0.96) 0%, rgba(18, 27, 49, 0.92) 100%);
color:#e5e7eb;
border:1px solid rgba(96, 165, 250, 0.34);
}

body.dark input::placeholder,
body.dark textarea::placeholder{
color:#94a3b8;
}

body.dark pre{
background:linear-gradient(180deg, rgba(10, 31, 56, 0.96) 0%, rgba(17, 27, 50, 0.92) 100%);
border:1px solid rgba(96, 165, 250, 0.30);
}

body.dark .btn-copy{
background:#1e3a8a;
color:#dbeafe;
border:1px solid #2563eb;
}

body.dark .btn-copy:hover{
background:#1d4ed8;
color:#eff6ff;
border-color:#60a5fa;
}

body.dark pre.output-success,
body.dark div#status.output-success{
background:#052e1a;
border-left-color:#22c55e;
}

body.dark pre.output-success::before,
body.dark div#status.output-success::before{ 
color:#4ade80; 
}

body.dark pre.output-error,
body.dark div#status.output-error{
background:#3a0b0b;
border-left-color:#ef4444;
}

body.dark pre.output-error::before,
body.dark div#status.output-error::before{ 
color:#f87171; 
}

body.dark pre.output-info,
body.dark div#status.output-info{
background:#0b1f3a;
border-left-color:#60a5fa;
}

body.dark pre.output-info::before,
body.dark div#status.output-info::before{ 
color:#93c5fd; 
}

body.dark .navbar{
background:linear-gradient(180deg, rgba(8, 27, 50, 0.94) 0%, rgba(16, 25, 48, 0.88) 100%);
}

body.dark .navbar.nav-compact{
background:linear-gradient(180deg, rgba(7, 23, 45, 0.97) 0%, rgba(15, 24, 47, 0.92) 100%);
box-shadow:0 16px 32px rgba(0,0,0,0.48);
}

body.dark .btn-secondary{
background:#1f2937;
border-color:#334155;
color:#dbeafe;
box-shadow:0 6px 14px rgba(0,0,0,0.35);
}

body.dark .btn-secondary:hover{
background:#1e3a8a;
border-color:#2563eb;
color:#eff6ff;
}


/* ===================================================== */
/* ==================== GLOBAL FIX IMG ================= */
/* ===================================================== */

img{
max-width:100%;
height:auto;
display:block;
}


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

@media (max-width:600px){

body{
padding:84px 12px 20px;
}

.navbar{
width:calc(100vw - 12px);
padding:10px;
top:0;
}

.navbar.nav-compact{
width:calc(100vw - 12px);
padding:8px 10px;
}

.nav-brand{
font-size:15px;
}

.nav-left{
flex:0 0 auto;
}

.nav-right{
gap:6px;
flex-wrap:wrap;
justify-content:flex-end;
}

.nav-right a.nav-btn,
.nav-right #themeToggle,
.nav-search-btn{
height:34px;
line-height:34px;
font-size:12px;
padding:0 10px;
width:auto;
flex:0 0 auto;
}

.nav-right .nav-btn.nav-search-btn{
font-size:12px;
padding:0 10px;
}

.nav-search-label{
display:none;
}

.hero{
padding:30px 15px;
}

.hero-stats{
grid-template-columns:1fr;
}

.hero-eyebrow{
font-size:11px;
}

.quick-links{
justify-content:flex-start;
}

.quick-chip{
height:32px;
font-size:12px;
}

h1{
max-width:none;
}

button{
width:100%;
margin-right:0;
}

.navbar button,
.navbar a.nav-btn{
width:auto;
margin-right:0;
}

.tools-grid{
grid-template-columns:1fr;
}

.toast-stack{
left:12px;
right:12px;
bottom:12px;
}

.toast{
max-width:none;
min-width:0;
}

}

@media (prefers-reduced-motion:reduce){
*{
animation:none !important;
transition:none !important;
}
}

/* ===================================================== */
/* ====================== STATUS ======================= */
/* ===================================================== */

#status{
margin-top:24px;
font-weight:600;
padding:8px 12px;
border-radius:6px;
display:inline-block;
}

.status-success{
background:#dcfce7;
color:#166534;
border:1px solid #86efac;
}

.status-error{
background:#fee2e2;
color:#991b1b;
border:1px solid #fca5a5;
}

/* ===================================================== */
/* =================== HTML EDITOR ===================== */
/* ===================================================== */

.tool-actions{
margin-top:15px;
display:flex;
justify-content:flex-start;
gap:10px;
}

.editor-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.editor-grid textarea{
height:300px;
font-family:monospace;
border-radius:10px;
padding:15px;
border:1px solid #e5e7eb;
resize:none;
}

/* PREVIEW */
.preview-wrapper{
grid-column:span 2;
display:flex;
flex-direction:column;
}

.preview-label{
font-size:13px;
margin-bottom:5px;
color:#6b7280;
}

.preview-wrapper iframe{
height:320px;
border-radius:10px;
border:1px solid #e5e7eb;
background:white;
}

/* DARK MODE */

body.dark .editor-grid textarea,
body.dark .preview-wrapper iframe{
background:#1f2937;
border-color:#374151;
color:#e5e7eb;
}

body.dark .preview-label{
color:#9ca3af;
}

/* MOBILE */
@media (max-width:800px){
.editor-grid{
grid-template-columns:1fr;
}
.preview-wrapper{
grid-column:span 1;
}
}

.converter-mode{
display:flex;
gap:10px;
margin-bottom:15px;
}

.mode-btn{
padding:8px 14px;
border:none;
border-radius:8px;
cursor:pointer;
background:#e2e8f0;
color:#1e293b;
}

.mode-btn.active{
background:#2563eb;
color:white;
}

.converter-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.converter-grid textarea{
height:250px;
font-family:monospace;
}

/* MOBILE */
@media (max-width:700px){
.converter-grid{
grid-template-columns:1fr;
}
}

.diff-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.diff-grid textarea{
height:220px;
font-family:monospace;
}

@media (max-width:700px){
.diff-grid{
grid-template-columns:1fr;
}
}

.diff-output{
margin-top:20px;
font-family:monospace;
}

.diff-added{
background:#dcfce7;
padding:6px;
border-left:4px solid #22c55e;
margin-bottom:4px;
}

.diff-removed{
background:#fee2e2;
padding:6px;
border-left:4px solid #ef4444;
margin-bottom:4px;
}

.diff-changed{
background:#fef3c7;
padding:6px;
border-left:4px solid #f59e0b;
margin-bottom:4px;
}

.diff-same{
opacity:0.6;
padding:6px;
}

.diff-table{
display:grid;
grid-template-columns:1fr 1fr;
border:1px solid #e5e7eb;
border-radius:10px;
overflow:hidden;
margin-top:20px;
}

.diff-header{
background:#f1f5f9;
padding:10px;
font-weight:600;
text-align:center;
border-bottom:1px solid #e5e7eb;
}

.cell{
padding:10px;
border-bottom:1px solid #e5e7eb;
font-family:monospace;
}

/* COLORS */

.added{
background:#dcfce7;
}

.removed{
background:#fee2e2;
}

.changed{
background:#fef9c3;
}

.same{
background:white;
}

/* DARK MODE */

body.dark .diff-header{
background:#1f2937;
}

body.dark .same{
background:#111827;
}

body.dark .added{
background:#14532d;
}

body.dark .removed{
background:#7f1d1d;
}

body.dark .changed{
background:#78350f;
}