@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{
  --blue:#00416B;
  --deep:#002343;
  --green:#00C08B;
  --green-dark:#008661;
  --text:#2F3B3E;
  --text-2:#4D5858;
  --muted:#6C787A;
  --line:#D4DEE0;
  --line-strong:#B8C6C9;
  --surface:#FFFFFF;
  --soft:#F7FAFA;
  --blue-soft:#EAF1F5;
  --success-soft:#E6F9F4;
  --warning:#A76A00;
  --warning-soft:#FFF5DD;
  --error:#D02C2F;
  --error-soft:#FBEAEA;
  --label:14px;
  --body:16px;
  --subtitle:20px;
  --heading:24px;
  --display:32px;
  --font:"DIN Next LT Arabic","DIN Next",Arial,sans-serif;
  --shadow:0 18px 52px rgba(0,35,67,.22);
}

*{box-sizing:border-box}
html,body,#app{
  width:1200px;
  height:680px;
  min-width:1200px;
  max-width:1200px;
  min-height:680px;
  max-height:680px;
  margin:0;
  overflow:hidden;
  background:#fff;
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit}
h1,h2,h3,p{margin:0}

.activity-shell{
  position:relative;
  width:1200px;
  height:680px;
  overflow:hidden;
  background:#fff;
}

.screen{
  position:absolute;
  inset:0;
  width:1200px;
  height:680px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--soft);
}

.btn{
  height:48px;
  min-width:118px;
  padding:0 20px;
  border-radius:12px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--body);
  line-height:1;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-dark)}
