:root{
--bg:#071326;
--bg2:#081a30; 

--card:#0f1e35;

--accent:#00d4ff;

--button:#f59e0b;

--text:#e6edf5;

--muted:#8fa3b8;

}

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

html, body{
height:100%;
}

body {
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;

    /* CSAK A GYÖNYÖRŰ KÉK FÉNYSUGÁR */
    background-image: radial-gradient(ellipse 60vw 45vh at right 30%, #16325c 0%, var(--bg) 100%);
    
    background-attachment: fixed; /* Ez nagyon fontos, ettől marad 3D-s hatású görgetéskor! */
    background-color: var(--bg); /* Védőháló, ha valamiért lassan töltene a böngésző */
}


/* TOPBAR */

.topbar{

height: 65px; 

background:#081a30;

padding:15px 25px;

display:flex;

justify-content:space-between;

align-items:center;

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

}


.logo {
    font-size: 20px;
    font-weight: bold;
    color: var(--accent);
}

.logo a {
    text-decoration: none;
    color: var(--accent);
    /* FLEXBOX: Ez teszi őket egy sorba és igazítja tökéletesen középre */
    display: flex;
    align-items: center;
    gap: 10px; /* Távolság a logó és a szöveg között */
}

/* A kép méretezése, hogy ne robbantsa szét a menüsávot */
.header-logo-img {
    height: 32px; /* Ha túl nagy/kicsi, ezt a számot állítsd! */
    width: auto;
    object-fit: contain;
}


.topbar-right{

display:flex;

align-items:center;

gap:20px;

}

.balance{

color:var(--muted);

}

.balance-item {
    background: rgba(255,255,255,0.03);
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: right;
}

.btn-logout{

background:#51527e;

border:none;

padding:8px 14px;

border-radius:5px;

color:white;

cursor:pointer;

}


/* LAYOUT */

.layout{

display:flex;

flex:1;     

}


 /* SIDEBAR */
.sidebar {
    position: fixed;
    top: 65px; /* Állítsd be a Headered pontos magasságára! */
    left: 0;
    width: 225px; /* Fix szélesség */
    height: calc(100vh - 65px); /* Teljes magasság mínusz a header */
    overflow-y: auto;
    background: #0f172a;
    padding: 20px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 100;
}

/* Sidebar görgetősáv stílusa (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
    width: 5px; /* Vékony sáv */
}

.sidebar::-webkit-scrollbar-track {
    background: transparent; 
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1); /* Halvány szürke csík */
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--accent); /* Ha az egér felette van, a te sárga/kék színeddel világít */
}



.sidebar a{

display:block;

padding:10px;

margin-bottom:5px;

border-radius:6px;

color:var(--muted);
text-decoration: none;

}

.sidebar a:hover{

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

color:white;

}


    /* Sidebar Icons */
.sidebar-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 12px;
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.2)); /* Opcionális: kis ragyogás az ikonoknak */
    transition: transform 0.2s ease;
}

/* Kicsit megugrik az ikon, ha ráviszed az egeret a linkre */
.sidebar a:hover .sidebar-icon {
    transform: scale(1.1);
}


/* Sidebar ikonok alapállapotban: szürkék és picit halványabbak */
.sidebar img {
    filter: grayscale(100%); /* Teljesen fekete-fehér */
    opacity: 0.6; /* Picit átlátszó, hogy ne legyen túl erős */
    transition: all 0.3s ease; /* Finom, animált átmenet */
}

/* Sidebar ikonok, ha fölé viszed az egeret (Hover) */
.sidebar a:hover img {
    filter: grayscale(0%); /* Visszakapja az eredeti színeit */
    opacity: 1; /* Teljesen látható lesz */
    transform: scale(1.1); /* Opcionális: picit meg is nő, ahogy a dashboard ikonnál csináltad */
}

/* Opcionális: Ha van "aktív" menüpontod (ahol épp áll a felhasználó), az is legyen színes */
.sidebar a.active img {
    filter: grayscale(0%) !important;
    opacity: 1;
}



.main{

margin-left:225px;

padding:30px;

width: calc(100% - 225px); /* A teljes szélesség mínusz a menü */

flex:1;

}

/* CARDS */     

.card{

background:var(--card);

padding:25px;

border-radius:10px;

box-shadow:

0 0 0 1px rgba(255,255,255,0.03),

0 10px 25px rgba(0,0,0,0.5);

margin-bottom:20px;

}


/* FAUCET */

.faucet-card{

max-width:450px;

margin:auto;

text-align:center;

}

