/* ======================================================
TOOLS4PDF
FULLY FIXED RESPONSIVE APP UI
NO OVERFLOW VERSION
====================================================== */

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

*{
margin:0;
padding:0;
box-sizing:border-box;
min-width:0;
}

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

:root{

--bg:#0f172a;

--bg-light:#111827;

--card:
rgba(255,255,255,0.05);

--card-hover:
rgba(255,255,255,0.08);

--border:
rgba(255,255,255,0.08);

--text:#ffffff;

--muted:#94a3b8;

--primary:#3b82f6;

--shadow:
0 20px 50px rgba(0,0,0,0.35);

}

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

html{

font-size:16px;

scroll-behavior:smooth;

-webkit-text-size-adjust:100%;

overflow-x:hidden;

}

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

body{

background:
linear-gradient(
180deg,
#0f172a 0%,
#111827 100%
);

font-family:'Inter',sans-serif;

color:var(--text);

overflow-x:hidden;

width:100%;

min-height:100vh;

-webkit-tap-highlight-color:transparent;

touch-action:manipulation;

padding-bottom:
env(safe-area-inset-bottom);

}

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

a{
text-decoration:none;
color:inherit;
}

button{
font-family:'Inter',sans-serif;
}

img,
canvas,
svg{
max-width:100%;
display:block;
}

/* ======================================================
HEADER
====================================================== */

header{

position:sticky;

top:0;

z-index:999;

width:100%;

background:
rgba(15,23,42,0.85);

backdrop-filter:blur(18px);

border-bottom:
1px solid var(--border);

overflow:hidden;

}

.header-container{

width:100%;

max-width:1600px;

margin:auto;

padding:14px 18px;

display:flex;

align-items:center;

justify-content:space-between;

gap:14px;

min-height:70px;

overflow:hidden;

}

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

.logo{

font-size:1.35rem;

font-weight:800;

white-space:nowrap;

flex-shrink:0;

letter-spacing:-0.03em;

}

.logo span{
color:var(--primary);
}

/* ======================================================
SEARCH
====================================================== */

.search-container{

flex:1;

min-width:0;

max-width:700px;

overflow:hidden;

}

.search-input{

width:100%;

height:52px;

padding:0 20px;

border:none;

outline:none;

border-radius:999px;

background:
rgba(255,255,255,0.06);

backdrop-filter:blur(10px);

border:
1px solid rgba(255,255,255,0.06);

color:white;

font-size:15px;

transition:0.22s;

}

.search-input:focus{

border-color:
rgba(59,130,246,0.45);

background:
rgba(255,255,255,0.08);

}

.search-input::placeholder{
color:var(--muted);
}

/* ======================================================
DRAWER TOGGLE
====================================================== */

.app-drawer-toggle{

width:52px;
height:52px;

border:none;

border-radius:18px;

background:
rgba(255,255,255,0.06);

display:grid;

grid-template-columns:
repeat(3,4px);

gap:4px;

justify-content:center;
align-content:center;

cursor:pointer;

transition:0.2s;

flex-shrink:0;

}

.app-drawer-toggle:hover{

background:
rgba(255,255,255,0.1);

}

.app-drawer-toggle span{

width:4px;
height:4px;

background:white;

border-radius:50%;

}

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

.hero{

width:100%;

max-width:1600px;

margin:auto;

padding:
clamp(36px,8vw,90px)
clamp(16px,4vw,40px)
40px;

text-align:center;

overflow:hidden;

}

.hero h1{

font-size:
clamp(2rem,8vw,5rem);

line-height:1;

font-weight:800;

letter-spacing:-0.05em;

max-width:950px;

margin:auto;

margin-bottom:20px;

word-break:break-word;

}

.hero p{

max-width:760px;

margin:auto;

font-size:
clamp(0.95rem,2vw,1.1rem);

line-height:1.8;

color:var(--muted);

}

