/* =========================================================================
   Eklavvya OMR Sheet Generator — front-end styles
   Theme: dark navy hero (Eklavvya brand) + lime-green accent, white below.
   All classes are namespaced .omrg- to avoid clashing with the active theme.
   ========================================================================= */

.omrg-root{
  --omrg-dark:#0c0e2e;          /* hero navy */
  --omrg-dark-2:#15173f;
  --omrg-glow:#2a2266;          /* purple radial glow */
  --omrg-green:#8fe000;         /* brand lime accent */
  --omrg-green-deep:#7bc400;
  --omrg-accent:#2563eb;        /* accent alias used for color: overrides */
  --omrg-ink:#1e293b;           /* navy headings on white */
  --omrg-ink-soft:#334155;      /* slate body */
  --omrg-muted:#64748b;
  --omrg-line:#e2e8f0;
  --omrg-paper-2:#f1f5f9;
  --omrg-card:#ffffff;
  --omrg-shadow:0 10px 30px rgba(15,23,42,.10);
  --omrg-radius:14px;

  font-family:"Nunito Sans",Helvetica,Arial,sans-serif;
  color:var(--omrg-ink-soft);
  font-size:17px;
  line-height:1.6;
  max-width:1140px;
  margin:0 auto;
}
.omrg-root *{box-sizing:border-box}
.omrg-root h1,.omrg-root h2,.omrg-root h3{
  font-family:"Nunito Sans",Helvetica,Arial,sans-serif;
  line-height:1.14;letter-spacing:-.01em;margin:0;font-weight:800;
}

/* ============ HERO (dark) ============ */
.omrg-hero{
  position:relative;
  border-radius:var(--omrg-radius);
  overflow:hidden;
  margin:0 0 28px;
  color:#fff;
  background:
    radial-gradient(900px 520px at 78% 35%, var(--omrg-glow) 0%, rgba(42,34,102,0) 60%),
    linear-gradient(135deg, var(--omrg-dark-2) 0%, var(--omrg-dark) 60%, #07081f 100%);
}
.omrg-hero-inner{padding:54px 44px 48px;background:#ffffff;color:var(--omrg-ink)}
.omrg-kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:#2563eb;
  background:rgba(143,224,0,.12);border:1px solid rgba(143,224,0,.35);
  padding:6px 14px;border-radius:100px;
}
.omrg-h1{
  font-size:clamp(34px,5vw,56px);font-weight:900;margin:18px 0 0;color:var(--omrg-ink);
}
.omrg-h1 .omrg-u{color:#2563eb}
.omrg-sub{font-size:18px;color:var(--omrg-ink-soft);max-width:54ch;margin-top:16px}
.omrg-sub strong{color:var(--omrg-ink)}
.omrg-trust{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.omrg-trust b{font-size:28px;display:block;color:var(--omrg-ink);font-weight:900}
.omrg-trust span{font-size:12.5px;color:var(--omrg-muted);text-transform:uppercase;letter-spacing:.05em}
.omrg-bubbles{display:flex;gap:14px;align-items:center;margin-top:26px}
.omrg-bub{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--omrg-line);
  display:grid;place-items:center;font-weight:800;color:var(--omrg-ink-soft);background:var(--omrg-paper-2);
}
.omrg-bub.omrg-fill{
  background:transparent;color:var(--omrg-accent);border-color:var(--omrg-accent);
  box-shadow:none;
}

/* ============ THE TOOL (white) ============ */
.omrg-app{
  margin:0 0 28px;display:grid;grid-template-columns:330px 1fr;
  background:var(--omrg-card);border:1px solid var(--omrg-line);
  border-radius:var(--omrg-radius);box-shadow:var(--omrg-shadow);overflow:hidden;
}
.omrg-panel{padding:24px;border-right:1px solid var(--omrg-line);background:var(--omrg-paper-2)}
.omrg-panel-title{
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  color:var(--omrg-muted);margin-bottom:6px;
}
.omrg-field{margin-top:16px}
.omrg-field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--omrg-ink)}
.omrg-field input[type=text],
.omrg-field input[type=number],
.omrg-field input[type=file],
.omrg-field select{
  width:100%;padding:11px 12px;border:1.5px solid var(--omrg-line);border-radius:9px;
  background:#fff;font-family:inherit;font-size:15px;color:var(--omrg-ink);
}
.omrg-field input:focus,.omrg-field select:focus{
  outline:none;border-color:var(--omrg-green-deep);box-shadow:0 0 0 3px rgba(143,224,0,.20);
}
.omrg-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.omrg-hint{font-size:12px;color:var(--omrg-muted);margin-top:5px}
.omrg-center{text-align:center}

