:root{--bg:#f3f6fa;--paper:#fff;--ink:#182338;--muted:#68758a;--line:#dce3ed;--navy:#12233f;--blue:#2869d8;--blue-soft:#eaf2ff;--teal:#157a72;--teal-soft:#e7f6f3;--orange:#bd6b20;--orange-soft:#fff1e4;--red:#b43b4c;--green:#247b53;--shadow:0 18px 48px rgba(29,48,82,.09)}
*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#eaf0fa 0,#f7f8fb 310px,var(--bg) 100%)}button,input,select{font:inherit}button,select{cursor:pointer}.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;padding:11px max(20px,calc((100vw - 1420px)/2));background:rgba(18,35,63,.97);color:#fff;box-shadow:0 8px 28px rgba(8,20,42,.15);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brand>span:last-child{display:block}.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{margin-top:2px;color:#9eb0cc;font-size:10px;letter-spacing:.09em;text-transform:uppercase}.brand-mark{display:block;width:54px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 9px rgba(0,205,221,.2))}
.mode-tabs{display:flex;gap:4px;padding:4px;border:1px solid #3b4d6d;border-radius:11px;background:#0d1c34}.mode-tab{border:0;border-radius:8px;padding:9px 13px;background:transparent;color:#aebbd0;font-size:12px;font-weight:800}.mode-tab.active{background:#fff;color:var(--navy);box-shadow:0 3px 12px rgba(0,0,0,.16)}
.page-shell{width:min(1420px,calc(100% - 32px));margin:26px auto 70px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:27px 29px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.96);box-shadow:var(--shadow)}.eyebrow{margin:0 0 6px;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.16em}.hero h1{margin:0;font-size:clamp(30px,5vw,46px);letter-spacing:-.045em}.hero>div>p:last-child{max-width:780px;margin:9px 0 0;color:var(--muted);line-height:1.55}.legend{display:flex;flex-wrap:wrap;gap:10px;color:#4c5a70;font-size:11px;font-weight:800}.legend span{display:flex;align-items:center;gap:7px;white-space:nowrap}.legend i{display:block;width:29px;height:17px;border:2px solid}.legend-line{border-color:var(--blue)!important;border-radius:3px;background:var(--blue-soft)}.legend-staff{border-color:var(--orange)!important;border-radius:50%!important;background:var(--orange-soft)}
.tool-view{display:none}.tool-view.active{display:block}.workspace-grid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px;margin-top:16px}.control-card,.diagram-card,.task-card,.check-card,.practice-top{border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.97);box-shadow:var(--shadow)}.control-card{padding:22px}.card-heading h2,.diagram-head h2,.practice-top h2{margin:0;font-size:20px}.field{display:grid;gap:6px;margin-top:17px}.field>span,.type-choice legend{color:#59667b;font-size:11px;font-weight:850}.field input,.field select{width:100%;padding:11px 12px;border:1px solid #ccd5e2;border-radius:9px;background:#fff;color:var(--ink);outline:0}.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,105,216,.11)}.type-choice{display:grid;gap:8px;margin:17px 0 0;padding:0;border:0}.type-choice legend{margin-bottom:6px}.type-choice label{display:block;cursor:pointer}.type-choice input{position:absolute;opacity:0;pointer-events:none}.type-card{display:block;padding:11px 12px;border:1px solid var(--line);background:#fafbfc}.type-card.line{border-radius:8px}.type-card.staff{border-radius:999px;padding-inline:18px}.type-card b,.type-card small{display:block}.type-card b{font-size:12px}.type-card small{margin-top:2px;color:var(--muted);font-size:10px}.type-choice input:checked+.type-card.line{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 2px rgba(40,105,216,.1)}.type-choice input:checked+.type-card.staff{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 0 0 2px rgba(189,107,32,.1)}
.primary-btn,.secondary-btn,.place-btn{border:0;border-radius:9px;padding:10px 13px;font-weight:800}.primary-btn{background:var(--navy);color:#fff}.primary-btn:hover{background:#1d3964}.primary-btn:disabled{cursor:not-allowed;opacity:.45}.secondary-btn{border:1px solid var(--line);background:#f8fafc;color:#47556a}.secondary-btn:hover{border-color:#9eabbf;color:var(--ink)}.form-actions{display:flex;gap:8px;margin-top:18px}.form-actions button{flex:1}.text-danger{margin-top:12px;border:0;background:transparent;color:var(--red);font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px}.mini-guide{margin-top:22px;padding:14px;border-radius:11px;background:#f3f6fa;color:#536176;font-size:11px;line-height:1.5}.mini-guide strong{color:var(--ink)}.mini-guide ol{margin:7px 0 0;padding-left:18px}
.diagram-card{min-width:0;overflow:hidden}.diagram-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 21px;border-bottom:1px solid var(--line)}.diagram-actions{display:flex;flex-wrap:wrap;gap:7px}.diagram-scroll{min-height:520px;overflow:auto;background-color:#fbfcfe;background-image:radial-gradient(#dce3ed 1px,transparent 1px);background-size:20px 20px}.org-diagram{display:block;width:100%;min-width:720px;min-height:520px}.diagram-hint{margin:0;padding:11px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.org-connector{fill:none;stroke:#9ba9bc;stroke-width:2}.org-connector.staff{stroke:#c38a53;stroke-dasharray:6 5}.org-node{cursor:pointer}.org-node .shape{stroke-width:2;transition:.15s}.org-node.line .shape{fill:#edf4ff;stroke:#3976d2}.org-node.staff .shape{fill:#fff2e7;stroke:#c77732}.org-node.root .shape{fill:#142b4c;stroke:#142b4c}.org-node text{fill:#1f304a;font-size:12px;font-weight:800;text-anchor:middle;pointer-events:none}.org-node.root text{fill:#fff}.org-node .node-kind{fill:#718096;font-size:8px;font-weight:900;letter-spacing:.12em}.org-node.root .node-kind{fill:#acc0dd}.org-node.selected .shape{stroke:#22a89c;stroke-width:4;filter:drop-shadow(0 3px 7px rgba(34,168,156,.22))}.org-node.parent-target .shape{stroke:#26a269;stroke-width:4;filter:drop-shadow(0 3px 7px rgba(38,162,105,.2))}
.practice-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:22px 25px}.practice-top>div>p:last-child{margin:6px 0 0;color:var(--muted);font-size:12px}.task-progress{display:flex;gap:7px}.progress-dot{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:50%;background:#f8fafc;color:#718096;font-size:12px;font-weight:900}.progress-dot.active{border-color:var(--blue);background:var(--blue);color:#fff}.progress-dot.done{border-color:#8bd0b1;background:#e9f8f0;color:var(--green)}.task-card{margin-top:16px;padding:24px 26px;border-left:5px solid var(--blue)}.task-brand{display:flex;align-items:center;gap:9px}.task-brand span{padding:5px 7px;border-radius:6px;background:var(--blue-soft);color:var(--blue);font-size:9px;font-weight:900;letter-spacing:.1em}.task-brand b{font-size:12px;color:#526077}.task-card h3{margin:10px 0 6px;font-size:24px;letter-spacing:-.025em}.task-card>p{max-width:1000px;margin:0;color:#4f5e73;line-height:1.55}.task-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.task-facts span{padding:7px 10px;border-radius:8px;background:#f2f5f9;color:#4c5b70;font-size:11px;font-weight:750}
.practice-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;margin-top:16px}.practice-controls{display:grid;align-content:start;gap:10px}.compact-card{padding:18px;box-shadow:none}.step-label{display:flex;align-items:center;gap:8px;margin:0 0 13px;color:#435167;font-size:12px;font-weight:850}.step-label b{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:11px}.org-type-choice{display:grid;gap:7px}.org-type-choice label{cursor:pointer}.org-type-choice input{position:absolute;opacity:0}.org-type-choice span{display:block;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:#fafbfc;font-size:11px;font-weight:850}.org-type-choice small{display:block;margin-top:2px;color:var(--muted);font-size:9px;font-weight:500}.org-type-choice input:checked+span{border-color:var(--blue);background:var(--blue-soft);color:#1d58ac}.role-pool{display:flex;flex-wrap:wrap;gap:7px}.role-chip{border:1px solid #ccd6e3;border-radius:999px;padding:7px 10px;background:#fff;color:#445269;font-size:10px;font-weight:800}.role-chip:hover,.role-chip.selected{border-color:var(--teal);background:var(--teal-soft);color:#11675f}.selection-readout{margin:6px 0;color:var(--muted);font-size:11px}.selection-readout strong{color:var(--ink)}.place-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.place-btn{font-size:10px}.place-btn.line{border:1px solid #9fc0ee;border-radius:7px;background:var(--blue-soft);color:#235da9}.place-btn.staff{border:1px solid #e3b88f;border-radius:999px;background:var(--orange-soft);color:#9a5418}.microcopy{margin:11px 0 0;color:var(--muted);font-size:9px;line-height:1.4}.practice-diagram-card .diagram-scroll{min-height:620px}.practice-diagram-card .org-diagram{min-height:620px}.parent-badge{padding:6px 9px;border-radius:999px;background:var(--teal-soft);color:var(--teal);font-size:9px;font-weight:850}.check-card{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:16px;padding:20px}.primary-btn.large{align-self:start;padding:13px 20px}.feedback{min-height:48px;padding:13px 15px;border-radius:11px;background:#f3f6fa;color:#536176;font-size:12px;line-height:1.5}.feedback p{margin:0}.feedback strong{color:var(--ink)}.feedback.good{background:#e9f8f0;color:#2b6f50}.feedback.partial{background:#fff7e6;color:#765b20}.feedback ul{margin:8px 0 0;padding-left:18px}.task-nav{display:flex;justify-content:space-between;grid-column:1/-1;padding-top:4px}.task-nav button:disabled{visibility:hidden}
.toast{position:fixed;left:50%;bottom:22px;z-index:30;max-width:min(440px,calc(100vw - 30px));padding:10px 16px;border-radius:999px;background:var(--navy);color:#fff;box-shadow:0 12px 35px rgba(14,26,49,.25);font-size:11px;opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.workspace-grid,.practice-grid{grid-template-columns:1fr}.practice-controls{grid-template-columns:repeat(3,1fr)}.diagram-scroll{min-height:500px}.practice-diagram-card .diagram-scroll{min-height:540px}.practice-diagram-card .org-diagram{min-height:540px}}
@media(max-width:680px){.topbar{align-items:stretch;flex-direction:column;gap:9px;padding:11px 14px}.mode-tabs{display:grid;grid-template-columns:1fr 1fr}.page-shell{width:min(100% - 18px,1420px);margin-top:12px}.hero{align-items:flex-start;flex-direction:column;padding:21px}.hero h1{font-size:34px}.workspace-grid,.practice-grid{margin-top:10px}.practice-controls{grid-template-columns:1fr}.practice-top{align-items:flex-start;flex-direction:column;padding:19px}.task-card{padding:20px}.task-card h3{font-size:21px}.diagram-head{align-items:flex-start;flex-direction:column}.diagram-actions{width:100%}.diagram-actions button{flex:1}.check-card{grid-template-columns:1fr;padding:16px}.task-nav{gap:8px}.task-nav button{flex:1}.org-diagram{min-width:680px}.control-card{padding:19px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}