.faucet-stats{

display:flex;

justify-content:space-around;

margin:20px 0;

}

.captcha{

margin:20px 0;

display:flex;

justify-content:center;

}

.btn-primary{

margin-top:15px;
display:block;
margin-left:auto;
margin-right:auto;

background:var(--button);

padding:12px 20px;

border:none;

border-radius:6px;

font-weight:bold;

cursor:pointer;

}




.faucet-mini-toast {
    position: fixed;
    top: 80px; /* A header alatt */
    right: -300px; /* Alapból kint van a képből */
    background: #1e293b;
    border: 1px solid #10b981;
    border-radius: 12px;
    padding: 15px;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 9999;
    transition: right 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}

.faucet-mini-toast.show {
    right: 20px; /* Becsúszik a képernyőre */
}

.faucet-mini-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.faucet-mini-toast strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.faucet-mini-toast p {
    margin: 2px 0;
    color: #10b981;
    font-size: 13px;
    font-weight: bold;
}



/* SHORTLINKS */

.shortlink-grid{

display:grid;

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

gap:20px;

}

.shortlink-card{

background:var(--card);

padding:20px;

border-radius:10px;

display:flex;

justify-content:space-between;

align-items:center;

transition:0.2s;

}

.shortlink-card:hover{

transform:translateY(-3px);

}

.shortlink-info{

display:flex;

flex-direction:column;

gap:5px;

}

.reward{

color:var(--accent);

}

.btn-claim{

background:var(--button);

padding:10px 15px;

border-radius:6px;

color:black;

font-weight:bold;

}


/* DASHBOARD */

.stats-grid{

display:grid;

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

gap:20px;

}

.stat-card{

background:var(--card);

padding:20px;

border-radius:10px;

}

.stat-card p{

font-size:22px;

color:var(--accent);

font-weight:bold;

}


/* FOOTER */

/* =========================================
   FOOTER (LÁBLÉC) STÍLUSOK
   ========================================= */
.footer {
    text-align: center;
    padding: 30px;
    color: #64748b;
    font-size: 13px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: #0f172a; /* Vagy használd a #081a30 színt, ha az jobban tetszik */
    margin-top: auto;    /* Ez tolja le a lap aljára */
}

.footer-links a {
    color: #00d2ff;
    text-decoration: none;
    margin: 0 4px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #f59e0b; /* Narancssárga kiemelés, ha ráviszik az egeret */
    text-decoration: none;
}


/* =========================
MODERN DASHBOARD UI
========================= */

/* PAGE TITLE */

h1{

font-size:26px;

margin-bottom:25px;

font-weight:600;

letter-spacing:0.5px;

}


/* SIDEBAR IMPROVEMENTS */

.sidebar{

background:linear-gradient(
180deg,
#081a30 0%,
#061428 100%
);

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

box-shadow:4px 0 25px rgba(0,0,0,0.4);

}

.sidebar a{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

transition:all 0.2s ease;

}

.sidebar a:hover{

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

color:var(--accent);

transform:translateX(3px);

}


/* ACTIVE MENU */

.sidebar a.active{

background:rgba(0,212,255,0.12);

color:var(--accent);

border-left:3px solid var(--accent);

}


/* DASHBOARD GRID */

.stats-grid{

display:grid;

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

gap:25px;

margin-bottom:30px;

}


/* STAT CARDS */

.stat-card{

background:linear-gradient(
145deg,
#0f1e35,
#0c1a2e
);

padding:25px;

border-radius:12px;

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

transition:all 0.25s ease;

position:relative;

overflow:hidden;

}

.stat-card:hover{

transform:translateY(-4px);

box-shadow:
0 10px 30px rgba(0,0,0,0.45),
0 0 10px rgba(0,212,255,0.25);

}


/* STAT TITLE */

.stat-card h3{

font-size:14px;

color:var(--muted);

margin-bottom:8px;

font-weight:500;

}


/* STAT VALUE */

.stat-card p{

font-size:26px;

font-weight:700;

color:var(--accent);

}


/* PROGRESS BAR */

.progress{

width:100%;

height:10px;

background:#0b1626;

border-radius:6px;

margin-top:10px;

overflow:hidden;

}

.progress-bar{

height:100%;

background:linear-gradient(
90deg,
#00d4ff,
#2affc4
);

box-shadow:0 0 8px rgba(0,212,255,0.7);

transition:width 0.4s ease;

}


/* DASHBOARD SECTIONS */

.dashboard-section{

margin-top:30px;

}

.dashboard-section h2{

font-size:18px;

margin-bottom:15px;

color:var(--text);

}


/* EARN GRID */

