@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#070b18;--panel:#0d1428;--panel2:#101b32;--line:rgba(139,169,222,.15);--text:#f2f6ff;--muted:#8795b4;--blue:#67d7ff;--cyan:#58f0df;--purple:#9b8cff;--green:#6ce3b0;--danger:#ff7f96;--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:var(--blue);text-decoration:none}.hidden{display:none!important}
.intro-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 48%,#152a55 0%,#090f25 43%,#030611 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}.intro-screen.dismiss{opacity:0;visibility:hidden;pointer-events:none}.starfield,.starfield:before,.starfield:after{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 15% 20%,#fff 80%,transparent),radial-gradient(2px 2px at 82% 17%,#8bdfff 80%,transparent),radial-gradient(1px 1px at 68% 72%,#fff 80%,transparent),radial-gradient(1px 1px at 28% 77%,#9cbaff 80%,transparent),radial-gradient(2px 2px at 92% 54%,#fff 80%,transparent),radial-gradient(1px 1px at 42% 34%,#fff 80%,transparent);opacity:.7}.starfield:before{content:"";transform:scale(1.4);opacity:.5}.intro-orbit{position:absolute;width:min(78vw,900px);height:min(78vw,900px);border:1px solid rgba(109,203,255,.16);border-radius:50%;animation:orbit 28s linear infinite}.orbit-two{width:min(58vw,680px);height:min(58vw,680px);border-color:rgba(137,122,255,.18);animation-direction:reverse}.earth{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(181,242,255,.85),transparent 12%),radial-gradient(ellipse at 37% 40%,#5fc7a4 0 7%,transparent 8%),radial-gradient(ellipse at 60% 62%,#4baf8d 0 9%,transparent 10%),radial-gradient(ellipse at 42% 70%,#3f9b85 0 12%,transparent 13%),radial-gradient(circle at 35% 30%,#2e85c9 0,#14518c 43%,#061e47 75%);box-shadow:inset -38px -25px 65px #020919,inset 10px 5px 24px rgba(194,243,255,.65),0 0 0 8px rgba(103,215,255,.035);position:relative;overflow:hidden;animation:earthSpin 20s linear infinite}.earth:before{content:"";position:absolute;inset:-10%;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 13%,rgba(1,11,31,.55) 14% 17%,transparent 18% 28%);mix-blend-mode:multiply;animation:earthSpin 15s linear infinite}.earth:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(110deg,transparent 25%,rgba(112,218,255,.2) 44%,transparent 59%)}.earth-clouds{position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(170deg,transparent 0 12%,rgba(255,255,255,.14) 13%,transparent 15% 24%);filter:blur(3px);transform:rotate(-20deg)}.intro-copy{position:absolute;z-index:2;bottom:11%;text-align:center}.eyebrow{
  font-size: 0;
  visibility: hidden;
}.status-dot{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;margin-right:8px;box-shadow:0 0 10px var(--cyan)}h1,h2,h3{font-family:'Space Grotesk',sans-serif}.intro-copy h1{font-size:clamp(42px,7vw,76px);letter-spacing:-3px;margin:15px 0 3px}.intro-copy h1 span{color:var(--blue)}.intro-copy p{color:#a8b9d8;letter-spacing:2px;font-size:14px}.intro-progress{height:2px;width:170px;background:#273452;margin:23px auto 12px;overflow:hidden}.intro-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));animation:progress 19.8s linear forwards}.intro-copy small{font-size:9px;letter-spacing:3px;color:#697da3}.intro-skip,.intro-replay{position:absolute;z-index:3;background:rgba(13,25,49,.65);border:1px solid rgba(142,190,255,.25);color:#d9eaff;border-radius:30px;padding:10px 16px;font-size:12px}.intro-skip{right:30px;bottom:28px}.intro-skip span{color:var(--blue);margin-left:8px}.intro-replay{right:30px;top:28px;font-size:19px;width:42px;height:42px;padding:0}.topbar{height:78px;position:fixed;z-index:20;top:0;left:260px;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:rgba(7,11,24,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:var(--text)}.brand strong{display:block;font:600 18px 'Space Grotesk',sans-serif;letter-spacing:-.4px}.brand small{display:block;color:#6f84aa;font-size:8px;letter-spacing:1.7px;margin-top:3px}.brand-mark{width:31px;height:31px;border:1px solid rgba(103,215,255,.7);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:2px;transform:rotate(-8deg);background:linear-gradient(145deg,#132b4b,#10152d)}.brand-mark span{width:3px;border-radius:4px;background:var(--blue);height:10px}.brand-mark span:nth-child(2){height:17px;background:var(--cyan)}.brand-mark span:nth-child(3){height:13px}.topbar-right{display:flex;align-items:center;gap:22px}.system-status{font-size:9px;color:#8295b8;letter-spacing:1.2px}.system-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 8px rgba(108,227,176,.7)}.avatar{border:1px solid rgba(103,215,255,.4);background:linear-gradient(145deg,#193c60,#222447);color:#fff;width:36px;height:36px;border-radius:50%;font-weight:700}.sidebar{position:fixed;z-index:21;left:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,#0b1122,#080d1b);border-right:1px solid var(--line);padding:100px 17px 20px;display:flex;flex-direction:column}.sidebar-label{font-size:9px;letter-spacing:2px;color:#52688f;padding:0 14px 14px}.nav-list{display:flex;flex-direction:column;gap:6px}.nav-item{display:flex;align-items:center;gap:14px;border:1px solid transparent;border-radius:11px;background:transparent;color:#91a0be;text-align:left;padding:12px 14px;font-size:13px;transition:.2s}.nav-item span{width:19px;text-align:center;font-size:19px;color:#6f85ad}.nav-item:hover{background:rgba(83,153,221,.08);color:#e5f5ff}.nav-item.active{background:linear-gradient(90deg,rgba(63,167,235,.16),rgba(63,167,235,.04));border-color:rgba(103,215,255,.14);color:#eaf8ff}.nav-item.active span{color:var(--blue)}.sidebar-bottom{margin-top:auto}.sidebar-plan{display:flex;align-items:center;gap:10px;background:rgba(113,143,198,.07);border:1px solid var(--line);padding:12px;border-radius:13px;margin:18px 0 13px}.plan-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(103,215,255,.12);color:var(--blue)}.sidebar-plan small{display:block;font-size:8px;color:#7184a6;letter-spacing:1.3px}.sidebar-plan strong{font-size:12px;display:block;margin-top:3px}.plan-dot{width:6px;height:6px;border-radius:50%;background:var(--green);margin-left:auto}.logout:hover{color:var(--danger)}.sidebar-footer{font-size:8px;letter-spacing:1.3px;color:#526182;padding:20px 14px 0;line-height:2}.sidebar-footer span{color:#354663}.main-content{margin-left:260px;padding:108px 34px 24px;min-height:100vh;background:radial-gradient(ellipse at 80% 10%,rgba(36,86,145,.12),transparent 35%)}.page-view{max-width:1400px;margin:0 auto;min-height:calc(100vh - 155px)}.app-footer{max-width:1400px;margin:40px auto 0;border-top:1px solid var(--line);padding:20px 0 0;display:flex;justify-content:space-between;color:#526182;font-size:8px;letter-spacing:1.4px}.app-footer span:first-child{color:#8da2c8}
.hero{position:relative;overflow:hidden;border:1px solid rgba(110,172,242,.19);border-radius:24px;background:radial-gradient(ellipse at 83% 44%,rgba(35,118,194,.22),transparent 33%),linear-gradient(125deg,#111d39,#0b1328 60%,#0c1930);padding:42px 42px 38px;min-height:295px}.hero:after{content:"";position:absolute;width:310px;height:310px;right:5%;top:-4%;border:1px solid rgba(104,207,255,.2);border-radius:50%;box-shadow:0 0 0 25px rgba(104,207,255,.025),0 0 0 55px rgba(104,207,255,.02)}/* REALISTIC FULL MOON */
.hero-orb {
  display: block !important;
  position: absolute;
  right: 12%;
  top: 13%;
  width: 205px;
  height: 205px;
  border-radius: 50%;
  overflow: hidden;

  background:
    url("https://cdn.apewebapps.com/threejs/168/examples/textures/planets/moon_1024.jpg")
    center / cover no-repeat;

  box-shadow:
    inset -18px -5px 30px rgba(0, 0, 0, 0.35),
    0 0 35px rgba(190, 205, 230, 0.22);

  animation: none !important;
  opacity: 1 !important;
  z-index: 1;
}

.hero-orb::before,
.hero-orb::after {
  display: none !important;
}.hero-content{position:relative;z-index:2;max-width:580px}.eyebrow-label{color:var(--cyan);font-size:9px;letter-spacing:2px;font-weight:700}.hero h2{font-size:clamp(29px,4vw,44px);line-height:1.12;letter-spacing:-1.6px;margin:17px 0 12px}.hero h2 span{color:var(--blue)}.hero p{font-size:13px;color:#a3b4d2;line-height:1.8;max-width:450px}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.primary-btn,.secondary-btn,.outline-btn{border-radius:10px;padding:12px 17px;font-size:12px;font-weight:600;border:1px solid transparent;transition:.2s}.primary-btn{background:linear-gradient(100deg,#55cfff,#66e7db);color:#061321;box-shadow:0 8px 24px rgba(69,198,235,.14)}.primary-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.secondary-btn{background:rgba(117,155,213,.09);border-color:rgba(134,177,238,.22);color:#dcecff}.outline-btn{background:transparent;border-color:var(--line);color:#b7c8e4}.section-head{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:32px 0 17px}.section-head h3{font-size:19px;margin:0;letter-spacing:-.5px}.section-head p{font-size:11px;color:var(--muted);margin:7px 0 0}.text-link{background:transparent;border:0;color:var(--blue);font-size:11px}/* DASHBOARD PREMIUM STATISTICS */
.stats-grid.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.dashboard-stats-grid .stat-card {
  position: relative;
  min-height: 112px;
  padding: 20px;
  gap: 15px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(25, 30, 46, 0.96),
    rgba(11, 15, 28, 0.98)
  );
  border: 1px solid rgba(192, 198, 210, 0.16);
  border-radius: 17px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.dashboard-stats-grid .stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 92, 0.48);
}

.dashboard-stats-grid .stat-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #e3c477;
  background: rgba(212, 175, 92, 0.10);
  border: 1px solid rgba(212, 175, 92, 0.20);
}

.dashboard-stats-grid .stat-card small {
  color: #aeb5c5;
  font-size: 9px;
  letter-spacing: 1px;
}

.dashboard-stats-grid .stat-card strong {
  color: #f2f2f5;
  font-size: 23px;
  margin-top: 7px;
}

.dashboard-stats-grid .stat-caption {
  display: block;
  margin-top: 5px;
  color: #818b9f;
  font-size: 10px;
  line-height: 1.5;
}.stat-card,.feature-card,.content-card,.panel,.plan-card{background:linear-gradient(145deg,rgba(17,28,52,.94),rgba(11,18,35,.94));border:1px solid var(--line);border-radius:16px}.stat-card{padding:18px;display:flex;align-items:center;gap:13px}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(103,215,255,.1);color:var(--blue);font-size:19px}.stat-card small{font-size:9px;color:#7f92b5;letter-spacing:.8px;display:block}.stat-card strong{display:block;font:600 21px 'Space Grotesk',sans-serif;margin-top:5px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feature-card{padding:22px;min-height:158px;text-align:left;cursor:pointer;transition:.25s;color:var(--text);position:relative;overflow:hidden}.feature-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-35px;bottom:-45px;background:rgba(91,197,255,.045)}.feature-card:hover{transform:translateY(-3px);border-color:rgba(103,215,255,.38);background:#111f3a}.feature-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:rgba(103,215,255,.1);color:var(--blue);font-size:21px;margin-bottom:17px}.feature-card h4{font-size:14px;margin:0 0 7px}.feature-card p{font-size:11px;line-height:1.6;color:#8394b4;margin:0}.feature-arrow{position:absolute;right:18px;top:23px;color:#6682a9}.content-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.panel{padding:22px}.panel h3{font-size:16px;margin:0 0 5px}.panel .subtext{color:var(--muted);font-size:11px;margin:0 0 20px}.lesson-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line)}.lesson-thumb{width:56px;height:48px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#193e62,#16204a);color:var(--blue);font-size:20px}.lesson-info{flex:1}.lesson-info strong{font-size:12px;display:block}.lesson-info small{font-size:10px;color:var(--muted);display:block;margin-top:5px}.lesson-row button{border:1px solid var(--line);background:#101a30;color:#b9d7ef;border-radius:8px;padding:8px 10px;font-size:10px}.progress-line{height:5px;background:#1a2945;border-radius:10px;overflow:hidden;margin-top:9px}.progress-line span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:10px}.page-title{margin-bottom:25px}.page-title .eyebrow-label{display:block;margin-bottom:11px}.page-title h2{font-size:32px;letter-spacing:-1px;margin:0 0 9px}.page-title p{color:var(--muted);font-size:13px;line-height:1.7;margin:0;max-width:720px}.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.plan-card{padding:21px;position:relative;display:flex;flex-direction:column;min-height:380px}.plan-card.featured{border-color:rgba(103,215,255,.48);box-shadow:0 0 35px rgba(55,150,220,.08)}.plan-card .plan-tag{font-size:8px;letter-spacing:1.4px;color:var(--cyan);height:14px}.plan-card h3{font-size:18px;margin:9px 0}.price{font:600 31px 'Space Grotesk',sans-serif;letter-spacing:-1px}.price small{font:400 10px 'DM Sans',sans-serif;color:var(--muted);letter-spacing:0}.duration{font-size:10px;color:var(--muted);padding:8px 0 17px;border-bottom:1px solid var(--line)}.plan-card ul{list-style:none;margin:17px 0 20px;padding:0;flex:1}.plan-card li{font-size:10px;color:#b2c2df;padding:7px 0;display:flex;gap:8px;line-height:1.4}.plan-card li:before{content:"✓";color:var(--cyan)}.plan-card .primary-btn,.plan-card .secondary-btn{width:100%;padding:11px 8px}.notice{border:1px solid rgba(103,215,255,.15);background:rgba(103,215,255,.045);padding:14px 16px;border-radius:12px;color:#9db2d1;font-size:11px;line-height:1.7;margin-top:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}.field label{font-size:11px;color:#a7b7d3}.field input,.field textarea,.field select{width:100%;background:#080f20;border:1px solid rgba(131,166,220,.2);border-radius:10px;padding:13px 14px;color:#eaf3ff;outline:none;font-size:12px}.field textarea{min-height:125px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(103,215,255,.6);box-shadow:0 0 0 3px rgba(103,215,255,.06)}.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.profile-head{display:flex;align-items:center;gap:18px;padding:22px;border-bottom:1px solid var(--line);margin-bottom:20px}.profile-big{width:66px;height:66px;border-radius:20px;background:linear-gradient(145deg,#1d5c80,#322d68);display:grid;place-items:center;font:600 27px 'Space Grotesk',sans-serif;border:1px solid rgba(103,215,255,.35)}.profile-head h3{margin:0 0 5px;font-size:19px}.profile-head p{margin:0;color:var(--muted);font-size:11px}.badge{display:inline-flex;padding:5px 8px;border-radius:7px;background:rgba(108,227,176,.1);color:var(--green);font-size:9px;margin-top:8px}.empty-state{text-align:center;padding:38px 20px}.empty-state .empty-icon{font-size:32px;color:var(--blue);margin-bottom:12px}.empty-state h3{font-size:17px;margin:0 0 8px}.empty-state p{color:var(--muted);font-size:12px;line-height:1.7;max-width:430px;margin:0 auto 18px}.modal-backdrop{position:fixed;inset:0;background:rgba(2,5,13,.78);backdrop-filter:blur(12px);z-index:60;display:grid;place-items:center;padding:20px}.auth-modal{width:min(900px,100%);min-height:560px;background:#0b1224;border:1px solid rgba(119,173,237,.23);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.45)}.modal-close{position:absolute;right:17px;top:14px;z-index:3;background:rgba(9,17,35,.7);border:1px solid var(--line);color:#c5d8f5;width:32px;height:32px;border-radius:50%;font-size:20px}.auth-visual{position:relative;overflow:hidden;padding:45px 35px;background:radial-gradient(ellipse at 50% 34%,#1a4776,#0a142d 57%,#080e1e)}.mini-earth{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#73e3e7,#2077b6 35%,#0a2047 72%);box-shadow:inset -20px -15px 30px #020716,0 0 35px rgba(63,181,255,.25);animation:earthSpin 25s linear infinite}.mini-orbit{position:absolute;width:235px;height:235px;top:13%;left:50%;transform:translateX(-50%) rotateX(65deg);border:1px solid rgba(103,215,255,.4);border-radius:50%}.auth-brand{position:absolute;bottom:105px;left:35px;font:600 12px 'Space Grotesk',sans-serif;letter-spacing:3px;color:var(--blue)}.auth-visual p{position:absolute;bottom:42px;left:35px;font:500 21px/1.4 'Space Grotesk',sans-serif;margin:0}.auth-visual small{position:absolute;bottom:20px;left:35px;color:#627ba4;font-size:8px;letter-spacing:1.5px}.auth-panel{padding:40px 42px 25px}.auth-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:27px;padding-right:25px}.auth-tab{border:0;background:none;color:#7185aa;padding:0 0 13px;font-size:12px}.auth-tab.active{color:var(--blue);border-bottom:2px solid var(--blue)}.auth-panel h2{font-size:25px;margin:0 0 8px}.auth-panel .lead{color:var(--muted);font-size:11px;line-height:1.7;margin:0 0 23px}.auth-panel .field{margin-bottom:12px}.auth-panel .field input{padding:11px 12px}.auth-panel .primary-btn{width:100%;margin-top:5px}.auth-inline{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin:7px 0 15px}.auth-inline button{background:none;border:0;color:var(--blue);font-size:10px}.captcha{display:flex;align-items:center;gap:10px;background:#080f20;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:10px;color:#9aacc9;margin-bottom:13px}.captcha input{accent-color:#58d4ef}.auth-foot{font-size:9px;line-height:1.7;color:#65799d;margin-top:19px}.toast{position:fixed;z-index:90;right:25px;bottom:25px;display:flex;align-items:center;gap:11px;padding:14px 18px;border:1px solid rgba(103,215,255,.25);border-radius:12px;background:#101d34;color:#e9f6ff;box-shadow:0 12px 35px rgba(0,0,0,.35);font-size:12px}.toast-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(108,227,176,.12);color:var(--green)}.mobile-menu{display:none}
@keyframes earthSpin{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(12deg)}100%{filter:hue-rotate(0deg)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes progress{to{width:100%}}
@media(max-width:1200px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-orb{right:6%;opacity:.65}.hero-content{max-width:530px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.sidebar{width:230px}.topbar{left:230px;padding:0 22px}.main-content{margin-left:230px;padding:100px 22px 22px}.hero{padding:32px}.hero-orb{right:-4%;opacity:.35}.content-grid{grid-template-columns:1fr}.auth-visual{display:none}.auth-modal{grid-template-columns:1fr;max-width:500px;min-height:0}.auth-panel{padding:35px}.system-status{display:none}}
@media(max-width:680px){.topbar{left:0;height:66px;padding:0 16px}.brand strong{font-size:16px}.sidebar{width:260px;transform:translateX(-100%);transition:transform .25s;box-shadow:20px 0 50px rgba(0,0,0,.3);padding-top:85px}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0;padding:84px 15px 20px}.mobile-menu{display:block}.topbar-right{gap:12px}.hero{padding:26px 22px;min-height:300px}.hero h2{font-size:31px}.hero-orb{width:150px;height:150px;top:8%;right:-12%;opacity:.22}.hero p{font-size:12px}.stats-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.feature-card{padding:15px;min-height:145px}.feature-card h4{font-size:12px}.feature-card p{font-size:10px}.feature-icon{width:37px;height:37px;margin-bottom:13px}.pricing-grid{grid-template-columns:1fr}.plan-card{min-height:0}.section-head{margin-top:26px}.section-head h3{font-size:17px}.page-title h2{font-size:27px}.form-grid{grid-template-columns:1fr}.app-footer{flex-direction:column;gap:8px}.auth-panel{padding:30px 23px}.auth-modal{max-height:90vh;overflow:auto}.intro-copy{bottom:14%}.intro-copy h1{letter-spacing:-2px}.intro-copy p{font-size:11px}.intro-orbit{width:95vw;height:95vw}.orbit-two{width:75vw;height:75vw}.earth-wrap{width:250px;height:250px}.intro-skip{right:15px;bottom:15px}.intro-replay{right:15px;top:15px}.content-grid{gap:12px}.panel{padding:17px}}

/* Visible Back / Forward controls on the account screens */
.auth-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 18px;padding:8px;border:1px solid rgba(103,215,255,.16);border-radius:12px;background:rgba(103,215,255,.035)}.auth-nav-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(103,215,255,.23);border-radius:8px;background:#101d34;color:#d7efff;font-size:11px;cursor:pointer}.auth-nav-btn:hover:not(:disabled){border-color:var(--blue);background:rgba(103,215,255,.1)}.auth-nav-btn:disabled{opacity:.35;cursor:not-allowed}.auth-nav-label{font-size:8px;letter-spacing:1.1px;color:#7185aa;text-align:center}


/* Final Compact Sidebar Settings */

.sidebar {
  position: fixed;
  z-index: 21;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  height: 100vh;
  padding: 80px 12px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #52658a #0b1122;
}

.sidebar-label,
.nav-list,
.sidebar-bottom {
  flex-shrink: 0;
}

.nav-list {
  gap: 3px;
}

.nav-item {
  padding: 8px 10px;
  gap: 10px;
  font-size: 12px;
}

.sidebar-bottom {
  margin-top: 12px;
  padding-bottom: 12px;
}

#logoutButton {
  display: flex !important;
  width: 100%;
  padding: 9px 10px;
  margin: 6px 0;
  color: #ff7f96;
  flex-shrink: 0;
}

