/* ==========================================================
   Quiz Question Editor — Master-Quiz DS v2
   Modern inline-editing approach (Notion / Linear-grade)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --mq-primary:#6366f1; --mq-primary-dark:#4f46e5; --mq-primary-light:#818cf8;
  --mq-orange:#ff9500; --mq-orange-dark:#ff7b00;
  --mq-grad-start:#667eea; --mq-grad-mid:#764ba2; --mq-grad-end:#9d50bb;
  --mq-gradient-main:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --mq-gradient-landing:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#9d50bb 100%);
  --mq-gradient-cta:linear-gradient(135deg,#ff9500 0%,#ff7b00 100%);
  --mq-grad-red:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  --mq-grad-blue:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  --mq-grad-amber:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  --mq-grad-green:linear-gradient(135deg,#10b981 0%,#059669 100%);
  --mq-grad-pink:linear-gradient(135deg,#ec4899 0%,#db2777 100%);
  --mq-grad-purple:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);
  --mq-white:#fff;
  --mq-gray-50:#f9fafb; --mq-gray-100:#f3f4f6; --mq-gray-200:#e5e7eb;
  --mq-gray-300:#d1d5db; --mq-gray-400:#9ca3af; --mq-gray-500:#6b7280;
  --mq-gray-600:#4b5563; --mq-gray-700:#374151; --mq-gray-800:#1f2937;
  --mq-gray-900:#111827; --mq-ink:#1a1a2e;
  --mq-success:#10b981; --mq-success-light:#d1fae5; --mq-success-dark:#065f46;
  --mq-error:#ef4444; --mq-error-light:#fee2e2;
  --mq-shadow-cta:0 4px 15px rgba(255,149,0,.40);
  --mq-shadow-colored:0 10px 40px rgba(102,126,234,.30);
  --mq-shadow-focus:0 0 0 4px rgba(99,102,241,.18);
  --mq-font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mq-ease:cubic-bezier(.4,0,.2,1);
  --mq-ease-out:cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   STAGE
   ===================================================================== */
.qe{
  font-family:var(--mq-font-sans);
  color:#fff;
  background:var(--mq-gradient-landing);
  width:100%; height:100%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  letter-spacing:-.005em;
}
.qe::before, .qe::after{
  content:""; position:absolute; pointer-events:none;
  border-radius:50%; filter:blur(90px); z-index:0;
}
.qe::before{
  width:620px; height:620px;
  background:radial-gradient(closest-side, rgba(240,147,251,.45), transparent);
  top:-180px; left:-140px;
  animation:qeHeroFloat 9s ease-in-out infinite;
}
.qe::after{
  width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(102,126,234,.55), transparent);
  top:340px; right:-140px;
  animation:qeHeroFloat 11s ease-in-out -3s infinite;
}
@keyframes qeHeroFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,-16px) scale(1.06)}
}
.qe__scroll{
  position:relative; z-index:2;
  height:100%; overflow-y:auto;
  padding:0 0 140px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;
}
.qe__scroll::-webkit-scrollbar{width:8px}
.qe__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:4px}