.earn-grid{

display:grid;

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

gap:15px;

}

.earn-card{

background:var(--card);

padding:15px;

border-radius:8px;

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

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

}

.earn-card b{

color:var(--accent);

}


/* QUICK MENU */

.earn-menu{

display:grid;

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

gap:15px;

margin-top:30px;

}

.earn-menu a{

background:var(--card);

padding:18px;

border-radius:10px;

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

text-align:center;

font-size:15px;

color:var(--text);

transition:all 0.2s ease;

}

.earn-menu a:hover{

background:#0f213c;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,0.4);

}


/* FAUCET CARD IMPROVEMENT */

.faucet-card{

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

background:linear-gradient(
145deg,
#0f1e35,
#0c1a2e
);

box-shadow:0 10px 35px rgba(0,0,0,0.45);

}


/* BUTTON IMPROVEMENT */

.btn-primary{

background:linear-gradient(
135deg,
#f59e0b,
#f49e09
);

box-shadow:0 5px 20px rgba(255,159,28,0.6);

transition:all 0.2s ease;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 8px 25px rgba(255,159,28,0.4);

}


/* =========================
SHORTLINK PRO UI
========================= */

.shortlink-card-pro{

background:linear-gradient(
145deg,
#0f1e35,
#0b182b
);

border-radius:12px;

padding:20px;

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

transition:all 0.25s ease;

display:flex;

flex-direction:column;

gap:15px;

}

.shortlink-card-pro:hover{

transform:translateY(-4px);

box-shadow:
0 10px 30px rgba(0,0,0,0.45),
0 0 10px rgba(0,212,255,0.2);

}


/* HEADER */

.shortlink-header{

display:flex;

align-items:center;

gap:15px;

}


/* PROVIDER ICON */

.provider-icon{

width:42px;

height:42px;

border-radius:10px;

background:linear-gradient(
135deg,
#00d4ff,
#2affc4
);

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

color:#02121f;

font-size:18px;

box-shadow:0 0 10px rgba(0,212,255,0.6);

}


/* PROVIDER INFO */

.provider-info h3{

font-size:16px;

margin-bottom:4px;

}


/* REWARD BADGE */

.reward-badge{

background:rgba(0,212,255,0.12);

color:var(--accent);

padding:3px 8px;

border-radius:6px;

font-size:12px;

font-weight:600;

}


/* Progress Shortlink */

.shortlink-progress{

display:flex;

flex-direction:column;

gap:6px;

}

.progress-text{

font-size:12px;

color:var(--muted);

}


/* CLAIM BUTTON */

.btn-claim-animated{

display:block;

text-align:center;

background:linear-gradient(
135deg,
#ff9f1c,
#ffb347
);

padding:12px;

border-radius:8px;

font-weight:600;

color: #000 !important; 

text-decoration:none;

transition:all 0.2s ease;

box-shadow:0 5px 20px rgba(255,159,28,0.35);

}

.btn-claim-animated:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(255,159,28,0.5);

}


/* GRID IMPROVEMENT */

.shortlink-grid{

display:grid;

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

gap:20px;

margin-top:20px;

}


/* =========================
FAUCET COOLDOWN CIRCLE
========================= */

.cooldown-circle{

position:relative;

width:120px;

margin:20px auto;

}

.cooldown-circle svg{

transform:rotate(-90deg);

}

.cooldown-bg{

fill:none;

stroke:#0b182b;

stroke-width:10;

}

.cooldown-progress{

fill:none;

stroke:var(--accent);

stroke-width:10;

stroke-linecap:round;

stroke-dasharray:339;

stroke-dashoffset:339;

transition:stroke-dashoffset 1s linear;

}

.cooldown-text{

position:absolute;

top:50%;

left:50%;

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

font-size:14px;

color:var(--text);

}


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

.reward-popup{

position:fixed;

top:50%;

left:50%;

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

background:linear-gradient(
135deg,
#2ed573,
#7bed9f
);

color:#0a1c12;

padding:20px 40px;

border-radius:12px;

font-size:22px;

font-weight:bold;

opacity:0;

transition:all 0.4s ease;

z-index:999;

}

.reward-popup.show{

opacity:1;

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

}


/* XP POPUP */

.xp-popup{

position:fixed;

top:55%;

left:50%;

transform:translate(-50%,0);

color:#2affc4;

font-size:18px;

font-weight:bold;

opacity:0;

transition:all 0.6s ease;

z-index:999;

}

.xp-popup.show{

opacity:1;

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

}


/* CLAIM BUTTON SUCCESS */

