/* Refinity-Offline DEMO — scaffolding UI only (toolbar, virtual-scale panel, intro).
 * Loaded after style.css; scoped to .demo* classes so the real app styles are untouched. */

.demoBar {
  position: fixed; top: 10px; right: 12px; z-index: 99990;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  max-width: 60vw;
  font-family: Arial, Helvetica, sans-serif;
}
.demoBadge {
  background: #34d399; color: #06281d; font-weight: 800; font-size: 11px; letter-spacing: 1px;
  padding: 4px 8px; border-radius: 6px;
}
.demoBarNote { color: #9fb0c8; font-size: 11px; display: none; }
@media (min-width: 1100px) { .demoBarNote { display: inline; } }
.demoBtn {
  background: #1b2740; color: #e6edf7; border: 1px solid #32436b;
  border-radius: 7px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.demoBtn:hover { background: #243353; }
.demoBtn.on { background: #14492f; border-color: #1f7a4d; color: #8ff0bf; }
.demoBtn.off { background: #4a1f1f; border-color: #7a2f2f; color: #f3b6b6; }

.demoScale {
  position: fixed; bottom: 16px; right: 16px; z-index: 99990; width: 220px;
  background: #111b30; border: 1px solid #2b3a5c; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); font-family: Arial, Helvetica, sans-serif;
}
.demoScaleHd { display: flex; align-items: center; gap: 7px; color: #9fb0c8; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 9px; }
.demoDot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.demoPour {
  width: 100%; background: #34d399; color: #06281d; border: none; border-radius: 9px;
  padding: 11px; font-size: 14px; font-weight: 800; cursor: pointer; letter-spacing: .3px;
}
.demoPour:hover { background: #2bbe85; }
.demoScale input[type=range] { width: 100%; margin: 12px 0 8px; accent-color: #34d399; }
.demoAuto { display: flex; align-items: center; gap: 6px; color: #cdd8ea; font-size: 12px; }
.demoAuto input { accent-color: #34d399; }
.demoHint { color: #6f80a0; font-size: 11px; margin-top: 6px; }

.demoIntro {
  position: fixed; inset: 0; z-index: 99999; background: rgba(6, 12, 24, .82);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
.demoIntroCard {
  background: #0f1830; border: 1px solid #2b3a5c; border-radius: 16px; padding: 28px 32px;
  max-width: 560px; width: 100%; color: #dbe4f2; box-shadow: 0 20px 70px rgba(0,0,0,.6);
}
.demoIntroTag { display: inline-block; background: #34d399; color: #06281d; font-weight: 800; font-size: 11px; letter-spacing: 1px; padding: 3px 8px; border-radius: 6px; }
.demoIntroCard h1 { font-size: 26px; margin: 12px 0 4px; color: #fff; }
.demoIntroTagline { font-size: 16px; font-weight: 600; color: #34d399; margin: 0 0 12px; }
.demoIntroCard .lead { font-size: 14px; line-height: 1.55; color: #b9c6dc; margin: 10px 0; }
.demoIntroCard ol { margin: 14px 0; padding-left: 20px; }
.demoIntroCard li { font-size: 14px; line-height: 1.5; color: #cdd8ea; margin-bottom: 10px; }
.demoIntroCard b { color: #fff; }
#demoIntroGo {
  margin-top: 10px; background: #34d399; color: #06281d; border: none; border-radius: 10px;
  padding: 13px 22px; font-size: 15px; font-weight: 800; cursor: pointer;
}
#demoIntroGo:hover { background: #2bbe85; }
.demoDontShow { display: flex; align-items: center; gap: 7px; color: #8fa0bd; font-size: 12px; margin-top: 14px; }
.demoDontShow input { accent-color: #34d399; }