.topbar {
  left: 220px;
}

.main-content {
  margin-left: 220px;
}

@media (max-width: 900px) {
  .topbar {
    left: 220px;
  }

  .main-content {
    margin-left: 220px;
  }
}

@media (max-width: 680px) {
  .sidebar {
    width: 220px;
    transform: translateX(-100%);
    padding-top: 80px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .topbar {
    left: 0;
  }

  .main-content {
    margin-left: 0;
  }
}

/* Certificate Print Optimization */
@media print {
  body * {
    visibility: hidden !important;
  }
  #certModal, #certModal * {
    visibility: visible !important;
  }
  #certModal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #070b18 !important;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
  }
  #closeCertModal, #certModal button {
    display: none !important;
  }
}
/* DASHBOARD STATS - RESPONSIVE */
@media (max-width: 1200px) {
  .stats-grid.dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .stats-grid.dashboard-stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboard-stats-grid .stat-card {
    min-height: 96px;
  }
}
/* DASHBOARD STATS - DESKTOP LAYOUT */
.stats-grid.dashboard-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* =====================================================
   MR. FINLIVO — CINEMATIC SOLAR SYSTEM INTRO
===================================================== */

.intro-screen {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 48%, #101d38 0%, #070d1c 42%, #02040b 100%);
}

.starfield {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1px 1px at 12% 20%, #fff 99%, transparent),
    radial-gradient(1px 1px at 76% 18%, #fff 99%, transparent),
    radial-gradient(2px 2px at 32% 72%, #d9e8ff 99%, transparent),
    radial-gradient(1px 1px at 88% 66%, #fff 99%, transparent),
    radial-gradient(1px 1px at 56% 12%, #fff 99%, transparent),
    radial-gradient(1px 1px at 18% 86%, #fff 99%, transparent);
  background-size: 320px 280px;
  animation: starDrift 80s linear infinite;
}

.space-glow {
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32,75,130,.17), transparent 68%);
  pointer-events: none;
}

.solar-system {
  position: absolute;
  width: min(90vw, 900px);
  height: min(90vw, 900px);
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

/* EARTH */

.earth-axis {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: rotate(-23.5deg);
}

.earth-wrap {
  position: relative;
  width: clamp(230px, 34vw, 390px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 35px rgba(64,145,255,.28));
}

.earth {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #07172d;
  box-shadow:
    inset -35px -10px 55px rgba(0,0,0,.85),
    inset 12px 5px 35px rgba(90,160,255,.25),
    0 0 18px rgba(92,170,255,.35);
}

.earth::before,
.earth::after {
  content: none !important;
}

.earth-map {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    url("https://upload.wikimedia.org/wikipedia/commons/9/91/Land_shallow_topo_2048.jpg");
  background-repeat: repeat-x;
  background-size: 200% 100%;
  background-position: 0% center;
  animation: earthRotation 35s linear infinite;
  filter: saturate(1.12) contrast(1.08);
}

.earth-clouds {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: .19;
  background:
    repeating-linear-gradient(
      12deg,
      transparent 0 22px,
      rgba(255,255,255,.35) 24px,
      transparent 28px 48px
    );
  mix-blend-mode: screen;
  animation: cloudRotation 48s linear infinite;
}

.earth-atmosphere {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset -28px -8px 38px rgba(0,0,0,.75),
    inset 8px 0 22px rgba(105,180,255,.25),
    0 0 16px rgba(87,165,255,.45),
    0 0 38px rgba(55,125,255,.20);
}

/* ORBIT PATHS */
.orbit-track,
.orbit-body {
  display: none !important;
}

.moon {
  width: clamp(18px, 2.2vw, 27px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #f5f5ed, #aaaead 48%, #4b515d 100%);
  box-shadow: 0 0 18px rgba(220,230,255,.4);
}

.mars {
  width: clamp(23px, 2.8vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #ffd0a0, #c45a37 48%, #5b201d 100%);
  box-shadow: 0 0 20px rgba(226,102,65,.45);
}

/* INTRO BRANDING */

.intro-copy {
  z-index: 5;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}

.intro-copy h1 span {
  color: #d9bd78;
  text-shadow: 0 0 24px rgba(217,189,120,.24);
}

.intro-copy p {
  color: #b8c5dc;
  letter-spacing: 1.5px;
}

.intro-progress {
  background: rgba(255,255,255,.12);
}

.intro-progress span {
  background: linear-gradient(90deg, #b9c8dd, #d9bd78);
  box-shadow: 0 0 12px rgba(217,189,120,.5);
}

.intro-skip,
.intro-replay {
  z-index: 10;
  color: #e6eaf2;
  border-color: rgba(220,230,245,.35);
  background: rgba(9,16,30,.55);
  backdrop-filter: blur(12px);
}

/* ANIMATIONS */

@keyframes earthRotation {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}

@keyframes cloudRotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbitMoon {
  from { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); }
}

@keyframes orbitMars {
  from { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); }
}

@keyframes starDrift {
  from { background-position: 0 0; }
  to   { background-position: 320px 280px; }
}

/* MOBILE */

@media (max-width: 680px) {
  .solar-system {
    width: 115vw;
    height: 115vw;
    top: 40%;
  }

  .earth-wrap {
    width: clamp(210px, 58vw, 290px);
  }

  .orbit-moon {
    width: 68%;
    height: 68%;
  }

  .orbit-mars {
    width: 100%;
    height: 100%;
  }

  .intro-copy {
    bottom: 9%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .earth-map,
  .earth-clouds,
  .orbit-moon,
  .orbit-mars,
  .starfield {
    animation-duration: 120s;
  }/* FIX EARTH POSITION — CENTER OF BOTH ORBITS */

.solar-system {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.earth-axis {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) rotate(-23.5deg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.earth-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}
}
/* FORCE EARTH TO THE EXACT CENTER OF ORBITS */

.solar-system {
  position: absolute !important;
  left: 50% !important;
  top: 43% !important;
  transform: translate(-50%, -50%) !important;
}

.solar-system .earth-axis {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  display: block !important;
}

.solar-system .earth-wrap {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) rotate(-23.5deg) !important;
}/* 3D ORBIT — FRONT AND BACK MOVEMENT */

.solar-system {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.earth-axis {
  z-index: 3;
  transform-style: preserve-3d;
}

.earth-wrap {
  z-index: 3;
}

.orbit-track {
  transform-style: preserve-3d;
  overflow: visible;
}

.orbit-moon {
  z-index: 2;
}

.orbit-mars {
  z-index: 1;
}

.orbit-body {
  z-index: 2;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.moon,
.mars {
  position: relative;
  z-index: 5;
  backface-visibility: visible;
}
/* =================================================
   3D PLANET REVOLUTION — FRONT & BACK OF EARTH
================================================= */

.solar-system {
  transform-style: preserve-3d !important;
  perspective: 1000px;
  isolation: auto;
}

.orbit-motion {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(67deg);
  pointer-events: none;
}

.moon-motion {
  width: 62%;
  height: 62%;
  animation: moonRevolve 18s linear infinite;
}

.mars-motion {
  width: 91%;
  height: 91%;
  animation: marsRevolve 32s linear infinite;
}

.orbit-motion .moon,
.orbit-motion .mars {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%) rotateX(-67deg);
  transform-style: preserve-3d;
}

.earth-axis {
  transform-style: preserve-3d !important;
}

.earth-wrap {
  transform-style: preserve-3d;
}

@keyframes moonRevolve {
  from {
    transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg);
  }
}

@keyframes marsRevolve {
  from {
    transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg);
  }
}

/* =====================================================
   REALISTIC MOON & MARS — MR. FINLIVO INTRO
===================================================== */

/* REALISTIC MOON */
.moon {
  width: clamp(38px, 4.5vw, 58px) !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  background-image:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.18),
      transparent 35%
    ),
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(0,0,0,.72) 100%
    ),
    url("https://www.solarsystemscope.com/textures/download/2k_moon.jpg");

  background-size: cover;
  background-position: center;

  box-shadow:
    inset -8px -4px 13px rgba(0,0,0,.75),
    inset 3px 2px 8px rgba(255,255,255,.25),
    0 0 18px rgba(220,230,255,.45);

  border: 1px solid rgba(235,240,255,.25);
  position: relative;
}

/* REALISTIC MARS */
.mars {
  width: clamp(46px, 5.3vw, 68px) !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;

  background-image:
    radial-gradient(
      circle at 28% 24%,
      rgba(255,220,180,.22),
      transparent 35%
    ),
    linear-gradient(
      115deg,
      transparent 32%,
      rgba(35,8,3,.78) 100%
    ),
    url("https://www.solarsystemscope.com/textures/download/2k_mars.jpg");

  background-size: cover;
  background-position: center;

  box-shadow:
    inset -10px -5px 16px rgba(0,0,0,.75),
    inset 3px 2px 9px rgba(255,210,170,.25),
    0 0 22px rgba(225,105,65,.48);

  border: 1px solid rgba(255,190,155,.25);
  position: relative;
}

/* MOBILE SIZE */
@media (max-width: 680px) {
  .moon {
    width: clamp(34px, 8vw, 46px) !important;
  }

  .mars {
    width: clamp(40px, 9vw, 54px) !important;
  }
}

/* =====================================================
   MOON & MARS — 3D SPHERICAL LIGHTING
===================================================== */

.orbit-motion .moon,
.orbit-motion .mars {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* MOON — 3D DEPTH */
.orbit-motion .moon {
  box-shadow:
    inset -13px -8px 19px rgba(0,0,0,.95),
    inset 5px 4px 10px rgba(255,255,255,.42),
    0 0 16px rgba(205,220,255,.28);
}

.orbit-motion .moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 28% 25%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.12) 22%,
      transparent 43%
    ),
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(0,0,0,.12) 45%,
      rgba(0,0,0,.88) 100%
    );
  pointer-events: none;
}

