.lottoorbit-app {
  --lo-bg: #02060b;
  --lo-panel: #071321;
  --lo-panel-2: #0a1c2d;
  --lo-accent: #25e6ff;
  --lo-teal: #24e6be;
  --lo-purple: #8c63ff;
  --lo-text: #f3fbff;
  --lo-muted: #9cb7c9;
  --lo-border: rgba(74, 218, 255, 0.24);
  --lo-error: #ff6b7a;
  --lo-success: #43e6a4;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 12px auto 24px;
  color: var(--lo-text);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* Extend the generator's dark canvas through narrow theme content columns. */
.lottoorbit-app::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -24px;
  bottom: -24px;
  left: 0;
  width: 100%;
  background: #02060b;
  box-shadow: 0 0 0 100vmax #02060b;
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}

.lottoorbit-app *,
.lottoorbit-app *::before,
.lottoorbit-app *::after { box-sizing: border-box; }
.lottoorbit-app button,
.lottoorbit-app select { font: inherit; }
.lottoorbit-app [hidden] { display: none !important; }

.lottoorbit-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) clamp(20px, 4vw, 48px) clamp(20px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(82, 210, 255, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 9% 3%, rgba(37, 230, 255, 0.14), transparent 27%),
    radial-gradient(circle at 92% 12%, rgba(140, 99, 255, 0.16), transparent 29%),
    linear-gradient(rgba(37, 230, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 230, 255, 0.025) 1px, transparent 1px),
    linear-gradient(145deg, #030912, var(--lo-bg));
  background-size: auto, auto, 42px 42px, 42px 42px, auto;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255,255,255,0.025);
}