.btn.secondary{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn.secondary:hover{background:var(--blue-soft)}
.btn:disabled{
  background:#F2F5F5!important;
  color:#97A4A6!important;
  border-color:#DCE4E6!important;
  cursor:not-allowed;
  pointer-events:none;
}
.btn:focus-visible,
.option-card:focus-visible,
.attachment:focus-visible,
.plan-row.active:focus-visible{
  outline:3px solid rgba(0,192,139,.22);
  outline-offset:2px;
}

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

/* Instructions */
.instructions-screen{display:grid;grid-template-rows:minmax(0,1fr) 80px;background:var(--soft)}
.instructions-main{padding:40px 48px 24px;display:flex;align-items:center;justify-content:center;min-height:0}
.instructions-wrap{width:min(1100px,100%);margin:0 auto}
.instructions-heading h1{font-size:var(--display);line-height:1.18;color:var(--blue);font-weight:700}
.instructions-heading p{font-size:var(--body);line-height:1.5;color:var(--text-2);margin-top:12px;max-width:960px}
.instruction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.instruction-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;min-height:218px;display:flex;flex-direction:column;gap:14px;min-width:0}
.instruction-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.instruction-icon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.instruction-icon .accent{stroke:var(--green)}
.instruction-card h2{font-size:var(--subtitle);line-height:1.2;color:var(--deep);font-weight:700}
.instruction-card p{font-size:var(--body);line-height:1.5;color:var(--text-2)}
.instruction-note{margin-top:16px;border-left:4px solid var(--green);background:#fff;padding:13px 16px;border-radius:0 12px 12px 0;font-size:var(--body);line-height:1.5;color:var(--text)}
.static-action{height:80px;border-top:1px solid var(--line);background:#fff;padding:16px 24px;display:flex;justify-content:flex-end;align-items:center}

/* Shared task shell */
.activity{display:grid;grid-template-rows:82px minmax(0,1fr) 76px;background:var(--soft)}
.header{padding:14px 24px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-title h1{font-size:var(--heading);line-height:1.18;color:var(--blue);font-weight:700}
.header-title p{font-size:var(--label);line-height:1.35;color:var(--muted);margin-top:5px}
.progress{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.progress strong{font-size:var(--label);line-height:1.35;color:var(--text-2);font-weight:500;white-space:nowrap}
.progress-track{width:180px;height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--green);border-radius:999px}
.content{min-height:0;padding:10px 12px;background:var(--soft);display:flex;justify-content:center;overflow:hidden}
.footer{border-top:1px solid var(--line);background:#fff;padding:14px 18px;display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;gap:16px}
.footer-left{justify-self:start}.footer-note{justify-self:center;text-align:center;font-size:var(--label);line-height:1.35;color:var(--muted)}.footer-right{justify-self:end}

.person-strip{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:68px;
}
.person-id{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{width:44px;height:44px;border-radius:50%;background:#EEF5F7;border:1px solid #D9E4E6;overflow:hidden;display:grid;place-items:center;flex:0 0 44px}
.avatar img{width:100%;height:100%;object-fit:cover}
.person-copy h2{font-size:var(--subtitle);line-height:1.2;color:var(--blue);font-weight:700}
.person-copy p{font-size:var(--label);line-height:1.35;color:var(--muted);margin-top:3px}
.soft-pill{padding:8px 12px;border-radius:999px;background:var(--success-soft);color:var(--green-dark);font-size:var(--label);font-weight:700;white-space:nowrap}

/* Message / shared draft */
.message-layout{width:min(1140px,100%);height:100%;display:grid;grid-template-rows:68px minmax(0,1fr);gap:10px;min-height:0}
.shared-draft-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;display:flex;align-items:center;min-height:0}
.shared-thread{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:end;width:100%}
.shared-thread-avatar{align-self:end}
.shared-thread-stack{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:920px}
.share-bubble{background:#F5F9FB;border:1px solid #CFE0E6;border-radius:14px 14px 14px 4px;padding:14px 17px;max-width:100%}
.share-bubble strong{display:block;font-size:var(--label);color:var(--blue);font-weight:700;margin-bottom:5px}
.share-bubble p{font-size:var(--body);line-height:1.5;color:var(--text);margin:0 0 5px}
.share-bubble p:last-child{margin-bottom:0}
.attachment{
  width:100%;
  min-height:74px;
  border:1px solid #C9D8DC;
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:14px;
  align-items:center;
  text-align:left;
  color:var(--deep);
  cursor:pointer;
}
.attachment:hover{border-color:#7FA7BE;background:#F4F9FB}
.attachment.static{cursor:default}
.attachment.static:hover{border-color:#C9D8DC;background:#fff}
.attachment-icon{width:44px;height:44px;border-radius:10px;background:#EAF2F6;color:var(--blue);display:grid;place-items:center}
.attachment-icon svg,.file-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.attachment-text strong{display:block;font-size:var(--body);line-height:1.3}
.attachment-text small{display:block;font-size:var(--label);color:var(--muted);margin-top:3px}
.attachment-action{font-size:var(--body);font-weight:700;color:var(--blue)}

/* Document overview */
.document-layout{width:min(1140px,100%);height:100%;display:grid;grid-template-rows:68px minmax(0,1fr);gap:10px;min-height:0}
.document-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:0}
.document-head{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:18px;align-items:center}
.file-title{display:flex;align-items:center;gap:11px;min-width:0}.file-icon{width:42px;height:42px;border-radius:10px;background:#EEF5F7;color:var(--blue);display:grid;place-items:center;flex:0 0 42px}
.file-title span{display:block;font-size:var(--label);font-weight:700;color:var(--muted)}
.file-title strong{display:block;font-size:var(--subtitle);line-height:1.2;color:var(--deep);margin-top:2px}
.development-need{background:#F6FBF9;border-left:4px solid var(--green);border-radius:0 12px 12px 0;padding:10px 14px}
.development-need span{display:block;font-size:var(--label);font-weight:700;color:var(--green-dark)}
.development-need strong{display:block;font-size:var(--body);line-height:1.42;color:var(--deep);margin-top:3px}
.section-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;min-height:0}
.plan-row{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  background:#FAFCFC;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:0;
  text-align:left;
  color:inherit;
}
button.plan-row{appearance:none;width:100%;cursor:pointer}
.plan-row.active{border-color:#8AB9D0;background:#F5FAFC;box-shadow:inset 0 0 0 1px rgba(0,65,107,.06)}
.plan-row.active:hover{background:#EEF8FC;border-color:#5F9DBB}
.plan-row.done{border-color:#B5DDD0;background:#F5FCF9}
.plan-row.locked{opacity:.72}
.plan-row-main{display:flex;align-items:center;gap:12px;min-width:0}
.status-token{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  font-size:var(--label);
  font-weight:700;
}
.status-token.pending{background:#EFF5F8;color:var(--blue)}
.status-token.current{background:#EAF3F7;color:var(--blue);border:1px solid #8CB9CE}
.status-token.done{background:#E3F6EE;color:var(--green-dark)}
.status-token.done svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.status-token .tick{font-size:18px;line-height:1;font-weight:700;transform:translateY(-.5px)}
.plan-row-copy{min-width:0}
.plan-row h3{font-size:var(--body);line-height:1.3;color:var(--deep);font-weight:700}
.plan-row p{font-size:var(--label);line-height:1.35;color:var(--muted);margin-top:4px}
.row-status{font-size:var(--label);font-weight:700;color:var(--muted);white-space:nowrap}
.plan-row.active .row-status{color:var(--blue)}
.plan-row.done .row-status{color:var(--green-dark)}
.document-note{border-left:4px solid #8CB9CE;background:#F8FAFA;padding:10px 13px;border-radius:0 10px 10px 0;font-size:var(--label);line-height:1.4;color:var(--text-2)}

/* Review */
.review-layout{width:min(1140px,100%);height:100%;display:grid;grid-template-rows:68px minmax(0,1fr);gap:10px;min-height:0}
.review-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:10px;min-height:0}
.review-top{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(0,1.12fr);gap:10px;align-items:stretch}
.draft-entry{
  border:1px solid #CFE0E6;
  border-left:4px solid var(--blue);
  border-radius:0 12px 12px 0;
  background:#F7FAFB;
  padding:12px 14px;
  display:grid;
  gap:6px;
  align-content:center;
}
.draft-entry span{display:block;font-size:var(--label);font-weight:700;color:var(--blue)}
.draft-entry h2{font-size:var(--subtitle);line-height:1.22;color:var(--deep);margin-top:4px;font-weight:700}
.draft-entry p{font-size:var(--body);line-height:1.38;color:var(--text)}
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.context-item{border:1px solid var(--line);border-radius:12px;background:#FAFCFC;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.context-item span{display:block;font-size:var(--label);font-weight:700;color:var(--green-dark);margin-bottom:4px}
.context-item p{font-size:var(--body);line-height:1.38;color:var(--text-2)}
.decision-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:10px}
.decision-copy span{display:block;font-size:var(--label);font-weight:700;color:var(--green-dark);text-transform:uppercase}
.decision-copy h2{font-size:22px;line-height:1.24;color:var(--blue);margin-top:3px}
.selection-hint{padding:7px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:var(--label);font-weight:700;white-space:nowrap;align-self:flex-start}
.locked-helper{border-left:4px solid var(--green);background:#F4FCF9;padding:9px 12px;border-radius:0 10px 10px 0;font-size:var(--label);line-height:1.4;color:var(--green-dark)}
.option-list{display:grid;gap:8px;min-height:0;align-content:start}
.option-list.single{grid-template-columns:1fr}
.option-list.multi{grid-template-columns:1fr 1fr}
.option-card{
  width:100%;
  border:1.5px solid var(--line-strong);
  border-radius:12px;
  background:#fff;
  padding:8px 14px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
  align-items:center;
  text-align:left;
  font-size:var(--body);
  font-weight:400;
  line-height:1.38;
  color:var(--text);
  cursor:pointer;
  min-height:54px;
}
.option-card:hover{border-color:#7EA5BB;background:#FBFDFD}
.option-card.selected{border-color:var(--green-dark);background:#F0FAF6}
.option-card.correct-selected,.option-card.locked-correct{border-color:var(--green-dark)!important;background:#EAF8F3!important}
.option-card.incorrect-selected{border-color:#D56A6C!important;background:#FDF0F0!important}
.option-card.locked-correct:disabled{opacity:1;color:var(--text);cursor:default}
.radio,.checkbox{width:26px;height:26px;border:2px solid #B8C8CC;background:#fff;display:grid;place-items:center;flex:0 0 26px}
.radio{border-radius:50%}
.checkbox{border-radius:7px}
.option-card.selected .radio{border-color:var(--green)}
.option-card.selected .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--green)}
.option-card.selected .checkbox,
.option-card.locked-correct .checkbox{background:var(--green);border-color:var(--green);color:#fff}
.option-card.incorrect-selected .checkbox{border-color:var(--error);background:var(--error-soft);color:var(--error)}
.checkbox svg,.feedback-icon svg,.complete-mark svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.option-text{min-width:0}

/* Feedback */
.feedback-overlay{position:absolute;inset:0;z-index:60;background:rgba(0,35,67,.33);display:flex;align-items:center;justify-content:center;padding:24px}
.feedback-card{
  width:min(700px,calc(100% - 48px));
  max-height:calc(100% - 48px);
  overflow:hidden;
  background:#fff;
  border-radius:16px;
  padding:28px 32px 24px;
  box-shadow:var(--shadow);
  display:grid;
  gap:16px;
}
.feedback-status{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.feedback-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.feedback-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.feedback-card.correct .feedback-icon{background:var(--success-soft);color:var(--green-dark)}
.feedback-card.incorrect .feedback-icon{background:var(--error-soft);color:var(--error)}
.feedback-card.partial .feedback-icon{background:var(--warning-soft);color:var(--warning)}
.feedback-status h2{font-size:var(--heading);line-height:1.18;font-weight:700}
.feedback-card.correct .feedback-status h2{color:var(--green-dark)}
.feedback-card.incorrect .feedback-status h2{color:var(--error)}
.feedback-card.partial .feedback-status h2{color:var(--warning)}
.feedback-body{overflow:auto;min-height:0}
.feedback-body p{font-size:var(--body);line-height:1.5;color:var(--text);text-align:left;max-width:none}
.feedback-body p strong{color:var(--deep)}
.feedback-actions{display:flex;justify-content:center;margin-top:2px}
.feedback-actions .btn{min-width:188px}

/* Summary */
.summary-screen{display:grid;grid-template-rows:minmax(0,1fr) 76px;background:var(--soft)}
.summary-main{display:flex;align-items:center;justify-content:center;padding:24px 40px;min-height:0}
.summary-wrap{width:min(1040px,100%);display:grid;gap:18px}
.summary-heading h1{font-size:var(--display);line-height:1.18;color:var(--blue);font-weight:700}
.summary-heading p{font-size:var(--body);line-height:1.5;color:var(--text-2);margin-top:8px;max-width:860px}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.summary-item{position:relative;display:flex;gap:13px;padding:16px 18px;border:1px solid #DDE7EA;border-radius:12px;background:#fff;min-height:112px;align-items:flex-start}
.summary-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:#8DBED4}
.summary-item:nth-child(2)::before{background:#63B99A}
.summary-item:nth-child(3)::before{background:#54B997}
.summary-item:nth-child(4)::before{background:#0B4E78}
.summary-num{width:28px;height:28px;border-radius:50%;background:#EAF4F8;color:var(--blue);display:grid;place-items:center;font-size:var(--label);font-weight:700;flex:0 0 28px}
.summary-item strong{display:block;font-size:var(--body);line-height:1.25;color:var(--blue);margin:2px 0 6px}
.summary-item p{color:var(--text);font-size:var(--body);line-height:1.46}
.summary-note{border-left:4px solid var(--green);background:#fff;padding:12px 15px;border-radius:0 12px 12px 0;font-size:var(--body);line-height:1.45;color:var(--text-2)}

/* Completion */
.complete-screen{display:flex;align-items:center;justify-content:center;background:#F2F8F5;height:680px}
.complete-card{width:min(760px,78vw);background:#fff;border:1px solid var(--line);border-radius:24px;padding:42px 34px;text-align:center;box-shadow:0 8px 20px rgba(0,35,67,.06)}
.complete-mark{width:76px;height:76px;border-radius:50%;background:var(--success-soft);color:var(--green-dark);display:grid;place-items:center;margin:0 auto 24px}
.complete-mark svg{width:38px;height:38px}
.complete-card h1{font-size:var(--display);line-height:1.18;color:var(--blue);font-weight:700}
.complete-card p{font-size:var(--body);line-height:1.5;color:var(--text-2);margin-top:14px;max-width:620px;margin-left:auto;margin-right:auto}