/* ==========================================
   DRILLBIT GUIDE ANIMATIONS v3
   ========================================== */

/* === CONTAINER === */
.guide-anim{border:1px solid #e2e2e0;border-radius:16px;overflow:hidden;margin:28px 0 32px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.ga-slides{position:relative}
.ga-slide{display:none}
.ga-slide.active{display:block}

.guide-anim{position:relative;z-index:0;overflow:hidden;border-radius:14px;margin-bottom:24px;border:1px solid #e5e5e0;background:#fff}

/* === VIEWPORT (animation stage) === */
.ga-viewport{position:relative;height:340px;overflow:hidden;background:#eceae6}

/* === INFO === */
.ga-info{padding:18px 22px 14px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-step-badge{display:inline-block;font-size:10px;font-weight:700;color:#1967D2;background:#E8F0FE;padding:4px 12px;border-radius:20px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px}
.ga-info h3{font-size:16px;font-weight:600;margin-bottom:4px;color:#1a1a1a;text-align:left;hyphens:manual;-webkit-hyphens:manual}
.ga-info p{font-size:13px;color:#6b6b6b;line-height:1.55;margin:0;text-align:left;hyphens:manual;-webkit-hyphens:manual;word-spacing:normal}

/* === CONTROLS === */
.ga-controls{display:none}
.ga-viewport{cursor:pointer;position:relative}
.ga-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-overlay.on{opacity:1;pointer-events:auto}
.ga-overlay-btn{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ga-overlay-btn svg{width:22px;height:22px;color:#333;margin-left:3px}
.ga-overlay-btn .reset-ico{position:absolute;bottom:10px;right:10px}
.ga-reset-float{position:absolute;bottom:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:201;opacity:0;pointer-events:none;transition:opacity .25s ease}
.ga-reset-float.on{opacity:1;pointer-events:auto}
.ga-reset-float svg{width:13px;height:13px;color:#333}
.ga-progress{height:3px;background:#eee;border-radius:2px}
.ga-progress-bar{height:100%;background:#4285f4;transition:width .5s ease;border-radius:2px}

/* === CURSOR === */
.ga-cursor{position:absolute;width:20px;height:24px;z-index:100;pointer-events:none;opacity:0;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.ga-cursor.vis{opacity:1}

/* === SCENE: each phase lives in a .sc layer === */
.sc{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;font-family:var(--db-font,system-ui,sans-serif)}
.sc.on{opacity:1;pointer-events:auto}

/* ---- SCENE 1: EMAIL ---- */



@keyframes npop{0%{opacity:0;transform:translateX(-50%) scale(.5) translateY(-8px)}100%{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}}

@keyframes ngone{to{opacity:0;transform:translateX(-50%) scale(.9) translateY(-8px)}}







@keyframes ecpop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}














@keyframes egl{0%,100%{opacity:.3;box-shadow:0 0 0 0 rgba(66,133,244,.2)}50%{opacity:1;box-shadow:0 0 0 6px rgba(66,133,244,0)}}



/* ---- SCENE 2: HOMEPAGE ---- */













/* Dropdown */







/* ---- SCENE 3: LOGIN ---- */

























@keyframes spin{to{transform:rotate(360deg)}}

/* Typing cursor */

@keyframes tcb{50%{opacity:0}}

/* ---- SCENE 4: DASHBOARD ---- */






























/* ---- TIP CALLOUT (inline, not overlay) ---- */
.ga-tip{position:absolute;z-index:40;background:#fffde7;border:1px solid #f0e68c;border-radius:10px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.08);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .35s ease,transform .35s ease;display:flex;align-items:flex-start;gap:8px;max-width:280px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-tip.on{opacity:1;transform:translateY(0)}
.ga-tip-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.ga-tip-ico svg{width:20px;height:20px}
.ga-tip-txt{font-size:11px;color:#5d4e00;line-height:1.5}
.ga-tip-txt b{font-weight:600;color:#3e3300}

/* ---- ERROR POPUP (kept for other uses) ---- */









/* ---- LOGIN FIELD ERROR STATE ---- */


@keyframes fshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---- SUCCESS CHECKMARK ---- */






/* ---- TOAST NOTIFICATION ---- */
.ga-toast{position:absolute;top:10px;right:10px;background:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:8px;z-index:50;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;max-width:260px;font-family:var(--db-font,system-ui,sans-serif)}
.ga-toast.on{opacity:1;transform:translateY(0)}
.ga-toast-ico{width:22px;height:22px;flex-shrink:0}
.ga-toast-ico svg{width:22px;height:22px}
.ga-toast-txt{font-size:11px;color:#333;line-height:1.4}
.ga-toast-bar{position:absolute;bottom:0;left:10px;right:10px;height:3px;background:#eee;border-radius:2px;overflow:hidden}
.ga-toast-bar-fill{height:100%;background:#1D9E75;width:100%;border-radius:2px}
.ga-toast-bar-fill.run{animation:toastBar 2s linear forwards}
@keyframes toastBar{from{width:100%}to{width:0%}}

/* ---- FORGOT PASSWORD PAGE ---- */














/* ---- RESET PASSWORD PAGE ---- */




/* ---- RESET EMAIL CARD (compact) ---- */













/* ---- PROFILE DROPDOWN ---- */



















/* ---- USER DASHBOARD (after switch) ---- */


































/* ---- ACCOUNT INFO PAGE ---- */



























/* ---- CHANGE PASSWORD PAGE ---- */























/* ---- ANNOUNCEMENTS PAGE ---- */























/* Slide panel */



















/* Announcement item (after creation) */








/* ---- FULL DASHBOARD (for dashboard article) ---- */
.sc-dashfull{background:#fff;display:flex}
.df-side{width:115px;background:#fafafc;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.df-side-logo{display:flex;align-items:center;gap:5px;padding:0 12px 14px}
.df-side-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.df-side-logo span{font-size:12px;font-weight:600;color:#1a1a1a}
.df-nav{padding:8px 12px;font-size:10px;color:#999;display:flex;align-items:center;gap:7px;margin-right:6px;border-radius:0 7px 7px 0}
.df-nav i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.2;display:block}
.df-nav.act{background:#4285f4;color:#fff;font-weight:600}
.df-nav.act i{opacity:.5}
.df-body{flex:1;padding:10px 14px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
.df-body::-webkit-scrollbar{display:none}
.df-top{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-bottom:8px}
.df-uname{font-size:10px;color:#888}
.df-uname b{color:#333}
.df-av{width:28px;height:28px;border-radius:50%;background:#9c5fff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.df-stats{display:flex;gap:8px;margin-bottom:10px}
.df-stat{flex:1;border:1px solid #eee;border-radius:10px;padding:10px;position:relative;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.df-stat.pop{opacity:1;transform:translateY(0)}
.df-stat-lbl{font-size:9px;color:#aaa;margin-bottom:1px}
.df-stat-val{font-size:18px;font-weight:700;color:#1a1a1a}
.df-stat-ico{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.df-stat-ico svg{width:12px;height:12px}
.df-row{display:flex;gap:8px;margin-bottom:8px}
.df-panel{flex:1;border:1px solid #eee;border-radius:10px;padding:10px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;min-height:80px;position:relative;overflow:hidden}
.df-panel.pop{opacity:1;transform:translateY(0)}
.df-panel-hd{font-size:10px;font-weight:600;color:#1a1a1a;margin-bottom:2px;display:flex;justify-content:space-between;align-items:center}
.df-panel-hd small{font-size:8px;color:#bbb;font-weight:400}
.df-panel-hd .df-hm{width:14px;height:10px;display:flex;flex-direction:column;gap:2px;cursor:default}
.df-hm span{display:block;width:100%;height:2px;background:#ccc;border-radius:1px}
/* Mini bar chart */
.df-mini-bars{display:flex;align-items:stretch;gap:3px;height:65px;margin-top:6px}
.df-mini-bar{width:100%;background:#4285f4;border-radius:2px 2px 0 0;min-width:6px;height:0;transition:height .7s cubic-bezier(.34,1.56,.64,1)}
.df-mini-bar-lbl{font-size:7px;color:#ccc;text-align:center;margin-top:2px}
.df-mini-bar-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
/* SVG donut/pie */
.df-donut{width:70px;height:70px;margin:4px auto}
.df-donut circle{fill:none;stroke-width:8;transition:stroke-dasharray 1.2s ease}
.df-donut text{font-size:8px;font-weight:600;fill:#1a1a1a;font-family:var(--db-font,system-ui,sans-serif)}
.df-donut .donut-track{stroke:#eee}
.df-donut .donut-fill{stroke:#4285f4;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.2s ease}
.df-donut .donut-fill2{stroke:#1a3a8a;stroke-linecap:round;stroke-dasharray:0 999;transition:stroke-dasharray 1.2s ease}
.df-pie{width:60px;height:60px;border-radius:50%;margin:4px auto;position:relative;overflow:hidden;background:conic-gradient(#4285f4 0% 0%,#eee 0% 100%);transition:background 1s ease}
.df-legend{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;justify-content:center}
.df-legend-item{display:flex;align-items:center;gap:3px;font-size:7px;color:#888}
.df-legend-item i{width:6px;height:6px;border-radius:50%;display:block}
.df-renew{font-size:8px;color:#4285f4;text-decoration:underline;margin-top:4px;display:block}
/* Similarity ranges line */
.df-line-chart{height:50px;margin-top:6px;position:relative}
.df-line-chart svg{width:100%;height:100%}
.df-line-chart polyline{fill:none;stroke:#4285f4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:999;stroke-dashoffset:999;transition:stroke-dashoffset 1.5s ease}
.df-line-chart polyline.drawn{stroke-dashoffset:0}
.df-line-labels{display:flex;justify-content:space-between;font-size:7px;color:#ccc;margin-top:2px}

/* Dashboard highlight for individual sections */
.df-stat.hl,.df-panel.hl{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.12);transform:scale(1.04);z-index:15;position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;background:#fff}
.df-blur-overlay{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:10;opacity:0;pointer-events:none;transition:opacity .3s ease}
.df-blur-overlay.on{opacity:1}
/* User management highlights above blur */





/* Individual action card highlight */






.df-tooltip{position:absolute;background:#fffef5;color:#333;font-size:9px;padding:8px 12px;border-radius:8px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s ease;white-space:normal;font-family:var(--db-font,system-ui,sans-serif);line-height:1.5;max-width:220px;letter-spacing:.2px;box-shadow:0 4px 20px rgba(0,0,0,.12);border:1px solid #f0e8c8}
.df-tooltip.on{opacity:1}
.df-tooltip::after{content:'';position:absolute;top:-5px;left:20px;width:10px;height:10px;background:#fffef5;transform:rotate(45deg);border-radius:2px;border-left:1px solid #f0e8c8;border-top:1px solid #f0e8c8}

/* ---- USER MANAGEMENT PAGE ---- */










































/* Highlight row */



/* Confirmation dialog overlay */













/* Edit/Add User slide panel */














/* Stats popup overlay */

























/* ---- FAB POPUP MENU ---- */










/* ---- ADD USER PANEL (slide-over right) ---- */




















/* ---- ADD MULTIPLE USERS: upload page scene ---- */

























/* ---- CSV preview modal ---- */

























/* ---- ADMIN REPORTS PAGE SCENE ---- */


























/* Download notification popup (browser-like) */












/* ---- REPORTS RESULTS POPUP ---- */


















/* Score badges */






/* Form filled state */





/* ---- MAIL DIALOG (submissions report) ---- */













/* Confirm dialogs inside reports need to be above results popup (z-index:25) */


/* ---- EMAIL PREVIEW (submissions report) ---- */














/* ---- REPOSITORY SCENES ---- */













/* Upload page scene */






















/* Metadata form below upload */















/* Repo select dropdown */




/* Repo delete button */





/* ---- INTEGRATIONS PAGE SCENE ---- */

























/* Tooltip cards for overview */





/* ---- INTEGRATION SETUP PANEL (slide-over) ---- */













/* Know More link on card */




/* Moodle details page */















/* ---- SECURITY SETTINGS SCENE ---- */















/* OTP login page */
















/* ---- SUPPORT CENTRE SCENE ---- */



















/* Create ticket panel */

















/* Ticket details page */


















/* ---- USER MY FOLDERS SCENE ---- */























/* User profile dropdown */













/* User account info page */












/* === RESPONSIVE === */
@media(max-width:640px){
  .ga-viewport{height:280px}
  
  
  
  .ds-side,.ud-side,.ai-side,.cp-side,.an-side,.df-side,.um-side{width:80px}
  
  
  
  
  
  
}

/* ======================================================================
   USER SECTION ANIMATIONS - NEW SCENES
   ====================================================================== */

/* --- Shared user top bar & breadcrumb bar --- */





/* --- USER CHANGE PASSWORD (uChangePw) --- */






/* --- USER DASHBOARD (uDashOverview, uDashCharts, uDashDocTypes) --- */

























/* Charts */
















/* Doc types */











/* --- FOLDER MANAGEMENT (uFolderTable, uFolderView) --- */















/* --- NEW FOLDER (uNewFolder) --- */






















/* --- FILE UPLOAD (uUploadEnglish, uUploadRegional) --- */




























/* --- SUBMISSIONS (uSubOverview, uSubAnalysis) --- */

















/* Analysis page */









































/* --- DOC ERRORS (uDocError) --- */









/* --- REPOSITORY (uRepoUpload, uRepoManage) --- */






















/* --- MFA (uMfa) --- */






/* --- SUPPORT CENTRE (uSupCreate, uSupView) --- */






/* --- FOLDER TABLE ROWS --- */


/* --- FOLDER TABLE ICON (matches screenshot blue folder) --- */



/* --- SUBMISSIONS TABLE ROWS --- */



/* ============================================================
   WATCH-FIRST PLAYER CHROME (S1 conversion)
   Shared look with pro-admin-logging-in.css. The scene markup
   (.sc / .df-*) above is reused as the single tour scene.
   ============================================================ */
.sim-tour .ga-viewport { background: #0b1430; cursor: pointer; }

.tour-card {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: radial-gradient(120% 120% at 50% 0%, #16245a 0%, #0b1430 70%);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.tour-card.on { opacity: 1; }
.tour-card-logo { display: inline-flex; align-items: center; gap: 10px; }
.tour-card-brand-label { font-weight: 600; font-size: 12px; color: #9fb0e0; letter-spacing: .14em; text-transform: uppercase; }
.tour-card-title { font: 700 24px/1.25 var(--db-font, system-ui, sans-serif); color: #fff; text-align: center; max-width: 80%; min-height: 30px; }
.tour-card-caret { width: 2px; height: 22px; background: #6f8be0; display: none; }
.tour-card-logo-img { height: 30px; background: #fff; border-radius: 8px; padding: 7px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }

.tour-stage { position: absolute; inset: 0; }
.tour-scene {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 16px 96px; opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s ease; transform: scale(.985);
}
.tour-scene.on { opacity: 1; pointer-events: auto; transform: scale(1); }
.tour-scene .sc { position: relative; width: min(640px, 100%); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.45); }

.tour-src-badge { position: absolute; left: 10px; bottom: 10px; z-index: 50; font: 700 11px/1 system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 10px; opacity: 0; transition: opacity .2s ease; }
.tour-src-badge.on { opacity: 1; }
.tour-src-badge[data-kind="mp3"] { background: rgba(20,71,230,.85); }
.tour-src-badge[data-kind="speech"] { background: rgba(22,120,74,.85); }
.tour-src-badge[data-kind="silent"] { background: rgba(120,120,120,.85); }

.tour-cursor { position: absolute; top: 0; left: 0; z-index: 60; width: 22px; height: 22px; margin: -3px 0 0 -3px; opacity: 0; pointer-events: none; transform: translate(40px,40px); transition: transform .85s cubic-bezier(.45,.05,.2,1), opacity .3s ease; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.tour-cursor.on { opacity: 1; }
.tour-cursor svg { width: 22px; height: 22px; display: block; }
.tour-cursor-ring { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(59,91,253,.9); opacity: 0; transform: scale(.3); }
.tour-cursor.clicking .tour-cursor-ring { animation: liClick .36s ease-out; }
@keyframes liClick { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }

.li-blur { filter: blur(2.2px) saturate(.9); opacity: .5; transition: filter .4s ease, opacity .4s ease, transform .4s ease; }
.li-focus { position: relative; z-index: 6; transform: scale(1.015); transition: transform .4s ease, box-shadow .4s ease; box-shadow: 0 0 0 2px rgba(59,91,253,.35), 0 18px 40px rgba(0,0,0,.45); border-radius: 12px; }

/* --- Watch-first: force reused dashboard elements to their visible end-state ---
   The original reveal classes (.pop, bar heights, donut dash, drawn polyline,
   pie gradient) were driven by the old step animator, which no longer runs.
   In the tour the dashboard is shown whole, so pin everything visible. */
.tour-scene .sc { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
/* The full dashboard is taller than the player viewport. Render it at its
   natural size, then scale the whole board down so all rows are visible
   inside the frame instead of being clipped. */
.tour-scene[data-scene="0"] { padding: 10px 10px 92px; }
.tour-scene .sc-dashfull {
  width: 660px; height: 540px;
  transform: scale(.55); transform-origin: center center;
  flex: 0 0 auto;
}
.tour-scene .df-body { overflow: hidden; }
.tour-scene .df-stat,
.tour-scene .df-panel { opacity: 1 !important; transform: none !important; }
.tour-scene .df-mini-bar { height: 60% !important; }
.tour-scene .df-mini-bar-c:nth-child(odd) .df-mini-bar { height: 45% !important; }
.tour-scene .df-mini-bar-c:nth-child(3n) .df-mini-bar { height: 80% !important; }
.tour-scene .df-donut .donut-fill { stroke-dasharray: 120 999 !important; }
.tour-scene .df-donut .donut-fill2 { stroke-dasharray: 48 999 !important; }
.tour-scene .df-line-chart polyline { stroke-dashoffset: 0 !important; }
.tour-scene .df-pie { background: conic-gradient(#4285f4 0% 60%, #4caf50 60% 80%, #f0a030 80% 100%) !important; }

/* ============================================================
   WATCH-FIRST VIDEO PLAYER (tour block)
   ============================================================ */
.guide-anim.sim-tour .ga-viewport { height: 424px; }

.ga-player {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 210;
  padding: 30px 13px 11px;
  background: linear-gradient(to top, rgba(3,8,24,.96) 0%, rgba(3,8,24,.66) 55%, rgba(3,8,24,0) 100%);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  user-select: none; -webkit-user-select: none;
  opacity: .55; transition: opacity .25s ease;
}
.sim-tour .ga-viewport:hover .ga-player,
.ga-player.is-playing,
.ga-player:focus-within,
.sim-tour .ga-overlay.on ~ .ga-player { opacity: 1; }

/* scrub bar */
.ga-pl-track {
  position: relative; height: 5px; border-radius: 4px;
  background: rgba(255,255,255,.26); cursor: pointer; touch-action: none;
  transition: height .12s ease;
}
.ga-pl-track:hover, .ga-player:focus-within .ga-pl-track { height: 7px; }
.ga-pl-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 0;
  background: #4f7cff; border-radius: 4px;
}
.ga-pl-knob {
  position: absolute; top: 50%; inset-inline-start: 0;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%); box-shadow: 0 1px 5px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .12s ease;
}
[dir="rtl"] .ga-pl-knob { transform: translate(50%, -50%); }
.ga-pl-track:hover .ga-pl-knob, .ga-player:focus-within .ga-pl-knob { opacity: 1; }

/* control row */
.ga-pl-row { display: flex; align-items: center; gap: 3px; margin-top: 9px; }
.ga-pl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 32px; padding: 0 7px; border: 0; border-radius: 8px;
  background: transparent; color: #fff; cursor: pointer;
  font: 600 12px/1 system-ui, sans-serif;
}
.ga-pl-btn:hover { background: rgba(255,255,255,.16); }
.ga-pl-btn:focus-visible { outline: 2px solid #4f7cff; outline-offset: 1px; }
.ga-pl-btn svg { width: 19px; height: 19px; display: block; }
.ga-pl-play svg { width: 21px; height: 21px; }
.ga-pl-time {
  color: #fff; font: 600 12.5px/1 system-ui, sans-serif; margin-inline-start: 7px;
  letter-spacing: .3px; opacity: .96; font-variant-numeric: tabular-nums;
}
.ga-pl-spacer { flex: 1; }

/* speed menu */
.ga-pl-rate { position: relative; }
.ga-pl-rate-btn { min-width: 40px; font-weight: 700; }
.ga-pl-rate-menu {
  position: absolute; bottom: 40px; inset-inline-end: 0; display: none;
  flex-direction: column; min-width: 104px; padding: 5px;
  background: rgba(12,18,40,.98); border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.ga-pl-rate.open .ga-pl-rate-menu { display: flex; }
.ga-pl-rate-opt {
  background: transparent; border: 0; color: #dfe5fb; cursor: pointer;
  font: 600 12.5px/1 system-ui, sans-serif; padding: 9px 11px;
  text-align: start; border-radius: 7px;
}
.ga-pl-rate-opt:hover { background: rgba(255,255,255,.12); }
.ga-pl-rate-opt.on { color: #fff; background: rgba(79,124,255,.4); }

/* "Loading voice…" buffer (covers the scene while Web Speech voices resolve) */
.ga-buffer {
  position: absolute; inset: 0; z-index: 205;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 0 24px; text-align: center;
  background: rgba(8,14,34,.82); color: #dfe5fb;
  font: 600 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ga-buffer.on { opacity: 1; pointer-events: auto; }
.ga-buffer-spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #4f7cff;
  animation: gaBufSpin .8s linear infinite;
}
@keyframes gaBufSpin { to { transform: rotate(360deg); } }
.ga-buffer-txt { max-width: 260px; }

/* Info ("i") button - shown only in silent mode (no installed voice) */
.ga-pl-info-wrap { position: relative; display: none; align-items: center; gap: 6px; }
.ga-pl-info-wrap.show { display: inline-flex; }
.ga-pl-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); color: #e7ecff;
  font: 700 10.5px/1 system-ui, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.ga-pl-info-pop {
  position: absolute; bottom: 40px; inset-inline-end: 0; display: none;
  width: 232px; padding: 11px 13px; z-index: 20;
  background: rgba(12,18,40,.98); border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.5);
  color: #dfe5fb; font: 500 12px/1.5 system-ui, sans-serif; text-align: start;
}
.ga-pl-info-wrap.open .ga-pl-info-pop { display: block; }

/* Mobile: shrink reused page mock so its rendered WIDTH fits a phone column. */
@media (max-width: 640px) {
  .tour-scene .sc-dashfull { transform: scale(.42); }
}