/* MARS — 3D DEPTH */
.orbit-motion .mars {
  box-shadow:
    inset -16px -9px 23px rgba(0,0,0,.95),
    inset 5px 4px 11px rgba(255,215,180,.38),
    0 0 20px rgba(220,100,65,.30);
}

.orbit-motion .mars::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 27% 24%,
      rgba(255,225,190,.42) 0%,
      rgba(255,200,160,.10) 24%,
      transparent 43%
    ),
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(0,0,0,.16) 46%,
      rgba(0,0,0,.92) 100%
    );
  pointer-events: none;
}

/* MOON & MARS VISIBILITY FIX */

.orbit-motion {
  overflow: visible !important;
  pointer-events: none;
}

.orbit-motion .moon,
.orbit-motion .mars {
  display: block !important;
  position: absolute !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 20 !important;
  transform: translateX(-50%) rotateX(-67deg);
}

.orbit-motion .moon {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_moon.jpg") !important;
  background-size: cover !important;
  box-shadow:
    inset -12px -8px 18px rgba(0,0,0,.85),
    inset 4px 3px 9px rgba(255,255,255,.3),
    0 0 18px rgba(220,230,255,.4) !important;
}

.orbit-motion .mars {
  background-image:
    url("https://www.solarsystemscope.com/textures/download/2k_mars.jpg") !important;
  background-size: cover !important;
  box-shadow:
    inset -14px -9px 20px rgba(0,0,0,.85),
    inset 4px 3px 9px rgba(255,210,170,.3),
    0 0 20px rgba(225,105,65,.4) !important;
}

.orbit-motion .moon::after,
.orbit-motion .mars::after {
  content: none !important;
}

/* REALISTIC PLANET SPHERICAL LIGHTING POLISH */

.orbit-motion .moon,
.orbit-motion .mars {
  isolation: isolate;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.orbit-motion .moon {
  box-shadow:
    inset -15px -10px 20px rgba(0,0,0,.92),
    inset 5px 5px 12px rgba(255,255,255,.35),
    0 0 20px rgba(205,220,255,.35) !important;
}

.orbit-motion .mars {
  box-shadow:
    inset -18px -11px 24px rgba(0,0,0,.92),
    inset 5px 5px 12px rgba(255,210,175,.32),
    0 0 22px rgba(225,105,65,.35) !important;
}

/* =====================================================
   MOON & MARS — SURFACE DETAIL ENHANCEMENT
===================================================== */

/* LARGER MOON */
.orbit-motion .moon {
  width: clamp(58px, 6vw, 76px) !important;
  background-size: 145% 145% !important;
  background-position: center !important;
  filter: contrast(1.4) brightness(1.08) saturate(.75);
}

/* LARGER MARS */
.orbit-motion .mars {
  width: clamp(66px, 7vw, 88px) !important;
  background-size: 145% 145% !important;
  background-position: center !important;
  filter: contrast(1.4) brightness(1.06) saturate(1.2);
}

/* MOBILE SIZE */
@media (max-width: 680px) {
  .orbit-motion .moon {
    width: 52px !important;
  }

  .orbit-motion .mars {
    width: 60px !important;
  }
}

/* =====================================================
   ADVANCED 3D SPHERICAL PLANETS
===================================================== */

/* MOON — REALISTIC 3D SPHERE */
.orbit-motion .moon {
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;

  background-color: #92969b !important;

  box-shadow:
    inset 9px 7px 14px rgba(255,255,255,.28),
    inset -15px -12px 22px rgba(0,0,0,.95),
    inset -3px -2px 8px rgba(0,0,0,.65),
    0 0 22px rgba(205,220,255,.25) !important;
}

.orbit-motion .moon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 27% 24%,
      rgba(255,255,255,.42),
      rgba(255,255,255,.12) 22%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 75% 78%,
      rgba(0,0,0,.75),
      transparent 60%
    );
  z-index: 2;
  pointer-events: none;
}

