/* ===== ROOT ===== */
:root {
    --bg: #060a14;
    --ocean-deep: #030810;
    --ocean-mid: #0a1628;
    --primary: #00b4ff;
    --primary-glow: rgba(0,180,255,0.5);
    --accent: #6a3dff;
    --accent-glow: rgba(106,61,255,0.5);
    --green: #00e699;
    --yellow: #ffb800;
    --danger: #ff3a5c;
    --text: #e8f4ff;
    --muted: #4a6a8a;
    --card: rgba(10,22,40,0.6);
    --card-border: rgba(0,180,255,0.12);
    --nav-h: 76px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; font-family:'Vazirmatn',system-ui,sans-serif; -webkit-tap-highlight-color:transparent; user-select:none; }
body { background:var(--ocean-deep); color:var(--text); min-height:100vh; overflow-x:hidden; padding-bottom:calc(var(--nav-h) + 16px); }

/* ===================================================
   INTRO SCREEN
   =================================================== */
.intro-screen {
    position:fixed; inset:0; z-index:9000;
    background:linear-gradient(180deg, #030c1a 0%, #050f22 40%, #061428 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:opacity 0.7s ease, transform 0.7s ease;
    overflow:hidden;
}
.intro-screen.fade-out {
    opacity:0;
    pointer-events:none;
    transform:scale(1.04);
}

/* Ocean waves at the bottom of intro */
.intro-ocean {
    position:absolute; bottom:0; left:0; right:0; height:220px;
    overflow:hidden; pointer-events:none;
}
.wave {
    position:absolute; bottom:0; left:-50%; width:200%;
    border-radius:43% 57% 52% 48% / 30% 30% 70% 70%;
    opacity:0.2;
}
.wave-1 { height:120px; background:linear-gradient(180deg,#0088cc,transparent); animation:waveMove 6s ease-in-out infinite alternate; }
.wave-2 { height:90px; background:linear-gradient(180deg,#0044aa,transparent); animation:waveMove 9s ease-in-out infinite alternate-reverse; opacity:0.15; }
.wave-3 { height:60px; background:linear-gradient(180deg,#00b4ff,transparent); animation:waveMove 7s ease-in-out infinite alternate; opacity:0.1; bottom:10px; }
@keyframes waveMove { from{transform:translateX(-5%) scaleY(1)} to{transform:translateX(5%) scaleY(1.1)} }

/* Intro bubbles */
.bubble {
    position:absolute; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.7), rgba(0,180,255,0.1));
    border:1px solid rgba(255,255,255,0.25);
    animation:bubbleRise linear infinite;
}
.b1  { width:10px; height:10px; left:15%; bottom:-20px; animation-duration:6s; animation-delay:0s; }
.b2  { width:16px; height:16px; left:30%; bottom:-30px; animation-duration:8s; animation-delay:1s; }
.b3  { width:8px;  height:8px;  left:50%; bottom:-20px; animation-duration:5s; animation-delay:2s; }
.b4  { width:20px; height:20px; left:65%; bottom:-40px; animation-duration:9s; animation-delay:0.5s; }
.b5  { width:12px; height:12px; left:80%; bottom:-25px; animation-duration:7s; animation-delay:1.5s; }
.b6  { width:6px;  height:6px;  left:42%; bottom:-15px; animation-duration:4s; animation-delay:3s; }
.b7  { width:14px; height:14px; left:22%; bottom:-30px; animation-duration:10s; animation-delay:0.8s; }
@keyframes bubbleRise {
    0%   { transform:translateY(0) translateX(0) scale(1); opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:0.6; }
    100% { transform:translateY(-300px) translateX(20px) scale(0.8); opacity:0; }
}

/* Intro content */
.intro-content {
    display:flex; flex-direction:column; align-items:center; gap:12px;
    position:relative; z-index:2;
    animation:introPopIn 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes introPopIn {
    from { opacity:0; transform:translateY(30px) scale(0.85); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.whales-loader-wrap { position:relative; width:130px; height:130px; display:flex; align-items:center; justify-content:center; }
.intro-whales {
    width:100%; height:100%; object-fit:contain;
    position:relative; z-index:2;
    animation:whaleFloat 4s ease-in-out infinite alternate;
}
.whales-glow {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:80%; height:80%; border-radius:50%;
    background:rgba(0,180,255,0.4); filter:blur(25px);
    animation:whaleGlowPulse 2s ease-in-out infinite alternate;
}
@keyframes whaleFloat { from{transform:translateY(-8px) rotate(-3deg)} to{transform:translateY(8px) rotate(3deg)} }
@keyframes whaleGlowPulse { from{transform:translate(-50%,-50%) scale(0.8);opacity:0.6;} to{transform:translate(-50%,-50%) scale(1.2);opacity:1;} }

.intro-title {
    font-size:28px; font-weight:900; letter-spacing:-0.5px;
    background:linear-gradient(135deg, #fff 20%, var(--primary) 60%, var(--accent));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.intro-sub { font-size:13px; color:rgba(0,180,255,0.7); font-weight:600; letter-spacing:0.5px; }

/* Loading bar */
.intro-loader { width:140px; height:3px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; margin-top:8px; }
.loader-bar {
    height:100%; width:0%; border-radius:3px;
    background:linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow:0 0 10px var(--primary-glow);
    animation:loaderFill 1.8s cubic-bezier(0.25,1,0.5,1) forwards;
}
@keyframes loaderFill { from{width:0%} to{width:100%} }

/* ===================================================
   AMBIENT BACKGROUND
   =================================================== */
.ambient-bg {
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    background:radial-gradient(ellipse at 50% 0%, rgba(0,60,120,0.3) 0%, var(--ocean-deep) 70%);
}
.blob {
    position:absolute; border-radius:50%; filter:blur(100px); opacity:0;
    animation:blobIn 2s ease forwards, blobFloat 18s ease-in-out infinite alternate;
}
.blob-1 { width:380px; height:380px; top:-80px; left:-100px; background:rgba(0,100,200,0.6); animation-delay:0s,2s; }
.blob-2 { width:400px; height:400px; bottom:60px; right:-120px; background:rgba(80,0,200,0.5); animation-delay:0.4s,2.4s; }
.blob-3 { width:300px; height:300px; top:40%; left:35%; background:rgba(0,50,150,0.4); animation-delay:0.8s,2.8s; }
@keyframes blobIn { to{opacity:1} }
@keyframes blobFloat {
    0%   { transform:translate(0,0) scale(1); }
    33%  { transform:translate(30px,-50px) scale(1.1); }
    66%  { transform:translate(-25px,30px) scale(0.93); }
    100% { transform:translate(40px,20px) scale(1.06); }
}

/* Persistent floating ocean bubbles in background */
.ocean-bubble {
    position:absolute; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5), rgba(0,180,255,0.05));
    border:1px solid rgba(0,180,255,0.2);
    animation:bgBubbleRise linear infinite;
}
.ob1 { width:12px; height:12px; left:8%;  bottom:-20px; animation-duration:12s; animation-delay:0s; }
.ob2 { width:18px; height:18px; left:28%; bottom:-30px; animation-duration:16s; animation-delay:3s; }
.ob3 { width:8px;  height:8px;  left:55%; bottom:-15px; animation-duration:10s; animation-delay:6s; }
.ob4 { width:22px; height:22px; left:72%; bottom:-40px; animation-duration:18s; animation-delay:1.5s; }
.ob5 { width:10px; height:10px; left:88%; bottom:-20px; animation-duration:14s; animation-delay:4.5s; }
@keyframes bgBubbleRise {
    0%   { transform:translateY(0) translateX(0); opacity:0; }
    8%   { opacity:0.6; }
    92%  { opacity:0.3; }
    100% { transform:translateY(-110vh) translateX(15px); opacity:0; }
}

/* ===================================================
   HEADER
   =================================================== */
.glass-header {
    position:sticky; top:0; z-index:200;
    background:rgba(4,10,20,0.82);
    backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    border-bottom:1px solid rgba(0,180,255,0.1);
    padding:12px 16px 10px;
    display:flex; flex-direction:column; gap:10px;
    /* Slide in from top after intro */
    opacity:0; transform:translateY(-20px);
    transition:opacity 0.6s ease, transform 0.6s ease;
}
.glass-header.visible { opacity:1; transform:translateY(0); }

/* Header Layout Rows */
.header-top-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }

/* User Profile Top Bar */
.user-profile-bar {
    display:flex; flex-direction:row; align-items:center; gap:8px;
    background:rgba(0,180,255,0.05); padding:6px 10px; border-radius:12px;
    border:1px solid rgba(0,180,255,0.1); width:max-content; min-width:unset;
}
.user-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:1.5px solid var(--primary); background:#040c18; }
.user-info-stack { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.user-name { font-size:11px; font-weight:700; color:var(--text); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-balance { font-size:10px; font-weight:600; color:var(--primary); }
.user-profile-placeholder { width:auto; }

/* Header Actions Row */
.header-actions-row { display:flex; gap:8px; margin-bottom:12px; }
.header-actions-row .filter-btn { flex:1; justify-content:center; }

.logo-wrap { display:flex; align-items:center; gap:8px; }

/* Logo image with ocean glow ring */
.logo-img-wrap { position:relative; flex-shrink:0; }
.logo-img {
    width:56px; height:56px; border-radius:16px;
    object-fit:cover;
    border:1.5px solid rgba(0,180,255,0.35);
    box-shadow:0 4px 18px rgba(0,180,255,0.35), 0 0 0 0 rgba(0,180,255,0.4);
    display:block;
    /* High quality rendering */
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
}
/* Pulsing ring */
.logo-ring {
    position:absolute; inset:-4px; border-radius:17px;
    border:2px solid rgba(0,180,255,0.4);
    animation:ringPulse 3s ease-in-out infinite;
    pointer-events:none;
}
@keyframes ringPulse {
    0%,100% { transform:scale(1); opacity:0.5; }
    50%      { transform:scale(1.12); opacity:0; }
}

.logo-text { display:flex; flex-direction:column; gap:1px; }
.logo-name {
    font-size:18px; font-weight:900; letter-spacing:-0.3px;
    background:linear-gradient(135deg, #fff 20%, var(--primary));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2;
    white-space:nowrap;
}
.logo-sub { font-size:11px; color:rgba(0,180,255,0.6); font-weight:500; white-space:nowrap; }

.filter-btn {
    display:flex; align-items:center; gap:7px; padding:9px 14px;
    background:rgba(0,180,255,0.1); border:1px solid rgba(0,180,255,0.25);
    border-radius:50px; color:var(--primary); font-size:13px; font-weight:700;
    cursor:pointer; transition:all 0.3s;
}
.filter-btn:active { transform:scale(0.93); }
.filter-btn.active-filter { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 4px 16px var(--primary-glow); }
.filter-badge { background:var(--green); color:#000; font-size:10px; font-weight:900; padding:1px 5px; border-radius:6px; }

.stats-row { display:flex; gap:8px; }
.stat-pill {
    display:flex; align-items:center; gap:6px; padding:5px 12px;
    background:rgba(0,180,255,0.05); border:1px solid rgba(0,180,255,0.1);
    border-radius:50px; font-size:12px; font-weight:600; color:var(--muted);
}
.stat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.stat-dot.green { background:var(--green); box-shadow:0 0 8px var(--green); animation:dotPulse 2s ease infinite; }
.stat-dot.yellow { background:var(--yellow); box-shadow:0 0 8px var(--yellow); animation:dotPulse 2s ease infinite 0.5s; }
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }

/* ===================================================
   CATEGORY MODAL
   =================================================== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,5,15,0.8);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    z-index:500; display:flex; align-items:flex-end;
    opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.category-modal {
    width:100%; max-height:78vh;
    background:rgba(4,12,28,0.98);
    border:1px solid rgba(0,180,255,0.12);
    border-radius:26px 26px 0 0;
    padding:12px 16px 32px;
    transform:translateY(100%);
    transition:transform 0.42s cubic-bezier(0.25,1,0.5,1);
    overflow-y:auto; scrollbar-width:none;
    box-shadow:0 -10px 60px rgba(0,50,120,0.4);
}
.category-modal::-webkit-scrollbar { display:none; }
.modal-overlay.open .category-modal { transform:translateY(0); }

.modal-drag-handle {
    width:36px; height:4px; background:rgba(0,180,255,0.2);
    border-radius:4px; margin:0 auto 14px;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-header h3 { font-size:17px; font-weight:800; color:#fff; }
.modal-close {
    width:32px; height:32px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.06); color:var(--muted);
    font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.modal-close:active { transform:scale(0.85); }

.category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.cat-modal-item {
    display:flex; align-items:center; gap:10px; padding:11px 12px;
    border-radius:15px; background:rgba(0,30,60,0.5);
    border:1.5px solid rgba(0,180,255,0.07); cursor:pointer;
    transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.cat-modal-item:active { transform:scale(0.94); }
.cat-modal-item.selected { background:rgba(0,180,255,0.12); border-color:var(--primary); box-shadow:0 4px 14px var(--primary-glow); }
.cat-modal-item.all-item { grid-column:1/-1; }
.cat-modal-item.all-item.selected { background:rgba(0,230,153,0.1); border-color:var(--green); box-shadow:0 4px 14px rgba(0,230,153,0.3); }

.sort-list { display:flex; flex-direction:column; gap:9px; }

/* Rent Details Modal */
.rent-details-content { display:flex; flex-direction:column; gap:16px; padding-top:4px; }
.rent-detail-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; background:rgba(0,180,255,0.05);
    border:1px solid rgba(0,180,255,0.1); border-radius:14px;
}
.rent-detail-label { font-size:13px; color:var(--muted); font-weight:600; }
.rent-detail-value { font-size:14px; color:#fff; font-weight:800; display:flex; align-items:center; gap:6px; }
.rent-detail-value.price { color:var(--primary); }

.rent-detail-desc {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px; padding:14px; margin-top:4px;
}
.rent-desc-title { font-size:12px; color:var(--primary); font-weight:700; margin-bottom:6px; }
.rent-desc-text { font-size:13px; color:var(--muted); line-height:1.6; text-align:justify; }

.rent-duration-selector {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; background:rgba(0,180,255,0.05);
    border:1px solid rgba(0,180,255,0.1); border-radius:14px;
}
.duration-controls { display:flex; align-items:center; gap:12px; background:rgba(0,0,0,0.3); border-radius:12px; padding:4px; border:1px solid rgba(0,180,255,0.1); }
.duration-btn {
    width:32px; height:32px; border-radius:8px; border:none;
    background:rgba(0,180,255,0.1); color:var(--primary); font-size:18px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}
.duration-btn:active { background:var(--primary); color:#fff; transform:scale(0.9); }
.duration-val { font-size:15px; font-weight:800; color:#fff; min-width:24px; text-align:center; }

.rent-gift-link {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px; background:rgba(106,61,255,0.1); color:var(--accent);
    border:1px solid rgba(106,61,255,0.25); border-radius:14px;
    text-decoration:none; font-weight:700; font-size:14px;
    transition:all 0.3s; margin-top:8px;
}
.rent-gift-link:active { transform:scale(0.96); }
.rent-confirm-btn {
    display:block; width:100%; padding:14px; margin-top:8px;
    background:linear-gradient(135deg,var(--primary),#0060cc);
    color:#fff; border:none; border-radius:14px; font-size:15px; font-weight:800;
    box-shadow:0 4px 16px var(--primary-glow); cursor:pointer;
    transition:transform 0.2s;
}
.rent-confirm-btn:active { transform:scale(0.95); }

/* Emoji bubble - pure text, zero network, instant render */
.cat-emoji-bubble {
    width:40px; height:40px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; line-height:1;
    background:rgba(0,180,255,0.07);
    border-radius:12px;
    border:1px solid rgba(0,180,255,0.1);
}

.cat-modal-info { flex:1; min-width:0; }
.cat-modal-name { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-modal-meta { font-size:11px; color:var(--muted); margin-top:2px; }

.cat-modal-check {
    width:22px; height:22px; border-radius:50%;
    border:2px solid rgba(0,180,255,0.15); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; transition:all 0.3s;
}
.cat-modal-item.selected .cat-modal-check { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 10px var(--primary-glow); }
.cat-modal-item.all-item.selected .cat-modal-check { background:var(--green); border-color:var(--green); }

/* ===================================================
   ACTIVE FILTER BAR
   =================================================== */
.active-filter-bar {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
    padding:10px 14px; background:rgba(0,180,255,0.07);
    border:1px solid rgba(0,180,255,0.2); border-radius:14px;
    font-size:13px; font-weight:600; color:var(--primary);
    animation:fadeInBar 0.4s ease;
}
@keyframes fadeInBar { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.clear-filter {
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
    border-radius:8px; color:var(--muted); font-size:12px; font-weight:600; padding:5px 10px; cursor:pointer;
}
.clear-filter:active { opacity:0.6; }

/* ===================================================
   MAIN
   =================================================== */
.main-content { padding:16px; position:relative; z-index:10; max-width:600px; margin:0 auto; }
.tab-content { display:none; }
.tab-content.active { display:block; }
.gifts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }

.empty-state { text-align:center; padding:60px 20px; color:var(--muted); font-size:14px; font-weight:600; animation:fadeInBar 0.4s ease; }
.empty-state .empty-icon { font-size:48px; margin-bottom:12px; opacity:0.4; }

/* ===================================================
   GIFT CARDS
   =================================================== */
.gift-card {
    border-radius:22px; border:1px solid var(--card-border);
    background:var(--card);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 1px 0 rgba(0,180,255,0.06), 0 8px 24px rgba(0,0,0,0.45);
    padding:14px; display:flex; flex-direction:column; gap:10px;
    animation:cardIn 0.55s cubic-bezier(0.22,1,0.36,1) backwards;
    transition:transform 0.2s; position:relative; overflow:hidden;
    will-change:transform; contain:layout style;
}
.gift-card::before {
    content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,180,255,0.06),transparent);
    transform:skewX(-15deg); animation:cardShimmer 6s infinite; pointer-events:none;
}
@keyframes cardShimmer { 0%{left:-75%} 14%{left:125%} 100%{left:125%} }
@keyframes cardIn { from{opacity:0;transform:translateY(28px) scale(0.9)} to{opacity:1;transform:translateY(0) scale(1)} }
.gift-card:active { transform:scale(0.94); }

.gift-image-container {
    width:100%; aspect-ratio:1; border-radius:16px;
    background:linear-gradient(135deg,#081525,#040c18);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    box-shadow:inset 0 2px 12px rgba(0,0,0,0.5);
    transform:translateZ(0);
}

.gift-aura {
    position:absolute; width:150%; height:150%;
    background:radial-gradient(circle,var(--glow-color,rgba(0,180,255,0.5)) 0%,transparent 65%);
    opacity:0.5; animation:auraRotate 10s linear infinite;
    mix-blend-mode:screen; pointer-events:none; will-change:transform;
}
@keyframes auraRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.gift-emoji-wrapper {
    position:relative; z-index:2;
    animation:emojiFloat 4s ease-in-out infinite alternate;
    line-height:1; text-align:center;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,0.6));
    will-change:transform;
}
@keyframes emojiFloat { from{transform:translateY(-5px)} to{transform:translateY(5px)} }

.gift-title { font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gift-price {
    font-size:12px; font-weight:800; color:var(--primary);
    display:flex; align-items:center; gap:5px;
    background:rgba(0,180,255,0.08); border:1px solid rgba(0,180,255,0.2);
    border-radius:8px; padding:5px 9px; width:fit-content;
}

.btn-rent {
    width:100%; padding:11px 0; border-radius:12px; border:none;
    background:rgba(0,180,255,0.07); color:var(--muted);
    font-weight:700; font-size:13px; cursor:pointer;
    transition:all 0.25s; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; margin-top:auto;
}
.btn-rent.primary {
    background:linear-gradient(135deg,var(--primary),#0060cc);
    color:#fff; box-shadow:0 4px 16px var(--primary-glow);
    border:1px solid rgba(255,255,255,0.18);
}
.btn-rent.primary::after {
    content:''; position:absolute; top:0; left:-100%; width:45%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
    animation:btnShine 4s infinite;
}
@keyframes btnShine { 0%{left:-100%} 17%{left:150%} 100%{left:150%} }
.btn-rent:active { transform:scale(0.95); }

/* Coming soon */
.coming-soon-container .locked-overlay {
    position:absolute; inset:0;
    background:rgba(0,5,15,0.2); backdrop-filter:blur(1px);
    border-radius:16px; display:flex; align-items:center; justify-content:center; z-index:3;
}
.lock-icon { font-size:28px; }
.countdown {
    font-size:12px; font-weight:800; color:var(--danger);
    background:rgba(255,58,92,0.08); border:1px solid rgba(255,58,92,0.25);
    border-radius:8px; padding:6px 10px; text-align:center;
    font-family:monospace; letter-spacing:1px; box-shadow:0 0 10px rgba(255,58,92,0.1);
}

/* ===================================================
   BOTTOM NAV
   =================================================== */
.glass-nav {
    position:fixed; bottom:0; left:0; right:0; height:var(--nav-h);
    background:rgba(4,10,20,0.92);
    backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    border-top:1px solid rgba(0,180,255,0.1);
    display:flex; align-items:center; justify-content:center; z-index:300;
    padding-bottom:env(safe-area-inset-bottom);
    /* Slide in after intro */
    opacity:0; transform:translateY(20px);
    transition:opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.glass-nav.visible { opacity:1; transform:translateY(0); }
.main-content { opacity:0; transition:opacity 0.6s ease 0.15s; }
.main-content.visible { opacity:1; }

.nav-btn {
    flex:1; max-width:160px; background:none; border:none;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    cursor:pointer; padding:8px 0 12px; position:relative; transition:all 0.3s;
}
.nav-icon-wrap { position:relative; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.nav-icon { font-size:22px; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); position:relative; z-index:1; }
.nav-glow {
    position:absolute; inset:0; border-radius:50%;
    background:var(--primary); filter:blur(12px);
    opacity:0; transform:scale(0.5); transition:all 0.4s;
}
.nav-label { font-size:11px; font-weight:700; color:var(--muted); transition:color 0.3s; }
.nav-indicator {
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:0; height:3px; background:var(--primary);
    border-radius:3px 3px 0 0; box-shadow:0 -2px 8px var(--primary-glow);
    transition:width 0.35s cubic-bezier(0.25,1,0.5,1);
}
.nav-btn.active .nav-icon { transform:translateY(-5px) scale(1.2); }
.nav-btn.active .nav-glow { opacity:0.38; transform:scale(1); }
.nav-btn.active .nav-label { color:var(--primary); }
.nav-btn.active .nav-indicator { width:32px; }