/* ===================================================
🤖 TIMEMARK APP THEME — ULTRA MAN TECH SYNC
SAFE VERSION (không ảnh hưởng logic)
Áp dụng:
- app index.html
- buy.html
=================================================== */

/* ================= CORE COLOR ================= */

:root{
--bg1:#02050f;
--bg2:#050a22;
--bg3:#0a1030;

--neon:#00eaff;
--ultra:#ff1744;

--panel:rgba(10,16,40,.65);
--panelBorder:rgba(0,234,255,.35);

--text:#ffffff;
}

/* ================= BASE ================= */

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

background:
radial-gradient(circle at 20% -10%,rgba(0,234,255,.18),transparent 40%),
radial-gradient(circle at 80% 0%,rgba(255,23,68,.12),transparent 40%),
linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
}

/* HUD GRID NHẸ (an toàn hiệu năng) */
body::before{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(rgba(0,234,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,234,255,.05) 1px,transparent 1px);
background-size:60px 60px;
pointer-events:none;
z-index:0;
}

/* ===== BLUR BACKGROUND ===== */
.bg{
position:fixed;
inset:0;
backdrop-filter:blur(6px);
z-index:0;
}

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

.app{
position:relative;
z-index:2;
max-width:520px;
margin:auto;
padding:10px;
}

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

.header{
text-align:center;
color:#fff;
text-shadow:0 0 10px rgba(0,234,255,.6);
}

/* ================= PANEL / CARD ================= */

.controls,
.card,
.qrBox{

background:var(--panel);
backdrop-filter:blur(16px);
border-radius:10px;
padding:14px;
color:#fff;

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

box-shadow:
0 0 20px rgba(0,234,255,.15),
0 20px 40px rgba(0,0,0,.45);

transition:.25s;
}

/* Hover chỉ nâng nhẹ — không animation nặng */
.card:hover{
transform:translateY(-6px);
border-color:var(--neon);
}

/* ================= INPUT ================= */

input,select,label{
width:100%;
margin:4px 0;
padding:8px;
border-radius:6px;
font-size:14px;
background:#020617;
border:1px solid rgba(0,234,255,.25);
color:#fff;
outline:none;
}

input:focus,
select:focus{
border-color:var(--neon);
box-shadow:0 0 10px rgba(0,234,255,.35);
}

/* ================= BUTTON ULTRA TECH ================= */
/* ⭐ SAFE: không dùng pseudo layer phủ */

button{

width:100%;
margin:4px 0;
padding:10px;
border-radius:6px;
font-size:14px;
cursor:pointer;

background:#001824;
color:#fff;
font-weight:bold;

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

box-shadow:0 0 12px rgba(0,234,255,.3);

transition:.2s;
}

button:hover{
transform:translateY(-2px);
box-shadow:
0 0 18px var(--neon),
0 0 35px rgba(255,23,68,.25);
}

/* ================= CANVAS ================= */

canvas{
max-width:100%;
margin-top:10px;
border-radius:12px;
background:#000;
border:1px solid rgba(0,234,255,.2);
}

/* ================= PETALS ================= */

.petals{
position:fixed;
inset:0;
pointer-events:none;
z-index:1;
}

@keyframes fall{
to{transform:translateY(120vh)}
}

@keyframes sway{
0%{margin-left:0}
50%{margin-left:30px}
100%{margin-left:0}
}

/* ================= LOCK OVERLAY ================= */

.lock{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
}

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

.lockBox{

background:rgba(6,12,28,.95);
backdrop-filter:blur(18px);
padding:26px 22px;
border-radius:12px;
width:90%;
max-width:360px;
text-align:center;

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

box-shadow:0 0 25px rgba(0,234,255,.25);

color:#fff;
}

.lockBox h3{
margin-top:0;
color:#fff;
}

.lockBox p{
color:#cfd8ff;
}

/* INPUT POPUP */
.lockBox input{
background:#020617;
border:1px solid var(--neon);
border-radius:8px;
padding:12px;
font-size:15px;
color:#fff;
}

/* BUTTON POPUP */
.lockBox button{
background:#001824;
border:1px solid var(--neon);
border-radius:8px;
}

/* ================= LOADING BLUR ================= */

.loadingBlur{
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
backdrop-filter:blur(6px);
z-index:9998;
display:none;
}

/* ================= FLOAT MENU ================= */

.tmFab{
position:fixed;
right:18px;
bottom:90px;
z-index:9999;
touch-action:none;
}

.tmFabBtn{

width:56px;
height:56px;
border-radius:50%;
border:1px solid var(--neon);

background:#001824;
color:#fff;
font-size:22px;
cursor:pointer;

box-shadow:0 0 20px rgba(0,234,255,.45);
}

.tmFabBtn:hover{
transform:scale(1.05);
}

.tmFabMenu{
position:absolute;
bottom:70px;
right:0;
display:flex;
flex-direction:column;
gap:10px;
opacity:0;
pointer-events:none;
transform:translateY(10px);
transition:.25s;
}

