/* VANT / غرفة القيادة الهادئة: واجهة استبيان RTL، Ink Black أساس وCyber Mint لإشارات القرار فقط. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root { --ink:#08080f; --ink-2:#10101d; --ink-3:#1c1c2b; --mint:#00e5b0; --mint-soft:rgba(0,229,176,.11); --purple:#7b5ef8; --white:#fff; --g1:#d8d8e4; --g2:#9292a6; --g3:#676779; --line:rgba(255,255,255,.11); }
* { box-sizing:border-box; }
body { margin:0; color:var(--white); background:var(--ink); font-family:"IBM Plex Sans Arabic",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.survey-page { min-height:100vh; padding-right:335px; overflow-x:hidden; background:radial-gradient(circle at 22% 23%,rgba(123,94,248,.11),transparent 32%),var(--ink); }
.survey-rail { position:fixed; inset:0 0 0 auto; z-index:3; display:flex; width:335px; flex-direction:column; padding:31px 29px 25px; overflow-y:auto; border-left:1px solid var(--line); background:#0d0d18; box-shadow:-18px 0 45px rgba(0,0,0,.3); }
.survey-rail::before { position:absolute; inset:0; content:""; opacity:.55; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,black,transparent 88%); }
.survey-rail>* { position:relative; z-index:1; }
.survey-brand { display:inline-flex; width:max-content; align-items:center; gap:10px; direction:ltr; color:var(--white); text-decoration:none; }
.survey-mark { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--ink-3); }
.survey-mark svg { width:22px; height:22px; }
.survey-brand strong { display:block; font-family:Inter,sans-serif; font-size:17px; font-weight:800; letter-spacing:.26em; line-height:1; }
.survey-brand small { display:block; margin-top:5px; color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:7px; letter-spacing:.18em; line-height:1; }
.protocol-label { display:block; color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em; }
.survey-rail>.protocol-label { margin-top:28px; }
.survey-rail h1 { margin:14px 0 13px; font-size:32px; font-weight:700; letter-spacing:-.045em; line-height:1.25; }
.survey-rail h1 em,.survey-success em,.results-main em { color:var(--mint); font-style:normal; }
.survey-rail>p { max-width:250px; margin:0; color:var(--g2); font-size:13px; line-height:1.9; }
.rail-time { display:flex; align-items:center; gap:10px; margin-top:23px; color:var(--g2); font-size:11px; line-height:1.65; }
.rail-time>span { color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:13px; }
.rail-time b { color:var(--g1); font-weight:500; }
.survey-sections { display:grid; gap:19px; margin:auto 0 30px; padding:48px 0 0; list-style:none; }
.survey-sections li { position:relative; display:flex; align-items:center; gap:12px; color:var(--g3); }
.survey-sections li:not(:last-child)::after { position:absolute; top:27px; right:12px; width:1px; height:20px; content:""; background:var(--line); }
.survey-sections li>span { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border:1px solid rgba(255,255,255,.17); border-radius:50%; font-family:"JetBrains Mono",monospace; font-size:9px; }
.survey-sections b { display:block; font-size:13px; font-weight:600; }.survey-sections small { display:block; margin-top:2px; font-size:10px; }
.survey-sections li.active { color:var(--white); }.survey-sections li.active>span { border-color:var(--mint); background:var(--mint); color:var(--ink); box-shadow:0 0 0 5px rgba(0,229,176,.08); }.survey-sections li.active small,.survey-sections li.done>span { color:var(--mint); }
.rail-privacy { padding-top:17px; border-top:1px solid var(--line); color:var(--g2); font-size:10px; line-height:1.7; }
.survey-main { position:relative; min-height:100vh; }.survey-main::before { position:fixed; inset:0 335px 0 0; content:""; pointer-events:none; opacity:.35; background:linear-gradient(130deg,#08080f,transparent 50%),repeating-linear-gradient(90deg,transparent 0,transparent 84px,rgba(255,255,255,.024) 85px); }
.survey-content,.survey-success { position:relative; width:min(770px,calc(100% - 104px)); margin:0 62px 0 auto; padding:65px 0 60px; }
.survey-topline { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.survey-topline p { margin:6px 0 0; color:var(--g2); font-size:13px; }.survey-topline p b { margin-right:12px; padding-right:12px; border-right:1px solid rgba(0,229,176,.45); color:var(--mint); font-size:11px; font-weight:500; }
.survey-count { display:flex; align-items:baseline; direction:ltr; color:var(--g3); font-family:"JetBrains Mono",monospace; font-size:12px; }.survey-count strong { color:var(--white); font-size:22px; }.survey-count i { width:16px; height:1px; margin:0 7px; background:var(--mint); }
.survey-progress { height:2px; margin-top:20px; overflow:hidden; background:var(--line); }.survey-progress span { display:block; height:100%; background:var(--mint); transition:width .24s cubic-bezier(.23,1,.32,1); }
.survey-question { position:relative; margin-top:63px; padding-right:29px; border-right:1px solid rgba(255,255,255,.17); animation:question-in .24s cubic-bezier(.23,1,.32,1); }.question-anchor { position:absolute; top:-4px; right:-4px; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px rgba(0,229,176,.08); }
.question-meta { display:flex; align-items:center; gap:10px; }.question-meta span { padding:5px 7px; border:1px solid rgba(0,229,176,.22); background:var(--mint-soft); color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.04em; }.question-meta small { color:var(--g3); font-size:11px; }
.survey-question h2 { max-width:730px; margin:15px 0 0; font-size:clamp(27px,3.1vw,42px); font-weight:600; letter-spacing:-.04em; line-height:1.35; }.survey-question>p { margin:11px 0 0; color:var(--g2); font-size:13px; line-height:1.85; }
.survey-options { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:9px; margin-top:30px; }.survey-options[hidden] { display:none; }.survey-option { display:flex; min-height:66px; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); background:rgba(22,22,36,.78); color:var(--g1); text-align:right; transition:transform .16s ease,border-color .16s ease,background .16s ease; }.survey-option:hover { border-color:rgba(0,229,176,.5); background:var(--ink-3); transform:translateY(-2px); }.survey-option:active { transform:scale(.98); }.survey-option.selected { border-color:var(--mint); background:var(--mint-soft); color:var(--white); }.survey-option small { color:var(--g3); font-family:"JetBrains Mono",monospace; font-size:9px; }.survey-option.selected small { color:var(--mint); }.survey-option span { flex:1; font-size:13px; font-weight:500; line-height:1.55; }.survey-option i { display:grid; width:20px; height:20px; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; color:var(--ink); font-style:normal; }.survey-option.selected i { border-color:var(--mint); background:var(--mint); }
.survey-text-wrap { margin-top:30px; }.survey-text-wrap[hidden] { display:none; }.survey-text-wrap input,.survey-text-wrap textarea { width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.22); background:rgba(22,22,36,.78); color:var(--white); font-family:inherit; font-size:16px; line-height:1.75; }.survey-text-wrap input { height:66px; padding:0 17px; }.survey-text-wrap textarea { min-height:160px; padding:16px 17px; resize:vertical; }.survey-text-wrap input:focus,.survey-text-wrap textarea:focus { border-color:var(--mint); outline:none; }.survey-error { margin-top:12px; color:#ffabab; font-size:12px; }.survey-error[hidden] { display:none; }.honeypot { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.survey-actions { display:flex; justify-content:space-between; margin:52px 0 0 29px; padding-top:20px; border-top:1px solid var(--line); }.survey-actions button,.survey-return,.results-login button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:9px; border:0; font-weight:600; text-decoration:none; transition:transform .16s ease,background .16s ease; }.survey-actions button:active,.survey-return:active,.results-login button:active { transform:scale(.98); }.survey-back { padding:0 2px; background:transparent; color:var(--g2); }.survey-back:disabled { cursor:not-allowed; opacity:.3; }.survey-next,.survey-return,.results-login button { min-width:135px; padding:0 18px; background:var(--mint); color:var(--ink); }.survey-next:hover,.survey-return:hover,.results-login button:hover { background:#58f0cc; transform:translateX(-2px); }
.survey-success { padding-top:18vh; }.survey-success h2 { margin:17px 0; font-size:clamp(38px,5vw,62px); font-weight:600; letter-spacing:-.06em; line-height:1.18; }.survey-success p { max-width:560px; color:var(--g2); font-size:15px; line-height:2; }.survey-return { margin-top:25px; }
.survey-mobile-header { display:none; }

.results-page { min-height:100vh; background:radial-gradient(circle at 88% 0,rgba(123,94,248,.17),transparent 30%),var(--ink); }.results-header { display:flex; align-items:center; justify-content:space-between; padding:23px clamp(20px,5vw,70px); border-bottom:1px solid var(--line); }.results-label { color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.08em; }.results-main { width:min(1100px,calc(100% - 40px)); margin:0 auto; padding:75px 0; }.results-login { width:min(470px,100%); margin:7vh auto; }.results-login h1,.results-heading h1 { margin:15px 0 13px; font-size:clamp(37px,4.6vw,58px); letter-spacing:-.06em; line-height:1.2; }.results-login>p,.results-heading>div>p { color:var(--g2); line-height:1.9; }.results-login form { display:grid; gap:9px; margin-top:31px; }.results-login label { color:var(--g1); font-size:12px; }.results-login input { height:54px; border:1px solid var(--line); background:var(--ink-2); color:var(--white); padding:0 14px; }.results-login button { margin-top:9px; }.results-error { color:#ffabab; font-size:12px; }.results-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; }.results-heading h1 { font-size:clamp(32px,4.3vw,55px); }.results-heading button { padding:10px 14px; border:1px solid var(--line); background:transparent; color:var(--g2); }.results-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:44px; }.results-stats article,.insight-grid article { padding:20px; border:1px solid var(--line); background:rgba(16,16,29,.76); }.results-stats span,.insight-grid span { display:block; color:var(--g2); font-size:12px; }.results-stats strong { display:block; margin-top:7px; color:var(--mint); font-family:Inter,sans-serif; font-size:31px; }.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }.insight-grid strong { display:block; margin-top:10px; color:var(--white); font-size:16px; line-height:1.65; }.responses-panel { margin-top:46px; border:1px solid var(--line); background:rgba(16,16,29,.76); }.responses-panel-top { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--line); }.responses-panel h2 { margin:0; font-size:18px; }.responses-panel-top span { color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:11px; }.response-row { border-bottom:1px solid var(--line); }.response-row:last-child { border:0; }.response-row summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 20px; cursor:pointer; list-style:none; }.response-row summary::-webkit-details-marker { display:none; }.response-row summary b { display:block; font-size:14px; }.response-row summary small { display:block; margin-top:4px; color:var(--g2); font-size:11px; }.response-row time { color:var(--g3); font-size:10px; white-space:nowrap; }.response-details { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 20px 20px; }.response-details>div { padding:11px; background:var(--ink-3); }.response-details span { color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:9px; }.response-details p { margin:6px 0 0; color:var(--g1); font-size:12px; line-height:1.7; }.responses-empty { padding:45px 20px; color:var(--g2); text-align:center; }
@keyframes question-in { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@media (max-width:760px) { .survey-page { padding-right:0; }.survey-rail { display:none; }.survey-main::before { inset:0; }.survey-mobile-header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:17px 18px; border-bottom:1px solid var(--line); }.survey-mobile-header .survey-mark { width:33px; height:33px; }.survey-mobile-header .survey-mark svg { width:20px; }.survey-mobile-header .survey-brand strong { font-size:15px; }.survey-mobile-header .survey-brand small { font-size:6px; }.survey-mobile-header>span { color:var(--mint); font-family:"JetBrains Mono",monospace; font-size:11px; }.survey-content,.survey-success { width:calc(100% - 32px); margin:0 auto; padding:30px 0 36px; }.survey-topline p { font-size:11px; }.survey-topline p b { display:none; }.survey-question { margin-top:46px; padding-right:20px; }.survey-question h2 { font-size:28px; }.survey-options { grid-template-columns:1fr; margin-top:25px; }.survey-actions { margin:40px 0 0 20px; }.survey-success { padding-top:15vh; }.results-header { padding:18px; }.results-label { display:none; }.results-main { width:calc(100% - 32px); padding:45px 0; }.results-stats,.insight-grid,.response-details { grid-template-columns:1fr; }.results-heading { display:block; }.results-heading button { margin-top:11px; }.response-row summary { align-items:flex-start; flex-direction:column; }.response-row time { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }