@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --green-950: #0a3d28;
  --green-900: #0f5132;
  --green-800: #17643f;
  --green-700: #21784d;
  --green-100: #e9f4ee;
  --green-50: #f5faf7;
  --ink: #173027;
  --muted: #64756d;
  --line: #d8e5de;
  --surface: #fff;
  --page: #f6f9f7;
  --soft: #f9fbfa;
  --warning-bg: #fff8e6;
  --warning-line: #f0d58a;
  --warning-ink: #725912;
  --shadow: 0 14px 42px rgba(15,81,50,.10);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  background: radial-gradient(circle at 14% 0%, rgba(58,139,94,.09), transparent 27rem), var(--page);
  color: var(--ink);
  line-height: 1.8;
}
body.locked { overflow: hidden; }
button,input { font: inherit; }
a { color: inherit; }
.page-shell { width: min(100% - 28px, 980px); margin: 0 auto; padding: 28px 0 56px; }
.hero { text-align: center; margin-bottom: 22px; }
.hero img {
  display: block; width: min(100%, 400px); height: auto; margin: 0 auto 18px;
  border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(15,81,50,.08);
}
h1 { margin: 0; color: var(--green-950); font-size: clamp(1.5rem,4.8vw,2.35rem); line-height: 1.35; font-weight: 700; text-wrap: balance; }
.subtitle { max-width: 760px; margin: 9px auto 0; color: var(--green-800); font-size: clamp(1rem,3vw,1.16rem); font-weight: 500; line-height: 1.75; text-wrap: balance; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.welcome-card { padding: clamp(20px,4.8vw,34px); margin-bottom: 24px; position: relative; overflow: hidden; }
.welcome-card::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; background:var(--green-700); }
.eyebrow { display:inline-flex; align-items:center; gap:7px; margin-bottom:6px; color:var(--green-800); font-size:.9rem; font-weight:700; }
.welcome-card h2,.schedule-head h2,.section-title { margin:0; color:var(--green-950); font-size:clamp(1.3rem,4vw,1.75rem); line-height:1.45; }
.welcome-copy { margin-top:16px; display:grid; gap:12px; }
.welcome-copy p { margin:0; color:#31483f; font-size:1rem; }
.schedule-section { margin-top:4px; }
.schedule-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:14px; padding:0 4px; }
.schedule-head p { margin:4px 0 0; color:var(--muted); font-size:.94rem; }
.count-badge { flex:0 0 auto; border:1px solid #cfe2d8; border-radius:999px; background:var(--green-100); color:var(--green-950); padding:7px 13px; font-size:.88rem; font-weight:700; white-space:nowrap; }
.sessions { display:grid; gap:16px; }
.session-card { padding:clamp(18px,4vw,26px); }
.session-card.is-live { border-color:#76aa8b; box-shadow:0 16px 44px rgba(15,81,50,.16); }
.session-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.session-number { color:var(--green-800); font-size:.86rem; font-weight:700; margin-bottom:4px; }
.session-title { margin:0; color:var(--green-950); font-size:clamp(1.08rem,3.3vw,1.28rem); line-height:1.55; }
.status-badge { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 10px; border-radius:999px; background:#edf3f0; color:#53665d; border:1px solid #dde7e2; font-size:.8rem; font-weight:700; white-space:nowrap; }
.status-badge.live { background:#e7f6ec; border-color:#b8dcc5; color:#0c6636; }
.status-badge.upcoming { background:#eef6f1; border-color:#d3e8db; color:var(--green-800); }
.session-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:17px 0; }
.meta-item { padding:10px 12px; border-radius:13px; background:var(--green-50); border:1px solid #e4eee9; }
.meta-label { display:block; color:var(--muted); font-size:.78rem; margin-bottom:2px; }
.meta-value { display:block; color:var(--ink); font-size:.95rem; font-weight:700; line-height:1.55; }
.join-actions,.download-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:45px; border-radius:12px; padding:9px 16px; text-decoration:none; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:var(--green-900); color:#fff; }
.btn-primary:hover { background:var(--green-950); }
.btn-secondary { background:#fff; color:var(--green-900); border-color:#bcd4c8; }
.direct-link-box { margin-top:12px; padding:12px 14px; border:1px solid #dbe8e1; border-radius:13px; background:#f9fbfa; }
.direct-link-box strong { display:block; color:var(--green-950); font-size:.9rem; margin-bottom:4px; }
.direct-link-box a,.visible-url { display:block; color:var(--green-800); direction:ltr; text-align:left; unicode-bidi:plaintext; overflow-wrap:anywhere; word-break:break-word; font-size:.84rem; line-height:1.55; }
.dynamic-links { margin-top:16px; display:grid; gap:9px; }
.dynamic-block { padding:13px 14px; border-radius:13px; border:1px dashed #cadbd2; background:#fbfdfc; }
.dynamic-block h4 { margin:0 0 4px; font-size:.95rem; color:var(--green-950); }
.dynamic-block p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.65; }
.dynamic-list { display:grid; gap:10px; margin-top:9px; }
.resource-item { padding:11px 12px; border:1px solid #dbe7e1; border-radius:11px; background:#fff; }
.resource-item .small-link { display:inline-flex; align-items:center; min-height:38px; padding:7px 11px; border-radius:10px; background:var(--green-50); border:1px solid #cfe0d7; color:var(--green-900); text-decoration:none; font-size:.88rem; font-weight:700; }
.resource-item .visible-url { margin-top:7px; }
.bottom-card { padding:clamp(18px,4vw,26px); margin-top:18px; }
.bottom-card h3 { margin:0 0 6px; color:var(--green-950); font-size:1.2rem; }
.bottom-card p { margin:0 0 13px; color:var(--muted); font-size:.93rem; }
.personality-entry { position:relative; overflow:hidden; background:linear-gradient(135deg,#fff,#f1f8f4); border-color:#cce0d5; }
.personality-entry::after { content:"MBTI"; position:absolute; inset-inline-end:18px; top:-11px; color:rgba(15,81,50,.055); font-size:4rem; font-weight:700; direction:ltr; pointer-events:none; }
.footer-note { text-align:center; color:var(--muted); font-size:.84rem; margin:22px 0 0; }

.gate { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px; background:rgba(6,40,25,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.gate[hidden] { display:none; }
.gate-panel { width:min(100%,410px); border-radius:20px; background:#fff; border:1px solid rgba(255,255,255,.5); box-shadow:0 24px 80px rgba(0,0,0,.25); padding:24px; text-align:right; }
.gate-badge { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--green-100); color:var(--green-950); font-size:1.35rem; margin-bottom:14px; user-select:none; }
.gate h2 { margin:0; color:var(--green-950); font-size:1.35rem; }
.gate p { margin:7px 0 15px; color:var(--muted); font-size:.94rem; }
.password-wrap input { width:100%; min-height:49px; border:1px solid #cbd9d2; border-radius:13px; background:#fff; color:var(--ink); padding:11px 13px; outline:none; direction:ltr; text-align:left; letter-spacing:.08em; }
.password-wrap input:focus { border-color:var(--green-800); box-shadow:0 0 0 4px rgba(23,100,63,.10); }
.gate-error { min-height:24px; margin:7px 0 0; color:#a42323; font-size:.9rem; font-weight:500; }
.gate .btn { width:100%; margin-top:7px; }

/* Personality test */
.test-intro { padding:clamp(20px,4.8vw,30px); margin-bottom:16px; }
.test-intro p { margin:8px 0 0; color:#42554d; }
.test-note { margin-top:14px; padding:12px 14px; border-radius:13px; background:var(--green-50); border:1px solid #d9e9e0; color:#365247; font-size:.92rem; }
.progress-wrap { position:sticky; top:8px; z-index:20; padding:12px 14px; margin-bottom:14px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 28px rgba(15,81,50,.08); backdrop-filter:blur(8px); }
.progress-line { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--green-950); font-size:.9rem; font-weight:700; }
.progress-track { height:8px; background:#e7eee9; border-radius:999px; margin-top:8px; overflow:hidden; }
.progress-bar { height:100%; width:0; background:var(--green-700); border-radius:inherit; transition:width .2s ease; }
.questions { display:grid; gap:14px; }
.question-card { padding:clamp(17px,4vw,23px); }
.question-card.missing { border-color:#d7a8a8; box-shadow:0 0 0 3px rgba(164,35,35,.07); }
.q-number { color:var(--green-700); font-size:.82rem; font-weight:700; margin-bottom:4px; }
.question-card h3 { margin:0 0 13px; color:var(--green-950); font-size:1.05rem; line-height:1.7; }
.options { display:grid; gap:9px; }
.option { display:flex; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid #d9e5df; border-radius:13px; background:#fff; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.option:hover { border-color:#aac8b8; background:#fbfdfc; }
.option:has(input:checked) { border-color:#6fa587; background:var(--green-50); box-shadow:0 0 0 2px rgba(33,120,77,.07); }
.option input { width:19px; height:19px; margin-top:4px; accent-color:var(--green-800); flex:0 0 auto; }
.option span { line-height:1.65; }
.test-actions { display:grid; gap:10px; margin-top:18px; }
.test-actions .btn { width:100%; }
.test-error { text-align:center; color:#a42323; font-weight:600; min-height:25px; }
.result-card { display:none; text-align:center; padding:clamp(26px,6vw,44px); margin-top:18px; }
.result-card.show { display:block; }
.result-card h2 { margin:0; color:var(--green-950); font-size:1.3rem; }
.result-code { margin:12px 0 6px; direction:ltr; font-family:Arial,sans-serif; font-size:clamp(4rem,18vw,7rem); line-height:1; letter-spacing:.12em; font-weight:800; color:var(--green-900); }
.result-note { margin:10px auto 0; color:var(--muted); max-width:600px; font-size:.9rem; }
.back-link { display:inline-flex; margin-bottom:14px; color:var(--green-900); font-weight:700; text-decoration:none; }

@media (max-width:720px) {
  .schedule-head { align-items:flex-start; }
  .session-meta { grid-template-columns:1fr; }
}
@media (max-width:500px) {
  .page-shell { width:min(100% - 20px,980px); padding-top:14px; }
  .hero img { border-radius:12px; margin-bottom:14px; }
  .card { border-radius:18px; }
  .schedule-head { display:grid; }
  .count-badge { justify-self:start; }
  .session-top { display:grid; gap:10px; }
  .status-badge { justify-self:start; }
  .join-actions,.download-actions { display:grid; }
  .btn { width:100%; }
  .progress-wrap { top:5px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}


/* Personality reports */
.result-report-link { margin-top:18px; }
.result-report-link[hidden] { display:none !important; }
.report-hero-code {
  direction:ltr;
  font-family:Arial,sans-serif;
  font-size:clamp(4.2rem,17vw,7.5rem);
  line-height:1;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--green-900);
  margin:10px 0 14px;
}
.report-intro { padding:clamp(22px,5vw,34px); margin-bottom:16px; }
.report-intro p { margin:10px 0 0; color:#3e534a; }
.report-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.report-section { padding:clamp(18px,4vw,26px); }
.report-section h2 { margin:0 0 10px; color:var(--green-950); font-size:1.15rem; line-height:1.55; }
.report-section p { margin:0; color:#3e534a; }
.report-section p + p { margin-top:9px; }
.report-section ul { margin:8px 0 0; padding:0 1.2rem 0 0; color:#3e534a; }
.report-section li + li { margin-top:6px; }
.report-wide { grid-column:1 / -1; }
.report-highlight { background:linear-gradient(135deg,#fff,#f1f8f4); border-color:#c9dfd3; }
.report-kicker { color:var(--green-800); font-size:.88rem; font-weight:700; margin-bottom:4px; }
.action-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.action-item { padding:13px; border-radius:13px; background:var(--green-50); border:1px solid #d8e8df; }
.action-item strong { display:block; color:var(--green-950); margin-bottom:4px; }
.report-summary { display:grid; gap:9px; margin-top:12px; }
.summary-line { padding:12px 14px; background:var(--green-50); border:1px solid #d9e8df; border-radius:12px; color:#31483f; font-weight:600; }
.report-nav { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.report-nav .btn { flex:1 1 220px; }
@media (max-width:720px) {
  .report-grid { grid-template-columns:1fr; }
  .report-wide { grid-column:auto; }
  .action-cards { grid-template-columns:1fr; }
}