.test-guide-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:20px 0; padding:18px 22px; border:1px solid #38607c; border-radius:16px; background:linear-gradient(110deg,#10273d,#101830); color:#edf7ff; }
.test-guide-toolbar strong,.test-guide-toolbar span { display:block; }
.test-guide-toolbar span { color:#b7c9dd; font-size:13px; margin-top:5px; }
.test-guide-toolbar button,.test-guide-panel button { font:inherit; font-weight:650; cursor:pointer; border:1px solid #526c90; border-radius:9px; padding:10px 16px; background:#122942; color:#f3f8ff; }
.test-guide-toolbar .test-guide-start,.test-guide-panel [data-guide-next] { background:#68e4f5; color:#061b2b; border-color:#68e4f5; }
.test-guide-start { flex-shrink:0; }
.test-guide-panel { position:fixed; bottom:18px; right:18px; z-index:10000; width:min(380px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; padding:20px; border:1px solid #69ddef; border-radius:18px; background:#0a1830; color:#f3f8ff; box-shadow:0 12px 55px #000a; font-size:14px; }
.test-guide-panel[hidden],.test-guide-toolbar[hidden] { display:none; }
.test-guide-top,.test-guide-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.test-guide-top > span { color:#73e5f5; font-size:12px; font-weight:700; }
.test-guide-top button { padding:7px 10px; font-size:12px; }
.test-guide-panel h2 { font-size:20px; line-height:1.3; margin:16px 0 10px; }
.test-guide-panel p { line-height:1.6; color:#d1dfef; margin:0 0 12px; }
.test-guide-panel .test-guide-tip { color:#99afcc; font-size:12px; }
.test-guide-panel button:disabled { opacity:.45; cursor:default; }
.test-guide-panel button:focus-visible,.test-guide-start:focus-visible { outline:3px solid white; outline-offset:3px; }
.test-guide-highlight { outline:5px solid #ffd24a !important; outline-offset:4px; border-radius:8px; box-shadow:0 0 0 4px #071426,0 0 0 12px #fff3c4,0 0 34px 15px #ffd24a55,inset 0 0 0 2px #ffd24a !important; scroll-margin:24px; }
/* A solid, stationary ring stays visible without distracting motion. */
.test-guide-panel { border:3px solid #ffd24a; box-shadow:0 0 0 3px #071426,0 12px 55px #000c; }
.test-guide-top > span { color:#ffd24a; font-size:14px; }
body.test-guide-active { padding-bottom:var(--test-guide-space,340px); }
@media(max-width:600px) { .test-guide-toolbar { flex-direction:column; align-items:stretch; padding:16px; } .test-guide-panel { bottom:10px; right:14px; padding:15px; } .test-guide-panel h2 { font-size:18px; margin-top:10px; } .test-guide-panel p { font-size:13px; line-height:1.45; } }