:root{font-family:Verdana,Arial,sans-serif;color:#183649;background:#f3f6f7;font-synthesis:none;line-height:1.55;--teal:#087e80;--navy:#102f42;--muted:#58707e}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:16px}body{margin:0}button,input,select{font:inherit}a{color:#08787b;text-underline-offset:3px}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1ba7ad;outline-offset:4px}[hidden]{display:none!important}
#ssic-ptqf{max-width:1200px;margin:auto;padding:0 36px 28px}
header{position:relative;padding-bottom:38px}
.brand{display:flex;align-items:center;gap:12px;padding:26px 0;font-size:12px;font-weight:750;letter-spacing:.1em;border-bottom:1px solid #dce5e9}
.brand-mark{display:grid;place-items:center;width:41px;height:44px;border-radius:13px 3px 13px 3px;background:var(--navy);color:#fff;font-size:27px;letter-spacing:0}
.brand-sub{display:block;font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--muted);margin-top:1px}
.brand-label{margin-left:auto;padding:6px 12px;border:1px solid #d5e3e6;border-radius:30px;color:#526f7d;font-size:11px;font-weight:500;letter-spacing:0}
.hero{padding:42px 0 0;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:750;color:var(--teal)}
.hero .eyebrow{display:flex;align-items:center;gap:10px}.hero .eyebrow span{height:7px;width:7px;background:var(--teal);border-radius:50%}
h1{font-size:clamp(36px,5.2vw,60px);line-height:1.07;letter-spacing:-.045em;font-weight:650;margin:17px 0 20px;color:var(--navy)}
.hero p{max-width:540px;font-size:17px;color:var(--muted);margin:0}
.hero-meta{display:flex;gap:25px;font-size:12px;color:#395968;margin-top:22px}.hero-meta span:before{content:'✓';color:var(--teal);margin-right:7px;font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0;border-top:1px solid #dce5e9}.toolbar strong{font-size:16px;font-weight:650}.toolbar .hint{display:block;margin:3px 0 0}
.actions{display:flex;gap:8px;flex-shrink:0}button{border-radius:8px;border:1px solid #bfd1d9;padding:10px 14px;color:var(--navy);background:#fff;font-size:13px;cursor:pointer;min-height:43px;font-weight:600}button:hover{background:#eaf2f4}button[type=reset]{background:transparent;border-color:transparent;color:var(--muted)}



.workspace{display:grid;grid-template-columns:minmax(0,1fr) 335px;align-items:start;gap:28px}
form{min-width:0}fieldset{min-width:0;position:relative;background:#fff;border:1px solid #dfe8ec;border-radius:14px;margin:0 0 22px;padding:24px;box-shadow:0 3px 8px #17384a03}
legend{display:contents}.section-number{display:inline-grid;place-items:center;font-size:11px;letter-spacing:.05em;font-weight:750;color:#08777a;background:#e6f4f3;border-radius:8px;width:32px;height:32px;margin-right:10px}legend>span:last-child{font-size:19px;letter-spacing:-.025em;font-weight:650}
.section-intro{font-size:13px;color:var(--muted);margin:10px 0 24px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 16px}
.form-label{font-size:12px;font-weight:650;color:#375362;display:block;min-width:0}
.form-control,.form-select{margin-top:8px;margin-bottom:3px;display:block;width:100%;min-width:0;min-height:48px;border:1px solid #cddbe2;background:#fbfcfd;border-radius:8px;color:#1c394a;padding:11px 12px;font-size:14px;font-weight:400;transition:border-color .15s}
.form-control:hover,.form-select:hover{border-color:#8eb8bf}.form-control:focus,.form-select:focus{background:#fff}.form-control[aria-invalid=true]{border-color:#b14c45;background:#fff7f6}
.form-select{padding-right:8px}.form-check{display:flex;align-items:flex-start;gap:11px;font-size:13px;font-weight:400;color:#3c5766;margin:16px 0;cursor:pointer}
input[type=checkbox]{margin:2px 0 0;width:18px;height:18px;flex-shrink:0;accent-color:#087e80}
h3{font-size:14px;margin:0 0 13px;font-weight:650}.language-panel{border-top:1px solid #e4ecef;padding:21px 0 4px}.language-panel:first-of-type{padding-top:10px;border-top:0}
.hint,.text-small{font-size:12px;color:var(--muted);font-weight:400;line-height:1.65}.form-label>.hint{display:block;min-height:0;margin-top:4px;color:#08777a}
#spouse-fields h3{margin-top:25px}#spouse-empty{background:#f3f7f9;padding:16px;border-radius:8px;font-size:13px;color:#526b7b}
details{border-top:1px solid #dfe9ed;margin-top:21px;padding-top:15px}summary{cursor:pointer;font-size:12px;font-weight:650;list-style-position:outside;margin-left:15px;padding:3px 0}details[open] summary{margin-bottom:15px}
.result-column{position:sticky;top:80px;min-width:0}.results-heading{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 14px}.results-heading .eyebrow{color:#55707d;font-size:10px}
.live-indicator{font-size:11px;color:#08797c;display:flex;align-items:center;gap:6px}.live-indicator:before{content:'';width:6px;height:6px;border-radius:50%;background:#089b8e}
.results{display:grid;gap:16px;scroll-margin-top:16px}.card{border-radius:14px;padding:24px;border:1px solid #d9e5ea;background:#fff;box-shadow:0 7px 18px #17384a05}
.ptqf-card{background:var(--navy);color:#fff;border-color:var(--navy)}.score-label{font-size:15px;font-weight:650}.score-subtitle{font-size:11px;color:#647d8c;margin-top:3px}.ptqf-card .score-subtitle{color:#b7ced9}
.viz-stat-value{font-size:39px;letter-spacing:-.04em;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums;margin:20px 0 13px;white-space:nowrap}
.score-track{position:relative;background:#ffffff24;border-radius:4px;height:5px;margin:15px 0 10px}.score-track span{display:block;height:100%;width:0;background:#50d8c9;border-radius:4px;transition:width .2s}.score-track i{position:absolute;left:67%;top:-3px;height:11px;width:1px;background:#fff}.threshold-label{font-size:10px;color:#c5dce5;margin:0 0 16px}
#ptqf-status,#crs-status{font-size:12px;color:#5a7483;line-height:1.7;margin:12px 0 0}.ptqf-card #ptqf-status{color:#d0e0e7}
.ptqf-card details{border-color:#ffffff29}.card summary{font-size:11px}.card dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 15px;font-size:12px;margin:12px 0 0}.card dd{margin:0;font-variant-numeric:tabular-nums;font-weight:650}
.result-help{font-size:11px;line-height:1.7;color:#657d89;margin:14px 8px}
footer{border-top:1px solid #dce5e9;padding-top:15px;margin-top:16px;max-width:740px}footer p{margin:8px 0}
@media(min-width:1000px){.hero:after{content:'67';position:absolute;right:42px;top:102px;font-size:145px;line-height:1;color:#e1ebee;font-weight:750;letter-spacing:-.065em;z-index:-1}}
@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 290px;gap:18px}#ssic-ptqf{padding:0 22px 24px}.card{padding:20px}.viz-stat-value{font-size:33px}.fields{grid-template-columns:1fr}.toolbar{align-items:flex-start}.toolbar .hint{max-width:300px}}
@media(max-width:700px){#ssic-ptqf{padding:0 16px 92px}.brand{padding:20px 0}.brand-label{font-size:10px;padding:5px 8px}.hero{padding-top:30px}h1{font-size:42px}.hero p{font-size:15px}header{padding-bottom:28px}.toolbar{flex-direction:column;gap:13px;padding:20px 0 10px}.toolbar .hint{max-width:none}.actions{width:100%}.workspace{display:flex;flex-direction:column}.workspace form,.result-column{width:100%}.result-column{position:static;order:-1}.results{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:16px}.score-label{font-size:13px}.score-subtitle{display:none}.viz-stat-value{font-size:clamp(23px,5.2vw,34px);margin-top:15px}.threshold-label{font-size:9px}.card details{margin-top:13px}.card summary{font-size:10px}.card dl{font-size:11px;gap:7px}.result-help{display:none}.results-heading{margin-top:0}.card #ptqf-status,.card #crs-status{font-size:11px;line-height:1.55}fieldset{padding:20px;margin-bottom:16px}.fields{grid-template-columns:1fr}.form-control,.form-select{font-size:16px}.section-intro{margin-bottom:20px}legend>span:last-child{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Comfortable reading across desktop and mobile. */
:root { font-size:16px; line-height:1.65; --muted:#425e6e; }
h1 { letter-spacing:-.025em; font-weight:700; }
.hero p { font-size:18px; color:#425e6e; }
.form-label { font-size:15px; font-weight:700; color:#274657; }
.form-control,.form-select { font-size:16px; line-height:1.5; min-height:52px; }
.hint,.text-small,.section-intro,.result-help { font-size:14px; color:#425e6e; line-height:1.75; }
.form-check { font-size:15px; line-height:1.65; color:#274657; }
h3 { font-size:17px; }
legend>span:last-child { font-size:20px; font-weight:700; }

button { font-size:14px; min-height:46px; }
.score-label { font-size:17px; }
.score-subtitle { font-size:13px; color:#425e6e; }
.card #ptqf-status,.card #crs-status { font-size:14px; line-height:1.7; }
.card #crs-status { color:#425e6e; }
.card summary,summary,.card dl { font-size:14px; line-height:1.6; }
.threshold-label { font-size:12px; }
.hero-meta,.live-indicator { font-size:13px; }
.eyebrow,.results-heading .eyebrow { font-size:12px; }
@media(max-width:900px) {
  .workspace { grid-template-columns:minmax(0,1fr) 310px; }
}
@media(max-width:700px) {
  .hero p { font-size:16px; }

  .score-label { font-size:15px; }
  .card #ptqf-status,.card #crs-status { font-size:14px; }
  .card summary,.card dl { font-size:13px; }
  .viz-stat-value { font-size:clamp(22px,5.2vw,30px); }
  legend>span:last-child { font-size:19px; }
}
@media(max-width:380px) {
  .results { grid-template-columns:1fr; }
  .viz-stat-value { font-size:34px; }
}

/* Full-width questionnaire and results in normal document flow. */
header { padding-bottom:0; }
.toolbar h1 { font-size:20px; line-height:1.4; letter-spacing:0; margin:0; }
.workspace { display:block; }
.result-column { position:static; width:100%; margin-bottom:28px; }
.results { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.workspace form { width:100%; }
footer { max-width:none; }
@media(min-width:701px) {
  .fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  #ssic-ptqf { padding-bottom:24px; }
  .result-column { margin-bottom:24px; }
  .results { grid-template-columns:1fr; }
  .viz-stat-value { font-size:34px; }
  .score-subtitle { display:block; }
}

/* Keep native controls and fieldsets inside the mobile viewport, including Safari. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; }
body { width:100%; min-width:0; overflow-x:hidden; }
@supports (overflow:clip) { html,body { overflow-x:clip; } }
#ssic-ptqf { width:100%; min-width:0; }
.workspace,form,fieldset,.fields,.language-panel,.card,.toolbar>div { min-width:0; max-width:100%; }
fieldset { width:100%; min-inline-size:0; }
legend { display:block; float:left; width:100%; max-width:100%; padding:0; }
.section-intro { clear:both; padding-top:10px; margin-top:0; }
.form-control,.form-select { max-width:100%; min-inline-size:0; }
.form-select {
  -webkit-appearance:none; appearance:none;
  padding-right:34px; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23183649' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.form-label,.form-check,.hint,.section-intro,legend,.card dt { overflow-wrap:anywhere; }
.brand { flex-wrap:wrap; }
.brand-mark { flex-shrink:0; }
.actions { flex-wrap:wrap; }

/* Larger type and spacing for comfortable reading on every screen. */
:root { font-size:18px; line-height:1.65; }
.toolbar h1 { font-size:26px; line-height:1.4; }
legend>span:last-child { font-size:24px; line-height:1.45; }
h3 { font-size:20px; line-height:1.5; }
.form-label,.form-check { font-size:18px; line-height:1.6; }
.form-control,.form-select { font-size:18px; line-height:1.5; min-height:56px; }
.hint,.text-small,.section-intro,.result-help,#spouse-empty { font-size:16px; line-height:1.75; }
button { font-size:16px; min-height:50px; }
.score-label { font-size:20px; line-height:1.5; }
.score-subtitle { font-size:16px; line-height:1.6; }
.card #ptqf-status,.card #crs-status { font-size:16px; line-height:1.75; }
.card summary,summary,.card dl { font-size:16px; line-height:1.65; }
.threshold-label { font-size:14px; line-height:1.6; }
.viz-stat-value { font-size:44px; }
.eyebrow,.results-heading .eyebrow,.live-indicator { font-size:14px; }
.results-heading { flex-wrap:wrap; gap:8px 16px; }
.section-number { font-size:14px; width:36px; height:36px; }
.brand { font-size:14px; }
.brand-sub,.brand-label { font-size:12px; }
.fields { gap:24px 20px; }
@media(max-width:700px) {
  .toolbar h1 { font-size:24px; }
  legend>span:last-child { font-size:22px; }
  .viz-stat-value { font-size:38px; }
  fieldset { padding:20px 16px; }
}

/* Score-first dashboard with focused input windows. */
#ssic-ptqf { max-width:1240px; padding-bottom:50px; }
.brand { border-bottom:0; }
.brand-label { background:#e4f4f3; border:0; color:#075f63; font-weight:700; }
.toolbar { border-top:1px solid #dce5e9; padding:34px 0 30px; align-items:center; }
.toolbar h1 { font-size:clamp(30px,4vw,46px); letter-spacing:-.04em; line-height:1.15; margin:0 0 10px; }
.toolbar .hint { max-width:540px; font-size:17px; }
.actions { align-items:center; }
.primary-action { color:white; background:#087e80; border-color:#087e80; padding:12px 22px; box-shadow:0 9px 20px #087e8026; }
.primary-action:hover { background:#096a6d; color:white; }
.primary-action span { margin-left:10px; font-size:20px; }
.results-heading { margin:6px 2px 18px; }
.results { gap:20px; }
.card { min-height:330px; padding:32px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 16px 36px #17384a0b; }
.ptqf-card { background:linear-gradient(135deg,#0b2a3b,#133f54); }
.crs-card { background:linear-gradient(135deg,#fff,#f9fcfc); }
.viz-stat-value { font-size:clamp(48px,5vw,70px); font-weight:750; letter-spacing:-.06em; margin:28px 0 16px; }
.score-label { font-size:22px; }
.score-subtitle { font-size:16px; }
#ptqf-status,#crs-status { margin-top:15px; max-width:540px; }
.topics { margin-top:42px; }
.topics-heading { display:flex; justify-content:space-between; gap:25px; align-items:end; margin-bottom:18px; }
.topics-heading h2 { font-size:25px; letter-spacing:-.03em; margin:5px 0 0; }
.topics-heading p { color:#425e6e; font-size:15px; margin:0; }
.topic-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.topic-button { text-align:left; min-height:128px; display:flex; flex-direction:column; justify-content:space-between; background:white; border:1px solid #d8e5e9; border-radius:14px; padding:17px; font-size:17px; box-shadow:0 5px 12px #17384a05; }
.topic-button:hover,.topic-button:focus-visible { border-color:#087e80; background:#f4fbfa; }
.topic-number { color:#087e80; font-size:13px; letter-spacing:.1em; }
.topic-arrow { align-self:end; color:#087e80; font-size:22px; line-height:1; }
footer { margin-top:45px; }
body.modal-open { overflow:hidden; }
#profile-dialog { position:fixed; border:1px solid #d7e5e9; border-radius:20px; width:min(760px,calc(100vw - 32px)); max-width:none; max-height:min(92dvh,940px); padding:0; margin:auto; background:#f3f6f7; color:#183649; box-shadow:0 30px 90px #092a3b55; overflow:auto; overscroll-behavior:contain; }
#profile-dialog::backdrop { background:#0a2634b8; backdrop-filter:blur(3px); }
.dialog-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:15px; background:#f3f6f7; padding:22px 28px 16px; border-bottom:1px solid #e1e9ec; }
.dialog-top h2 { margin:2px 0 0; font-size:25px; line-height:1.3; }
.close-dialog { border-radius:50%; width:44px; height:44px; padding:0; flex:none; }
.dialog-steps { display:flex; gap:10px; padding:18px 28px; }
.dialog-steps button { flex:1; min-width:0; border-radius:8px; color:#58707e; background:white; padding:7px 5px; }
.dialog-steps button.active { background:#102f42; color:white; border-color:#102f42; }
#profile-dialog form { padding:0 28px; }
#profile-dialog fieldset { margin:0; padding:24px; border-radius:14px; }
#profile-dialog .fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
#profile-dialog .section-intro { margin-bottom:24px; }
.dialog-actions { position:sticky; bottom:0; z-index:5; display:flex; justify-content:space-between; gap:12px; padding:16px 28px; background:#f3f6f7; border-top:1px solid #dce5e9; }
.dialog-actions #previous-section[hidden] + #next-section { margin-left:auto; }
#profile-dialog.inline-questionnaire {
  position:static;
  width:100%;
  max-height:none;
  margin:24px 0 0;
  overflow:visible;
  box-shadow:none;
  scroll-margin-top:16px;
}
.inline-questionnaire .dialog-top,
.inline-questionnaire .dialog-actions { position:static; }
#profile-dialog.inline-questionnaire .fields { grid-template-columns:minmax(0,1fr); }
@media(max-width:900px) { .topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .toolbar { flex-direction:column; align-items:flex-start; } }
@media(max-width:700px) {
  #ssic-ptqf { padding:0 16px 32px; }
  .brand { padding:18px 0; }
  .toolbar { padding:26px 0; }
  .toolbar h1 { font-size:32px; }
  .toolbar .hint { font-size:16px; }
  .actions { width:100%; gap:8px; }
  .actions .primary-action { width:100%; }
  .results { grid-template-columns:1fr; gap:14px; }
  .card { min-height:270px; padding:26px; }
  .viz-stat-value { font-size:clamp(47px,11vw,64px); }
  .topics { margin-top:35px; }
  .topics-heading { display:block; }
  .topics-heading p { margin-top:8px; }
  .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topic-button { min-height:115px; padding:14px; font-size:16px; }
  #profile-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:16px; }
  .dialog-top { padding:18px 18px 14px; }
  .dialog-top h2 { font-size:22px; }
  .dialog-steps { padding:14px 18px; gap:6px; }
  #profile-dialog form { padding:0 14px; }
  #profile-dialog fieldset { padding:20px 16px; }
  #profile-dialog .fields { grid-template-columns:minmax(0,1fr); }
  .dialog-actions { padding:14px 18px; }
  .dialog-actions button { min-width:0; padding-inline:12px; }
}
@media(max-width:360px) { .topic-grid { grid-template-columns:1fr; } .topic-button { min-height:82px; flex-direction:row; align-items:center; } }

.analysis-contact {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 24px;
  margin-bottom:30px;
  padding:18px 22px;
  border:1px solid #bcdcd3;
  border-radius:14px;
  background:#eaf7f2;
}
.analysis-contact h2 { margin:0; font-size:19px; }
.analysis-contact p { margin:3px 0 0; color:#375867; font-size:15px; }
.whatsapp-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:10px 17px;
  border-radius:9px;
  background:#12654c;
  color:#fff;
  font-weight:700;
  font-size:15px;
  text-align:center;
  text-decoration:none;
}
.whatsapp-action:hover { background:#0d513d; }
.language-target {
  margin:16px 0;
  padding:12px 14px;
  border-radius:10px;
  background:#eaf5f4;
}
.language-target .hint { margin:6px 0 0; }
.language-skill {
  min-width:0;
  padding:12px;
  border:1px solid #dce8ec;
  border-radius:10px;
  background:#fff;
}
.language-skill h4 { margin:0 0 10px; font-size:16px; line-height:1.4; }
.language-skill-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.language-skill-fields .form-label { font-size:14px; }
.language-skill-fields select { padding-left:8px; padding-right:24px; background-position:right 6px center; }
.language-skill-fields input { padding-inline:8px; }
.language-skill-info { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:6px; }
.language-skill-info .hint { font-size:13px; }
.cefr-value { padding:3px 8px; border-radius:6px; background:#eaf5f4; color:#124c50; font-size:13px; font-weight:700; }
@media(max-width:700px) {
  .analysis-contact { padding:16px; }
  .whatsapp-action { width:100%; }
}