/* MARS — REALISTIC 3D SPHERE */
.orbit-motion .mars {
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;

  background-color: #a94d32 !important;

  box-shadow:
    inset 10px 7px 15px rgba(255,220,185,.28),
    inset -18px -13px 25px rgba(0,0,0,.95),
    inset -4px -3px 9px rgba(0,0,0,.65),
    0 0 25px rgba(225,105,65,.30) !important;
}

.orbit-motion .mars::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 26% 23%,
      rgba(255,225,190,.4),
      rgba(255,200,160,.1) 23%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 76% 80%,
      rgba(0,0,0,.8),
      transparent 60%
    );
  z-index: 2;
  pointer-events: none;
}

/* FORCE SPHERICAL LIGHTING — MOON & MARS */

.orbit-motion .moon,
.orbit-motion .mars {
  border-radius: 50% !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-blend-mode: normal !important;
}

/* MOON */
.orbit-motion .moon {
  box-shadow:
    inset 12px 8px 14px rgba(255,255,255,.38),
    inset -18px -12px 24px rgba(0,0,0,.95),
    0 0 24px rgba(210,225,255,.35) !important;
}

/* MARS */
.orbit-motion .mars {
  box-shadow:
    inset 13px 9px 16px rgba(255,220,190,.38),
    inset -20px -13px 26px rgba(0,0,0,.95),
    0 0 26px rgba(230,105,65,.38) !important;
}

/* Hide old CSS Moon and Mars — keep their movement layers */
/* THREE.JS CANVAS — MOON & MARS */
#threeSolarCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

#threeSolarCanvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Hide old CSS Moon and Mars */
.moon-motion .moon,
.mars-motion .mars {
  display: none !important;
}/* =====================================================
   MR. FINLIVO — ANIMATED FINANCE LOGIN SCENE
===================================================== */

.auth-visual.finance-scene {
  position: relative;
  min-height: 560px;
  height: 100%;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(20,75,130,.35), transparent 55%),
    linear-gradient(145deg, #050914, #0a1428 55%, #030711);
}

/* Background grid */
.finance-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .2;
  background-image:
    linear-gradient(rgba(95,160,220,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,160,220,.15) 1px, transparent 1px);
  background-size: 35px 35px;
  transform: perspective(450px) rotateX(55deg) scale(1.7);
  transform-origin: center bottom;
  animation: financeGridMove 15s linear infinite;
}

@keyframes financeGridMove {
  from { background-position: 0 0; }
  to { background-position: 0 70px; }
}

/* Blue cinematic glow */
.finance-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35,130,220,.23), transparent 70%);
  filter: blur(15px);
  animation: financeGlowPulse 5s ease-in-out infinite alternate;
}