/* ======================================================
APP CONTAINER
====================================================== */

.app-container{

width:100%;

max-width:1600px;

margin:auto;

padding:
0
clamp(16px,4vw,40px)
50px;

display:grid;

grid-template-columns:
250px 1fr;

gap:24px;

align-items:start;

overflow:hidden;

}

/* ======================================================
SIDEBAR
====================================================== */

aside{

position:sticky;

top:90px;

min-width:0;

overflow:hidden;

}

/* ======================================================
CATEGORY TITLE
====================================================== */

.sidebar-title{

margin-bottom:18px;

font-size:14px;

font-weight:700;

letter-spacing:0.08em;

text-transform:uppercase;

color:var(--muted);

}

/* ======================================================
CATEGORY LIST
====================================================== */

.category-list{

list-style:none;

display:flex;

flex-direction:column;

gap:12px;

width:100%;

min-width:0;

overflow:hidden;

}

/* ======================================================
CATEGORY BUTTON
====================================================== */

.category-btn{

width:100%;

max-width:100%;

min-width:0;

padding:14px 16px;

border:none;

background:
rgba(255,255,255,0.04);

backdrop-filter:blur(10px);

border:
1px solid rgba(255,255,255,0.05);

border-radius:18px;

color:white;

font-size:14px;

font-weight:600;

text-align:left;

cursor:pointer;

transition:0.22s;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.category-btn:hover{

background:
rgba(255,255,255,0.08);

transform:translateY(-2px);

}

.category-btn.active{

background:
rgba(59,130,246,0.18);

border-color:
rgba(59,130,246,0.25);

}

/* ======================================================
MAIN
====================================================== */

main{

width:100%;

min-width:0;

overflow:hidden;

}

/* ======================================================
SECTION TITLE
====================================================== */

.section-title{

font-size:
clamp(1.5rem,4vw,2.2rem);

margin-bottom:24px;

font-weight:800;

letter-spacing:-0.03em;

word-break:break-word;

}

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

.tools-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(160px,1fr));

gap:16px;

width:100%;

min-width:0;

overflow:hidden;

}

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

.tool-card{

width:100%;

min-width:0;

min-height:180px;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.04)
);

backdrop-filter:blur(14px);

border:
1px solid rgba(255,255,255,0.08);

border-radius:28px;

padding:18px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

transition:all 0.22s ease;

box-shadow:
0 10px 30px rgba(0,0,0,0.18);

overflow:hidden;

}

.tool-card:hover{

transform:
translateY(-5px);

background:
linear-gradient(
180deg,
rgba(255,255,255,0.12),
rgba(255,255,255,0.06)
);

}

.tool-card:active{
transform:scale(0.97);
}

/* ======================================================
TOOL ICON
====================================================== */

.tool-icon{

width:68px;
height:68px;

border-radius:22px;

display:flex;

align-items:center;
justify-content:center;

background:
rgba(59,130,246,0.15);

font-size:1.9rem;

margin-bottom:14px;

flex-shrink:0;

}

/* ======================================================
TOOL TITLE
====================================================== */

.tool-title{

font-size:0.95rem;

font-weight:700;

line-height:1.4;

margin-bottom:8px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

word-break:break-word;

}

/* ======================================================
TOOL DESC
====================================================== */

.tool-desc{

font-size:0.84rem;

line-height:1.5;

color:var(--muted);

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient:vertical;

word-break:break-word;

}

/* ======================================================
NO RESULT
====================================================== */

.no-results{

padding:60px 20px;

text-align:center;

background:
rgba(255,255,255,0.05);

border:
1px solid var(--border);

border-radius:28px;

}

/* ======================================================
DRAWER
====================================================== */

