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

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

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

html{
scroll-behavior:smooth;
}

body{

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

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

color:#ffffff;

overflow-x:hidden;

margin:0 !important;
padding:0 !important;

-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

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

.tv-app{

width:100%;
max-width:1600px;

margin:auto;

padding:10px;

overflow:hidden;
}

/* =========================
GLOBAL PREMIUM BOXES
========================= */

.tv-header,
.tv-profile-bar,
.tv-calendar-page,
.tv-income-wrap,
.tv-box,
.tv-income-card,
.tv-project-card,
.tv-popup-box{

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

border:
1px solid rgba(139,92,246,.12);

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

border-radius:32px;

backdrop-filter:blur(18px);

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

position:relative;

overflow:hidden;
}

/* =========================================
PROFILE BOX
========================================= */

.tv-profile-bar{

display:flex;
align-items:center;
justify-content:space-between;

gap:20px;

padding:22px 26px;

min-height:130px;

margin-bottom:14px;
}

/* LEFT */

.tv-profile-left{

display:flex;
align-items:center;

width:100%;
}

/* REMOVE AVATAR */

.tv-avatar{
display:none !important;
}

/* INFO */

.tv-profile-info{

display:flex;
flex-direction:column;
justify-content:center;

width:100%;
}

/* NAME */

.tv-profile-info h2{

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

line-height:1;

margin:0;

cursor:pointer;

user-select:none;

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

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

/* SUBTITLE */

.tv-profile-info p{

margin-top:10px;

font-size:16px;

color:#cbd5e1;
}

/* LEVEL BOX */

.tv-level-box{

width:88px;
height:88px;

min-width:88px;

border-radius:28px;

display:flex;
flex-direction:column;

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

text-align:center;

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

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

gap:8px;
}

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

.tv-header{

display:flex;
align-items:center;
justify-content:space-between;

padding:14px 18px;

min-height:110px;

margin-bottom:14px;
}

/* TITLE */

.tv-header h1{

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

line-height:1;

background:
linear-gradient(
90deg,
#a855f7,
#6366f1,
#06b6d4
);

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

/* SMALL PLUS BUTTON */

#tv-add-project{

width:82px;
height:82px;

min-width:82px;

border:none;

border-radius:28px;

cursor:pointer;

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

color:#ffffff;

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

padding:0;

line-height:1;

background:
linear-gradient(
135deg,
#7c3aed,
#2563eb
);

transition:.18s ease;
}

#tv-add-project:hover{

transform:
translateY(-2px);
}

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

.tv-search-bar{

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;

margin-bottom:18px;
}

#tv-search-input,
#tv-project-switcher,
#tv-project-name,
#tv-daily-income,
#tv-daily-expense{

width:100%;
height:60px;

padding:0 18px;

border-radius:22px;

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

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

outline:none;

font-size:15px;

color:#ffffff;
}

#tv-search-input::placeholder,
#tv-project-name::placeholder,
#tv-daily-income::placeholder,
#tv-daily-expense::placeholder{

color:#94a3b8;
}

/* =========================================
CALENDAR PAGE
========================================= */

.tv-calendar-page{

padding:18px;
}

/* MONTH */

.tv-calendar-head{

display:grid;

grid-template-columns:
60px 1fr 60px;

align-items:center;

gap:10px;

margin-bottom:24px;
}

.tv-calendar-head h2{

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

text-align:center;
}

.tv-calendar-head button{

width:60px;
height:60px;

border:none;

border-radius:22px;

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

cursor:pointer;

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

color:#ffffff;

background:
linear-gradient(
135deg,
#7c3aed,
#2563eb
);

transition:.18s ease;
}

/* WEEK */

.tv-weekdays{

display:grid;

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

gap:6px;

margin-bottom:10px;
}

.tv-weekday{

text-align:center;

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

color:#94a3b8;
}

/* GRID */

.tv-calendar-grid{

display:grid;

grid-template-columns:
repeat(7,minmax(0,1fr));

gap:8px;
}

/* DATE CIRCLE */

.tv-day{

aspect-ratio:1/1;

width:100%;

border-radius:50%;

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

position:relative;

cursor:pointer;

overflow:hidden;

background:
linear-gradient(
145deg,
rgba(18,26,52,.96),
rgba(10,18,40,.98)
);

border:
1px solid rgba(139,92,246,.12);

transition:.18s ease;
}

.tv-day:hover{

transform:
translateY(-2px)
scale(1.02);
}

/* DATE */

.tv-day-number{

position:absolute;

top:50%;
left:50%;

transform:
translate(-50%,-50%);

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

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

line-height:1;

z-index:5;
}

/* HIDE TEXT */

.tv-status-preview{
display:none !important;
}

/* SELECT */

.tv-status{

position:absolute !important;

inset:0 !important;

width:100% !important;
height:100% !important;

opacity:0 !important;

cursor:pointer !important;

z-index:20 !important;
}

/* COLORS */

