:root{
  --bg:#f8f8f8; --card:#f4f4f4; --card-border:#888888; --ink:#0c1421; --heading:#333333;
  --muted:#7d7d7d; --line:#d8daeb; --strong:#626262; --input-bg:#fefefe; --input-border:#7d7d7d;
  --placeholder:#989898; --accent:#626262; --accent-hover:#4a4a4a; --consent-bg:#f0f0f0;
  --chip:#d9d9d9; --chip-strong:#949494; --chip-ink:#7d7d7d;
  --ok:#06bf5c; --bad:#df3d43;
  --shadow:0 12px 32px rgba(12,20,33,.07);
}
[data-theme="dark"]{
  --bg:#272c35; --card:#1e1f22; --card-border:#aab2c0; --ink:#f5f6f8; --heading:#e8e8ea;
  --muted:#9a9aa3; --line:#33343a; --strong:#77787e; --input-bg:#232428; --input-border:#6f7078;
  --placeholder:#6f7078; --accent:#626262; --accent-hover:#75767c; --consent-bg:#232428;
  --chip:#3a3b40; --chip-strong:#6f7078; --chip-ink:#9a9aa3;
  --ok:#06bf5c; --bad:#f2555a;
  --shadow:0 12px 32px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Mozilla Text','Google Sans',-apple-system,"Segoe UI",Roboto,sans-serif;margin:0;background:var(--bg);color:var(--ink);transition:background .2s}
.top-shell{position:fixed!important;top:0;right:0;left:0;width:100%;height:123px;z-index:1000;background:var(--bg);transform:translateZ(0);}
.ro-grid-bg > .top-shell{position:fixed!important;z-index:1000!important;}
header{height:59px;background:var(--bg);border-bottom:1px solid var(--card);padding:12px 24px;display:flex;align-items:center;gap:16px}
header h1{font-size:18px;margin:0;font-weight:600;color:var(--ink)}
header h1 a{color:inherit;text-decoration:none}
header .small{font-size:13px;color:var(--muted);font-weight:400}
.badge{font-size:.75rem;padding:.15rem .55rem;border-radius:999px;background:var(--chip);color:var(--chip-ink)}
.badge.warn{background:#fef3c7;color:#92400e}
.workflow{width:100%;max-width:1960px;margin:123px auto 0;display:flex;overflow-x:hidden;scroll-behavior:smooth;align-items:flex-start;background:var(--card)}
.workflow-step{flex:0 0 100%;min-width:0;padding:12px 16px 48px;display:grid;gap:20px}
.card{min-width:0;background:var(--card);border:3px solid var(--card-border);border-radius:10px;padding:1.4rem 1.6rem;box-shadow:var(--shadow);position:relative}
/* blueprint preview (Step 2): Focus Area x difficulty grid + gaps */
.bp-h{font-size:.95rem;font-weight:600;color:var(--heading);margin:1.1rem 0 .3rem}
#blueprint{width:100%;max-width:100%;min-width:0}
.bp-summary{margin:0 0 .55rem;font-size:.85rem;color:var(--heading);font-weight:500}
.bp-table-wrap{width:100%;max-width:100%;min-width:0;background:var(--input-bg);
  border:2px solid var(--input-border);border-radius:5px;padding:.5rem;overflow-x:auto}
.bp-grid{width:100%;border-collapse:separate;border-spacing:3px;font-size:.78rem;table-layout:fixed}
.bp-grid th{font-weight:500;color:var(--muted);font-size:.8rem;padding:.2rem .3rem}
.bp-grid thead th{text-align:center}
.bp-rowhead{width:150px;text-align:left!important;color:var(--heading)!important;
  white-space:normal;line-height:1.25}
/* One pill per Assessment Point; shade represents relative candidate weight. */
.bp-cell{vertical-align:middle;text-align:center;padding:2px}
.bp-pill{display:block;max-width:100%;margin:2px auto;padding:.2rem .45rem;border-radius:9px;
  font-size:.74rem;line-height:1.3;color:var(--heading);cursor:default;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb, var(--accent) calc((0.14 + 0.86 * var(--shade, 0)) * 45%), var(--input-bg));
  border:1.5px solid transparent}
/* Conceptual borrows the pill's own fill for its border: it reads as
   borderless, but keeps the same box size as code/both so the pills in a cell
   stay aligned. */
.bp-concept{border-style:solid;
  border-color:color-mix(in srgb, var(--accent) calc((0.14 + 0.86 * var(--shade, 0)) * 45%), var(--input-bg))}
.bp-code{border-style:solid;border-color:var(--strong)}
.bp-both{border-style:dashed;border-color:var(--strong)}
.bp-pill.bp-selected{border:2px solid var(--ok);cursor:pointer}
.bp-pill.bp-unselected{border:2px dashed var(--bad);cursor:pointer}
.bp-legend{display:flex;flex-wrap:wrap;gap:.9rem;margin:.55rem 0 .2rem;font-size:.8rem;color:var(--muted)}
.bp-legend span{display:flex;align-items:center;gap:.4rem}
.bp-legend .bp-pill{display:inline-block;width:26px;height:15px;margin:0;padding:0;--shade:.55}
/* Starts at the input surface, not at the faintest pill shade: the legend sits
   on the card, so a faint start blended into it and the swatch looked clipped. */
.bp-legend .bp-swatch{width:44px;height:15px;border-radius:9px;display:inline-block;
  background:linear-gradient(to right, var(--input-bg),
    color-mix(in srgb, var(--accent) 45%, var(--input-bg)))}
.bp-note{margin:.5rem 0 .2rem;font-size:.82rem;color:var(--muted);line-height:1.5}
.gen-overlay{position:fixed;inset:0;background:rgba(255,255,255,.52);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  display:flex;flex-direction:column;gap:.9rem;align-items:center;justify-content:center;z-index:100}
[data-theme="dark"] .gen-overlay{background:rgba(22,22,24,.5)}
.gen-overlay p{font-weight:500;margin:0;color:var(--ink)}
.gen-panel{width:min(520px,88%);display:grid;justify-items:center;gap:.7rem;text-align:center}
.gen-panel .small{line-height:1.45}
.loading-spinner{position:relative;width:48px;height:48px;flex:0 0 48px}
.loading-spinner i,.loading-spinner b{position:absolute;display:block;box-sizing:border-box;font-size:0;font-style:normal}
.loading-spinner--large i,.loading-spinner--large b{width:16px;height:16px;background:#d9d9d9}
.loading-spinner--large i:nth-child(1),.loading-spinner--large b{left:8px;top:8px}
.loading-spinner--large i:nth-child(2){left:28px;top:8px}
.loading-spinner--large i:nth-child(3){left:28px;top:28px}
.loading-spinner--large i:nth-child(4){left:8px;top:28px}
.loading-spinner--large b{background:#2d2d2d;animation:loading-large 1.05s steps(4,end) infinite}
.loading-spinner--small{width:48px;height:48px}
.loading-spinner--small i,.loading-spinner--small b{width:8px;height:8px;top:20px;background:#d9d9d9}
.loading-spinner--small i:nth-child(1),.loading-spinner--small b{left:8px}
.loading-spinner--small i:nth-child(2){left:20px}
.loading-spinner--small i:nth-child(3){left:32px}
.loading-spinner--small b{background:#2d2d2d;animation:loading-small .8s steps(3,end) infinite}
@keyframes loading-large{0%,24%{transform:translate(0,0)}25%,49%{transform:translate(20px,0)}50%,74%{transform:translate(20px,20px)}75%,100%{transform:translate(0,20px)}}
@keyframes loading-small{0%,32%{transform:translateX(0)}33%,65%{transform:translateX(12px)}66%,100%{transform:translateX(24px)}}
/* Figma: no rounded corners on controls or cards. Spinners stay circular. */
button,input,select,textarea,.card,.drop,.chip,.badge,.url-wrap,.consent,.plist li,.q,.opt,
.bp-pill,.gen-overlay,.context-file-tag,.context-file-remove,.framework-config input,
.difficulty-control,.generation-mode label,.assessment-perspective,.theme-toggle,.theme-toggle .seg,#themeToggle,
.step .dot,.step-nav-arrow,.review-feedback,.filerow,.local-platforms button,.local-cmd,.local-copy{
  border-radius:0!important}
.area-row input[type=range]::-webkit-slider-thumb,.area-row input[type=range]::-moz-range-thumb{
  border-radius:0!important}
.card h2{margin:.1rem 0 .3rem;font-size:1.05rem;font-weight:600;color:var(--heading)}
.sub{color:var(--muted);font-size:.85rem;margin:0 0 1rem}
label{display:block;font-size:.85rem;color:var(--muted);margin:.5rem 0 .2rem}
input[type=text],input[type=number],select,textarea{width:100%;padding:.55rem .7rem;border:2px solid var(--input-border);border-radius:0;font:inherit;background:var(--input-bg);color:var(--ink)}
select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;background-image:url('/static/assets/btn_dropdown.svg');
  background-repeat:no-repeat;background-position:right 4px center;background-size:8px 16px}
input[type=number]{-moz-appearance:textfield;padding-right:1.6rem;background-image:url('/static/assets/number_choose.svg');
  background-repeat:no-repeat;background-position:right 4px center;background-size:8px 16px}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
textarea{min-height:60px}
/* Context fields start one line tall and grow with the text, then scroll. */
textarea.autogrow{min-height:0;height:2.5rem;max-height:11rem;overflow-y:auto;resize:vertical}
.context-fields{display:grid;gap:.4rem;margin:.5rem 0 1rem}
.context-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;align-items:stretch}
.context-control textarea:not(.autogrow){min-height:76px;resize:vertical}
.context-upload{min-width:96px}
.context-input{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.35rem;min-height:2.5rem;padding:.25rem .35rem;
  border:2px solid var(--input-border);border-radius:5px;background:var(--input-bg)}
.context-input:focus-within{border-color:var(--strong)}
.context-tags{display:contents}
.context-file-tag{display:inline-flex;align-items:center;gap:.3rem;max-width:16rem;min-height:1.75rem;padding:.25rem .35rem .25rem .5rem;
  border:1px solid #c1c1c1;border-radius:4px;background:#ececec;color:#4e4e4e;font-size:.8rem;
  line-height:1.2;white-space:nowrap}
.context-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.context-file-remove{width:18px;height:18px;flex:0 0 18px;padding:0;border:0;border-radius:3px;background:transparent;
  color:#4e4e4e;font-size:1rem;font-weight:400;line-height:1;letter-spacing:0;display:grid;place-items:center}
.context-file-remove:hover{background:#d8d8d8;color:#222}
.context-input textarea.autogrow{flex:1 1 12rem;width:auto;min-width:8rem;height:1.75rem;padding:.25rem .35rem;
  border:0;background:transparent;resize:vertical;outline:none}
.framework-config{display:flex;gap:13px;align-items:flex-start;margin-top:.5rem}
.generation-mode{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:.65rem 0 1rem;padding:0;border:0}
.generation-mode legend{font-size:.85rem;color:var(--muted);margin-bottom:.25rem}
.generation-mode label{display:flex;gap:.55rem;align-items:flex-start;margin:0;padding:.65rem .75rem;border:2px solid var(--input-border);border-radius:5px;background:var(--input-bg);cursor:pointer}
.generation-mode label:has(input:checked){border-color:var(--strong)}
.generation-mode input{margin-top:.18rem}
.generation-mode span{display:grid;gap:.15rem;color:var(--ink)}
.generation-mode small{color:var(--muted);line-height:1.35}
.framework-field{flex:1 1 0;min-width:0}
.framework-field label{white-space:nowrap}
.question-count-field{flex:0 0 124px}
.correct-count-field{flex:0 0 108px}
.range-count-field{flex-basis:140px}
.difficulty-field{flex:0 0 112px}
.difficulty-control{height:2.5rem;display:flex;align-items:center;gap:8px;padding:0 11px;
  border:2px solid var(--input-border);border-radius:5px;background:var(--input-bg)}
.difficulty-icon-wrap{position:relative;width:22px;height:22px;flex:0 0 22px}
.difficulty-icon{position:absolute;left:50%;top:50%;width:32px;height:32px;max-width:none;
  object-fit:contain;transform:translate(-50%,-50%)}
.difficulty-control input[type=number]{width:48px;height:28px;min-width:48px;padding:0 0 0 2px;border:0;background:transparent;
  line-height:28px;text-align:center}
.correct-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.2rem}
.correct-range input[type=number]{min-width:0;padding:.55rem .35rem}
.correct-range span{color:var(--muted)}
button{background:var(--accent);color:#fff;border:0;border-radius:5px;padding:.6rem 1rem;font:inherit;font-weight:500;letter-spacing:.03em;cursor:pointer}
button:hover{background:var(--accent-hover)}
button.secondary{background:var(--input-bg);color:var(--ink);border:2px solid var(--strong)}
button.secondary:hover{background:var(--card)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:.8rem;flex-wrap:wrap}.row>div{flex:1;min-width:130px}
.drop{border:2.5px dashed var(--input-border);border-radius:10px;padding:2rem 1rem;text-align:center;transition:border-color .15s, background .15s}
.drop.hover{border-color:var(--ink);background:var(--consent-bg)}
.drop .icon{width:52px;height:52px;margin:0 auto .6rem;color:var(--muted)}
.drop-title{font-weight:600;margin:.2rem 0}
.drop-sub{color:var(--muted);font-size:.8rem;margin:.2rem 0 1rem}
.or-label{color:var(--muted);font-size:.85rem;margin:1rem 0 .4rem}
.url-wrap{display:flex;gap:.6rem;align-items:center;border:2.5px solid var(--input-border);border-radius:5px;padding:.45rem .45rem .45rem .9rem;background:var(--input-bg)}
.url-wrap input{border:0;background:transparent;padding:.35rem 0;flex:1;outline:none}
.filerow{display:flex;align-items:center;gap:.8rem;border:2px solid var(--input-border);border-radius:5px;padding:.7rem .9rem;margin-top:.8rem;background:var(--input-bg)}
.filerow .fname{font-weight:500}
.filerow .fmeta{color:var(--muted);font-size:.8rem}
.filerow .status-ok{color:var(--ok)}
.filerow .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.consent{font-size:.8rem;color:var(--ink);background:var(--consent-bg);border:2.5px solid var(--input-border);border-radius:5px;padding:.7rem .9rem;margin:.9rem 0}
.err{color:var(--bad);font-size:.85rem;white-space:pre-wrap}
.okmsg{color:var(--ok);font-size:.85rem}
.plist{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.plist li{padding:.55rem .8rem;border:1px solid var(--line);background:var(--input-bg);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:center;cursor:pointer;border-radius:5px}
.plist li:hover{border-color:var(--input-border)}
.plist .project-delete{padding:.1rem .25rem;border:0;background:transparent;color:var(--ink);font-size:1.25rem;line-height:1}
.plist .project-delete:hover{background:transparent;color:var(--muted)}
.assessment-history{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.5rem .75rem;
  padding:.5rem .7rem;border:1px solid var(--line);border-radius:5px;background:var(--input-bg);margin:.35rem 0}
.assessment-summary{min-width:0}
.assessment-delete{width:16px;height:16px;padding:0;border:0;background:transparent;color:#626262;
  font-size:16px;font-weight:400;line-height:1;letter-spacing:0;display:grid;place-items:center}
.assessment-delete:hover{background:transparent;color:var(--muted)}
.assessment-history .results,.assessment-history .detail{grid-column:1 / -1}
.assessment-history .results:empty{display:none}
.q{border:1px solid var(--line);border-radius:12px;padding:1rem;margin:.8rem 0}
.q .status{float:right;font-size:.75rem;padding:.15rem .55rem;border-radius:999px}
.status.draft{background:var(--chip);color:var(--chip-ink)}
.status.approved{background:#dcfce7;color:#166534}.status.rejected{background:#fee2e2;color:#991b1b}
[data-theme="dark"] .status.approved{background:#123b26;color:#5ee6a1}
[data-theme="dark"] .status.rejected{background:#3d1517;color:#ff9a9e}
.opt{display:flex;gap:.5rem;align-items:center;margin:.3rem 0}
.opt-preview{display:none}
.opt input[type=text]{flex:1}
.opt .drag-handle{display:inline-flex;align-items:center;justify-content:center;width:8px;height:16px;flex:0 0 8px;color:var(--muted);cursor:grab;border-radius:0;touch-action:none}
.opt .drag-handle svg{display:block;width:8px;height:12px}
.opt .drag-handle:hover{background:transparent}
.opt .drag-handle:active{cursor:grabbing}
.opt.dragging{opacity:.45}
.opt.drop-above{box-shadow:0 -2px 0 var(--accent)}
.opt.drop-below{box-shadow:0 2px 0 var(--accent)}
.q .approve{background:var(--input-bg);color:var(--ok);border:2px solid var(--ok)}
.q .approve:hover{background:rgba(6,191,92,.10)}
.q .approve.is-approved{background:var(--ok);color:#fff;border-color:#05913f}
.q .approve.is-approved:hover{background:#05a34e}
.review-heading{display:flex;align-items:center;gap:.8rem}
.review-selection{margin-left:auto;display:flex;align-items:center;gap:.65rem;font-size:.8rem;font-weight:400;color:var(--muted)}
.auto-select{padding:.38rem .65rem;font-size:.78rem;white-space:nowrap}
.review-decisions{display:flex;flex-wrap:wrap;gap:.4rem;margin:.65rem 0 0}
.review-decision.decision-approved.selected{background:var(--ok);border-color:var(--ok);color:#fff}
.review-decision.decision-valid.selected{background:var(--strong);border-color:var(--strong);color:var(--card)}
.review-decision.decision-rejected.selected{background:var(--bad);border-color:var(--bad);color:#fff}
.review-decision.decision-not-intended.selected{background:#1f6fd1;border-color:#1f6fd1;color:#fff}
.review-decision.decision-others.selected{background:var(--strong);border-color:var(--strong);color:var(--card)}
.review-note-field textarea{width:100%;min-height:2.2rem}
.evidence-toggle>summary{cursor:pointer;color:var(--muted)}
.evidence{font-size:.78rem;color:var(--muted);background:var(--bg);border-radius:10px;padding:.5rem .7rem;margin-top:.5rem}
.qflags{font-size:.78rem;background:#fef3c7;color:#92400e;border-radius:5px;padding:.4rem .6rem;margin:.45rem 0}
[data-theme="dark"] .qflags{background:#3d2f0a;color:#f5d67a}
.review-feedback{margin-top:.55rem;padding:.5rem .65rem;border:1px solid var(--line);border-radius:7px;background:var(--input-bg)}
.review-feedback summary{cursor:pointer;font-size:.82rem;color:var(--muted)}
.review-feedback .small{margin:.45rem 0}
.review-feedback-grid{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr);gap:.65rem}
.review-feedback textarea{min-height:2.65rem}
.option-verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.45rem;margin-top:.45rem}
.option-verdict{display:flex;align-items:center;gap:.4rem;margin:0}
.option-verdict select{min-width:0;padding-top:.4rem;padding-bottom:.4rem}
@media(max-width:680px){.review-feedback-grid{grid-template-columns:1fr}.review-heading{align-items:flex-start;flex-direction:column}.review-selection{margin-left:0;flex-wrap:wrap}}
.small{font-size:.8rem;color:var(--muted)}
.security-scan{font-size:.8rem;line-height:1.45;margin:.35rem 0 .7rem;padding:.55rem .7rem;
  border:1px solid var(--line);border-radius:6px;background:var(--input-bg)}
.security-scan.clean{border-left:4px solid var(--ok)}
.security-scan.filtered,.security-scan.review{border-left:4px solid #d99a00}
.security-scan strong{color:var(--heading)}
.security-scan ul{margin:.35rem 0 0;padding-left:1.2rem}
.security-scan li+li{margin-top:.2rem}
.local-setup{display:grid;gap:.55rem;margin:.35rem 0 .15rem;padding:.7rem .8rem;
  border:2px solid var(--input-border);border-radius:5px;background:var(--chip);font-size:.8rem;color:var(--ink)}
.local-setup.hidden{display:none}
.local-setup.ready{display:block;gap:0;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.local-setup.ready .local-status{text-align:right;font-size:.72rem;line-height:1;color:var(--muted)}
.local-status{text-align:center;color:var(--muted);font-size:.92rem;line-height:1.35}
.local-instructions{display:grid;gap:.45rem;line-height:1.45}
.local-instructions p{margin:0}
.local-instructions ol{margin:0;padding-left:1.25rem}
.local-instructions a{color:var(--ink);text-underline-offset:2px}
.local-platforms{display:flex;gap:.3rem;margin-top:.05rem}
.local-platforms button{padding:.25rem .55rem;border:1px solid transparent;border-radius:4px;background:transparent;
  color:var(--ink);font-size:.78rem;font-weight:400;letter-spacing:0}
.local-platforms button:hover{background:rgba(255,255,255,.45)}
.local-platforms button.active{border-color:var(--input-border);background:var(--input-bg);font-weight:500}
.local-command{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.45rem;min-width:0;
  padding:.28rem .35rem .28rem .55rem;border-radius:5px;background:var(--card)}
.local-command code{min-width:0;overflow-x:auto;color:var(--ink);font:inherit;white-space:nowrap;scrollbar-width:thin}
.local-copy{min-width:64px;padding:.28rem .55rem;border:0;border-radius:4px;background:var(--chip-strong);
  color:#fff;font-size:.76rem;font-weight:500;letter-spacing:0}
.local-copy:hover{background:var(--strong)}
.local-copy.copied{background:var(--strong)}
.local-actions{display:flex;align-items:center;justify-content:center;gap:.35rem}
.local-actions button{padding:.32rem .6rem;font-size:.78rem}
.local-progress{width:100%;height:5px;border-radius:5px;background:var(--line);overflow:hidden}
.local-progress i{display:block;height:100%;width:0;background:var(--accent)}
a{color:var(--accent)}
.hidden{display:none}
:root{
  --radar-grid:var(--line); --radar-fill:rgba(98,98,98,.26); --radar-stroke:var(--strong);
  --radar-dot:var(--strong); --radar-dot-ring:var(--card); --radar-label:var(--muted);
}
.assessment-perspective{margin:.8rem 0 1rem;padding:.8rem 1rem;border:1px solid var(--card-border);border-radius:8px}
.perspective-heading,.perspective-scale{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.perspective-heading span{font-size:.9rem;color:var(--muted)}
.perspective-scale{margin-top:.45rem}
.perspective-scale>span{white-space:nowrap;font-size:.85rem;color:var(--muted)}
.perspective-scale input[type=range]{flex:1;min-width:140px}
.perspective-plan{margin:.45rem 0 0}
[data-theme="dark"]{
  --radar-fill:rgba(119,120,126,.32); --radar-dot-ring:var(--card);
}
.radar-wrap{display:flex;gap:1.4rem;align-items:stretch;flex-wrap:wrap;margin-top:.4rem}
.radar-panel{background:transparent;border-radius:0;padding:5px 0;flex:0 0 auto;display:flex;align-items:center}
#radar{display:block;width:300px;height:260px;max-width:100%}
#radar .radar-grid{fill:none;stroke:var(--radar-grid);stroke-width:1}
#radar .radar-spoke{stroke:var(--radar-grid);stroke-width:1}
#radar .radar-area{fill:var(--radar-fill);stroke:var(--radar-stroke);stroke-width:2;stroke-linejoin:round}
#radar .radar-dot{fill:var(--radar-dot);stroke:var(--radar-dot-ring);stroke-width:1.5}
#radar .radar-label{fill:var(--radar-label);font-size:10px}
.fw-areas-h{margin:8px 0 6px;font-size:12px;color:var(--muted)}
.area-side{flex:1;min-width:250px;display:grid;gap:.45rem;align-content:start}
.area-list{flex:1;min-width:250px;display:grid;gap:.45rem;align-content:start}
.area-row{display:flex;gap:.5rem;align-items:center}
.area-row .aname{flex:1.2;min-width:90px}
.area-row input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:80px;height:16px;background:transparent;cursor:pointer}
.area-row input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:transparent;border:1px solid var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:var(--pct,0%) 100%}
.area-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:0;background:var(--accent);border:2px solid var(--card)}
.area-row input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:transparent;border:1px solid var(--accent)}
.area-row input[type=range]::-moz-range-progress{height:5px;border-radius:3px;background:var(--accent)}
.area-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:0;background:var(--accent);border:2px solid var(--card)}
.area-row .aval{width:1.4em;text-align:center;color:var(--muted);font-size:.85rem}
.area-row .adel{padding:.2rem .6rem}
.add-area{display:flex;gap:.5rem;margin-top:.5rem}
#questions{max-height:62vh;overflow-y:auto;padding-right:.4rem}
#questions::-webkit-scrollbar{width:8px}
#questions::-webkit-scrollbar-track{background:transparent}
#questions::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
#questions::-webkit-scrollbar-thumb:hover{background:var(--placeholder)}
.review-supplement{margin:.75rem 0 0;padding:.75rem;border:1px solid var(--line);border-radius:6px;background:var(--bg);display:flex;gap:.75rem;align-items:center;justify-content:space-between}
.review-supplement.hidden{display:none}
.review-supplement strong{display:block;margin-bottom:.15rem;color:var(--heading)}
.review-supplement button{white-space:nowrap}
/* Theme + Log out */
#themeToggle{width:60px;height:32px;margin-left:auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:0;background:var(--ro-chrome,#f2f2f2);overflow:visible}
#themeToggle:hover{background:var(--ro-chrome,#f2f2f2)}
#themeToggle .seg{position:relative;width:24px;height:24px;border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--muted);background:transparent;padding:0}
#themeToggle .seg.active{background:transparent;color:var(--ink);box-shadow:none}
#themeToggle .seg.active::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background:rgba(233,190,111,.35);
  box-shadow:inset -2px -2px 0 rgba(85,85,85,.5),inset 2px 2px 0 rgba(255,255,255,.75)}
#themeToggle .theme-icon{position:relative;z-index:1;width:24px;height:24px;display:block;object-fit:contain}
[data-theme="dark"] #themeToggle .seg.active::before,
html.dark #themeToggle .seg.active::before{
  opacity:1;background:rgba(62,129,177,.15);
  box-shadow:inset -2px -2px 0 rgba(17,17,17,.5),inset 2px 2px 0 rgba(255,255,255,.1)}
#logout{box-sizing:border-box;width:100px;height:32px;padding:0 11px;background:var(--ro-chrome,#f2f2f2);color:var(--ro-chrome-ink,#626262);border:0;font:500 12px "Mozilla Text",var(--ro-font-ui);letter-spacing:0;box-shadow:var(--ro-btn-raised)}
.actions{display:flex;justify-content:center;margin:.9rem 0 0}
.actions button{min-width:150px}
.stepper{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:13px;width:100%;max-width:1960px;height:64px;margin:0 auto;padding:12px 0;background:var(--bg);align-items:center}
.step-track{display:flex;min-width:0;height:50px}
.step-nav-arrow{box-sizing:border-box;display:flex;width:24px;height:24px;padding:5px 4px 5px 2px;
  justify-content:center;align-items:center;gap:10px;flex-shrink:0;aspect-ratio:1/1;align-self:center;overflow:hidden;
  border:0;border-radius:0;background:#fbfbfb;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.75),inset -2px -2px 0 rgba(153,153,153,.5)}
.step-nav-arrow:hover{background:#fbfbfb}
.step-nav-arrow img{width:8px;height:12px;display:block}
.step-nav-arrow.hidden{display:flex;visibility:hidden;pointer-events:none}
.step{flex:1;position:relative;text-align:center;cursor:pointer;user-select:none;outline:none}
.step.locked{cursor:not-allowed;opacity:1}
.step:focus-visible .dot{outline:1px solid var(--muted)}
/* Stepper. Each 24px box keeps filling-left / number / filling-right, spaced
   apart so the number stays centered; the fills are only spacing now.

   The line meets the box: each connector runs 2px into the boxes on either
   side -- over their bevel, which is 2px -- and is drawn above them, so the
   bevel's shade never cuts the line off short of the box. Nothing has to be
   colour-matched to the bevel. */
.step .dot{width:24px;height:24px;border-radius:0;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:space-between;
  font-family:"Mozilla Text",sans-serif;font-size:11px;font-weight:700;line-height:1;background:#cdcdcd;color:#fff;position:relative;z-index:1;
  border:0;box-shadow:inset -2px -2px 0 #cdcdcd,inset 2px 2px 0 #cdcdcd;transition:background .2s,color .2s,box-shadow .2s}
.step .step-num{flex:0 0 auto}
.step .step-fill,
.step.current .step-fill-left,
.step.current .step-fill-right{
  flex:0 0 2px;width:2px;height:4px;
  background:transparent!important;background-color:transparent!important;box-shadow:none!important
}
.step .lbl{display:block;margin-top:5px;font-family:Oxanium,sans-serif;font-size:12.5px;font-weight:400;color:#cdcdcd}
.step:not(:first-child)::before{content:'';position:absolute;top:10px;right:calc(50% + 10px);width:calc(100% - 20px);height:4px;background:#cdcdcd;box-shadow:none;z-index:2;pointer-events:none;transition:background .2s,box-shadow .2s}
.step.done .dot{background:#a0a0a0;color:#7d7d7d;font-weight:700;box-shadow:inset -2px -2px 0 rgba(85,85,85,.5),inset 2px 2px 0 rgba(255,255,255,.5)}
.step.done .lbl{color:#989898;font-weight:500}
.step.done::before,.step.current::before{background:#a0a0a0;box-shadow:inset 0 -1.5px 0 rgba(85,85,85,.5)}
.step.current .dot{background:#626262;color:#fff;font-weight:700;z-index:3;box-shadow:inset -2px -2px 0 #555,inset 2px 2px 0 rgba(255,255,255,.5)}
.step.current .lbl{color:#7d7d7d;font-weight:600}

/* Step 1 follows the current Figma frame while later workflow controls retain their own sizing. */
#linkStep .card{border-color:var(--muted);padding:19px 23px}
#linkStep .card h2{margin:0;color:var(--heading);font-weight:600;line-height:normal}
#newProject{display:flex;flex-direction:column;gap:14px}
#newProject h2{font-size:17px}
#newProject .sub{margin:0;color:var(--muted);font-size:13.5px;line-height:normal}
#newProject .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:213px;padding:29.5px 13.5px}
#newProject .drop .icon{width:52px;height:52px;margin:0;color:var(--muted)}
#newProject .drop-title{margin:0;font-size:14.5px;font-weight:400;line-height:normal}
#newProject .drop-sub{margin:0;color:var(--muted);font-size:12px;line-height:normal}
#newProject .drop-buttons{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:10px;width:auto}
#newProject .drop-buttons .secondary{height:36px;flex:0 0 auto;padding:0 14px;border-color:var(--strong);background:var(--card);font-size:13.5px;font-weight:400;letter-spacing:0;line-height:normal;white-space:nowrap}
#newProject .or-label{height:16px;margin:0;color:var(--muted);font-size:13px;line-height:16px}
#newProject .url-wrap{height:32px;gap:0;padding:0 6px 0 12px;background:var(--bg)}
#newProject .url-wrap input{padding:0;background:var(--bg);font-size:13.5px;line-height:normal}
#newProject .consent{display:flex;flex-direction:column;gap:10px;min-height:78px;margin:0;padding:8.5px 11.5px;font-size:12px;line-height:14px}
#newProject .consent label{gap:8px!important;margin:0!important;color:var(--ink)!important}
#newProject .actions{margin:0}
#newProject .actions button{min-width:0;padding:11px 22px;font-size:14px;font-weight:400;letter-spacing:.4px;line-height:normal}
#projectErr:empty{display:none}
#linkStep>.card:not(#newProject){display:flex;flex-direction:column;gap:10px}
#linkStep>.card:not(#newProject) h2{font-size:16px}
#linkStep .plist{gap:10px}
#linkStep .plist li{height:34px;gap:10px;padding:8.5px 5px;border:0;border-bottom:1px solid var(--line);border-radius:5px;background:var(--bg)}
#linkStep .plist li:hover{border-color:var(--input-border)}
#linkStep .plist li>span:first-child{font-size:13.5px;color:var(--ink)}
#linkStep .plist li>span:first-child .small{font-size:13.5px;color:var(--ink)}
#linkStep .plist li>span:nth-child(2){font-size:12.5px;color:var(--muted)}
#linkStep .plist .project-delete{width:16px;height:16px;padding:0;color:var(--muted);font-size:16px;font-weight:400;line-height:1;letter-spacing:0;display:grid;place-items:center}
@media (max-width:640px){
  header{height:auto;padding:.7rem 1rem}
  header .small{display:none}
  .stepper{grid-template-columns:24px minmax(0,1fr) 24px;gap:.25rem;padding:.65rem .5rem}
  .step .lbl{font-size:.67rem}
  .workflow{margin:123px auto 0}
  .workflow-step{padding:12px 16px 36px}
  .card{padding:1.1rem}
  #linkStep .card{padding:19px}
  #newProject .consent{height:auto}
  .context-control{grid-template-columns:1fr}
  .generation-mode{grid-template-columns:1fr}
  .framework-config{flex-wrap:wrap}
  .framework-field{flex:1 1 calc(50% - 13px);min-width:130px}
  .question-count-field{flex:0 0 124px;min-width:124px}
  .correct-count-field{flex:0 0 108px;min-width:108px}
  .range-count-field{flex-basis:140px;min-width:140px}
  .difficulty-field{flex:0 0 112px;min-width:112px}
  .local-command{grid-template-columns:1fr}
  .local-copy{justify-self:end}
}

/* Step 2 is three decisions, not one long form: 2-1 chooses what the paper may
   be about, 2-2 the settings that follow from it, 2-3 the coverage it produces.
   Each appears only once the one before it has been answered. */
.substep { border-left: 2px solid var(--line, #d8d8d8); padding-left: 1rem; margin: 1.4rem 0; }
.substep-h { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; }
.substep-actions { margin: .8rem 0 0; }

/* What the assignment contributed. Weight is carried by opacity so the ordering
   reads at a glance without a column of numbers nobody calibrates against. */
.scope-summary { margin: .6rem 0 0; }
.scope-terms { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 .6rem; }
.scope-term { background: var(--chip-bg, #ececec); border: 1px solid var(--chip-line, #c1c1c1);
  color: var(--chip-ink, #4e4e4e); border-radius: 999px; padding: .1rem .5rem; font-size: .82rem; }
.scope-graded summary { cursor: pointer; font-size: .85rem; }
.scope-graded ul { margin: .4rem 0 0; padding-left: 1rem; font-size: .85rem; }
.scope-graded li { margin: .15rem 0; }
.scope-mark { display: inline-block; min-width: 2.1rem; font-variant-numeric: tabular-nums;
  font-weight: 600; }
.scope-summary-empty { font-size: .85rem; margin: .5rem 0 0; }

/* Inline checkbox row inside a framework field (decision-route toggle). */
.checkbox-inline{display:flex;align-items:center;gap:.45rem;font-weight:400;cursor:pointer;white-space:nowrap}
.checkbox-inline input{accent-color:var(--accent, #4a68d9)}

/* Snippet a decision-route question was written from, shown in review. */
.evidence-code{background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.25);border-radius:8px;padding:.6rem .8rem;overflow-x:auto;font-size:.8rem;line-height:1.45;margin:.35rem 0 .2rem;white-space:pre}

/* Assessment Profile (vocabulary pool v2.1) */
.profile-label{display:block;font-weight:600;color:var(--heading);margin:.6rem 0 .35rem}
.profile-label .small{display:block;font-weight:400;color:var(--muted)}
.profile-scope,.profile-focus{margin:.6rem 0}
.profile-row{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(90px,2fr) 3.4rem;
  gap:.6rem;align-items:center;margin:.28rem 0}
.profile-row .pname{min-width:0;font-size:.86rem;color:var(--ink)}
.profile-row .pname small{display:block;color:var(--muted);font-size:.74rem}
.profile-row input[type=range]{width:100%;min-width:80px}
.profile-row .pval{text-align:right;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted)}
.profile-advanced{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.6rem}
.profile-advanced summary{cursor:pointer;font-weight:600;color:var(--heading)}
.profile-point{border:1px solid var(--line);border-radius:6px;padding:.5rem .6rem;margin:.4rem 0;
  background:var(--input-bg)}
.profile-point-head{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.profile-point-head .pw{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem}
.profile-point-head strong{font-size:.9rem}
.profile-point .pmeta{color:var(--muted);font-size:.76rem}
.profile-point-actions{display:flex;gap:.4rem;margin-top:.35rem;flex-wrap:wrap}
.profile-point-actions button{padding:.22rem .5rem;font-size:.76rem;min-width:0}
.profile-why{margin-top:.45rem;font-size:.8rem;color:var(--ink);
  border-left:3px solid var(--chip-strong);padding-left:.6rem}
.profile-why .src{color:var(--muted);display:block;margin-top:.25rem}
.profile-add{margin-top:.8rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.profile-add .context-control{display:flex;gap:.5rem;align-items:center;margin:.3rem 0}
.profile-add select{flex:1;min-width:0}
.badge-policy{font-size:.7rem;padding:.1rem .4rem;border-radius:999px;
  background:var(--chip);color:var(--chip-ink)}
/* Step 2's wait overlay: open the questions already finished. */
.gen-panel__early{display:grid;justify-items:center;gap:.5rem;margin-top:.4rem}
.gen-panel__early p{margin:0}
.gen-panel__rows{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.3rem;text-align:left;font-size:.82rem;line-height:1.35;max-width:36rem}
.gen-panel__rows li{padding:.35rem .6rem;background:var(--ro-panel-bg,transparent);box-shadow:var(--ro-inset-card,none)}
.gen-panel__row-title{font-weight:600;margin-right:.25rem}
/* A take link can carry the whole paper after # (the demo has no server to
   hold it), so it is one truncated line with a copy button, never a wall. */
/* Fixed lengths only: a % max-width counts as auto when a grid sizes the row. */
.take-link{display:inline-block;max-width:min(520px,70vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.take-copy{padding:.1rem .5rem;font-size:.8rem;vertical-align:bottom}