:root { --app-tutorial-accent:#FFD700; }
.app-tutorial-lock { overflow:hidden !important; }
.app-tutorial-overlay { position:fixed; inset:0; z-index:100000; font-family:Inter,system-ui,sans-serif; }
.app-tutorial-backdrop { position:absolute; inset:0; background:rgba(0,0,10,.78); backdrop-filter:blur(2px); }
.app-tutorial-highlight { position:fixed; z-index:100001; border:3px solid var(--app-tutorial-accent); border-radius:14px; background:rgba(255,215,0,.09); box-shadow:0 0 0 9999px rgba(0,0,10,.78),0 0 0 7px rgba(255,215,0,.13),0 0 34px rgba(255,215,0,.68),inset 0 0 24px rgba(255,215,0,.1); pointer-events:none; transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease; }
.app-tutorial-highlight[hidden] { display:none; }
.app-tutorial-card { position:fixed; z-index:100003; width:min(360px,calc(100vw - 28px)); padding:18px; border:1px solid rgba(255,215,0,.4); border-radius:18px; background:linear-gradient(145deg,#171722,#090910); color:#fff; box-shadow:0 22px 65px rgba(0,0,0,.62); }
.app-tutorial-card.tail-top::before,.app-tutorial-card.tail-bottom::before { content:""; position:absolute; left:var(--tutorial-tail-x,50%); width:18px; height:18px; background:#14141f; border-color:rgba(255,215,0,.4); transform:translateX(-50%) rotate(45deg); z-index:-1; }
.app-tutorial-card.tail-top::before { top:-10px; border-left:1px solid; border-top:1px solid; }
.app-tutorial-card.tail-bottom::before { bottom:-10px; border-right:1px solid; border-bottom:1px solid; }
.app-tutorial-kicker { color:var(--app-tutorial-accent); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.app-tutorial-card h2 { margin:7px 0 8px; color:#fff; font-size:1.2rem; line-height:1.2; }
.app-tutorial-card p { margin:0; color:#c9c9d2; font-size:.9rem; line-height:1.5; }
.app-tutorial-progress { display:flex; gap:5px; margin:16px 0 14px; }
.app-tutorial-progress span { height:4px; flex:1; border-radius:99px; background:rgba(255,255,255,.14); }
.app-tutorial-progress span.active { background:var(--app-tutorial-accent); }
.app-tutorial-actions { display:flex; align-items:center; gap:8px; }
.app-tutorial-actions button { min-height:40px; padding:0 13px; border-radius:11px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:.82rem; font-weight:750; cursor:pointer; }
.app-tutorial-actions .skip { margin-right:auto; border:0; background:none; color:#a8a8b2; padding-left:0; }
.app-tutorial-actions .next { border:0; background:var(--app-tutorial-accent); color:#080808; }
.app-tutorial-card.centered { left:50% !important; top:50% !important; transform:translate(-50%,-50%); }
@media (max-width:600px) { .app-tutorial-card { padding:16px; } }
@media (prefers-reduced-motion:no-preference) { .app-tutorial-highlight { animation:appTutorialPulse 1.7s ease-in-out infinite; } @keyframes appTutorialPulse { 50% { border-color:#fff2a0; box-shadow:0 0 0 9999px rgba(0,0,10,.78),0 0 0 10px rgba(255,215,0,.08),0 0 44px rgba(255,215,0,.82),inset 0 0 28px rgba(255,215,0,.14); } } .app-tutorial-card { animation:appTutorialIn .2s ease-out; } @keyframes appTutorialIn { from { opacity:0; transform:translateY(8px); } } .app-tutorial-card.centered { animation:appTutorialCenterIn .2s ease-out; } @keyframes appTutorialCenterIn { from { opacity:0; transform:translate(-50%,calc(-50% + 8px)); } } }