.omrg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;padding:13px 18px;
  border-radius:10px;border:none;background:var(--omrg-green);color:var(--omrg-dark);
  margin-top:18px;transition:background .15s,transform .12s,box-shadow .15s;
  box-shadow:0 6px 16px rgba(143,224,0,.30);text-decoration:none;
}
.omrg-btn:hover{background:var(--omrg-green-deep);transform:translateY(-1px);box-shadow:0 10px 22px rgba(143,224,0,.38);color:var(--omrg-dark)}
.omrg-btn-alt{background:var(--omrg-dark);color:#fff;box-shadow:0 6px 16px rgba(12,14,46,.25)}
.omrg-btn-alt:hover{background:#07081f;color:#fff}

/* ============ STAGE / PREVIEW ============ */
.omrg-stage{padding:24px;background:var(--omrg-paper-2);min-height:560px;position:relative}
.omrg-sheet-scroll{height:100%;overflow:auto;display:flex;justify-content:center}
#omrg-sheet{background:#fff;box-shadow:0 10px 40px rgba(15,23,42,.16);border:1px solid var(--omrg-line)}
.omrg-tag{
  position:absolute;top:14px;left:24px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--omrg-muted);background:#fff;border:1px solid var(--omrg-line);
  padding:4px 9px;border-radius:6px;z-index:2;
}
.omrg-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--omrg-muted);padding:40px}
.omrg-empty-big{font-weight:800;font-size:22px;color:var(--omrg-ink);margin-bottom:6px}

/* ============ CTA ============ */
.omrg-cta{
  margin:0 0 28px;background:var(--omrg-dark);
  background:
    radial-gradient(700px 400px at 90% 50%, var(--omrg-glow) 0%, rgba(42,34,102,0) 60%),
    linear-gradient(135deg, var(--omrg-dark-2) 0%, var(--omrg-dark) 100%);
  color:#fff;border-radius:var(--omrg-radius);padding:34px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.omrg-cta h2{font-size:25px;max-width:24ch;color:#fff}
.omrg-cta p{color:#c7cbe4;margin:6px 0 0;font-size:15px}
.omrg-btn-cta{width:auto;white-space:nowrap;margin-top:0}

/* ============ SEO / FAQ ============ */
.omrg-section{padding:18px 0 8px}
.omrg-section h2{font-size:30px;margin-bottom:6px;color:var(--omrg-ink)}
.omrg-lead{color:var(--omrg-ink-soft);max-width:72ch}
.omrg-faq{margin-top:14px}
.omrg-faq details{border-bottom:1px solid var(--omrg-line);padding:16px 2px}
.omrg-faq summary{font-weight:800;font-size:18px;color:var(--omrg-ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px}
.omrg-faq summary::-webkit-details-marker{display:none}
.omrg-faq summary::after{content:"+";color:var(--omrg-green-deep);font-size:24px;line-height:1}
.omrg-faq details[open] summary::after{content:"–"}
.omrg-faq p{color:var(--omrg-ink-soft);margin:10px 0 0}

/* ============ REGISTRATION GATE ============ */
.omrg-gate{margin:0 0 28px;display:flex;justify-content:center;align-items:center;min-height:320px}
.omrg-gate-card{
  background:#fff;border:1px solid var(--omrg-line);border-radius:var(--omrg-radius);
  box-shadow:var(--omrg-shadow);padding:40px 44px;max-width:460px;width:100%;text-align:center;
}
.omrg-gate-title{font-size:22px;color:var(--omrg-ink);margin-bottom:8px}
.omrg-gate-sub{color:var(--omrg-muted);font-size:15px;margin:0 0 24px}
.omrg-gate-form .omrg-field{text-align:left}
.omrg-gate-form .omrg-field input.omrg-error{
  border-color:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.15);
}
.omrg-gate-err{font-size:13px;color:#e11d48;margin-top:5px;display:none}
.omrg-gate-err.omrg-visible{display:block}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .omrg-app{grid-template-columns:1fr}
  .omrg-panel{border-right:none;border-bottom:1px solid var(--omrg-line)}
  .omrg-hero-inner{padding:38px 24px}
  .omrg-cta{padding:26px}
  .omrg-gate-card{padding:28px 20px}
}