@keyframes financeGlowPulse {
  from { opacity: .45; transform: translate(-50%, -50%) scale(.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Financial news panels */
.finance-news {
  position: absolute;
  z-index: 2;
  width: 145px;
  min-height: 76px;
  padding: 11px;
  border: 1px solid rgba(135,190,245,.3);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14,34,62,.88), rgba(5,13,28,.8));
  box-shadow: 0 10px 30px rgba(0,0,0,.3), 0 0 18px rgba(54,145,230,.09);
  backdrop-filter: blur(8px);
  animation: newsFloat 5s ease-in-out infinite;
}

.finance-news span,
.finance-news small {
  display: block;
  color: #8db9e8;
  font-size: 7px;
  letter-spacing: 1.3px;
}

.finance-news strong {
  display: block;
  margin: 7px 0;
  color: #edf5ff;
  font-size: 10px;
  line-height: 1.35;
}

.finance-news small {
  color: #c9a85e;
  font-size: 7px;
}

.news-one {
  top: 10%;
  left: 7%;
  animation-delay: 0s;
}

.news-two {
  top: 25%;
  right: 6%;
  animation-delay: -1.2s;
}

.news-three {
  top: 49%;
  left: 5%;
  animation-delay: -2.3s;
}

.news-four {
  top: 61%;
  right: 5%;
  animation-delay: -3.1s;
}

.news-five {
  top: 8%;
  right: 8%;
  transform: scale(.85);
  animation-delay: -2s;
}

@keyframes newsFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -13px; }
}


/* =====================================================
   REALISTIC 3D BUSINESSMAN — BACK VIEW
===================================================== */

.walking-person {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 65px;
  width: 190px;
  height: 340px;
  transform: translateX(-50%);
  animation: personWalk 2.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.8));
}

/* Ground shadow */
.walking-person::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 25px;
  left: 5px;
  bottom: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.8);
  filter: blur(12px);
}

/* Head — rear view */
.person-head {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 76px;
  width: 39px;
  height: 48px;
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(ellipse at 35% 25%, #30323a, transparent 40%),
    linear-gradient(100deg, #08090d, #252832 48%, #07080c);
  box-shadow:
    inset -7px -5px 10px rgba(0,0,0,.85),
    0 0 12px rgba(150,180,220,.08);
}

/* Neck */
.person-head::after {
  content: "";
  position: absolute;
  width: 19px;
  height: 18px;
  left: 10px;
  bottom: -11px;
  background: linear-gradient(90deg, #17191f, #343640, #111318);
}

/* Premium black suit jacket */
.person-body {
  position: absolute;
  z-index: 4;
  top: 43px;
  left: 48px;
  width: 95px;
  height: 145px;
  border-radius: 23px 23px 9px 9px;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg,
      #050609 0%,
      #171b24 22%,
      #080a10 47%,
      #252a34 67%,
      #06080d 100%);
  box-shadow:
    inset 8px 0 12px rgba(150,170,200,.10),
    inset -9px 0 15px rgba(0,0,0,.9);
}

/* Suit back detailing */
.person-body::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 46px;
  width: 1px;
  height: 125px;
  background: linear-gradient(
    transparent,
    rgba(180,195,220,.2),
    transparent
  );
}

.person-body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 23px;
  width: 48px;
  height: 38px;
  background: linear-gradient(
    135deg,
    rgba(120,140,170,.12),
    transparent 65%
  );
  clip-path: polygon(0 0, 50% 25%, 100% 0, 75% 100%, 50% 65%, 25% 100%);
}

/* Both open arms */
.person-arm {
  position: absolute;
  z-index: 2;
  top: 66px;
  width: 82px;
  height: 21px;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    #303540 0%,
    #151922 35%,
    #05070c 100%
  );
}

/* Left arm and hand */
.person-arm-left {
  left: 0;
  transform: rotate(24deg);
  transform-origin: 90% 50%;
}

.person-arm-left::after {
  content: "";
  position: absolute;
  left: -13px;
  top: -3px;
  width: 22px;
  height: 17px;
  border-radius: 45%;
  background: linear-gradient(135deg, #252933, #090b10);
  transform: rotate(-12deg);
}

/* Right arm and hand */
.person-arm-right {
  right: 0;
  transform: rotate(-24deg);
  transform-origin: 10% 50%;
}

.person-arm-right::after {
  content: "";
  position: absolute;
  right: -13px;
  top: -3px;
  width: 22px;
  height: 17px;
  border-radius: 45%;
  background: linear-gradient(135deg, #252933, #090b10);
  transform: rotate(12deg);
}

/* Suit trousers */
.person-leg {
  position: absolute;
  z-index: 3;
  top: 174px;
  width: 38px;
  height: 126px;
  border-radius: 5px 5px 12px 12px;
  background: linear-gradient(
    90deg,
    #030509,
    #171b24 45%,
    #080a0e
  );
  transform-origin: top center;
  box-shadow: inset 5px 0 7px rgba(150,170,200,.06);
}

.person-leg-left {
  left: 57px;
  animation: leftLegWalk 1.25s ease-in-out infinite;
}

.person-leg-right {
  right: 57px;
  animation: rightLegWalk 1.25s ease-in-out infinite;
}

@keyframes personWalk {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -3px;
  }
}

@keyframes leftLegWalk {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-12deg); }
}

@keyframes rightLegWalk {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); }
}


/* Brand at bottom */
.finance-brand {
  position: absolute;
  z-index: 5;
  left: 25px;
  bottom: 19px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.finance-brand strong {
  color: #d9e7f7;
  font: 600 12px 'Space Grotesk', sans-serif;
  letter-spacing: 3px;
}

.finance-brand span {
  color: #829bbd;
  font-size: 7px;
  letter-spacing: 1.5px;
}

/* Responsive */
@media (max-width: 700px) {
  .auth-visual.finance-scene {
    min-height: 300px;
  }

  .walking-person {
    transform: translateX(-50%) scale(.72);
    transform-origin: bottom center;
    bottom: 38px;
  }

  .finance-news {
    width: 112px;
    padding: 8px;
  }

  .finance-news strong {
    font-size: 8px;
  }

  .news-one { left: 3%; top: 7%; }
  .news-two { right: 3%; top: 19%; }
  .news-three { left: 2%; top: 48%; }
  .news-four { right: 2%; top: 57%; }
  .news-five { display: none; }

  .finance-brand {
    left: 15px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finance-scene *,
  .finance-scene *::before,
  .finance-scene *::after {
    animation: none !important;
  }
}

/* LOGIN — SINGLE FINANCE IMAGE */

.auth-visual.finance-scene {
  background-image: url("./assets/image/login-finance-scene.jpg.jpeg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

/* Hide old CSS-made scene elements */
/* CREATE ACCOUNT — COMPACT RESPONSIVE MODAL */

.auth-modal:has(#signupForm) {
  min-height: 0 !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  grid-template-columns: .85fr 1.15fr;
}

.auth-modal:has(#signupForm) .auth-panel {
  padding: 24px 28px !important;
}

.auth-modal:has(#signupForm) #signupForm .lead {
  margin-bottom: 12px !important;
}

.auth-modal:has(#signupForm) #signupForm .field {
  margin-bottom: 10px !important;
}

@media (max-height: 800px) {
  .auth-modal:has(#signupForm) {
    max-height: 94vh !important;
  }

  .auth-modal:has(#signupForm) .auth-panel {
    padding: 18px 24px !important;
  }

  .auth-modal:has(#signupForm) #signupForm .field {
    margin-bottom: 7px !important;
  }
}

@media (max-width: 900px) {
  .auth-modal:has(#signupForm) {
    grid-template-columns: 1fr;
    width: min(500px, 100%);
  }
}
/* LOGIN BACKGROUND VIDEO */

.auth-visual.finance-scene {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #050914 !important;
}

.auth-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.finance-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(3, 8, 20, 0.12),
    rgba(3, 8, 20, 0.35)
  );
  z-index: 2;
  pointer-events: none;
}

/* ==========================================
   MR. FINLIVO — DEEP SPACE + REALISTIC HALF MOON
========================================== */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 82% 50%,
      rgba(83, 103, 151, 0.20),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 15% 0%,
      rgba(54, 70, 123, 0.20),
      transparent 45%
    ),
    linear-gradient(
      120deg,
      #02040b,
      #090e20 55%,
      #02040a
    ) !important;

  border: 1px solid rgba(160, 177, 210, 0.20);
}
/* Remove Welcome Space Stars */
.hero::after {
  display: none !important;
}
/* MR. FINLIVO - WELCOME SPACE VISUAL */
/* FULL WELCOME SECTION IMAGE */
.hero-orb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-image: url("./assets/image/welcome-space.jpg.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  animation: none !important;
  opacity: 1 !important;
  z-index: 1;
}