.tv-day.present{

background:
linear-gradient(
145deg,
rgba(34,197,94,.24),
rgba(18,60,38,.96)
);

border-color:
rgba(34,197,94,.34);
}

.tv-day.absent{

background:
linear-gradient(
145deg,
rgba(239,68,68,.22),
rgba(60,18,18,.96)
);

border-color:
rgba(239,68,68,.34);
}

.tv-day.half{

background:
linear-gradient(
145deg,
rgba(249,115,22,.22),
rgba(55,30,12,.96)
);

border-color:
rgba(249,115,22,.34);
}

.tv-day.extra{

background:
linear-gradient(
145deg,
rgba(139,92,246,.24),
rgba(28,18,55,.96)
);

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

/* =========================================
SUMMARY
========================================= */

.tv-summary{

display:grid;

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

gap:12px;

margin-top:18px;
}

.tv-box{

padding:16px 10px;

text-align:center;
}

.tv-box span{

display:block;

font-size:22px;
font-weight:900;
}

.tv-box p{

margin-top:6px;

font-size:11px;

color:#cbd5e1;
}

/* =========================================
INCOME
========================================= */

.tv-income-wrap{

padding:18px;

margin-top:18px;
}

.tv-income-form{

display:grid;

grid-template-columns:
1fr 1fr;

gap:12px;
}

.tv-income-group label{

display:block;

margin-bottom:8px;

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

color:#cbd5e1;
}

.tv-income-cards{

display:grid;

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

gap:12px;

margin-top:18px;
}

.tv-income-card{

padding:18px;

min-height:120px;

display:flex;
flex-direction:column;
justify-content:center;

text-align:center;
}

.tv-income-card h3{

font-size:14px;

margin-bottom:10px;

font-weight:800;
}

.tv-income-card p{

font-size:24px;
font-weight:900;
}

/* =========================================
PROJECTS
========================================= */

.tv-project-list{

display:grid;

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

gap:18px;

margin-top:18px;
}

.tv-project-card{

padding:24px;

display:flex;
flex-direction:column;

gap:20px;
}

.tv-project-card h3{

font-size:28px;

font-weight:900;

background:
linear-gradient(
90deg,
#a855f7,
#6366f1,
#06b6d4
);

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

.tv-project-actions{

display:flex;

align-items:center;

gap:12px;

flex-wrap:wrap;
}

.tv-project-actions a,
.tv-project-actions button{

height:52px;

padding:0 24px;

border:none;

border-radius:18px;

display:inline-flex;

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

text-decoration:none;

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

cursor:pointer;

transition:.18s ease;
}

.tv-project-actions a{

color:#ffffff;

background:
linear-gradient(
135deg,
#7c3aed,
#2563eb
);
}

.tv-project-actions button{

color:#ffffff;

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

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

/* =========================================
POPUP
========================================= */

.tv-popup{

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

display:none;

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

padding:20px;

background:
rgba(2,6,23,.72);

backdrop-filter:
blur(16px);

z-index:999999;
}

.tv-popup-box{

width:100%;
max-width:380px;

padding:28px;
}

.tv-popup-box h2{

font-size:28px;

text-align:center;

margin-bottom:22px;

font-weight:900;

background:
linear-gradient(
90deg,
#a855f7,
#6366f1,
#06b6d4
);

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

#tv-save-project{

width:100%;
height:58px;

margin-top:16px;

border:none;

border-radius:20px;

cursor:pointer;

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

color:#ffffff;

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

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

@media(max-width:768px){

.tv-app{
padding:8px;
}

.tv-profile-bar{

padding:18px;

min-height:110px;

border-radius:28px;
}

.tv-profile-info h2{

font-size:36px;
}

.tv-profile-info p{

font-size:13px;

margin-top:6px;
}

.tv-level-box{

width:70px;
height:70px;

min-width:70px;

font-size:12px;

border-radius:22px;
}

.tv-header{

padding:12px 14px;

min-height:92px;

border-radius:28px;
}

.tv-header h1{

font-size:30px;
}

#tv-add-project{

width:66px;
height:66px;

min-width:66px;

border-radius:22px;

font-size:34px;
}

.tv-search-bar,
.tv-income-form{

grid-template-columns:1fr;
}

.tv-calendar-head{

grid-template-columns:
50px 1fr 50px;
}

.tv-calendar-head h2{

font-size:20px;
}

.tv-calendar-head button{

width:50px;
height:50px;

font-size:18px;
}

.tv-summary{

grid-template-columns:
1fr 1fr;
}

.tv-income-cards{

grid-template-columns:
1fr;
}

}

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

@media(max-width:480px){

.tv-profile-info h2{

font-size:28px;
}

.tv-header h1{

font-size:24px;
}

#tv-add-project{

width:58px;
height:58px;

min-width:58px;

font-size:30px;
}

.tv-day{

min-height:58px;
}

.tv-day-number{

font-size:17px;
}

}