/* =========================================
   TOOLVERSE ULTRA PREMIUM CSS
========================================= */

:root{

--tv-primary:#7c3aed;
--tv-primary2:#2563eb;

--tv-bg:#050b18;

--tv-border:
rgba(139,92,246,.14);

}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

/* BODY */

body{

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

background:
linear-gradient(
180deg,
#140726 0%,
#081225 45%,
#050b18 100%
);

padding:20px 12px;

overflow-x:hidden;

color:#fff;
}

/* WRAP */

.tv-wrap{

max-width:1300px;

margin:auto;
}

/* TOP */

.tv-top{

text-align:center;

margin-bottom:34px;
}

/* BADGE */

.tv-badge{

display:inline-flex;

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

padding:10px 18px;

border-radius:999px;

font-size:12px;
font-weight:800;

letter-spacing:.4px;

margin-bottom:22px;

color:#ffffff;

background:
linear-gradient(
90deg,
#7c3aed,
#4f46e5,
#2563eb
);

box-shadow:
0 8px 20px rgba(99,102,241,.18);
}

/* TITLE */

.tv-top h1{

font-size:58px;
font-weight:900;

line-height:1.05;

margin-bottom:14px;

background:
linear-gradient(
90deg,
#ffffff,
#dbeafe,
#a855f7
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* DESC */

.tv-top p{

max-width:760px;

margin:auto;

font-size:16px;

line-height:1.8;

color:#cbd5e1;
}

/* GRID */

.tv-grid{

display:grid;

grid-template-columns:430px 1fr;

gap:24px;
}

/* CARD */

.tv-card{

background:
linear-gradient(
145deg,
rgba(10,18,40,.96),
rgba(6,14,32,.98)
);

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

border-radius:34px;

padding:30px;

box-shadow:
0 10px 40px rgba(0,0,0,.34),
0 0 25px rgba(139,92,246,.05);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

position:relative;

overflow:hidden;
}

/* GLOW */

.tv-card::before{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(255,255,255,.03),
transparent 40%
);

pointer-events:none;
}

/* TITLE */

.tv-title{

font-size:28px;
font-weight:900;

margin-bottom:24px;

background:
linear-gradient(
90deg,
#ffffff,
#a855f7
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* FIELD */

.tv-field{

margin-bottom:18px;
}

/* LABEL */

.tv-field label{

display:block;

margin-bottom:10px;

font-size:14px;
font-weight:700;

color:#e2e8f0;
}

/* INPUT */

.tv-field input,
.tv-field textarea,
.tv-field select{

width:100%;

border:
1px solid rgba(255,255,255,.08);

background:
rgba(255,255,255,.05);

border-radius:22px;

padding:18px;

font-size:15px;

outline:none;

transition:.18s ease;

color:#ffffff;

resize:none;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);
}

/* TEXTAREA */

.tv-field textarea{

min-height:140px;

line-height:1.8;
}

/* OPTION */

.tv-field select option{

background:#081225;

color:#fff;
}

/* PLACEHOLDER */

.tv-field input::placeholder,
.tv-field textarea::placeholder{

color:#94a3b8;
}

/* FOCUS */

.tv-field input:focus,
.tv-field textarea:focus,
.tv-field select:focus{

border-color:
rgba(139,92,246,.45);

background:
rgba(255,255,255,.07);

box-shadow:
0 0 0 4px rgba(139,92,246,.10);
}

/* BUTTONS */

.tv-btns{

display:flex;

gap:14px;

margin-top:12px;
}

/* BUTTON */

.tv-btn{

border:none;

border-radius:22px;

height:58px;

cursor:pointer;

transition:.18s ease;

font-size:15px;
font-weight:800;

position:relative;

overflow:hidden;
}

/* GENERATE */

.tv-generate{

flex:1;

color:#ffffff;

background:
linear-gradient(
90deg,
#7c3aed,
#4f46e5,
#2563eb
);

box-shadow:
0 8px 20px rgba(99,102,241,.22);
}

/* COPY */

.tv-copy{

width:130px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

color:#ffffff;
}

/* HOVER */

.tv-btn:hover{

transform:
translateY(-2px);

filter:brightness(1.05);
}

/* ACTIVE */

.tv-btn:active{

transform:scale(.98);
}

/* OUTPUT CARD */

.tv-output-card{

overflow:hidden;
}

/* OUTPUT BADGE */

.tv-output-badge{

display:inline-flex;

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

padding:10px 18px;

border-radius:999px;

font-size:12px;
font-weight:800;

letter-spacing:.4px;

margin-bottom:22px;

background:
rgba(255,255,255,.06);

color:#ffffff;

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);
}

/* OUTPUT */

.tv-output{

color:#e5e7eb;

line-height:2;

font-size:15px;

white-space:pre-wrap;

min-height:400px;

max-height:500px;

overflow-y:auto;

padding-right:10px;
}

/* SCROLLBAR */

.tv-output::-webkit-scrollbar{

width:6px;
}

.tv-output::-webkit-scrollbar-thumb{

background:
rgba(255,255,255,.15);

border-radius:999px;
}

/* HIDDEN */

.tv-hidden-link{

position:absolute;

width:1px;
height:1px;

opacity:0;

overflow:hidden;
}

/* MOBILE */

@media(max-width:980px){

.tv-grid{

grid-template-columns:1fr;
}

}

/* TABLET */

@media(max-width:768px){

body{

padding:14px 10px;
}

.tv-top{

margin-bottom:24px;
}

.tv-top h1{

font-size:34px;
}

.tv-top p{

font-size:14px;
}

.tv-card{

padding:22px;

border-radius:24px;
}

.tv-title{

font-size:24px;
}

.tv-field input,
.tv-field textarea,
.tv-field select{

padding:16px;

font-size:14px;

border-radius:18px;
}

.tv-btn{

height:52px;

font-size:14px;

border-radius:18px;
}

.tv-copy{

width:110px;
}

.tv-output{

font-size:14px;
}

}

/* SMALL MOBILE */

@media(max-width:580px){

.tv-btns{

flex-direction:column;
}

.tv-copy{

width:100%;
}

.tv-top h1{

font-size:28px;
}

.tv-top p{

font-size:13px;
}

.tv-card{

padding:18px;

border-radius:22px;
}

}

/* PRINT */

@media print{

html,
body{

background:#050b18 !important;

-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}

.tv-card{

background:
linear-gradient(
145deg,
#0b1220,
#08111f
) !important;

box-shadow:none !important;
}

}