*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;overflow:hidden;}@media(max-width:768px){html,body{overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;}}
body{background:var(--black);color:var(--white);font-family:'Cabinet Grotesk','Segoe UI',Arial,sans-serif;transition:background 0.3s,color 0.3s;}
:root{
--gold:#C9A84C;--gold-light:#E8C97A;
--gold-dim:rgba(201,168,76,0.12);--gold-b:rgba(201,168,76,0.25);
--red:#e05555;--green:#4caf7d;
/* DARK MODE (default) */
--black:#08080A;--dark:#0E0E12;--card:#131318;
--white:#F5F0E8;--dim:rgba(245,240,232,0.45);--dim2:rgba(245,240,232,0.22);
--border:rgba(255,255,255,0.07);--shadow:rgba(0,0,0,0.5);
--input-bg:rgba(255,255,255,0.04);--topbar-bg:#0E0E12;
}
body.light-mode{
--black:#F5F5F0;--dark:#EEEEE8;--card:#FFFFFF;
--white:#1A1A1A;--dim:rgba(26,26,26,0.55);--dim2:rgba(26,26,26,0.35);
--border:rgba(0,0,0,0.1);--shadow:rgba(0,0,0,0.15);
--input-bg:rgba(0,0,0,0.03);--topbar-bg:#EEEEE8;
}
.page{display:none;}
#app-loader{position:fixed;inset:0;background:#08080A;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.4s ease;}
#app-loader.hidden{opacity:0;pointer-events:none;}
.loader-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.loader-box{width:42px;height:42px;border:2px solid var(--gold);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--gold);background:var(--gold-dim);}
.loader-name{font-size:26px;font-weight:600;letter-spacing:3px;color:var(--white);}
.loader-name span{color:var(--gold);}
.loader-spinner{width:32px;height:32px;border:2px solid rgba(201,168,76,0.2);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0);}50%{box-shadow:0 0 20px 4px rgba(201,168,76,0.12);}}
/* Onboarding modal */
#onboardingModal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;}
.onboard-box{background:var(--card);border:1px solid rgba(201,168,76,0.3);border-radius:20px;padding:48px 40px;max-width:520px;width:100%;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 40px rgba(201,168,76,0.08);animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;}
.onboard-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px;}
.onboard-logo img{width:38px;height:38px;border-radius:8px;}
.onboard-logo span{font-size:20px;font-weight:600;letter-spacing:2px;color:var(--white);}
.onboard-logo span em{color:var(--gold);font-style:normal;}
.onboard-title{font-size:clamp(24px,4vw,32px);font-weight:300;font-family:Georgia,serif;margin-bottom:8px;line-height:1.2;}
.onboard-title em{color:var(--gold);font-style:italic;}
.onboard-sub{font-size:14px;color:var(--dim);margin-bottom:36px;line-height:1.7;}
.onboard-steps{display:flex;gap:16px;margin-bottom:36px;justify-content:center;}
.onboard-step{flex:1;background:rgba(201,168,76,0.05);border:1px solid rgba(201,168,76,0.15);border-radius:14px;padding:20px 12px;}
.onboard-step-icon{font-size:28px;margin-bottom:10px;}
.onboard-step-title{font-size:12px;font-weight:600;color:var(--white);margin-bottom:4px;}
.onboard-step-desc{font-size:11px;color:var(--dim);line-height:1.5;}
.onboard-btn{width:100%;padding:16px;background:var(--gold);color:#08080A;border:none;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.25s;margin-bottom:14px;}
.onboard-btn:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,0.35);}
.onboard-skip{font-size:12px;color:var(--dim2);cursor:pointer;transition:color 0.2s;}
.onboard-skip:hover{color:var(--dim);}
@media(max-width:500px){.onboard-steps{flex-direction:column;}.onboard-box{padding:32px 24px;}}
/* Plan lock overlay */
.plan-locked{position:relative;opacity:0.45;filter:grayscale(0.3);}
.lock-wrap{position:relative;}
.page.active{display:flex;}
/* AUTH */
/* ══ END AUTH ══ */
.logo-box{width:36px;height:36px;border:1.5px solid var(--gold);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--gold);background:var(--gold-dim);}
.logo-name{font-size:22px;font-weight:600;letter-spacing:2px;}
.logo-name span{color:var(--gold);}
.auth-title{font-size:26px;font-weight:300;font-family:Georgia,serif;text-align:center;margin-bottom:6px;}
.auth-sub{font-size:13px;color:var(--dim);text-align:center;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:8px;}
.field input{width:100%;padding:13px 16px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;color:var(--white);font-size:14px;outline:none;transition:border 0.2s,background 0.3s,box-shadow 0.2s;}
.field input:focus{border-color:var(--gold);background:rgba(201,168,76,0.04);box-shadow:0 0 0 3px rgba(201,168,76,0.08);}
.field input::placeholder{color:var(--dim2);}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:44px;}
.eye-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--dim);padding:4px;display:flex;align-items:center;justify-content:center;transition:color 0.2s;}
.eye-btn:hover{color:var(--gold);}
.eye-btn svg{width:18px;height:18px;}
.btn-full{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),#b8922a);color:var(--black);border:none;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.25s;margin-top:6px;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(201,168,76,0.25);}
.btn-full::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.5s,height 0.5s,opacity 0.5s;}
.btn-full:hover::after{width:400px;height:400px;opacity:0;}
.btn-full:hover{background:linear-gradient(135deg,#dbb85a,var(--gold));transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,168,76,0.4);}
.btn-google{width:100%;padding:13px;background:rgba(255,255,255,0.06);color:var(--white);border:1px solid rgba(255,255,255,0.1);border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:0;}
.btn-google:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--dim);}
.auth-switch a{color:var(--gold);cursor:pointer;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.divider span{font-size:11px;color:var(--dim2);}
/* DASHBOARD */
#page-dashboard{flex-direction:row;height:100%;overflow:hidden;min-height:0;}
/* ─── DESIGN SYSTEM TOKENS ─── */
:root{
--s0:rgba(255,255,255,0.018);--s1:rgba(255,255,255,0.04);--s2:rgba(255,255,255,0.07);
--bd:rgba(255,255,255,0.08);--bd2:rgba(255,255,255,0.14);
--t1:#EDE8E0;--t2:rgba(237,232,224,0.55);--t3:rgba(237,232,224,0.28);--t4:rgba(237,232,224,0.12);
--gold2:#E8C96B;--glow:rgba(201,168,76,0.12);--glow2:rgba(201,168,76,0.22);
--elGreen:#3DD68C;--elRed:#F87171;--elBlue:#60A5FA;--elPurple:#9B8AFB;
}
/* ─── SIDEBAR ─── */
.sidebar{
width:232px;flex-shrink:0;
background:#0A0A0D;
border-right:1px solid var(--bd);
display:flex;flex-direction:column;
height:100vh;position:fixed;top:0;left:0;
overflow:hidden;z-index:50;
}
.sidebar-logo{
padding:18px 16px;
border-bottom:1px solid var(--bd);
display:flex;align-items:center;gap:11px;
flex-shrink:0;
}
.logo-mark{
width:36px;height:36px;border-radius:11px;
background:linear-gradient(135deg,#C9A84C 0%,#7A5512 100%);
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:900;color:#08080A;
flex-shrink:0;letter-spacing:-0.5px;
box-shadow:0 0 0 1px rgba(201,168,76,0.3),0 4px 16px rgba(201,168,76,0.18);
}
.logo-wordmark{font-size:15px;font-weight:700;letter-spacing:-0.4px;color:var(--t1);}
.logo-wordmark b{color:var(--gold);}
.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;}
.sidebar-nav::-webkit-scrollbar{width:0;}
.nav-section-label{
font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
color:var(--t4);padding:0 10px;margin:16px 0 4px;display:block;
}
.nav-sep{height:1px;background:var(--bd);margin:8px 8px;}
.nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 10px;border-radius:10px;
cursor:pointer;color:var(--t2);font-size:13px;font-weight:500;
transition:background 0.15s,color 0.15s;
margin-bottom:1px;position:relative;user-select:none;
}
.nav-item svg{flex-shrink:0;opacity:0.4;transition:opacity 0.15s;}
.nav-item:hover{background:var(--s1);color:var(--t1);}
.nav-item:hover svg{opacity:0.7;}
.nav-item.active{
background:linear-gradient(135deg,rgba(201,168,76,0.14),rgba(201,168,76,0.06));
color:var(--gold);
border:1px solid rgba(201,168,76,0.18);
}
.nav-item.active svg{opacity:1;}
.nav-item.active::before{
content:'';position:absolute;left:-1px;top:22%;bottom:22%;width:3px;
background:linear-gradient(180deg,var(--gold2),var(--gold));
border-radius:0 3px 3px 0;
box-shadow:0 0 12px rgba(201,168,76,0.6);
}
.nav-badge{
margin-left:auto;
background:rgba(61,214,140,0.12);border:1px solid rgba(61,214,140,0.25);
color:var(--elGreen);font-size:9px;font-weight:800;
padding:2px 7px;border-radius:100px;line-height:1.5;
}
.sidebar-bottom{padding:10px 8px 14px;border-top:1px solid var(--bd);flex-shrink:0;}
.user-pill{
display:flex;align-items:center;gap:9px;
padding:9px 10px;border-radius:10px;
background:var(--s0);border:1px solid var(--bd);
cursor:pointer;transition:all 0.15s;margin-bottom:4px;
}
.user-pill:hover{border-color:var(--bd2);background:var(--s1);}
.user-avatar{
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,#C9A84C,#7A5512);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:#08080A;flex-shrink:0;
}
.user-name{font-size:12px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-plan{font-size:10px;color:var(--t3);margin-top:1px;}
.logout-btn{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:9px;
font-size:12px;color:var(--elRed);cursor:pointer;transition:all 0.15s;
}
.logout-btn:hover{background:rgba(248,113,113,0.1);}
.logout-btn svg{opacity:0.5;flex-shrink:0;}
.logout-btn:hover svg{opacity:1;}
/* ── Bell / Inbox ── */
.bell-nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;font-size:12px;color:var(--t3);cursor:pointer;transition:all 0.15s;margin-bottom:2px;}
.bell-nav-item svg{opacity:0.5;flex-shrink:0;transition:opacity 0.15s;}
.bell-nav-item:hover{color:var(--gold);background:rgba(201,168,76,0.06);}
.bell-nav-item:hover svg{opacity:1;}
.bell-badge{min-width:16px;height:16px;background:#F87171;border-radius:100px;font-size:9px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 4px;margin-left:auto;line-height:1;}
.inbox-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;background:#0e0e12;border-left:1px solid var(--bd);z-index:10000;display:flex;flex-direction:column;transition:right 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:-16px 0 48px rgba(0,0,0,0.6);}
.inbox-panel.open{right:0;}
.inbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.inbox-overlay.open{opacity:1;pointer-events:all;}
.inbox-header{height:56px;padding:0 20px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;flex-shrink:0;background:#0e0e12;}
.inbox-title{font-size:15px;font-weight:700;color:var(--t1);letter-spacing:-0.3px;flex:1;}
.inbox-close{width:28px;height:28px;border-radius:8px;background:var(--s1);border:1px solid var(--bd);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;}
.inbox-close:hover{border-color:var(--bd2);color:var(--t1);}
.inbox-body{flex:1;overflow-y:auto;padding:16px;}
.inbox-body::-webkit-scrollbar{width:3px;}
.inbox-body::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px;}
.ann-item{background:var(--bg);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:10px;transition:border 0.15s;position:relative;overflow:hidden;}
.ann-item:hover{border-color:var(--bd2);}
.ann-item.unread{border-color:rgba(201,168,76,0.2);background:rgba(201,168,76,0.03);}
.ann-item.unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold2),var(--gold));}
.ann-type-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.ann-type-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ann-type-lbl{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.ann-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:6px;line-height:1.4;}
.ann-body{font-size:12px;color:var(--t2);line-height:1.7;margin-bottom:10px;}
.ann-date{font-size:10px;color:var(--t4);}
.ann-comments{margin-top:12px;border-top:1px solid var(--bd);padding-top:12px;}
.ann-comment{display:flex;gap:8px;margin-bottom:10px;}
.ann-comment-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#7A5512);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#08080A;flex-shrink:0;}
.ann-comment-body{flex:1;}
.ann-comment-name{font-size:10px;font-weight:700;color:var(--t1);margin-bottom:2px;}
.ann-comment-text{font-size:11px;color:var(--t2);line-height:1.55;}
.ann-comment-input{display:flex;gap:6px;margin-top:10px;}
.ann-comment-field{flex:1;padding:8px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--bd);border-radius:9px;color:var(--t1);font-size:12px;font-family:inherit;outline:none;transition:border 0.2s;}
.ann-comment-field:focus{border-color:var(--gold);}
.ann-comment-send{padding:8px 14px;background:linear-gradient(135deg,#E8C96B,#C9A84C);color:#08080A;border:none;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer;font-family:inherit;}
.ann-empty{text-align:center;padding:48px 20px;color:var(--t3);}
.ann-empty svg{opacity:0.25;margin-bottom:12px;display:block;margin-left:auto;margin-right:auto;}
/* ── Bulk Selection ── */
.tc.selected{border-color:var(--gold)!important;box-shadow:0 0 0 2px rgba(201,168,76,0.3);}
.tc.selected .tc-thumb::after{content:'';position:absolute;inset:0;background:rgba(201,168,76,0.15);z-index:4;pointer-events:none;}
.tc-check{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#E8C96B,#C9A84C);display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,0.4);animation:popIn 0.15s ease;}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.sel-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0e0e12;border:1px solid rgba(201,168,76,0.25);border-radius:100px;padding:10px 16px;display:flex;align-items:center;gap:8px;z-index:9998;box-shadow:0 8px 32px rgba(0,0,0,0.6);animation:slideUp 0.2s ease;white-space:nowrap;}
@keyframes slideUp{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.sel-count{font-size:12px;font-weight:700;color:var(--gold);padding-right:8px;border-right:1px solid var(--bd);}
.sel-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:100px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all 0.15s;}
.sel-btn-all{background:rgba(255,255,255,0.06);color:var(--t2);}
.sel-btn-all:hover{background:rgba(255,255,255,0.1);color:var(--t1);}
.sel-btn-dup{background:rgba(96,165,250,0.1);color:#60A5FA;}
.sel-btn-dup:hover{background:rgba(96,165,250,0.2);}
.sel-btn-proj{background:rgba(201,168,76,0.1);color:var(--gold);}
.sel-btn-proj:hover{background:rgba(201,168,76,0.2);}
.sel-btn-del{background:rgba(248,113,113,0.1);color:#F87171;}
.sel-btn-del:hover{background:rgba(248,113,113,0.2);}
.sel-btn-x{background:transparent;color:var(--t3);padding:7px 8px;}
.sel-btn-x:hover{color:var(--t1);}
/* Context menu */
.ctx-menu{position:fixed;background:#0e0e12;border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:6px;z-index:9999;min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,0.6);animation:fadeInCtx 0.1s ease;}
@keyframes fadeInCtx{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.ctx-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--t2);transition:all 0.1s;}
.ctx-item:hover{background:rgba(255,255,255,0.06);color:var(--t1);}
.ctx-item.ctx-danger{color:#F87171;}
.ctx-item.ctx-danger:hover{background:rgba(248,113,113,0.08);}
.ctx-divider{height:1px;background:var(--bd);margin:4px 0;}
/* ─── MAIN ─── */
.main{flex:1;height:100%;display:flex;flex-direction:column;background:var(--black);margin-left:232px;overflow:hidden;min-height:0;}
/* ─── TOPBAR ─── */
.topbar{
height:56px;display:flex;align-items:center;justify-content:space-between;
padding:0 28px;
border-bottom:1px solid var(--bd);
background:rgba(8,8,10,0.85);
max-width:100%;
backdrop-filter:blur(20px);
flex-shrink:0;z-index:10;position:relative;
}
.page-title{font-size:16px;font-weight:700;letter-spacing:-0.4px;color:var(--t1);}
.page-title span{color:var(--gold);}
.btn-new-tour{
display:inline-flex;align-items:center;gap:7px;
padding:8px 18px;border-radius:9px;
background:linear-gradient(135deg,#C9A84C,#8B6914);
color:#08080A;font-size:12px;font-weight:700;
border:none;cursor:pointer;font-family:inherit;
transition:all 0.15s;
box-shadow:0 2px 10px rgba(201,168,76,0.2);
}
.btn-new-tour:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,168,76,0.32);}
.btn-new-tour:active{transform:scale(0.97);}
.theme-btn{display:none;}
.btn-sm{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;border:none;font-family:inherit;}
.btn-gold-sm{background:linear-gradient(135deg,#C9A84C,#8B6914);color:#08080A;box-shadow:0 2px 10px rgba(201,168,76,0.2);}
.btn-gold-sm:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-out-sm{background:transparent;color:var(--t2);border:1px solid var(--bd);}
.btn-out-sm:hover{border-color:var(--bd2);color:var(--t1);}
.content{padding:24px 28px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,0.2) transparent;}
.content::-webkit-scrollbar{width:4px;}
.content::-webkit-scrollbar-track{background:transparent;}
.content::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.2);border-radius:4px;}
.content::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,0.4);}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all 0.3s;cursor:default;}
.stat-card:hover{border-color:var(--gold-b);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.3),0 0 15px rgba(201,168,76,0.06);}
.s-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.s-num{font-size:26px;font-weight:300;font-family:Georgia,serif;color:var(--gold);line-height:1;}
.s-sub{font-size:11px;color:var(--dim2);margin-top:4px;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sec-title{font-size:15px;color:var(--white);}
.sec-link{font-size:11px;color:var(--gold);cursor:pointer;}
.tours-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.tour-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);}
.tour-card:hover{border-color:var(--gold-b);transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 20px rgba(201,168,76,0.06);}
.tour-card:hover .thumb-remove-btn{display:flex !important;}
.proj-card:hover{border-color:var(--gold-b) !important;transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.3);}
.tour-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;border-bottom:1px solid var(--border);}
.tour-thumb::after{content:'360deg';position:absolute;bottom:8px;right:10px;font-size:9px;letter-spacing:2px;color:var(--gold);background:var(--gold-dim);padding:2px 8px;border-radius:4px;border:1px solid var(--gold-b);}
.tour-info{padding:16px;}
.tour-name{font-size:15px;margin-bottom:4px;}
.tour-meta{font-size:11px;color:var(--dim);display:flex;gap:12px;}
.tour-actions{display:flex;gap:8px;padding:0 16px 14px;}
.t-btn{flex:1;padding:8px;border-radius:6px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--dim);transition:all 0.2s;}
.t-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.08);transform:translateY(-1px);}
.t-btn.primary{background:var(--gold-dim);border-color:var(--gold-b);color:var(--gold);}
.t-btn-view{color:#64c8ff;border-color:rgba(100,200,255,0.2);}
.t-btn-view:hover{background:rgba(100,200,255,0.1);border-color:rgba(100,200,255,0.5);color:#64c8ff;}
.empty-state{text-align:center;padding:60px 20px;}
.empty-state .big-icon{font-size:48px;margin-bottom:16px;opacity:0.4;}
.empty-state h3{font-size:20px;font-family:Georgia,serif;color:var(--white);margin-bottom:8px;}
.empty-state p{font-size:14px;line-height:1.7;max-width:340px;margin:0 auto 24px;color:var(--dim);}
/* BUILDER */
#page-builder{flex-direction:column;position:fixed;inset:0;overflow:hidden;background:var(--black);display:none;}
.builder-top{display:flex!important;align-items:center;justify-content:space-between;padding:0 20px;background:#0A0A0D;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;height:54px;}
.builder-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.scenes-panel{width:200px;flex-shrink:0;background:#0A0A0D;border-right:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.panel-head{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#0A0A0D;position:sticky;top:0;z-index:2;}
.add-btn{width:22px;height:22px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-b);color:var(--gold);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.add-btn:hover{background:var(--gold);color:var(--black);}
.scenes-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px;}
.scene-item{padding:9px 10px;border-radius:10px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:all 0.15s;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;color:rgba(237,232,224,0.5);font-family:'Cabinet Grotesk',sans-serif;}
.scene-item:hover{background:rgba(255,255,255,0.04);color:rgba(237,232,224,0.8);}
.scene-item.active{background:linear-gradient(135deg,rgba(201,168,76,0.14),rgba(201,168,76,0.06));border-color:rgba(201,168,76,0.25);color:var(--gold);}
.scene-num{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-family:'DM Mono',monospace;}
.scene-item.active .scene-num{background:var(--gold);color:#08080A;font-weight:800;}
.viewer-area{flex:1;position:relative;overflow:hidden;background:#050508;}
#viewerCanvas{width:100%;height:100%;display:none;cursor:grab;}
#viewerCanvas:active{cursor:grabbing;}
#viewerCanvas.hs-mode{cursor:crosshair !important;}
.viewer-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.viewer-ph .big{font-size:52px;margin-bottom:14px;opacity:0.25;}
.viewer-ph h3{font-size:18px;font-family:Georgia,serif;color:var(--white);margin-bottom:8px;}
.viewer-ph p{font-size:13px;color:var(--dim);max-width:300px;line-height:1.7;margin-bottom:20px;}
.upload-zone{border:2px dashed var(--gold-b);border-radius:14px;padding:28px 36px;text-align:center;cursor:pointer;transition:all 0.3s;background:var(--gold-dim);}
.upload-zone:hover{border-color:var(--gold);background:rgba(201,168,76,0.15);}
.upload-zone input{display:none;}
.uz-icon{font-size:26px;margin-bottom:8px;}
.uz-text{font-size:12px;color:var(--dim);}
.uz-btn{display:inline-block;margin-top:12px;background:var(--gold);color:var(--black);padding:9px 22px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;}
.viewer-toolbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:none;gap:6px;background:rgba(8,8,10,0.85);border:1px solid var(--border);border-radius:30px;padding:6px 14px;z-index:10;align-items:center;}
.vt-btn{width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all 0.2s;}
.vt-btn:hover{border-color:var(--gold);color:var(--gold);}
.vt-btn.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.vt-div{width:1px;height:20px;background:var(--border);margin:0 4px;}
.vt-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding:0 4px;}
.hs-banner{position:absolute;top:60px;left:50%;transform:translateX(-50%);background:rgba(201,168,76,0.15);border:1px solid var(--gold-b);border-radius:8px;padding:8px 18px;font-size:12px;color:var(--gold);letter-spacing:1px;z-index:10;display:none;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}
#hsOverlay{position:absolute;inset:0;pointer-events:none;z-index:15;}
.hs-dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;pointer-events:all;transition:filter 0.2s;overflow:visible;}
.hs-dot svg,.hs-icon-wrap svg,.hs-door-frame svg,.hs-door-panel svg{display:block;overflow:visible;background:transparent;}
.hs-dot:hover{filter:brightness(1.3);}
.hs-icon-wrap{position:relative;display:flex;align-items:center;justify-content:center;transform-origin:center center;overflow:visible;}
.hs-dot.selected-hs .hs-icon-wrap::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;}
/* Door */
.hs-door-wrap{position:relative;width:56px;height:62px;display:flex;align-items:center;justify-content:center;}
.hs-door-scene{position:relative;width:38px;height:56px;}
.hs-door-floor{position:absolute;bottom:0;left:0;right:0;height:2px;background:white;border-radius:1px;}
.hs-door-frame-el{position:absolute;left:6px;top:3px;width:21px;height:50px;border:2.5px solid white;border-radius:2px;background:transparent;box-sizing:border-box;}
.hs-door-frame-inner{display:none;}
.hs-door-hinge{position:absolute;right:4px;top:3px;width:5px;height:50px;background:white;border-radius:2px;}
.hs-door-panel{position:absolute;left:6px;top:3px;width:21px;height:50px;background:rgba(255,255,255,0.88);border-radius:2px;transform-origin:right center;animation:doorSwing 3.2s ease-in-out infinite;box-shadow:2px 0 4px rgba(0,0,0,0.2);}
.hs-door-knob{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#3a3a3a;}
@keyframes doorSwing{0%,10%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(-75deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes doorSwingLeft{0%,10%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(75deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes doorSwingRight{0%,10%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(-75deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes doorSlide{0%,100%{transform:translateX(0);}50%{transform:translateX(-18px);}}
/* Floor oval */
.hs-floor-wrap{position:relative;width:80px;height:44px;display:flex;align-items:center;justify-content:center;}
.hs-floor-oval{position:relative;width:80px;height:44px;animation:floorPulse 1.3s ease-out infinite;}
.hs-floor-oval svg{width:100%;height:100%;}
/* Animations */
@keyframes doorPanel{0%,15%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(-70deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes floorPulse{0%{transform:scale(0.2);opacity:1;}100%{transform:scale(1.2);opacity:0;}}
@keyframes hsNavArrow{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(6px);opacity:0.6;}}
@keyframes hsNavArrowLeft{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(-6px);opacity:0.6;}}
@keyframes hsNavBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes hsBlink{0%,100%{opacity:1;}50%{opacity:0.15;}}
@keyframes hsSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes hsSlide{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
@keyframes hsBobUp{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes hsBobDown{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
@keyframes hsBobLeft{0%,100%{transform:translateX(0);}50%{transform:translateX(-8px);}}
@keyframes hsBobRight{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
@keyframes hsPulseScale{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.hs-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(8,8,10,0.92);border:1px solid var(--gold-b);border-radius:6px;padding:4px 10px;font-size:10px;color:var(--gold);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;}
.hs-dot:hover .hs-tip{opacity:1;}
.hs-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(8,8,10,0.92);border:1px solid var(--gold-b);border-radius:6px;padding:4px 10px;font-size:10px;color:var(--gold);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;}
.hs-dot:hover .hs-tip{opacity:1;}
@keyframes hsPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.2);}50%{box-shadow:0 0 0 10px rgba(255,255,255,0);}}
.props-panel{width:260px;flex-shrink:0;background:#0A0A0D;border-left:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.prop-sec{padding:14px 16px;border-bottom:1px solid var(--border);}
.prop-title{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
/* Accordion styles */
.acc-header{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06);user-select:none;transition:background 0.15s;}
.acc-header:hover{background:rgba(201,168,76,0.05);}
.acc-title{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px;font-weight:700;}
.acc-arrow{font-size:10px;color:var(--dim);transition:transform 0.25s;}
.acc-body{display:none;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06);}
.acc-body.open{display:block;}
.trans-opt{cursor:pointer;border-radius:10px;border:1.5px solid var(--border);background:transparent;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all 0.18s;user-select:none;}
.trans-opt:hover{border-color:var(--gold);background:rgba(201,168,76,0.06);}
.trans-icon{font-size:20px;line-height:1;}
.trans-label{font-size:9px;letter-spacing:2px;color:rgba(245,240,232,0.7);font-family:'Segoe UI',sans-serif;}
.trans-desc{font-size:9px;color:var(--dim);text-align:center;}
.acc-header.open .acc-arrow{transform:rotate(180deg);}
/* Scenes panel left accordion */
.left-acc-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;border-top:1px solid rgba(255,255,255,0.06);background:rgba(201,168,76,0.03);user-select:none;transition:background 0.15s;}
.left-acc-header:hover{background:rgba(201,168,76,0.07);}
.left-acc-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;}
.left-acc-arrow{font-size:9px;color:var(--dim);transition:transform 0.25s;}
.left-acc-body{display:none;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.2);}
.left-acc-body.open{display:block;}
.left-acc-header.open .left-acc-arrow{transform:rotate(180deg);}
/* Drag reorder scenes */
.scene-item{cursor:grab;position:relative;}
.scene-item.dragging{opacity:0.4;cursor:grabbing;}
.scene-item.drag-over{border-top:2px solid var(--gold);}
.prop-field{margin-bottom:12px;}
.prop-field label{display:block;font-size:11px;color:var(--dim);margin-bottom:5px;}
.prop-field input,.prop-field select,.prop-field textarea{width:100%;padding:8px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#EDE8E0;font-size:12px;outline:none;transition:border-color 0.15s;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;}
.prop-field input:focus,.prop-field select:focus,.prop-field textarea:focus{border-color:rgba(201,168,76,0.4);background:rgba(255,255,255,0.06);}
.prop-field select option{background:#131318;}
.prop-field textarea{resize:vertical;min-height:60px;}
.hs-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.hs-item{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:7px;padding:9px 11px;cursor:pointer;transition:all 0.2s;}
.hs-item:hover,.hs-item.sel{border-color:var(--gold-b);}
.hs-item.sel{background:var(--gold-dim);}
.hs-top{display:flex;align-items:center;justify-content:space-between;}
.hs-lbl{font-size:12px;color:var(--white);}
.hs-type-tag{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-top:2px;}
.hs-del{color:var(--dim2);cursor:pointer;font-size:13px;transition:color 0.2s;padding:2px;}
.hs-del:hover{color:var(--red);}
.place-btn{width:100%;padding:9px;border-radius:6px;background:var(--gold-dim);border:1px solid var(--gold-b);color:var(--gold);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
.place-btn:hover{background:rgba(201,168,76,0.2);}
.place-btn.on{background:var(--gold);color:var(--black);}
.hs-editor{background:rgba(201,168,76,0.06);border:1px solid var(--gold-b);border-radius:8px;padding:12px;margin-top:8px;display:none;}
.hs-editor.open{display:block;}
.hs-editor-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.del-btn{width:100%;padding:8px;border-radius:6px;background:rgba(224,85,85,0.1);border:1px solid rgba(224,85,85,0.25);color:#e08585;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-top:4px;}
/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--gold-b);border-radius:18px;padding:36px;max-width:440px;width:90%;animation:popIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;}
.modal h2{font-size:24px;font-weight:300;font-family:Georgia,serif;margin-bottom:6px;}
.modal p{font-size:13px;color:var(--dim);margin-bottom:20px;line-height:1.7;}
.share-box{display:flex;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:4px 4px 4px 14px;align-items:center;}
.share-box span{font-size:12px;color:var(--dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.copy-btn{background:var(--gold);color:var(--black);border:none;padding:8px 16px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;flex-shrink:0;}
.copy-btn.copied{background:var(--green);color:white;}
.modal-close{width:100%;padding:12px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--dim);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-top:12px;transition:all 0.2s;}
.modal-close:hover{border-color:var(--gold);color:var(--gold);}
.toast{position:fixed;bottom:24px;right:24px;z-index:100000;background:var(--card);border:1px solid var(--gold-b);border-radius:10px;padding:14px 20px;font-size:13px;color:var(--white);display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,0.4);transform:translateY(80px);opacity:0;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s cubic-bezier(0.34,1.56,0.64,1),border-color 0.15s linear;pointer-events:none;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;margin:0;padding:0;}
body{background:var(--black);color:var(--white);font-family:'Cabinet Grotesk','Segoe UI',Arial,sans-serif;transition:background 0.3s,color 0.3s;}
:root{
--gold:#C9A84C;--gold-light:#E8C97A;
--gold-dim:rgba(201,168,76,0.12);--gold-b:rgba(201,168,76,0.25);
--red:#e05555;--green:#4caf7d;
/* DARK MODE (default) */
--black:#08080A;--dark:#0E0E12;--card:#131318;
--white:#F5F0E8;--dim:rgba(245,240,232,0.45);--dim2:rgba(245,240,232,0.22);
--border:rgba(255,255,255,0.07);--shadow:rgba(0,0,0,0.5);
--input-bg:rgba(255,255,255,0.04);--topbar-bg:#0E0E12;
}
body.light-mode{
--black:#F5F5F0;--dark:#EEEEE8;--card:#FFFFFF;
--white:#1A1A1A;--dim:rgba(26,26,26,0.55);--dim2:rgba(26,26,26,0.35);
--border:rgba(0,0,0,0.1);--shadow:rgba(0,0,0,0.15);
--input-bg:rgba(0,0,0,0.03);--topbar-bg:#EEEEE8;
}
.page{display:none;}
#app-loader{position:fixed;inset:0;background:#08080A;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.4s ease;}
#app-loader.hidden{opacity:0;pointer-events:none;}
.loader-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.loader-box{width:42px;height:42px;border:2px solid var(--gold);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--gold);background:var(--gold-dim);}
.loader-name{font-size:26px;font-weight:600;letter-spacing:3px;color:var(--white);}
.loader-name span{color:var(--gold);}
.loader-spinner{width:32px;height:32px;border:2px solid rgba(201,168,76,0.2);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0);}50%{box-shadow:0 0 20px 4px rgba(201,168,76,0.12);}}
/* Onboarding modal */
#onboardingModal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;}
.onboard-box{background:var(--card);border:1px solid rgba(201,168,76,0.3);border-radius:20px;padding:48px 40px;max-width:520px;width:100%;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 40px rgba(201,168,76,0.08);animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;}
.onboard-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px;}
.onboard-logo img{width:38px;height:38px;border-radius:8px;}
.onboard-logo span{font-size:20px;font-weight:600;letter-spacing:2px;color:var(--white);}
.onboard-logo span em{color:var(--gold);font-style:normal;}
.onboard-title{font-size:clamp(24px,4vw,32px);font-weight:300;font-family:Georgia,serif;margin-bottom:8px;line-height:1.2;}
.onboard-title em{color:var(--gold);font-style:italic;}
.onboard-sub{font-size:14px;color:var(--dim);margin-bottom:36px;line-height:1.7;}
.onboard-steps{display:flex;gap:16px;margin-bottom:36px;justify-content:center;}
.onboard-step{flex:1;background:rgba(201,168,76,0.05);border:1px solid rgba(201,168,76,0.15);border-radius:14px;padding:20px 12px;}
.onboard-step-icon{font-size:28px;margin-bottom:10px;}
.onboard-step-title{font-size:12px;font-weight:600;color:var(--white);margin-bottom:4px;}
.onboard-step-desc{font-size:11px;color:var(--dim);line-height:1.5;}
.onboard-btn{width:100%;padding:16px;background:var(--gold);color:#08080A;border:none;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.25s;margin-bottom:14px;}
.onboard-btn:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,0.35);}
.onboard-skip{font-size:12px;color:var(--dim2);cursor:pointer;transition:color 0.2s;}
.onboard-skip:hover{color:var(--dim);}
@media(max-width:500px){.onboard-steps{flex-direction:column;}.onboard-box{padding:32px 24px;}}
/* Plan lock overlay */
.plan-locked{position:relative;opacity:0.45;filter:grayscale(0.3);}
.lock-wrap{position:relative;}
.page.active{display:flex;}
/* AUTH */
#page-login,#page-signup,#page-forgot,#page-newpass{align-items:center;justify-content:center;background:var(--black);position:relative;overflow:hidden;}
/* Animated background canvas */
#loginCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
/* Radial glow behind auth box */
#page-login::after,#page-signup::after,#page-forgot::after,#page-newpass::after{
content:'';position:absolute;width:600px;height:600px;
background:radial-gradient(circle,rgba(201,168,76,0.07) 0%,transparent 70%);
top:50%;left:50%;transform:translate(-50%,-50%);
pointer-events:none;z-index:0;
animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:0.6;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}}
.auth-box{position:relative;z-index:1;width:100%;max-width:420px;background:rgba(19,19,24,0.85);border:1px solid var(--gold-b);border-radius:20px;padding:44px 40px;box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(201,168,76,0.05);margin:20px;animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;backdrop-filter:blur(20px);}
@keyframes popIn{from{opacity:0;transform:scale(0.92) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}}
@keyframes floatOrb{0%,100%{transform:translateY(0px) translateX(0px);}25%{transform:translateY(-30px) translateX(15px);}50%{transform:translateY(-15px) translateX(-10px);}75%{transform:translateY(-40px) translateX(5px);}}
/* Floating orbs */
.auth-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(40px);}
.logo-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:32px;}
.logo-box{width:36px;height:36px;border:1.5px solid var(--gold);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--gold);background:var(--gold-dim);}
.logo-name{font-size:22px;font-weight:600;letter-spacing:2px;}
.logo-name span{color:var(--gold);}
.auth-title{font-size:26px;font-weight:300;font-family:Georgia,serif;text-align:center;margin-bottom:6px;}
.auth-sub{font-size:13px;color:var(--dim);text-align:center;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:8px;}
.field input{width:100%;padding:13px 16px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;color:var(--white);font-size:14px;outline:none;transition:border 0.2s,background 0.3s,box-shadow 0.2s;}
.field input:focus{border-color:var(--gold);background:rgba(201,168,76,0.04);box-shadow:0 0 0 3px rgba(201,168,76,0.08);}
.field input::placeholder{color:var(--dim2);}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:44px;}
.eye-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--dim);padding:4px;display:flex;align-items:center;justify-content:center;transition:color 0.2s;}
.eye-btn:hover{color:var(--gold);}
.eye-btn svg{width:18px;height:18px;}
.btn-full{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold),#b8922a);color:var(--black);border:none;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.25s;margin-top:6px;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(201,168,76,0.25);}
.btn-full::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.5s,height 0.5s,opacity 0.5s;}
.btn-full:hover::after{width:400px;height:400px;opacity:0;}
.btn-full:hover{background:linear-gradient(135deg,#dbb85a,var(--gold));transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,168,76,0.4);}
.btn-google{width:100%;padding:13px;background:rgba(255,255,255,0.06);color:var(--white);border:1px solid rgba(255,255,255,0.1);border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:0;}
.btn-google:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--dim);}
.auth-switch a{color:var(--gold);cursor:pointer;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.divider span{font-size:11px;color:var(--dim2);}
/* DASHBOARD */
#page-dashboard{flex-direction:row;height:100%;overflow:hidden;min-height:0;}
/* ─── DESIGN SYSTEM TOKENS ─── */
:root{
--s0:rgba(255,255,255,0.018);--s1:rgba(255,255,255,0.04);--s2:rgba(255,255,255,0.07);
--bd:rgba(255,255,255,0.08);--bd2:rgba(255,255,255,0.14);
--t1:#EDE8E0;--t2:rgba(237,232,224,0.55);--t3:rgba(237,232,224,0.28);--t4:rgba(237,232,224,0.12);
--gold2:#E8C96B;--glow:rgba(201,168,76,0.12);--glow2:rgba(201,168,76,0.22);
--elGreen:#3DD68C;--elRed:#F87171;--elBlue:#60A5FA;--elPurple:#9B8AFB;
}
/* ─── SIDEBAR ─── */
.sidebar{
width:232px;flex-shrink:0;
background:#0A0A0D;
border-right:1px solid var(--bd);
display:flex;flex-direction:column;
height:100vh;position:fixed;top:0;left:0;
overflow:hidden;z-index:50;
}
.sidebar-logo{
padding:18px 16px;
border-bottom:1px solid var(--bd);
display:flex;align-items:center;gap:11px;
flex-shrink:0;
}
.logo-mark{
width:36px;height:36px;border-radius:11px;
background:linear-gradient(135deg,#C9A84C 0%,#7A5512 100%);
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:900;color:#08080A;
flex-shrink:0;letter-spacing:-0.5px;
box-shadow:0 0 0 1px rgba(201,168,76,0.3),0 4px 16px rgba(201,168,76,0.18);
}
.logo-wordmark{font-size:15px;font-weight:700;letter-spacing:-0.4px;color:var(--t1);}
.logo-wordmark b{color:var(--gold);}
.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;}
.sidebar-nav::-webkit-scrollbar{width:0;}
.nav-section-label{
font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
color:var(--t4);padding:0 10px;margin:16px 0 4px;display:block;
}
.nav-sep{height:1px;background:var(--bd);margin:8px 8px;}
.nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 10px;border-radius:10px;
cursor:pointer;color:var(--t2);font-size:13px;font-weight:500;
transition:background 0.15s,color 0.15s;
margin-bottom:1px;position:relative;user-select:none;
}
.nav-item svg{flex-shrink:0;opacity:0.4;transition:opacity 0.15s;}
.nav-item:hover{background:var(--s1);color:var(--t1);}
.nav-item:hover svg{opacity:0.7;}
.nav-item.active{
background:linear-gradient(135deg,rgba(201,168,76,0.14),rgba(201,168,76,0.06));
color:var(--gold);
border:1px solid rgba(201,168,76,0.18);
}
.nav-item.active svg{opacity:1;}
.nav-item.active::before{
content:'';position:absolute;left:-1px;top:22%;bottom:22%;width:3px;
background:linear-gradient(180deg,var(--gold2),var(--gold));
border-radius:0 3px 3px 0;
box-shadow:0 0 12px rgba(201,168,76,0.6);
}
.nav-badge{
margin-left:auto;
background:rgba(61,214,140,0.12);border:1px solid rgba(61,214,140,0.25);
color:var(--elGreen);font-size:9px;font-weight:800;
padding:2px 7px;border-radius:100px;line-height:1.5;
}
.sidebar-bottom{padding:10px 8px 14px;border-top:1px solid var(--bd);flex-shrink:0;}
.user-pill{
display:flex;align-items:center;gap:9px;
padding:9px 10px;border-radius:10px;
background:var(--s0);border:1px solid var(--bd);
cursor:pointer;transition:all 0.15s;margin-bottom:4px;
}
.user-pill:hover{border-color:var(--bd2);background:var(--s1);}
.user-avatar{
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,#C9A84C,#7A5512);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:#08080A;flex-shrink:0;
}
.user-name{font-size:12px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-plan{font-size:10px;color:var(--t3);margin-top:1px;}
.logout-btn{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border-radius:9px;
font-size:12px;color:var(--elRed);cursor:pointer;transition:all 0.15s;
}
.logout-btn:hover{background:rgba(248,113,113,0.1);}
.logout-btn svg{opacity:0.5;flex-shrink:0;}
.logout-btn:hover svg{opacity:1;}
/* ─── MAIN ─── */
.main{flex:1;height:100%;display:flex;flex-direction:column;background:var(--black);margin-left:var(--main-ml,232px);overflow:hidden;min-height:0;width:calc(100% - var(--main-ml,232px));}
/* ─── TOPBAR ─── */
.topbar{
height:56px;display:flex;align-items:center;justify-content:space-between;
padding:0 28px;
border-bottom:1px solid var(--bd);
background:rgba(8,8,10,0.85);
backdrop-filter:blur(20px);
flex-shrink:0;z-index:10;position:relative;
}
.page-title{font-size:16px;font-weight:700;letter-spacing:-0.4px;color:var(--t1);}
.page-title span{color:var(--gold);}
.btn-new-tour{
display:inline-flex;align-items:center;gap:7px;
padding:8px 18px;border-radius:9px;
background:linear-gradient(135deg,#C9A84C,#8B6914);
color:#08080A;font-size:12px;font-weight:700;
border:none;cursor:pointer;font-family:inherit;
transition:all 0.15s;
box-shadow:0 2px 10px rgba(201,168,76,0.2);
}
.btn-new-tour:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,168,76,0.32);}
.btn-new-tour:active{transform:scale(0.97);}
.theme-btn{display:none;}
.btn-sm{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;border:none;font-family:inherit;}
.btn-gold-sm{background:linear-gradient(135deg,#C9A84C,#8B6914);color:#08080A;box-shadow:0 2px 10px rgba(201,168,76,0.2);}
.btn-gold-sm:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-out-sm{background:transparent;color:var(--t2);border:1px solid var(--bd);}
.btn-out-sm:hover{border-color:var(--bd2);color:var(--t1);}
.content{padding:24px 28px;flex:1;overflow-y:auto;}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:all 0.3s;cursor:default;}
.stat-card:hover{border-color:var(--gold-b);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.3),0 0 15px rgba(201,168,76,0.06);}
.s-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.s-num{font-size:26px;font-weight:300;font-family:Georgia,serif;color:var(--gold);line-height:1;}
.s-sub{font-size:11px;color:var(--dim2);margin-top:4px;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sec-title{font-size:15px;color:var(--white);}
.sec-link{font-size:11px;color:var(--gold);cursor:pointer;}
.tours-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.tour-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);}
.tour-card:hover{border-color:var(--gold-b);transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 20px rgba(201,168,76,0.06);}
.tour-card:hover .thumb-remove-btn{display:flex !important;}
.proj-card:hover{border-color:var(--gold-b) !important;transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.3);}
.tour-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;border-bottom:1px solid var(--border);}
.tour-thumb::after{content:'360deg';position:absolute;bottom:8px;right:10px;font-size:9px;letter-spacing:2px;color:var(--gold);background:var(--gold-dim);padding:2px 8px;border-radius:4px;border:1px solid var(--gold-b);}
.tour-info{padding:16px;}
.tour-name{font-size:15px;margin-bottom:4px;}
.tour-meta{font-size:11px;color:var(--dim);display:flex;gap:12px;}
.tour-actions{display:flex;gap:8px;padding:0 16px 14px;}
.t-btn{flex:1;padding:8px;border-radius:6px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--dim);transition:all 0.2s;}
.t-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.08);transform:translateY(-1px);}
.t-btn.primary{background:var(--gold-dim);border-color:var(--gold-b);color:var(--gold);}
.t-btn-view{color:#64c8ff;border-color:rgba(100,200,255,0.2);}
.t-btn-view:hover{background:rgba(100,200,255,0.1);border-color:rgba(100,200,255,0.5);color:#64c8ff;}
.empty-state{text-align:center;padding:60px 20px;}
.empty-state .big-icon{font-size:48px;margin-bottom:16px;opacity:0.4;}
.empty-state h3{font-size:20px;font-family:Georgia,serif;color:var(--white);margin-bottom:8px;}
.empty-state p{font-size:14px;line-height:1.7;max-width:340px;margin:0 auto 24px;color:var(--dim);}
/* BUILDER */
#page-builder{flex-direction:column;position:fixed;inset:0;overflow:hidden;background:var(--black);display:none;}
.builder-top{display:flex!important;align-items:center;justify-content:space-between;padding:0 20px;background:#0A0A0D;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0;height:54px;}
.builder-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.scenes-panel{width:200px;flex-shrink:0;background:#0A0A0D;border-right:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.panel-head{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#0A0A0D;position:sticky;top:0;z-index:2;}
.add-btn{width:22px;height:22px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-b);color:var(--gold);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.add-btn:hover{background:var(--gold);color:var(--black);}
.scenes-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px;}
.scene-item{padding:9px 10px;border-radius:10px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:all 0.15s;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;color:rgba(237,232,224,0.5);font-family:'Cabinet Grotesk',sans-serif;}
.scene-item:hover{background:rgba(255,255,255,0.04);color:rgba(237,232,224,0.8);}
.scene-item.active{background:linear-gradient(135deg,rgba(201,168,76,0.14),rgba(201,168,76,0.06));border-color:rgba(201,168,76,0.25);color:var(--gold);}
.scene-num{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-family:'DM Mono',monospace;}
.scene-item.active .scene-num{background:var(--gold);color:#08080A;font-weight:800;}
.viewer-area{flex:1;position:relative;overflow:hidden;background:#050508;}
#viewerCanvas{width:100%;height:100%;display:none;cursor:grab;}
#viewerCanvas:active{cursor:grabbing;}
#viewerCanvas.hs-mode{cursor:crosshair !important;}
.viewer-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.viewer-ph .big{font-size:52px;margin-bottom:14px;opacity:0.25;}
.viewer-ph h3{font-size:18px;font-family:Georgia,serif;color:var(--white);margin-bottom:8px;}
.viewer-ph p{font-size:13px;color:var(--dim);max-width:300px;line-height:1.7;margin-bottom:20px;}
.upload-zone{border:2px dashed var(--gold-b);border-radius:14px;padding:28px 36px;text-align:center;cursor:pointer;transition:all 0.3s;background:var(--gold-dim);}
.upload-zone:hover{border-color:var(--gold);background:rgba(201,168,76,0.15);}
.upload-zone input{display:none;}
.uz-icon{font-size:26px;margin-bottom:8px;}
.uz-text{font-size:12px;color:var(--dim);}
.uz-btn{display:inline-block;margin-top:12px;background:var(--gold);color:var(--black);padding:9px 22px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;}
.viewer-toolbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:none;gap:6px;background:rgba(8,8,10,0.85);border:1px solid var(--border);border-radius:30px;padding:6px 14px;z-index:10;align-items:center;}
.vt-btn{width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all 0.2s;}
.vt-btn:hover{border-color:var(--gold);color:var(--gold);}
.vt-btn.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.vt-div{width:1px;height:20px;background:var(--border);margin:0 4px;}
.vt-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding:0 4px;}
.hs-banner{position:absolute;top:60px;left:50%;transform:translateX(-50%);background:rgba(201,168,76,0.15);border:1px solid var(--gold-b);border-radius:8px;padding:8px 18px;font-size:12px;color:var(--gold);letter-spacing:1px;z-index:10;display:none;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}
#hsOverlay{position:absolute;inset:0;pointer-events:none;z-index:15;}
.hs-dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;pointer-events:all;transition:filter 0.2s;overflow:visible;}
.hs-dot svg,.hs-icon-wrap svg,.hs-door-frame svg,.hs-door-panel svg{display:block;overflow:visible;background:transparent;}
.hs-dot:hover{filter:brightness(1.3);}
.hs-icon-wrap{position:relative;display:flex;align-items:center;justify-content:center;transform-origin:center center;overflow:visible;}
.hs-dot.selected-hs .hs-icon-wrap::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;}
/* Door */
.hs-door-wrap{position:relative;width:56px;height:62px;display:flex;align-items:center;justify-content:center;}
.hs-door-scene{position:relative;width:38px;height:56px;}
.hs-door-floor{position:absolute;bottom:0;left:0;right:0;height:2px;background:white;border-radius:1px;}
.hs-door-frame-el{position:absolute;left:6px;top:3px;width:21px;height:50px;border:2.5px solid white;border-radius:2px;background:transparent;box-sizing:border-box;}
.hs-door-frame-inner{display:none;}
.hs-door-hinge{position:absolute;right:4px;top:3px;width:5px;height:50px;background:white;border-radius:2px;}
.hs-door-panel{position:absolute;left:6px;top:3px;width:21px;height:50px;background:rgba(255,255,255,0.88);border-radius:2px;transform-origin:right center;animation:doorSwing 3.2s ease-in-out infinite;box-shadow:2px 0 4px rgba(0,0,0,0.2);}
.hs-door-knob{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#3a3a3a;}
@keyframes doorSwing{0%,10%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(-75deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes doorSwingLeft{0%,10%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(75deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes doorSwingRight{0%,10%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(-75deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes doorSlide{0%,100%{transform:translateX(0);}50%{transform:translateX(-18px);}}
/* Floor oval */
.hs-floor-wrap{position:relative;width:80px;height:44px;display:flex;align-items:center;justify-content:center;}
.hs-floor-oval{position:relative;width:80px;height:44px;animation:floorPulse 1.3s ease-out infinite;}
.hs-floor-oval svg{width:100%;height:100%;}
/* Animations */
@keyframes doorPanel{0%,15%{transform:perspective(200px) rotateY(0deg);}50%,80%{transform:perspective(200px) rotateY(-70deg);}100%{transform:perspective(200px) rotateY(0deg);}}
@keyframes floorPulse{0%{transform:scale(0.2);opacity:1;}100%{transform:scale(1.2);opacity:0;}}
@keyframes hsNavArrow{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(6px);opacity:0.6;}}
@keyframes hsNavArrowLeft{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(-6px);opacity:0.6;}}
@keyframes hsNavBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes hsBlink{0%,100%{opacity:1;}50%{opacity:0.15;}}
@keyframes hsSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes hsSlide{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
@keyframes hsBobUp{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes hsBobDown{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
@keyframes hsBobLeft{0%,100%{transform:translateX(0);}50%{transform:translateX(-8px);}}
@keyframes hsBobRight{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
@keyframes hsPulseScale{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.hs-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(8,8,10,0.92);border:1px solid var(--gold-b);border-radius:6px;padding:4px 10px;font-size:10px;color:var(--gold);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;}
.hs-dot:hover .hs-tip{opacity:1;}
.hs-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(8,8,10,0.92);border:1px solid var(--gold-b);border-radius:6px;padding:4px 10px;font-size:10px;color:var(--gold);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;}
.hs-dot:hover .hs-tip{opacity:1;}
@keyframes hsPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.2);}50%{box-shadow:0 0 0 10px rgba(255,255,255,0);}}
.props-panel{width:260px;flex-shrink:0;background:#0A0A0D;border-left:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.prop-sec{padding:14px 16px;border-bottom:1px solid var(--border);}
.prop-title{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
/* Accordion styles */
.acc-header{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06);user-select:none;transition:background 0.15s;}
.acc-header:hover{background:rgba(201,168,76,0.05);}
.acc-title{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px;font-weight:700;}
.acc-arrow{font-size:10px;color:var(--dim);transition:transform 0.25s;}
.acc-body{display:none;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.06);}
.acc-body.open{display:block;}
.trans-opt{cursor:pointer;border-radius:10px;border:1.5px solid var(--border);background:transparent;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all 0.18s;user-select:none;}
.trans-opt:hover{border-color:var(--gold);background:rgba(201,168,76,0.06);}
.trans-icon{font-size:20px;line-height:1;}
.trans-label{font-size:9px;letter-spacing:2px;color:rgba(245,240,232,0.7);font-family:'Segoe UI',sans-serif;}
.trans-desc{font-size:9px;color:var(--dim);text-align:center;}
.acc-header.open .acc-arrow{transform:rotate(180deg);}
/* Scenes panel left accordion */
.left-acc-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;border-top:1px solid rgba(255,255,255,0.06);background:rgba(201,168,76,0.03);user-select:none;transition:background 0.15s;}
.left-acc-header:hover{background:rgba(201,168,76,0.07);}
.left-acc-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;}
.left-acc-arrow{font-size:9px;color:var(--dim);transition:transform 0.25s;}
.left-acc-body{display:none;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.2);}
.left-acc-body.open{display:block;}
.left-acc-header.open .left-acc-arrow{transform:rotate(180deg);}
/* Drag reorder scenes */
.scene-item{cursor:grab;position:relative;}
.scene-item.dragging{opacity:0.4;cursor:grabbing;}
.scene-item.drag-over{border-top:2px solid var(--gold);}
.prop-field{margin-bottom:12px;}
.prop-field label{display:block;font-size:11px;color:var(--dim);margin-bottom:5px;}
.prop-field input,.prop-field select,.prop-field textarea{width:100%;padding:8px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#EDE8E0;font-size:12px;outline:none;transition:border-color 0.15s;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;}
.prop-field input:focus,.prop-field select:focus,.prop-field textarea:focus{border-color:rgba(201,168,76,0.4);background:rgba(255,255,255,0.06);}
.prop-field select option{background:#131318;}
.prop-field textarea{resize:vertical;min-height:60px;}
.hs-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.hs-item{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:7px;padding:9px 11px;cursor:pointer;transition:all 0.2s;}
.hs-item:hover,.hs-item.sel{border-color:var(--gold-b);}
.hs-item.sel{background:var(--gold-dim);}
.hs-top{display:flex;align-items:center;justify-content:space-between;}
.hs-lbl{font-size:12px;color:var(--white);}
.hs-type-tag{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-top:2px;}
.hs-del{color:var(--dim2);cursor:pointer;font-size:13px;transition:color 0.2s;padding:2px;}
.hs-del:hover{color:var(--red);}
.place-btn{width:100%;padding:9px;border-radius:6px;background:var(--gold-dim);border:1px solid var(--gold-b);color:var(--gold);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
.place-btn:hover{background:rgba(201,168,76,0.2);}
.place-btn.on{background:var(--gold);color:var(--black);}
.hs-editor{background:rgba(201,168,76,0.06);border:1px solid var(--gold-b);border-radius:8px;padding:12px;margin-top:8px;display:none;}
.hs-editor.open{display:block;}
.hs-editor-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.del-btn{width:100%;padding:8px;border-radius:6px;background:rgba(224,85,85,0.1);border:1px solid rgba(224,85,85,0.25);color:#e08585;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-top:4px;}
/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--gold-b);border-radius:18px;padding:36px;max-width:440px;width:90%;animation:popIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;}
.modal h2{font-size:24px;font-weight:300;font-family:Georgia,serif;margin-bottom:6px;}
.modal p{font-size:13px;color:var(--dim);margin-bottom:20px;line-height:1.7;}
.share-box{display:flex;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:4px 4px 4px 14px;align-items:center;}
.share-box span{font-size:12px;color:var(--dim);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.copy-btn{background:var(--gold);color:var(--black);border:none;padding:8px 16px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;flex-shrink:0;}
.copy-btn.copied{background:var(--green);color:white;}
.modal-close{width:100%;padding:12px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--dim);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-top:12px;transition:all 0.2s;}
.modal-close:hover{border-color:var(--gold);color:var(--gold);}
/* ANALYTICS */
.analytics-wrap{max-width:960px;}
.analytics-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.tour-select-wrap{display:flex;align-items:center;gap:10px;}
.tour-select-wrap label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);}
.tour-select{background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--white);padding:8px 14px;font-size:13px;outline:none;cursor:pointer;}
.tour-select:focus{border-color:var(--gold);}
.a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px;}
.a-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;}
.a-card-icon{font-size:22px;margin-bottom:8px;}
.a-card-val{font-size:28px;font-weight:600;color:var(--white);margin-bottom:2px;}
.a-card-val span{color:var(--gold);}
.a-card-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);}
.a-section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:16px;}
.a-section-title{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.a-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.chart-wrap{height:140px;display:flex;align-items:flex-end;gap:4px;padding-top:10px;}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.chart-bar{width:100%;background:var(--gold-dim);border-radius:3px 3px 0 0;border:1px solid var(--gold-b);transition:height 0.5s cubic-bezier(0.34,1.56,0.64,1);min-height:2px;position:relative;}
.chart-bar:hover{background:var(--gold);cursor:pointer;}
.chart-bar .tip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--gold);color:var(--black);font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity 0.2s;pointer-events:none;}
.chart-bar:hover .tip{opacity:1;}
.chart-label{font-size:9px;color:var(--dim2);text-align:center;}
.country-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.country-row:last-child{border:none;}
.country-flag{font-size:20px;width:28px;text-align:center;}
.country-name{flex:1;font-size:13px;color:var(--white);}
.country-bar-bg{width:120px;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.country-bar-fill{height:100%;background:var(--gold);border-radius:3px;transition:width 0.6s ease;}
.country-count{font-size:12px;color:var(--dim);min-width:30px;text-align:right;}
.scene-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.scene-row:last-child{border:none;}
.scene-rank{width:22px;height:22px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-b);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--gold);flex-shrink:0;}
.scene-name{flex:1;font-size:13px;color:var(--white);}
.scene-views{font-size:12px;color:var(--dim);}
.device-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.device-icon{font-size:18px;width:28px;}
.device-label{font-size:13px;color:var(--white);flex:1;}
.device-bar-bg{width:140px;height:8px;background:var(--border);border-radius:4px;overflow:hidden;}
.device-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:4px;transition:width 0.6s ease;}
.device-pct{font-size:12px;color:var(--gold);font-weight:600;min-width:36px;text-align:right;}
.no-analytics{text-align:center;padding:40px 20px;color:var(--dim);}
.no-analytics .big-num{font-size:48px;margin-bottom:8px;}
/* LIGHT MODE OVERRIDES */
body.light-mode .auth-box{box-shadow:0 30px 80px rgba(0,0,0,0.12);}
body.light-mode .field input{background:rgba(0,0,0,0.04)!important;color:#1A1A1A!important;}
body.light-mode .field input::placeholder{color:rgba(0,0,0,0.3)!important;}
body.light-mode .tour-card{background:#fff;border-color:rgba(0,0,0,0.08);}
body.light-mode .stat-card{background:#fff;border-color:rgba(0,0,0,0.08);}
body.light-mode .modal-box{background:#fff;}
body.light-mode .panel{background:#EEEEE8!important;border-color:rgba(0,0,0,0.08)!important;}
body.light-mode .builder-top{background:#EEEEE8!important;border-color:rgba(0,0,0,0.08)!important;}
body.light-mode .scene-item{background:#fff;border-color:rgba(0,0,0,0.08);}
body.light-mode .scene-item.active{background:var(--gold-dim);border-color:var(--gold-b);}
body.light-mode input,body.light-mode textarea,body.light-mode select{background:rgba(0,0,0,0.04)!important;color:#1A1A1A!important;border-color:rgba(0,0,0,0.12)!important;}
body.light-mode .user-pill{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08);}
body.light-mode .nav-item:hover{background:rgba(0,0,0,0.05);}
body.light-mode .nav-item.active{background:var(--gold-dim);}
body.light-mode .tour-name{color:#1A1A1A;}
body.light-mode .s-num{color:#1A1A1A;}
body.light-mode .sec-title{color:#1A1A1A;}
body.light-mode .page-title{color:#1A1A1A;}
body.light-mode .page-title span{color:var(--gold);}
body.light-mode .builder-viewer{background:#2a2a35!important;}
.toast.show{transform:translateY(0);opacity:1;}
#bottom-nav{
display:none;
position:fixed;
bottom:16px;left:50%;
transform:translateX(-50%);
z-index:1000;
width:calc(100% - 32px);
max-width:380px;
background:rgba(18,18,22,0.96);
border:1px solid rgba(255,255,255,0.08);
border-radius:100px;
padding:10px 12px;
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04);
justify-content:space-between;
align-items:center;
gap:4px;
}
@media(max-width:768px){
.sidebar,.scenes-panel,.props-panel{display:none;}
.main{margin-left:0!important;width:100vw!important;max-width:100vw!important;}
#bottom-nav{display:flex;}
/* App fills full screen - critical for mobile */
#page-dashboard{width:100vw!important;max-width:100vw!important;overflow:hidden!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;}
.sidebar{display:none!important;width:0!important;min-width:0!important;overflow:hidden!important;}
#mainContent_wrap{width:100vw!important;max-width:100vw!important;margin-left:0!important;left:0!important;}
.main{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;}
*{max-width:100vw;}
/* Topbar - account for browser chrome */
.topbar{
padding:12px 16px 12px;gap:10px;
border-bottom:1px solid var(--bd);
min-height:56px;
flex-wrap:nowrap;
overflow:hidden;
}
.topbar #tbViewToggle{display:none!important;}
.topbar #tbSortWrap{display:none!important;}
.topbar-left{flex-shrink:0;min-width:0;}
#tabTitle{font-size:20px!important;font-weight:800!important;letter-spacing:-0.5px!important;white-space:nowrap;}
#tabSubtitle{font-size:11px!important;color:var(--t3)!important;white-space:nowrap;}
#tbSearchWrap{flex:1!important;min-width:0!important;max-width:none!important;}
#btnNewTour{padding:7px 12px!important;font-size:11px!important;white-space:nowrap;flex-shrink:0;}
/* Content */
.content{padding:14px 16px 120px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
/* Filter bar */
.filter-bar{gap:7px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:4px;}
.filter-bar::-webkit-scrollbar{display:none;}
.sort-wrap{display:none!important;}
.fb-divider{display:none!important;}
.fb{padding:7px 16px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0;}
/* Tour cards - single column */
.grid{grid-template-columns:1fr!important;gap:12px!important;width:100%!important;}
.tc{border-radius:16px;}
.tc-thumb{height:180px!important;}
.tc-body{padding:12px 14px!important;}
.tc-client{font-size:10px!important;text-transform:uppercase;letter-spacing:0.5px;}
.tc-name-edit{font-size:16px!important;font-weight:700!important;letter-spacing:-0.3px!important;width:100%!important;}
.tc-name-save{display:none!important;}
.tc-stat-val{font-size:15px!important;font-weight:700!important;}
.tc-stat-lbl{font-size:9px!important;letter-spacing:1px!important;}
.tc-stats{padding-top:10px!important;border-top:1px solid var(--bd)!important;}
/* Analytics - fix horizontal overflow */
.analytics-wrap,.an-wrap{width:100%!important;overflow-x:hidden!important;}
.an-stat-cards{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
.an-stat-card{min-width:0!important;}
.an-grid{display:flex!important;flex-direction:column!important;gap:10px!important;}
.an-col{width:100%!important;}
/* Demo banner */
#demoBanner{flex-direction:column!important;gap:10px!important;}
#demoBanner>div:last-child{width:100%;display:flex;gap:8px;}
#demoBanner>div:last-child button{flex:1;text-align:center;}
}
.bn-item{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
cursor:pointer;
padding:6px 4px;
transition:all 0.2s;
color:rgba(245,240,232,0.3);
font-size:10px;
font-weight:600;
letter-spacing:0.3px;
font-family:inherit;
border:none;
background:transparent;
border-radius:12px;
min-width:52px;
}
.bn-item:hover{color:rgba(245,240,232,0.6);}
.bn-item.active{color:var(--gold);}
.bn-item.active svg{stroke:var(--gold);}
.bn-item svg{width:20px;height:20px;stroke-width:1.6;stroke:currentColor;transition:all 0.2s;}
.bn-center{
width:52px;height:52px;
border-radius:50%;
background:linear-gradient(135deg,#E8C96B,#C9A84C);
display:flex;align-items:center;justify-content:center;
border:none;cursor:pointer;
box-shadow:0 4px 16px rgba(201,168,76,0.4);
transition:all 0.2s;
flex-shrink:0;
}
.bn-center:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(201,168,76,0.45);}
.bn-center:active{transform:scale(0.95);}
.bn-icon{font-size:18px;line-height:1;}
/* ── MOBILE ONLY ── */
@media(max-width:768px){
#mobileMenuBtn{display:flex!important;}
#bottom-nav.auth-hidden{display:none!important;visibility:hidden!important;}
.mob-nav-item{padding:13px 14px;display:flex;align-items:center;gap:14px;cursor:pointer;color:rgba(245,240,232,0.55);font-size:15px;font-weight:500;border-radius:10px;transition:all 0.15s;}
.mob-nav-item:hover,.mob-nav-item:active{background:rgba(201,168,76,0.08);color:var(--gold);}
.mob-nav-item svg{flex-shrink:0;opacity:0.6;width:20px;height:20px;}
/* Topbar mobile */
.topbar{flex-wrap:nowrap;overflow:hidden;}
.topbar-left{min-width:0;flex-shrink:1;}
.topbar-title{font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#tbSearchWrap{max-width:180px;}
#btnNewTour{padding:7px 12px!important;font-size:11px!important;}
/* Filter bar mobile */
.filter-bar{gap:5px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.sort-wrap{display:none!important;}
.fb-divider{display:none!important;}
.fb{white-space:nowrap;flex-shrink:0;}
/* Tour grid - single column on mobile */
.grid{grid-template-columns:1fr!important;}
/* Demo banner fix */
#demoBanner{flex-direction:column;align-items:flex-start!important;}
#demoBanner > div:last-child{width:100%;display:flex;gap:8px;}
#demoBanner > div:last-child button{flex:1;text-align:center;}
/* Builder mobile */
.builder-top{padding:8px 10px!important;}
#builderBackBtn{padding:5px 8px!important;font-size:10px!important;letter-spacing:1px!important;}
#builderTitleWrap{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
#bTourName{font-size:11px!important;}
#builderTopBtns{gap:5px!important;}
#builderTopBtns .btn-sm{padding:5px 8px!important;font-size:10px!important;letter-spacing:0.5px!important;}
#builderTopBtns button:nth-child(1){display:none!important;}
}
#mobile-builder-tabs{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--dark);border-top:1px solid var(--border);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
#mobile-builder-tabs::-webkit-scrollbar{display:none;}
.mb-tabs-row{display:flex;padding:0 4px;min-width:max-content;}
.mbtab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);cursor:pointer;border:none;background:transparent;font-family:'Segoe UI',sans-serif;transition:color 0.2s;white-space:nowrap;flex-shrink:0;position:relative;}
.mbtab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.mbtab.active{color:var(--gold);}
.mbtab.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--gold);border-radius:0 0 2px 2px;}
#mb-overlay{display:none;position:fixed;inset:0;z-index:150;background:rgba(0,0,0,0.6);}
#mb-panel{position:fixed;bottom:56px;left:0;right:0;z-index:160;background:#0E0E12;border-top:1px solid rgba(201,168,76,0.2);border-radius:16px 16px 0 0;max-height:65vh;display:none;flex-direction:column;transform:translateY(100%);transition:transform 0.3s ease;}
#mb-panel.open{display:flex;transform:translateY(0);}
#mb-panel-handle{width:48px;height:5px;border-radius:3px;background:rgba(201,168,76,0.4);margin:14px auto 4px;flex-shrink:0;cursor:pointer;}
#mb-panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;flex-shrink:0;border-bottom:1px solid var(--border);}
#mb-panel-title{font-size:13px;font-weight:500;}
#mb-panel-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.06);border:none;color:var(--dim);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
#mb-panel-body{flex:1;overflow-y:auto;padding:16px 20px 24px;}
/* ─── TOPBAR CONTROLS ─── */
.tb-search{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--bd);border-radius:9px;padding:0 13px;height:34px;transition:border-color 0.15s;}
.tb-search:focus-within{border-color:rgba(201,168,76,0.3);}
.tb-search svg{opacity:0.35;flex-shrink:0;}
.tb-view-toggle{display:flex;background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:3px;gap:2px;}
.tbvt{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:all 0.14s;}
.tbvt.on{background:var(--s2);color:var(--t1);}
.tbvt:hover{color:var(--t2);}
/* ─── CHROME TRIM ─── */
body::after{content:'';position:fixed;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,0.5) 30%,rgba(232,201,107,0.7) 50%,rgba(201,168,76,0.5) 70%,transparent 100%);z-index:10000;pointer-events:none;}
@keyframes ci{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.ci{animation:ci 0.3s ease both;}
/* ════ TOUR CARDS ════ */
.filter-bar{display:flex;align-items:center;gap:6px;margin-bottom:20px;}
.fb{padding:5px 16px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.1);background:transparent;color:rgba(237,232,224,0.5);font-family:inherit;transition:all 0.15s;}
.fb:hover{border-color:rgba(255,255,255,0.2);color:#EDE8E0;}
.fb.on{background:rgba(255,255,255,0.1);color:#EDE8E0;border-color:rgba(255,255,255,0.2);}
.fb-divider{width:1px;height:18px;background:rgba(255,255,255,0.08);margin:0 4px;}
.sort-wrap{margin-left:auto;display:flex;align-items:center;gap:8px;height:30px;}
.sort-label{font-size:11px;color:rgba(237,232,224,0.22);}
.sort-sel{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:7px;padding:4px 28px 4px 10px;color:rgba(237,232,224,0.7);font-size:11px;font-family:inherit;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(237,232,224,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;}
.sort-sel option{background:#0e0e12;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.list{display:flex;flex-direction:column;gap:8px;}
.empty{text-align:center;padding:80px 20px;}
.empty-icon{margin-bottom:16px;}
.empty-title{font-size:18px;font-weight:700;margin-bottom:8px;}
.empty-sub{font-size:13px;color:rgba(237,232,224,0.5);line-height:1.7;max-width:320px;margin:0 auto 24px;}
/* Card */
.tc{border:1px solid rgba(255,255,255,0.07);border-radius:14px;overflow:hidden;background:#0e0e12;transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s;}
.tc:hover{border-color:rgba(201,168,76,0.18);transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,0.5);}
.tc-thumb{position:relative;height:176px;overflow:hidden;background:#0a0a0e;}
.tc-placeholder{position:absolute;inset:0;}
.tc-placeholder svg{width:100%;height:100%;}
.tc-thumb-gold{position:absolute;bottom:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.55) 50%,transparent);z-index:4;pointer-events:none;}
.tc-thumb-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.75) 0%,transparent 55%);opacity:0;transition:opacity 0.25s;z-index:2;}
.tc:hover .tc-thumb-overlay{opacity:1;}
.tc-status{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:0.2px;}
.s-live{background:rgba(61,214,140,0.12);border:1px solid rgba(61,214,140,0.22);color:#3DD68C;}
.s-draft{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(237,232,224,0.6);}
.tc-status-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;}
.tc-scenes{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:10px;color:rgba(237,232,224,0.55);background:rgba(0,0,0,0.4);backdrop-filter:blur(8px);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.07);}
.tc-actions{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:12px;display:flex;gap:6px;transform:translateY(100%);transition:transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94);}
.tc:hover .tc-actions{transform:translateY(0);}
.tca{flex:1;padding:8px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px;transition:all 0.14s;}
.tca:active{transform:scale(0.96);}
.tca-edit{background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);color:#EDE8E0;}
.tca-edit:hover{background:rgba(255,255,255,0.2);}
.tca-view{background:linear-gradient(135deg,rgba(201,168,76,0.9),rgba(139,105,20,0.9));color:#08080A;font-weight:800;}
.tca-view:hover{filter:brightness(1.12);}
.tca-del{width:36px;flex-shrink:0;background:rgba(248,113,113,0.1);backdrop-filter:blur(8px);color:rgba(248,113,113,0.7);border:1px solid rgba(248,113,113,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.14s;}
.tca-del:hover{background:rgba(248,113,113,0.2);color:#F87171;}
.tc-body{padding:14px 16px;}
.tc-client{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(237,232,224,0.28);margin-bottom:6px;}
.tc-name{font-size:14px;font-weight:700;letter-spacing:-0.3px;color:#EDE8E0;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;}
.tc-stats{display:flex;border-top:1px solid rgba(255,255,255,0.06);padding-top:12px;}
.tc-stat{flex:1;text-align:center;position:relative;}
.tc-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:15%;bottom:15%;width:1px;background:rgba(255,255,255,0.06);}
.tc-stat-val{font-size:15px;font-weight:800;letter-spacing:-0.5px;line-height:1;font-variant-numeric:tabular-nums;}
.tc-stat-lbl{font-size:9px;color:rgba(237,232,224,0.22);letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-top:5px;}
/* List view */
.tl{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(255,255,255,0.07);border-radius:12px;background:#0e0e12;transition:border-color 0.2s;}
.tl:hover{border-color:rgba(201,168,76,0.18);}
.tl-thumb{width:64px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,0.07);}
.tl-thumb svg{width:100%;height:100%;}
.tl-info{flex:1;min-width:0;}
.tl-client{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(237,232,224,0.28);margin-bottom:3px;}
.tl-name{font-size:13px;font-weight:600;color:#EDE8E0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tl-meta{display:flex;gap:16px;flex-shrink:0;}
.tl-stat{text-align:center;}
.tl-stat-val{font-size:13px;font-weight:800;letter-spacing:-0.3px;}
.tl-stat-lbl{font-size:9px;color:rgba(237,232,224,0.22);letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-top:2px;}
.tl-actions{display:flex;gap:6px;flex-shrink:0;}
.tla{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(237,232,224,0.4);transition:all 0.14s;font-family:inherit;}
.tla:hover{border-color:rgba(255,255,255,0.16);color:#EDE8E0;background:rgba(255,255,255,0.05);}
@keyframes ci{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.ci{animation:ci 0.28s ease both;}
/* ANALYTICS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px;}
.stat{border:1px solid var(--bd);border-radius:16px;padding:20px 22px;position:relative;overflow:hidden;transition:border-color 0.2s,transform 0.2s;cursor:default;background:var(--s0);}
.stat:hover{border-color:var(--bd2);transform:translateY(-2px);}
.stat-line{position:absolute;top:0;left:0;right:0;height:1px;}
.stat-ghost{position:absolute;bottom:-10px;right:-6px;font-size:76px;font-weight:900;line-height:1;pointer-events:none;opacity:0.04;transition:opacity 0.25s;font-family:'Cabinet Grotesk',sans-serif;letter-spacing:-4px;}
.stat:hover .stat-ghost{opacity:0.07;}
.stat-glow{position:absolute;bottom:-20px;left:16px;width:80px;height:80px;border-radius:50%;filter:blur(28px);opacity:0.18;transition:opacity 0.25s;pointer-events:none;}
.stat:hover .stat-glow{opacity:0.28;}
.stat-label{font-size:10px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-bottom:14px;position:relative;z-index:1;}
.stat-val{font-size:38px;font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums;position:relative;z-index:1;}
.stat-val span{font-size:20px;font-weight:600;letter-spacing:-1px;}
.stat-foot{font-size:11px;color:var(--t3);margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.055);display:flex;align-items:center;gap:5px;position:relative;z-index:1;font-weight:500;}
/* ── Card ── */
.card{background:var(--s0);border:1px solid var(--bd);border-radius:16px;overflow:hidden;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bd);background:rgba(0,0,0,0.15);}
.card-title{font-size:13px;font-weight:700;letter-spacing:-0.2px;}
.card-sub{font-size:11px;color:var(--t3);font-family:'DM Mono',monospace;}
.card-body{padding:18px;}
/* ── Layouts ── */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.row-32{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-bottom:16px;}
.row-213{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:16px;margin-bottom:16px;}
/* ── Bar Chart ── */
.chart-outer{position:relative;padding-left:32px;padding-bottom:24px;}
.chart-y-axis{position:absolute;left:0;top:0;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-right:6px;}
.chart-y-label{font-size:9px;color:var(--t3);font-family:'DM Mono',monospace;line-height:1;}
.chart-grid-lines{position:absolute;left:32px;right:0;top:0;bottom:24px;pointer-events:none;}
.chart-grid-line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,0.04);}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:120px;position:relative;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;height:100%;justify-content:flex-end;position:relative;}
.bar-col:hover .bar-tooltip{opacity:1;transform:translateX(-50%) translateY(-2px);}
.bar{width:100%;border-radius:3px 3px 2px 2px;animation:barIn 0.45s cubic-bezier(0.34,1.2,0.64,1) both;transform-origin:bottom;flex-shrink:0;}
@keyframes barIn{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.bar:hover{filter:brightness(1.35);}
.bar-tooltip{position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);border:1px solid var(--bd2);border-radius:6px;padding:3px 8px;font-size:10px;font-weight:700;font-family:'DM Mono',monospace;white-space:nowrap;opacity:0;transition:opacity 0.15s,transform 0.15s;pointer-events:none;backdrop-filter:blur(8px);z-index:10;}
.bar-x-label{position:absolute;bottom:-20px;font-size:9px;color:var(--t3);font-family:'DM Mono',monospace;white-space:nowrap;text-align:center;left:50%;transform:translateX(-50%);}
.bar-spacer{flex:1;}
/* ── Pie Chart ── */
.pie-container{display:flex;align-items:center;gap:20px;padding:4px 0;}
.pie-svg{flex-shrink:0;}
.pie-legend{flex:1;display:flex;flex-direction:column;gap:10px;}
.pl-item{display:flex;align-items:center;gap:9px;}
.pl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pl-name{font-size:12px;font-weight:600;flex:1;color:var(--t1);}
.pl-val{font-size:11px;font-weight:800;font-family:'DM Mono',monospace;min-width:28px;text-align:right;}
.pl-pct{font-size:10px;color:var(--t3);min-width:30px;text-align:right;}
/* ── Heatmap ── */
.hm-wrap{display:flex;gap:4px;}
.hm-week{display:flex;flex-direction:column;gap:3px;}
.hm-cell{width:13px;height:13px;border-radius:3px;transition:transform 0.15s;cursor:default;position:relative;}
.hm-cell:hover{transform:scale(1.2);z-index:2;}
.hm-day-labels{display:flex;flex-direction:column;gap:3px;margin-right:4px;}
.hm-day-label{height:13px;font-size:8px;color:var(--t3);font-family:'DM Mono',monospace;display:flex;align-items:center;}
.hm-month-labels{display:flex;gap:4px;margin-bottom:4px;padding-left:0;}
.hm-month-label{font-size:9px;color:var(--t3);font-family:'DM Mono',monospace;}
/* ── Scene list ── */
.scene-row{display:flex;align-items:center;gap:10px;padding:9px 0;}
.scene-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.038);}
.scene-rank{font-size:11px;font-weight:800;font-family:'DM Mono',monospace;width:20px;flex-shrink:0;text-align:center;color:var(--t3);}
.scene-rank.top{color:var(--gold);}
.scene-name{font-size:12px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scene-bar-track{width:72px;height:4px;background:var(--s2);border-radius:100px;overflow:hidden;flex-shrink:0;}
.scene-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--gold),var(--gold2));animation:barFill 0.6s ease both;}
@keyframes barFill{from{width:0!important;}to{}}
.scene-count{font-size:11px;font-family:'DM Mono',monospace;color:var(--t2);min-width:28px;text-align:right;}
/* ── Country list ── */
.country-row{display:flex;align-items:center;gap:9px;padding:9px 0;}
.country-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.038);}
.country-flag{font-size:15px;width:22px;text-align:center;flex-shrink:0;}
.country-name{font-size:12px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.country-bar-track{width:52px;height:3px;background:var(--s2);border-radius:100px;overflow:hidden;flex-shrink:0;}
.country-bar-fill{height:100%;border-radius:100px;animation:barFill 0.6s ease both;}
.country-num{font-size:11px;font-family:'DM Mono',monospace;color:var(--t2);min-width:24px;text-align:right;}
.country-pct{font-size:10px;color:var(--t3);min-width:30px;text-align:right;}
/* ── Devices ── */
.device-row{display:flex;align-items:center;gap:10px;padding:9px 0;}
.device-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.038);}
.device-icon-wrap{width:32px;height:32px;border-radius:9px;background:var(--s1);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.device-info{flex:1;}
.device-name{font-size:12px;font-weight:600;margin-bottom:4px;}
.device-bar-track{height:3px;background:var(--s2);border-radius:100px;overflow:hidden;}
.device-bar-fill{height:100%;border-radius:100px;animation:barFill 0.6s ease both;}
.device-pct{font-size:14px;font-weight:800;font-family:'DM Mono',monospace;letter-spacing:-0.5px;min-width:36px;text-align:right;}
/* ── Toast ── */
.tz{position:fixed;bottom:24px;right:24px;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
@keyframes ci{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.ci{animation:ci 0.3s ease both;}
/* Analytics layout */
.row-213{display:grid;grid-template-columns:3fr 2fr 1.4fr;gap:16px;margin-bottom:16px;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.card{background:var(--s0);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:0;}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bd);background:rgba(0,0,0,0.15);}
.card-title{font-size:13px;font-weight:700;color:var(--t1);}
.card-sub{font-size:11px;color:var(--t3);font-family:'DM Mono',monospace;}
.card-body{padding:18px;}
.tour-sel{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--bd);border-radius:9px;padding:0 12px;height:34px;}
.tour-sel select{background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;font-family:inherit;font-weight:600;cursor:pointer;appearance:none;min-width:120px;}
.range-btns{display:flex;background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:3px;gap:2px;}
.rb{padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t3);font-family:inherit;transition:all 0.12s;}
.rb.on{background:var(--s2);color:var(--t1);}
.a-refresh-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--t2);font-family:inherit;transition:all 0.15s;}
.a-refresh-btn:hover{border-color:var(--bd2);color:var(--t1);}
.stat-val-unit{font-size:20px;font-weight:600;letter-spacing:-0.5px;}
.chart-outer{position:relative;padding-left:32px;padding-bottom:24px;}
.chart-y-axis{position:absolute;left:0;top:0;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-right:6px;}
.chart-y-label{font-size:9px;color:var(--t3);font-family:'DM Mono',monospace;line-height:1;}
.chart-grid-lines{position:absolute;left:32px;right:0;top:0;bottom:24px;pointer-events:none;}
.chart-grid-line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,0.04);}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:120px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;position:relative;}
.bar-col:hover .bar-tooltip{opacity:1;}
.bar{width:100%;border-radius:3px 3px 2px 2px;animation:barIn 0.4s cubic-bezier(0.34,1.2,0.64,1) both;transform-origin:bottom;}
@keyframes barIn{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.bar-spacer{flex:1;}
.bar-tooltip{position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);border:1px solid var(--bd2);border-radius:6px;padding:3px 8px;font-size:10px;font-weight:700;font-family:'DM Mono',monospace;white-space:nowrap;opacity:0;transition:opacity 0.15s;pointer-events:none;z-index:10;}
.bar-x-label{position:absolute;bottom:-20px;font-size:9px;color:var(--t3);font-family:'DM Mono',monospace;white-space:nowrap;left:50%;transform:translateX(-50%);}
.pie-container{display:flex;align-items:center;gap:20px;}
.pie-legend{flex:1;display:flex;flex-direction:column;gap:10px;}
.pl-item{display:flex;align-items:center;gap:9px;}
.pl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pl-name{font-size:12px;font-weight:600;flex:1;color:var(--t1);}
.pl-val{font-size:11px;font-weight:800;font-family:'DM Mono',monospace;min-width:28px;text-align:right;}
.pl-pct{font-size:10px;color:var(--t3);min-width:30px;text-align:right;}
.device-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.device-row:last-child{border-bottom:none;}
.device-icon-wrap{width:32px;height:32px;border-radius:9px;background:var(--s1);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.device-info{flex:1;}
.device-name{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:4px;}
.device-bar-track{height:3px;background:var(--s2);border-radius:100px;overflow:hidden;}
.device-bar-fill{height:100%;border-radius:100px;opacity:0.75;}
.device-pct{font-size:14px;font-weight:800;font-family:'DM Mono',monospace;min-width:36px;text-align:right;}
.scene-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.scene-row:last-child{border-bottom:none;}
.scene-rank{font-size:11px;font-weight:800;font-family:'DM Mono',monospace;width:20px;text-align:center;color:var(--t3);}
.scene-rank.top{color:var(--gold);}
.scene-name{font-size:12px;font-weight:600;flex:1;color:var(--t1);}
.scene-bar-track{width:72px;height:4px;background:var(--s2);border-radius:100px;overflow:hidden;}
.scene-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--gold),var(--gold2));animation:barFill 0.6s ease both;}
@keyframes barFill{from{width:0!important;}to{}}
.scene-count{font-size:11px;font-family:'DM Mono',monospace;color:var(--t2);min-width:28px;text-align:right;}
.country-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.country-row:last-child{border-bottom:none;}
.country-flag{font-size:15px;width:22px;text-align:center;flex-shrink:0;}
.country-name{font-size:12px;font-weight:600;flex:1;color:var(--t1);}
.country-bar-track{width:52px;height:3px;background:var(--s2);border-radius:100px;overflow:hidden;}
.country-bar-fill{height:100%;border-radius:100px;animation:barFill 0.6s ease both;}
.country-num{font-size:11px;font-family:'DM Mono',monospace;min-width:24px;text-align:right;}
.country-pct{font-size:10px;color:var(--t3);min-width:30px;text-align:right;}
.hm-wrap{display:flex;gap:4px;}
.hm-week{display:flex;flex-direction:column;gap:3px;}
.hm-cell{width:13px;height:13px;border-radius:3px;cursor:default;transition:transform 0.15s;}
.hm-cell:hover{transform:scale(1.2);position:relative;z-index:2;}
.hm-day-labels{display:flex;flex-direction:column;gap:3px;margin-right:4px;}
.hm-day-label{height:13px;font-size:8px;color:var(--t3);font-family:'DM Mono',monospace;display:flex;align-items:center;}
/* ── END ANALYTICS ── */
/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;max-width:940px;align-items:start;}
.right-col{position:sticky;top:0;}
/* ── Section label ── */
.sec-lbl{display:flex;align-items:center;gap:10px;margin-bottom:14px;margin-top:26px;}
.sec-lbl:first-child{margin-top:0;}
.sec-lbl-line{height:1px;width:18px;flex-shrink:0;}
.sec-lbl-text{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
/* ── Card ── */
.card{background:var(--s0);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:14px;}
.card:last-child{margin-bottom:0;}
.card-body{padding:20px;}
/* ── Avatar ── */
.ava-row{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--bd);}
.ava{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#7A5C0A);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#08080A;position:relative;cursor:pointer;flex-shrink:0;box-shadow:0 0 0 2px rgba(201,168,76,0.22),0 0 20px rgba(201,168,76,0.1);transition:box-shadow 0.2s;overflow:hidden;}
.ava:hover{box-shadow:0 0 0 2px rgba(201,168,76,0.45),0 0 28px rgba(201,168,76,0.2);}
.ava-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;}
.ava:hover .ava-overlay{opacity:1;}
.ava-edit{position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#8B6914);display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);}
.ava-meta{flex:1;}
.ava-name{font-size:15px;font-weight:700;letter-spacing:-0.3px;margin-bottom:3px;}
.ava-hint{font-size:11px;color:var(--t3);}
/* ── Fields ── */
.field{margin-bottom:13px;}
.field:last-child{margin-bottom:0;}
.fl{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:0.9px;text-transform:uppercase;margin-bottom:6px;display:block;}
.fi{width:100%;padding:10px 13px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-size:13px;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;outline:none;transition:border-color 0.14s;}
.fi:focus{border-color:var(--gold-b);}
.fi::placeholder{color:var(--t3);}
.fi[readonly]{color:var(--t2);cursor:default;opacity:0.65;}
/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.15s;border:none;font-family:inherit;letter-spacing:-0.1px;}
.btn:active{transform:scale(0.97);}
.btn-gold{background:linear-gradient(135deg,#C9A84C,#8B6914);color:#08080A;box-shadow:0 2px 12px rgba(201,168,76,0.2);}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,168,76,0.3);}
.btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--t2);}
.btn-ghost:hover{border-color:var(--bd2);color:var(--t1);background:var(--s1);}
.btn-full{width:100%;justify-content:center;}
.btn-danger{background:rgba(248,113,113,0.07);border:1px solid rgba(248,113,113,0.2);color:var(--red);}
.btn-danger:hover{background:rgba(248,113,113,0.14);border-color:rgba(248,113,113,0.35);}
/* ── Usage stats ── */
.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.ustat{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:16px;position:relative;overflow:hidden;transition:border-color 0.18s,transform 0.18s;}
.ustat:hover{border-color:var(--bd2);transform:translateY(-1px);}
.ustat-line{position:absolute;top:0;left:0;right:0;height:1px;}
.ustat-ghost{position:absolute;bottom:-8px;right:-4px;font-size:56px;font-weight:900;letter-spacing:-4px;opacity:0.04;pointer-events:none;font-family:'Cabinet Grotesk',sans-serif;transition:opacity 0.2s;}
.ustat:hover .ustat-ghost{opacity:0.07;}
.ustat-lbl{font-size:10px;color:var(--t3);letter-spacing:0.8px;text-transform:uppercase;font-weight:700;margin-bottom:10px;}
.ustat-val{font-size:22px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1;}
.ustat-val span{font-size:13px;font-weight:600;color:var(--t2);}
.ustat-sub{font-size:10px;color:var(--t3);margin-top:5px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.05);font-weight:500;}
.ustat-bar{height:3px;background:rgba(255,255,255,0.06);border-radius:100px;margin-top:8px;overflow:hidden;}
.ustat-bar-fill{height:100%;border-radius:100px;transition:width 0.8s cubic-bezier(0.34,1.2,0.64,1);}
/* ── Danger zone ── */
.danger-zone{background:rgba(248,113,113,0.04);border:1px solid rgba(248,113,113,0.14);border-radius:14px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.danger-info span{font-size:13px;font-weight:600;display:block;margin-bottom:4px;}
.danger-info small{font-size:11px;color:var(--t3);line-height:1.7;}
/* ── Plan card ── */
.plan-card{background:var(--s0);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:14px;position:relative;}
.plan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.5),transparent);}
.plan-body{padding:20px;}
.plan-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:100px;background:var(--glow);border:1px solid var(--gold-b);margin-bottom:14px;}
.plan-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(61,214,140,0.8);animation:blink 2.5s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.plan-badge-text{font-size:10px;font-weight:800;color:var(--green);letter-spacing:0.5px;}
.plan-name{font-size:22px;font-weight:900;letter-spacing:-1px;margin-bottom:4px;}
.plan-price{font-size:12px;color:var(--t3);font-family:'DM Mono',monospace;margin-bottom:16px;}
/* Expiry progress */
.expiry-box{background:rgba(0,0,0,0.2);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;margin-bottom:16px;}
.expiry-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.expiry-lbl{font-size:10px;color:var(--t3);font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.expiry-days{font-size:13px;font-weight:800;font-family:'DM Mono',monospace;color:var(--green);}
.expiry-bar{height:3px;background:rgba(255,255,255,0.06);border-radius:100px;overflow:hidden;}
.expiry-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--green),rgba(61,214,140,0.5));transition:width 0.8s ease;}
/* Plan features */
.plan-features{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;}
.pf{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:var(--t2);}
.pf svg{flex-shrink:0;color:var(--green);}
/* Security card */
.security-field{padding:14px 0;border-bottom:1px solid var(--bd);}
.security-field:first-child{padding-top:0;}
.security-field:last-child{border-bottom:none;padding-bottom:0;}
.sf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sf-info span{font-size:13px;font-weight:600;display:block;margin-bottom:2px;}
.sf-info small{font-size:11px;color:var(--t3);}
.sf-action{font-size:11px;font-weight:700;color:var(--gold);background:var(--glow);border:1px solid var(--gold-b);padding:5px 12px;border-radius:8px;cursor:pointer;transition:all 0.14s;white-space:nowrap;font-family:inherit;}
.sf-action:hover{background:rgba(201,168,76,0.2);}
.sf-action-danger{color:var(--red);background:rgba(248,113,113,0.07);border-color:rgba(248,113,113,0.2);}
.sf-action-danger:hover{background:rgba(248,113,113,0.14);border-color:rgba(248,113,113,0.35);}
/* ── Toast ── */
.tz{position:fixed;bottom:24px;right:24px;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
@keyframes ci{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.ci{animation:ci 0.3s ease both;}
/* Settings extra */
.s-card{background:var(--s0);border:1px solid var(--bd);border-radius:14px;padding:20px;margin-bottom:14px;}
.s-ava-row{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--bd);}
.s-ava{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#7A5512);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#08080A;position:relative;cursor:pointer;flex-shrink:0;box-shadow:0 0 0 2px rgba(201,168,76,0.22);overflow:hidden;transition:box-shadow 0.2s;}
.s-ava:hover{box-shadow:0 0 0 2px rgba(201,168,76,0.45);}
.s-ava-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;border-radius:50%;}
.s-ava:hover .s-ava-overlay{opacity:1;}
.s-ava-edit{position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#8B6914);display:flex;align-items:center;justify-content:center;border:2px solid var(--black);}
.s-field{margin-bottom:13px;}
.s-label{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:0.9px;text-transform:uppercase;margin-bottom:6px;display:block;}
.s-input{width:100%;padding:10px 13px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-size:13px;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;outline:none;transition:border-color 0.14s;}
.s-input:focus{border-color:rgba(201,168,76,0.3);}
.s-input::placeholder{color:var(--t3);}
.s-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.15s;border:none;font-family:inherit;}
.s-btn:active{transform:scale(0.97);}
.s-btn-gold{background:linear-gradient(135deg,#C9A84C,#8B6914);color:#08080A;box-shadow:0 2px 12px rgba(201,168,76,0.2);}
.s-btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px);}
.s-btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--t2);}
.s-btn-ghost:hover{border-color:var(--bd2);color:var(--t1);background:var(--s1);}
.s-btn-danger{background:rgba(248,113,113,0.07);border:1px solid rgba(248,113,113,0.2);color:var(--elRed);}
.s-btn-danger:hover{background:rgba(248,113,113,0.14);}
.s-usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.s-ustat{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:16px;position:relative;overflow:hidden;transition:border-color 0.18s;}
.s-ustat:hover{border-color:var(--bd2);}
.s-ustat-line{position:absolute;top:0;left:0;right:0;height:1px;}
.s-ustat-ghost{position:absolute;bottom:-8px;right:-4px;font-size:56px;font-weight:900;letter-spacing:-4px;opacity:0.04;pointer-events:none;font-family:'Cabinet Grotesk',sans-serif;}
.s-ustat-lbl{font-size:10px;color:var(--t3);letter-spacing:0.8px;text-transform:uppercase;font-weight:700;margin-bottom:10px;}
.s-ustat-val{font-size:22px;font-weight:800;letter-spacing:-1px;line-height:1;}
.s-ustat-sub{font-size:10px;color:var(--t3);margin-top:5px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.05);}
.s-ubar{height:3px;background:rgba(255,255,255,0.06);border-radius:100px;margin-top:8px;overflow:hidden;}
.s-ubar-fill{height:100%;border-radius:100px;}
.s-danger{background:rgba(248,113,113,0.04);border:1px solid rgba(248,113,113,0.14);border-radius:14px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
.s-plan-card{background:var(--s0);border:1px solid var(--bd);border-radius:16px;padding:20px;position:relative;overflow:hidden;margin-bottom:14px;}
.s-plan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.5),transparent);}
.s-plan-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:100px;background:var(--glow);border:1px solid rgba(201,168,76,0.2);margin-bottom:14px;}
.s-plan-dot{width:6px;height:6px;border-radius:50%;animation:blink 2.5s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.s-plan-name{font-size:22px;font-weight:900;letter-spacing:-1px;color:var(--t1);margin-bottom:4px;}
.s-plan-price{font-size:12px;color:var(--t3);font-family:'DM Mono',monospace;margin-bottom:16px;}
.s-expiry-box{background:rgba(0,0,0,0.2);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;margin-bottom:16px;}
.s-expiry-bar{height:3px;background:rgba(255,255,255,0.06);border-radius:100px;overflow:hidden;}
.s-expiry-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--elGreen),rgba(61,214,140,0.5));}
.s-plan-features{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;}
.s-pf{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:var(--t2);}
.s-security-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--bd);}
.s-security-row:first-child{padding-top:0;}
.s-sec-btn{font-size:11px;font-weight:700;color:var(--gold);background:var(--glow);border:1px solid rgba(201,168,76,0.2);padding:5px 12px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all 0.14s;white-space:nowrap;}
.s-sec-btn:hover{background:rgba(201,168,76,0.2);}
.s-sec-btn-danger{color:var(--elRed);background:rgba(248,113,113,0.12);border-color:rgba(248,113,113,0.35);}
.s-sec-btn-danger:hover{background:rgba(248,113,113,0.14);}
/* ── END SETTINGS ── */
/* LEADS */
/* ════ LEADS ════ */
.leads-wrap{max-width:1100px;}
.leads-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.ls{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;}
.ls-line{position:absolute;top:0;left:0;right:0;height:1px;}
.ls-ghost{position:absolute;bottom:-10px;right:-4px;font-size:72px;font-weight:900;letter-spacing:-6px;opacity:0.04;pointer-events:none;}
.ls-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(237,232,224,0.28);margin-bottom:12px;}
.ls-val{font-size:32px;font-weight:800;letter-spacing:-2px;line-height:1;}
.ls-sub{font-size:11px;color:rgba(237,232,224,0.35);margin-top:6px;}
.leads-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.07);border-radius:16px;overflow:hidden;}
.leads-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.06);}
.leads-card-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#EDE8E0;}
.lc-badge{background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.22);color:#C9A84C;font-size:10px;font-weight:800;padding:2px 8px;border-radius:100px;}
.leads-filters{display:flex;gap:4px;}
.lf{padding:5px 14px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid transparent;background:transparent;color:rgba(237,232,224,0.4);font-family:inherit;transition:all 0.14s;}
.lf:hover{color:#EDE8E0;border-color:rgba(255,255,255,0.1);}
.lf.on{background:rgba(255,255,255,0.08);color:#EDE8E0;border-color:rgba(255,255,255,0.14);}
.leads-table{width:100%;border-collapse:collapse;}
.leads-table th{padding:10px 14px;text-align:left;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(237,232,224,0.28);border-bottom:1px solid rgba(255,255,255,0.06);}
.lr{border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.14s;}
.lr:last-child{border-bottom:none;}
.lr:hover{background:rgba(255,255,255,0.02);}
.lr td{padding:12px 14px;font-size:13px;color:rgba(237,232,224,0.7);vertical-align:middle;}
.l-ava{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#08080A;flex-shrink:0;}
.l-name{font-size:13px;font-weight:700;color:#EDE8E0;line-height:1.3;}
.l-email{font-size:11px;color:rgba(237,232,224,0.35);margin-top:2px;}
.l-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:700;}
.lb-new{background:rgba(61,214,140,0.1);border:1px solid rgba(61,214,140,0.22);color:#3DD68C;}
.lb-contacted{background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.22);color:#C9A84C;}
.lb-converted{background:rgba(155,138,251,0.1);border:1px solid rgba(155,138,251,0.22);color:#9B8AFB;}
.l-badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 4px currentColor;}
.l-status-sel{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:5px 28px 5px 10px;color:#EDE8E0;font-size:12px;font-family:inherit;outline:none;cursor:pointer;appearance:none;}
.l-status-sel option{background:#0e0e12;}
.l-action{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(237,232,224,0.4);transition:all 0.14s;text-decoration:none;}
.l-action:hover{border-color:rgba(255,255,255,0.18);color:#EDE8E0;background:rgba(255,255,255,0.05);}
.l-action-del{border-color:rgba(248,113,113,0.15);color:rgba(248,113,113,0.4);}
.l-action-del:hover{border-color:rgba(248,113,113,0.4);color:#F87171;background:rgba(248,113,113,0.07);}
.leads-empty{padding:60px;text-align:center;color:rgba(237,232,224,0.3);}
/* ════ END LEADS ════ */
/* SUB */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--black:#08080A;
--gold:#C9A84C;
--gold2:#E8C96B;
--glow:rgba(201,168,76,0.14);
--s0:rgba(255,255,255,0.018);
--s1:rgba(255,255,255,0.04);
--s2:rgba(255,255,255,0.07);
--bd:rgba(255,255,255,0.08);
--bd2:rgba(255,255,255,0.14);
--t1:#EDE8E0;
--t2:rgba(237,232,224,0.55);
--t3:rgba(237,232,224,0.28);
--t4:rgba(237,232,224,0.12);
--green:#3DD68C;
--blue:#60A5FA;
--purple:#9B8AFB;
--red:#F87171;
}
body{
background:var(--black);
color:var(--t1);
font-family:'Cabinet Grotesk',sans-serif;
min-height:100vh;
padding:40px 32px;
overflow-x:hidden;
}
/* Chrome trim */
body::before{
content:'';
position:fixed;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,0.5) 30%,rgba(232,201,107,0.7) 50%,rgba(201,168,76,0.5) 70%,transparent);
z-index:100;
}
/* Background glow */
body::after{
content:'';
position:fixed;
top:-200px;left:50%;
transform:translateX(-50%);
width:800px;height:400px;
background:radial-gradient(ellipse,rgba(201,168,76,0.04) 0%,transparent 70%);
pointer-events:none;
z-index:0;
}
.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;}
/* Header */
.hdr{text-align:center;margin-bottom:40px;}
.hdr-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
color:var(--gold);
background:var(--glow);
border:1px solid rgba(201,168,76,0.2);
padding:5px 16px;border-radius:100px;
margin-bottom:18px;
}
.hdr-eyebrow span{width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);}
.hdr h1{
font-size:38px;font-weight:900;letter-spacing:-2px;
color:var(--t1);line-height:1.1;margin-bottom:12px;
}
.hdr h1 em{
font-style:normal;
background:linear-gradient(135deg,var(--gold2),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.hdr p{font-size:15px;color:var(--t2);max-width:480px;margin:0 auto;line-height:1.7;}
/* Toggle */
.toggle-wrap{
display:flex;align-items:center;justify-content:center;gap:14px;
margin-bottom:40px;
}
.tgl-lbl{font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;transition:color 0.2s;}
.tgl-lbl.on{color:var(--t1);}
.tgl-track{
width:52px;height:28px;border-radius:100px;
background:linear-gradient(135deg,var(--gold),#7A5512);
cursor:pointer;position:relative;
box-shadow:0 0 16px rgba(201,168,76,0.25);
border:1px solid rgba(201,168,76,0.3);
transition:all 0.2s;
}
.tgl-thumb{
position:absolute;top:3px;left:3px;
width:20px;height:20px;border-radius:50%;
background:#08080A;
transition:all 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.tgl-track.yearly .tgl-thumb{left:calc(100% - 23px);}
.save-badge{
background:rgba(61,214,140,0.12);
border:1px solid rgba(61,214,140,0.25);
color:var(--green);
font-size:10px;font-weight:800;
padding:2px 9px;border-radius:100px;
margin-left:6px;
}
/* Plans grid */
.plans{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-bottom:32px;
align-items:start;
}
/* Plan card */
.pc{
background:var(--s0);
border:1px solid var(--bd);
border-radius:18px;
padding:22px 18px 20px;
position:relative;
display:flex;flex-direction:column;
transition:all 0.22s;
animation:fadeUp 0.4s ease both;
}
.pc:hover{
border-color:var(--bd2);
transform:translateY(-4px);
box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(16px);}
to{opacity:1;transform:translateY(0);}
}
.pc:nth-child(1){animation-delay:0s;}
.pc:nth-child(2){animation-delay:0.05s;}
.pc:nth-child(3){animation-delay:0.1s;}
.pc:nth-child(4){animation-delay:0.15s;}
.pc:nth-child(5){animation-delay:0.2s;}
/* Popular card */
.pc.popular{
border-color:rgba(201,168,76,0.3);
background:linear-gradient(160deg,rgba(201,168,76,0.07) 0%,rgba(201,168,76,0.02) 50%,var(--s0) 100%);
transform:translateY(-6px);
box-shadow:0 0 0 1px rgba(201,168,76,0.15),0 24px 60px rgba(0,0,0,0.5);
}
.pc.popular:hover{transform:translateY(-10px);}
/* Current card */
.pc.current{
border-color:rgba(201,168,76,0.4);
}
/* Badges */
.pc-pop-badge{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#08080A;
font-size:9px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
padding:4px 14px;border-radius:100px;white-space:nowrap;
box-shadow:0 4px 14px rgba(201,168,76,0.35);
}
.pc-cur-badge{
position:absolute;top:-12px;right:14px;
background:var(--glow);
border:1px solid rgba(201,168,76,0.3);
color:var(--gold);
font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
padding:3px 10px;border-radius:100px;
}
/* Card content */
.pc-name{
font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
color:var(--gold);margin-bottom:16px;
}
.pc-price{
display:flex;align-items:flex-start;gap:2px;
margin-bottom:4px;
}
.pc-price-sym{
font-size:16px;font-weight:700;color:var(--t2);
margin-top:6px;
}
.pc-price-val{
font-size:40px;font-weight:900;letter-spacing:-3px;
color:var(--t1);line-height:1;
font-variant-numeric:tabular-nums;
transition:all 0.3s;
}
.popular .pc-price-val{
background:linear-gradient(135deg,var(--gold2),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.pc-period{
font-size:11px;color:var(--t3);
font-family:'DM Mono',monospace;
margin-bottom:18px;min-height:16px;
transition:all 0.3s;
}
.pc-divider{height:1px;background:var(--bd);margin-bottom:16px;}
.pc-feats{flex:1;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.pc-feat{
display:flex;align-items:flex-start;gap:8px;
font-size:11.5px;color:var(--t2);line-height:1.4;
}
.pc-feat svg{flex-shrink:0;margin-top:1px;color:var(--green);}
.popular .pc-feat{color:var(--t1);}
/* Buttons */
.pc-btn{
width:100%;padding:10px 16px;border-radius:11px;
font-size:12px;font-weight:700;
cursor:pointer;transition:all 0.15s;
font-family:'Cabinet Grotesk',sans-serif;
border:none;display:flex;align-items:center;justify-content:center;gap:7px;
}
.pc-btn:active{transform:scale(0.97);}
.pc-btn-current{
background:var(--glow);
border:1px solid rgba(201,168,76,0.25);
color:var(--gold);
cursor:default;
}
.pc-btn-upgrade{
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#08080A;
box-shadow:0 2px 14px rgba(201,168,76,0.2);
}
.pc-btn-upgrade:hover{
filter:brightness(1.08);
transform:translateY(-1px);
box-shadow:0 6px 20px rgba(201,168,76,0.35);
}
.pc-btn-free{
background:var(--s1);
border:1px solid var(--bd);
color:var(--t3);
}
.pc-btn-popular{
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#08080A;
box-shadow:0 4px 20px rgba(201,168,76,0.3);
}
.pc-btn-popular:hover{
filter:brightness(1.1);
transform:translateY(-1px);
box-shadow:0 8px 28px rgba(201,168,76,0.4);
}
/* Bottom note */
.sub-note{
display:flex;align-items:center;justify-content:center;gap:24px;
padding:18px 24px;
background:var(--s0);
border:1px solid var(--bd);
border-radius:14px;
flex-wrap:wrap;
}
.sub-note-item{
display:flex;align-items:center;gap:8px;
font-size:12px;color:var(--t2);
}
.sub-note-item svg{color:var(--green);flex-shrink:0;}
.sub-note-item b{color:var(--t1);}
.sub-note-sep{width:1px;height:16px;background:var(--bd);}
/* FAQ */
.faq{margin-top:40px;}
.faq-title{
font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
color:var(--t3);margin-bottom:16px;
display:flex;align-items:center;gap:10px;
}
.faq-title::after{content:'';flex:1;height:1px;background:var(--bd);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.faq-item{
background:var(--s0);border:1px solid var(--bd);border-radius:12px;
padding:16px 18px;cursor:pointer;transition:border-color 0.15s;
}
.faq-item:hover{border-color:var(--bd2);}
.faq-q{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;}
.faq-a{font-size:12px;color:var(--t3);line-height:1.7;display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-chevron{transition:transform 0.2s;color:var(--t3);flex-shrink:0;}
/* END SUB */
/* MY CARD */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--black:#08080A;--gold:#C9A84C;--gold2:#E8C96B;
--glow:rgba(201,168,76,0.1);--glow2:rgba(201,168,76,0.2);
--s0:rgba(255,255,255,0.016);--s1:rgba(255,255,255,0.038);--s2:rgba(255,255,255,0.065);
--bd:rgba(255,255,255,0.075);--bd2:rgba(255,255,255,0.13);
--t1:#EDE8E0;--t2:rgba(237,232,224,0.52);--t3:rgba(237,232,224,0.26);--t4:rgba(237,232,224,0.1);
--green:#3DD68C;--blue:#60A5FA;--purple:#9B8AFB;--red:#F87171;
}
body{background:var(--black);color:var(--t1);font-family:'Cabinet Grotesk',sans-serif;min-height:100vh;padding:32px;overflow-x:hidden;}
body::before{content:'';position:fixed;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.45) 25%,rgba(232,201,107,0.65) 50%,rgba(201,168,76,0.45) 75%,transparent);z-index:9999;pointer-events:none;}
.bg-glow{position:fixed;top:-300px;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(ellipse,rgba(201,168,76,0.03) 0%,transparent 65%);pointer-events:none;z-index:0;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.93);}to{opacity:1;transform:scale(1);}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.fade-up{animation:fadeUp 0.4s ease both;}
.d1{animation-delay:0.05s;}.d2{animation-delay:0.1s;}.d3{animation-delay:0.15s;}.d4{animation-delay:0.2s;}.d5{animation-delay:0.25s;}
.mc-wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;}
.mc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.mc-stat{background:var(--s0);border:1px solid var(--bd);border-radius:16px;padding:20px;position:relative;overflow:hidden;transition:border-color 0.2s,transform 0.2s;}
.mc-stat:hover{border-color:var(--bd2);transform:translateY(-2px);}
.mc-stat-glow{position:absolute;top:0;left:0;right:0;height:1px;}
.mc-stat-ghost{position:absolute;bottom:-14px;right:-6px;font-size:80px;font-weight:900;letter-spacing:-6px;opacity:0.035;pointer-events:none;line-height:1;}
.mc-stat-lbl{font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--t3);margin-bottom:12px;}
.mc-stat-val{font-size:30px;font-weight:900;letter-spacing:-1.5px;line-height:1;}
.mc-stat-sub{font-size:11px;color:var(--t4);margin-top:6px;font-family:'DM Mono',monospace;}
.mc-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.mc-section{background:var(--s0);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:14px;transition:border-color 0.2s;}
.mc-section:hover{border-color:var(--bd2);}
.mc-section:last-of-type{margin-bottom:0;}
.mc-sh{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--bd);background:rgba(0,0,0,0.18);}
.mc-shi{width:28px;height:28px;border-radius:8px;background:var(--glow);border:1px solid var(--glow2);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0;}
.mc-st{font-size:12px;font-weight:700;color:var(--t1);}
.mc-sb{padding:18px;}
.mc-url-box{display:flex;align-items:center;background:rgba(201,168,76,0.055);border:1px solid rgba(201,168,76,0.16);border-radius:10px;padding:9px 14px;margin-bottom:14px;gap:10px;}
.mc-url-text{flex:1;font-size:11.5px;font-family:'DM Mono',monospace;color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-url-copy{padding:4px 12px;border-radius:7px;background:var(--glow);border:1px solid var(--glow2);color:var(--gold);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.14s;white-space:nowrap;}
.mc-url-copy:hover{background:var(--glow2);}
.mc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mc-field{margin-bottom:13px;}
.mc-field:last-child{margin-bottom:0;}
.mc-lbl{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:6px;display:block;}
.mc-inp{width:100%;padding:10px 13px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-size:13px;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;outline:none;transition:border-color 0.15s,background 0.15s;}
.mc-inp:focus{border-color:rgba(201,168,76,0.3);background:var(--s2);}
.mc-inp::placeholder{color:var(--t4);}
.mc-ta{resize:vertical;min-height:72px;line-height:1.6;}
.mc-iw{display:flex;align-items:center;background:var(--s1);border:1px solid var(--bd);border-radius:10px;overflow:hidden;transition:border-color 0.15s,background 0.15s;}
.mc-iw:focus-within{border-color:rgba(201,168,76,0.3);background:var(--s2);}
.mc-ipfx{padding:10px 12px;font-size:11.5px;color:var(--t3);font-family:'DM Mono',monospace;border-right:1px solid var(--bd);background:rgba(0,0,0,0.2);white-space:nowrap;flex-shrink:0;}
.mc-iw input{flex:1;padding:10px 13px;background:transparent;border:none;outline:none;color:var(--t1);font-size:13px;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;min-width:0;}
.mc-prow{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--bd);}
.mc-photo{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#7A5512);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#08080A;flex-shrink:0;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 0 0 2px rgba(201,168,76,0.2),0 4px 16px rgba(0,0,0,0.4);transition:box-shadow 0.2s;}
.mc-photo:hover{box-shadow:0 0 0 3px rgba(201,168,76,0.4),0 4px 20px rgba(0,0,0,0.5);}
.mc-pov{position:absolute;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;border-radius:50%;}
.mc-photo:hover .mc-pov{opacity:1;}
.mc-pinfo{font-size:11px;color:var(--t3);line-height:1.8;}
.mc-pinfo strong{display:block;font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px;}
.mc-sg{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mc-si{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:9px 12px;transition:border-color 0.15s;}
.mc-si:focus-within{border-color:rgba(201,168,76,0.3);}
.mc-sic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mc-si input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;min-width:0;}
.mc-si input::placeholder{color:var(--t4);}
.mc-tr{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--bd);cursor:pointer;transition:opacity 0.14s;}
.mc-tr:last-child{border-bottom:none;padding-bottom:0;}
.mc-tr:hover{opacity:0.85;}
.mc-ti{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px;}
.mc-ts{font-size:11px;color:var(--t3);}
.mc-tgl{width:40px;height:22px;border-radius:100px;cursor:pointer;position:relative;flex-shrink:0;transition:all 0.2s;}
.mc-tgl.on{background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 0 10px rgba(201,168,76,0.28);}
.mc-tgl.off{background:var(--s2);border:1px solid var(--bd);}
.mc-tk{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;background:#EDE8E0;transition:all 0.28s cubic-bezier(0.34,1.2,0.64,1);box-shadow:0 1px 4px rgba(0,0,0,0.4);}
.mc-tgl.on .mc-tk{left:calc(100% - 20px);}
.mc-tgl.off .mc-tk{left:2px;}
.mc-save{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;border-radius:13px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#08080A;font-size:14px;font-weight:800;border:none;cursor:pointer;font-family:inherit;transition:all 0.18s;box-shadow:0 4px 20px rgba(201,168,76,0.22);margin-top:14px;letter-spacing:-0.3px;}
.mc-save:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 32px rgba(201,168,76,0.35);}
.mc-save:active{transform:scale(0.98);}
.mc-pcol{position:sticky;top:24px;}
.mc-plbl{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t4);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.mc-plbl::after{content:'';flex:1;height:1px;background:var(--bd);}
.mc-ldot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);display:inline-block;margin-right:2px;animation:pulse 2s ease-in-out infinite;}
.mc-cv{border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#141418 0%,#0E0E12 60%,#0A0A0D 100%);border:1px solid var(--bd);box-shadow:0 0 0 1px rgba(255,255,255,0.03),0 32px 80px rgba(0,0,0,0.7),0 0 60px rgba(201,168,76,0.03);animation:scaleIn 0.4s ease both;}
.mc-ch{padding:28px 24px 22px;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(201,168,76,0.1) 0%,rgba(201,168,76,0.03) 40%,transparent 100%);border-bottom:1px solid rgba(201,168,76,0.1);}
.mc-chg{position:absolute;top:-80px;right:-80px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,0.08),transparent 70%);pointer-events:none;}
.mc-chl{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.35),transparent);}
.mc-chgr{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.03) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;mask-image:radial-gradient(ellipse at 60% 40%,black 20%,transparent 80%);}
.mc-caw{position:relative;display:inline-block;margin-bottom:16px;}
.mc-ca{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#C9A84C,#7A5512);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#08080A;overflow:hidden;box-shadow:0 0 0 3px rgba(201,168,76,0.18),0 0 0 6px rgba(201,168,76,0.06),0 8px 24px rgba(0,0,0,0.5);}
.mc-ca img{width:100%;height:100%;object-fit:cover;}
.mc-cstat{position:absolute;bottom:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid #0E0E12;box-shadow:0 0 8px rgba(61,214,140,0.6);}
.mc-cn{font-size:18px;font-weight:900;letter-spacing:-0.8px;color:var(--t1);margin-bottom:3px;}
.mc-ct{font-size:12px;font-weight:600;color:var(--gold);margin-bottom:4px;min-height:16px;}
.mc-cc{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--t2);margin-bottom:10px;}
.mc-cbio{font-size:11.5px;color:var(--t3);line-height:1.75;max-width:90%;}
.mc-cb{padding:0 24px 20px;}
.mc-cs{padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.mc-cs:last-child{border-bottom:none;padding-bottom:0;}
.mc-csl{font-size:8.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t4);margin-bottom:10px;}
.mc-ccts{display:flex;flex-direction:column;gap:7px;}
.mc-cct{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s1);border:1px solid var(--bd);border-radius:11px;text-decoration:none;transition:all 0.15s;cursor:pointer;}
.mc-cct:hover{border-color:var(--bd2);background:var(--s2);transform:translateX(2px);}
.mc-ccti{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mc-cctxt{font-size:11.5px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.mc-cctar{color:var(--t4);flex-shrink:0;}
.mc-css{display:flex;gap:8px;flex-wrap:wrap;}
.mc-csoc{width:34px;height:34px;border-radius:10px;background:var(--s1);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.14s;}
.mc-csoc:hover{border-color:var(--bd2);background:var(--s2);transform:translateY(-1px);}
.mc-cts{display:flex;flex-direction:column;gap:6px;}
.mc-ctour{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s1);border:1px solid var(--bd);border-radius:11px;cursor:pointer;transition:all 0.15s;}
.mc-ctour:hover{border-color:rgba(201,168,76,0.2);background:rgba(201,168,76,0.04);transform:translateX(2px);}
.mc-ctd{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);flex-shrink:0;}
.mc-ctn{font-size:11.5px;font-weight:600;color:var(--t1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-cbr{text-align:center;padding:10px 24px 14px;font-size:9.5px;color:var(--t4);font-family:'DM Mono',monospace;border-top:1px solid rgba(255,255,255,0.04);}
.mc-cbr b{color:var(--gold);font-weight:600;}
.mc-ob{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border-radius:12px;background:var(--s1);border:1px solid var(--bd);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.15s;margin-top:10px;text-decoration:none;}
.mc-ob:hover{border-color:var(--bd2);color:var(--t1);}
.mc-lb{margin-left:auto;display:none;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--green);background:rgba(61,214,140,0.08);border:1px solid rgba(61,214,140,0.18);padding:2px 10px;border-radius:100px;}
.mc-lb.on{display:flex;}
/* END MY CARD */
/* SUBSCRIPTION */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--black:#08080A;
--gold:#C9A84C;
--gold2:#E8C96B;
--glow:rgba(201,168,76,0.14);
--s0:rgba(255,255,255,0.018);
--s1:rgba(255,255,255,0.04);
--s2:rgba(255,255,255,0.07);
--bd:rgba(255,255,255,0.08);
--bd2:rgba(255,255,255,0.14);
--t1:#EDE8E0;
--t2:rgba(237,232,224,0.55);
--t3:rgba(237,232,224,0.28);
--t4:rgba(237,232,224,0.12);
--green:#3DD68C;
--blue:#60A5FA;
--purple:#9B8AFB;
--red:#F87171;
}
body{
background:var(--black);
color:var(--t1);
font-family:'Cabinet Grotesk',sans-serif;
min-height:100vh;
padding:40px 32px;
overflow-x:hidden;
}
/* Chrome trim */
body::before{
content:'';
position:fixed;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,0.5) 30%,rgba(232,201,107,0.7) 50%,rgba(201,168,76,0.5) 70%,transparent);
z-index:100;
}
/* Background glow */
body::after{
content:'';
position:fixed;
top:-200px;left:50%;
transform:translateX(-50%);
width:800px;height:400px;
background:radial-gradient(ellipse,rgba(201,168,76,0.04) 0%,transparent 70%);
pointer-events:none;
z-index:0;
}
.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;}
/* Header */
.hdr{text-align:center;margin-bottom:40px;}
.hdr-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
color:var(--gold);
background:var(--glow);
border:1px solid rgba(201,168,76,0.2);
padding:5px 16px;border-radius:100px;
margin-bottom:18px;
}
.hdr-eyebrow span{width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);}
.hdr h1{
font-size:38px;font-weight:900;letter-spacing:-2px;
color:var(--t1);line-height:1.1;margin-bottom:12px;
}
.hdr h1 em{
font-style:normal;
background:linear-gradient(135deg,var(--gold2),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.hdr p{font-size:15px;color:var(--t2);max-width:480px;margin:0 auto;line-height:1.7;}
/* Toggle */
.toggle-wrap{
display:flex;align-items:center;justify-content:center;gap:14px;
margin-bottom:40px;
}
.tgl-lbl{font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;transition:color 0.2s;}
.tgl-lbl.on{color:var(--t1);}
.tgl-track{
width:52px;height:28px;border-radius:100px;
background:linear-gradient(135deg,var(--gold),#7A5512);
cursor:pointer;position:relative;
box-shadow:0 0 16px rgba(201,168,76,0.25);
border:1px solid rgba(201,168,76,0.3);
transition:all 0.2s;
}
.tgl-thumb{
position:absolute;top:3px;left:3px;
width:20px;height:20px;border-radius:50%;
background:#08080A;
transition:all 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.tgl-track.yearly .tgl-thumb{left:calc(100% - 23px);}
.save-badge{
background:rgba(61,214,140,0.12);
border:1px solid rgba(61,214,140,0.25);
color:var(--green);
font-size:10px;font-weight:800;
padding:2px 9px;border-radius:100px;
margin-left:6px;
}
/* Plans grid */
.plans{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-bottom:32px;
align-items:start;
}
/* Plan card */
.pc{
background:var(--s0);
border:1px solid var(--bd);
border-radius:18px;
padding:22px 18px 20px;
position:relative;
display:flex;flex-direction:column;
transition:all 0.22s;
animation:fadeUp 0.4s ease both;
}
.pc:hover{
border-color:var(--bd2);
transform:translateY(-4px);
box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(16px);}
to{opacity:1;transform:translateY(0);}
}
.pc:nth-child(1){animation-delay:0s;}
.pc:nth-child(2){animation-delay:0.05s;}
.pc:nth-child(3){animation-delay:0.1s;}
.pc:nth-child(4){animation-delay:0.15s;}
.pc:nth-child(5){animation-delay:0.2s;}
/* Popular card */
.pc.popular{
border-color:rgba(201,168,76,0.3);
background:linear-gradient(160deg,rgba(201,168,76,0.07) 0%,rgba(201,168,76,0.02) 50%,var(--s0) 100%);
transform:translateY(-6px);
box-shadow:0 0 0 1px rgba(201,168,76,0.15),0 24px 60px rgba(0,0,0,0.5);
}
.pc.popular:hover{transform:translateY(-10px);}
/* Current card */
.pc.current{
border-color:rgba(201,168,76,0.4);
}
/* Badges */
.pc-pop-badge{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#08080A;
font-size:9px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
padding:4px 14px;border-radius:100px;white-space:nowrap;
box-shadow:0 4px 14px rgba(201,168,76,0.35);
}
.pc-cur-badge{
position:absolute;top:-12px;right:14px;
background:var(--glow);
border:1px solid rgba(201,168,76,0.3);
color:var(--gold);
font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
padding:3px 10px;border-radius:100px;
}
/* Card content */
.pc-name{
font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
color:var(--gold);margin-bottom:16px;
}
.pc-price{
display:flex;align-items:flex-start;gap:2px;
margin-bottom:4px;
}
.pc-price-sym{
font-size:16px;font-weight:700;color:var(--t2);
margin-top:6px;
}
.pc-price-val{
font-size:40px;font-weight:900;letter-spacing:-3px;
color:var(--t1);line-height:1;
font-variant-numeric:tabular-nums;
transition:all 0.3s;
}
.popular .pc-price-val{
background:linear-gradient(135deg,var(--gold2),var(--gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.pc-period{
font-size:11px;color:var(--t3);
font-family:'DM Mono',monospace;
margin-bottom:18px;min-height:16px;
transition:all 0.3s;
}
.pc-divider{height:1px;background:var(--bd);margin-bottom:16px;}
.pc-feats{flex:1;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.pc-feat{
display:flex;align-items:flex-start;gap:8px;
font-size:11.5px;color:var(--t2);line-height:1.4;
}
.pc-feat svg{flex-shrink:0;margin-top:1px;color:var(--green);}
.popular .pc-feat{color:var(--t1);}
/* Buttons */
.pc-btn{
width:100%;padding:10px 16px;border-radius:11px;
font-size:12px;font-weight:700;
cursor:pointer;transition:all 0.15s;
font-family:'Cabinet Grotesk',sans-serif;
border:none;display:flex;align-items:center;justify-content:center;gap:7px;
}
.pc-btn:active{transform:scale(0.97);}
.pc-btn-current{
background:var(--glow);
border:1px solid rgba(201,168,76,0.25);
color:var(--gold);
cursor:default;
}
.pc-btn-upgrade{
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#08080A;
box-shadow:0 2px 14px rgba(201,168,76,0.2);
}
.pc-btn-upgrade:hover{
filter:brightness(1.08);
transform:translateY(-1px);
box-shadow:0 6px 20px rgba(201,168,76,0.35);
}
.pc-btn-free{
background:var(--s1);
border:1px solid var(--bd);
color:var(--t3);
}
.pc-btn-popular{
background:linear-gradient(135deg,var(--gold2),var(--gold));
color:#08080A;
box-shadow:0 4px 20px rgba(201,168,76,0.3);
}
.pc-btn-popular:hover{
filter:brightness(1.1);
transform:translateY(-1px);
box-shadow:0 8px 28px rgba(201,168,76,0.4);
}
/* Bottom note */
.sub-note{
display:flex;align-items:center;justify-content:center;gap:24px;
padding:18px 24px;
background:var(--s0);
border:1px solid var(--bd);
border-radius:14px;
flex-wrap:wrap;
}
.sub-note-item{
display:flex;align-items:center;gap:8px;
font-size:12px;color:var(--t2);
}
.sub-note-item svg{color:var(--green);flex-shrink:0;}
.sub-note-item b{color:var(--t1);}
.sub-note-sep{width:1px;height:16px;background:var(--bd);}
/* FAQ */
.faq{margin-top:40px;}
.faq-title{
font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
color:var(--t3);margin-bottom:16px;
display:flex;align-items:center;gap:10px;
}
.faq-title::after{content:'';flex:1;height:1px;background:var(--bd);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.faq-item{
background:var(--s0);border:1px solid var(--bd);border-radius:12px;
padding:16px 18px;cursor:pointer;transition:border-color 0.15s;
}
.faq-item:hover{border-color:var(--bd2);}
.faq-q{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;}
.faq-a{font-size:12px;color:var(--t3);line-height:1.7;display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-chevron{transition:transform 0.2s;color:var(--t3);flex-shrink:0;}
/* END SUBSCRIPTION */
/* ── THUMBNAIL CONTROLS ── */
.tc-cam-btn{position:absolute;bottom:50px;left:10px;z-index:5;width:32px;height:32px;border-radius:50%;background:rgba(8,8,10,0.75);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.18s;color:rgba(237,232,224,0.7);opacity:0;}
.tc:hover .tc-cam-btn{opacity:1;}
.tc-cam-btn:hover{background:rgba(201,168,76,0.25);border-color:rgba(201,168,76,0.5);color:var(--gold);transform:scale(1.1);}
.tc-rem-btn{position:absolute;top:8px;right:8px;z-index:7;width:22px;height:22px;border-radius:50%;background:rgba(248,113,113,0.15);backdrop-filter:blur(8px);border:1px solid rgba(248,113,113,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.18s;color:#F87171;opacity:0;}
.tc:hover .tc-rem-btn{opacity:1;}
.tc-rem-btn:hover{background:rgba(248,113,113,0.4);transform:scale(1.12);}
/* ── EDITABLE NAME ── */
.tc-name-wrap{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
.tc-name-edit{flex:1;background:transparent;border:none;outline:none;color:#EDE8E0;font-size:14px;font-weight:700;letter-spacing:-0.3px;font-family:'Cabinet Grotesk',sans-serif;cursor:pointer;padding:2px 4px;border-radius:5px;transition:background 0.15s;}
.tc-name-edit:hover{background:rgba(255,255,255,0.05);}
.tc-name-edit:focus{background:rgba(201,168,76,0.08);border:1px solid rgba(201,168,76,0.25);cursor:text;padding:2px 4px;}
.tc-name-save{display:none;padding:3px 10px;border-radius:6px;background:linear-gradient(135deg,#C9A84C,#8B6914);color:#08080A;font-size:10px;font-weight:800;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;}
.tc-name-edit:focus~.tc-name-save,.tc-name-edit:focus + .tc-name-save{display:block;}
/* ── PUBLISH BUTTON ── */
#btnPublish.is-live{background:rgba(61,214,140,0.1);border-color:rgba(61,214,140,0.25) !important;color:#3DD68C;}
#btnPublish.is-live:hover{background:rgba(61,214,140,0.16);}
#btnPublish.is-unpub{background:rgba(248,113,113,0.07);border-color:rgba(248,113,113,0.2) !important;color:#F87171;}
#btnPublish.is-unpub:hover{background:rgba(248,113,113,0.12);}
#page-builder.active{display:flex !important;}
/* ── Builder panel scrollbars ── */
.scenes-panel::-webkit-scrollbar,.props-panel::-webkit-scrollbar{width:3px;}
.scenes-panel::-webkit-scrollbar-track,.props-panel::-webkit-scrollbar-track{background:transparent;}
.scenes-panel::-webkit-scrollbar-thumb,.props-panel::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.25);border-radius:100px;}
.scenes-panel::-webkit-scrollbar-thumb:hover,.props-panel::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,0.45);}
.scenes-list::-webkit-scrollbar{width:3px;}
.scenes-list::-webkit-scrollbar-track{background:transparent;}
.scenes-list::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.25);border-radius:100px;}
.scenes-list::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,0.45);}
/* Props panel scroll wrapper */
.props-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:60px;}
.props-scroll::-webkit-scrollbar{width:3px;}
.props-scroll::-webkit-scrollbar-track{background:transparent;}
.props-scroll::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.25);border-radius:100px;}
.props-scroll::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,0.45);}
/* Bottom left panel accordion scrollbar */
.scenes-panel > div:last-child::-webkit-scrollbar{width:3px;}
.scenes-panel > div:last-child::-webkit-scrollbar-track{background:transparent;}
.scenes-panel > div:last-child::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.25);border-radius:100px;}
/* ══ AUTH ELITE ══ */
#page-login,#page-signup,#page-forgot,#page-newpass{align-items:center;justify-content:center;background:#06060A;position:relative;overflow:hidden;min-height:100%;}
#page-login::before,#page-signup::before,#page-forgot::before{content:'';position:fixed;top:-300px;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse,rgba(201,168,76,0.055) 0%,transparent 60%);pointer-events:none;z-index:0;}
.auth-grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(201,168,76,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.025) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 0%,transparent 100%);pointer-events:none;z-index:0;}
.auth-box{position:relative;z-index:1;width:100%;max-width:420px;background:rgba(12,12,16,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:42px 40px;box-shadow:0 0 0 1px rgba(201,168,76,0.05),0 40px 120px rgba(0,0,0,0.8),0 0 80px rgba(201,168,76,0.03);margin:auto 20px;animation:popIn 0.45s cubic-bezier(0.34,1.3,0.64,1) both;backdrop-filter:blur(32px);}
.auth-box::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.6),transparent);border-radius:24px 24px 0 0;}
.auth-logo-row{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:30px;}
.auth-logo-icon{width:42px;height:42px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(201,168,76,0.25),0 4px 20px rgba(201,168,76,0.12);flex-shrink:0;}
.auth-logo-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.auth-logo-text{font-size:19px;font-weight:900;letter-spacing:-0.5px;color:#EDE8E0;font-family:'Cabinet Grotesk',sans-serif;}
.auth-logo-text b{color:var(--gold);}
.auth-title{font-size:24px;font-weight:900;letter-spacing:-1px;color:#EDE8E0;text-align:center;margin-bottom:7px;font-family:'Cabinet Grotesk',sans-serif;}
.auth-sub{font-size:13px;color:rgba(237,232,224,0.38);text-align:center;margin-bottom:28px;font-weight:500;line-height:1.5;}
.auth-field{margin-bottom:14px;}
.auth-field label{display:block;font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:rgba(237,232,224,0.3);margin-bottom:7px;}
.auth-field input{width:100%;padding:12px 15px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;color:#EDE8E0;font-size:13px;font-family:'Cabinet Grotesk',sans-serif;font-weight:500;outline:none;transition:border-color 0.15s,background 0.15s;box-sizing:border-box;}
.auth-field input:focus{border-color:rgba(201,168,76,0.38);background:rgba(255,255,255,0.06);}
.auth-field input::placeholder{color:rgba(237,232,224,0.18);}
.auth-pw-wrap{position:relative;}
.auth-pw-wrap input{padding-right:44px;}
.auth-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:rgba(237,232,224,0.25);padding:4px;transition:color 0.15s;}
.auth-eye:hover{color:rgba(237,232,224,0.6);}
.auth-eye svg{width:16px;height:16px;display:block;}
.auth-btn-primary{width:100%;padding:13px;border-radius:13px;background:linear-gradient(135deg,#E8C96B,#C9A84C);color:#08080A;font-size:14px;font-weight:800;border:none;cursor:pointer;font-family:'Cabinet Grotesk',sans-serif;transition:all 0.18s;box-shadow:0 4px 20px rgba(201,168,76,0.25);margin-bottom:10px;letter-spacing:-0.3px;}
.auth-btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 8px 32px rgba(201,168,76,0.38);}
.auth-btn-primary:active{transform:scale(0.98);}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:rgba(237,232,224,0.18);font-size:11px;font-weight:600;letter-spacing:0.5px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07);}
.auth-btn-google{width:100%;padding:12px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:#EDE8E0;font-size:13px;font-weight:600;cursor:pointer;font-family:'Cabinet Grotesk',sans-serif;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;}
.auth-btn-google:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.16);}
.auth-footer{text-align:center;font-size:13px;color:rgba(237,232,224,0.35);line-height:1.6;}
.auth-footer a,.auth-link{color:var(--gold);cursor:pointer;font-weight:700;text-decoration:none;transition:opacity 0.15s;}
.auth-footer a:hover,.auth-link:hover{opacity:0.8;}
.auth-forgot{text-align:right;margin-top:4px;margin-bottom:16px;}
.auth-forgot a{font-size:12px;color:rgba(237,232,224,0.35);cursor:pointer;transition:color 0.15s;}
.auth-forgot a:hover{color:var(--gold);}
.auth-demo{text-align:center;margin-top:14px;}
.auth-demo a{font-size:12px;color:rgba(237,232,224,0.25);cursor:pointer;transition:color 0.15s;display:inline-flex;align-items:center;gap:5px;}
.auth-demo a:hover{color:rgba(237,232,224,0.6);}
/* ══ END AUTH ══ */
/* ═══════════════════════════════════
MOBILE RESPONSIVE - MAX 768px
═══════════════════════════════════ */
/* Force mobile viewport scaling */
@media(max-width:768px){
html{
width:100vw;
overflow-x:hidden;
}
body{
width:100vw;
overflow-x:hidden;
min-height:100vh;
min-height:-webkit-fill-available;
}
}
@media(max-width:768px){
html,body{overscroll-behavior:none;-webkit-overflow-scrolling:touch;}
.sidebar,.scenes-panel,.props-panel{display:none!important;}
:root{--main-ml:0px;}
.main{margin-left:0!important;width:100vw!important;max-width:100vw!important;overflow-x:hidden!important;}
#page-dashboard{overflow-x:hidden!important;}
#bottom-nav{display:flex!important;}
/* Topbar */
.topbar{height:auto!important;padding:10px 12px!important;gap:8px!important;flex-wrap:nowrap!important;overflow:hidden!important;}
.topbar-left{flex-shrink:0!important;min-width:0!important;}
.page-title,#tabTitle{font-size:18px!important;font-weight:800!important;letter-spacing:-0.5px!important;white-space:nowrap!important;}
#tabSubtitle{font-size:10px!important;white-space:nowrap!important;}
#tbSearchWrap{display:none!important;}
#tbViewToggle{display:none!important;}
#btnNewTour{padding:7px 12px!important;font-size:11px!important;white-space:nowrap!important;flex-shrink:0!important;}
/* Content */
.content{padding:10px 10px 120px!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;}
/* Filter */
.filter-bar{gap:7px!important;overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;}
.filter-bar::-webkit-scrollbar{display:none!important;}
.sort-wrap{display:none!important;}
.fb-divider{display:none!important;}
.fb{padding:7px 16px!important;font-size:12px!important;font-weight:600!important;white-space:nowrap!important;flex-shrink:0!important;}
/* Tour cards */
.grid{grid-template-columns:1fr!important;gap:12px!important;width:100%!important;}
.tc{border-radius:16px!important;width:100%!important;}
.tc-thumb{height:200px!important;}
.tc-body{padding:12px 14px!important;}
.tc-client{font-size:10px!important;text-transform:uppercase!important;letter-spacing:0.5px!important;}
.tc-name-edit{font-size:16px!important;font-weight:700!important;letter-spacing:-0.3px!important;width:100%!important;}
.tc-name-save{display:none!important;}
.tc-stat-val{font-size:15px!important;font-weight:700!important;}
.tc-stat-lbl{font-size:9px!important;letter-spacing:1px!important;}
.tc-stats{padding-top:10px!important;border-top:1px solid var(--bd)!important;}
/* Demo banner */
#demoBanner{flex-direction:column!important;gap:10px!important;}
/* Analytics */
.row-213,.row-2,.row-32{display:flex!important;flex-direction:column!important;gap:10px!important;}
.analytics-wrap{width:100%!important;}
.card{min-width:0!important;width:100%!important;box-sizing:border-box!important;}
.chart-outer{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
.an-top-row{display:flex!important;overflow-x:auto!important;gap:10px!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;}
.an-top-row::-webkit-scrollbar{display:none!important;}
.stat-card-v{min-width:140px!important;flex-shrink:0!important;}
/* Settings */
.settings-grid{display:flex!important;flex-direction:column!important;gap:12px!important;max-width:100%!important;}
.settings-grid>*{width:100%!important;min-width:0!important;}
/* My Card - stack and fix overflow */
.mc-layout{display:flex!important;flex-direction:column!important;gap:16px!important;width:100%!important;}
.mc-layout>div{width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;}
.mc-pcol{width:100%!important;min-width:0!important;position:relative!important;top:auto!important;}
.mc-cv{width:100%!important;max-width:100%!important;transform:none!important;zoom:1!important;box-sizing:border-box!important;}
.mc-stats{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;}
.mc-stat{padding:14px!important;}
.mc-section{overflow:hidden!important;max-width:100%!important;}
.mc-sb{overflow:hidden!important;max-width:100%!important;}
.mc-save{width:100%!important;}
/* Subscription - 2 per row */
.plans{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
.plan{min-width:0!important;box-sizing:border-box!important;}
.sub-top{flex-direction:column!important;gap:10px!important;}
.toggle-wrap{flex-wrap:wrap!important;gap:8px!important;}
/* Mobile menu btn */
#mobileMenuBtn{display:flex!important;}
#bottom-nav.auth-hidden{display:none!important;visibility:hidden!important;}
.mob-nav-item,.mob-item{padding:13px 14px!important;font-size:15px!important;}
.mob-nav-item svg,.mob-item svg{width:20px!important;height:20px!important;}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}