@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@500;600;700&family=Tajawal:wght@400;500;700;800&display=swap');
  :root{--bg:#0b1220;--surface:#111827;--card:#111827;--card-hover:#162033;--glass:rgba(15,23,42,.88);--text:#e5eefb;--muted:#94a3b8;--border:rgba(148,163,184,.18);--border-gold:rgba(59,130,246,.22);--radius:18px;--radius-lg:24px;--radius-xl:32px;--gold:#2563eb;--gold-soft:rgba(37,99,235,.10);--gold-glow:rgba(37,99,235,.18);--purple:#1d4ed8;--purple-soft:rgba(29,78,216,.10);--teal:#0f766e;--teal-soft:rgba(15,118,110,.10);--accent:var(--gold);--accent2:var(--purple);--accent3:var(--teal);--shadow-sm:0 4px 12px rgba(2,6,23,.18);--shadow:0 12px 32px rgba(2,6,23,.24);--shadow-lg:0 22px 56px rgba(2,6,23,.30);--shadow-gold:0 12px 36px rgba(37,99,235,.12);--sidebar:280px}
  *{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 880px 560px at -10% -10%,rgba(37,99,235,.10),transparent 72%),radial-gradient(ellipse 980px 620px at 110% 110%,rgba(15,23,42,.16),transparent 74%),radial-gradient(ellipse 760px 420px at 50% 50%,rgba(15,118,110,.05),transparent 70%);pointer-events:none;z-index:0}
  ::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.45)}
  ::selection{background:rgba(201,168,76,.25);color:#fff}
  .container{max-width:1180px;margin:0 auto;padding:28px 24px 36px;min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
  @media (max-width:560px){.container{padding:20px 14px 24px}}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;border-radius:22px;border:1px solid var(--border);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);position:sticky;top:16px;z-index:30}
  .brand{display:flex;align-items:center;gap:14px;min-width:0}.brandLink{color:inherit;text-decoration:none}.brandRadar{flex:0 0 auto}.brandPosterWrap{display:flex;align-items:center;justify-content:center;width:168px;max-width:40vw;padding:2px;border-radius:18px;position:relative}.brandPoster{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(15,23,42,.16))}.brand .sub{display:none}
  .pageCenterTitle{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:15px;color:var(--muted);letter-spacing:.01em;flex:1;text-align:center;min-width:0}
  .actions{display:flex;gap:8px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-size:13.5px;font-weight:600;white-space:nowrap;user-select:none;transition:all .2s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
  .btn:hover{border-color:var(--border-gold);background:rgba(37,99,235,.08);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.12);transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn.primary{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(37,99,235,.22)}
  .btn.primary:hover{background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);box-shadow:0 10px 24px rgba(37,99,235,.28);transform:translateY(-2px);color:#fff}
  .btn.small{padding:7px 12px;border-radius:10px;font-size:12.5px}
  .homeLayout{display:grid;gap:18px;margin-top:18px}.homeSection{padding:20px}
  .sectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
  .sectionTitle{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:16px;color:var(--text);letter-spacing:.01em}
  .sectionHint{color:var(--muted);font-size:13px}
  @media (max-width:560px){.sectionHead{flex-direction:column;align-items:flex-start}}
  .card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);padding:22px;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
  .card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(37,99,235,.05),transparent 70%);pointer-events:none}
  .card::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.28),transparent);opacity:0;transition:opacity .25s}
  .card:hover{transform:translateY(-2px);border-color:var(--border-gold);box-shadow:var(--shadow-lg),var(--shadow-gold);background:var(--card-hover)}
  .card:hover::after{opacity:1}.card > *{position:relative;z-index:1}
  .card h3{font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:15px;color:var(--text);margin:0 0 8px}
  .card p{margin:0;color:var(--muted);line-height:1.65}.card .meta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
  .page{margin-top:18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--glass);backdrop-filter:blur(16px);box-shadow:var(--shadow);padding:24px}
  .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));margin-top:18px}
  @media (max-width:820px){.grid{grid-template-columns:1fr}}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  @media (max-width:820px){.grid2{grid-template-columns:1fr}}
  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.spacer{flex:1}
  .h1{font-family:'Inter',system-ui,sans-serif;font-size:24px;font-weight:800;color:var(--text)}
  .h2{font-weight:700;font-size:16px;color:var(--text)}.muted{color:var(--muted)}
  .label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:6px;letter-spacing:.01em;text-transform:none}
  .input{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:14.5px;outline:none;transition:all .2s}
  .input:focus{border-color:var(--border-gold);background:rgba(37,99,235,.05);box-shadow:0 0 0 3px rgba(37,99,235,.10),0 4px 16px rgba(0,0,0,.12)}
  .input::placeholder{color:rgba(132,150,184,.5)}
  input[type="password"],input[type="text"],input[type="url"]{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);outline:none;width:min(420px,100%);transition:all .2s}
  input[type="password"]:focus,input[type="text"]:focus,input[type="url"]:focus{border-color:var(--border-gold);box-shadow:0 0 0 3px rgba(201,168,76,.10)}
  .progress{width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden;border:none;margin-top:4px}
  .progress > div{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--purple),var(--teal));background-size:200% 100%;animation:progressGlow 2s linear infinite;border-radius:999px;box-shadow:0 0 12px rgba(201,168,76,.4);transition:width .5s cubic-bezier(.25,.46,.45,.94)}
  @keyframes progressGlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  .qbox{margin-top:16px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:rgba(255,255,255,.03);position:relative;overflow:hidden}
  .qbox::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.28),transparent)}
  .qtitle{font-size:17px;font-weight:500;margin:0 0 14px;color:var(--text);line-height:1.6}
  .options{display:grid;gap:10px;margin-top:12px}
  .option{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.03);cursor:pointer;transition:all .2s cubic-bezier(.25,.46,.45,.94);display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:14.5px;position:relative;overflow:hidden}
  .option:hover{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.06);transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,23,42,.12),0 0 0 1px rgba(37,99,235,.10)}
  .option input{margin-top:3px;accent-color:var(--gold)}
  .likert{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  @media (max-width:650px){.likert{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .likert .option{justify-content:center;text-align:center}
  .pill,.badge{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.03);display:inline-flex;align-items:center;font-weight:500;letter-spacing:.01em}
  .notice{padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);color:var(--muted);font-size:13.5px}
  .footer{margin-top:auto;padding-top:28px;color:rgba(132,150,184,.4);font-size:12.5px;font-weight:400;letter-spacing:.02em}
  .roleTabs{position:relative;padding:0}
  .levelTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  @media (max-width:980px){.levelTabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:520px){.levelTabs{grid-template-columns:1fr}}
  .levelCard{border:1px solid var(--border);border-radius:22px;padding:20px;min-height:90px;text-align:start;background:var(--card);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
  .levelCard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.24),transparent);opacity:0;transition:opacity .25s}
  .levelCard:hover{transform:translateY(-4px);border-color:var(--border-gold);box-shadow:var(--shadow-lg),var(--shadow-gold);background:var(--card-hover)}
  .levelCard:hover::before{opacity:1}
  .levelCard.on{border-color:rgba(37,99,235,.28);background:linear-gradient(145deg,rgba(37,99,235,.08),rgba(15,118,110,.04));box-shadow:0 0 0 1px rgba(37,99,235,.12),var(--shadow-gold)}
  .levelTop{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
  .levelName{font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--text)}
  .levelCount{min-width:32px;height:26px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border-gold);background:var(--gold-soft);color:var(--gold);font-weight:800;font-size:12px;position:relative;z-index:1}
  .levelSub{margin-top:10px;color:var(--muted);font-size:13px;position:relative;z-index:1;line-height:1.5}
  .testsGrid{padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  @media (max-width:1100px){.testsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:720px){.testsGrid{grid-template-columns:1fr}}
  .testCard{border:1px solid var(--border);border-radius:22px;padding:20px;background:var(--card);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;cursor:pointer;user-select:none;transition:all .25s cubic-bezier(.25,.46,.45,.94);animation:fadeUpPremium .45s ease both;position:relative;overflow:hidden}
  .testCard::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.25),transparent);opacity:0;transition:opacity .25s}
  .testCard:hover{transform:translateY(-4px);border-color:var(--border-gold);box-shadow:var(--shadow-lg),var(--shadow-gold);background:var(--card-hover)}
  .testCard:hover::after{opacity:1}
  @keyframes fadeUpPremium{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .testBody{min-height:62px}.testTitle{font-weight:700;font-size:15px;line-height:1.3;color:var(--text)}.testMeta{color:var(--muted);font-size:13px;line-height:1.6;margin-top:5px}.testFoot{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
  .adminTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .adminTab{padding:9px 18px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-weight:500;font-size:14px;cursor:pointer;transition:all .2s}
  .adminTab.active,.adminTab:hover{border-color:var(--border-gold);background:var(--gold-soft);color:var(--gold)}
  .adminlead{display:flex;flex-direction:column;gap:14px}
  .abBox{border:1px solid var(--border);border-radius:18px;padding:18px;background:rgba(255,255,255,.03)}
  .abCols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:820px){.abCols{grid-template-columns:1fr}}
  .abCol{border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(255,255,255,.02)}
  .abTag{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;font-weight:800;background:var(--gold-soft);border:1px solid var(--border-gold);color:var(--gold)}
  .abText{margin-top:12px;line-height:1.7;font-size:14.5px}
  .scale6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  @media (max-width:820px){.scale6{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .scaleOpt{border:1px solid var(--border);border-radius:14px;padding:10px;background:rgba(255,255,255,.02);cursor:pointer;transition:all .2s;display:block}
  .scaleOpt:hover{border-color:var(--border-gold);background:var(--gold-soft)}
  .scaleOpt input{display:none}
  .scaleOpt input:checked + .scaleInner{outline:2px solid rgba(201,168,76,.5);background:var(--gold-soft)}
  .scaleInner{border-radius:12px;padding:10px;text-align:center}
  .scaleNum{font-size:18px;font-weight:800;color:var(--gold)}.scaleLbl{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35}
  .sales{display:flex;flex-direction:column;gap:14px}.salesQ{border:1px solid var(--border);border-radius:16px;padding:16px;background:rgba(255,255,255,.02);line-height:1.7}
  .mlTable{border:1px solid var(--border);border-radius:16px;overflow:hidden}
  .mlHead,.mlRow{display:grid;grid-template-columns:1fr 110px 110px;gap:0}
  @media (max-width:820px){.mlHead,.mlRow{grid-template-columns:1fr 74px 74px}}
  .mlHead{background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}.mlCol{padding:12px;display:flex;align-items:center;justify-content:center}.mlOpt{justify-content:flex-start}
  .mlRow{border-bottom:1px solid var(--border);background:rgba(255,255,255,.01)}.mlRow:last-child{border-bottom:none}.mlRow input{transform:scale(1.1);accent-color:var(--gold)}
  .rankGrid{display:flex;flex-direction:column;gap:10px;margin-top:10px}.rankRow{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}.rankTxt{flex:1;line-height:1.6}
  .table{width:100%;border-collapse:collapse;margin-top:14px;overflow:hidden;border-radius:14px}
  .table th,.table td{border-bottom:1px solid rgba(255,255,255,.05);padding:12px 14px;text-align:left;font-size:14px}
  .table th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
  .table tr:hover td{background:rgba(201,168,76,.04)}
  .chart{display:block;width:100%;height:260px}.chartCardTitle{font-weight:700;margin:0 0 12px;font-size:13.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.chartNote{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.6}
  .axisLine{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}.axisL,.axisR{font-weight:700;color:var(--text)}.axisMid{opacity:.4}
  .axisTag{margin-inline-start:auto;font-size:12px;color:var(--muted);border:1px solid var(--border);padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.03)}
  .chk{display:flex;align-items:center;gap:9px;user-select:none;cursor:pointer;font-size:14px}.chk input{width:18px;height:18px;accent-color:var(--gold)}
  .heroBalloons{margin-top:18px;border:1px solid var(--border-gold);border-radius:var(--radius-xl);background:var(--glass);backdrop-filter:blur(20px);box-shadow:var(--shadow),var(--shadow-gold);padding:20px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
  .heroBalloons::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,76,.06),transparent 70%);pointer-events:none}
  .heroBalloons .heroText{padding:20px;border-radius:var(--radius);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);position:relative;z-index:1}
  .heroBalloons .kicker{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--gold);opacity:.85}
  .heroBalloons h1{margin:10px 0 10px;font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,50px);line-height:1.1;background:linear-gradient(135deg,var(--text) 0%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .heroBalloons p{margin:0;color:var(--muted);line-height:1.7}.heroHint{margin-top:10px !important;padding-top:10px;border-top:1px dashed rgba(255,255,255,.08);opacity:.9}
  .balloonField{position:relative;border-radius:var(--radius);background:rgba(255,255,255,.02);border:1px solid var(--border);overflow:hidden;min-height:0;z-index:1}
  .balloonCenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:210px;height:210px;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(201,168,76,.12),rgba(0,0,0,.3));box-shadow:inset 0 0 0 1px var(--border-gold),0 16px 40px rgba(0,0,0,.3),0 0 60px rgba(201,168,76,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;gap:8px}
  .centerTitle{font-weight:700;font-size:17px;color:var(--text);letter-spacing:.01em;line-height:1.2}.centerSub{font-weight:600;font-size:12px;color:var(--muted)}
  .centerLink{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;border:1px solid var(--border-gold);background:var(--gold-soft);color:var(--gold);font-weight:700;font-size:12px;text-decoration:none;transition:all .2s}.centerLink:hover{background:var(--gold);color:#000}
  .balloon{position:absolute;left:50%;top:50%;width:190px;height:240px;transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,-150px) rotate(calc(-1 * var(--angle)));padding:18px 16px 16px;border-radius:140px 140px 140px 140px / 190px 190px 110px 110px;background:var(--card);border:1px solid var(--border-gold);box-shadow:var(--shadow),0 0 20px rgba(201,168,76,.08);cursor:pointer;user-select:none;transition:transform .22s cubic-bezier(.25,.46,.45,.94),box-shadow .22s;color:var(--text);text-align:center;overflow:hidden}
  .balloon:hover{transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,-150px) rotate(calc(-1 * var(--angle))) scale(1.05);box-shadow:var(--shadow-lg),0 0 30px rgba(201,168,76,.18)}
  .balloonTitle{font-weight:700;font-size:14px;line-height:1.2;margin:4px 0 10px;color:var(--text)}.balloonMeta{font-size:11px;color:var(--muted);margin-top:4px}
  .balloonBtn{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border-radius:999px;border:1px solid var(--border-gold);background:var(--gold-soft);color:var(--gold);font-weight:700;font-size:12px;cursor:pointer;transition:all .15s}.balloonBtn:hover{background:var(--gold);color:#000}
  @media (max-width:760px){.topbar{flex-wrap:wrap;justify-content:center;text-align:center}.brand{justify-content:center}.pageCenterTitle{width:100%;order:3;padding-top:6px}.actions{width:100%;justify-content:center;order:2}}
  @media (max-width:720px){.topbar{flex-wrap:wrap;gap:12px}.actions{flex-wrap:wrap;justify-content:flex-start}.grid{grid-template-columns:1fr}.card{padding:16px}.btn{padding:9px 14px}.pill{font-size:12px}.qbox{padding:16px}.table{font-size:13px}}
  @media (max-width:980px){.heroBalloons{padding:14px}.testsGrid{grid-template-columns:1fr}.balloonField{min-height:auto}}
  @media (min-width:980px){.heroBalloons .heroText{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:24px}.heroBalloons .heroText h1{margin-top:4px}}
  html[lang="ar"] body{font-family:'Tajawal','Cairo','Noto Naskh Arabic',system-ui,sans-serif}
  html[lang="ar"] .heroBalloons .heroText{text-align:right}
  html[lang="ar"] .balloon{text-align:right}
  [data-theme="light"]{--bg:#f4f7fb;--surface:#ffffff;--card:#ffffff;--card-hover:#fbfdff;--glass:rgba(255,255,255,.95);--text:#0f172a;--muted:#64748b;--border:rgba(15,23,42,.09);--border-gold:rgba(37,99,235,.18);--gold:#1d4ed8;--gold-soft:rgba(29,78,216,.08);--shadow:0 10px 30px rgba(15,23,42,.08);--shadow-lg:0 22px 52px rgba(15,23,42,.12);--shadow-gold:0 12px 28px rgba(37,99,235,.08)}
  [data-theme="light"] .input{background:#fff}[data-theme="light"] .option{background:#fff}[data-theme="light"] .option:hover{background:rgba(29,78,216,.05)}
  .layout-grid,.layout-slider,.layout-orbit,.layout-honeycomb,.layout-list{position:relative}.dark{color:#fff}

/* PDF export */
body.pdf-export-mode{background:#ffffff !important;color:#111827 !important}
body.pdf-export-mode::before{display:none !important}
body.pdf-export-mode .container{max-width:1024px;padding:0 0 18px;min-height:auto}
body.pdf-export-mode .topbar{position:static !important;top:auto !important;background:#ffffff !important;border:1px solid #e5e7eb !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-radius:18px;margin-bottom:16px}
body.pdf-export-mode .actions{display:none !important}
body.pdf-export-mode .page,
body.pdf-export-mode .card,
body.pdf-export-mode .qbox{background:#ffffff !important;color:#111827 !important;border:1px solid #e5e7eb !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.pdf-export-mode .card::before,
body.pdf-export-mode .card::after,
body.pdf-export-mode .qbox::before{display:none !important}
body.pdf-export-mode .brand .title,
body.pdf-export-mode .h1,
body.pdf-export-mode .h2,
body.pdf-export-mode .qtitle,
body.pdf-export-mode .chartCardTitle,
body.pdf-export-mode .table td,
body.pdf-export-mode .table th,
body.pdf-export-mode .pageCenterTitle,
body.pdf-export-mode .footer,
body.pdf-export-mode .label{color:#111827 !important}
body.pdf-export-mode .muted,
body.pdf-export-mode .brand .sub,
body.pdf-export-mode .chartNote,
body.pdf-export-mode .pill,
body.pdf-export-mode .badge{color:#4b5563 !important}
body.pdf-export-mode .page{margin-top:0;padding:20px}
body.pdf-export-mode .footer{padding-top:14px;color:#6b7280 !important}
body.pdf-export-mode .table th,.table td{background:transparent !important}
body.pdf-export-mode .chart{background:#ffffff !important}
body.pdf-export-mode .page,
body.pdf-export-mode .card,
body.pdf-export-mode .qbox,
body.pdf-export-mode .table,
body.pdf-export-mode canvas,
body.pdf-export-mode img{break-inside:avoid-page;page-break-inside:avoid}
body.pdf-export-mode .page > .h2,
body.pdf-export-mode .page > .h1{break-after:avoid-page;page-break-after:avoid}


/* Intro popup */
.introOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at center, rgba(201,168,76,.10), rgba(6,10,18,.82) 42%, rgba(4,7,14,.95) 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:1;visibility:visible;transition:opacity .55s ease, visibility .55s ease}
.introOverlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.introPopup{width:min(560px,92vw);padding:36px 32px;border-radius:28px;border:1px solid var(--border-gold);background:linear-gradient(180deg, rgba(18,26,44,.96), rgba(10,15,28,.96));box-shadow:0 24px 80px rgba(0,0,0,.42),0 0 40px rgba(201,168,76,.10);text-align:center;position:relative;overflow:hidden}
.introPopup::before{content:"";position:absolute;inset:-35% auto auto -10%;width:200px;height:200px;border-radius:999px;background:radial-gradient(circle, rgba(201,168,76,.16), transparent 70%);pointer-events:none}
.introPopup::after{content:"";position:absolute;inset:auto -8% -45% auto;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle, rgba(255,255,255,.08), transparent 68%);pointer-events:none}
.introKicker{position:relative;z-index:1;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);opacity:.88}
.introTitle{position:relative;z-index:1;margin-top:12px;font-family:'Playfair Display',serif;font-size:clamp(32px,6vw,58px);font-weight:700;line-height:1.02;letter-spacing:.08em;color:#fff}
.introLine{position:relative;z-index:1;width:108px;height:2px;margin:18px auto 16px;background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.introText{position:relative;z-index:1;font-size:14px;line-height:1.7;color:var(--muted)}
html[lang="ar"] .introPopup{direction:rtl}
html[lang="ar"] .introKicker{letter-spacing:.10em}
html[lang="ar"] .introTitle{letter-spacing:.02em}
html[lang="ar"] .introText{font-family:'Tajawal','Cairo','Noto Naskh Arabic',system-ui,sans-serif}
@media (max-width:640px){.introPopup{padding:30px 22px;border-radius:24px}.introText{font-size:13px}}


/* 20260415 official radar refinements v4 */
.pageCenterTitle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-width:280px;padding-inline:14px}
.pageCenterTitle .radarWord{font-size:11px;letter-spacing:.42em;text-transform:uppercase;font-weight:800;color:var(--gold);opacity:.9}
.pageCenterTitle .centerWordmark{font-family:'Playfair Display',serif;font-size:clamp(18px,2.4vw,30px);line-height:1.08;font-weight:700;color:var(--text)}
.pageCenterTitle .centerWordmark .line2{display:block;font-size:clamp(13px,1.4vw,18px);margin-top:3px;font-family:'Inter','Tajawal',system-ui,sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[lang="ar"] .pageCenterTitle .centerWordmark .line2{font-family:'Inter','Tajawal',system-ui,sans-serif;letter-spacing:.08em}
.topbar{align-items:center}
.brand .title{font-size:28px;font-weight:800;letter-spacing:-.02em}
.brand .sub{font-size:12px;line-height:1.35;min-height:16px}
.introOverlay{padding:18px;background:rgba(246,247,249,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.introPoster{width:min(520px,88vw);display:flex;align-items:center;justify-content:center;animation:posterEnter .6s ease both}
.introPoster img{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;border-radius:24px;box-shadow:0 28px 80px rgba(15,23,42,.20)}
@keyframes posterEnter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:960px){.pageCenterTitle{order:3;width:100%;padding-top:8px}.topbar{justify-content:space-between}.actions{margin-inline-start:auto}}
@media (max-width:640px){.brand img{width:54px;height:54px}.brand .title{font-size:24px}.pageCenterTitle .radarWord{font-size:10px;letter-spacing:.3em}.pageCenterTitle .centerWordmark{font-size:19px}.pageCenterTitle .centerWordmark .line2{font-size:11px;letter-spacing:.08em}.introPoster{width:min(540px,92vw)}}


body[dir="rtl"], html[lang="ar"] body{font-family:'Tajawal','Inter',system-ui,sans-serif;}
html[lang="ar"] .btn, html[lang="ar"] .label, html[lang="ar"] .input, html[lang="ar"] .muted, html[lang="ar"] .sectionHint, html[lang="ar"] .sectionTitle, html[lang="ar"] .qtitle, html[lang="ar"] .option, html[lang="ar"] .notice, html[lang="ar"] .badge, html[lang="ar"] .pill{font-family:'Tajawal','Inter',system-ui,sans-serif;letter-spacing:0;}
.btnIcon{display:inline-flex;align-items:center;justify-content:center;width:1.1em;font-size:1.02em;line-height:1;flex:0 0 auto}
.btnLabel{display:inline-block}
.btn.btn-compass,.levelCard[data-tab="compass"]{border-color:rgba(99,102,241,.32);background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(15,23,42,.02));box-shadow:0 10px 24px rgba(79,70,229,.12)}
.btn.btn-compass:hover,.levelCard[data-tab="compass"].on{border-color:rgba(79,70,229,.54);box-shadow:0 14px 30px rgba(79,70,229,.18)}
.levelCard[data-tab="compass"] .levelName::before{content:"🧭 ";}
.introOverlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(241,245,249,.92);backdrop-filter:blur(8px);z-index:120;transition:opacity .68s ease, visibility .68s ease}
.introOverlay.hidden{opacity:0;visibility:hidden}
.introOverlay.closing{background:rgba(241,245,249,.36)}
.introPoster{width:min(520px,88vw);max-height:84vh;border-radius:34px;box-shadow:0 30px 80px rgba(15,23,42,.22);background:#fff;padding:16px;transition:transform .82s cubic-bezier(.2,.8,.2,1),opacity .82s ease,box-shadow .82s ease;border:1px solid rgba(148,163,184,.22);transform-origin:center center}
.introPoster img{display:block;width:100%;height:auto;border-radius:24px}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.28));opacity:.12;box-shadow:none}
@media (max-width:900px){.brandPosterWrap{width:146px}.pageCenterTitle{display:none}.topbar{padding:14px 16px}}
@media (max-width:640px){.topbar{gap:10px}.brandPosterWrap{width:118px;max-width:48vw}.actions{gap:6px}.btn{padding:9px 12px;font-size:12.5px}}


/* 20260415 official4 refinements */
.brand{gap:12px;min-width:auto}
.brandPosterWrap{width:142px;max-width:34vw;padding:0;border-radius:0;background:transparent;box-shadow:none;border:none}
.brandPoster{width:100%;filter:drop-shadow(0 8px 18px rgba(15,23,42,.10))}
.pageCenterTitle{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-width:320px;flex:1;padding-inline:18px}
.pageCenterTitle .radarWord{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:800;letter-spacing:.40em;text-transform:uppercase;color:#1e5031;line-height:1.1}
.pageCenterTitle .centerWordmark{font-family:'Playfair Display','Tajawal',serif;font-size:clamp(18px,2.2vw,30px);font-weight:700;line-height:1.08;color:#4d267e}
.pageCenterTitle .centerTagline{font-family:'Inter','Tajawal',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.03em;color:#64748b;line-height:1.35;margin-top:3px}
.topbar{gap:16px;align-items:center}
.actions{gap:10px;justify-content:flex-end}
.topbar .btn{border-radius:16px;min-height:42px}
.introOverlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(243,244,246,.96);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:120;transition:opacity .85s ease, visibility .85s ease}
.introOverlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.introOverlay.closing{background:rgba(243,244,246,.30)}
.introPoster{width:min(460px,86vw);max-height:92vh;padding:0 !important;border:none !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;transition:transform 1.15s cubic-bezier(.2,.86,.2,1),opacity 1.15s ease;transform-origin:center center}
.introPoster img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;border-radius:0 !important;box-shadow:0 28px 80px rgba(15,23,42,.16)}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.22));opacity:.06}
@media (max-width:900px){
  .topbar{flex-wrap:wrap;justify-content:center;text-align:center}
  .brand{order:1;justify-content:center;width:100%}
  .pageCenterTitle{order:2;width:100%;min-width:0;padding-top:4px}
  .actions{order:3;width:100%;justify-content:center}
  .brandPosterWrap{width:124px;max-width:54vw}
}
@media (max-width:640px){
  .pageCenterTitle .radarWord{font-size:10px;letter-spacing:.28em}
  .pageCenterTitle .centerWordmark{font-size:21px}
  .pageCenterTitle .centerTagline{font-size:10px}
  .introPoster{width:min(430px,92vw)}
}
.levelCard[data-tab="compass"]{background:linear-gradient(135deg,rgba(79,70,229,.11),rgba(59,130,246,.08));border-color:rgba(79,70,229,.28);position:relative;overflow:hidden}
.levelCard[data-tab="compass"]::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(99,102,241,.10),transparent);pointer-events:none}
.levelCard[data-tab="compass"] .levelName{font-weight:800;color:#4338ca}
.btnIcon{font-size:1rem}
.btn.btn-compass{background:linear-gradient(135deg,#eef2ff,#f8fafc);border-color:rgba(79,70,229,.30);color:#312e81;font-weight:700}
html[lang="ar"] .pageCenterTitle .centerWordmark{font-family:'Tajawal','Playfair Display',serif;font-size:clamp(18px,2.2vw,29px)}
html[lang="ar"] .pageCenterTitle .centerTagline{font-family:'Tajawal','Inter',system-ui,sans-serif}


/* 20260415 official radar final v5 */
.brandPosterWrap{width:122px;max-width:30vw;padding:0;border-radius:0}
.brandPoster{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(15,23,42,.14))}
.topbar{padding:18px 22px;border-radius:24px;background:rgba(255,255,255,.94)}
.pageCenterTitle{gap:2px;min-width:320px}
.pageCenterTitle .radarWord{font-size:12px;letter-spacing:.42em;color:#143d2a;font-weight:800}
.pageCenterTitle .centerWordmark{font-family:'Playfair Display','Tajawal',serif;font-size:clamp(19px,2.35vw,31px);font-weight:700;color:#4c207f;line-height:1.06}
.pageCenterTitle .centerTagline{font-size:12.5px;color:#6b7280;font-style:italic;letter-spacing:.01em}
.actions{gap:10px}
.btn{border-radius:15px;padding:10px 16px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.btn:hover{background:#f8fafc}
.introOverlay{padding:16px;background:rgba(243,244,246,.92)}
.introPoster{width:min(470px,90vw);max-height:92vh;padding:0 !important;border:none !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;transition:transform 1s cubic-bezier(.2,.86,.2,1),opacity 1s ease;transform-origin:center center}
.introPoster img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;border-radius:0 !important;box-shadow:0 20px 60px rgba(15,23,42,.12)}
.introOverlay.closing{background:rgba(243,244,246,.20)}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.26));opacity:.02}
#profileCard{background:rgba(255,255,255,.96)}
.sectionTitle{font-size:17px}
.testCard{background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 8px 24px rgba(15,23,42,.05)}
.testCard:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(15,23,42,.08)}
.levelCard{background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 8px 22px rgba(15,23,42,.04)}
.levelCard.on{border-color:rgba(76,32,127,.24);box-shadow:0 14px 30px rgba(76,32,127,.08)}
.levelCard[data-tab="compass"]{background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(255,255,255,.98));border-color:rgba(79,70,229,.22)}
.levelCard[data-tab="compass"] .levelName{color:#4338ca}
@media (max-width:960px){
  .topbar{gap:12px;padding:16px 16px}
  .brandPosterWrap{width:96px;max-width:35vw}
  .pageCenterTitle{min-width:0;width:100%}
}
@media (max-width:640px){
  .pageCenterTitle .radarWord{font-size:10px;letter-spacing:.28em}
  .pageCenterTitle .centerWordmark{font-size:20px}
  .pageCenterTitle .centerTagline{font-size:11px}
  .brandPosterWrap{width:88px;max-width:40vw}
  .btn{padding:9px 13px}
}


/* 20260415 official6 poster + icon refinements */
.adminTab.on,.adminTab.active,.adminTab:hover{border-color:var(--border-gold);background:var(--gold-soft);color:var(--gold)}
.adminTab{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.adminTab .btnIcon{font-size:1em}
.brandPosterWrap{width:92px;max-width:20vw;display:flex;align-items:center;justify-content:center}
.brandPoster{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(15,23,42,.12))}
.topbar{min-height:104px}
.pageCenterTitle{gap:3px}
.pageCenterTitle .radarWord{font-size:12px;letter-spacing:.42em;color:#1f5133}
.pageCenterTitle .centerWordmark{font-size:clamp(19px,2.1vw,31px);color:#4d267e}
.pageCenterTitle .centerTagline{font-size:11.5px;color:#5b6473}
.introOverlay{background:rgba(243,244,246,.97);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.introPoster{width:min(680px,94vw);max-height:96vh}
.introPoster img{width:100%;max-height:96vh;object-fit:contain;image-rendering:auto;box-shadow:0 32px 90px rgba(15,23,42,.18)}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.16));opacity:.02}
@media (max-width:900px){
  .topbar{min-height:auto}
  .brandPosterWrap{width:84px;max-width:24vw}
  .pageCenterTitle{display:flex;width:100%;order:2}
  .pageCenterTitle .centerWordmark{font-size:22px}
  .pageCenterTitle .centerTagline{font-size:11px}
}
@media (max-width:640px){
  .brandPosterWrap{width:76px;max-width:28vw}
  .pageCenterTitle .radarWord{font-size:10px;letter-spacing:.3em}
  .pageCenterTitle .centerWordmark{font-size:20px}
  .pageCenterTitle .centerTagline{font-size:10px;line-height:1.3}
  .introPoster{width:min(760px,96vw)}
}

/* 20260415 official7 poster image + motion refinements */
.brandPosterWrap{width:108px;max-width:24vw;border-radius:16px;overflow:hidden;background:transparent}
.brandPoster{width:100%;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 12px 24px rgba(15,23,42,.12))}
.pageCenterTitle{align-items:center;justify-content:center;text-align:center}
.pageCenterTitle .radarWord{font-size:12px;letter-spacing:.42em;color:#153f2b;font-weight:900;line-height:1.1}
.pageCenterTitle .centerWordmark{font-size:clamp(19px,2.2vw,32px);font-weight:800;color:#4d267e;line-height:1.05}
.pageCenterTitle .centerTagline{font-size:11.5px;line-height:1.35;color:#5b6473;font-style:italic}
.introOverlay{background:rgba(243,244,246,.985);transition:opacity .9s ease, background-color .9s ease}
.introPoster{width:min(980px,94vw);max-width:94vw;max-height:94vh;display:flex;align-items:center;justify-content:center;transform-origin:center center;transition:transform .9s cubic-bezier(.22,.9,.2,1),opacity .9s ease,filter .9s ease}
.introPoster img{width:100%;height:auto;max-width:100%;max-height:94vh;object-fit:contain;display:block;box-shadow:none;border-radius:0;background:transparent}
.introOverlay.closing{background:rgba(243,244,246,0);opacity:1}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.18));opacity:0;filter:blur(1px)}
.adminTab .btnIcon,.btn .btnIcon{display:inline-flex;align-items:center;justify-content:center;margin-inline-end:6px}
@media (max-width:900px){
  .brandPosterWrap{width:96px;max-width:30vw}
  .pageCenterTitle .centerWordmark{font-size:22px}
  .pageCenterTitle .centerTagline{font-size:10.5px}
}
@media (max-width:640px){
  .topbar{gap:10px}
  .brandPosterWrap{width:84px;max-width:32vw}
  .pageCenterTitle .radarWord{font-size:10px;letter-spacing:.3em}
  .pageCenterTitle .centerWordmark{font-size:18px}
  .pageCenterTitle .centerTagline{font-size:9.5px}
  .introPoster{width:min(1120px,96vw);max-height:92vh}
  .introPoster img{max-height:92vh}
}


/* 20260415 official8 opening image + icon polish */
.brandPosterWrap{width:72px;max-width:20vw;display:flex;align-items:center;justify-content:center;overflow:visible;background:transparent;border:none;box-shadow:none}
.brandPoster{width:auto;height:82px;max-width:none;object-fit:contain;display:block;filter:drop-shadow(0 10px 18px rgba(15,23,42,.10))}
.pageCenterTitle{display:flex !important;gap:1px;min-width:0;flex:1;padding-inline:8px}
.pageCenterTitle .radarWord{font-size:13px;letter-spacing:.32em;color:#184630;font-weight:900;line-height:1}
.pageCenterTitle .centerWordmark{font-family:'Playfair Display','Tajawal',serif;font-size:clamp(18px,2vw,30px);color:#4e2780;font-weight:800;line-height:1.06}
.pageCenterTitle .centerTagline{font-size:11px;line-height:1.3;color:#616b79;font-style:italic}
.introOverlay{padding:0 !important;background:rgba(243,244,246,.985) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.introPoster{width:100vw !important;max-width:100vw !important;height:100vh !important;max-height:100vh !important;padding:0 !important;border:none !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;display:flex;align-items:center;justify-content:center;transform-origin:center center;transition:transform 1.1s cubic-bezier(.2,.82,.2,1),opacity 1.1s ease}
.introPoster img{width:auto !important;height:min(92vh,1600px) !important;max-width:96vw !important;max-height:92vh !important;object-fit:contain !important;display:block;border-radius:0 !important;box-shadow:none !important;background:transparent !important}
.introOverlay.closing{background:rgba(243,244,246,0) !important}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.14));opacity:0}
.btnIcon{width:1.15rem;height:1.15rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.btnIcon svg{width:1.05rem;height:1.05rem;display:block;stroke:currentColor}
.adminTab .btnIcon,.btn .btnIcon{margin-inline-end:8px}
#adminTabs .adminTab{min-width:120px;font-weight:700}
#adminTabs .adminTab .btnLabel{display:inline-block}
.levelCard[data-tab="compass"]{background:linear-gradient(135deg,#eef2ff,#ffffff);border:1px solid rgba(79,70,229,.30);box-shadow:0 10px 24px rgba(79,70,229,.08)}
.levelCard[data-tab="compass"] .levelName{color:#3730a3;font-weight:800}
@media (max-width:900px){
  .brandPoster{height:72px}
}
@media (max-width:640px){
  .topbar{padding:14px 14px}
  .brandPosterWrap{width:62px;max-width:24vw}
  .brandPoster{height:70px}
  .pageCenterTitle{padding-inline:4px}
  .pageCenterTitle .radarWord{font-size:10px;letter-spacing:.24em}
  .pageCenterTitle .centerWordmark{font-size:15px;line-height:1.06}
  .pageCenterTitle .centerTagline{font-size:8.8px;line-height:1.2}
  .introPoster img{height:min(88vh,1600px) !important;max-width:100vw !important}
}


/* 20260415 official9 final splash + header */
.introOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:0 !important;background:rgba(243,244,246,.995) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;overflow:hidden}
.introPoster{width:100vw !important;height:100vh !important;max-width:100vw !important;max-height:100vh !important;display:flex;align-items:center;justify-content:center;padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;transition:transform .95s cubic-bezier(.2,.82,.2,1),opacity .95s ease !important;transform-origin:center center;will-change:transform,opacity}
.introPoster img{display:block;width:auto !important;height:min(96vh,1500px) !important;max-width:96vw !important;max-height:96vh !important;object-fit:contain !important;object-position:center center !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important}
.introOverlay.closing{background:rgba(243,244,246,0) !important}
.introOverlay.closing .introPoster{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.18));opacity:0}
.brandPosterWrap{width:104px !important;max-width:24vw !important;display:flex;align-items:center;justify-content:center;overflow:visible;background:transparent;border:none;box-shadow:none}
.brandPoster{width:auto !important;height:82px !important;max-width:none !important;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(15,23,42,.08))}
.pageCenterTitle{display:flex !important;flex:1;min-width:0;align-items:center;justify-content:center;text-align:center;padding-inline:10px;gap:2px}
.pageCenterTitle .radarWord{font-size:12px;letter-spacing:.34em;color:#16482f;font-weight:900;line-height:1.05}
.pageCenterTitle .centerWordmark{font-family:'Playfair Display','Tajawal',serif;font-size:clamp(18px,2.15vw,30px);line-height:1.05;color:#4e2780;font-weight:800}
.pageCenterTitle .centerTagline{font-size:11px;line-height:1.25;color:#646d79;font-style:italic}
#adminTabs .adminTab,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#adminTabs .adminTab .btnIcon,.btn .btnIcon{display:inline-flex !important;align-items:center;justify-content:center;margin-inline-end:0 !important;width:1.1rem;height:1.1rem;flex:0 0 auto}
#adminTabs .adminTab .btnLabel,.btn .btnLabel{display:inline-block}
@media (max-width:900px){.brandPosterWrap{width:92px !important;max-width:30vw !important}.brandPoster{height:74px !important}.pageCenterTitle .centerWordmark{font-size:21px}.pageCenterTitle .centerTagline{font-size:10px}}
@media (max-width:640px){.topbar{padding:14px 14px}.brandPosterWrap{width:82px !important;max-width:28vw !important}.brandPoster{height:68px !important}.pageCenterTitle{padding-inline:6px}.pageCenterTitle .radarWord{font-size:10px;letter-spacing:.24em}.pageCenterTitle .centerWordmark{font-size:15px}.pageCenterTitle .centerTagline{font-size:8.7px}.introPoster img{height:min(94vh,1500px) !important;max-width:98vw !important}}


/* === FINAL RADAR OPENING OVERRIDE 20260415official10 === */
.introOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  background:rgba(243,244,246,.995) !important;
  overflow:hidden !important;
  transition:opacity 1.1s ease, background-color 1.1s ease !important;
}
.introOverlay.hidden{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}
.introOverlay.closing{background:rgba(243,244,246,0) !important;}
.introPoster{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  transform-origin:center center !important;
  transition:transform 1.1s cubic-bezier(.22,.84,.2,1), opacity 1.1s ease !important;
}
.introPoster img{
  width:auto !important;
  height:min(100vh, 1655px) !important;
  max-width:100vw !important;
  max-height:100vh !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.introOverlay.closing .introPoster{
  transform:translate(var(--intro-tx,0), var(--intro-ty,0)) scale(var(--intro-scale,.12)) !important;
  opacity:0 !important;
}
.topbar{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:14px !important;
  min-height:96px !important;
}
.brandPosterWrap{
  width:78px !important;
  max-width:18vw !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.brandPoster{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
  filter:none !important;
}
.pageCenterTitle{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:2px !important;
  min-width:0 !important;
  padding-inline:10px !important;
}
.pageCenterTitle .radarWord{
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:.34em !important;
  color:#18492f !important;
  font-weight:900 !important;
}
.pageCenterTitle .centerWordmark{
  font-family:'Playfair Display','Tajawal',serif !important;
  font-size:clamp(18px,2.15vw,30px) !important;
  line-height:1.05 !important;
  color:#4d267e !important;
  font-weight:800 !important;
}
.pageCenterTitle .centerTagline{
  font-size:11px !important;
  line-height:1.25 !important;
  color:#616b79 !important;
  font-style:italic !important;
}
@media (max-width:900px){
  .topbar{grid-template-columns:auto 1fr auto !important; min-height:88px !important;}
  .brandPosterWrap{width:70px !important;max-width:22vw !important;}
  .pageCenterTitle .centerWordmark{font-size:21px !important;}
  .pageCenterTitle .centerTagline{font-size:10px !important;}
}
@media (max-width:640px){
  .topbar{padding:14px 12px !important;gap:10px !important;min-height:82px !important;}
  .brandPosterWrap{width:60px !important;max-width:22vw !important;}
  .pageCenterTitle{padding-inline:4px !important;}
  .pageCenterTitle .radarWord{font-size:9px !important;letter-spacing:.24em !important;}
  .pageCenterTitle .centerWordmark{font-size:15px !important;}
  .pageCenterTitle .centerTagline{font-size:8.5px !important;line-height:1.2 !important;}
  .introPoster img{height:min(100vh, 1655px) !important;max-width:100vw !important;}
}


/* === FINAL COMPASS + INTRO OVERRIDE 20260418official17 === */
[data-theme="dark"]{--bg:#0a1324;--surface:#0f1a2e;--card:#13213a;--card-hover:#182845;--glass:rgba(10,19,36,.94);--text:#f4f8ff;--muted:#bfd0e8;--border:rgba(191,208,232,.16);--border-gold:rgba(96,165,250,.24);--gold:#7cb6ff;--gold-soft:rgba(124,182,255,.10);--shadow:0 16px 36px rgba(2,6,23,.38);--shadow-lg:0 26px 58px rgba(2,6,23,.46);--shadow-gold:0 14px 34px rgba(124,182,255,.12)}
.introOverlay{background:#f3f4f6 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;opacity:1 !important;visibility:visible !important;}
.introPoster{width:100vw !important;height:100vh !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;margin:0 !important;background:transparent !important;box-shadow:none !important;border:none !important;}
.introPoster img{display:block !important;width:auto !important;height:min(100vh,1600px) !important;max-width:100vw !important;max-height:100vh !important;object-fit:contain !important;margin:0 auto !important;transform-origin:center center !important;transition:transform .9s cubic-bezier(.22,.84,.2,1),opacity .9s ease !important;}
.introOverlay.closing .introPoster{transform:none !important;opacity:1 !important;}
.introOverlay.closing .introPoster img{transform:translate(var(--intro-tx,0),var(--intro-ty,0)) scale(var(--intro-scale,.18)) !important;opacity:0 !important;}
.brandPosterWrap{width:108px !important;max-width:24vw !important;padding:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;}
.brandPoster{display:block !important;width:100% !important;height:auto !important;object-fit:contain !important;filter:none !important;}
.pageCenterTitle{display:flex !important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-width:0;flex:1;padding-inline:10px;}
.pageCenterTitle .radarWord{font-size:12px !important;letter-spacing:.32em !important;color:#16482f !important;font-weight:900 !important;line-height:1.05 !important;}
.pageCenterTitle .centerWordmark{font-family:"Playfair Display","Tajawal",serif !important;font-size:clamp(18px,2vw,30px) !important;color:#4d267e !important;font-weight:800 !important;line-height:1.04 !important;}
.pageCenterTitle .centerTagline{font-size:11px !important;color:#5f6775 !important;font-style:italic !important;line-height:1.25 !important;}
.adminTab .btnIcon,.btn .btnIcon{display:inline-flex !important;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;margin-inline-end:8px !important;opacity:1 !important;}
.btn .btnLabel,.adminTab .btnLabel{display:inline-flex !important;}
.levelCard[data-group="compass"], .testCard[data-group="compass"]{border-color:rgba(14,165,233,.24);}
@media (max-width:900px){.topbar{grid-template-columns:auto 1fr auto !important;gap:10px !important}.brandPosterWrap{width:70px !important}.pageCenterTitle .centerWordmark{font-size:21px !important}.pageCenterTitle .centerTagline{font-size:10px !important}}
@media (max-width:640px){.brandPosterWrap{width:82px !important;max-width:28vw !important}.pageCenterTitle{padding-inline:4px !important}.pageCenterTitle .radarWord{font-size:9px !important;letter-spacing:.24em !important}.pageCenterTitle .centerWordmark{font-size:15px !important}.pageCenterTitle .centerTagline{font-size:8.5px !important}.introPoster img{height:min(100vh,1600px) !important;max-width:100vw !important}}

/* === COMPASS rebuild 20260418official17 === */
.compassLayout{display:grid;gap:14px}
.compassSummary{padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(37,99,235,.08),rgba(37,99,235,.03));line-height:1.8;color:var(--text)}
.compassRankRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.03)}
.compassRankText{display:flex;align-items:flex-start;gap:12px;line-height:1.8;color:var(--text)}
.compassRankCode,.compassPairCode{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:999px;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.22);font-weight:800;color:var(--accent)}
.compassChoiceGroup{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.compassChip{min-width:48px;height:42px;padding:0 14px;border-radius:14px;border:1px solid var(--border);background:#fff;color:#0f172a;font-weight:800;box-shadow:0 2px 8px rgba(15,23,42,.05);transition:all .18s ease}
.compassChip:hover{border-color:rgba(37,99,235,.45);transform:translateY(-1px)}
.compassChip.active{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:transparent;color:#fff;box-shadow:0 10px 18px rgba(37,99,235,.28)}
.compassPairOptions{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.compassPairOption{width:100%;padding:18px;border:1px solid var(--border);border-radius:18px;background:#fff;color:#0f172a;display:flex;align-items:center;gap:14px;text-align:start;transition:all .18s ease;box-shadow:0 2px 10px rgba(15,23,42,.05)}
.compassPairOption:hover{border-color:rgba(37,99,235,.4);transform:translateY(-1px)}
.compassPairOption.active{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:rgba(37,99,235,.45);box-shadow:0 12px 24px rgba(37,99,235,.14)}
.compassPairText{font-size:15px;font-weight:700;line-height:1.8;color:inherit}
[data-theme="dark"] .compassSummary{background:linear-gradient(180deg,rgba(30,64,175,.24),rgba(30,64,175,.08));border-color:rgba(148,163,184,.24)}
[data-theme="dark"] .compassRankRow{background:rgba(9,19,38,.88);border-color:rgba(148,163,184,.18)}
[data-theme="dark"] .compassChip{background:#10213e;color:#f8fbff;border-color:rgba(148,163,184,.24);box-shadow:none}
[data-theme="dark"] .compassChip.active{background:linear-gradient(135deg,#60a5fa,#2563eb);color:#fff;border-color:transparent;box-shadow:0 10px 18px rgba(37,99,235,.34)}
[data-theme="dark"] .compassPairOption{background:#10213e;color:#f8fbff;border-color:rgba(148,163,184,.22);box-shadow:none}
[data-theme="dark"] .compassPairOption.active{background:linear-gradient(135deg,rgba(30,64,175,.48),rgba(15,23,42,.92));border-color:rgba(96,165,250,.42)}
[data-theme="dark"] .btn{background:#0f1d36;color:#f4f8ff;border-color:rgba(148,163,184,.22)}
[data-theme="dark"] .btn:hover{background:#132746;color:#fff}
[data-theme="dark"] .page,[data-theme="dark"] .card,[data-theme="dark"] .topbar{background:rgba(10,19,36,.95)}
[data-theme="dark"] .qbox{background:rgba(8,16,30,.88)}
[data-theme="dark"] .option{background:rgba(10,19,36,.90);border-color:rgba(148,163,184,.18)}
[data-theme="dark"] .input{background:#0f1d36;border-color:rgba(148,163,184,.22);color:#f8fbff}
@media (max-width:900px){.compassRankRow{grid-template-columns:1fr}.compassChoiceGroup{justify-content:flex-start}}
@media (max-width:640px){.compassPairOptions{grid-template-columns:1fr}.compassRankText{align-items:flex-start}.compassChoiceGroup{gap:6px}.compassChip{min-width:44px;height:40px;padding:0 12px}.compassPairOption{padding:15px}.compassPairText{font-size:14px}}

/* 2026-04-18 focused readability + Compass overrides */
[data-theme="dark"] .pageCenterTitle .radarWord{color:#8fd0a7 !important}
[data-theme="dark"] .pageCenterTitle .centerWordmark{color:#f5f7ff !important;text-shadow:0 1px 0 rgba(0,0,0,.15)}
[data-theme="dark"] .pageCenterTitle .centerTagline{color:#c7d2e6 !important}
[data-theme="dark"] .topbar,
[data-theme="dark"] .card,
[data-theme="dark"] .qbox,
[data-theme="dark"] .testShell,
[data-theme="dark"] .section,
[data-theme="dark"] .sectionCard{background:#0b1730 !important;border-color:rgba(148,163,184,.18) !important}
[data-theme="dark"] .btn{background:#112443 !important;color:#f8fbff !important;border-color:rgba(148,163,184,.26) !important}
[data-theme="dark"] .btn .btn-label,[data-theme="dark"] .btn .btn-icon{color:inherit !important;opacity:1 !important}
[data-theme="dark"] .muted,[data-theme="dark"] .sectionHint,[data-theme="dark"] .note,[data-theme="dark"] .label{color:#c9d4e8 !important}
[data-theme="dark"] .levelCard,[data-theme="dark"] .testCard{background:#0f2140 !important;color:#f7fbff !important;border-color:rgba(148,163,184,.2) !important}
[data-theme="dark"] .levelCard .levelName,[data-theme="dark"] .testCard .title,[data-theme="dark"] .testCard .h3{color:#f7fbff !important}
[data-theme="dark"] .levelCard .levelMeta,[data-theme="dark"] .testCard .meta,[data-theme="dark"] .levelCard .muted,[data-theme="dark"] .testCard .muted{color:#c8d4ea !important}
[data-theme="dark"] .input{background:#10213e !important;color:#f8fbff !important;border-color:rgba(148,163,184,.28) !important}
[data-theme="dark"] .option{background:#10213e !important;color:#f8fbff !important;border-color:rgba(148,163,184,.22) !important}
[data-theme="dark"] .option b,[data-theme="dark"] .option div{color:inherit !important}
[data-theme="dark"] .compassSummary{background:linear-gradient(180deg,rgba(37,99,235,.22),rgba(15,23,42,.72)) !important;color:#eaf2ff !important}
[data-theme="dark"] .compassRankRow{background:#10213e !important;border-color:rgba(148,163,184,.22) !important}
[data-theme="dark"] .compassRankText{color:#f8fbff !important}
[data-theme="dark"] .compassRankCode,[data-theme="dark"] .compassPairCode{background:#17345f !important;color:#f8fbff !important;border-color:rgba(148,163,184,.26) !important}
[data-theme="dark"] .compassChip{background:#17345f !important;color:#f8fbff !important;border-color:rgba(148,163,184,.22) !important;min-width:44px !important}
[data-theme="dark"] .compassChip.active{background:linear-gradient(135deg,#60a5fa,#2563eb) !important;color:#fff !important}
[data-theme="dark"] .compassPairOption{background:#10213e !important;color:#f8fbff !important;border-color:rgba(148,163,184,.22) !important}
[data-theme="dark"] .compassPairOption.active{background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(15,23,42,.92)) !important;color:#fff !important}
html[lang="ar"] .compassRankText,html[lang="ar"] .compassPairText{font-family:'Tajawal','Inter',system-ui,sans-serif !important}
@media (max-width:700px){
  .compassRankRow{grid-template-columns:1fr !important;gap:10px !important}
  .compassChoiceGroup{justify-content:flex-start !important}
  .compassChip{min-width:40px !important;height:40px !important;padding:0 10px !important}
}


/* === readability + ranking refresh 20260418official17 === */
.rankGrid,.rankRow,.rankTxt{all:unset}
[data-theme="dark"] body{color:#f7fbff !important}
[data-theme="dark"] .sectionTitle,[data-theme="dark"] .h1,[data-theme="dark"] .h2,[data-theme="dark"] .qtitle,[data-theme="dark"] .testTitle,[data-theme="dark"] .levelName,[data-theme="dark"] .label,[data-theme="dark"] .chartCardTitle{color:#f7fbff !important}
[data-theme="dark"] .sectionHint,[data-theme="dark"] .muted,[data-theme="dark"] .testMeta,[data-theme="dark"] .levelSub,[data-theme="dark"] .notice,[data-theme="dark"] .chartNote,[data-theme="dark"] .footer{color:#d5e2f7 !important}
[data-theme="dark"] .levelCard,[data-theme="dark"] .testCard{background:#11284a !important;border-color:rgba(173,196,230,.22) !important}
[data-theme="dark"] .levelCard.on{background:linear-gradient(145deg,rgba(37,99,235,.18),rgba(15,118,110,.08)) !important;border-color:rgba(124,182,255,.38) !important}
[data-theme="dark"] .levelCount{background:rgba(124,182,255,.16) !important;color:#dcebff !important;border-color:rgba(124,182,255,.32) !important}
[data-theme="dark"] .qbox,[data-theme="dark"] .page,[data-theme="dark"] .card,[data-theme="dark"] .topbar{background:#0d1c34 !important}
[data-theme="dark"] .input,[data-theme="dark"] input[type="text"],[data-theme="dark"] input[type="password"],[data-theme="dark"] input[type="url"]{background:#132846 !important;color:#f8fbff !important;border-color:rgba(173,196,230,.28) !important}
[data-theme="dark"] .input::placeholder{color:#b8c7df !important}
[data-theme="dark"] .option{background:#122742 !important;color:#f8fbff !important;border-color:rgba(173,196,230,.24) !important}
[data-theme="dark"] .option:hover{background:#17345a !important;border-color:rgba(124,182,255,.38) !important}
[data-theme="dark"] .pageCenterTitle .centerWordmark{color:#f5f1ff !important}
[data-theme="dark"] .pageCenterTitle .centerTagline{color:#d6def0 !important}
[data-theme="dark"] .pageCenterTitle .radarWord{color:#8fe0ab !important}


/* 20260419 exactness + dark clarity */
[data-theme="dark"] .mlHead,[data-theme="dark"] .mlRow,[data-theme="dark"] .salesQ,[data-theme="dark"] .abText,[data-theme="dark"] .scaleLbl,[data-theme="dark"] .compassPairText,[data-theme="dark"] .compassSummary,[data-theme="dark"] .compassRankText,[data-theme="dark"] .table td,[data-theme="dark"] .table th,[data-theme="dark"] .qNum,[data-theme="dark"] #qNum,[data-theme="dark"] #timer,[data-theme="dark"] #testDesc,[data-theme="dark"] #testPurpose{color:#f7fbff !important;opacity:1 !important}
[data-theme="dark"] .mlHead,[data-theme="dark"] .mlRow{background:#122845 !important;border-color:rgba(220,232,255,.24) !important}
[data-theme="dark"] .table th{background:#143056 !important;color:#ffffff !important}
[data-theme="dark"] .table td{background:#10213b !important}
[data-theme="dark"] .salesQ{background:#10213b;border:1px solid rgba(220,232,255,.18);border-radius:16px;padding:14px}
[data-theme="dark"] .notice,[data-theme="dark"] #note{color:#e4edfb !important}
html[lang="ar"] body,html[lang="ar"] .input,html[lang="ar"] .btn,html[lang="ar"] .option,html[lang="ar"] .table,html[lang="ar"] .notice,html[lang="ar"] .muted{direction:rtl;text-align:right}
html[lang="ar"] .row{direction:rtl}