/* =====================================================================
   Serveo guided product tour – styles
   ---------------------------------------------------------------------
   The simulated screens are styled by Serveo's own /css/design.css and
   /css/app.css (loaded before this file), so they share the real app's
   vocabulary (card, btn btn--primary, chip, console-shell, portal-bar,
   app-shell …). This file only adds:
     1. Tokens      --svt-* : the player's palette, mapped to Serveo's brand
                    (prefixed so they never collide with design.css tokens)
     2. Helpers     toast, help menu, floating tour button (drawn by the engine)
     3. Player      sv-t-* : spotlight, popup, cursor, ripple, player bar,
                    chapter list, intro/end overlay – the reference rules,
                    only colours and fonts changed.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --svt-mist:#F4F1EC;--svt-paper:#fff;--svt-ink:#151515;--svt-ink-2:rgba(21,21,21,.70);--svt-ink-3:rgba(21,21,21,.42);
  --svt-line:rgba(21,21,21,.09);--svt-line-2:rgba(21,21,21,.06);--svt-line-strong:rgba(21,21,21,.18);
  --svt-pine:#E8661A;--svt-pine-d:#C4510F;--svt-pine-s:#FDF1EA;--svt-teal-l:#3FBF6F;
  --svt-blue:#E8661A;--svt-blue-d:#C4510F;--svt-blue-s:#FDF1EA;
  --svt-mari:#D98C0F;--svt-mari-s:rgba(217,140,15,.20);--svt-mari-d:#835400;
  --svt-lilac:#F4C9AE;--svt-lilac-s:#FDF1EA;--svt-sky-s:#EEF3F7;--svt-rose:#D3435B;--svt-rose-s:#FBE4E8;
  --svt-r-xl:22px;--svt-r-lg:16px;--svt-r-md:12px;
  --svt-f-d:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",Roboto,"Segoe UI",sans-serif;
  --svt-f-b:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",Roboto,"Segoe UI",sans-serif;
  --svt-accent:var(--svt-pine);--svt-accent-ink:var(--svt-pine-d);--svt-accent-soft:var(--svt-pine-s);--svt-accent-light:#F4A777;
  --svt-ground:var(--svt-mist);--svt-surface:var(--svt-paper);--svt-muted:var(--svt-ink-2);--svt-dark:#15161A;
}
html,body{margin:0;min-height:100%}
#root{min-height:100vh}
[data-g]{scroll-margin:84px 0 120px}
/* ---------- 2. simulated app: toast, help menu, floating tour button ---------- */
.sv-toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);background:var(--svt-ink);color:#fff;font-weight:500;font-size:14px;padding:12px 20px;border-radius:999px;z-index:700;box-shadow:0 14px 40px rgba(0,0,0,.25);display:flex;gap:10px;align-items:center;animation:sv-toast .3s ease;max-width:calc(100vw - 32px)}
.sv-toast svg{color:var(--svt-teal-l)}
@keyframes sv-toast{from{opacity:0;transform:translate(-50%,-10px)}}
.sv-menu{position:fixed;z-index:720;background:#fff;border:1px solid var(--svt-line);border-radius:var(--svt-r-lg);box-shadow:0 20px 40px -20px rgba(31,42,46,.35),0 2px 10px rgba(0,0,0,.06);padding:8px;width:300px}
.sv-menu button{display:flex;gap:12px;align-items:flex-start;width:100%;border:0;background:none;padding:12px;border-radius:10px;cursor:pointer;text-align:left}
.sv-menu button:hover{background:var(--svt-mist)}
.sv-menu b{font-weight:600}
.sv-menu small{display:block;color:var(--svt-ink-2);font-size:12.5px}
.sv-fab{position:fixed;right:18px;bottom:18px;z-index:650;background:var(--svt-ink);color:#fff;border:0;border-radius:999px;height:48px;padding:0 20px 0 16px;font-weight:600;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.sv-fab:hover{background:#0B1322}
.sv-fab i{width:26px;height:26px;border-radius:50%;background:var(--svt-pine);display:flex;align-items:center;justify-content:center}
@media(max-width:640px){.sv-fab{bottom:92px}}

/* =====================================================================
   3. Product tour player (1:1 with the reference .t-* rules)
   ===================================================================== */
.sv-t-block{position:fixed;inset:0;z-index:880;cursor:default}
.sv-t-spot{position:fixed;z-index:890;border-radius:14px;pointer-events:none;box-shadow:0 0 0 9999px rgba(12,14,18,.58);transition:all .38s cubic-bezier(.4,0,.2,1)}
.sv-t-spot::after{content:"";position:absolute;inset:-4px;border-radius:17px;border:2px solid var(--svt-accent-light);animation:sv-ring 1.6s ease-out infinite}
@keyframes sv-ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
.sv-t-spot.none{box-shadow:0 0 0 9999px rgba(12,14,18,.58);width:0!important;height:0!important}
.sv-t-spot.none::after{display:none}
.sv-t-pop{position:fixed;z-index:900;width:360px;background:#fff;border-radius:18px;padding:18px 20px 0;box-shadow:0 22px 60px rgba(0,0,0,.32);transition:left .38s cubic-bezier(.4,0,.2,1),top .38s cubic-bezier(.4,0,.2,1),opacity .2s;overflow:hidden}
.sv-t-pop.hide{opacity:0}
.sv-t-kick{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--svt-accent-ink)}
.sv-t-live{width:8px;height:8px;border-radius:50%;background:var(--svt-teal-l);box-shadow:0 0 0 0 rgba(0,176,165,.6);animation:sv-live 1.4s infinite}
.sv-t-pop.paused .sv-t-live{background:var(--svt-mari);animation:none}
@keyframes sv-live{70%{box-shadow:0 0 0 7px rgba(0,176,165,0)}100%{box-shadow:0 0 0 0 rgba(0,176,165,0)}}
.sv-t-title{font-family:var(--svt-f-d);font-size:19px;font-weight:700;margin:8px 0 6px;letter-spacing:-.01em}
.sv-t-body{color:var(--svt-ink-2);font-size:14.5px;line-height:1.55}
.sv-t-action{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--svt-accent-ink);background:var(--svt-accent-soft);border-radius:10px;padding:8px 12px}
.sv-t-timer{height:4px;background:var(--svt-mist);margin:16px -20px 0}
.sv-t-timer i{display:block;height:100%;width:0;background:var(--svt-accent)}
.sv-t-pop::before{content:"";position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg);display:none}
.sv-t-pop.side-right::before{display:block;left:-6px;top:26px}
.sv-t-pop.side-left::before{display:block;right:-6px;top:26px}
.sv-t-pop.side-bottom::before{display:block;top:-6px;left:calc(50% - 7px)}
.sv-t-pop.side-top::before{display:block;bottom:-6px;left:calc(50% - 7px)}
.sv-t-pop.sheet{left:12px!important;right:12px;width:auto}
.sv-t-pop.sheet::before{display:none}