.tmFabMenu.show{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

.tmFabItem{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:10px;

background:rgba(0,234,255,.08);
border:1px solid rgba(0,234,255,.35);

color:#fff;
text-decoration:none;
font-weight:bold;

box-shadow:0 0 18px rgba(0,234,255,.2);
}

.tmFabItem:hover{
transform:translateX(-4px);
border-color:var(--neon);
}

/* ================= BUY PAGE EXTRA ================= */

.container{
max-width:900px;
margin:auto;
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.header h1{
text-shadow:
0 0 12px var(--neon),
0 0 25px rgba(255,23,68,.4);
}

/* QR POPUP */
#qrPopup{
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}
/* 👑 GOD MODE OVERLAY */
.god-mode{
 position:fixed;
 inset:0;
 background:radial-gradient(circle,#0a0000,#000);
 backdrop-filter:blur(12px);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:9999999;
 animation:godAppear .35s ease;
}

/* BOX */
.god-box{
 position:relative;
 width:260px;
 padding:26px;
 border-radius:14px;
 background:#040404;
 text-align:center;
 overflow:hidden;
 box-shadow:
 0 0 25px rgba(255,0,0,.8),
 inset 0 0 18px rgba(255,0,0,.25);
}

/* HOLOGRAM LIGHT */
.god-holo{
 position:absolute;
 inset:0;
 background:linear-gradient(transparent,rgba(255,0,0,.2),transparent);
 animation:holoMove 2.5s linear infinite;
 pointer-events:none;
}

/* ENERGY RINGS */
.god-ring,
.god-ring2{
 position:absolute;
 left:50%;
 top:26px;
 transform:translateX(-50%);
 width:44px;
 height:44px;
 border-radius:50%;
 border:2px solid rgba(255,0,0,.6);
 animation:spin 1s linear infinite;
}

.god-ring2{
 width:60px;
 height:60px;
 opacity:.4;
 animation:spinReverse 1.5s linear infinite;
}

/* TEXT */
.god-title{
 margin-top:70px;
 font-size:12px;
 letter-spacing:2px;
 color:#ff2a2a;
}

.god-text{
 margin-top:6px;
 font-size:13px;
 color:#fff;
}

/* BAR */
.god-bar{
 margin-top:14px;
 height:3px;
 background:#111;
 overflow:hidden;
}

.god-bar span{
 display:block;
 height:100%;
 width:20%;
 background:linear-gradient(90deg,#ff0000,#ff4444,#ff0000);
 animation:godLoad 1.1s linear infinite;
}

@keyframes godLoad{
 0%{transform:translateX(-120%)}
 100%{transform:translateX(500%)}
}

/* SUCCESS */
.god-success{
 font-size:15px;
 color:#00ffa6;
 margin-bottom:14px;
 text-shadow:0 0 12px rgba(0,255,166,.7);
 animation:godShake .35s ease;
}

/* BUTTON GLOW */
.god-btn{
 background:#a80000;
 border:none;
 padding:8px 22px;
 color:#fff;
 border-radius:6px;
 animation:btnPulse 1.6s ease infinite;
}

/* ANIMATIONS */
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes spinReverse{to{transform:translateX(-50%) rotate(-360deg)}}
@keyframes barRun{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes holoMove{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes godAppear{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes godShake{
 0%{transform:translateX(0)}
 25%{transform:translateX(-2px)}
 50%{transform:translateX(2px)}
 100%{transform:translateX(0)}
}
@keyframes btnPulse{
 0%{box-shadow:0 0 5px rgba(255,0,0,.6)}
 50%{box-shadow:0 0 15px rgba(255,0,0,1)}
 100%{box-shadow:0 0 5px rgba(255,0,0,.6)}
}
/* ===============================
   COMPACT ROW (gọn & cân đối)
================================ */
.rowControl{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  margin:5px 0;
  border-radius:10px;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
  font-size:13px;
  transition:.25s;
}

.rowControl:hover{
  background:rgba(0,0,0,0.35);
}

/* ===============================
   MINI TOGGLE PREMIUM
================================ */
.switch{
  position:relative;
  width:46px;
  height:22px;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#1c1c1c;
  border-radius:50px;
  transition:.3s;
  display:flex;
  align-items:center;
  padding:0 6px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.5px;
  color:#888;
  box-shadow:inset 0 0 6px rgba(0,0,0,.6);
}

.slider::after{
  content:"OFF";
  margin-left:auto;
}

.slider:before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:2px;
  top:2px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}

/* ON STATE */
.switch input:checked + .slider{
  background:linear-gradient(135deg,#ffb300,#ff6a00);
  color:#fff;
  box-shadow:0 0 8px rgba(255,140,0,.7);
}

.switch input:checked + .slider::after{
  content:"ON";
  margin-left:6px;
}

.switch input:checked + .slider:before{
  transform:translateX(24px);
}

/* ===============================
   PANEL TRƯỢT MỀM (slide real)
================================ */
#advancedPanel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-5px);
  transition:max-height .45s ease, opacity .3s ease, transform .3s ease;
}

#advancedPanel.open{
  max-height:600px;
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   NÚT TÙY CHỈNH (compact + icon xoay)
================================ */
.btnToggle{
  width:100%;
  padding:8px;
  margin:8px 0;
  border-radius:10px;
  border:1px solid rgba(0,255,255,0.35);
  background:rgba(0,150,200,0.15);
  color:#fff;
  font-size:13px;
  cursor:pointer;
  transition:.3s;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}

.btnToggle:hover{
  background:rgba(0,200,255,0.25);
}

.btnToggle .gear{
  display:inline-block;
  transition:.3s;
}

.btnToggle.active .gear{
  transform:rotate(90deg);
}