.app-drawer{

position:fixed;

bottom:14px;

left:14px;
right:14px;

width:auto;

background:
rgba(17,24,39,0.92);

backdrop-filter:blur(18px);

border:
1px solid rgba(255,255,255,0.08);

padding:20px;

border-radius:30px;

display:none;

z-index:999;

box-shadow:
0 25px 70px rgba(0,0,0,0.45);

animation:
drawerIn 0.22s ease;

overflow:hidden;

}

.app-drawer.open{
display:block;
}

@keyframes drawerIn{

from{
opacity:0;
transform:
translateY(10px)
scale(0.96);
}

to{
opacity:1;
transform:
translateY(0)
scale(1);
}

}

/* ======================================================
DRAWER GRID
====================================================== */

.drawer-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:12px;

width:100%;

}

/* ======================================================
DRAWER ITEM
====================================================== */

.drawer-item{

text-align:center;

padding:10px;

border-radius:20px;

transition:0.22s;

overflow:hidden;

}

.drawer-item:hover{

background:
rgba(255,255,255,0.06);

}

.drawer-item:active{
transform:scale(0.96);
}

/* ======================================================
DRAWER ICON
====================================================== */

.drawer-icon{

width:54px;
height:54px;

margin:auto;

margin-bottom:10px;

display:flex;

align-items:center;
justify-content:center;

background:
rgba(59,130,246,0.15);

border-radius:18px;

font-size:1.3rem;

}

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

.drawer-label{

font-size:11px;

line-height:1.3;

word-break:break-word;

}

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

footer{

margin-top:80px;

padding:
60px 20px
120px;

border-top:
1px solid rgba(255,255,255,0.08);

overflow:hidden;

}

.footer-container{

max-width:1600px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:40px;

}

.footer-column h3{

margin-bottom:18px;

font-size:16px;

}

.footer-column a{

display:block;

margin-bottom:12px;

color:var(--muted);

transition:0.2s;

word-break:break-word;

}

.footer-column a:hover{
color:white;
}

.footer-bottom{

margin-top:50px;

text-align:center;

color:var(--muted);

font-size:14px;

}

/* ======================================================
TABLET
====================================================== */

@media(max-width:1100px){

.app-container{

grid-template-columns:1fr;

}

aside{

position:relative;

top:0;

}

.category-list{

flex-direction:row;

overflow-x:auto;

padding-bottom:6px;

}

.category-list::-webkit-scrollbar{
display:none;
}

.category-btn{

white-space:nowrap;

flex-shrink:0;

width:auto;

}

}

/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px){

.header-container{

padding:12px 14px;

min-height:64px;

}

.search-container{
display:none;
}

.hero{

padding-top:34px;

}

.tools-grid{

grid-template-columns:
repeat(2,1fr);

gap:12px;

}

.tool-card{

padding:14px;

min-height:170px;

border-radius:24px;

}

.tool-icon{

width:58px;
height:58px;

font-size:1.5rem;

border-radius:18px;

}

.tool-desc{
display:none;
}

.drawer-grid{

grid-template-columns:
repeat(4,1fr);

gap:10px;

}

.drawer-icon{

width:48px;
height:48px;

font-size:1.1rem;

}

.drawer-label{

font-size:10px;

}

}

/* ======================================================
SMALL MOBILE
====================================================== */

@media(max-width:420px){

.hero h1{

font-size:1.9rem;

}

.tools-grid{

grid-template-columns:
1fr 1fr;

gap:10px;

}

.tool-card{

padding:12px;

min-height:160px;

}

.tool-icon{

width:50px;
height:50px;

font-size:1.3rem;

}

.category-btn{

font-size:13px;

padding:12px 14px;

}

}

/* ======================================================
VERY SMALL DEVICES
====================================================== */

@media(max-width:360px){

.tools-grid{

gap:8px;

}

.tool-card{

padding:10px;

min-height:150px;

}

.tool-title{

font-size:0.78rem;

}

.tool-icon{

width:46px;
height:46px;

}

.drawer-grid{

grid-template-columns:
repeat(3,1fr);

}

}