/* NURAI — البوصلة | الهوية البصرية المشتركة */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;700&display=swap');

:root{
  --blue:#2447D6;          /* أزرق العلامة */
  --violet:#7C3AED;        /* بنفسجي العلامة */
  --ink:#1E2240;           /* نص أساسي */
  --muted:#6B7080;         /* نص ثانوي */
  --bg:#F5F6FB;            /* خلفية الصفحات */
  --card:#FFFFFF;
  --line:#E6E8F2;
  --ok:#0F8A5F; --warn:#B45309; --bad:#C2410C;
  --grad:linear-gradient(160deg,var(--blue) 0%,var(--violet) 100%);
  --radius:16px;
  --shadow:0 6px 24px rgba(36,71,214,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;
  color:var(--ink); line-height:1.7; min-height:100vh;
  background:
    radial-gradient(1100px 620px at 82% -8%,  #ECEEFF 0%, rgba(236,238,255,0) 60%),
    radial-gradient(900px 560px at -6% 108%,  #F1EAFF 0%, rgba(241,234,255,0) 55%),
    var(--bg);
  background-attachment:fixed;
}
/* ── طبقة الزخارف التعليمية (تروس، مصابيح، ذرّات، كوكبات…) ── */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url('bg-doodles-violet.svg') 0 0 / 520px 520px repeat;
  opacity:.5;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--violet); outline-offset:2px; border-radius:6px}

/* ── الشريط العلوي ── */
.topnav{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--line);
  padding:.7rem 1.4rem; position:sticky; top:0; z-index:20;
}
.brand{font-weight:700; font-size:1.25rem; letter-spacing:.5px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-user{display:flex; align-items:center; gap:.8rem; font-size:.9rem; color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:700}
.btn-link{background:none;border:none;color:var(--blue);cursor:pointer;font:inherit}

/* ── تخطيط صفحات الدخول (لوحة متدرجة + نموذج) ── */
.auth{display:grid; grid-template-columns:1fr 1.1fr; min-height:100vh}
.auth-side{
  background:var(--grad); color:#fff; padding:3rem 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-side::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('bg-doodles-white.svg') 0 0 / 460px 460px repeat;
  opacity:.5;
}
.auth-side>*{position:relative; z-index:1}
.auth-side h1{font-size:2rem; font-weight:700; line-height:1.4}
.auth-side p{opacity:.92; margin-top:.8rem; max-width:34ch}
.auth-stats{display:flex; gap:2rem; margin-top:2rem}
.auth-stats b{display:block; font-size:1.5rem}
.steps{list-style:none; margin-top:2.2rem; display:grid; gap:1rem}
.steps li{display:flex; align-items:center; gap:.7rem; opacity:.65}
.steps li.active{opacity:1; font-weight:700}
.steps .dot{width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  display:grid;place-items:center;font-size:.85rem;flex:none}
.steps li.done .dot{background:#fff;color:var(--blue)}
.auth-form{display:grid; place-items:center; padding:2.5rem 1.5rem}
.panel{width:min(440px,100%); background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:2rem}
.panel h2{font-size:1.4rem; margin-bottom:.3rem}
.panel .sub{color:var(--muted); font-size:.92rem; margin-bottom:1.4rem}

/* ── نماذج ── */
label{display:block; font-size:.82rem; font-weight:500; color:var(--muted); margin:.9rem 0 .3rem}
input,select,textarea{
  width:100%; padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:#FBFBFE; color:var(--ink);
}
textarea{min-height:140px; resize:vertical}
textarea.code{direction:ltr; text-align:left; font-family:ui-monospace,Consolas,monospace; font-size:.9rem; background:#101426; color:#E6EAFF; border:none}
input:focus,select:focus,textarea:focus{border-color:var(--violet); background:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--grad); color:#fff; border:none; cursor:pointer;
  padding:.75rem 1.4rem; border-radius:999px; font:inherit; font-weight:700;
  width:100%; margin-top:1.3rem; transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(124,58,237,.3)}
.btn:disabled{opacity:.55; cursor:wait; transform:none}
.btn.ghost{background:#fff; color:var(--blue); border:1.5px solid var(--line); font-weight:500}
.hint{font-size:.8rem; color:var(--muted); margin-top:.8rem; text-align:center}

/* ── خيارات المستوى (بطاقات راديو) ── */
.choice{display:grid; gap:.8rem; margin-top:1rem}
.choice label{display:flex; gap:.9rem; align-items:flex-start; margin:0; cursor:pointer;
  border:1.5px solid var(--line); border-radius:12px; padding:.9rem 1rem; color:var(--ink)}
.choice input{width:auto; margin-top:.35rem}
.choice b{display:block; font-size:.95rem}
.choice small{color:var(--muted)}
.choice label:has(input:checked){border-color:var(--violet); background:#F6F2FF}

/* ── الصفحات الداخلية ── */
.page{max-width:1080px; margin:0 auto; padding:1.6rem 1.2rem 3rem}
.hero{
  background:var(--grad); color:#fff; border-radius:20px; padding:2rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.2rem;
  box-shadow:0 14px 34px rgba(36,71,214,.25);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('bg-doodles-white.svg') 0 0 / 420px 420px repeat;
  opacity:.55;
}
.hero>*{position:relative; z-index:1}
.hero h2{font-size:1.5rem}
.hero p{opacity:.92; max-width:46ch}
.hero .btn{width:auto; background:#fff; color:var(--blue); margin-top:0}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.5px;
  background:rgba(255,255,255,.18); padding:.15rem .6rem; border-radius:999px; margin-bottom:.6rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; margin-top:1.4rem}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.4rem; display:flex; flex-direction:column; gap:.5rem}
.card h3{font-size:1.05rem}
.card p{color:var(--muted); font-size:.9rem; flex:1}
.card .go{font-weight:700; color:var(--blue)}
.card.disabled{opacity:.55}
.card .icon{width:42px;height:42px;border-radius:12px;background:#EEF0FB;display:grid;place-items:center;font-size:1.3rem}

/* ── بطاقة السيناريو (مهمة عملية) ── */
.scenario-card{
  margin-top:1.2rem; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.4rem; border:1px solid #E2D8FB;
  background:linear-gradient(160deg, rgba(36,71,214,.06) 0%, rgba(124,58,237,.10) 100%);
}
.scenario-card p{margin-top:.6rem; line-height:1.8}

/* ── شات المعلم ── */
.chat{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; height:calc(100vh - 220px); min-height:440px}
.chat-head{padding:.9rem 1.2rem; border-bottom:1px solid var(--line); display:flex; gap:.7rem; align-items:center}
.online{font-size:.78rem; color:var(--ok)}
.chat-body{flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.9rem}
.msg{max-width:78%; padding:.8rem 1rem; border-radius:14px; font-size:.95rem}
.msg.user{align-self:flex-start; background:var(--grad); color:#fff; border-bottom-right-radius:4px}
.msg.bot{align-self:flex-end; background:#F1F2FA; border-bottom-left-radius:4px}
.msg .socratic{display:block; margin-top:.7rem; padding-top:.7rem; border-top:1px dashed #C9CCE3; font-weight:500; color:var(--violet)}
.chat-input{display:flex; gap:.6rem; padding: .9rem 1.2rem; border-top:1px solid var(--line)}
.chat-input input{flex:1}
.chat-input .btn{width:auto; margin:0; padding:.7rem 1.2rem}

/* ── نتائج وتغذية راجعة ── */
.result{margin-top:1.2rem}
.badge{display:inline-block; padding:.2rem .7rem; border-radius:999px; font-size:.78rem; font-weight:700}
.badge.lens{background:#EDE9FE; color:var(--violet)}
.badge.weak{background:#FFF1E6; color:var(--bad)}
.badge.ok{background:#E7F6EF; color:var(--ok)}
.kv{font-size:.85rem; color:var(--muted)}
.list{display:grid; gap:.6rem; margin-top:.6rem}
.list .item{border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; background:#fff}
.item b{font-size:.95rem}
.item small{color:var(--muted)}

/* ── حلقة الجاهزية (بصمة البوصلة) ── */
.compass-wrap{display:grid; grid-template-columns:230px 1fr; gap:1.4rem; align-items:start}
.ring{width:200px;height:200px;border-radius:50%; display:grid;place-items:center; margin-inline:auto;
  background:conic-gradient(var(--violet) calc(var(--val,0)*1%), #E9EAF4 0)}
.ring>div{width:158px;height:158px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.ring b{font-size:2rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.ring span{font-size:.78rem; color:var(--muted); display:block}

/* ── حالات ── */
.spinner{width:22px;height:22px;border:3px solid #fff;border-top-color:transparent;border-radius:50%;
  animation:spin .8s linear infinite; display:none}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{border-radius:12px; padding:.9rem 1rem; font-size:.9rem; margin-top:1rem; display:none}
.alert.err{display:block; background:#FDECEC; color:#9F1C1C}
.alert.info{display:block; background:#EAF1FF; color:#1D3FA8}
.empty{color:var(--muted); text-align:center; padding:2rem 1rem; font-size:.92rem}

@media (max-width:840px){
  .auth{grid-template-columns:1fr}
  .auth-side{padding:2rem 1.4rem}
  .compass-wrap{grid-template-columns:1fr}
  .chat{height:auto}
  .chat-body{max-height:50vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ════════════════════════════════════════════════
   زرّ تبديل الوضع (شمس / قمر)
   ════════════════════════════════════════════════ */
.theme-toggle{
  position:fixed; inset-block-end:1.15rem; inset-inline-start:1.15rem; z-index:60;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--card); color:var(--violet);
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .18s, box-shadow .18s, background .25s, color .25s, border-color .25s;
}
.theme-toggle:hover{transform:translateY(-2px) rotate(-10deg); box-shadow:0 10px 26px rgba(124,58,237,.32)}
.theme-toggle:active{transform:translateY(0) scale(.95)}
.theme-toggle svg{display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}

/* ════════════════════════════════════════════════
   الوضع الليلي (Dark Mode)
   ════════════════════════════════════════════════ */
[data-theme="dark"]{
  --ink:#E7E9F7;
  --muted:#9CA2BC;
  --bg:#0D0F1E;
  --card:#171A2E;
  --line:#2A2E48;
  --shadow:0 8px 28px rgba(0,0,0,.45);
}
[data-theme="dark"] body{
  background:
    radial-gradient(1100px 620px at 82% -8%,  rgba(124,58,237,.16) 0%, rgba(124,58,237,0) 60%),
    radial-gradient(900px 560px at -6% 108%,  rgba(36,71,214,.16)  0%, rgba(36,71,214,0)  55%),
    var(--bg);
}
[data-theme="dark"] body::before{opacity:.22}

[data-theme="dark"] .theme-toggle{color:#FBBF24}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}

[data-theme="dark"] .topnav{background:#13162A; border-bottom-color:var(--line)}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea:not(.code){
  background:#11142A; border-color:var(--line); color:var(--ink);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:#6B7193}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:not(.code):focus{background:#171B33; border-color:var(--violet)}

[data-theme="dark"] .msg.bot{background:#232844; color:var(--ink)}
[data-theme="dark"] .msg .socratic{border-top-color:#3A3F63; color:#C9B6FF}

[data-theme="dark"] .card .icon{background:#232847}
[data-theme="dark"] .card .go{color:#9DB4FF}

[data-theme="dark"] .choice label{color:var(--ink)}
[data-theme="dark"] .choice label:has(input:checked){background:#241F44; border-color:var(--violet)}

[data-theme="dark"] .list .item{background:var(--card); border-color:var(--line)}
[data-theme="dark"] .item[style]{background:#241F44 !important; border-color:#3A2F66 !important}

[data-theme="dark"] .scenario-card{
  border-color:#3A2F66;
  background:linear-gradient(160deg, rgba(124,58,237,.16) 0%, rgba(36,71,214,.12) 100%);
}

[data-theme="dark"] .ring{background:conic-gradient(var(--violet) calc(var(--val,0)*1%), #2A2E48 0)}
[data-theme="dark"] .ring>div{background:var(--card)}

[data-theme="dark"] .badge.lens{background:rgba(124,58,237,.22); color:#C9B6FF}
[data-theme="dark"] .badge.weak{background:rgba(234,88,12,.20); color:#FDBA74}
[data-theme="dark"] .badge.ok{background:rgba(15,138,95,.24); color:#6EE7B7}

[data-theme="dark"] .alert.err{background:rgba(159,28,28,.20); color:#FCA5A5}
[data-theme="dark"] .alert.info{background:rgba(29,63,168,.24); color:#A9C2FF}

[data-theme="dark"] .btn.ghost{background:transparent; color:#C9B6FF; border-color:var(--line)}
[data-theme="dark"] a{color:#9DB4FF}
[data-theme="dark"] .btn-link{color:#9DB4FF}