@font-face {
  font-family: "DIN Next LT Arabic";
  src: url("../fonts/DINNextLTArabic-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root{
  --scfhs-blue:#00416B;
  --scfhs-blue-deep:#002343;
  --scfhs-green:#00C08B;
  --scfhs-green-dark:#008661;
  --scfhs-gray:#4D5858;
  --text-primary:#2F3B3E;
  --text-muted:#6C787A;
  --line:#D4DEE0;
  --line-strong:#B8C6C9;
  --surface:#FFFFFF;
  --surface-soft:#F7FAFA;
  --error:#D02C2F;
  --warning:#F4C55C;
  --info:#54C0E8;
  --success-soft:#E6F9F4;
  --error-soft:#FBEAEA;
  --warning-soft:#FFF8E8;
  --info-soft:#EAF7FC;
  --blue-soft:#EAF1F5;
  --font-family:"DIN Next LT Arabic","DIN Next","DINNextLTArabic","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-label:14px;
  --font-body:16px;
  --font-subtitle:20px;
  --font-heading:24px;
  --font-display:32px;
  --line-label:1.35;
  --line-body:1.5;
  --line-heading:1.18;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --radius-card:16px;
  --radius-control:12px;
  --radius-completion:24px;
  --control-size:26px;
  --button-height:48px;
  --shadow-1:0 1px 3px rgba(0,35,67,.08),0 1px 2px rgba(0,35,67,.04);
  --shadow-2:0 6px 18px rgba(0,35,67,.10);
  --shadow-3:0 16px 40px rgba(0,35,67,.18);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#fff;color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased}
body{overflow:hidden}
button{font:inherit}
button:focus-visible{outline:3px solid rgba(0,192,139,.28);outline-offset:2px}
h1,h2,h3,p,ul{margin:0}
button,input{font-family:inherit}

#app{width:100%;height:100%;min-height:680px;padding:6px;background:#fff;overflow:hidden}
.screen{position:relative;width:100%;height:100%;min-height:668px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}

/* Buttons */
.btn{height:var(--button-height);min-height:var(--button-height);border-radius:var(--radius-control);border:1px solid transparent;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-body);font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.btn.primary{background:var(--scfhs-green);color:#fff;border-color:var(--scfhs-green)}
.btn.primary:hover{background:var(--scfhs-green-dark);border-color:var(--scfhs-green-dark);color:#fff}
.btn.primary:active{transform:translateY(1px)}
.btn.secondary{background:#fff;color:var(--scfhs-blue);border-color:var(--line-strong)}
.btn.secondary:hover{border-color:var(--scfhs-blue);background:var(--blue-soft)}
.btn:disabled{background:#F2F5F5;color:#99A5A8;border-color:#DCE4E6;cursor:not-allowed;transform:none}

/* Start */
.start-screen{display:block;background:#fff}
.start-layout{display:grid;grid-template-columns:minmax(420px,48%) minmax(0,52%);height:100%;min-height:668px;background:#fff}
.start-copy{padding:56px 48px 56px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;min-width:0;background:#fff}
.start-copy h1{font-size:var(--font-display);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue);max-width:560px}
.start-copy p{font-size:var(--font-body);line-height:var(--line-body);font-weight:400;color:var(--scfhs-gray);max-width:540px}
.start-copy .btn{margin-top:8px}
.start-art{min-width:0;background:#fff;border:0;display:flex;align-items:center;justify-content:center;padding:40px 48px 40px 8px;overflow:hidden}
.start-art img{display:block;width:min(92%,780px);max-width:100%;height:auto;object-fit:contain;object-position:center;flex:0 0 auto}

/* Shared static page shell: Instructions + Summary */
.static-screen{display:grid;grid-template-rows:minmax(0,1fr) 80px;background:var(--surface-soft)}
.static-main{padding:40px 48px 24px;display:flex;align-items:center;justify-content:center;min-height:0}
.static-panel{width:min(1180px,100%);min-width:0}
.static-heading{display:block;margin-bottom:24px}
.static-heading h1{font-size:var(--font-display);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue)}
.static-heading p{margin-top:12px;font-size:var(--font-body);line-height:var(--line-body);color:var(--scfhs-gray);max-width:760px}
.static-action{border-top:1px solid var(--line);background:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:flex-end}

/* Instructions */
.instruction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.instruction-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:24px;min-height:220px;display:flex;flex-direction:column;gap:14px}
.instruction-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--scfhs-blue)}
.instruction-icon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.instruction-icon .accent{stroke:var(--scfhs-green)}
.instruction-icon .accent-fill{fill:var(--scfhs-green);stroke:none}
.instruction-card h2{font-size:var(--font-subtitle);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue-deep)}
.instruction-card p,.instruction-card li{font-size:var(--font-body);line-height:var(--line-body);color:var(--scfhs-gray)}
.instruction-card ul{padding-left:20px;display:grid;gap:6px}
.instruction-note{margin-top:16px;border-left:4px solid var(--scfhs-green);background:#fff;border-radius:0 var(--radius-control) var(--radius-control) 0;padding:14px 16px;font-size:var(--font-body);line-height:var(--line-body);color:var(--text-primary)}

/* Task */
.activity-screen{display:grid;grid-template-rows:82px minmax(0,1fr) 76px;background:var(--surface-soft)}
.activity-header{background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.header-copy{min-width:0}
.header-copy h1{font-size:var(--font-heading);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue)}
.header-copy p{margin-top:6px;font-size:var(--font-label);line-height:var(--line-label);color:var(--text-muted)}
.progress-wrap{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.progress-label{font-size:var(--font-label);line-height:var(--line-label);font-weight:500;color:var(--scfhs-gray);white-space:nowrap}
.progress-track{width:180px;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.progress-fill{display:block;height:100%;border-radius:inherit;background:var(--scfhs-green);transition:width .2s ease}
.activity-content{min-height:0;padding:14px 12px;display:flex;justify-content:center;overflow:hidden}
.task-panel{width:100%;max-width:none;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 22px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px;min-height:0;min-width:0}
.case-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0}
.case-meta-copy{min-width:0}
.case-label{display:none}
.case-meta h2{font-size:var(--font-heading);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue);min-width:0}
.case-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:420px}
.case-nav button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--scfhs-gray);font-size:var(--font-label);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.case-nav button:hover{border-color:var(--scfhs-blue);color:var(--scfhs-blue)}
.case-nav button.active{background:var(--blue-soft);border-color:var(--scfhs-blue);color:var(--scfhs-blue)}
.case-nav button.complete{border-color:#A7DECD;color:var(--scfhs-green-dark)}
.case-nav button.complete.active{background:var(--success-soft);border-color:var(--scfhs-green-dark);color:var(--scfhs-green-dark)}
.scenario-card{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 18px;min-width:0}
.scenario-card p{font-size:var(--font-body);line-height:var(--line-body);color:var(--text-primary);white-space:normal;overflow:visible}
.question-block{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0}
.question-block h3{font-size:var(--font-subtitle);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:6px}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;min-height:0;align-items:stretch}
.level-choice{border:1.5px solid var(--line-strong);border-radius:var(--radius-card);background:#fff;padding:18px 14px;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:center;min-width:0;min-height:126px;text-align:left;color:var(--text-primary);cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.level-choice:hover{border-color:#82989E;background:#FCFEFE}
.level-choice.selected{border-color:var(--scfhs-green);background:var(--success-soft);box-shadow:0 0 0 2px rgba(0,192,139,.08)}
.level-choice.locked{cursor:default}
.radio{width:var(--control-size);height:var(--control-size);border:2px solid var(--line-strong);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.level-choice.selected .radio{border-color:var(--scfhs-green)}
.level-choice.selected .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--scfhs-green)}
.level-choice.locked.selected .radio{background:var(--scfhs-green);border-color:var(--scfhs-green)}
.level-choice.locked.selected .radio::after{width:7px;height:11px;border-radius:0;background:transparent;border:solid var(--scfhs-blue-deep);border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.choice-copy{min-width:0}
.choice-copy strong{display:block;font-size:var(--font-body);line-height:1.35;font-weight:700;color:var(--scfhs-blue-deep)}
.choice-copy small{display:block;margin-top:4px;font-size:var(--font-body);line-height:1.35;color:var(--scfhs-gray)}
.action-rail{background:#fff;border-top:1px solid var(--line);padding:14px 18px;display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr) minmax(120px,auto);align-items:center;gap:16px}
.action-left{justify-self:start}.action-right{justify-self:end}.action-note{font-size:var(--font-label);line-height:var(--line-label);color:var(--text-muted);justify-self:center;text-align:center}

/* Feedback */
.feedback-overlay{position:absolute;inset:0;background:rgba(0,35,67,.34);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.feedback-card{width:min(620px,calc(100% - 48px));max-height:calc(100% - 48px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-3);padding:28px 32px 24px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:20px;overflow:hidden}
.feedback-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.feedback-status-icon{width:56px;height:56px;flex:0 0 56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0}
.feedback-card.incorrect .feedback-status-icon{background:var(--error-soft);color:var(--error)}
.feedback-card.correct .feedback-status-icon{background:var(--success-soft);color:var(--scfhs-green-dark)}
.feedback-status-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.feedback-status h2{font-size:var(--font-heading);line-height:var(--line-heading);font-weight:700}
.feedback-card.incorrect .feedback-status h2{color:var(--error)}
.feedback-card.correct .feedback-status h2{color:var(--scfhs-green-dark)}
.feedback-body{overflow:auto;min-height:0;padding:0 4px;text-align:left;direction:ltr}
.feedback-body p{font-size:var(--font-body);line-height:var(--line-body);color:var(--text-primary);max-width:none;text-align:left;direction:ltr}
.feedback-footer{padding-top:0;display:flex;justify-content:center;align-items:center;min-height:48px}
.feedback-footer .btn{min-width:188px}
.feedback-footer .btn.retry{background:#fff;color:var(--scfhs-blue);border-color:var(--scfhs-blue)}
.feedback-footer .btn.retry:hover{background:var(--blue-soft);color:var(--scfhs-blue);border-color:var(--scfhs-blue)}

/* Summary */
.summary-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.summary-row{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:16px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center}
.summary-number{width:48px;height:48px;border-radius:12px;background:var(--blue-soft);color:var(--scfhs-blue);display:flex;align-items:center;justify-content:center;font-size:var(--font-subtitle);font-weight:700}
.summary-copy strong{display:block;font-size:var(--font-body);line-height:1.35;color:var(--scfhs-blue-deep)}
.summary-copy span{display:block;margin-top:4px;font-size:var(--font-body);line-height:var(--line-body);color:var(--scfhs-gray)}
.level-badge{border:1px solid #A7DECD;background:var(--success-soft);color:var(--scfhs-green-dark);border-radius:999px;padding:6px 10px;font-size:var(--font-label);font-weight:700;white-space:nowrap}
.summary-row:last-child:nth-child(odd){grid-column:1/-1}

/* Completion */
.complete-screen{display:flex;align-items:center;justify-content:center;padding:32px;background:#F1FAF7}
.complete-card{width:min(760px,100%);background:#fff;border-radius:var(--radius-completion);padding:42px 34px;text-align:center;box-shadow:var(--shadow-2);border:1px solid #DDECE7}
.complete-mark{width:76px;height:76px;border-radius:50%;background:var(--success-soft);color:var(--scfhs-green-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.complete-mark svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.complete-card h1{font-size:var(--font-display);line-height:var(--line-heading);font-weight:700;color:var(--scfhs-blue)}
.complete-card p{margin:12px auto 0;max-width:580px;font-size:var(--font-body);line-height:var(--line-body);color:var(--scfhs-gray)}

@media(max-width:1200px){
  .start-copy{padding:48px 38px 48px 42px}
  .static-main{padding:32px 32px 20px}.static-action{padding:14px 18px}
  .activity-header{padding:12px 20px}.activity-content{padding:14px 10px}.action-rail{padding:14px 18px}
  .task-panel{padding:16px 18px;gap:12px}.level-grid{gap:10px}.level-choice{padding:16px 12px;gap:10px}
}
@media(max-width:900px){
  .start-layout{grid-template-columns:1fr}.start-art{min-height:260px;border:0;padding:18px;background:#fff}.start-art img{width:min(100%,700px);max-width:100%}
  .activity-screen{grid-template-rows:auto minmax(0,1fr) auto}
  .activity-header{min-height:82px;align-items:flex-start}.header-copy p{display:none}
  .progress-wrap{margin-top:5px}
  .activity-content{overflow:auto}
  .task-panel{height:auto;min-height:100%}
  .level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.level-choice{min-height:96px}
  .instruction-card{min-height:230px;padding:20px}
}
@media(max-width:700px){
  :root{--font-subtitle:18px;--font-heading:22px;--font-display:28px}
  body{overflow:auto}
  #app{height:auto;min-height:680px;padding:0;overflow:visible}
  .screen{height:auto;min-height:680px;border-left:0;border-right:0;border-radius:0;overflow:visible}
  .start-layout{grid-template-columns:1fr;min-height:680px}
  .start-copy{padding:34px 18px 24px;gap:14px}.start-copy .btn{margin-top:4px;width:100%}
  .start-art{min-height:270px;border:0;padding:12px;background:#fff}.start-art img{width:min(100%,620px);max-width:100%}
  .static-screen{min-height:680px;grid-template-rows:auto auto}.static-main{padding:28px 18px 20px;align-items:flex-start}
  .static-heading{margin-bottom:20px}
  .instruction-grid{grid-template-columns:1fr}.instruction-card{min-height:0;padding:18px;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:4px}.instruction-card h2,.instruction-card p,.instruction-card ul{grid-column:2}.instruction-card .instruction-icon{grid-row:1/4}
  .static-action{padding:14px 18px;position:sticky;bottom:0;z-index:5}.static-action .btn{width:100%}
  .activity-screen{min-height:680px;grid-template-rows:auto auto auto;overflow:visible}
  .activity-header{padding:14px 16px;flex-wrap:wrap;gap:10px}.header-copy{width:100%}.progress-wrap{width:100%;margin-top:0}.progress-track{width:auto;flex:1}
  .activity-content{padding:12px 10px;overflow:visible}.task-panel{padding:16px;height:auto;gap:14px}
  .case-meta{display:block}.case-nav{margin-top:12px;justify-content:flex-start;max-width:none}
  .level-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.level-choice:last-child{grid-column:1/-1}
  .action-rail{padding:12px 14px;position:sticky;bottom:0;z-index:10;grid-template-columns:1fr 1fr;gap:10px}.action-note{display:none}.action-left,.action-right{width:100%}.action-left .btn,.action-right .btn{width:100%}
  .feedback-overlay{position:fixed;padding:16px}.feedback-card{width:calc(100% - 16px);max-height:calc(100% - 32px);padding:20px 18px}.feedback-footer .btn{width:100%}
  .summary-list{grid-template-columns:1fr}.summary-row:last-child:nth-child(odd){grid-column:auto}
  .complete-screen{min-height:680px;padding:24px 18px}.complete-card{padding:32px 24px}
}
@media(max-width:480px){
  .start-copy{padding:30px 18px 20px}
  .level-grid{grid-template-columns:1fr}.level-choice:last-child{grid-column:auto;min-height:72px}
  .case-nav{gap:6px}.case-nav button{width:34px;height:34px}
  .summary-row{grid-template-columns:40px minmax(0,1fr);padding:12px}.level-badge{grid-column:2;justify-self:start;margin-top:2px}
}