/* NAVBAR */
.qe-nav{ position:relative; z-index:5; margin:18px auto 0; width:calc(100% - 48px); max-width:1240px; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-radius:9999px; padding:10px 14px 10px 22px; display:flex; align-items:center; gap:16px; box-shadow:0 10px 30px rgba(15,23,42,.18); }
.qe-nav__logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:18px; letter-spacing:-.02em; color:var(--mq-primary-dark); }
.qe-nav__logo .b{ width:30px; height:30px; border-radius:9px; background:var(--mq-gradient-main); color:#fff; font-size:15px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(102,126,234,.4); }
.qe-nav__links{ display:flex; align-items:center; gap:22px; margin-left:8px; }
.qe-nav__links a{ position:relative; color:var(--mq-gray-700); font-size:14px; font-weight:600; text-decoration:none; padding:6px 4px; transition:color .15s var(--mq-ease); }
.qe-nav__links a:hover{color:var(--mq-primary-dark)}
.qe-nav__links a.active{color:var(--mq-primary-dark); font-weight:800}
.qe-nav__links a.active::after{ content:""; position:absolute; left:4px; right:4px; bottom:-4px; height:3px; border-radius:2px; background:var(--mq-gradient-main); }

.qe-subnav{ position:relative; z-index:4; max-width:1240px; margin:0 auto; padding:18px 28px 0; }
.qe-subnav__inner{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:13px; font-weight:600; }
.qe-subnav__back{ color:inherit; text-decoration:none; cursor:pointer; padding:6px 10px; border-radius:9999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); transition:all .15s var(--mq-ease); backdrop-filter:blur(10px); }
.qe-subnav__back:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); color:#fff; }
.qe-subnav__sep{opacity:.4}
.qe-subnav__cur{color:#fff; font-weight:800}

.qe-nav__spacer{flex:1}
.qe-nav__btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:9999px; border:0; background:transparent; color:var(--mq-gray-700); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .15s var(--mq-ease); }
.qe-nav__btn:hover{background:var(--mq-gray-100); color:var(--mq-primary-dark)}
.qe-nav__btn svg{width:15px; height:15px}
.qe-nav__bal{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 8px; border-radius:9999px; background:linear-gradient(135deg,#fff7ed,#ffedd5); border:0; color:#9a3412; font-weight:800; font-size:13.5px; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.qe-nav__bal:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(249,115,22,.25)}
.qe-nav__bal-gem{ width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,#fb923c,#f97316); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.qe-nav__bal-gem svg{width:13px; height:13px}
.qe-nav__bal-add{opacity:.55; font-weight:700; font-size:12px}
.qe-nav__av{ width:38px; height:38px; border-radius:50%; background:var(--mq-gradient-main); color:#fff; display:grid; place-items:center; font-weight:900; font-size:14px; border:2px solid #fff; cursor:pointer; }

/* HERO */
.qe-hero{ position:relative; z-index:2; max-width:980px; margin:0 auto; padding:36px 28px 36px; }
.qe-hero__grid{ display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:flex-start; }

.qe-cover{ position:relative; width:200px; height:200px; flex-shrink:0; border:2px dashed rgba(255,255,255,.3); background:rgba(255,255,255,.08); border-radius:24px; cursor:pointer; overflow:hidden; padding:0; transition:all .2s var(--mq-ease); backdrop-filter:blur(10px); display:grid; place-items:center; }
.qe-cover:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); border-style:solid; transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(0,0,0,.3); }
.qe-cover__placeholder{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; text-align:center; padding:16px; }
.qe-cover__emoji{ font-size:56px; line-height:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.qe-cover__label{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.qe-cover__hint{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:rgba(255,255,255,.15); border-radius:9999px; font-size:11.5px; font-weight:700; color:#fff; opacity:0; transform:translateY(4px); transition:.2s var(--mq-ease); }
.qe-cover:hover .qe-cover__hint{opacity:1; transform:translateY(0)}
.qe-cover__hint svg{width:12px; height:12px}

.qe-hero__text{ min-width:0; display:flex; flex-direction:column; gap:14px; }

.qe-title-wrap{ position:relative; display:inline-block; max-width:100%; }
.qe-title-wrap::after{ content:""; position:absolute; left:-12px; right:-12px; bottom:-6px; height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--mq-ease), background .25s var(--mq-ease); border-radius:2px; }
.qe-title-wrap:hover::after{ transform:scaleX(1); background:rgba(255,255,255,.3); }
.qe-title-wrap:focus-within::after{ transform:scaleX(1); background:linear-gradient(90deg, #fbbf24, transparent); }
.qe-edit-hint{ position:absolute; top:50%; right:-12px; transform:translate(100%, -50%); display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(10px); border-radius:9999px; font-size:11px; font-weight:700; color:#fff; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s var(--mq-ease), transform .2s var(--mq-ease); }
.qe-edit-hint svg{width:12px; height:12px}
.qe-title-wrap:hover .qe-edit-hint{ opacity:1; transform:translate(100%, -50%) translateX(8px); }
.qe-title-wrap:focus-within .qe-edit-hint{display:none}

.qe-desc-wrap{ position:relative; }
.qe-desc-wrap::after{ content:""; position:absolute; left:-12px; right:-12px; bottom:-4px; height:1.5px; background:transparent; transform:scaleX(0); transform-origin:left; transition:.25s var(--mq-ease); border-radius:2px; }
.qe-desc-wrap:hover::after{transform:scaleX(1); background:rgba(255,255,255,.18)}
.qe-desc-wrap:focus-within::after{transform:scaleX(1); background:rgba(255,255,255,.5)}
.qe-hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:9999px; font-size:12px; font-weight:800; margin-bottom:24px; backdrop-filter:blur(10px); color:#fff; letter-spacing:.04em; }
.qe-hero__eyebrow svg{width:13px; height:13px}
.qe-hero__eyebrow b{ background:linear-gradient(135deg,#fbbf24,#fb923c); -webkit-background-clip:text; background-clip:text; color:transparent; }

.qe-title{ display:block; width:100%; background:transparent; border:0; outline:0; padding:0; margin:0; font:900 48px/1.04 var(--mq-font-sans); letter-spacing:-.035em; color:#fff; resize:none; caret-color:#fbbf24; }
.qe-title::placeholder{color:rgba(255,255,255,.35); font-weight:900}
.qe-title:focus{ text-shadow:0 0 30px rgba(251,191,36,.25); }

.qe-desc{ display:block; width:100%; background:transparent; border:0; outline:0; padding:0; margin:0; font:500 16.5px/1.55 var(--mq-font-sans); color:rgba(255,255,255,.82); resize:none; letter-spacing:-.005em; caret-color:#fbbf24; }
.qe-desc::placeholder{color:rgba(255,255,255,.45)}

.qe-meta-row{ display:flex; align-items:center; gap:10px; margin-top:28px; flex-wrap:wrap; }
.qe-meta-label{ font-size:11px; font-weight:800; color:rgba(255,255,255,.6); letter-spacing:.12em; text-transform:uppercase; margin-right:4px; }

.qe-chip-sel{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); border-radius:9999px; color:#fff; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; transition:all .15s var(--mq-ease); }
.qe-chip-sel:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35); }
.qe-chip-sel__emoji{ width:24px; height:24px; background:rgba(0,0,0,.18); border-radius:50%; display:grid; place-items:center; font-size:13px; }
.qe-chip-sel__caret{ width:14px; height:14px; opacity:.6; }

.qe-switch{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 7px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); border-radius:9999px; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; color:#fff; user-select:none; transition:all .15s var(--mq-ease); }
.qe-switch:hover{background:rgba(255,255,255,.2)}
.qe-switch__track{ width:36px; height:22px; background:rgba(255,255,255,.25); border-radius:9999px; position:relative; transition:background .2s var(--mq-ease); }
.qe-switch__thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .25s var(--mq-ease-out); }
.qe-switch.on .qe-switch__track{ background:linear-gradient(135deg, #34d399, #10b981); }
.qe-switch.on .qe-switch__thumb{transform:translateX(14px)}

/* CONTENT */
.qe-content{ position:relative; z-index:2; max-width:980px; margin:0 auto; padding:24px 28px; display:flex; flex-direction:column; gap:18px; }

.qe-section-title{ display:flex; align-items:center; gap:14px; margin:18px 4px 4px; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.qe-section-title::before, .qe-section-title::after{ content:""; height:1px; background:rgba(255,255,255,.18); }
.qe-section-title::before{width:24px}
.qe-section-title::after{flex:1}
.qe-section-title__count{ color:#fff; font-weight:900; letter-spacing:0; font-size:13px; background:rgba(255,255,255,.15); padding:2px 9px; border-radius:9999px; font-variant-numeric:tabular-nums; }

/* QUESTION CARDS */
.qe-q{ position:relative; background:#fff; border-radius:24px; box-shadow:0 30px 70px -25px rgba(15,23,42,.5), 0 6px 16px rgba(15,23,42,.1); overflow:visible; transition:transform .25s var(--mq-ease), box-shadow .25s var(--mq-ease); }
.qe-q:hover{ transform:translateY(-2px); box-shadow:0 36px 80px -25px rgba(15,23,42,.55), 0 8px 18px rgba(15,23,42,.12); }
.qe-q__halo{ position:absolute; inset:-3px; border-radius:27px; z-index:-1; background:linear-gradient(135deg, rgba(102,126,234,.3), rgba(236,72,153,.18) 60%, rgba(255,149,0,.25)); filter:blur(14px); opacity:.4; pointer-events:none; }

.qe-q__chip{ position:absolute; left:-14px; top:24px; z-index:1; width:48px; height:48px; border-radius:14px; background:var(--mq-gradient-main); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:0 10px 24px rgba(102,126,234,.5), inset 0 1px 0 rgba(255,255,255,.25); letter-spacing:0; }
.qe-q__chip-shine{ position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%); pointer-events:none; }

.qe-q__top{ display:flex; align-items:center; gap:10px; padding:18px 22px 8px 50px; }
.qe-q__top-meta{ font-size:10.5px; font-weight:800; color:var(--mq-gray-400); letter-spacing:.14em; text-transform:uppercase; }
.qe-q__top-spacer{flex:1}
.qe-q__type-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; background:var(--mq-gray-100); color:var(--mq-gray-700); border-radius:9999px; font-size:11.5px; font-weight:800; letter-spacing:-.005em; }
.qe-q__type-pill svg{width:12px; height:12px}
.qe-q__actions{display:flex; gap:2px; opacity:.5; transition:opacity .15s var(--mq-ease)}
.qe-q:hover .qe-q__actions{opacity:1}
.qe-q__act{ width:30px; height:30px; border:0; background:transparent; color:var(--mq-gray-500); border-radius:8px; cursor:pointer; display:grid; place-items:center; transition:all .12s var(--mq-ease); }
.qe-q__act:hover{background:var(--mq-gray-100); color:var(--mq-gray-800)}
.qe-q__act.danger:hover{background:var(--mq-error-light); color:var(--mq-error)}
.qe-q__act svg{width:14px; height:14px}

.qe-q__body{ padding:8px 26px 22px 50px; }

.qe-q__text{ display:block; width:100%; background:transparent; border:0; outline:0; padding:8px 0; margin:0 0 14px; font:800 22px/1.32 var(--mq-font-sans); color:var(--mq-gray-900); letter-spacing:-.018em; resize:none; caret-color:var(--mq-primary); }
.qe-q__text::placeholder{color:var(--mq-gray-300); font-weight:800}
.qe-q__text-wrap{position:relative}
.qe-q__text-wrap::after{ content:""; position:absolute; left:-6px; top:6px; bottom:6px; width:3px; background:var(--mq-primary); border-radius:2px; opacity:0; transform:scaleY(.5); transition:opacity .15s, transform .2s var(--mq-ease); }
.qe-q__text-wrap:focus-within::after{opacity:1; transform:scaleY(1)}

/* ANSWERS */
.qe-ans-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.qe-ans{ position:relative; display:flex; align-items:center; gap:14px; padding:8px 14px 8px 6px; border-radius:16px; border:1.5px solid transparent; background:var(--mq-gray-50); transition:all .2s var(--mq-ease); overflow:hidden; }
.qe-ans::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s var(--mq-ease); }
.qe-ans > *{position:relative}

.qe[data-variant="bright"] .qe-ans[data-v="a"]{ background:var(--mq-grad-red); border-color:transparent; box-shadow:0 6px 18px rgba(239,68,68,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.qe[data-variant="bright"] .qe-ans[data-v="b"]{ background:var(--mq-grad-blue); border-color:transparent; box-shadow:0 6px 18px rgba(59,130,246,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.qe[data-variant="bright"] .qe-ans[data-v="c"]{ background:var(--mq-grad-amber); border-color:transparent; box-shadow:0 6px 18px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.18); }
.qe[data-variant="bright"] .qe-ans[data-v="d"]{ background:var(--mq-grad-green); border-color:transparent; box-shadow:0 6px 18px rgba(16,185,129,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.qe[data-variant="bright"] .qe-ans::before{ background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 45%); opacity:1; }

.qe[data-variant="bright"] .qe-ans[data-v="a"]:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(239,68,68,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.qe[data-variant="bright"] .qe-ans[data-v="b"]:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.qe[data-variant="bright"] .qe-ans[data-v="c"]:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.qe[data-variant="bright"] .qe-ans[data-v="d"]:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.22); }

.qe[data-variant="bright"] .qe-ans .qe-ans__input{ color:#fff; }
.qe[data-variant="bright"] .qe-ans .qe-ans__input::placeholder{ color:rgba(255,255,255,.55); font-weight:500; }
.qe[data-variant="bright"] .qe-ans .qe-ans__letter{ background:rgba(0,0,0,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.15); }
.qe[data-variant="bright"] .qe-ans .qe-ans__letter::after{display:none}
.qe[data-variant="bright"] .qe-ans .qe-ans__letter:hover{ background:rgba(0,0,0,.32); transform:scale(1.05); }
.qe[data-variant="bright"] .qe-ans .qe-ans__letter-hint{ background:rgba(0,0,0,.85); }
.qe[data-variant="bright"] .qe-ans .qe-ans__letter-hint::after{ border-top-color:rgba(0,0,0,.85); }
.qe[data-variant="bright"] .qe-ans .qe-ans__photo{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4); color:#fff; }
.qe[data-variant="bright"] .qe-ans .qe-ans__photo:hover{ background:#fff; color:var(--mq-gray-900); border-color:#fff; }

.qe-ans:hover{background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.04)}
.qe-ans:focus-within{ background:#fff; border-color:var(--mq-primary); box-shadow:var(--mq-shadow-focus); }
.qe-ans.correct{ background:linear-gradient(90deg, rgba(16,185,129,.14) 0%, rgba(16,185,129,.04) 100%); border-color:rgba(16,185,129,.55); }
.qe[data-variant="bright"] .qe-ans.correct{ box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mq-success), 0 12px 30px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.22) !important; }
.qe[data-variant="bright"] .qe-ans.correct .qe-ans__letter{ background:rgba(255,255,255,.95) !important; color:var(--mq-success-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.18) !important; }
.qe[data-variant="bright"] .qe-ans.correct .qe-ans__letter-check{ background:var(--mq-success); color:#fff; }
.qe-ans.correct:focus-within{ background:linear-gradient(90deg, rgba(16,185,129,.2) 0%, #fff 100%); border-color:var(--mq-success); box-shadow:0 0 0 4px rgba(16,185,129,.2); }

.qe-ans__letter{ position:relative; width:42px; height:42px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; font-size:16px; font-weight:900; color:#fff; border:0; cursor:pointer; font-family:inherit; box-shadow:0 4px 12px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .15s var(--mq-ease-out), box-shadow .15s var(--mq-ease); overflow:hidden; }
.qe-ans__letter::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.28) 0%, transparent 50%); pointer-events:none; }
.qe-ans__letter:hover{ transform:scale(1.06); box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3); }
.qe-ans[data-v="a"] .qe-ans__letter{background:var(--mq-grad-red)}
.qe-ans[data-v="b"] .qe-ans__letter{background:var(--mq-grad-blue)}
.qe-ans[data-v="c"] .qe-ans__letter{background:var(--mq-grad-amber)}
.qe-ans[data-v="d"] .qe-ans__letter{background:var(--mq-grad-green)}

.qe[data-variant="calm"] .qe-ans__letter{ background:#fff; color:var(--mq-gray-500); box-shadow:inset 0 0 0 1.5px var(--mq-gray-200); }
.qe[data-variant="calm"] .qe-ans__letter::after{display:none}
.qe[data-variant="calm"] .qe-ans__letter:hover{ background:var(--mq-gray-100); color:var(--mq-gray-700); box-shadow:inset 0 0 0 1.5px var(--mq-gray-300); }
.qe[data-variant="calm"] .qe-ans.correct .qe-ans__letter{ background:var(--mq-grad-green); color:#fff; box-shadow:0 6px 16px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.25); }

.qe-ans__letter-hint{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px); padding:5px 10px; background:var(--mq-gray-900); color:#fff; border-radius:7px; font-size:11px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:5; }
.qe-ans__letter-hint::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:4px solid transparent; border-top-color:var(--mq-gray-900); }
.qe-ans__letter:hover .qe-ans__letter-hint{opacity:1; transform:translateX(-50%) translateY(0)}
.qe-ans.correct .qe-ans__letter-hint{display:none}

.qe-ans__letter-check{ position:absolute; top:-4px; right:-4px; width:18px; height:18px; background:#fff; border-radius:50%; display:grid; place-items:center; color:var(--mq-success); box-shadow:0 2px 6px rgba(0,0,0,.2); opacity:0; transform:scale(.4); transition:.2s var(--mq-ease-back, cubic-bezier(.34,1.56,.64,1)); }
.qe-ans__letter-check svg{width:11px; height:11px}
.qe-ans.correct .qe-ans__letter-check{opacity:1; transform:scale(1)}
.qe-ans.correct .qe-ans__letter{ box-shadow:0 6px 16px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 3px rgba(16,185,129,.25); }

.qe-ans__input{ flex:1; min-width:0; border:0; background:transparent; padding:11px 4px; font-family:inherit; font-size:15.5px; font-weight:600; color:var(--mq-gray-900); outline:0; letter-spacing:-.005em; }
.qe-ans__input::placeholder{color:var(--mq-gray-400); font-weight:500}

.qe-ans__tag{ display:none; align-items:center; gap:4px; padding:4px 9px 4px 6px; background:var(--mq-success); color:#fff; border-radius:9999px; font-size:11px; font-weight:800; letter-spacing:-.005em; text-transform:uppercase; }
.qe-ans__tag svg{width:11px; height:11px}
.qe-ans.correct .qe-ans__tag{display:inline-flex}

.qe-ans__photo{ flex-shrink:0; width:54px; height:42px; margin-left:-4px; background:#fff; border-radius:10px; display:grid; place-items:center; color:var(--mq-gray-400); cursor:pointer; border:1.5px dashed var(--mq-gray-300); transition:all .15s var(--mq-ease); }
.qe-ans__photo:hover{color:var(--mq-primary); border-color:var(--mq-primary); border-style:solid}
.qe-ans__photo svg{width:18px; height:18px}
.qe-ans__photo-remove{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border:0; border-radius:50%; background:rgba(0,0,0,0.7); color:#fff; font-size:13px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; z-index:2; transition:background .15s var(--mq-ease); }
.qe-ans__photo-remove:hover{ background:var(--mq-error); }

/* FOOTER ROW */
.qe-q__foot{ display:flex; align-items:center; gap:14px; padding-top:14px; margin-top:2px; border-top:1px dashed var(--mq-gray-200); flex-wrap:wrap; }
.qe-meta-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; background:var(--mq-gray-50); border:1px solid var(--mq-gray-200); border-radius:9999px; font-size:12.5px; font-weight:700; color:var(--mq-gray-700); cursor:pointer; transition:all .15s var(--mq-ease); }
.qe-meta-pill:hover{background:#fff; border-color:var(--mq-gray-300); color:var(--mq-gray-900)}
.qe-meta-pill__icon{ width:24px; height:24px; background:var(--mq-gray-100); border-radius:50%; display:grid; place-items:center; color:var(--mq-gray-500); }
.qe-meta-pill__icon svg{width:13px; height:13px}
.qe-meta-pill b{ color:var(--mq-gray-900); font-weight:800; font-variant-numeric:tabular-nums; }
.qe-meta-pill__caret{width:11px; height:11px; opacity:.4; margin-left:-2px}
.qe-meta-pill--photo.on{ background:linear-gradient(135deg, #eef2ff, #f5f3ff); border-color:var(--mq-primary-light); color:var(--mq-primary-dark); }
.qe-meta-pill--photo.on .qe-meta-pill__icon{ background:var(--mq-primary); color:#fff; }

.qe-q__foot-spacer{flex:1}

.qe-q__regen{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border:0; background:transparent; color:var(--mq-grad-mid); font-family:inherit; font-size:12.5px; font-weight:800; cursor:pointer; border-radius:9999px; transition:background .15s var(--mq-ease); letter-spacing:-.005em; }
.qe-q__regen:hover{background:rgba(124,58,237,.08)}
.qe-q__regen svg{width:13px; height:13px}

/* ADD ZONE */
.qe-add-zone{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; align-items:stretch; }

.qe-manual-card{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:24px; background:rgba(255,255,255,.1); border:1.5px dashed rgba(255,255,255,.32); backdrop-filter:blur(10px); border-radius:24px; color:#fff; font-family:inherit; cursor:pointer; text-align:left; transition:all .2s var(--mq-ease); height:100%; box-sizing:border-box; }
.qe-manual-card:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); border-style:solid; transform:translateY(-2px); }
.qe-manual-card__icon{ width:48px; height:48px; flex-shrink:0; border-radius:14px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:#fff; }
.qe-manual-card__icon svg{width:20px; height:20px}
.qe-manual-card__text{display:flex; flex-direction:column; gap:4px; flex:1}
.qe-manual-card__text b{font-size:17px; font-weight:900; letter-spacing:-.015em; color:#fff; line-height:1.2}
.qe-manual-card__text small{font-size:13px; color:rgba(255,255,255,.72); font-weight:600; line-height:1.45}
.qe-manual-card__arrow{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:12.5px; font-weight:800; transition:all .2s var(--mq-ease); }
.qe-manual-card:hover .qe-manual-card__arrow{ background:#fff; color:var(--mq-grad-mid); border-color:#fff; transform:translateX(2px); }
.qe-manual-card__arrow svg{width:13px; height:13px}

.qe-ai{ position:relative; border-radius:24px; padding:32px 32px 28px; background:linear-gradient(135deg, #0e0826 0%, #2d1b69 50%, #4c1d95 100%); color:#fff; overflow:hidden; box-shadow:0 24px 60px -15px rgba(76,29,149,.6); }
.qe-ai::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(255,149,0,.35), transparent 50%), radial-gradient(circle at 15% 95%, rgba(236,72,153,.3), transparent 50%); pointer-events:none; }
.qe-ai > *{position:relative}
.qe-ai__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.qe-ai__icon{ width:48px; height:48px; flex-shrink:0; border-radius:14px; background:var(--mq-gradient-cta); display:grid; place-items:center; color:#fff; box-shadow:0 8px 20px rgba(255,149,0,.5), inset 0 1px 0 rgba(255,255,255,.25); animation:qePulse 2.5s ease-in-out infinite; }
.qe-ai__icon svg{width:22px; height:22px}
@keyframes qePulse{ 0%,100%{box-shadow:0 8px 20px rgba(255,149,0,.5), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 0 rgba(255,149,0,.4)} 50%{box-shadow:0 8px 20px rgba(255,149,0,.5), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 12px rgba(255,149,0,0)} }
.qe-ai__title{ font-size:20px; font-weight:900; letter-spacing:-.02em; line-height:1.15; margin:2px 0 4px; }
.qe-ai__sub{ margin:0; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; max-width:46ch; }
.qe-ai__form{ display:flex; gap:10px; margin-bottom:14px; }
.qe-ai__input{ flex:1; padding:14px 18px; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border-radius:14px; color:#fff; font-family:inherit; font-size:15px; font-weight:500; outline:0; transition:all .15s var(--mq-ease); caret-color:#fbbf24; }
.qe-ai__input::placeholder{color:rgba(255,255,255,.45)}
.qe-ai__input:focus{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); box-shadow:0 0 0 4px rgba(255,255,255,.1); }
.qe-ai__submit{ height:auto; padding:0 22px; border:0; cursor:pointer; background:var(--mq-gradient-cta); color:#fff; border-radius:14px; font-family:inherit; font-size:14.5px; font-weight:900; letter-spacing:-.005em; display:inline-flex; align-items:center; gap:8px; box-shadow:0 10px 24px rgba(255,149,0,.45); transition:all .15s var(--mq-ease); }
.qe-ai__submit:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(255,149,0,.55)}
.qe-ai__submit svg{width:15px; height:15px}

.qe-ai__chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.qe-ai__chips-lbl{ font-size:11px; font-weight:800; color:rgba(255,255,255,.55); letter-spacing:.1em; text-transform:uppercase; margin-right:4px; }
.qe-ai__chip{ padding:5px 11px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:9999px; color:#fff; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s var(--mq-ease); }
.qe-ai__chip:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); }
.qe-ai__cost{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.55); }
.qe-ai__cost b{color:#fbbf24; font-weight:900}

.qe-manual{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border:0; background:transparent; color:rgba(255,255,255,.7); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border-radius:14px; transition:all .15s var(--mq-ease); }
.qe-manual:hover{background:rgba(255,255,255,.08); color:#fff}
.qe-manual svg{width:14px; height:14px}

/* POPOVER */
.qe-pop{ position:absolute; z-index:50; top:calc(100% + 8px); left:0; background:#fff; border-radius:14px; padding:6px; box-shadow:0 24px 50px -10px rgba(15,23,42,.4), 0 0 0 1px rgba(0,0,0,.05); min-width:200px; animation:qePopIn .2s var(--mq-ease-out); }
@keyframes qePopIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)}}
.qe-pop__item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--mq-gray-800); cursor:pointer; transition:background .12s var(--mq-ease); }
.qe-pop__item:hover{background:var(--mq-gray-100)}
.qe-pop__item.active{ background:linear-gradient(135deg, rgba(99,102,241,.1), rgba(124,58,237,.06)); color:var(--mq-primary-dark); font-weight:800; }
.qe-pop__emoji{ width:24px; height:24px; background:var(--mq-gray-100); border-radius:50%; display:grid; place-items:center; font-size:13px; }
.qe-pop__item.active .qe-pop__emoji{ background:var(--mq-gradient-main); color:#fff; }

/* STICKY FOOTER */
.qe-foot{ position:absolute; left:0; right:0; bottom:0; z-index:6; background:rgba(13,8,30,.7); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,.12); padding:14px 28px; display:flex; align-items:center; gap:14px; }
.qe-foot__status{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,.7); font-weight:600; }
.qe-foot__status-dot{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.3); animation:qeBlink 1.6s ease-in-out infinite; }
@keyframes qeBlink{0%,100%{opacity:1}50%{opacity:.4}}
.qe-foot__status b{color:#fff; font-weight:800}
.qe-foot__spacer{flex:1}
.qe-foot__btn{ height:44px; padding:0 20px; border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; border-radius:12px; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .15s var(--mq-ease); display:inline-flex; align-items:center; gap:7px; }
.qe-foot__btn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3)}
.qe-foot__btn svg{width:15px; height:15px}
.qe-foot__btn--primary{ background:var(--mq-gradient-main); border:0; font-weight:800; padding:0 22px; box-shadow:0 8px 22px rgba(102,126,234,.5); }
.qe-foot__btn--primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(102,126,234,.6); }
.qe-foot__btn--cta{ background:var(--mq-gradient-cta); border:0; font-weight:900; font-size:14px; padding:0 24px; box-shadow:0 10px 28px rgba(255,149,0,.55); letter-spacing:-.01em; }
.qe-foot__btn--cta:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(255,149,0,.65); }

.qe-cover.has-image .qe-cover__placeholder{ pointer-events:none; }
.qe-cover.has-image::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5) 100%); border-radius:inherit; pointer-events:none; }

/* ========== SPA INTEGRATION (added in Task 9) ========== */

/* Full-screen scope when editor is active.
   Selectors match project conventions:
   - .navbar — partials/_navbar.html and professionals.html:117
   - .footer — partials/_footer.html and professionals.html:749 */
body.qe-editor-active {
  overflow: hidden;
}
body.qe-editor-active .navbar,
body.qe-editor-active .footer {
  display: none !important;
}

.qe {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

/* Sticky footer override — fixed for SPA full-screen.
   Без явных left/right/bottom фиксированный элемент остаётся в потоке. */
.qe-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shared spinner (used by cover upload + loading overlay) */
@keyframes qeCoverSpin {
  to { transform: rotate(360deg); }
}

.qe-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qeCoverSpin 0.8s linear infinite;
}

/* Save indicator dot colors driven by data-status */
.qe-hero__eyebrow [data-status="saving"] { color: #fbbf24; }
.qe-hero__eyebrow [data-status="saved"] { color: #34d399; }
.qe-hero__eyebrow [data-status="error"] { color: #ef4444; }
.qe-hero__eyebrow [data-status="auth_error"] { color: #ef4444; }

/* Cover uploading state */
.qe-cover.uploading {
  pointer-events: none;
  opacity: 0.7;
}
.qe-cover.uploading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  border-radius: inherit;
  z-index: 2;
}
.qe-cover.uploading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qeCoverSpin 0.8s linear infinite;
  z-index: 3;
}

/* Action overflow button "..." */
.qe-action-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  margin-left: 8px;
  transition: all .15s var(--mq-ease);
}
.qe-action-overflow:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.35);
}

/* Tablet adaptation (mobile <640px not in scope) */
@media (max-width: 768px) {
  .qe-cover { width: 140px; height: 140px; }
  .qe-hero__grid { grid-template-columns: 140px 1fr; gap: 20px; }
  .qe-title { font-size: 36px; }
  .qe-content { padding: 18px 18px; }
  .qe-add-zone { grid-template-columns: 1fr; }
}