/* ==========================================
   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-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)}




/* Mini bar chart */




/* SVG donut/pie */











/* Similarity ranges line */






/* 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}


/* User management highlights above blur */


.um-fab.hl{z-index:15;box-shadow:0 0 0 4px rgba(66,133,244,.2);transform:scale(1.1)}


/* Individual action card highlight */










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









































.um-fab{position:absolute;bottom:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#4285f4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;cursor:default;box-shadow:0 3px 12px rgba(66,133,244,.3)}
/* Highlight row */

.um-tab.hl,.um-fab.hl,.um-act-btn.hl,.um-stats-ico.hl{box-shadow:0 0 0 3px rgba(66,133,244,.15);border-radius:6px}

/* 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) --- */

.unf-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);width:260px;max-height:90%;overflow-y:auto;background:#fff;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.18);padding:14px 18px;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;font-family:var(--db-font,system-ui,sans-serif)}
.unf-panel.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}

.unf-close{position:absolute;top:8px;right:12px;font-size:14px;color:#999;cursor:default}
.unf-grp{margin-bottom:6px}
.unf-lbl{font-size:8px;font-weight:600;color:#d32f2f;margin-bottom:2px}
.unf-inp{border:1px solid #ddd;border-radius:5px;padding:5px 8px;font-size:8px;min-height:14px;background:#fff}
.unf-inp.fc{border-color:#4285f4;box-shadow:0 0 0 2px rgba(66,133,244,.15)}
.unf-toggles{margin-bottom:6px}
.unf-trow{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:8px;color:#444;border-bottom:1px solid #f5f5f5}
.unf-toggle{display:flex;border-radius:4px;overflow:hidden;border:1px solid #ddd}
.unf-t-yes,.unf-t-no{padding:2px 8px;font-size:7px;font-weight:600;cursor:default;transition:background .2s,color .2s}
.unf-t-yes{color:#999;background:#fff}
.unf-t-no{color:#999;background:#fff}
.unf-t-yes.sel{background:#4285f4;color:#fff}
.unf-t-no.sel{background:#4285f4;color:#fff}
.unf-toggle.toggled .unf-t-yes{background:#4285f4;color:#fff}
.unf-toggle.toggled .unf-t-no{background:#fff;color:#999}
.unf-db-title{font-size:9px;font-weight:700;color:#333;margin:8px 0 4px}
.unf-submit{background:#4285f4;color:#fff;text-align:center;padding:7px;border-radius:6px;font-size:9px;font-weight:600;margin-top:8px;cursor:default}

/* --- 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) --- */
.uft-fico{display:inline-block;width:14px;height:11px;background:#42a5f5;border-radius:1px 1px 2px 2px;position:relative;margin-right:5px;vertical-align:middle}
.uft-fico::before{content:'';position:absolute;top:-3px;left:0;width:6px;height:3px;background:#42a5f5;border-radius:2px 2px 0 0}

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




/* ============================================================
   WATCH-FIRST PLAYER CHROME (S1 conversion)
   Shared look with the canonical similarity-detection watch-first.
   The scene markup (.sc-dashfull / .df-* / .unf-*) 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 reuse the My Folders page (.sc-dashfull); scene 1 also shows the
   create-folder dialog (.unf-panel) centered over it. The page plus the open
   dialog 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-dashfull {
  display: flex; background: #fff; border-radius: 12px; overflow: hidden;
  width: 660px; height: 430px;
  transform: scale(.6); transform-origin: center center; flex: 0 0 auto;
}
.tour-scene .df-body { overflow: hidden; }
.tour-scene .df-panel,
.tour-scene .unf-list-panel { opacity: 1 !important; transform: none !important; }
.tour-scene .unf-panel { opacity: 1 !important; pointer-events: auto; transform: translate(-50%, -50%) !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 mocks so their rendered WIDTH fits a phone column. */
@media (max-width: 640px) {
  .tour-scene .sc-dashfull { transform: scale(.44); }
}

/* Fix: the "+" create-folder FAB was floating low in an over-tall card. Keep the
   folders-list scene compact so the FAB sits at its bottom-right; give the
   dialog scene the extra height it needs for the open create-folder panel. */
.tour-scene[data-scene="0"] .sc-dashfull { height: 318px; }
.tour-scene[data-scene="1"] .sc-dashfull { height: 470px; }
.tour-scene .sc-dashfull .um-fab { bottom: 14px; right: 14px; }