:root {
  --bg: #020716;
  --bg-deep: #01040d;
  --bg-soft: #07132c;
  --surface: rgba(8, 18, 43, 0.84);
  --surface-strong: rgba(10, 22, 52, 0.96);
  --surface-soft: rgba(19, 38, 78, 0.58);
  --surface-hover: rgba(23, 49, 101, 0.68);
  --cyan: #16c9ff;
  --blue: #2787ff;
  --violet: #9654ff;
  --primary: #24b9ff;
  --primary-2: #8d52ff;
  --success: #32db91;
  --danger: #ff627c;
  --warning: #ffbd52;
  --text: #f7f9ff;
  --muted: #9baaca;
  --muted-2: #7384ab;
  --border: rgba(104, 139, 255, 0.18);
  --border-strong: rgba(61, 178, 255, 0.38);
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  --shadow-blue: 0 20px 55px rgba(18, 125, 255, 0.22);
  --radius: 22px;
  --radius-sm: 15px;
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 7%, rgba(24, 183, 255, 0.13), transparent 27%),
    radial-gradient(circle at 86% 12%, rgba(127, 72, 255, 0.17), transparent 30%),
    radial-gradient(circle at 55% 84%, rgba(24, 91, 255, 0.09), transparent 32%),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 48%, #030a1b);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(79, 125, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 125, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

body.modal-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.container {
  width: min(var(--container), calc(100% - 34px));
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.text-center {
  text-align: center;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

/* Navigation */
.navbar {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(99, 132, 233, 0.12);
  background: rgba(2, 7, 22, 0.76);
  backdrop-filter: blur(22px);
}

.navbar-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.brand-logo {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  color: #021224;
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(140deg, #53e2ff, #19bfff 50%, #9960ff);
  box-shadow: 0 10px 34px rgba(29, 178, 255, 0.28);
}

.brand-logo::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  margin-right: auto;
}

.nav-links a {
  position: relative;
  padding: 27px 0 24px;
  color: #b1bdd7;
  font-size: 14px;
  transition: 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-links a.active::after,
.nav-links a:hover::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 17px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 16px rgba(21, 202, 255, 0.75);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-user {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Buttons */
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 13px;
  padding: 11px 18px;
  color: var(--text);
  font-weight: 750;
  white-space: nowrap;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.btn-primary {
  color: #fff;
  border: 1px solid rgba(132, 221, 255, 0.22);
  background: linear-gradient(115deg, #13bff2, #2488ff 53%, #8e4fff);
  box-shadow: 0 13px 32px rgba(28, 122, 255, 0.28);
}

.btn-primary:hover {
  box-shadow: 0 17px 40px rgba(28, 122, 255, 0.38);
}

.btn-secondary {
  color: #eef3ff;
  border: 1px solid rgba(102, 137, 224, 0.19);
  background: linear-gradient(180deg, rgba(18, 34, 71, 0.78), rgba(8, 19, 44, 0.82));
}

.btn-secondary:hover {
  border-color: rgba(53, 186, 255, 0.35);
  background: rgba(22, 45, 91, 0.78);
}

.btn-success {
  color: #041a12;
  background: linear-gradient(120deg, #2cdb8d, #7af0b8);
  box-shadow: 0 12px 30px rgba(46, 221, 144, 0.2);
}

.btn-danger {
  color: #ffdce2;
  border: 1px solid rgba(255, 98, 124, 0.27);
  background: rgba(255, 98, 124, 0.11);
}

.btn-danger:hover {
  background: rgba(255, 98, 124, 0.18);
}

.btn-small {
  min-height: 37px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 13px;
}

.btn-icon {
  width: 44px;
  padding: 0;
}

.btn svg,
.icon-inline {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Generic surfaces */
.card,
.glass-card,
.auth-card,
.quiz-shell,
.hero-demo,
.feature-strip,
.cta-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(145deg, rgba(13, 27, 62, 0.88), rgba(5, 14, 35, 0.9));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.card {
  padding: 22px;
  border-radius: var(--radius);
}

.badge,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(32, 201, 255, 0.22);
  border-radius: 999px;
  color: #7edfff;
  background: rgba(10, 138, 202, 0.08);
  font-size: 12px;
  font-weight: 750;
}

.badge::before,
.eyebrow::before {
  content: "✦";
  color: #3cd9ff;
  font-size: 12px;
}

/* Landing page */
.landing-hero {
  position: relative;
  min-height: calc(100vh - 75px);
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: 72px;
  align-items: center;
  padding: 46px 0 58px;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-copy h1 {
  max-width: 650px;
  margin: 21px 0 17px;
  font-size: clamp(44px, 5.8vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.052em;
}

.gradient-text {
  color: transparent;
  background: linear-gradient(100deg, #1ccaff 5%, #228eff 48%, #8a52ff 95%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 8px 25px rgba(28, 151, 255, 0.18));
}

.hero-copy > p {
  max-width: 600px;
  margin: 0;
  color: #a7b4cf;
  font-size: 17px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 28px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 31px;
  color: var(--muted);
  font-size: 12px;
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trust-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #65d8ff;
  background: rgba(37, 133, 255, 0.1);
}

.hero-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
}

.hero-orb {
  position: absolute;
  width: 510px;
  height: 510px;
  right: -5px;
  top: 0;
  border: 1px solid rgba(62, 97, 255, 0.36);
  border-radius: 47% 53% 55% 45% / 42% 38% 62% 58%;
  background:
    radial-gradient(circle at 37% 28%, rgba(47, 102, 255, 0.23), transparent 40%),
    linear-gradient(145deg, rgba(31, 69, 182, 0.14), rgba(82, 42, 196, 0.12));
  box-shadow:
    inset 0 0 90px rgba(32, 63, 210, 0.12),
    0 0 90px rgba(49, 55, 210, 0.08);
  transform: rotate(8deg);
}

.hero-orb::before,
.hero-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hero-orb::before {
  width: 340px;
  height: 340px;
  top: 80px;
  left: 65px;
  border: 1px solid rgba(25, 202, 255, 0.18);
}

.hero-orb::after {
  width: 9px;
  height: 9px;
  left: -24px;
  top: 210px;
  background: #8d5eff;
  box-shadow: 0 0 17px #8d5eff, -48px 112px 0 -2px #21bfff, -48px 112px 14px -1px #21bfff;
}

.hero-demo-wrap {
  position: relative;
  z-index: 2;
  width: min(530px, 100%);
  margin-left: auto;
  padding-top: 27px;
}

.hero-demo {
  position: relative;
  overflow: hidden;
  padding: 19px;
  border-radius: 22px;
  box-shadow: 0 32px 85px rgba(0, 0, 0, 0.48), 0 0 50px rgba(43, 100, 255, 0.13);
}

.hero-demo::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 160px;
  top: -90px;
  left: -70px;
  border-radius: 50%;
  background: rgba(31, 159, 255, 0.12);
  filter: blur(25px);
}

.demo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

.demo-progress-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.demo-progress-track {
  width: 66px;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(90, 104, 203, 0.18);
}

.demo-progress-track span {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7058ff, #9954ff);
}

.demo-question {
  position: relative;
  padding: 17px;
  border: 1px solid rgba(92, 124, 239, 0.18);
  border-radius: 17px;
  background: rgba(5, 15, 41, 0.72);
}

.demo-question-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 780;
}

.demo-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #dce5ff;
  background: linear-gradient(145deg, #33449a, #17265e);
}

.demo-option {
  position: relative;
  margin-top: 8px;
  padding: 12px 15px;
  border: 1px solid rgba(94, 119, 207, 0.1);
  border-radius: 11px;
  color: #aebad4;
  background: linear-gradient(90deg, rgba(17, 33, 73, 0.8), rgba(13, 27, 60, 0.75));
}

.demo-option.active {
  color: #fff;
  border-color: #15c8ff;
  background: linear-gradient(90deg, rgba(10, 78, 128, 0.35), rgba(21, 43, 101, 0.75));
  box-shadow: inset 0 0 22px rgba(21, 197, 255, 0.05), 0 0 16px rgba(21, 197, 255, 0.08);
}

.demo-check {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translateY(-50%);
  color: #fff;
  background: #2488ff;
  box-shadow: 0 0 20px rgba(36, 136, 255, 0.48);
}

.demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid rgba(92, 124, 239, 0.18);
  border-radius: 18px;
  background: rgba(6, 16, 40, 0.82);
}

.demo-stat {
  min-height: 84px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
}

.demo-stat + .demo-stat {
  border-left: 1px solid rgba(92, 124, 239, 0.15);
}

.demo-stat-icon,
.stat-icon,
.feature-icon,
.step-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #9fe7ff;
  background: linear-gradient(145deg, rgba(37, 144, 255, 0.22), rgba(34, 78, 181, 0.16));
  box-shadow: inset 0 0 18px rgba(37, 144, 255, 0.08);
}

.demo-stat:nth-child(2) .demo-stat-icon,
.feature-card:nth-child(2) .feature-icon {
  color: #62caff;
  background: rgba(27, 124, 255, 0.16);
}

.demo-stat:nth-child(3) .demo-stat-icon,
.feature-card:nth-child(3) .feature-icon {
  color: #64e9a9;
  background: rgba(36, 203, 126, 0.14);
}

.demo-stat small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted-2);
}

.demo-stat strong {
  font-size: 23px;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 80px;
  overflow: hidden;
  border-radius: 20px;
}

.feature-strip-item {
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 24px;
}

.feature-strip-item + .feature-strip-item {
  border-left: 1px solid rgba(101, 132, 223, 0.14);
}

.feature-strip-item strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
}

.feature-strip-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.landing-section {
  padding: 78px 0;
}

.section-heading {
  max-width: 700px;
  margin: 0 auto 38px;
  text-align: center;
}

.section-heading h2 {
  margin: 13px 0 12px;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.04em;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.steps-grid,
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.step-card,
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 235px;
}

.step-card::after,
.feature-card::after,
.quiz-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -80px;
  bottom: -95px;
  border-radius: 50%;
  background: rgba(33, 123, 255, 0.12);
  filter: blur(8px);
}

.step-number {
  position: absolute;
  right: 20px;
  top: 14px;
  color: rgba(112, 141, 217, 0.22);
  font-size: 57px;
  font-weight: 900;
}

.step-card h3,
.feature-card h3 {
  margin: 19px 0 10px;
  font-size: 19px;
}

.step-card p,
.feature-card p {
  color: var(--muted);
  line-height: 1.65;
}

.cta-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 44px;
  border-radius: 26px;
}

.cta-card::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -160px;
  top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 71, 255, 0.32), transparent 68%);
}

.cta-card h2 {
  position: relative;
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.04em;
}

.cta-card p {
  position: relative;
  margin: 0;
  color: var(--muted);
}

.site-footer {
  padding: 36px 0;
  border-top: 1px solid rgba(98, 126, 216, 0.11);
  color: var(--muted);
  font-size: 13px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* App pages */
.page {
  padding: 34px 0 66px;
}

.page-head,
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.page-head h1,
.section-head h2 {
  margin: 0 0 7px;
  letter-spacing: -0.035em;
}

.page-head h1 {
  font-size: clamp(30px, 4vw, 43px);
}

.dashboard-welcome {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 28px 30px;
  border-radius: 24px;
}

.dashboard-welcome::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 270px;
  right: -110px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 78, 255, 0.3), transparent 65%);
}

.dashboard-welcome h1,
.dashboard-welcome p,
.dashboard-welcome .nav-actions {
  position: relative;
  z-index: 1;
}

.dashboard-welcome h1 {
  margin: 0 0 8px;
  font-size: clamp(29px, 4vw, 43px);
  letter-spacing: -0.04em;
}

.dashboard-welcome p {
  margin: 0;
  color: var(--muted);
}

.dashboard-welcome-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.stats-grid,
.quiz-grid {
  display: grid;
  gap: 15px;
}

.stats-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
}

.stat-card {
  position: relative;
  min-height: 122px;
  display: flex;
  align-items: center;
  gap: 15px;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -45px;
  top: -48px;
  border-radius: 50%;
  background: rgba(36, 135, 255, 0.11);
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.stat-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
}

.stat-card strong {
  display: block;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.quiz-grid {
  grid-template-columns: repeat(3, 1fr);
}

.quiz-card {
  position: relative;
  min-height: 292px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.quiz-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 190, 255, 0.3);
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.46), 0 0 35px rgba(31, 130, 255, 0.08);
}

.quiz-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quiz-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.quiz-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.quiz-status.active,
.status-active {
  color: #57e6a8;
  border: 1px solid rgba(50, 219, 145, 0.21);
  background: rgba(50, 219, 145, 0.08);
}

