@import"https://fonts.googleapis.com/css2?family=Cairo&family=Inter&family=Tajawal&display=swap";:root{--color-primary: #667eea;--color-secondary: #4ECDC4;--color-accent: #FF6B6B;--color-surface: #ffffff;--color-border: #E5E7EB;--color-muted: #6B7280;--ring-primary: rgba(102, 126, 234, .2);--ring-danger: rgba(239, 68, 68, .15);--radius-sm: 8px;--radius-md: 12px;--shadow-inset: inset 0 1px 1px rgba(0,0,0,.02)}html[lang=ar]{font-family:Tajawal,Cairo,sans-serif}html[lang=en]{font-family:Inter,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}body.arabic{direction:rtl}.container{max-width:900px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;overflow:hidden}.language-switcher{text-align:center;padding:15px;background:#ffffff1a;border-bottom:1px solid rgba(255,255,255,.2)}.lang-btn{background:#fff;border:none;padding:8px 20px;margin:0 10px;border-radius:20px;cursor:pointer;font-weight:700;transition:all .3s ease}.lang-btn.active{background:#ff6b6b;color:#fff}.lang-btn:hover{transform:translateY(-2px)}.header{background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#ffeaa7);background-size:300% 300%;animation:gradientShift 3s ease infinite;padding:30px;text-align:center;color:#fff}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.header h1{font-size:2.5em;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.2em;opacity:.9}.content{padding:30px}.section{margin-bottom:40px;padding:25px;border-radius:15px;border-left:5px solid}body.arabic .section{border-left:none;border-right:5px solid}.section-overall{border-left-color:#ff6b6b;background:#fff5f5}body.arabic .section-overall{border-right-color:#ff6b6b}.section-design{border-left-color:#4ecdc4;background:#f0fdfa}body.arabic .section-design{border-right-color:#4ecdc4}.section-learning{border-left-color:#45b7d1;background:#f0f9ff}body.arabic .section-learning{border-right-color:#45b7d1}.section-navigation{border-left-color:#96ceb4;background:#f0fdf4}body.arabic .section-navigation{border-right-color:#96ceb4}.section-interactive{border-left-color:#ffeaa7;background:#fffbeb}body.arabic .section-interactive{border-right-color:#ffeaa7}.section-technical{border-left-color:plum;background:#faf5ff}body.arabic .section-technical{border-right-color:plum}.section-general{border-left-color:orange;background:#fff4e6}body.arabic .section-general{border-right-color:orange}.section-course{border-left-color:#9370db;background:#f5f0ff}body.arabic .section-course{border-right-color:#9370db}.section-suggestions{border-left-color:#20b2aa;background:#e6fffa}body.arabic .section-suggestions{border-right-color:#20b2aa}.section h2{color:#333;margin-bottom:20px;font-size:1.8em;display:flex;align-items:center;gap:10px}.question{margin-bottom:25px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;transition:transform .2s ease}.question:hover{box-shadow:0 6px 12px #00000026}.question-text{font-size:1.1em;color:#333;margin-bottom:15px;font-weight:600}.star-rating{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}.star-rating.two-col{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center;align-items:stretch;gap:10px 12px}.star-option{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;padding:10px;border-radius:10px;border:2px solid transparent}.star-option:hover{background:#f8f9fa}.star-option.selected{background:#f0f0f0!important;border-color:#667eea!important}.star-option input[type=radio]{display:none}.star-option input[type=radio]:checked~.star-label{color:#ff6b6b;font-weight:700}.star-display{white-space:nowrap;margin-bottom:5px;font-size:2em}.star-label{font-size:.9em;color:#666;text-align:center;transition:all .2s ease}.demographics{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;border-radius:15px;margin-bottom:30px}.demographics h2{color:#fff;margin-bottom:20px}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.demo-field{display:flex;flex-direction:column;gap:8px}.demo-field label{font-weight:600;font-size:1.1em}.demo-field select,.demo-field input,.feedback-question textarea,.feedback-question input[type=text],.feedback-question input[type=number],.question select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;font-size:1em;font-family:inherit;color:#111827;box-shadow:var(--shadow-inset);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.demo-field input,.feedback-question input[type=text],.feedback-question input[type=number]{width:100%}.demo-field select:hover,.demo-field input:hover,.feedback-question textarea:hover,.feedback-question input[type=text]:hover,.feedback-question input[type=number]:hover,.question select:hover{border-color:var(--color-primary)}.demo-field select:focus,.demo-field input:focus,.feedback-question textarea:focus,.feedback-question input[type=text]:focus,.feedback-question input[type=number]:focus,.question select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--ring-primary)}.client-invalid select,.client-invalid input,.client-invalid textarea{border-color:#ef4444;box-shadow:0 0 0 3px var(--ring-danger)}.demo-field select:disabled,.demo-field input:disabled,.feedback-question textarea:disabled,.question select:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.demo-field select,.question select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;padding-right:40px}body.arabic .demo-field select,body.arabic .question select{background-position:left 12px center;padding-left:40px;padding-right:14px}body.arabic .demo-field select,body.arabic .demo-field input{text-align:right}.feedback-section{background:#fff9e6;padding:25px;border-radius:15px;border-left:5px solid #FFD700}body.arabic .feedback-section{border-left:none;border-right:5px solid #FFD700}.feedback-section h2{color:#b8860b;margin-bottom:20px}.feedback-question{margin-bottom:20px}.feedback-question label{display:block;font-weight:600;color:#333;margin-bottom:8px;font-size:1.1em}.feedback-question textarea{width:100%;padding:15px;border:2px solid #E0E0E0;border-radius:10px;font-family:inherit;font-size:1em;resize:vertical;min-height:80px}body.arabic .feedback-question textarea{text-align:right;direction:rtl}.feedback-question textarea:focus{outline:none;border-color:gold;box-shadow:0 0 0 3px #ffd7001a}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;justify-items:center;align-items:stretch}.options>*{width:100%}.options label{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-md);padding:12px 14px;font-weight:600;color:#374151;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,transform .15s ease;-webkit-user-select:none;user-select:none}.options label:hover{border-color:var(--color-primary);background:#f8faff}.options input[type=radio]{width:18px;height:18px;accent-color:var(--color-primary)}.options label:has(input[type=radio]:checked){border-color:var(--color-primary);box-shadow:0 0 0 3px var(--ring-primary);background:#f3f6ff}.options label:has(input[type=radio]:focus-visible){box-shadow:0 0 0 3px var(--ring-primary)}.client-error-msg{margin-top:8px;color:#b91c1c;font-size:.9em}.submit-section{text-align:center;padding:30px;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);margin-top:30px;border-radius:15px}.submit-btn{background:#fff;color:#333;border:none;padding:15px 40px;font-size:1.3em;font-weight:700;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.submit-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:4px;margin:20px 0;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);width:0%;transition:width .3s ease;border-radius:4px}.chart-container{background:#fff;padding:20px;border-radius:15px;margin:20px 0;box-shadow:0 4px 6px #0000001a;min-height:260px}.chart-container canvas{display:block;width:100%!important;height:220px!important}.emoji-large{font-size:1.5em;margin-right:10px}body.arabic .emoji-large{margin-right:0;margin-left:10px}.fun-fact{background:#e8f4fd;border:2px dashed #45B7D1;border-radius:15px;padding:20px;margin:20px 0;text-align:center}.fun-fact h3{color:#45b7d1;margin-bottom:10px}.star-rating,.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;justify-items:center;align-items:stretch}.star-rating .star-option,.options>*{width:100%}@media screen and (min-width: 900px){.star-rating,.options{grid-template-columns:repeat(4,minmax(0,1fr))}.star-rating.two-col{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:center}}@media (max-width: 768px){.demo-grid{grid-template-columns:1fr}.star-rating{gap:8px}.star-option{gap:10px}}@media (max-width: 568px){.content{padding-right:10px;padding-left:10px}.section{padding:20px}body.arabic .section{padding:15px!important}.demographics{padding:15px}body{padding:7px!important}.header h1{font-size:28px}}.star-option:has(input:checked){background:#f0f0f0!important;border-color:#667eea!important}