.btn-success{

background:#2ed573 !important;

box-shadow:0 0 15px rgba(46,213,115,0.8);

animation:claimFlash 0.6s ease;

}

@keyframes claimFlash{

0%{
transform:scale(1);
}

50%{
transform:scale(1.1);
}

100%{
transform:scale(1);
}

}



/* SHORTLINK UNLOCK BUTTON */

.shortlink-unlock{

display:flex;

justify-content:center;

margin-top:18px;

}

.unlock-btn{

padding:12px 24px;

font-size:15px;

}


/* =========================
WHEEL OF FORTUNE
========================= */

.wheel-container{

display:flex;
flex-direction:column;
align-items:center;

margin-top:40px;

}

.wheel-wrapper{

position:relative;

}

#wheelCanvas{

border-radius:50%;

box-shadow:
0 0 30px rgba(0,212,255,0.4),
0 0 80px rgba(0,0,0,0.9);

}

/* POINTER */

.wheel-pointer{

position:absolute;

top:-15px;
left:50%;

transform:translateX(-50%);

width:0;
height:0;

border-left:14px solid transparent;
border-right:14px solid transparent;
border-top:26px solid #fff;

z-index:10;

}

/* SPIN BUTTON */

.wheel-spin-btn{

margin-top:30px;

padding:14px 32px;

font-size:17px;

}

/* POPUP */

.wheel-reward-popup{

position:fixed;

top:50%;
left:50%;

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

background:linear-gradient(
135deg,
#2ed573,
#7bed9f
);

color:#05230f;

padding:30px 50px;

border-radius:16px;

font-size:24px;

font-weight:bold;

opacity:0;

transition:all 0.4s ease;

z-index:1000;

}

.wheel-reward-popup.show{

opacity:1;

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

}


/* WITHDRAW PAGE */

.withdraw-grid{

display:grid;

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

gap:20px;

margin-top:20px;

}

/* BALANCE CARD */

.withdraw-balance{

text-align:center;

}

.balance-title{

color:var(--muted);

margin-bottom:10px;

}

.balance-amount{

font-size:34px;

font-weight:bold;

color:var(--accent);

margin-bottom:20px;

}

.withdraw-btn{

width:100%;

margin-top:10px;

}

/* MESSAGE */

.withdraw-msg{

margin-top:15px;

font-weight:bold;

}

.withdraw-msg.success{

color:#2ed573;

}

.withdraw-msg.error{

color:#ff4757;

}

/* ECONOMY BAR */

.economy-bar{

width:100%;

height:22px;

background:#0b223e;

border-radius:6px;

overflow:hidden;

margin-top:10px;

}

.economy-progress{

height:100%;

background:linear-gradient(
90deg,
#2ed573,
#7bed9f
);

}

/* HISTORY TABLE */

.withdraw-table{

width:100%;

border-collapse:collapse;

margin-top:10px;

}

.withdraw-table th{

text-align:left;

padding:10px;

color:var(--muted);

border-bottom:1px solid rgba(255,255,255,0.1);

}

.withdraw-table td{

padding:10px;

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

}

/* BADGES */

.badge{

padding:4px 8px;

border-radius:5px;

font-size:12px;

font-weight:bold;

}

.badge-success{

background:#2ed573;

color:#05230f;

}

.badge-pending{

background:#ffa502;

color:#2b1700;

}

/* EMPTY */

.empty-state{

color:var(--muted);

margin-top:10px;

}


/* WITHDRAW PROGRESS */

.withdraw-progress{

width:100%;

height:10px;

background:#0b223e;

border-radius:6px;

overflow:hidden;

margin-top:10px;

}

.withdraw-progress-bar{

height:100%;

background:linear-gradient(
90deg,
#00d4ff,
#2ed573
);

}

.withdraw-progress-text{

margin-top:6px;

font-size:13px;

color:var(--muted);

}



/* SHORTLINK BONUS */

.bonus-info{

margin-bottom:20px;
color:var(--muted);

}

/* GRID */

.bonus-grid{

display:grid;

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

gap:20px;

justify-content:center;

margin-top:20px;

}

/* CARD */

.bonus-card{

display:flex;

flex-direction:column;

gap:12px;

}

/* HEADER */

.bonus-header{

display:flex;

justify-content:space-between;

align-items:center;

}

/* TITLE */

.bonus-title{

font-weight:bold;

}

/* REWARD BADGE */

.bonus-reward{

background:rgba(0,212,255,0.15);

color:var(--accent);

padding:5px 12px;

border-radius:6px;

font-weight:bold;

}

/* Progress Bonus */

.bonus-progress-bar{

height:10px;

background:#0b223e;

border-radius:6px;

overflow:hidden;

}

.bonus-progress-fill{

height:100%;

background:linear-gradient(
90deg,
#00d4ff,
#2ed573
);

}

.bonus-progress-text{

font-size:13px;

color:var(--muted);

}

/* STATUS */
.bonus-status {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    width: fit-content;
    
    /* ÚJ SOROK: Ez tartja egy vonalban a lakatot és a szöveget */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bonus-status.locked {
    background: #2c2c2c;
    color: #aaa;
}

.bonus-status.claimed {
    background: #2ed573;
    color: #04210f;
}

/* ÚJ BLOKK: A lakat ikon méretezése */
.status-icon {
    width: 14px; /* A 13px-es betűmérethez ez passzol a legjobban */
    height: auto;
    object-fit: contain;
    opacity: 0.8; /* Picit halványítjuk, hogy harmonizáljon az #aaa szürke betűszínnel! */
}


/* BUTTON */

.bonus-btn{

margin-top:5px;

}

/* CAPTCHA */

.captcha{

margin-top:10px;
margin-bottom:10px;

display:flex;
justify-content:center;

}

.page{

max-width:1100px;

margin:0 auto;

}


/* BONUS RESET TIMER */

.bonus-reset {
    display: flex;
    align-items: center;
    justify-content: center; /* Ha középre van igazítva az elem */
    gap: 8px; /* Távolság az ikon és a szöveg között */
    font-weight: 600;
    color: #94a3b8;
}

.reset-icon {
    width: 18px; /* Egy hajszálnyival nagyobb, mint a kártyákon, hogy jól látszódjon */
    height: auto;
    object-fit: contain;
}



/* =========================
SETTINGS PAGE
========================= */

.settings-grid{

display:grid;

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

gap:25px;

max-width:900px;

margin:auto;

margin-top:20px;

}

/* CARD */

.settings-card{

display:flex;

flex-direction:column;

gap:15px;

}

.settings-desc{

color:var(--muted);

font-size:14px;

line-height:1.5;

}

/* FORM */

.settings-form{

display:flex;

flex-direction:column;

gap:12px;

}

.settings-label{

font-size:14px;

color:var(--muted);

}

/* INPUT */

.settings-input{

padding:12px;

border-radius:6px;

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

background:#0b182b;

color:var(--text);

font-size:14px;

}


/* BUTTON */

.settings-btn{

margin-top:10px;

}

/* SUCCESS */

.settings-success{

background:#2ed573;

color:#05230f;

padding:10px;

border-radius:6px;

font-weight:bold;

}

/* INFO CARD */

.settings-info{

font-size:14px;

}

.settings-list{

padding-left:18px;

color:var(--muted);

line-height:1.6;

}



/* =========================
LOGIN PAGE
========================= */

.login-page{

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

min-height:calc(100vh - 120px);

padding:40px;

}

.login-container{

display:grid;

grid-template-columns:1fr 420px;

gap:60px;

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

}

/* INFO SIDE */

.login-info h1{

font-size:42px;

color:var(--accent);

margin-bottom:10px;

}

.login-tagline{

font-size:18px;

color:var(--muted);

margin-bottom:30px;

}

/* FEATURES */

.login-features{

display:flex;

flex-direction:column;

gap:18px;

}

.feature{

display:flex;

gap:15px;

align-items:flex-start;

}

.feature span{

font-size:22px;

}

/* LOGIN CARD */

.login-card{

background:linear-gradient(
145deg,
#0f1e35,
#0b182b
);

padding:35px;

border-radius:12px;

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

box-shadow:0 10px 35px rgba(0,0,0,0.5);

}

.login-card h2{

margin-bottom:10px;

}

.login-description{

color:var(--muted);

margin-bottom:20px;

}

.login-card input{

width:100%;

padding:12px;

border-radius:6px;

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

background:#081a30;

color:white;

margin-bottom:15px;

}

.login-btn{

width:100%;

}

.login-note{

margin-top:15px;

font-size:13px;

color:var(--muted);

text-align:center;

}



/* Mystery Box */

.mystery-popup{

position:fixed;

top:50%;
left:50%;

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

background:linear-gradient(
135deg,
#ff9f1c,
#ffd166
);

padding:35px 50px;

border-radius:14px;

font-size:22px;

font-weight:bold;

color:#111;

z-index:9999;

box-shadow:0 0 40px rgba(255,159,28,0.8);

text-align:center;

animation:mysteryFade 0.4s ease;

}

@keyframes mysteryFade{

0%{opacity:0; transform:translate(-50%,-60%) scale(0.8);}
100%{opacity:1; transform:translate(-50%,-50%) scale(1);}

}



/* =========================
TODAY TASKS PANEL
========================= */

.tasks-panel{
margin-top: 10px;
margin-bottom:35px;

}

.tasks-panel h2{

margin-bottom:15px;

font-size:18px;

}

.tasks-grid{

display:grid;

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

gap:15px;

}

.task-card{

background:linear-gradient(
145deg,
#0f1e35,
#0c1a2e
);

border-radius:12px;

padding:18px;

display:flex;

align-items:center;

justify-content:space-between;

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

text-decoration:none;

color:var(--text);

transition:all 0.2s ease;

}

.task-card:hover{

transform:translateY(-3px);

box-shadow:
0 10px 30px rgba(0,0,0,0.45),
0 0 12px rgba(0,212,255,0.25);

}

.task-icon{

font-size:26px;

}

.task-info{

flex:1;

margin-left:12px;

}

.task-info p{

font-size:13px;

color:var(--muted);

}

.task-action{

background:var(--button);

padding:8px 12px;

border-radius:6px;

font-weight:bold;

color:#111;

}




.battlepass-next{

margin-top:10px;

color:var(--accent);

font-weight:bold;

}



/* --- WEEKLY CHEST  --- */

/* Még zárolt gomb (Barna/Arany mix) */
.locked-btn {
    background: #78350f !important;
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Kinyitható gomb lüktetése */
.pulse {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0px rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0px rgba(245, 158, 11, 0); }
}

/* Már igényelt gomb (Muted sötét sárga - amit az előbb adtam) */
.claimed-btn-muted {
    background: #FF8C00 !important;
    color: #000 !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    box-shadow: none !important;
    opacity: 0.7;
    font-weight: 800;
}



/* =========================
PTC ADS
========================= */


/* =========================
   PTC ADS KÁRTYÁK
   ========================= */

.ptc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.ptc-card {
    background: #0f1e35;
    border-radius: 12px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
    height: 100%;
    box-sizing: border-box;
}

.ptc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 10px rgba(0,212,255,0.25);
}


