/* ==========================================
   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 ---- */
.sc-dash{background:#fff;display:flex}
.ds-side{width:115px;background:#fafafc;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.ds-side-logo{display:flex;align-items:center;gap:5px;padding:0 12px 14px}
.ds-side-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.ds-side-logo span{font-size:12px;font-weight:600;color:#1a1a1a}
.ds-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}
.ds-nav i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.2;display:block}
.ds-nav.act{background:#4285f4;color:#fff;font-weight:600}
.ds-nav.act i{opacity:.5}
.ds-body{flex:1;padding:12px 16px;overflow:hidden}
.ds-top{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-bottom:12px}
.ds-uname{font-size:10px;color:#888}
.ds-uname b{color:#333}
.ds-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}
.ds-cards{display:flex;gap:10px;margin-bottom:12px}
.ds-card{flex:1;border:1px solid #eee;border-radius:11px;padding:12px;position:relative;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.ds-card.pop{opacity:1;transform:translateY(0)}
.ds-card-lbl{font-size:10px;color:#aaa;margin-bottom:1px}
.ds-card-val{font-size:20px;font-weight:700;color:#1a1a1a}
.ds-card-ico{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ds-card-ico svg{width:14px;height:14px}
.ds-chart{border:1px solid #eee;border-radius:11px;padding:12px 14px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.ds-chart.pop{opacity:1;transform:translateY(0)}
.ds-chart-hd{font-size:11px;font-weight:600;color:#1a1a1a;margin-bottom:12px;display:flex;justify-content:space-between}
.ds-chart-hd span{font-size:9px;color:#aaa;background:#f5f5f3;padding:2px 7px;border-radius:4px}
.ds-bars{display:flex;align-items:stretch;gap:5px;height:65px}
.ds-bar-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.ds-bar{width:100%;max-width:24px;background:#4285f4;border-radius:3px 3px 0 0;height:0;transition:height .7s cubic-bezier(.34,1.56,.64,1)}
.ds-bar-l{font-size:8px;color:#ccc;margin-top:4px}

/* ---- 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 ---- */
.sc-announce{background:#f0f0ee;display:flex}
.an-side{width:115px;background:#fafafc;border-right:1px solid #eee;padding:12px 0;display:flex;flex-direction:column;gap:1px}
.an-side-logo{display:flex;align-items:center;gap:5px;padding:0 12px 14px}
.an-side-logo i{width:18px;height:18px;background:#4285f4;border-radius:5px;display:block}
.an-side-logo span{font-size:12px;font-weight:600;color:#1a1a1a}
.an-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}
.an-nav i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.2;display:block}
.an-body{flex:1;padding:14px 16px;overflow:hidden;position:relative}
.an-top{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-bottom:8px}
.an-uname{font-size:10px;color:#888}
.an-uname b{color:#333}
.an-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}
.an-breadcrumb{font-size:10px;color:#888;margin-bottom:12px}
.an-breadcrumb b{color:#1a1a1a;font-weight:600}
.an-tabs{display:flex;gap:0;margin-bottom:14px}
.an-tab{padding:7px 14px;font-size:10px;font-weight:600;border:none;background:#eee;color:#888;cursor:default;border-radius:6px 6px 0 0;transition:all .15s}
.an-tab.act{background:#4285f4;color:#fff}

.an-empty{border:1px solid #ddd;border-radius:8px;padding:20px;text-align:center;color:#aaa;font-size:11px;background:#fff}
.an-empty-ico{font-size:16px;margin-bottom:4px;opacity:.4}
.an-fab{position:absolute;bottom:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#4285f4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:300;cursor:default;box-shadow:0 3px 12px rgba(66,133,244,.3);transition:transform .15s}
.an-fab.hl{transform:scale(1.1)}

/* Slide panel */
.an-panel{position:absolute;top:0;right:0;bottom:0;width:55%;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.1);z-index:20;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:16px 18px;overflow-y:auto}
.an-panel.on{transform:translateX(0)}
.an-panel-close{position:absolute;top:10px;right:14px;font-size:16px;color:#aaa;cursor:default}
.an-panel-art{height:80px;background:#f0f2f8;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.an-panel-art-person{width:40px;height:50px;background:#4285f4;border-radius:10px;position:relative}
.an-panel-art-person::before{content:'';position:absolute;top:-12px;left:10px;width:20px;height:20px;background:#f5c6a0;border-radius:50%}
.an-panel-art-dots{position:absolute;top:10px;right:20px;display:flex;gap:5px;flex-wrap:wrap;width:40px}
.an-panel-art-dots i{width:8px;height:8px;border-radius:50%;display:block}
.an-panel-grp{margin-bottom:10px}
.an-panel-lbl{font-size:10px;font-weight:500;color:#777;margin-bottom:3px;display:block}
.an-panel-inp{width:100%;height:32px;border:1.5px solid #ddd;border-radius:6px;background:#fff;padding:0 10px;font-size:11px;color:#1a1a1a;display:flex;align-items:center;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.an-panel-inp.fc{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.1)}
.an-panel-textarea{width:100%;height:70px;border:1.5px solid #ddd;border-radius:6px;background:#fff;padding:8px 10px;font-size:11px;color:#1a1a1a;transition:border-color .2s,box-shadow .2s;overflow:hidden;line-height:1.5;display:block}
.an-panel-textarea.fc{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.1)}
.an-panel-btn{width:100%;height:34px;background:#4285f4;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s;cursor:default;margin-top:10px}
.an-panel-btn.press{transform:scale(.97);background:#3367c7}
.an-panel-btn .ldot{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:none;animation:spin .5s linear infinite}
.an-panel-btn.ld .ldot{display:inline-block}

/* Announcement item (after creation) */
.an-item{border:1px solid #ddd;border-radius:8px;padding:12px 14px;background:#fff;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.an-item.pop{opacity:1;transform:translateY(0)}



.an-item.found{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.12)}
.an-search-box.fc{border-color:#4285f4 !important;box-shadow:0 0 0 2px rgba(66,133,244,.1)}

/* ---- FULL DASHBOARD (for dashboard article) ---- */





























/* Mini bar chart */




/* SVG donut/pie */











/* Similarity ranges line */






/* Dashboard highlight for individual sections */



/* User management highlights above blur */





/* Individual action card highlight */










/* ---- 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}
  
  
  
  
  
  .an-panel{width:70%}
}

/* ======================================================================
   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 the canonical similarity-detection watch-first.
   The scene markup (.sc / .ds-* / .an-*) above is reused as tour scenes.
   ============================================================ */
.sim-tour .ga-viewport { background: #0b1430; cursor: pointer; }

/* Title card layer (typed section titles between scenes) */
.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); }

/* Scene stage */
.tour-stage { position: absolute; inset: 0; }
.tour-scene {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 14px 92px; 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(620px, 100%); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.45); }

/* Guided cursor */
.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); } }

/* Blur / focus spotlight */
.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 scene elements to their visible end-state ---
   Both scenes (the dashboard and the Announcements page) are taller than the
   player viewport, so render at natural size then scale the whole scene down to
   fit instead of being clipped. */
.tour-scene .sc { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
.tour-scene .sc-dash,
.tour-scene .sc-announce {
  display: flex; background: #fff; border-radius: 12px; overflow: hidden;
  width: 660px; height: 410px;
  transform: scale(.6); transform-origin: center center; flex: 0 0 auto;
}
.tour-scene .sc-announce { background: #f0f0ee; }
.tour-scene .ds-body,
.tour-scene .an-body { overflow: hidden; }
/* Pin reused cards / chart / panel / item to their visible state. */
.tour-scene .ds-card,
.tour-scene .ds-chart { opacity: 1 !important; transform: none !important; }
.tour-scene .ds-bar { transition: none !important; }
.tour-scene .an-panel { opacity: 1 !important; transition: none !important; }
.tour-scene .an-item { opacity: 1 !important; transform: none !important; }
/* The compose panel is an absolute slide-over. The generic .li-focus spotlight
   switches elements to position:relative + scale, which detaches the panel from
   the page and drops it into normal flow. Keep it anchored, just add the ring. */
.tour-scene .an-panel.li-focus {
  position: absolute; transform: none;
  box-shadow: -4px 0 24px rgba(0,0,0,.1), 0 0 0 2px rgba(59,91,253,.35);
}

/* ============================================================
   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 mocks so their rendered WIDTH fits a phone column. */
@media (max-width: 640px) {
  .tour-scene .sc-dash,
  .tour-scene .sc-announce { transform: scale(.44); }
}