.lottoorbit-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(37, 230, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
.lottoorbit-orbit-one { width: 420px; height: 150px; right: -90px; top: 180px; transform: rotate(-24deg); }
.lottoorbit-orbit-two { width: 280px; height: 92px; left: -100px; bottom: 220px; transform: rotate(19deg); border-color: rgba(140,99,255,.12); }

.lottoorbit-header,
.lottoorbit-brand,
.lottoorbit-result-heading,
.lottoorbit-actions,
.lottoorbit-disclaimer,
.lottoorbit-help summary,
.lottoorbit-help summary > span:first-child { display: flex; align-items: center; }

.lottoorbit-header { justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.lottoorbit-brand { gap: 16px; min-width: 0; }
.lottoorbit-logo { width: 74px; height: 74px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 18px rgba(37,230,255,.22)); }
.lottoorbit-eyebrow { margin: 0 0 3px; color: var(--lo-accent); font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.lottoorbit-header h2 { margin: 0; color: var(--lo-text); font-size: clamp(28px, 4vw, 42px); line-height: 1.06; letter-spacing: -.035em; }
.lottoorbit-tagline { margin: 6px 0 0; color: var(--lo-muted); font-size: 14px; }
.lottoorbit-status-chip { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; min-height: 40px; padding: 9px 14px; border: 1px solid rgba(67,230,164,.24); border-radius: 999px; background: rgba(5,25,28,.72); color: #bff9dc; font-size: 12px; }
.lottoorbit-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lo-success); box-shadow: 0 0 12px var(--lo-success); }

.lottoorbit-control-panel,
.lottoorbit-result-card,
.lottoorbit-help,
.lottoorbit-disclaimer,
.lottoorbit-ad {
  position: relative;
  border: 1px solid var(--lo-border);
  background: linear-gradient(145deg, rgba(10,28,45,.92), rgba(5,16,28,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.lottoorbit-control-panel { padding: 20px; border-radius: 20px; }
.lottoorbit-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lottoorbit-field { min-width: 0; }
.lottoorbit-field label { display: block; margin-bottom: 8px; color: #b8cbda; font-size: 11px; font-weight: 720; letter-spacing: .095em; text-transform: uppercase; }
.lottoorbit-app .lottoorbit-field select {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(71,183,225,.3);
  border-radius: 11px;
  outline: 0;
  background-color: #05111e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C8E8F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  color: #f3fbff !important;
  -webkit-text-fill-color: #f3fbff !important;
  color-scheme: dark !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.lottoorbit-app .lottoorbit-field select:hover,
.lottoorbit-app .lottoorbit-field select:focus,
.lottoorbit-app .lottoorbit-field select:active {
  border-color: rgba(37,230,255,.55);
  background-color: #071827 !important;
  color: #f3fbff !important;
  -webkit-text-fill-color: #f3fbff !important;
}
.lottoorbit-app .lottoorbit-field select option,
.lottoorbit-app .lottoorbit-field select optgroup {
  background-color: #071321 !important;
  color: #f3fbff !important;
  -webkit-text-fill-color: #f3fbff !important;
}
.lottoorbit-app .lottoorbit-field select option:checked,
.lottoorbit-app .lottoorbit-field select option:hover,
.lottoorbit-app .lottoorbit-field select option:focus {
  background-color: #176d92 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.lottoorbit-app .lottoorbit-field select:focus-visible,
.lottoorbit-button:focus-visible,
.lottoorbit-help summary:focus-visible { outline: 3px solid rgba(37,230,255,.36); outline-offset: 3px; border-color: var(--lo-accent); }
.lottoorbit-app .lottoorbit-field select:disabled { opacity: .55; cursor: not-allowed; }
.lottoorbit-empty-state { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,107,122,.28); border-radius: 10px; background: rgba(65,14,24,.25); color: #ffd5da; font-size: 13px; }

.lottoorbit-result-card { margin-top: 18px; padding: clamp(22px, 4vw, 38px); overflow: hidden; border-radius: 24px; background:
  radial-gradient(circle at 50% 38%, rgba(37,230,255,.075), transparent 35%),
  linear-gradient(145deg, rgba(8,27,45,.98), rgba(4,13,25,.98));
}
.lottoorbit-result-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 26%, rgba(255,255,255,.025) 48%, transparent 66%); }
.lottoorbit-result-heading { position: relative; justify-content: space-between; gap: 16px; }
.lottoorbit-result-heading h3 { margin: 0; color: var(--lo-text); font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; }
.lottoorbit-valid-badge { padding: 7px 10px; border: 1px solid rgba(67,230,164,.24); border-radius: 8px; background: rgba(7,50,38,.34); color: #aef2d0; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.lottoorbit-badge-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.lottoorbit-valid-badge.is-catalog { border-color: rgba(255,199,92,.28); background: rgba(74,49,8,.32); color: #ffe0a3; }
.lottoorbit-history-badge { padding: 7px 10px; border: 1px solid rgba(156,183,201,.2); border-radius: 8px; background: rgba(9,25,38,.5); color: #a9bfce; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.lottoorbit-history-badge.has-history { border-color: rgba(37,230,255,.28); background: rgba(7,45,56,.42); color: #bff7ff; }
.lottoorbit-live { position: relative; min-height: 170px; display: grid; place-items: center; padding: 22px 0 14px; }
.lottoorbit-live::before { content: ""; position: absolute; width: min(92%, 690px); height: 108px; border: 1px solid rgba(37,230,255,.11); border-radius: 50%; transform: rotate(-5deg); box-shadow: 0 0 45px rgba(37,230,255,.035); }
.lottoorbit-balls { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 18px); width: 100%; }
.lottoorbit-awaiting { margin: 0; color: var(--lo-muted); font-size: 14px; text-align: center; }
.lottoorbit-ball-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lottoorbit-ball {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(58px, 8vw, 82px);
  height: clamp(58px, 8vw, 82px);
  border: 1px solid rgba(124,235,255,.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.28), transparent 11%),
    radial-gradient(circle at 50% 52%, #103e5d 0, #08253b 58%, #04111d 100%);
  color: #fff;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 780;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  box-shadow: 0 0 0 5px rgba(37,230,255,.06), 0 0 26px rgba(37,230,255,.25), inset 0 0 16px rgba(37,230,255,.22);
}
.lottoorbit-ball::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.13); border-radius: inherit; }
.lottoorbit-ball-special { border-color: rgba(210,145,255,.9); background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.28), transparent 11%), radial-gradient(circle at 50% 52%, #62349a 0, #35205f 56%, #140b2d 100%); box-shadow: 0 0 0 5px rgba(140,99,255,.075), 0 0 28px rgba(171,75,255,.3), inset 0 0 16px rgba(218,134,255,.24); }
.lottoorbit-ball-label { max-width: 88px; color: #c6b8e7; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.lottoorbit-result-meta { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0 auto 20px; color: var(--lo-muted); font-size: 11px; }
.lottoorbit-result-meta span,
.lottoorbit-result-meta time { display: inline-flex; align-items: center; gap: 7px; }
.lottoorbit-result-meta span:not(:first-child)::before,
.lottoorbit-result-meta time::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--lo-accent); }

.lottoorbit-strategy-note { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; max-width: 760px; margin: 0 auto; padding: 14px 16px; border: 1px solid rgba(140,99,255,.22); border-radius: 13px; background: rgba(20,15,49,.35); }
.lottoorbit-note-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(140,99,255,.16); color: #c5adff; }
.lottoorbit-strategy-note strong { display: block; margin: 0 0 2px; color: #ded5ff; font-size: 13px; }
.lottoorbit-strategy-note p { margin: 0; color: #aebed0; font-size: 12px; }
.lottoorbit-actions { position: relative; justify-content: center; gap: 12px; margin-top: 22px; }
.lottoorbit-button { min-height: 48px; padding: 0 22px; border-radius: 11px; font-weight: 760; letter-spacing: .01em; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.lottoorbit-button:hover { transform: translateY(-1px); }
.lottoorbit-button:active { transform: translateY(0); }
.lottoorbit-button:disabled { opacity: .55; cursor: wait; transform: none; }
.lottoorbit-button span:first-child { margin-right: 7px; font-size: 18px; }
.lottoorbit-button-primary { min-width: 230px; border: 1px solid #49eafa; background: linear-gradient(110deg, #0bc2e8, #5b4df1); color: #fff; box-shadow: 0 10px 28px rgba(37,116,255,.24), inset 0 1px rgba(255,255,255,.24); }
.lottoorbit-button-primary:hover { box-shadow: 0 12px 34px rgba(37,116,255,.34), 0 0 0 3px rgba(37,230,255,.08); }
.lottoorbit-button-secondary { border: 1px solid rgba(88,190,232,.38); background: #071624; color: #d9f7ff; }
.lottoorbit-button-secondary:hover { border-color: rgba(37,230,255,.68); background: #092033; }
.lottoorbit-error { position: relative; margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,107,122,.35); border-radius: 10px; background: rgba(80,17,29,.34); color: #ffd5da; font-size: 13px; text-align: center; }

.lottoorbit-help { margin-top: 18px; overflow: hidden; border-radius: 18px; }
.lottoorbit-help summary { justify-content: space-between; min-height: 66px; gap: 16px; padding: 14px 18px; color: var(--lo-text); font-weight: 720; cursor: pointer; list-style: none; }
.lottoorbit-help summary::-webkit-details-marker { display: none; }
.lottoorbit-help summary > span:first-child { gap: 10px; }
.lottoorbit-help-orb { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(37,230,255,.42); border-radius: 50%; color: var(--lo-accent); font-size: 13px; }
.lottoorbit-summary-action { color: var(--lo-muted); font-size: 11px; font-weight: 600; }
.lottoorbit-help[open] .lottoorbit-summary-action::after { content: " · close"; }
.lottoorbit-help-content { padding: 0 18px 18px; border-top: 1px solid rgba(74,218,255,.12); }
.lottoorbit-strategy-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding-top: 18px; }
.lottoorbit-strategy-grid article { padding: 14px; border: 1px solid rgba(74,218,255,.11); border-radius: 12px; background: rgba(2,10,18,.38); }
.lottoorbit-strategy-grid h4 { margin: 0 0 4px; color: #ddf8ff; font-size: 13px; }
.lottoorbit-strategy-grid p { margin: 0; color: var(--lo-muted); font-size: 12px; }
.lottoorbit-odds-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--lo-purple); background: rgba(140,99,255,.08); color: #c3c9dd; font-size: 12px; }

.lottoorbit-disclaimer { gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; }
.lottoorbit-disclaimer > span { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid rgba(37,230,255,.36); border-radius: 50%; color: var(--lo-accent); font-size: 12px; font-weight: 800; }
.lottoorbit-disclaimer p { margin: 0; color: #8fa9bb; font-size: 11px; }

.lottoorbit-ad { min-height: 112px; margin-top: 18px; padding: 14px; border-style: dashed; border-color: rgba(156,183,201,.19); border-radius: 14px; background: rgba(3,10,17,.56); text-align: center; }
.lottoorbit-sponsored { margin: 0 0 9px; color: #768c9b; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lottoorbit-ad-slot { width: 100%; min-height: 80px; overflow: hidden; }
.lottoorbit-ad-preview { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #8fa5b4; font-size: 11px; }
.lottoorbit-ad-preview strong { color: #b8c8d4; }

.lottoorbit-ball.is-revealing { animation: lottoorbit-ball-in .5s cubic-bezier(.2,.86,.3,1.12) both; }
.lottoorbit-result-card.is-generating .lottoorbit-live { opacity: .5; }
@keyframes lottoorbit-ball-in { from { opacity: 0; transform: translateY(18px) scale(.72); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

@media (max-width: 940px) {
  .lottoorbit-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lottoorbit-app { margin: 12px auto; }
  .lottoorbit-app::before { top: -12px; bottom: -12px; }
  .lottoorbit-shell { border-radius: 22px; }
  .lottoorbit-controls { grid-template-columns: 1fr; gap: 13px; }
  .lottoorbit-header { align-items: flex-start; }
  .lottoorbit-status-chip { display: none; }
  .lottoorbit-logo { width: 62px; height: 62px; }
  .lottoorbit-result-meta { gap: 5px 12px; }
  .lottoorbit-strategy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .lottoorbit-shell { padding: 16px; border-radius: 18px; }
  .lottoorbit-header { margin-bottom: 20px; }
  .lottoorbit-brand { gap: 12px; }
  .lottoorbit-logo { width: 52px; height: 52px; }
  .lottoorbit-tagline { font-size: 12px; }
  .lottoorbit-control-panel { padding: 15px; border-radius: 15px; }
  .lottoorbit-result-card { padding: 20px 14px; border-radius: 18px; }
  .lottoorbit-valid-badge { display: none; }
  .lottoorbit-history-badge { display: none; }
  .lottoorbit-live { min-height: 142px; padding: 18px 0 12px; }
  .lottoorbit-balls { gap: 10px; }
  .lottoorbit-ball { width: 54px; height: 54px; font-size: 22px; box-shadow: 0 0 0 3px rgba(37,230,255,.06), 0 0 18px rgba(37,230,255,.2), inset 0 0 12px rgba(37,230,255,.18); }
  .lottoorbit-ball-special { box-shadow: 0 0 0 3px rgba(140,99,255,.07), 0 0 18px rgba(171,75,255,.24), inset 0 0 12px rgba(218,134,255,.2); }
  .lottoorbit-ball-label { max-width: 60px; font-size: 8px; }
  .lottoorbit-result-meta span:not(:first-child)::before,
  .lottoorbit-result-meta time::before { display: none; }
  .lottoorbit-result-meta { flex-direction: column; align-items: center; }
  .lottoorbit-actions { flex-direction: column; }
  .lottoorbit-button { width: 100%; min-width: 0; }
  .lottoorbit-help summary { min-height: 58px; padding: 12px 14px; font-size: 13px; }
  .lottoorbit-summary-action { display: none; }
  .lottoorbit-disclaimer { align-items: flex-start; }
}

@media (max-width: 340px) {
  .lottoorbit-shell { padding: 12px; }
  .lottoorbit-logo { width: 46px; height: 46px; }
  .lottoorbit-header h2 { font-size: 25px; }
  .lottoorbit-ball { width: 48px; height: 48px; font-size: 20px; }
  .lottoorbit-balls { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lottoorbit-app *,
  .lottoorbit-app *::before,
  .lottoorbit-app *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.lottoorbit-no-motion *,
.lottoorbit-no-motion *::before,
.lottoorbit-no-motion *::after { animation: none !important; transition: none !important; }