/* Container */
.ptc-card-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

/* Title  */
.ptc-card-content h3 {
    color: #fff; 
    margin: 0; 
    text-align: center;
    white-space: nowrap;     /* Nem engedi 2 sorba törni a hosszú címet */
    overflow: hidden;        /* Elrejti, ami kilóg a kártyáról */
    text-overflow: ellipsis; /* Három pontot tesz a végére, ha túl hosszú */
}

.ptc-card-description {
    color: #94a3b8; 
    font-size: 14px; 
    line-height: 1.5;
    margin: 12px 0 15px 0;
    overflow-wrap: break-word; 
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
    min-height: 84px; /* Fixálja a magasságot pontosan 4 sornyira */
}



/* Reward and Time (BADGE) */
.ptc-badge-row { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px;
    margin-top: auto; 
}

.ptc-badge-item {
    background: rgba(56, 189, 248, 0.08); 
    color: #38bdf8;
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 12px; 
    font-weight: 600;
}

/* Btn and COMPLETED BADGE bottom */
.ptc-btn, .btn-ptc-amber, .completed-badge {
    margin-top: auto !important; 
    width: 100%;
    box-sizing: border-box;
}

.completed-badge {
    background: rgba(255,255,255,0.05); 
    color: #64748b; 
    text-align: center; 
    padding: 12px; 
    border-radius: 10px; 
    font-size: 13px; 
    font-weight: bold;
    display: block;
}

/* PTC PROGRESS BAR (Ha valahol használod) */
.ptc-progress {
    width: 100%;
    height: 10px;
    background: #0b223e;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 20px;
}
.ptc-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #00d4ff, #2ed573);
    transition: width 1s linear;
}


/* =========================
PTC ARTICLE
========================= */

.ptc-article{

max-width:850px;
margin:auto;

line-height:1.7;

}

.ptc-article-header{

text-align:center;
margin-bottom:25px;

}

.ptc-article h1{

font-size:32px;

}

.subtitle{

color:var(--muted);

}

.img-placeholder{

margin:25px 0;

border-radius:10px;

overflow:hidden;

}

.img-placeholder img{

width:100%;
display:block;

}

.fact-box{

background:#e3f2fd;

padding:20px;

border-left:4px solid #2196f3;

border-radius:6px;

margin:20px 0;

}

.alert-box{

background:#fff3cd;

padding:18px;

border-radius:6px;

margin-top:30px;

}