.quiz-status.closed,
.status-closed {
  color: #ff899a;
  border: 1px solid rgba(255, 98, 124, 0.21);
  background: rgba(255, 98, 124, 0.08);
}

.quiz-card-date {
  color: var(--muted-2);
  font-size: 11px;
}

.quiz-card h3 {
  margin: 18px 0 8px;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.quiz-card p {
  min-height: 49px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.quiz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(101, 130, 214, 0.13);
  border-radius: 10px;
  color: #a9b6d0;
  background: rgba(21, 39, 80, 0.48);
  font-size: 12px;
}

.card-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.card-actions .btn-primary {
  flex: 1 1 130px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 62px 25px;
  text-align: center;
}

.empty-state .icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 20px;
  font-size: 32px;
  background: rgba(36, 135, 255, 0.14);
}

/* Forms/auth */
.auth-layout {
  min-height: calc(100vh - 75px);
  display: grid;
  place-items: center;
  padding: 42px 0;
}

.auth-card {
  position: relative;
  width: min(490px, 100%);
  overflow: hidden;
  padding: 34px;
  border-radius: 25px;
}

.auth-card::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 220px;
  right: -120px;
  top: -140px;
  border-radius: 50%;
  background: rgba(101, 75, 255, 0.21);
  filter: blur(12px);
}

.auth-card > * {
  position: relative;
}

.auth-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 18px;
  color: #021224;
  font-weight: 900;
  background: linear-gradient(140deg, #53e2ff, #19bfff 50%, #9960ff);
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.04em;
}

.form-grid {
  display: grid;
  gap: 17px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #b1bed6;
  font-size: 13px;
  font-weight: 700;
}

.input,
.textarea,
.select {
  width: 100%;
  outline: 0;
  border: 1px solid rgba(97, 127, 215, 0.17);
  border-radius: 13px;
  padding: 13px 14px;
  color: var(--text);
  background: rgba(9, 21, 50, 0.78);
  transition: 0.18s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: #63749b;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(28, 193, 255, 0.58);
  box-shadow: 0 0 0 4px rgba(28, 193, 255, 0.08), 0 0 25px rgba(28, 130, 255, 0.07);
}

.textarea {
  min-height: 105px;
  resize: vertical;
}

.select option {
  color: #111;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aab7cf;
  font-size: 14px;
}

.checkbox input,
.correct-radio {
  accent-color: #24c7ff;
}

.error-message,
.success-message,
.modal-error {
  display: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.error-message,
.modal-error {
  color: #ffd9e0;
  border: 1px solid rgba(255, 98, 124, 0.27);
  background: rgba(255, 98, 124, 0.11);
}

.success-message {
  color: #d9ffed;
  border: 1px solid rgba(50, 219, 145, 0.27);
  background: rgba(50, 219, 145, 0.11);
}

/* Editor */
.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 295px;
  gap: 20px;
  align-items: start;
}

.editor-sidebar {
  position: sticky;
  top: 96px;
}

.editor-sidebar h3 {
  margin-top: 0;
}

.editor-checklist {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.editor-checklist div {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.editor-checklist span {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #5fe4ac;
  background: rgba(50, 219, 145, 0.1);
}

.question-editor {
  position: relative;
  margin-top: 16px;
  padding: 21px;
  overflow: hidden;
  border: 1px solid rgba(97, 127, 215, 0.16);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(13, 29, 65, 0.86), rgba(6, 16, 40, 0.88));
}

.question-editor::before {
  content: "";
  position: absolute;
  width: 4px;
  inset: 20px auto 20px 0;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
}

.question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.question-head h3 {
  margin: 0;
  font-size: 17px;
}

.option-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.correct-radio {
  width: 19px;
  height: 19px;
}

.editor-actions {
  position: sticky;
  bottom: 15px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 13px;
  border: 1px solid rgba(95, 129, 223, 0.2);
  border-radius: 17px;
  background: rgba(3, 10, 27, 0.88);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

/* Import */
.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.file-drop {
  min-height: 195px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed rgba(37, 194, 255, 0.42);
  border-radius: 18px;
  text-align: center;
  color: #a9b9d6;
  background:
    radial-gradient(circle at center, rgba(31, 136, 255, 0.09), transparent 62%),
    rgba(8, 22, 52, 0.58);
  transition: 0.2s ease;
}

.file-drop:hover,
.file-drop.dragging {
  border-color: #32ceff;
  background: rgba(16, 63, 113, 0.26);
  box-shadow: inset 0 0 35px rgba(27, 169, 255, 0.06);
}

.file-drop-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #bdeeff;
  font-size: 28px;
  background: linear-gradient(145deg, rgba(35, 160, 255, 0.26), rgba(96, 65, 255, 0.17));
}

.file-drop strong {
  color: #edf4ff;
}

.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.import-guide {
  position: sticky;
  top: 96px;
}

.format-example {
  overflow-x: auto;
  padding: 17px;
  border: 1px solid rgba(94, 124, 214, 0.14);
  border-radius: 14px;
  color: #cbd7ee;
  background: rgba(3, 11, 29, 0.76);
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.import-preview-list {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.import-preview-question {
  padding: 17px;
  border: 1px solid rgba(95, 126, 218, 0.14);
  border-radius: 15px;
  background: rgba(10, 25, 57, 0.68);
}

.import-preview-question h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.import-preview-options {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--muted);
}

.import-preview-options > div {
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(20, 39, 78, 0.45);
}

.import-preview-options .correct-preview {
  color: #bff8dc;
  border: 1px solid rgba(50, 219, 145, 0.2);
  background: rgba(50, 219, 145, 0.08);
}

.import-warnings {
  margin-top: 15px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 189, 82, 0.25);
  border-radius: 13px;
  color: #ffe1ad;
  background: rgba(255, 189, 82, 0.09);
}

/* Public quiz */
.quiz-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.quiz-shell {
  width: min(900px, calc(100% - 28px));
  margin: 34px auto;
  overflow: hidden;
  border-radius: 25px;
}

.quiz-content {
  padding: clamp(23px, 5vw, 45px);
}

.quiz-progress {
  height: 8px;
  background: rgba(98, 119, 205, 0.13);
}

.quiz-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  box-shadow: 0 0 18px rgba(33, 179, 255, 0.38);
  transition: width 0.25s ease;
}

.quiz-welcome-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 20px;
  font-size: 30px;
  background: linear-gradient(145deg, rgba(38, 158, 255, 0.27), rgba(128, 73, 255, 0.19));
}

.quiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
  color: var(--muted);
}

.timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 189, 82, 0.2);
  border-radius: 10px;
  color: var(--warning);
  background: rgba(255, 189, 82, 0.07);
  font-weight: 850;
}

.question-title {
  margin: 0;
  font-size: clamp(24px, 4vw, 35px);
  line-height: 1.35;
  letter-spacing: -0.028em;
}

.answer-list {
  display: grid;
  gap: 11px;
  margin: 25px 0;
}

.answer-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(94, 124, 211, 0.15);
  border-radius: 14px;
  color: #e9effc;
  text-align: left;
  background: linear-gradient(90deg, rgba(19, 37, 77, 0.75), rgba(12, 27, 60, 0.72));
  transition: 0.18s ease;
}

.answer-btn:hover {
  border-color: rgba(35, 188, 255, 0.35);
  background: rgba(22, 52, 101, 0.72);
}

.answer-btn.selected {
  border-color: #18c8ff;
  background: linear-gradient(90deg, rgba(12, 88, 139, 0.38), rgba(28, 48, 112, 0.72));
  box-shadow: 0 0 22px rgba(20, 188, 255, 0.08);
}

.answer-letter {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-weight: 850;
  background: rgba(91, 112, 195, 0.16);
}

.answer-btn.selected .answer-letter {
  color: #031323;
  background: linear-gradient(145deg, #47d9ff, #268cff);
}

.quiz-navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.result-score {
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  margin: 5px auto 25px;
  border-radius: 50%;
  background: conic-gradient(var(--success) 0deg, rgba(99, 122, 205, 0.12) 0deg);
  box-shadow: 0 0 48px rgba(50, 219, 145, 0.12);
}

.result-score-inner {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #07152f;
}

.result-score strong {
  display: block;
  font-size: 40px;
  letter-spacing: -0.04em;
}

/* Results table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 19px;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  background: rgba(7, 18, 43, 0.86);
}

th,
td {
  padding: 14px 15px;
  text-align: left;
  border-bottom: 1px solid rgba(92, 121, 211, 0.12);
}

th {
  color: #8fa0c2;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(12, 29, 65, 0.8);
}

td {
  color: #d9e2f5;
  font-size: 14px;
}

tbody tr:hover {
  background: rgba(31, 69, 130, 0.16);
}

/* Share QR modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 3, 13, 0.76);
  backdrop-filter: blur(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-backdrop.open {
  visibility: visible;
  opacity: 1;
}

.share-modal {
  width: min(820px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(60, 178, 255, 0.25);
  border-radius: 25px;
  background:
    radial-gradient(circle at 85% 5%, rgba(116, 72, 255, 0.22), transparent 30%),
    linear-gradient(145deg, #0b1b40, #050e25 68%);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.62), 0 0 50px rgba(33, 124, 255, 0.12);
  transform: translateY(12px) scale(0.985);
  transition: transform 0.2s ease;
}

.modal-backdrop.open .share-modal {
  transform: translateY(0) scale(1);
}

.share-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 23px 17px;
  border-bottom: 1px solid rgba(95, 128, 221, 0.13);
}

.share-modal-head h2 {
  margin: 0 0 5px;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.share-modal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.modal-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(100, 128, 211, 0.16);
  border-radius: 12px;
  color: #c9d4e8;
  background: rgba(19, 38, 78, 0.62);
}

.share-loading {
  min-height: 310px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.loading-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border: 3px solid rgba(76, 110, 205, 0.17);
  border-top-color: #20c8ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.share-content {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 23px;
  padding: 23px;
}

.qr-panel {
  padding: 18px;
  border: 1px solid rgba(100, 132, 222, 0.16);
  border-radius: 19px;
  text-align: center;
  background: rgba(7, 18, 43, 0.68);
}

.qr-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 13px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

.qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-panel p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.share-detail h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.share-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
}

.share-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.share-status.active {
  color: #59e3a9;
}

.share-status.inactive {
  color: #ff899a;
}

.share-link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-bottom: 16px;
}

.share-link-box .input {
  min-width: 0;
}

.share-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.share-actions-grid .btn {
  width: 100%;
}

.share-help {
  margin: 16px 0 0;
  padding: 12px 13px;
  border: 1px solid rgba(54, 185, 255, 0.14);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(24, 91, 153, 0.08);
  font-size: 12px;
  line-height: 1.55;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  max-width: min(390px, calc(100% - 40px));
  padding: 13px 16px;
  border: 1px solid rgba(42, 200, 255, 0.25);
  border-radius: 13px;
  color: #eaf8ff;
  background: linear-gradient(145deg, #12345c, #0a1d3c);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.46);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1020px) {
  .nav-links {
    display: none;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 54px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy h1,
  .hero-copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .hero-visual {
    min-height: 500px;
  }

  .hero-demo-wrap {
    margin-right: auto;
  }

  .hero-orb {
    right: 50%;
    transform: translateX(50%) rotate(8deg);
  }

  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-strip-item:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(101, 132, 223, 0.14);
  }

  .feature-strip-item:nth-child(4) {
    border-top: 1px solid rgba(101, 132, 223, 0.14);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quiz-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .editor-grid {
    grid-template-columns: 1fr;
  }

  .editor-sidebar,
  .import-guide {
    position: static;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 22px, var(--container));
  }

  .navbar-inner {
    min-height: 66px;
  }

  .brand-logo {
    width: 39px;
    height: 39px;
  }

  .nav-user {
    display: none;
  }

  .landing-hero {
    min-height: auto;
    padding: 42px 0 30px;
  }

  .hero-copy h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .hero-copy > p {
    font-size: 15px;
  }

  .hero-visual {
    min-height: 420px;
  }

  .hero-orb {
    width: 390px;
    height: 390px;
  }

  .hero-demo-wrap {
    padding-top: 0;
  }

  .demo-stats {
    grid-template-columns: 1fr;
  }

  .demo-stat + .demo-stat {
    border-top: 1px solid rgba(92, 124, 239, 0.15);
    border-left: 0;
  }

  .feature-strip,
  .steps-grid,
  .features-grid,
  .quiz-grid,
  .import-layout,
  .form-row {
    grid-template-columns: 1fr;
  }

  .feature-strip-item + .feature-strip-item {
    border-top: 1px solid rgba(101, 132, 223, 0.14);
    border-left: 0;
  }

  .dashboard-welcome-inner,
  .page-head,
  .section-head,
  .cta-card,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-welcome .nav-actions,
  .page-head .nav-actions {
    width: 100%;
  }

  .dashboard-welcome .nav-actions .btn,
  .page-head .nav-actions .btn {
    flex: 1;
  }

  .share-content {
    grid-template-columns: 1fr;
  }

  .qr-panel {
    width: min(290px, 100%);
    margin: 0 auto;
  }

  .share-actions-grid {
    grid-template-columns: 1fr;
  }

  .option-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .option-row .remove-option {
    grid-column: 2;
  }

  .editor-actions,
  .quiz-navigation {
    flex-direction: column;
  }

  .editor-actions .btn,
  .quiz-navigation .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .nav-actions .btn-secondary:not([data-logout]) {
    display: none;
  }

  .nav-actions .btn {
    padding-left: 13px;
    padding-right: 13px;
  }

  .hero-actions,
  .hero-actions .btn {
    width: 100%;
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    text-align: left;
  }

  .hero-visual {
    min-height: 400px;
  }

  .hero-orb {
    width: 335px;
    height: 335px;
  }

  .hero-demo {
    padding: 13px;
  }

  .demo-option {
    padding-right: 42px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .card,
  .auth-card {
    padding: 18px;
  }

  .dashboard-welcome {
    padding: 22px 18px;
  }

  .share-link-box {
    grid-template-columns: 1fr;
  }

  .share-link-box .btn {
    width: 100%;
  }
}

.share-detail > .form-group > span {
  display: block;
  margin-bottom: 8px;
  color: #b1bed6;
  font-size: 13px;
  font-weight: 700;
}

.question-editor .form-row {
  grid-template-columns: minmax(0, 1fr) 120px;
}

/* =========================================================
   UzQuiz Premium 2.1 — editor ichidagi fayl importi
   ========================================================= */
.editor-import-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(38, 196, 255, 0.24);
  background:
    radial-gradient(circle at 8% 0%, rgba(35, 197, 255, 0.12), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(120, 84, 255, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(11, 27, 62, 0.94), rgba(5, 15, 38, 0.94));
}

.editor-import-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -105px;
  top: -120px;
  border-radius: 50%;
  background: rgba(35, 197, 255, 0.08);
  filter: blur(2px);
  pointer-events: none;
}

.editor-import-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.editor-import-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.editor-import-title h2 {
  margin: 7px 0 5px;
  font-size: clamp(20px, 3vw, 27px);
}

.editor-import-title p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.editor-import-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67, 204, 255, 0.26);
  border-radius: 18px;
  color: #d5f6ff;
  font-size: 27px;
  background: linear-gradient(145deg, rgba(37, 182, 255, 0.25), rgba(105, 78, 255, 0.18));
  box-shadow: 0 15px 32px rgba(30, 129, 255, 0.16);
}

.editor-import-body {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(99, 132, 224, 0.17);
  animation: fadeUp 0.22s ease;
}

.editor-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}

.file-drop-compact {
  min-height: 165px;
}

.inline-import-guide {
  padding: 17px;
  border: 1px solid rgba(94, 126, 219, 0.15);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(4, 14, 35, 0.56);
}

.inline-import-guide > strong {
  display: block;
  margin-bottom: 10px;
  color: #eef5ff;
}

.inline-import-guide p {
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.format-example.compact {
  margin: 0;
  padding: 13px;
  font-size: 12px;
  line-height: 1.55;
}

.inline-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inline-import-success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(50, 219, 145, 0.28);
  border-radius: 15px;
  color: #d9ffed;
  background: linear-gradient(135deg, rgba(50, 219, 145, 0.11), rgba(35, 197, 255, 0.07));
}

.inline-import-success strong {
  display: block;
  margin-bottom: 4px;
  color: #effff7;
}

.inline-import-success p {
  margin: 0;
  color: #b8ddce;
  font-size: 13px;
  line-height: 1.5;
}

.question-count-badge {
  display: inline-grid;
  min-width: 29px;
  height: 29px;
  place-items: center;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid rgba(43, 197, 255, 0.28);
  border-radius: 999px;
  color: #d9f7ff;
  font-size: 13px;
  vertical-align: middle;
  background: rgba(38, 183, 255, 0.12);
}

@media (max-width: 900px) {
  .editor-import-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .editor-import-head,
  .inline-import-success {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-import-head > .btn,
  .inline-import-success > .btn,
  .inline-import-actions,
  .inline-import-actions .btn {
    width: 100%;
  }

  .editor-import-title {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .editor-import-title {
    display: block;
  }

  .editor-import-icon {
    margin-bottom: 13px;
  }
}

/* ======================================================================
   UzQuiz Premium 2.2 — screenshot-matched premium interface
   ====================================================================== */
:root {
  --container: 1040px;
  --bg: #020817;
  --bg-deep: #01050f;
  --surface: rgba(7, 20, 48, 0.88);
  --surface-strong: rgba(8, 23, 57, 0.97);
  --surface-soft: rgba(14, 34, 76, 0.62);
  --cyan: #12c8f4;
  --blue: #1c8fff;
  --violet: #9455ff;
  --text: #f8faff;
  --muted: #9aa9c6;
  --muted-2: #7181a3;
  --border: rgba(64, 109, 211, 0.24);
  --border-strong: rgba(22, 178, 255, 0.46);
  --radius: 19px;
  --radius-sm: 12px;
}

body {
  background:
    radial-gradient(circle at 78% 11%, rgba(65, 71, 223, 0.14), transparent 28%),
    radial-gradient(circle at 9% 48%, rgba(0, 139, 228, 0.08), transparent 28%),
    linear-gradient(180deg, #01050f 0%, #020817 48%, #02091b 100%);
}

body::before {
  opacity: 0.1;
  background-size: 82px 82px;
}

.navbar {
  min-height: 78px;
  background: rgba(1, 6, 20, 0.84);
  border-bottom-color: rgba(66, 96, 174, 0.13);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.navbar-inner {
  min-height: 78px;
}

.brand {
  gap: 10px;
  font-size: 19px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 15px;
  background: linear-gradient(145deg, #5ee6ff 0%, #20bff8 53%, #755cff 100%);
  box-shadow: 0 12px 30px rgba(19, 183, 255, 0.27);
}

.brand-logo::after {
  border-radius: 9px;
}

.nav-links {
  gap: 31px;
}

.nav-links a {
  padding: 29px 0 26px;
  font-size: 13px;
}

.nav-links a.active::after,
.nav-links a:hover::after {
  left: 20%;
  right: 20%;
  bottom: 17px;
  height: 3px;
}

.nav-actions {
  gap: 13px;
}

.btn {
  min-height: 43px;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.btn-small {
  min-height: 39px;
  padding: 8px 15px;
}

.btn-primary {
  background: linear-gradient(103deg, #14c2ec 0%, #1f91ff 53%, #914cff 100%);
  box-shadow: 0 13px 30px rgba(28, 116, 255, 0.3), inset 0 1px rgba(255,255,255,.12);
}

.btn-secondary {
  background: linear-gradient(180deg, rgba(11, 25, 56, 0.93), rgba(5, 15, 37, 0.92));
  border-color: rgba(70, 102, 179, 0.22);
}

.button-icon {
  font-size: 17px;
  line-height: 1;
}

.mobile-nav-toggle {
  display: none;
  width: 41px;
  height: 41px;
  padding: 10px;
  border: 1px solid rgba(80, 112, 200, 0.24);
  border-radius: 11px;
  background: rgba(8, 21, 50, 0.85);
}

.mobile-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 999px;
  background: #dce7ff;
}

/* Screenshot-matched landing hero */
.landing-hero {
  min-height: 478px;
  grid-template-columns: 0.93fr 1.07fr;
  gap: 45px;
  padding: 32px 0 14px;
}

.hero-copy h1 {
  max-width: 520px;
  margin: 20px 0 14px;
  font-size: clamp(40px, 4.15vw, 50px);
  line-height: 1.17;
  letter-spacing: -0.048em;
}

.hero-copy > p {
  max-width: 500px;
  font-size: 14px;
  line-height: 1.72;
}

.eyebrow {
  padding: 7px 11px;
  font-size: 11px;
  background: rgba(7, 97, 142, 0.09);
}

.hero-actions {
  gap: 17px;
  margin-top: 23px;
}

.hero-actions .btn {
  min-height: 44px;
  padding-inline: 20px;
}

.hero-trust {
  gap: 28px;
  margin-top: 25px;
  font-size: 11px;
}

.trust-icon {
  width: 22px;
  height: 22px;
  background: transparent;
  font-style: normal;
}

.shield-icon { color: #725cff; }
.lightning-icon { color: #ffac35; }
.chart-icon { color: #7d8cad; }

.hero-visual {
  min-height: 430px;
}

.hero-orb {
  width: 535px;
  height: 430px;
  right: -54px;
  top: 0;
  border-radius: 48% 52% 54% 46% / 42% 39% 61% 58%;
  background:
    radial-gradient(circle at 33% 27%, rgba(37, 95, 235, 0.22), transparent 46%),
    linear-gradient(145deg, rgba(20, 56, 166, 0.13), rgba(81, 37, 191, 0.15));
}

.hero-orb::before {
  width: 335px;
  height: 335px;
  top: 45px;
  left: 74px;
}

.hero-orb::after {
  left: -98px;
  top: 100px;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 16px #8d5eff, 38px 111px 0 -1px #7056ff, 38px 111px 12px #7056ff;
}

.hero-stars i {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7559ff;
  box-shadow: 0 0 12px #7559ff;
}

.hero-stars i:nth-child(1) { left: -80px; top: 57px; }
.hero-stars i:nth-child(2) { left: -42px; top: 169px; }
.hero-stars i:nth-child(3) { left: -4px; top: 217px; }

.hero-demo-wrap {
  width: min(507px, 100%);
  padding-top: 37px;
}

.hero-demo {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(8, 25, 66, 0.96), rgba(3, 15, 42, 0.95));
  border-color: rgba(47, 103, 231, 0.35);
  box-shadow: 0 27px 70px rgba(0, 0, 0, 0.4), 0 0 48px rgba(56, 72, 255, 0.08);
}

.demo-top {
  margin-bottom: 12px;
}

.badge {
  padding: 8px 12px;
  border-radius: 999px;
  color: #cbd8ff;
  background: linear-gradient(130deg, rgba(19, 105, 208, 0.22), rgba(74, 64, 190, 0.19));
  border: 1px solid rgba(47, 115, 237, 0.21);
  font-size: 11px;
}

.demo-question {
  padding: 15px;
  border-radius: 16px;
}

.demo-question-title {
  margin-bottom: 10px;
  font-size: 14px;
}

.demo-number {
  width: 27px;
  height: 27px;
  font-size: 12px;
}

.demo-option {
  margin-top: 7px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 12px;
}

.demo-check {
  width: 22px;
  height: 22px;
  right: 10px;
  font-size: 12px;
}

.demo-stats {
  margin-top: 9px;
  border-radius: 16px;
}

.demo-stat {
  min-height: 77px;
  gap: 11px;
  padding: 12px 15px;
}

.demo-stat-icon,
.stat-icon,
.feature-icon,
.step-icon {
  width: 41px;
  height: 41px;
  border-radius: 12px;
}

.demo-stat small {
  font-size: 10px;
}

.demo-stat strong {
  font-size: 21px;
}

.purple,
.feature-icon.violet,
.step-icon.violet {
  color: #a98dff !important;
  background: linear-gradient(145deg, rgba(104, 67, 255, 0.24), rgba(75, 35, 177, 0.17)) !important;
  box-shadow: 0 0 22px rgba(105, 65, 255, 0.1) !important;
}

.blue {
  color: #4cc9ff !important;
  background: linear-gradient(145deg, rgba(20, 133, 255, 0.24), rgba(19, 70, 174, 0.17)) !important;
}

.teal,
.feature-icon.teal,
.step-icon.teal {
  color: #33e5d0 !important;
  background: linear-gradient(145deg, rgba(0, 201, 190, 0.21), rgba(8, 93, 127, 0.17)) !important;
}

.green,
.feature-icon.green {
  color: #64e9a9 !important;
  background: linear-gradient(145deg, rgba(35, 207, 126, 0.2), rgba(22, 94, 72, 0.17)) !important;
}

.amber,
.feature-icon.amber {
  color: #ffbd52 !important;
  background: linear-gradient(145deg, rgba(255, 168, 34, 0.2), rgba(118, 70, 17, 0.16)) !important;
}

.paper-plane {
  color: #7185ff !important;
  background: linear-gradient(145deg, rgba(58, 83, 255, 0.24), rgba(28, 45, 141, 0.17)) !important;
}

.feature-strip {
  min-height: 110px;
  margin-top: 0;
  margin-bottom: 72px;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(5, 18, 45, 0.94), rgba(3, 13, 34, 0.94));
  box-shadow: 0 18px 50px rgba(0,0,0,.27);
}

.feature-strip-item {
  min-height: 108px;
  gap: 14px;
  padding: 19px 22px;
}

.feature-strip-item strong {
  font-size: 13px;
}

.feature-strip-item p {
  font-size: 10.5px;
  line-height: 1.55;
}

.landing-section-soft {
  background: linear-gradient(180deg, rgba(7, 17, 42, 0.16), rgba(5, 14, 34, 0.34), rgba(7, 17, 42, 0.12));
  border-block: 1px solid rgba(77, 105, 190, 0.07);
}

/* Global back button */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 9px 13px;
  border: 1px solid rgba(76, 112, 207, 0.22);
  border-radius: 11px;
  color: #bdcae2;
  background: linear-gradient(180deg, rgba(11, 28, 62, 0.78), rgba(5, 16, 40, 0.78));
  font-size: 12px;
  font-weight: 750;
  transition: .18s ease;
}

.back-link:hover {
  color: #fff;
  border-color: rgba(27, 191, 255, 0.43);
  background: rgba(17, 49, 94, 0.72);
  transform: translateX(-2px);
}

.back-link span {
  color: #42d4ff;
  font-size: 16px;
}

/* App navigation */
.app-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: auto;
}

.app-nav-links a {
  position: relative;
  padding: 29px 0 25px;
  color: #9daccc;
  font-size: 13px;
}

.app-nav-links a:hover,
.app-nav-links a.active {
  color: #fff;
}

.app-nav-links a.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 17px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 13px rgba(22, 195, 255, .55);
}

.user-chip {
  max-width: 185px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bdc8de;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.user-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-avatar {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(51, 188, 255, .24);
  border-radius: 10px;
  color: #bdecff;
  background: rgba(26, 118, 190, .15);
  font-weight: 850;
}

.page {
  padding-top: 25px;
}

/* Dashboard */
.dashboard-hero {
  position: relative;
  min-height: 248px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 28px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 31px 34px;
  border-color: rgba(51, 120, 242, 0.27);
  background:
    radial-gradient(circle at 84% 20%, rgba(86, 66, 255, .23), transparent 34%),
    linear-gradient(145deg, rgba(8, 24, 58, .96), rgba(3, 14, 37, .96));
}

.dashboard-hero::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  right: -150px;
  top: -210px;
  border: 1px solid rgba(58, 91, 234, .28);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 79, 205, .16), transparent 66%);
}

.dashboard-hero-copy,
.dashboard-hero-preview {
  position: relative;
  z-index: 2;
}

.dashboard-hero h1 {
  max-width: 580px;
  margin: 13px 0 9px;
  font-size: clamp(31px, 4vw, 43px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.dashboard-hero p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 20px;
}

.dashboard-hero-preview {
  display: grid;
  place-items: center;
}

.mini-quiz-card {
  width: min(330px, 100%);
  padding: 18px;
  border: 1px solid rgba(60, 111, 231, .3);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(10, 30, 72, .94), rgba(5, 18, 47, .94));
  box-shadow: 0 22px 58px rgba(0,0,0,.34), 0 0 30px rgba(39, 90, 255, .09);
  transform: rotate(1.4deg);
}

.mini-quiz-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 11px;
}

.mini-quiz-card > strong {
  display: block;
  font-size: 16px;
}

.mini-progress {
  height: 7px;
  margin: 15px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(87, 104, 195, .17);
}

.mini-progress span {
  display: block;
  width: 67%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16c7f2, #2b83ff, #9853ff);
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mini-metrics div {
  padding: 10px;
  border: 1px solid rgba(74, 108, 198, .12);
  border-radius: 11px;
  background: rgba(9, 23, 54, .7);
}

.mini-metrics small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted-2);
  font-size: 9px;
}

.mini-metrics b {
  font-size: 18px;
}

.dashboard-stats {
  margin-bottom: 18px;
}

.stat-card {
  min-height: 110px;
  padding: 19px;
}

.stat-card strong {
  font-size: 29px;
}

.dashboard-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 31px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(6, 20, 49, .9), rgba(3, 13, 34, .92));
  box-shadow: 0 18px 48px rgba(0,0,0,.26);
}

.dashboard-feature-strip article {
  min-height: 97px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
}

.dashboard-feature-strip article + article {
  border-left: 1px solid rgba(84, 114, 201, .13);
}

.dashboard-feature-strip strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.dashboard-feature-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.quiz-list-head {
  scroll-margin-top: 95px;
}

.quiz-list-head h2 {
  margin-top: 9px;
}

.quiz-card {
  min-height: 306px;
  padding: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(54, 73, 224, .1), transparent 34%),
    linear-gradient(145deg, rgba(8, 23, 55, .94), rgba(4, 15, 38, .94));
}

.quiz-card .card-actions .btn {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 11px;
}

/* Editor */
.editor-hero,
.results-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  overflow: hidden;
  margin-bottom: 15px;
  padding: 27px 31px;
  background:
    radial-gradient(circle at 93% 8%, rgba(102, 68, 255, .2), transparent 34%),
    linear-gradient(145deg, rgba(8, 24, 58, .96), rgba(3, 14, 37, .96));
}

.editor-hero::after,
.results-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -105px;
  top: -170px;
  border: 1px solid rgba(51, 106, 234, .25);
  border-radius: 50%;
}

.editor-hero > *,
.results-hero > * {
  position: relative;
  z-index: 1;
}

.editor-hero h1,
.results-hero h1 {
  margin: 10px 0 7px;
  font-size: clamp(29px, 4vw, 40px);
  letter-spacing: -.04em;
}

.editor-hero p,
.results-hero p {
  max-width: 670px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.editor-hero-graphic {
  display: flex;
  align-items: center;
  gap: 7px;
}

.editor-hero-graphic span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 177, 255, .29);
  border-radius: 12px;
  color: #d9f4ff;
  background: rgba(23, 111, 191, .18);
  font-weight: 850;
}

.editor-hero-graphic span:last-child {
  border-color: rgba(128, 83, 255, .3);
  background: rgba(92, 62, 190, .18);
}

.editor-hero-graphic i {
  width: 31px;
  height: 2px;
  background: linear-gradient(90deg, #28c7f8, #7458ff);
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(5, 18, 45, .83);
}

.workflow-strip article {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
}

.workflow-strip article + article {
  border-left: 1px solid rgba(83, 114, 202, .14);
}

.workflow-strip article > span {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(83, 115, 204, .23);
  border-radius: 10px;
  color: #8998b6;
  background: rgba(17, 34, 71, .65);
  font-size: 12px;
  font-weight: 850;
}

.workflow-strip article.active > span {
  color: #04121e;
  border-color: transparent;
  background: linear-gradient(145deg, #52dfff, #278fff);
  box-shadow: 0 0 21px rgba(36, 161, 255, .24);
}

.workflow-strip strong {
  display: block;
  font-size: 12px;
}

.workflow-strip p {
  margin: 3px 0 0;
  color: var(--muted-2);
  font-size: 10px;
}

.form-top-message {
  margin-bottom: 15px;
}

.editor-import-card {
  padding: 22px;
}

.settings-card {
  padding: 23px;
}

.compact-head {
  align-items: flex-start;
  margin-bottom: 19px;
}

.section-number {
  display: inline-flex;
  margin-bottom: 7px;
  color: #47d7ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.toggle-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: center;
  min-height: 72px;
  padding: 13px;
  border: 1px solid rgba(81, 113, 203, .16);
  border-radius: 13px;
  background: rgba(8, 22, 52, .68);
  cursor: pointer;
  transition: .18s ease;
}

.toggle-card:hover {
  border-color: rgba(34, 183, 255, .3);
  background: rgba(13, 39, 78, .7);
}

.toggle-card input {
  position: absolute;
  opacity: 0;
}

.toggle-control {
  position: relative;
  width: 39px;
  height: 22px;
  border-radius: 999px;
  background: rgba(82, 101, 169, .3);
  transition: .2s ease;
}

.toggle-control::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #9caac4;
  transition: .2s ease;
}

.toggle-card input:checked + .toggle-control {
  background: linear-gradient(90deg, #13bff1, #6e58ff);
  box-shadow: 0 0 17px rgba(26, 178, 255, .18);
}

.toggle-card input:checked + .toggle-control::after {
  left: 20px;
  background: #fff;
}

.toggle-card strong,
.toggle-card small {
  display: block;
}

.toggle-card strong {
  margin-bottom: 3px;
  font-size: 12px;
}

.toggle-card small {
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.35;
}

.question-section-head {
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(78, 111, 204, .17);
  border-radius: 16px;
  background: rgba(5, 18, 45, .7);
}

.question-section-head h2 {
  margin-bottom: 5px;
}

.question-count-badge {
  display: inline-grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  margin-left: 6px;
  border: 1px solid rgba(39, 190, 255, .25);
  border-radius: 9px;
  color: #70ddff;
  background: rgba(24, 118, 189, .13);
  font-size: 13px;
  vertical-align: 3px;
}

.question-editor {
  padding: 22px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(76, 65, 211, .08), transparent 32%),
    linear-gradient(145deg, rgba(8, 24, 58, .94), rgba(4, 15, 38, .94));
}

.question-editor::before {
  inset-block: 18px;
}

.option-row .input {
  min-height: 44px;
}

.editor-sidebar {
  top: 93px;
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 70, 255, .12), transparent 33%),
    linear-gradient(145deg, rgba(8, 24, 57, .95), rgba(4, 15, 38, .95));
}

.sidebar-tip {
  display: flex;
  gap: 10px;
  margin-top: 19px;
  padding: 12px;
  border: 1px solid rgba(35, 185, 255, .15);
  border-radius: 12px;
  background: rgba(21, 86, 143, .09);
}

.sidebar-tip > span {
  color: #49d7ff;
}

.sidebar-tip p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.editor-save-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.editor-save-note span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #62e7ad;
  background: rgba(50, 219, 145, .1);
}

/* Authentication */
.auth-layout {
  min-height: calc(100vh - 78px);
  display: block;
  padding: 25px 0 42px;
}

.auth-back {
  margin-bottom: 16px;
}

.auth-shell {
  min-height: 555px;
  display: grid;
  grid-template-columns: minmax(380px, .92fr) minmax(420px, 1.08fr);
  overflow: hidden;
  border: 1px solid rgba(57, 105, 216, .27);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(7, 21, 51, .97), rgba(3, 13, 34, .97));
  box-shadow: 0 32px 90px rgba(0,0,0,.44);
}

.auth-shell .auth-card {
  width: auto;
  padding: 42px;
  border: 0;
  border-radius: 0;
  background: rgba(3, 14, 36, .55);
  box-shadow: none;
}

.auth-shell .auth-card::before {
  display: none;
}

.auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
  border-left: 1px solid rgba(70, 107, 201, .18);
  background:
    radial-gradient(circle at 70% 18%, rgba(75, 67, 238, .24), transparent 33%),
    linear-gradient(145deg, rgba(7, 26, 68, .9), rgba(5, 17, 45, .94));
}

.auth-aside > *:not(.auth-orb) {
  position: relative;
  z-index: 2;
}

.auth-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  right: -170px;
  top: -170px;
  border: 1px solid rgba(69, 91, 238, .29);
  border-radius: 48% 52% 54% 46%;
  background: radial-gradient(circle, rgba(54, 73, 208, .17), transparent 67%);
}

.auth-aside h2 {
  max-width: 470px;
  margin: 15px 0 22px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.14;
  letter-spacing: -.04em;
}

.auth-preview-card {
  padding: 17px;
  border: 1px solid rgba(52, 111, 232, .28);
  border-radius: 18px;
  background: rgba(4, 17, 46, .8);
  box-shadow: 0 22px 55px rgba(0,0,0,.3);
}

.auth-preview-card > strong {
  display: block;
  margin-bottom: 12px;
}

.auth-preview-option {
  position: relative;
  margin-top: 8px;
  padding: 11px 13px;
  border: 1px solid rgba(82, 109, 190, .13);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(16, 35, 74, .68);
  font-size: 12px;
}

.auth-preview-option.active {
  color: #fff;
  border-color: #18c8ff;
  background: rgba(13, 78, 127, .33);
}

.auth-preview-option span {
  position: absolute;
  right: 10px;
  color: #58d9ff;
}

.status-dot {
  color: #55e6a8;
}

.auth-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.auth-feature-row span {
  padding: 8px 10px;
  border: 1px solid rgba(79, 111, 202, .15);
  border-radius: 10px;
  color: #aab8d1;
  background: rgba(11, 29, 63, .64);
  font-size: 10px;
}

.auth-benefits {
  display: grid;
  gap: 11px;
}

.auth-benefits article {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid rgba(76, 108, 198, .15);
  border-radius: 14px;
  background: rgba(5, 20, 50, .72);
}

.auth-benefits strong {
  display: block;
  font-size: 13px;
}

.auth-benefits p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.auth-submit {
  width: 100%;
}

.text-link {
  color: #47d8ff;
  font-weight: 750;
}

/* Public quiz */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.online-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #45df9b;
  box-shadow: 0 0 10px #45df9b;
}

.quiz-main {
  position: relative;
  flex: 1;
  display: grid;
  place-items: start center;
  overflow: hidden;
}

.quiz-background-orb {
  position: fixed;
  width: 760px;
  height: 650px;
  right: -240px;
  top: 40px;
  z-index: -1;
  border: 1px solid rgba(62, 83, 222, .2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 72, 198, .12), transparent 69%);
}

.quiz-shell {
  width: min(930px, calc(100% - 28px));
  margin: 27px auto 44px;
  border-color: rgba(54, 109, 226, .28);
  background:
    radial-gradient(circle at 100% 0%, rgba(92, 67, 240, .12), transparent 31%),
    linear-gradient(145deg, rgba(7, 22, 53, .97), rgba(3, 14, 37, .97));
}

.quiz-inline-back {
  margin-bottom: 22px;
}

.quiz-welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr);
  gap: 28px;
  align-items: center;
}

.quiz-welcome-grid h1 {
  margin: 14px 0 9px;
  font-size: clamp(31px, 5vw, 45px);
  letter-spacing: -.045em;
}

.quiz-welcome-aside {
  padding: 14px;
  border: 1px solid rgba(61, 104, 216, .18);
  border-radius: 18px;
  background: rgba(6, 19, 48, .68);
}

.compact-demo {
  padding: 14px;
}

.quiz-start-form {
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  padding-top: 23px;
  border-top: 1px solid rgba(80, 112, 201, .14);
}

.quiz-start-form .btn {
  min-height: 46px;
}

.result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

/* Results */
.results-hero {
  margin-bottom: 18px;
}

.results-table-card {
  padding: 21px;
}

.results-table-card .table-wrap {
  box-shadow: none;
}

.table-wrap {
  border-radius: 15px;
}

/* Error */
.error-layout {
  max-width: 720px;
}

.error-card {
  width: 100%;
  padding: 48px;
}

.error-logo {
  width: 78px;
  height: 78px;
  margin-inline: auto;
  color: #fff;
  font-size: 22px;
}

.error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

/* Share modal polish */
.share-modal {
  border-color: rgba(55, 142, 255, .33);
}

.share-modal-head .eyebrow {
  margin-bottom: 8px;
}

/* Responsive 2.2 */
@media (max-width: 1080px) {
  :root { --container: 940px; }

  .landing-hero {
    gap: 28px;
  }

  .hero-orb {
    right: -90px;
  }

  .dashboard-hero {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 1020px) {
  .app-nav-links {
    display: none;
  }

  .nav-links {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 70px;
    z-index: 100;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 9px;
    border: 1px solid rgba(74, 108, 203, .23);
    border-radius: 15px;
    background: rgba(3, 14, 36, .98);
    box-shadow: 0 25px 70px rgba(0,0,0,.5);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 14px;
    border-radius: 10px;
  }

  .nav-links a.active::after,
  .nav-links a:hover::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-links a.active {
    background: rgba(19, 52, 99, .68);
  }

  .mobile-nav-toggle {
    display: block;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    padding-top: 44px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy h1,
  .hero-copy > p {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .hero-visual {
    min-height: 440px;
  }

  .hero-demo-wrap {
    margin-inline: auto;
  }

  .hero-orb {
    right: 50%;
    transform: translateX(50%);
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-preview {
    display: none;
  }

  .dashboard-feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-feature-strip article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(84, 114, 201, .13);
  }

  .dashboard-feature-strip article:nth-child(4) {
    border-top: 1px solid rgba(84, 114, 201, .13);
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-aside {
    display: none;
  }

  .quiz-welcome-grid {
    grid-template-columns: 1fr;
  }

  .quiz-welcome-aside {
    display: none;
  }

  .quiz-start-form {
    grid-template-columns: 1fr 1fr;
  }

  .quiz-start-form .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .navbar,
  .navbar-inner {
    min-height: 67px;
  }

  .login-button {
    display: none;
  }

  .nav-links {
    top: 62px;
  }

  .user-chip {
    display: none;
  }

  .landing-hero {
    padding-top: 37px;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 11vw, 50px);
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .feature-strip-item + .feature-strip-item {
    border-left: 0;
    border-top: 1px solid rgba(101, 132, 223, 0.14);
  }

  .editor-hero,
  .results-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-hero-graphic {
    display: none;
  }

  .workflow-strip {
    grid-template-columns: 1fr;
  }

  .workflow-strip article + article {
    border-left: 0;
    border-top: 1px solid rgba(83, 114, 202, .14);
  }

  .toggle-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-feature-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-feature-strip article + article,
  .dashboard-feature-strip article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(84, 114, 201, .13);
  }

  .auth-shell .auth-card {
    padding: 27px 22px;
  }

  .quiz-start-form {
    grid-template-columns: 1fr;
  }

  .quiz-start-form .btn {
    grid-column: auto;
  }

  .editor-save-note {
    display: none;
  }
}

@media (max-width: 520px) {
  .brand {
    font-size: 17px;
  }

  .nav-actions .btn[data-logout] {
    display: inline-flex;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-trust {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 378px;
  }

  .hero-orb {
    width: 360px;
    height: 360px;
  }

  .hero-demo-wrap {
    width: 100%;
  }

  .demo-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .demo-stat {
    min-height: 67px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 9px 5px;
  }

  .demo-stat + .demo-stat {
    border-top: 0;
    border-left: 1px solid rgba(92, 124, 239, 0.15);
  }

  .demo-stat-icon {
    width: 30px;
    height: 30px;
  }

  .demo-stat strong {
    font-size: 17px;
  }

  .dashboard-hero,
  .editor-hero,
  .results-hero {
    padding: 22px 18px;
  }

  .dashboard-hero-actions,
  .dashboard-hero-actions .btn,
  .results-hero .btn {
    width: 100%;
  }

  .question-section-head {
    align-items: stretch;
  }

  .question-section-head .btn {
    width: 100%;
  }

  .editor-import-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-import-title {
    align-items: flex-start;
  }

  .editor-import-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
  }

  .error-card {
    padding: 35px 20px;
  }
}

@media (max-width: 520px) {
  .nav-actions .btn-secondary:not([data-logout]) { display: inline-flex; }
  .landing-page .nav-actions .login-button { display: none; }
}

/* ================================================================
   UzQuiz Premium 2.4 — avtomatik jonli taymerlar, podium va bayram effektlari
   ================================================================ */

.btn-live {
  color: #fff;
  border: 1px solid rgba(0, 224, 255, .38);
  background: linear-gradient(100deg, #05b7ef 0%, #0478ff 48%, #7b3cff 100%);
  box-shadow: 0 14px 34px rgba(3, 136, 255, .28), inset 0 1px rgba(255,255,255,.18);
}

.btn-live:hover { transform: translateY(-2px); filter: brightness(1.08); }
.quiz-status-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quiz-status.live {
  color: #52efff;
  border-color: rgba(20, 219, 255, .32);
  background: rgba(7, 198, 255, .1);
  box-shadow: 0 0 20px rgba(7, 198, 255, .08);
}
.live-meta-pill { color: #5eeaff !important; border-color: rgba(26, 217, 255, .32) !important; }
.live-toggle-card {
  border-color: rgba(20, 211, 255, .28) !important;
  background: linear-gradient(135deg, rgba(5, 190, 255, .08), rgba(114, 55, 255, .07)) !important;
}
.toggle-card.toggle-disabled { opacity: .5; filter: grayscale(.3); }

.live-pulse-icon {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 34px;
  color: #4cf3ff;
  background: radial-gradient(circle, rgba(10, 205, 255, .2), rgba(17, 73, 255, .08));
  border: 1px solid rgba(61, 215, 255, .3);
  box-shadow: 0 0 44px rgba(14, 180, 255, .2);
}
.live-pulse-icon span {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(57, 217, 255, .35);
  border-radius: inherit;
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0% { transform: scale(.75); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.live-lobby-card {
  width: min(360px, 100%);
  margin: 28px auto 18px;
  padding: 22px;
  display: grid;
  gap: 6px;
  border-radius: 22px;
  border: 1px solid rgba(62, 135, 255, .27);
  background: linear-gradient(145deg, rgba(9, 26, 67, .88), rgba(7, 14, 43, .8));
  box-shadow: 0 22px 45px rgba(0,0,0,.27);
}
.live-lobby-card span { color: var(--muted); }
.live-lobby-card strong { font-size: clamp(42px, 7vw, 68px); line-height: 1; color: #fff; }
.live-lobby-card small { color: #51e4ff; letter-spacing: .06em; }
.live-waiting-dots { display: inline-flex; justify-content: center; gap: 8px; margin: 16px 0; }
.live-waiting-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #37d7ff;
  animation: waitingDot 1.2s infinite ease-in-out;
}
.live-waiting-dots i:nth-child(2) { animation-delay: .16s; }
.live-waiting-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes waitingDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-8px); opacity: 1; } }

.live-answer-list .answer-btn { transition: transform .18s ease, border-color .18s ease, opacity .18s ease; }
.live-answer-list .answer-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.005); }
.live-answer-list.answers-locked .answer-btn:not(.selected) { opacity: .42; }
.live-answer-list .answer-btn.locked { border-color: rgba(47, 212, 255, .7); box-shadow: 0 0 0 2px rgba(16, 171, 255, .1); }
.live-answer-waiting {
  margin-top: 22px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid rgba(52, 220, 164, .28);
  border-radius: 18px;
  background: rgba(16, 191, 132, .09);
}
.live-answer-waiting p { margin: 4px 0 0; color: var(--muted); }
.answer-accepted-icon {
  flex: 0 0 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #041c17;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(145deg, #4ef5bc, #17d987);
  box-shadow: 0 0 24px rgba(34, 230, 158, .28);
}

.live-own-result { min-height: 46px; margin: 10px auto 22px; }
.own-result {
  display: inline-flex;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
}
.own-result.correct { color: #65f2bd; background: rgba(20, 202, 134, .1); border-color: rgba(33, 225, 151, .28); }
.own-result.wrong { color: #ff8eaa; background: rgba(255, 64, 111, .09); border-color: rgba(255, 85, 126, .26); }
.own-result.missed { color: #f9c65b; background: rgba(255, 181, 40, .08); border-color: rgba(255, 186, 45, .24); }

.live-podium {
  width: min(760px, 100%);
  min-height: 300px;
  margin: 20px auto 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}
.podium-place {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.podium-place.rank-1 { order: 2; }
.podium-place.rank-2 { order: 1; }
.podium-place.rank-3 { order: 3; }
.podium-avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  background: linear-gradient(145deg, #0ccdf4, #6844ff);
  border: 3px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.25), 0 0 28px rgba(37, 146, 255, .2);
}
.podium-place.rank-1 .podium-avatar { width: 78px; height: 78px; font-size: 31px; background: linear-gradient(145deg, #ffc849, #ff7b22); box-shadow: 0 0 38px rgba(255, 180, 42, .35); }
.podium-place.rank-2 .podium-avatar { background: linear-gradient(145deg, #dce8ff, #7187bb); }
.podium-place.rank-3 .podium-avatar { background: linear-gradient(145deg, #e39b5d, #9f4e2d); }
.podium-place > strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.podium-place > small { color: var(--muted); }
.podium-place.is-own > strong { color: #55e9ff; }
.podium-place.is-own .podium-avatar { outline: 3px solid rgba(62, 226, 255, .65); outline-offset: 4px; }
.podium-place.empty { opacity: .35; }
.podium-step {
  width: 100%;
  min-height: 118px;
  margin-top: 5px;
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 18px 18px 8px 8px;
  color: #fff;
  background: linear-gradient(180deg, rgba(50, 91, 195, .48), rgba(9, 24, 64, .94));
  border: 1px solid rgba(100, 145, 255, .26);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.22);
}
.rank-1 .podium-step { min-height: 178px; background: linear-gradient(180deg, rgba(255, 170, 36, .42), rgba(78, 31, 23, .88)); border-color: rgba(255, 190, 62, .35); }
.rank-2 .podium-step { min-height: 142px; }
.rank-3 .podium-step { min-height: 112px; }
.podium-step span { font-size: 32px; }
.podium-step b { font-size: 42px; line-height: 1; opacity: .9; }

.live-overall-list {
  width: min(700px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}
.overall-title, .overall-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 86px 110px;
  align-items: center;
  gap: 10px;
}
.overall-title { padding: 0 14px 7px; color: var(--muted); font-size: 13px; }
.overall-title strong { grid-column: 1 / 3; color: #fff; font-size: 15px; text-align: left; }
.overall-title span { grid-column: 3 / 5; text-align: right; }
.overall-row {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(88, 123, 213, .18);
  background: rgba(8, 19, 51, .72);
  text-align: left;
}
.overall-row.is-own { border-color: rgba(42, 216, 255, .45); background: rgba(17, 110, 177, .14); box-shadow: 0 0 22px rgba(23, 183, 255, .08); }
.overall-rank { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; background: rgba(255,255,255,.07); }
.overall-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.overall-correct { color: #50eeb2; font-size: 13px; }
.overall-row > strong { text-align: right; color: #65dcff; }
.live-host-wait-note { margin-top: 25px; color: var(--muted); }

/* Host sahifasi */
.live-host-main { padding-bottom: 60px; }
.live-host-hero {
  padding: 28px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(99, 63, 255, .22), transparent 29%),
    radial-gradient(circle at 18% 100%, rgba(0, 191, 255, .13), transparent 35%),
    rgba(4, 13, 36, .86);
}
.live-host-hero h1 { margin: 7px 0; }
.live-host-hero p { margin: 0; color: var(--muted); }
.live-host-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.session-code-card {
  flex: 0 0 min(320px, 35%);
  padding: 18px 24px;
  text-align: center;
  border-radius: 22px;
  border: 1px solid rgba(57, 209, 255, .3);
  background: linear-gradient(145deg, rgba(4, 44, 92, .75), rgba(35, 19, 99, .68));
  box-shadow: 0 0 38px rgba(17, 143, 255, .14);
}
.session-code-card span, .session-code-card small { display: block; color: var(--muted); }
.session-code-card strong { display: block; margin: 5px 0; color: #61e9ff; font-size: clamp(32px, 4vw, 48px); letter-spacing: .12em; }
.live-host-grid {
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(460px, 1.75fr) minmax(260px, .9fr);
  gap: 18px;
  align-items: start;
}
.live-share-panel, .participant-panel, .live-stage-panel { padding: 22px; }
.live-stage-panel { min-height: 680px; position: sticky; top: 16px; }
.host-qr-frame {
  width: min(210px, 100%);
  aspect-ratio: 1;
  margin: 10px auto 20px;
  padding: 10px;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0,0,0,.3), 0 0 30px rgba(26, 169, 255, .13);
}
.host-qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.live-share-panel > .btn { width: 100%; margin-top: 10px; }
.live-stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.live-stage-head h2 { margin: 5px 0 0; }
.live-answer-progress {
  flex: 0 0 80px;
  padding: 10px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(52, 213, 255, .22);
  background: rgba(14, 138, 209, .09);
}
.live-answer-progress span { font-size: 28px; font-weight: 900; color: #4fe7ff; }
.live-answer-progress small { color: var(--muted); font-size: 10px; }
.host-stage-state { min-height: 480px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.host-stage-state.hidden { display: none; }
.host-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.host-option {
  min-height: 62px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(78, 113, 210, .2);
  background: rgba(10, 25, 64, .75);
}
.host-option > span { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-weight: 900; background: linear-gradient(145deg, #165bc9, #6339ef); }
.host-answer-meter { height: 9px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.host-answer-meter span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .35s ease; background: linear-gradient(90deg, #00c8ff, #7751ff); }
.live-host-controls {
  padding-top: 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.live-host-controls .btn { min-width: 185px; }
.participant-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.participant-panel-head h2 { margin: 3px 0 0; }
.participant-total { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #5beaff; font-size: 22px; font-weight: 900; background: rgba(14, 170, 238, .1); border: 1px solid rgba(43, 209, 255, .24); }
.participant-list { max-height: 690px; overflow: auto; display: grid; gap: 8px; padding-right: 2px; }
.empty-participants { min-height: 220px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.empty-participants span { font-size: 42px; color: #5e77bf; }
.participant-item {
  padding: 10px;
  display: grid;
  grid-template-columns: 26px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  border: 1px solid rgba(75, 104, 186, .17);
  background: rgba(8, 18, 48, .72);
}
.participant-rank { color: #7488bd; font-weight: 800; text-align: center; }
.participant-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 900; background: linear-gradient(145deg, #0ec5eb, #6743f4); }
.participant-info { min-width: 0; }
.participant-info strong, .participant-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participant-info small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.connection-dot { width: 7px; height: 7px; display: inline-block; margin-right: 4px; border-radius: 50%; }
.connection-dot.online { background: #32e8a6; box-shadow: 0 0 8px rgba(50,232,166,.6); }
.connection-dot.offline { background: #6f7793; }
.participant-score { text-align: right; }
.participant-score strong, .participant-score small { display: block; }
.participant-score strong { color: #5be3ff; font-size: 12px; }
.participant-score small { color: var(--muted); font-size: 9px; }
.host-podium { min-height: 240px; margin-top: 8px; }
.host-podium .podium-avatar { width: 50px; height: 50px; }
.host-podium .rank-1 .podium-avatar { width: 62px; height: 62px; }
.host-podium .podium-step { min-height: 80px; }
.host-podium .rank-1 .podium-step { min-height: 125px; }
.host-podium .rank-2 .podium-step { min-height: 98px; }
.host-podium .rank-3 .podium-step { min-height: 78px; }
.host-podium .podium-step b { font-size: 28px; }
.host-podium .podium-step span { font-size: 24px; }

/* Sharlar */
.balloon-layer { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; }
.celebration-balloon {
  --size: 24px;
  position: absolute;
  left: var(--x);
  bottom: -100px;
  width: var(--size);
  height: calc(var(--size) * 1.24);
  border-radius: 52% 48% 46% 54%;
  background: hsl(var(--hue) 88% 60%);
  box-shadow: inset -5px -6px 9px rgba(0,0,0,.14), inset 4px 4px 7px rgba(255,255,255,.28), 0 5px 18px rgba(0,0,0,.18);
  animation: balloonFly var(--duration) var(--delay) cubic-bezier(.22,.7,.24,1) forwards;
}
.celebration-balloon::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: inherit; }
.celebration-balloon::after { content: ""; position: absolute; left: 50%; top: calc(100% + 5px); width: 1px; height: 60px; background: rgba(255,255,255,.45); transform-origin: top; }
@keyframes balloonFly {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0; }
  8% { opacity: 1; }
  55% { transform: translate3d(var(--drift), -58vh, 0) rotate(7deg); }
  100% { transform: translate3d(calc(var(--drift) * -.35), -125vh, 0) rotate(-8deg); opacity: .95; }
}

@media (max-width: 1180px) {
  .live-host-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .participant-panel { grid-column: 1 / -1; }
  .participant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 360px; }
}

@media (max-width: 800px) {
  .live-host-hero { align-items: stretch; flex-direction: column; }
  .session-code-card { flex-basis: auto; width: 100%; }
  .live-host-grid { grid-template-columns: 1fr; }
  .live-stage-panel { position: static; min-height: auto; }
  .live-share-panel { order: 2; }
  .live-stage-panel { order: 1; }
  .participant-panel { order: 3; }
  .participant-list { grid-template-columns: 1fr; }
  .host-option-grid { grid-template-columns: 1fr; }
  .overall-title, .overall-row { grid-template-columns: 40px minmax(0, 1fr) 62px 86px; gap: 6px; }
}

@media (max-width: 560px) {
  .live-podium { gap: 6px; min-height: 260px; }
  .podium-avatar { width: 48px; height: 48px; font-size: 19px; }
  .podium-place.rank-1 .podium-avatar { width: 58px; height: 58px; font-size: 23px; }
  .podium-place > strong { font-size: 12px; }
  .podium-place > small { font-size: 9px; }
  .podium-step { min-height: 92px; padding: 10px 4px; }
  .rank-1 .podium-step { min-height: 145px; }
  .rank-2 .podium-step { min-height: 115px; }
  .rank-3 .podium-step { min-height: 88px; }
  .podium-step span { font-size: 23px; }
  .podium-step b { font-size: 30px; }
  .overall-title, .overall-row { grid-template-columns: 34px minmax(0, 1fr) 56px 74px; font-size: 11px; padding-left: 8px; padding-right: 8px; }
  .live-host-controls .btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .live-pulse-icon span, .live-waiting-dots i, .celebration-balloon { animation: none !important; }
}

/* UzQuiz Premium 2.4 — jonli taymer sozlamalari */
.live-timing-settings {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(34, 205, 255, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(137, 80, 255, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(10, 33, 72, 0.82), rgba(6, 17, 43, 0.86));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 20px 55px rgba(0,0,0,.18);
}
.live-timing-head,
.live-timing-actions,
.leaderboard-timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.live-timing-head h3 { margin: 5px 0 6px; font-size: 20px; }
.live-timing-head p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; }
.live-timing-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(69, 218, 255, .28);
  border-radius: 17px;
  font-size: 25px;
  background: linear-gradient(145deg, rgba(20, 196, 255, .18), rgba(130, 76, 255, .18));
  box-shadow: 0 12px 32px rgba(26, 137, 255, .2);
}
.live-timing-grid { margin-top: 18px; }
.live-timing-actions { margin-top: 14px; align-items: stretch; }
.compact-toggle { flex: 1 1 430px; min-height: 64px; }
.field-help { display: block; margin-top: 7px; color: var(--muted-2); font-size: 12px; line-height: 1.45; }
.question-editor .form-row { grid-template-columns: minmax(0, 2.1fr) minmax(110px, .55fr) minmax(160px, .8fr); }
.live-question-time-field { transition: opacity .2s ease; }
.phase-auto-note { margin: 4px 0 16px; color: var(--muted); font-size: 13px; }

.phase-timer {
  --timer-progress: 0%;
  position: relative;
  min-width: 102px;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(48, 211, 255, .32);
  color: #dffaff;
  background: rgba(17, 82, 132, .22);
  box-shadow: 0 0 22px rgba(18, 179, 255, .13);
}
.phase-timer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgba(5, 17, 42, .84);
}
.phase-timer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--timer-progress);
  background: linear-gradient(90deg, rgba(13, 194, 242, .28), rgba(135, 79, 255, .3));
  transition: width .24s linear;
}
.phase-timer.timer-danger {
  color: #fff0f3;
  border-color: rgba(255, 83, 117, .62);
  box-shadow: 0 0 26px rgba(255, 55, 98, .27);
  animation: timerDangerPulse .65s ease-in-out infinite alternate;
}
@keyframes timerDangerPulse {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}
.live-question-statuses { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.live-host-wait-note > div:last-child { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* 2.4 bayramona effektlar: sharlar + konfetti + yorug‘lik portlashi */
.celebration-layer { background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.045), transparent 35%); }
.celebration-balloon {
  left: var(--left, 50%);
  transform: scale(var(--scale, 1));
}
.celebration-confetti {
  position: absolute;
  left: var(--left);
  top: -24px;
  width: 9px;
  height: 17px;
  border-radius: 2px;
  background: hsl(var(--hue) 92% 60%);
  box-shadow: 0 0 8px hsla(var(--hue), 92%, 60%, .45);
  animation: confettiCelebrate var(--duration) var(--delay) cubic-bezier(.18,.72,.28,1) forwards;
}
.winner-glow-burst {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 35px 14px rgba(70, 217, 255, .72), 0 0 90px 42px rgba(146, 83, 255, .35);
  animation: winnerGlowBurst 1.4s .12s ease-out forwards;
}
@keyframes confettiCelebrate {
  0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate3d(var(--drift), 112vh, 0) rotate(var(--spin)); opacity: .92; }
}
@keyframes winnerGlowBurst {
  0% { transform: translate(-50%, -50%) scale(.1); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

@media (max-width: 850px) {
  .question-editor .form-row { grid-template-columns: 1fr; }
  .live-timing-grid { grid-template-columns: 1fr; }
  .live-timing-actions { flex-direction: column; }
  .live-question-top { align-items: flex-start; }
  .live-question-statuses { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-timer.timer-danger,
  .celebration-confetti,
  .winner-glow-burst { animation: none !important; }
}
@keyframes balloonFly {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(var(--scale, 1)); opacity: 0; }
  8% { opacity: 1; }
  55% { transform: translate3d(var(--drift), -58vh, 0) rotate(7deg) scale(var(--scale, 1)); }
  100% { transform: translate3d(calc(var(--drift) * -.35), -125vh, 0) rotate(-8deg) scale(var(--scale, 1)); opacity: .95; }
}


/* UzQuiz Premium 2.6 — Aloqa bo‘limi */
.contact-section {
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -240px;
  bottom: -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 184, 255, 0.18), transparent 67%);
  pointer-events: none;
}

.contact-heading {
  max-width: 760px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 22px;
  align-items: stretch;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 142px;
  padding: 23px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 130, 255, 0.34);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}

.contact-card-wide {
  grid-column: 1 / -1;
  min-height: 118px;
}

.contact-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #eef4ff;
  font-size: 21px;
  background: linear-gradient(145deg, rgba(36, 184, 255, 0.26), rgba(82, 91, 255, 0.18));
  border: 1px solid rgba(68, 174, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.contact-icon.teal { background: linear-gradient(145deg, rgba(37, 219, 193, .24), rgba(23, 128, 180, .16)); }
.contact-icon.violet { background: linear-gradient(145deg, rgba(159, 104, 255, .26), rgba(92, 70, 210, .18)); }
.contact-icon.green { background: linear-gradient(145deg, rgba(50, 218, 137, .24), rgba(21, 142, 113, .16)); }

.contact-label {
  display: block;
  margin-bottom: 8px;
  color: #8ea5d9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contact-card p,
.contact-card a {
  display: block;
  margin: 0 0 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-card a {
  width: fit-content;
  text-decoration: none;
  transition: color .2s ease;
}

.contact-card a:hover {
  color: #62c8ff;
}

.authors-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px;
  min-height: 100%;
}

.authors-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  right: -155px;
  top: -155px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 82, 255, .28), transparent 66%);
  pointer-events: none;
}

.authors-card h3 {
  position: relative;
  margin: 9px 0 23px;
  font-size: 28px;
  letter-spacing: -.035em;
}

.author-list {
  position: relative;
  display: grid;
  gap: 12px;
}

.author-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border-radius: 17px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(119, 145, 230, .11);
}

.author-avatar {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: white;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, #1fb7f2, #6557ff);
  box-shadow: 0 9px 23px rgba(58, 103, 255, .28);
}

.author-avatar.secondary {
  background: linear-gradient(135deg, #9f65ff, #ef61bc);
}

.author-item strong,
.author-item small {
  display: block;
}

.author-item strong {
  font-size: 15px;
}

.author-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.authors-action {
  position: relative;
  margin-top: auto;
  padding-top: 26px;
}

.authors-action p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.65;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .authors-card {
    min-height: auto;
  }

  .authors-action {
    margin-top: 20px;
  }
}

@media (max-width: 640px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-card-wide {
    grid-column: auto;
  }

  .contact-card,
  .authors-card {
    padding: 20px;
  }

  .footer-meta {
    align-items: flex-start;
    text-align: left;
  }
}


/* UzQuiz Premium 2.6 — ixtiyoriy Top N g‘olib o‘rinlari */
.winner-count-input-wrap {
  display: grid;
  grid-template-columns: 44px minmax(80px, 1fr) 44px;
  gap: 8px;
  align-items: center;
}
.winner-count-input-wrap .input { text-align: center; font-size: 20px; font-weight: 900; }
.winner-count-step {
  height: 46px;
  border: 1px solid rgba(80, 174, 255, .3);
  border-radius: 13px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(18, 77, 174, .75), rgba(93, 54, 220, .75));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.winner-count-step:hover { transform: translateY(-1px); filter: brightness(1.13); }
.live-podium {
  display: block;
  min-height: 0;
}
.podium-core {
  min-height: 300px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}
.podium-core.podium-count-1 {
  width: min(280px, 100%);
  margin-inline: auto;
  grid-template-columns: 1fr;
}
.podium-core.podium-count-2 {
  width: min(520px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.winner-extra-list {
  width: min(760px, 100%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.winner-extra-card {
  min-width: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 38px 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(91, 150, 255, .2);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(14, 35, 83, .82), rgba(29, 17, 67, .82));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 25px rgba(0,0,0,.16);
}
.winner-extra-card.is-own { border-color: rgba(68, 226, 255, .62); box-shadow: 0 0 24px rgba(47, 206, 255, .13); }
.winner-extra-card.empty { opacity: .42; }
.winner-extra-rank {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d8e5ff;
  font-weight: 900;
  background: rgba(255,255,255,.08);
}
.winner-extra-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(145deg, #12c7ec, #7042f2);
}
.winner-extra-card div { min-width: 0; display: grid; gap: 3px; }
.winner-extra-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-extra-card small { color: var(--muted); }
.winner-extra-medal { font-size: 21px; }
.host-podium .podium-core { min-height: 240px; }

@media (max-width: 680px) {
  .winner-extra-list { grid-template-columns: 1fr; }
  .podium-core { min-height: 255px; gap: 6px; }
  .winner-extra-card { grid-template-columns: 34px 38px minmax(0, 1fr) 26px; padding: 10px; }
}

/* ======================================================================
   UzQuiz Premium 2.7 — kengroq sahifalar va Top N yakuniy g‘oliblar
   ====================================================================== */
:root {
  --container: 1240px;
}

/* Jonli boshqaruvda uch ustun siqilib qolmasligi uchun biroz kengroq maydon. */
.live-host-main.container {
  width: min(1380px, calc(100% - 34px));
}

/* Keng ekranda dashboard va muharrir kartalaridan samaraliroq foydalaniladi. */
.page {
  padding-inline: 0;
}

.editor-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.live-podium,
.live-overall-list {
  width: min(900px, 100%);
}

.winner-extra-list {
  width: min(1040px, 100%);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.host-podium .winner-extra-list {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Tanlangan Top N qiymati muharrirda aniqroq ko‘rinsin. */
.winner-count-field {
  min-width: 210px;
}

.winner-count-input-wrap .input {
  border-color: rgba(38, 202, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(120, 82, 255, .12), 0 0 20px rgba(20, 155, 255, .08);
}

@media (max-width: 1440px) {
  .live-host-main.container {
    width: min(1280px, calc(100% - 34px));
  }
}

@media (max-width: 1280px) {
  :root { --container: 1140px; }
  .live-host-main.container { width: min(1140px, calc(100% - 34px)); }
}

@media (max-width: 1080px) {
  :root { --container: 940px; }
  .live-host-main.container { width: min(940px, calc(100% - 34px)); }
  .editor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .live-host-main.container,
  .container {
    width: min(100% - 22px, var(--container));
  }
  .winner-extra-list,
  .host-podium .winner-extra-list {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   UzQuiz Premium 2.9.0 — avvalgi dizayn, o‘qilishi qulayroq shriftlar
   ====================================================================== */
body {
  font-size: 16.5px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-links a,
.btn,
.input,
.select,
.textarea,
.page-subtitle,
.muted,
.card p,
.feature-strip-item p,
.feature-card p,
.step-card p,
.contact-card p,
.contact-card a,
.authors-action p,
.footer-meta,
.quiz-meta,
.result-meta {
  font-size: 1rem;
  line-height: 1.65;
}

.hero-copy > p,
.section-heading p {
  font-size: 1.08rem;
  line-height: 1.75;
}

.feature-strip-item strong,
.feature-card h3,
.step-card h3,
.contact-label,
.authors-card h3,
.card h3 {
  font-size: 1.12rem;
}

label,
.form-label,
.small-label,
.quiz-card small,
.demo-stat small,
.author-item small {
  font-size: 0.95rem;
}

.table,
.table th,
.table td,
.participant-list,
.live-overall-list,
.winner-extra-list {
  font-size: 1rem;
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero-copy > p,
  .section-heading p,
  .card p,
  .feature-strip-item p,
  .feature-card p,
  .step-card p,
  .contact-card p,
  .contact-card a {
    font-size: 1rem;
  }
}

/* UzQuiz Premium 2.9.0 — yangi logo */
.brand-logo.brand-logo-image {
  padding: 0;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(108, 129, 181, 0.22);
  box-shadow: 0 10px 28px rgba(18, 32, 86, 0.14);
}

.brand-logo.brand-logo-image::after {
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(25, 54, 120, 0.08);
}

.brand-logo.brand-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ======================================================================
   UzQuiz Premium 2.9 — natijalarni nishonlash ovozini tanlash
   ====================================================================== */
.celebration-sound-field {
  min-width: 250px;
}

.celebration-sound-field .input {
  border-color: rgba(145, 91, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(20, 30, 68, 0.96), rgba(9, 19, 48, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(58, 207, 255, 0.08),
    0 12px 30px rgba(76, 57, 176, 0.12);
}

.live-timing-button-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#previewCelebrationSoundBtn {
  border-color: rgba(145, 91, 255, 0.34);
  background: linear-gradient(135deg, rgba(29, 48, 99, 0.78), rgba(74, 37, 139, 0.45));
}

#previewCelebrationSoundBtn:hover {
  border-color: rgba(69, 206, 255, 0.5);
  box-shadow: 0 12px 30px rgba(74, 104, 255, 0.16);
}

@media (max-width: 760px) {
  .celebration-sound-field {
    min-width: 0;
  }

  .live-timing-button-group,
  .live-timing-button-group .btn {
    width: 100%;
  }
}

/* ======================================================================
   UzQuiz Premium 3.2 — Fibonacci / oltin nisbat dizayn tizimi
   ====================================================================== */
:root {
  --fib-1: 5px;
  --fib-2: 8px;
  --fib-3: 13px;
  --fib-4: 21px;
  --fib-5: 34px;
  --fib-6: 55px;
  --fib-7: 89px;
  --fib-8: 144px;

  --font-xs: 13px;
  --font-base: 16px;
  --font-md: 21px;
  --font-lg: 34px;
  --font-xl: 55px;
  --font-display: 89px;

  --radius-xs: 8px;
  --radius-sm: 13px;
  --radius-md: 21px;
  --radius-lg: 34px;

  --golden: 1.618;
  --container: 1294px;
  --radius: var(--radius-md);
  --radius-sm: 13px;
}

html {
  font-size: var(--font-base);
}

body {
  font-size: var(--font-base);
  line-height: 1.618;
}

.container {
  width: min(var(--container), calc(100% - 68px));
}

/* Tipografika */
.hero-copy h1 {
  max-width: 780px;
  margin: var(--fib-4) 0 var(--fib-4);
  font-size: clamp(var(--font-xl), 6vw, var(--font-display));
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.hero-copy > p {
  max-width: 610px;
  font-size: var(--font-md);
  line-height: 1.618;
}

.section-heading {
  max-width: 800px;
  margin-bottom: var(--fib-6);
}

.section-heading h2,
.page-head h1,
.dashboard-hero h1,
.results-hero h1,
.auth-aside h2 {
  font-size: clamp(var(--font-lg), 4.2vw, var(--font-xl));
  line-height: 1.13;
}

.section-heading p,
.dashboard-hero p,
.results-hero p,
.page-subtitle {
  font-size: var(--font-base);
  line-height: 1.618;
}

.card h2,
.card h3,
.section-head h2,
.live-stage-head h2,
.participant-panel-head h2 {
  line-height: 1.3;
}

.badge,
.eyebrow {
  gap: var(--fib-2);
  padding: var(--fib-2) var(--fib-3);
  font-size: var(--font-xs);
}

/* Navigatsiya va tugmalar */
.navbar-inner {
  min-height: var(--fib-7);
  gap: var(--fib-4);
}

.brand {
  gap: var(--fib-3);
  font-size: var(--font-md);
}

.brand-logo {
  width: var(--fib-6);
  height: var(--fib-6);
  border-radius: var(--radius-sm);
}

.brand-logo.brand-logo-image img,
.brand-logo.brand-logo-image::after {
  border-radius: 12px;
}

.nav-links,
.app-nav-links,
.nav-actions {
  gap: var(--fib-4);
}

.nav-links a,
.app-nav-links a {
  font-size: var(--font-base);
}

.nav-links a {
  padding: var(--fib-5) 0 29px;
}

.btn {
  min-height: var(--fib-6);
  gap: var(--fib-3);
  padding: var(--fib-3) var(--fib-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
}

.btn-small {
  min-height: 42px;
  padding: var(--fib-2) var(--fib-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
}

.btn-icon {
  width: var(--fib-6);
  padding: 0;
}

/* Umumiy kartalar va formalar */
.card {
  padding: var(--fib-4);
  border-radius: var(--radius-md);
}

.input,
.select,
.textarea {
  min-height: var(--fib-6);
  padding: var(--fib-3) var(--fib-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
}

.textarea {
  min-height: var(--fib-8);
}

.form-grid {
  gap: var(--fib-4);
}

.form-row {
  gap: var(--fib-4);
}

.form-group {
  gap: var(--fib-2);
}

.checkbox {
  gap: var(--fib-3);
  font-size: var(--font-base);
}

.error-message,
.success-message,
.modal-error {
  padding: var(--fib-3) var(--fib-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
}

/* Bosh sahifa: 61.8% / 38.2% */
.landing-hero {
  min-height: calc(100vh - var(--fib-7));
  grid-template-columns: minmax(0, 1.618fr) minmax(420px, 1fr);
  gap: var(--fib-6);
  padding: var(--fib-6) 0 var(--fib-7);
}

.hero-actions {
  gap: var(--fib-3);
  margin-top: var(--fib-5);
}

.hero-trust {
  gap: var(--fib-5);
  margin-top: var(--fib-5);
  font-size: var(--font-xs);
}

.hero-visual {
  min-height: 610px;
}

.hero-demo-wrap {
  width: min(610px, 100%);
  margin-inline: auto;
}

.hero-demo {
  border-radius: var(--radius-lg);
}

.demo-question,
.demo-stats,
.demo-stat {
  gap: var(--fib-3);
}

.feature-strip {
  margin-bottom: var(--fib-7);
  border-radius: var(--radius-md);
}

.feature-strip-item {
  min-height: var(--fib-8);
  gap: var(--fib-4);
  padding: var(--fib-4) var(--fib-5);
}

.feature-strip-item strong {
  margin-bottom: var(--fib-1);
  font-size: var(--font-md);
}

.feature-strip-item p {
  font-size: var(--font-base);
}

.landing-section {
  padding: var(--fib-7) 0;
}

.steps-grid,
.features-grid {
  gap: var(--fib-4);
}

.step-card,
.feature-card {
  min-height: 233px;
  padding: var(--fib-5);
}

.step-number {
  right: var(--fib-4);
  top: var(--fib-3);
  font-size: var(--font-xl);
}

.contact-layout {
  grid-template-columns: minmax(0, 1.618fr) minmax(320px, 1fr);
  gap: var(--fib-5);
}

.contact-info-grid {
  gap: var(--fib-4);
}

.contact-card {
  gap: var(--fib-4);
  min-height: var(--fib-8);
  padding: var(--fib-4);
}

.authors-card {
  padding: var(--fib-5);
}

/* Dashboard */
.page {
  padding-top: var(--fib-5);
  padding-bottom: var(--fib-7);
}

.dashboard-hero {
  min-height: 233px;
  grid-template-columns: minmax(0, 1.618fr) minmax(320px, 1fr);
  gap: var(--fib-5);
  margin-bottom: var(--fib-4);
  padding: var(--fib-5);
  border-radius: var(--radius-lg);
}

.dashboard-hero h1 {
  max-width: 720px;
  margin: var(--fib-3) 0 var(--fib-2);
}

.dashboard-hero-actions {
  gap: var(--fib-3);
  margin-top: var(--fib-4);
}

.mini-quiz-card {
  width: min(377px, 100%);
  padding: var(--fib-4);
  border-radius: var(--radius-md);
}

.stats-grid,
.quiz-grid {
  gap: var(--fib-4);
}

.stats-grid,
.dashboard-stats {
  margin-bottom: var(--fib-5);
}

.stat-card {
  min-height: var(--fib-8);
  gap: var(--fib-4);
  padding: var(--fib-4);
}

.stat-card .stat-icon {
  width: var(--fib-6);
  height: var(--fib-6);
}

.stat-card strong {
  font-size: var(--font-lg);
}

.quiz-card {
  min-height: 322px;
  padding: var(--fib-4);
  border-radius: var(--radius-md);
}

.quiz-card-top,
.quiz-card-actions,
.section-head,
.page-head {
  gap: var(--fib-3);
}

/* Quiz muharriri: 61.8% / 38.2% */
.editor-grid {
  grid-template-columns: minmax(0, 1.618fr) minmax(340px, 1fr);
  gap: var(--fib-5);
}

.editor-sidebar {
  top: 110px;
}

.editor-checklist {
  gap: var(--fib-3);
  margin-top: var(--fib-4);
}

.question-editor {
  margin-top: var(--fib-4);
  padding: var(--fib-5);
  border-radius: var(--radius-md);
}

.answer-editor-list,
.options-editor,
.import-preview-list {
  gap: var(--fib-3);
}

.live-timing-grid {
  gap: var(--fib-4);
}

/* Jonli boshqaruv: 19.1% / 50% / 30.9% */
.live-host-main.container {
  width: min(1597px, calc(100% - 68px));
}

.live-host-hero {
  padding: var(--fib-5);
  gap: var(--fib-5);
  border-radius: var(--radius-lg);
}

.session-code-card {
  flex-basis: min(377px, 38.2%);
  padding: var(--fib-4) var(--fib-5);
  border-radius: var(--radius-md);
}

.live-host-grid {
  grid-template-columns: minmax(240px, .618fr) minmax(520px, 1.618fr) minmax(300px, 1fr);
  gap: var(--fib-4);
}

.live-share-panel,
.participant-panel,
.live-stage-panel {
  padding: var(--fib-4);
  border-radius: var(--radius-md);
}

.live-stage-panel {
  min-height: 754px;
  top: var(--fib-4);
}

.live-stage-head {
  gap: var(--fib-4);
  margin-bottom: var(--fib-4);
}

.host-option-grid {
  gap: var(--fib-3);
  margin-top: var(--fib-4);
}

.host-option {
  min-height: var(--fib-6);
  padding: var(--fib-3);
  gap: var(--fib-3);
  border-radius: var(--radius-sm);
}

.live-host-controls {
  padding-top: var(--fib-4);
  gap: var(--fib-3);
}

.participant-list {
  gap: var(--fib-2);
}

.participant-item {
  padding: var(--fib-3);
  gap: var(--fib-2);
  border-radius: var(--radius-sm);
}

/* Public quiz */
.quiz-shell {
  width: min(987px, calc(100% - 42px));
  margin: var(--fib-5) auto var(--fib-6);
  border-radius: var(--radius-lg);
}

.quiz-content {
  padding: clamp(var(--fib-4), 5vw, var(--fib-6));
}

.quiz-welcome-grid {
  grid-template-columns: minmax(0, 1.618fr) minmax(280px, 1fr);
  gap: var(--fib-5);
}

.quiz-welcome-grid h1,
.question-title {
  font-size: clamp(var(--font-lg), 4.5vw, var(--font-xl));
}

.quiz-top {
  gap: var(--fib-3);
  margin-bottom: var(--fib-5);
}

.answer-list {
  gap: var(--fib-3);
}

.answer-option {
  min-height: var(--fib-6);
  padding: var(--fib-3) var(--fib-4);
  border-radius: var(--radius-sm);
}

/* Natijalar */
.results-hero {
  gap: var(--fib-5);
  padding: var(--fib-5);
  margin-bottom: var(--fib-5);
  border-radius: var(--radius-lg);
}

.results-table-card {
  padding: var(--fib-5);
}

table th,
table td {
  padding: var(--fib-3) var(--fib-4);
}

/* Kirish va ro‘yxatdan o‘tish: 38.2% / 61.8% */
.auth-layout {
  min-height: calc(100vh - var(--fib-7));
  padding: var(--fib-5) 0 var(--fib-6);
}

.auth-shell {
  min-height: 610px;
  grid-template-columns: minmax(377px, 1fr) minmax(520px, 1.618fr);
  border-radius: var(--radius-lg);
}

.auth-shell .auth-card,
.auth-aside {
  padding: var(--fib-6);
}

.auth-card h1 {
  font-size: var(--font-lg);
}

.auth-preview-card {
  padding: var(--fib-4);
  border-radius: var(--radius-md);
}

.auth-benefits {
  gap: var(--fib-3);
}

.auth-benefits article {
  gap: var(--fib-3);
  padding: var(--fib-3);
  border-radius: var(--radius-sm);
}

/* Modal va QR ulashish */
.share-modal {
  width: min(987px, calc(100% - 42px));
  border-radius: var(--radius-lg);
}

.share-modal-head,
.share-content {
  padding: var(--fib-5);
}

.share-content {
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.618fr);
  gap: var(--fib-5);
}

.share-actions-grid {
  gap: var(--fib-3);
}

/* Responsive: oltin nisbat faqat joy yetarli bo‘lganda */
@media (max-width: 1440px) {
  :root { --container: 1180px; }
  .live-host-main.container { width: min(1280px, calc(100% - 55px)); }
  .hero-copy h1 { font-size: clamp(52px, 5.8vw, 76px); }
}

@media (max-width: 1180px) {
  :root { --container: 987px; }

  .landing-hero,
  .dashboard-hero,
  .auth-shell,
  .quiz-welcome-grid,
  .contact-layout {
    grid-template-columns: 1fr 1fr;
  }

  .live-host-main.container { width: min(987px, calc(100% - 42px)); }
  .live-host-grid { grid-template-columns: minmax(230px, .75fr) minmax(0, 1.618fr); }
  .participant-panel { grid-column: 1 / -1; }
  .participant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --container: 800px; }

  .container,
  .live-host-main.container {
    width: min(var(--container), calc(100% - 42px));
  }

  .landing-hero,
  .dashboard-hero,
  .auth-shell,
  .quiz-welcome-grid,
  .contact-layout,
  .share-content,
  .editor-grid,
  .live-host-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
    gap: var(--fib-5);
    padding: var(--fib-6) 0;
  }

  .hero-visual { min-height: 520px; }
  .dashboard-hero-preview { display: none; }
  .editor-sidebar { position: static; }
  .participant-panel { grid-column: auto; }
  .participant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-stage-panel { position: static; min-height: 610px; }
  .auth-aside { border-left: 0; border-top: 1px solid rgba(70, 107, 201, .18); }
}

@media (max-width: 760px) {
  :root {
    --container: 610px;
    --font-xl: 42px;
    --font-display: 55px;
  }

  .container,
  .live-host-main.container,
  .quiz-shell,
  .share-modal {
    width: min(100% - 42px, var(--container));
  }

  .navbar-inner { min-height: var(--fib-6); }
  .brand-logo { width: 42px; height: 42px; }
  .brand { font-size: 18px; }

  .btn {
    min-height: 48px;
    padding: var(--fib-3) var(--fib-4);
  }

  .landing-hero,
  .landing-section,
  .page {
    padding-top: var(--fib-6);
    padding-bottom: var(--fib-6);
  }

  .hero-copy h1 {
    font-size: clamp(42px, 12vw, 55px);
  }

  .hero-copy > p {
    font-size: 18px;
  }

  .hero-visual { min-height: 420px; }
  .feature-strip { margin-bottom: var(--fib-6); }
  .feature-strip-item { min-height: auto; padding: var(--fib-4); }
  .steps-grid,
  .features-grid,
  .stats-grid,
  .quiz-grid,
  .contact-info-grid,
  .participant-list {
    grid-template-columns: 1fr;
  }

  .dashboard-hero,
  .live-host-hero,
  .results-hero,
  .question-editor,
  .authors-card,
  .auth-shell .auth-card,
  .auth-aside,
  .share-modal-head,
  .share-content,
  .results-table-card {
    padding: var(--fib-4);
  }

  .dashboard-hero,
  .live-host-hero,
  .results-hero {
    border-radius: var(--radius-md);
  }

  .quiz-card { min-height: auto; }
  .live-stage-panel { min-height: 520px; }
}

@media (max-width: 480px) {
  .container,
  .live-host-main.container,
  .quiz-shell,
  .share-modal {
    width: min(100% - 26px, var(--container));
  }

  .hero-copy h1 { font-size: 42px; }
  .hero-copy > p { font-size: var(--font-base); }
  .section-heading h2,
  .page-head h1,
  .dashboard-hero h1,
  .results-hero h1,
  .auth-aside h2 { font-size: var(--font-lg); }

  .hero-actions,
  .dashboard-hero-actions,
  .nav-actions,
  .results-hero,
  .live-host-hero {
    align-items: stretch;
  }

  .hero-actions .btn,
  .dashboard-hero-actions .btn,
  .results-hero .btn,
  .live-host-controls .btn {
    width: 100%;
  }
}

/* ======================================================================
   UzQuiz Premium 3.2 — header uchun yangi gorizontal logo
   ====================================================================== */
.brand-wordmark-logo {
  width: 184px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.brand-wordmark-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 8px 18px rgba(30, 146, 255, 0.16));
}

.brand:hover .brand-wordmark-logo img {
  filter: drop-shadow(0 8px 22px rgba(36, 181, 255, 0.28));
}

.site-footer .brand-wordmark-logo {
  width: 168px;
  height: 48px;
}

@media (max-width: 980px) {
  .brand-wordmark-logo {
    width: 166px;
    height: 48px;
  }
}

@media (max-width: 760px) {
  .brand-wordmark-logo {
    width: 148px;
    height: 44px;
  }

  .site-footer .brand-wordmark-logo {
    width: 148px;
    height: 44px;
  }
}

@media (max-width: 420px) {
  .brand-wordmark-logo {
    width: 136px;
    height: 42px;
  }
}