.hero-orb::before,
.hero-orb::after {
  display: none !important;
}

/* REMOVE OLD ORBIT */
.hero-orb::before,
.hero-orb::after {
  display: none !important;
}
/* LEARN & COURSES CARD BACKGROUND */
.feature-card[data-go="courses"] {
  background-image:
    linear-gradient(
      rgba(3, 10, 25, 0.48),
      rgba(3, 10, 25, 0.72)
    ),
    url("./assets/image/learn-courses-card.png.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* VIDEO LEARNING HUB CARD */
.feature-card[data-go="videos"] {
  background-image:
    linear-gradient(
      rgba(3, 10, 25, 0.38),
      rgba(3, 10, 25, 0.72)
    ),
    url("./assets/image/video-learning-card.jpeg.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* TOOLS & CALCULATORS CARD */
.feature-card[data-go="tools"] {
  background-image:
    linear-gradient(
      rgba(3, 10, 25, 0.25),
      rgba(3, 10, 25, 0.65)
    ),
    url("./assets/image/tools-calculators-card.jpeg.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* KNOWLEDGE DATABASE CARD */
.feature-card[data-go="knowledge"] {
  background-image:
    linear-gradient(
      rgba(3, 10, 25, 0.30),
      rgba(3, 10, 25, 0.72)
    ),
    url("./assets/image/knowledge-database-card.jpeg.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* REPORTS & NOTES CARD */
.feature-card[data-go="reports"] {
  background-image:
    linear-gradient(
      rgba(3, 10, 25, 0.25),
      rgba(3, 10, 25, 0.65)
    ),
    url("./assets/image/reports-notes-card.jpeg.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* SUBSCRIPTION PLANS CARD */
.feature-card[data-go="subscription"] {
  background-image:
    linear-gradient(
      rgba(3, 10, 25, 0.25),
      rgba(3, 10, 25, 0.68)
    ),
    url("./assets/image/subscription-plans-card.jpeg.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
/* SAME BACKGROUND IMAGE ON ALL 6 STAT CARDS */
.stats-grid.dashboard-stats-grid .stat-card {
  background-image:
    linear-gradient(
      rgba(3, 10, 30, 0.25),
      rgba(3, 10, 30, 0.45)
    ),
    url("./assets/image/dashboard-stat-icon.jpeg.jpeg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid rgba(70, 180, 255, 0.65);
}
/* SUPPORT & ASSISTANCE CARD */
.support-assistance-card {
  background:
    linear-gradient(
      rgba(3, 10, 30, 0.25),
      rgba(3, 10, 30, 0.50)
    ),
    url("./assets/image/support-assistance-card.jpeg.jpeg") center / cover no-repeat !important;

  border: 1px solid rgba(65, 170, 255, 0.65);
  overflow: hidden;
}

/* =========================================
   COUNTRY-WISE CINEMATIC INTRO SCREENS
========================================= */

.country-cinematic-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #030713;
  color: #fff;
  font-family: inherit;
}

.country-cinematic-intro[hidden] {
  display: none !important;
}

.cinematic-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cinematic-content {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(90%, 1000px);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: cinematicContentReveal 2s ease both;
}

.cinematic-eyebrow {
  display: block;
  margin-bottom: 25px;
  color: #b7c9e8;
  font-size: 11px;
  letter-spacing: 5px;
  font-weight: 700;
}

.cinematic-content h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: 3px;
  text-shadow: 0 0 35px rgba(92, 174, 255, .4);
}

.cinematic-content p {
  margin-top: 22px;
  color: #b8c5dc;
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: 1px;
}

.cinematic-skip {
  position: absolute;
  z-index: 10;
  top: 35px;
  right: 40px;
  padding: 12px 20px;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 30px;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: .3s ease;
}

.cinematic-skip:hover {
  background: rgba(255,255,255,.18);
  border-color: #d6b76b;
  transform: translateY(-2px);
}

.cinematic-progress {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.12);
}

.cinematic-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #5b9fff, #e7c77b);
}

/* BANKING INTRO */

.banking-cinematic-intro {
  background:
    radial-gradient(ellipse at 50% 45%, #102b53 0%, #071426 45%, #02050d 100%);
}

.banking-earth {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(65vw, 570px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 30%, rgba(160,220,255,.7), transparent 8%),
    radial-gradient(circle at 65% 60%, rgba(19,106,165,.7), transparent 22%),
    radial-gradient(circle at 35% 35%, #245f91, #07172d 65%, #020711 100%);
  box-shadow:
    inset -35px -20px 80px #01040b,
    0 0 50px rgba(49,151,255,.4),
    0 0 150px rgba(39,119,255,.2);
  animation: bankingEarthRotate 18s linear infinite;
}

.banking-network {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(94,190,255,.4);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg);
  box-shadow: 0 0 30px rgba(61,157,255,.2);
  animation: bankingNetworkPulse 4s ease-in-out infinite;
}

.banking-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vw, 850px);
  height: min(35vw, 320px);
  border: 1px solid rgba(192,218,255,.25);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
}

.orbit-two {
  transform: translate(-50%, -50%) rotate(65deg);
  border-color: rgba(224,185,105,.25);
}

/* GOVERNMENT INTRO */

.government-cinematic-intro {
  background:
    radial-gradient(ellipse at 50% 55%, #202a43 0%, #0b1222 48%, #02040a 100%);
}

.government-world-map {
  position: absolute;
  inset: 8%;
  opacity: .55;
  background-image:
    radial-gradient(ellipse at 25% 35%, rgba(77,148,211,.65) 0 2px, transparent 3px),
    radial-gradient(ellipse at 65% 45%, rgba(77,148,211,.65) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 65%, rgba(77,148,211,.55) 0 2px, transparent 3px);
  background-size: 35px 35px, 42px 42px, 30px 30px;
  mask-image: radial-gradient(ellipse, #000 25%, transparent 75%);
  animation: governmentMapReveal 5s ease-in-out infinite alternate;
}

.government-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(116,169,220,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,169,220,.2) 1px, transparent 1px);
  background-size: 65px 65px;
  transform: perspective(500px) rotateX(55deg) scale(1.5);
}

.government-building {
  position: absolute;
  left: 50%;
  bottom: -15%;
  width: min(65vw, 600px);
  height: 35%;
  transform: translateX(-50%);
  opacity: .55;
  background:
    linear-gradient(to top, #03050a 15%, transparent 100%);
  border-top: 2px solid rgba(212,185,125,.5);
  box-shadow: 0 -20px 80px rgba(170,190,220,.1);
}

.government-lights {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(213,177,105,.18), transparent 55%);
  animation: governmentLightsPulse 5s ease-in-out infinite alternate;
}

/* ANIMATIONS */

@keyframes cinematicContentReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -42%);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: blur(0);
  }
}

@keyframes bankingEarthRotate {
  0% { filter: brightness(.7); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(.7); }
}

@keyframes bankingNetworkPulse {
  0%, 100% { opacity: .35; scale: .95; }
  50% { opacity: .9; scale: 1.05; }
}

@keyframes governmentMapReveal {
  from { opacity: .2; transform: scale(.95); }
  to { opacity: .8; transform: scale(1.05); }
}

@keyframes governmentLightsPulse {
  from { opacity: .4; }
  to { opacity: 1; }
}

/* MOBILE */

@media (max-width: 600px) {
  .cinematic-skip {
    top: 20px;
    right: 18px;
    padding: 9px 15px;
  }

  .cinematic-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .cinematic-content h1 {
    font-size: 32px;
    letter-spacing: 1px;
  }

  .cinematic-content p {
    font-size: 13px;
  }

  .banking-earth {
    width: 85vw;
  }
}
/* ==========================================
   COUNTRY SELECTION INTERFACE
========================================== */

.country-selection-page {
  padding: 20px 0 50px;
}

.country-selection-heading {
  text-align: center;
  margin-bottom: 38px;
}

.country-selection-heading h1 {
  margin: 15px 0;
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
}

.country-selection-heading p {
  color: #aab7ca;
  font-size: 14px;
}

.country-selection-controls {
  display: flex;
  gap: 14px;
  max-width: 750px;
  margin: 0 auto 32px;
}

.country-selection-controls input,
.country-selection-controls select {
  min-width: 0;
  flex: 1;
  padding: 14px 17px;
  color: #fff;
  background: #101a2b;
  border: 1px solid rgba(190,205,230,.18);
  border-radius: 12px;
  outline: none;
}

.country-selection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.country-selection-card {
  min-height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(145deg, #121e32, #080f1d);
  border: 1px solid rgba(190,205,230,.15);
  border-radius: 15px;
  cursor: pointer;
  transition: .3s ease;
}

.country-selection-card:hover {
  border-color: #d6b76b;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.country-card-flag {
  font-size: 30px;
}

.country-card-name {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

@media (max-width: 900px) {
  .country-selection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .country-selection-controls {
    flex-direction: column;
  }

  .country-selection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .country-selection-card {
    min-height: 85px;
    padding: 12px 8px;
    gap: 8px;
  }

  .country-card-flag {
    font-size: 24px;
  }

  .country-card-name {
    font-size: 12px;
  }
}
/* PAGE BACK & FORWARD CONTROLS */

.page-history-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 15px;
}

.page-history-controls button {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6b76b;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(214,183,107,.25);
  border-radius: 10px;
  cursor: pointer;
  transition: .25s ease;
}

.page-history-controls button:hover {
  color: #fff;
  background: rgba(214,183,107,.16);
  border-color: #d6b76b;
  transform: translateY(-2px);
}

.page-history-controls button:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
}
.page-history-controls button {
  width: auto;
  min-width: 90px;
  padding: 0 12px;
  gap: 7px;
  flex-direction: row;
  font-size: 13px;
  font-weight: 600;
}
/* REMOVE BLUE GLOBE & ORBIT LINES — BANKING INTRO ONLY */

.banking-cinematic-intro .banking-earth,
.banking-cinematic-intro .banking-network,
.banking-cinematic-intro .banking-orbit,
.banking-cinematic-intro .orbit-two {
  display: none !important;
}
/* GLOBAL BANKING — FULL SCREEN WORLD IMAGE */

.banking-cinematic-intro {
  background-image: url("./assets/image/global-banking-world.jpg.jpeg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
/* GLOBAL GOVERNMENT — FULL SCREEN IMAGE */

.government-cinematic-intro {
  background-image: url("./assets/image/global-government-world.jpg.jpeg.jpeg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* COUNTRY FLAGS VISIBILITY FIX */
.country-card-flag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 34px !important;
  line-height: 1.2;
  min-width: 46px;
  min-height: 46px;
  flex-shrink: 0;
}
/* COUNTRY FLAG IMAGE DISPLAY */
.country-card-flag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 36px;
  min-width: 48px;
  flex-shrink: 0;
}

.country-card-flag img {
  display: block !important;
  width: 42px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  visibility: visible !important;
  opacity: 1 !important;
}
/* GOLDEN FRAME — ALL COUNTRY CARDS */

.country-selection-card {
  position: relative !important;
  isolation: isolate;
}

.country-selection-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("./assets/image/country-wise-golden-frame.png.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 5;
  pointer-events: none;
}

/* SETTINGS & SECURITY CENTER */

.settings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.settings-section {
  padding: 22px;
  min-width: 0;
  border: 1px solid rgba(214,173,87,.16);
  background: linear-gradient(145deg, rgba(18,29,52,.96), rgba(8,14,29,.98));
  border-radius: 16px;
}

.settings-section-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.settings-section-heading h3 {
  margin: 0 0 5px;
  color: #f2f5fb;
}

.settings-section-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(214,173,87,.35);
  border-radius: 12px;
  color: #d6ad57;
  font-size: 23px;
}

.settings-section-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.settings-row-info strong {
  color: #f3f5fa;
  font-size: 13px;
}

.settings-row-info small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.settings-control {
  flex-shrink: 0;
}

.settings-select {
  max-width: 190px;
  background: #090f20;
  border: 1px solid rgba(214,173,87,.25);
  color: #fff;
  padding: 9px 10px;
  border-radius: 7px;
  outline: none;
}

.settings-select:focus {
  border-color: #d6ad57;
}

.settings-toggle {
  width: 18px;
  height: 18px;
  accent-color: #d6ad57;
  cursor: pointer;
}

.settings-status {
  color: #d6ad57;
  font-size: 11px;
}

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .settings-section {
    padding: 15px;
  }

  .settings-row {
    align-items: flex-start;
  }

  .settings-select {
    max-width: 145px;
    font-size: 11px;
  }
}

/* SETTINGS NAVIGATION WORKSPACE */

.settings-workspace {
  display: grid;
  grid-template-columns: 310px minmax(0,1fr);
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}

.settings-sidebar,
.settings-detail-panel {
  background: linear-gradient(145deg,#111c32,#080e1d);
  border: 1px solid rgba(214,173,87,.18);
  border-radius: 16px;
  overflow: hidden;
}

.settings-sidebar {
  padding: 18px 12px;
}

.settings-sidebar-heading {
  padding: 5px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-sidebar-heading span {
  color: #d6ad57;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.settings-sidebar-heading small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1px;
}

.settings-nav-group {
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
}

.settings-nav-group.active {
  background: rgba(214,173,87,.055);
  border: 1px solid rgba(214,173,87,.16);
}

.settings-nav-category {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 11px;
  border: 0;
  background: transparent;
  color: #e8edf7;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}

.settings-nav-category:hover,
.settings-nav-group.active .settings-nav-category {
  background: rgba(214,173,87,.09);
}

.settings-nav-icon {
  width: 27px;
  color: #d6ad57;
  font-size: 19px;
  text-align: center;
  flex-shrink: 0;
}

.settings-nav-arrow {
  margin-left: auto;
  color: #d6ad57;
  font-size: 19px;
}

.settings-sublist {
  padding: 4px 9px 10px 43px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-subtopic {
  padding: 10px 11px;
  border: 0;
  border-left: 2px solid rgba(255,255,255,.10);
  background: transparent;
  color: #aab6ca;
  text-align: left;
  border-radius: 0 7px 7px 0;
  font-size: 11px;
  cursor: pointer;
}

.settings-subtopic:hover,
.settings-subtopic.active {
  color: #e7c477;
  border-left-color: #d6ad57;
  background: rgba(214,173,87,.09);
}

.settings-detail-panel {
  min-height: 340px;
  padding: 27px;
}

.settings-detail-heading {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 22px;
}

.settings-detail-category {
  color: #d6ad57;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.settings-detail-heading h2 {
  color: #f4f6fb;
  font-size: 22px;
  margin: 10px 0 7px;
}

.settings-detail-heading p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.settings-detail-content {
  max-width: 850px;
}

.settings-detail-content .settings-row {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  padding: 18px;
  border-radius: 11px;
}

@media(max-width:900px) {
  .settings-workspace {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    max-height: 540px;
    overflow-y: auto;
  }
}

@media(max-width:560px) {
  .settings-detail-panel {
    padding: 17px;
  }

  .settings-detail-heading h2 {
    font-size: 19px;
  }
}