.action-area{

text-align:center;
margin-top:35px;

}

.article-image{

width:100%;
border-radius:10px;
margin-bottom:20px;

}

.article-content{

line-height:1.8;
font-size:15px;

}

.article-content h2{

margin-top:30px;

}



.ptc-btn.done{

background:#2ecc71;
cursor:not-allowed;
opacity:0.7;
text-align:center;

}


/* =========================
Ptc claim center
========================= */

.btn-primary{

display:block;

margin-left:auto;
margin-right:auto;

margin-top:10px;

}


/* =========================
PTC WATCH PAGE
========================= */

.ptc-watch-card{

background:linear-gradient(
145deg,
#0f1e35,
#0b182b
);

border-radius:12px;

padding:30px;

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

max-width:700px;

margin:0 auto;

display:flex;
flex-direction:column;
gap:20px;

}

.ptc-progress{

width:100%;
height:8px;

background:#0b1c33;

border-radius:6px;

overflow:hidden;

}

.ptc-bar{

height:100%;
width:0%;

background:linear-gradient(
90deg,
#00d2ff,
#3cff7f
);

transition:width 1s linear;

}

.captcha{

margin-top:10px;

}


/* CAPTCHA CENTER FIX */

.captcha-wrapper{

width:100%;

display:flex;

justify-content:center;

margin-top:15px;

}

.captcha{

display:flex;

justify-content:center;

}


.verify-text{

text-align:center;

color:#9fb3c8;

font-size:14px;

margin-top:10px;

}


.ptc-info{

margin-top:20px;

color:#cfd8e3;

line-height:1.6;

text-align:center;

}

.ptc-banner{

margin-top:15px;

text-align:center;

}



/* =========================
PTC INDEX LAYOUT
========================= */

.ptc-grid{

display:grid;

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

gap:20px;

}

.ptc-card{

text-align:center;


/* =========================
ADVERTISER
========================= */

.advertiser-card{

background:linear-gradient(
145deg,
#0f1e35,
#0b182b
);

border-radius:12px;

padding:26px;

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

}



/* FORM SPACING - Create Ad*/

label{
display:block;
margin-top:14px;
margin-bottom:6px;
font-size:14px;
color:var(--muted);
}

.settings-input{
width:100%;
padding:12px;
border-radius:6px;
border:1px solid rgba(255,255,255,0.08);
background:#0b182b;
color:var(--text);
font-size:14px;
margin-bottom:18px;
}

textarea.settings-input{
resize:vertical;
min-height:80px;
}





/* Daily streak Progress bar+ */

.gold-bar {
    background: linear-gradient(90px, #f59e0b, #fbbf24) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}



/* Shortlink Card Progress Bar - btn */
.btn-disabled {
    background: #4b5563 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}
.card-completed {
    opacity: 0.7;
}



/* A PTC Watch container */
.page {
    display: flex;
    flex-direction: column;
    align-items: center; /* Vízszintes középre igazítás a tartalomnak */
    width: 100%;
}

/* Ptc watch card */
.ptc-watch-card {
    max-width: 650px;
    width: 100%;
    margin: 40px auto 20px auto; /* Fent 40px, oldalt AUTO (középre), alul 20px */
    padding: 40px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    text-align: center; /* A belső szövegek is legyenek középen */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* ptc info text */
.ptc-info, .ptc-banner {
    width: 100%;
    max-width: 650px;
    text-align: center;
    margin-top: 20px;
    color: #94a3b8;
    font-size: 14px;
}

/* A progress bar center */
.ptc-progress {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    margin: 25px 0;
    overflow: hidden;
}

/* A captcha box center */
.captcha-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}



}


/* =========================================
   MOBILE RESPONSIVE (MEDIA QUERIES)
   ========================================= */

/* Hamburger gomb alapból rejtve van gépen! */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #00d2ff;
    font-size: 26px;
    cursor: pointer;
    margin-right: 15px;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .topbar {
        padding: 10px 15px;
    }

    .topbar-right {
        gap: 10px;
    }
    
    .balance-item span {
        display: none; /* Mobilon ne írja ki, hogy Main/Adv, spóroljunk a hellyel */
    }

    /* Oldalsó menü elrejtése balra */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        background: #081a30; 
        box-shadow: none;
        /* HOZZÁADOTT RÉSZ: Görgetés engedélyezése és alsó sáv */
        overflow-y: auto !important; /* Engedi, hogy görgess a menüben lefelé */
        padding-bottom: 80px !important; /* Helyet csinál a legalsó gombnak a böngésző sáv felett */
        height: 100% !important; /* A 100vh helyett 100%-ot használunk, ami biztonságosabb mobilon */
    }

    /* Kinyitott állapot */
    .sidebar.active {
        transform: translateX(0);
        box-shadow: 10px 0 30px rgba(0,0,0,0.8);
    }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }

    .card, .ptc-card, .shortlink-card-pro {
        overflow-x: auto;
    }

    .login-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .shortlink-grid, .ptc-grid, .stats-grid, .earn-grid {
        grid-template-columns: 1fr; 
    }
}