.sv-t-cursor{position:fixed;z-index:960;left:0;top:0;width:28px;height:28px;pointer-events:none;transition:transform .62s cubic-bezier(.45,0,.2,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));display:none}
.sv-t-cursor.on{display:block}
.sv-t-ripple{position:fixed;z-index:955;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(127,219,211,.75);pointer-events:none;animation:sv-ripple .55s ease-out forwards}
@keyframes sv-ripple{to{transform:scale(4.2);opacity:0}}

.sv-t-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:950;width:min(820px,calc(100vw - 24px));background:var(--svt-dark);color:#fff;border-radius:20px;padding:12px 14px 12px 20px;box-shadow:0 18px 50px rgba(0,0,0,.4);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center}
.sv-t-bar.top{bottom:auto;top:12px}
[data-g]{scroll-margin-top:84px;scroll-margin-bottom:24px}
.sv-t-info{display:flex;align-items:baseline;gap:10px;min-width:0}
.sv-t-info b{font-family:var(--svt-f-d);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-t-info span{font-size:12.5px;color:#9C9CA8;white-space:nowrap}
.sv-t-demo{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--svt-dark);background:var(--svt-accent-light);border-radius:99px;padding:2px 8px;margin-left:auto;white-space:nowrap}
.sv-t-prog{grid-column:1/2;display:flex;gap:5px}
.sv-t-seg{flex:1;height:6px;border-radius:99px;background:#33343C;overflow:hidden;cursor:pointer;border:0;padding:0;position:relative}
.sv-t-seg i{position:absolute;inset:0 auto 0 0;background:var(--svt-accent-light);border-radius:99px;transition:width .3s}
.sv-t-seg:hover{background:#45464F}
.sv-t-btns{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:4px}
.sv-t-btn{width:40px;height:40px;border-radius:50%;border:0;background:none;color:#D9D9E0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sv-t-btn:hover{background:#2A2B32;color:#fff}
.sv-t-btn.play{width:48px;height:48px;background:#fff;color:var(--svt-ink)}
.sv-t-btn.play:hover{background:#E8E8EC;color:var(--svt-ink)}
.sv-t-speed{height:34px;min-width:48px;border-radius:999px;border:1px solid #3A3B44;background:none;color:#fff;font-weight:700;font-size:13px;cursor:pointer;margin:0 4px}
.sv-t-speed:hover{background:#2A2B32}
@media (max-width:640px){
  .sv-t-bar{grid-template-columns:1fr;padding:12px 14px;bottom:10px}
  .sv-t-btns{grid-column:1;grid-row:auto;justify-content:space-between}
  .sv-t-demo{display:none}
}

/* chapter list on the bar */
.sv-t-chlist{position:fixed;z-index:965;width:300px;max-height:min(520px,calc(100vh - 140px));overflow:auto;background:var(--svt-dark);color:#fff;border-radius:16px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.sv-t-chlist button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:#D9D9E0;padding:9px 10px;border-radius:10px;cursor:pointer;font-weight:600;font-size:13.5px;text-align:left}
.sv-t-chlist button:hover{background:#2A2B32;color:#fff}
.sv-t-chlist button.on{background:#1F3A38;color:var(--svt-accent-light)}
.sv-t-chlist .n{width:24px;height:24px;border-radius:50%;background:#2A2B32;display:flex;align-items:center;justify-content:center;font-size:11.5px;flex:none}
.sv-t-chlist .ok .n{background:var(--svt-accent);color:#fff}
.sv-t-chlist small{margin-left:auto;color:#7C7C88;font-weight:500}

/* intro / end overlay */
.sv-t-overlay{position:fixed;inset:0;z-index:970;background:rgba(12,14,18,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;animation:sv-fade .25s}
.sv-t-card{width:min(560px,100%);background:#fff;border-radius:26px;padding:34px 36px 28px;box-shadow:0 30px 80px rgba(0,0,0,.4);max-height:calc(100vh - 32px);overflow:auto}
.sv-t-card .logo{height:40px;display:block;margin-bottom:22px}
.sv-t-card .kicker{font-size:12px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--svt-accent-ink)}
.sv-t-card h2{font-size:30px;font-weight:700;letter-spacing:-.025em;margin:8px 0 10px;line-height:1.15}
.sv-t-card p{color:var(--svt-ink-2);line-height:1.6;margin:0}
.sv-t-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;list-style:none;padding:0;margin:20px 0 24px}
.sv-t-grid li button{display:flex;gap:10px;align-items:center;width:100%;padding:9px 10px;border-radius:12px;background:var(--svt-mist);border:1px solid transparent;font-weight:600;font-size:13.5px;cursor:pointer;text-align:left}
.sv-t-grid li button:hover{border-color:var(--svt-ink);background:#fff}
.sv-t-grid li button small{color:var(--svt-ink-2);font-weight:500}
.sv-t-grid .n{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--svt-line-strong);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.sv-t-grid .n.ok{background:var(--svt-accent);border-color:var(--svt-accent);color:#fff}
.sv-t-card .btns{display:flex;gap:10px;flex-wrap:wrap;flex-direction:row-reverse}
.sv-t-card .btns .btn{flex:1}
.sv-t-card .note{font-size:12.5px;color:var(--svt-ink-3);margin-top:14px;text-align:center}
@media (max-width:640px){
  .sv-t-card{padding:24px 20px 20px}.sv-t-card h2{font-size:24px}
  .sv-t-grid{grid-template-columns:1fr;gap:4px;margin:14px 0 16px}.sv-t-grid li button{padding:7px 10px}.sv-t-grid li button small{display:none}
}
@media (prefers-reduced-motion:reduce){.sv-t-spot,.sv-t-pop,.sv-t-cursor{transition:none}.sv-t-spot::after,.sv-t-live{animation:none}}
/* buttons the engine draws on its own intro / end cards (scoped so they never touch app.css's .btn) */
.sv-t-card .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--svt-line);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--svt-paper);color:var(--svt-ink);transition:background .15s,border-color .15s;font-family:var(--svt-f-b)}
.sv-t-card .btn:active{transform:translateY(1px)}
.sv-t-card .btn-p{background:var(--svt-accent);color:#fff;border-color:var(--svt-accent)}.sv-t-card .btn-p:hover{background:var(--svt-accent-ink)}
.sv-t-card .btn-g{background:var(--svt-paper);border-color:var(--svt-line)}.sv-t-card .btn-g:hover{border-color:var(--svt-ink-3)}
.sv-t-card .btn-lg{height:50px;padding:0 22px;font-size:15px}