/* =========================================
   SIDEBAR LOGOUT (MOBILRA FINOMÍTVA)
   ========================================= */

/* Asztali nézetben elrejtjük teljesen */
.mobile-only-logout {
    display: none; 
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Úgy néz ki, mint egy normál menüpont, csak piros! */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: #ef4444; /* Piros szöveg */
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
}

/* Hover (ráhúzás) effektus */
.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.08); /* Halvány piros háttér */
    transform: translateX(3px); /* Kicsit jobbra csúszik, mint a többi menüpont */
}

/* =========================================
   MOBIL NÉZET BEKAPCSOLÁSA (Média Query)
   ========================================= */
@media (max-width: 768px) {
    .mobile-only-logout {
        display: block !important; /* Mobilon megjelenik! */
    }
}


/* 2. MOBIL NÉZET JAVÍTÁSAI */
@media (max-width: 768px) {
    /* Deposit oldal - 2 oszlop helyett 1 oszlop legyen mobilon! */
    .form-row {
        grid-template-columns: 1fr !important; 
        gap: 15px !important;
    }

    /* Fejléc Logout gomb elrejtése mobilon (hogy elférjen az egyenleg) */
    .topbar-logout {
        display: none !important;
    }

    /* Hirdetői egyenleg elrejtése a fejlécből mobilon */
    .adv-balance-mobile {
        display: none !important;
    }
}


@media (max-width: 480px) {
    .btn-login {
        width: 270px; /* A Captcha 0.9-es skálázásához igazítva */
    }
}

@media (max-width: 350px) {
    .btn-login {
        width: 240px; /* A Captcha 0.8-as skálázásához igazítva */
    }
}



/* =========================================
   CLOUDFLARE CAPTCHA KÖZÉPRE IGAZÍTÁSA  MOBIL
   ========================================= */


/* Mobil nézet finomhangolása */
@media (max-width: 480px) {
    /* Kisebb belső margó a kártyának mobilon, hogy több helye legyen a Captchának */
    .login-box {
        padding: 30px 15px !important;
    }
    
    /* Arányos, vágás nélküli zsugorítás */
    .cf-turnstile {
        transform: scale(0.9);
        transform-origin: center center;
    }
}

/* Nagyon pici telefonokon (pl. régi iPhone) még egy picit zsugorítunk */
@media (max-width: 350px) {
    .cf-turnstile {
        transform: scale(0.8);
    }
}



===============================================================================


    
/* Settings */
/* Beállítások alfejezetek elrendezése */
.settings-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: #f8fafc; /* Világosabb szín a hangsúlyosabb alcímeknek */
}

/* Alfejezet ikonok mérete */
.settings-icon {
    width: 20px; /* Az h3 méretéhez ez az ideális */
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}

/* Ha a .page-title-flex még nincs benne a withdraw oldalról: */
.page-title-flex {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.page-title-icon {
    width: 32px;
    height: auto;
    object-fit: contain;
}



/* =========================================
   EGYSÉGES GLOBAL TOAST (ÉRTESÍTŐ) 
   ========================================= */
.joy-toast {
    position: fixed; 
    top: 80px; 
    right: 20px; 
    z-index: 10000;
    background: #1e293b; 
    border: 1px solid #10b981;
    border-radius: 12px; 
    padding: 15px; 
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    /* Alapból kint van a képernyő jobb szélén, és láthatatlan */
    transform: translateX(150%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}

/* Amikor megkapja a .show osztályt, becsúszik */
.joy-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.joy-toast .toast-content {
    display: flex; 
    align-items: center; 
    gap: 15px;
}

.joy-toast .toast-icon {
    width: 28px; 
    height: 28px; 
    object-fit: contain;
}

.joy-toast .toast-text {
    text-align: left;
}

.joy-toast .toast-text strong {
    display: block; 
    color: #fff; 
    font-size: 14px; 
    margin-bottom: 2px;
}

.joy-toast .toast-text p {
    margin: 0; 
    color: #10b981; 
    font-size: 14px; 
    font-weight: bold;
}