:root{--ink:#20233b;--muted:#737994;--line:#e8eaf2;--bg:#f6f7fc;--card:#fff;--violet:#6657e8;--violet-dark:#5145c7;--peach:#ff9d7a;--green:#2da876;--shadow:0 18px 60px rgba(55,52,105,.08)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 82% -10%,#e9e6ff 0,transparent 32%),var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.65}button,input,textarea,select{font:inherit}button{cursor:pointer}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1160px)/2));background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(231,232,243,.7);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--violet),#9a8aff);box-shadow:0 8px 18px rgba(102,87,232,.28);font-size:20px}.brand strong{display:block;font-size:16px;letter-spacing:.02em}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:-2px}.ghost-btn,.back-btn{border:0;background:transparent;color:var(--muted);padding:8px 0}.ghost-btn span{background:#ecebff;color:var(--violet);padding:2px 7px;border-radius:20px;margin-left:4px;font-size:12px}.shell{max-width:1160px;margin:auto;padding:48px 24px 72px}.composer-view{max-width:920px;margin:auto}.hero{text-align:center;padding:18px 0 28px}.eyebrow{color:var(--violet);font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.18;letter-spacing:-.04em;margin:12px 0 18px}.hero h1 span{color:var(--violet)}.hero p{color:var(--muted);max-width:560px;margin:auto;font-size:16px}.examples{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0 24px}.examples button{border:1px solid #dedcff;background:#fff;color:#5951ad;border-radius:99px;padding:7px 13px;font-size:12px;transition:.2s}.examples button:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(102,87,232,.13)}.card{background:var(--card);border:1px solid rgba(232,234,242,.9);box-shadow:var(--shadow);border-radius:22px}.form-card{padding:30px 34px}.section-label{font-weight:800;font-size:13px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;margin-bottom:17px}.section-label span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--violet);background:#eeecff;font-size:11px}.section-label em{font-style:normal;color:#a2a5b7;font-size:11px;font-weight:400;margin-left:3px}.spaced{margin-top:30px;border-top:1px solid var(--line);padding-top:28px}.field-grid{display:grid;gap:16px;margin-bottom:16px}.field-grid.three{grid-template-columns:1fr 1fr 1fr}.field-grid.two{grid-template-columns:1.5fr 1fr}label{display:block;color:#545973;font-size:12px;font-weight:700}label input,label textarea,label select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:11px;background:#fbfbfe;color:var(--ink);padding:10px 12px;outline:none;font-size:14px;font-weight:400;transition:.2s}label textarea{resize:vertical;min-height:68px}label input:focus,label textarea:focus,label select:focus{border-color:#a8a0ff;box-shadow:0 0 0 3px #efedff;background:#fff}.required{color:#ee765c;font-size:10px;margin-left:5px}.privacy-note{background:#f7f7ff;border-radius:11px;color:#747895;font-size:11px;padding:10px 12px;margin:20px 0}.primary-btn,.primary-small{border:0;color:white;background:linear-gradient(135deg,var(--violet),#8275f1);box-shadow:0 10px 22px rgba(102,87,232,.25);font-weight:800;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:28px;transition:.2s}.primary-btn{width:100%;padding:13px}.primary-btn:hover,.primary-small:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--violet-dark),#7568e8)}.primary-btn b{font-size:20px;font-weight:400}.secondary-btn{border:1px solid #dddafc;background:#f8f7ff;color:var(--violet);border-radius:10px;padding:8px 16px;font-weight:700}.footnote{text-align:center;color:#a3a6b8;font-size:11px;margin-top:18px}.error{margin-top:12px;color:#c64e50;background:#fff0f0;border-radius:9px;padding:8px 10px;font-size:12px}.editor-view{max-width:1120px;margin:auto}.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.editor-actions{display:flex;align-items:center;gap:9px}.mode-badge{font-size:11px;color:#8b7d1e;background:#fff8dc;border-radius:99px;padding:5px 10px}.primary-small{padding:8px 14px;font-size:13px}.notice{background:#fff8e9;border:1px solid #fae4b4;color:#8b6b28;border-radius:12px;padding:10px 14px;font-size:12px;margin-bottom:18px}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px}.plan-card{padding:34px 42px}.editable-title input{border:0;padding:0;width:100%;font-size:29px;font-weight:850;color:var(--ink);outline:0;letter-spacing:-.03em}.plan-meta{color:var(--muted);font-size:12px;margin-top:7px}.divider{border-top:1px solid var(--line);margin:23px 0}.plan-card h2{font-size:17px;margin:25px 0 12px;letter-spacing:-.01em}.long-text,.inline-label input,.teacher-fill textarea{width:100%;border:1px solid transparent;background:#fafaff;border-radius:10px;padding:10px 12px;outline:none;min-height:45px;line-height:1.7;resize:vertical}.long-text:focus,.inline-label input:focus,.teacher-fill textarea:focus{border-color:#d3ceff;background:#fff;box-shadow:0 0 0 3px #f0efff}.inline-label{display:flex;align-items:center;gap:12px;margin:8px 0}.inline-label input{flex:1;margin:0;min-height:40px;font-weight:400;color:var(--ink)}.step-editor{border:1px solid var(--line);border-radius:13px;padding:14px;margin:10px 0;background:#fcfcff}.step-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.step-top input{border:0;border-bottom:1px solid var(--line);padding:5px;flex:1;font-weight:750;color:var(--ink);outline:0;background:transparent}.step-time{width:70px;border:1px solid var(--line);border-radius:7px;padding:5px;text-align:center}.step-editor textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:7px;resize:vertical;min-height:45px;outline:0}.step-label{font-size:11px;color:var(--muted);font-weight:700}.step-editor textarea:focus,.step-time:focus{border-color:#aba3ff}.teacher-fill{border-top:1px dashed #d9d8e8;margin-top:32px;padding-top:2px}.teacher-fill label{margin:12px 0}.side-panel{display:flex;flex-direction:column;gap:14px}.side-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;color:var(--muted);font-size:12px}.side-card strong{display:block;color:var(--ink);font-size:13px;margin-bottom:7px}.side-card p{margin:0;line-height:1.7}.side-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;color:var(--green);background:#e8f8f1;margin-bottom:10px;font-weight:bold}.status-row{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:12px;margin:8px 0}.status-dot{width:7px;height:7px;border-radius:50%;background:#d2d4df}.side-card small{font-size:11px}.history-view{max-width:850px;margin:auto}.history-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}.history-head h2{margin:0;font-size:25px}.history-head span{color:var(--muted);font-size:12px}.history-list{display:grid;gap:10px}.history-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 20px rgba(55,52,105,.04)}.history-item strong{font-size:14px}.history-item small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.history-item-actions{display:flex;gap:8px}.history-item-actions button{border:0;background:#f1f0ff;color:var(--violet);border-radius:8px;padding:6px 10px;font-size:11px}.history-item-actions button.delete{color:#bf6066;background:#fff1f1}.empty-history{text-align:center;padding:60px 20px;color:var(--muted);background:#fff;border:1px dashed #dcddeb;border-radius:16px}@media(max-width:720px){.topbar{height:64px;padding:0 16px}.shell{padding:28px 14px 48px}.hero{padding-top:10px}.hero h1{font-size:37px}.form-card{padding:22px 17px;border-radius:17px}.field-grid.three,.field-grid.two{grid-template-columns:1fr;gap:12px}.editor-head{align-items:flex-start;gap:10px}.editor-actions{flex-wrap:wrap;justify-content:flex-end}.editor-layout{display:block}.side-panel{display:none}.plan-card{padding:22px 17px}.editable-title input{font-size:24px}.inline-label{display:block}.inline-label input{margin-top:5px}.history-item{align-items:flex-start;gap:10px}.history-item-actions{flex-direction:column}.mode-badge{display:none}}
/* Word export choices stay readable on narrow screens. */
.observation-form{padding:28px 24px;font-family:"Songti SC","SimSun",serif}
.form-heading{text-align:center;font-size:24px;margin:0 0 22px}
.form-identities{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px}
.observation-form .activity-name{font-size:14px;color:var(--ink)}
.observation-form .activity-name input{font-size:18px;font-weight:700;min-width:0}
.form-note{font-size:12px;color:var(--muted);margin:8px 0 16px}
.observation-rubric{border-collapse:collapse;table-layout:fixed;width:100%;font-size:14px;margin-top:20px}
.observation-rubric th,.observation-rubric td{border:1px solid #9295a3;padding:10px 8px;overflow-wrap:anywhere;vertical-align:top}
.observation-rubric th{font-weight:600;vertical-align:middle}
.rubric-group{width:18%}.rubric-score{width:16%}
.activity-record-grid{display:grid;grid-template-columns:minmax(0,2.65fr) minmax(0,1fr);border:1px solid #9295a3;margin-top:24px}
.activity-record,.activity-assessment{padding:14px;min-width:0}
.activity-assessment{border-left:1px solid #9295a3}
.observation-form h2{font-size:18px;margin:0 0 12px}
.observation-form h3{font-size:16px;margin:22px 0 10px}
.activity-assessment h2:not(:first-child){margin-top:28px}
.observation-form textarea{font-size:15px;line-height:1.7}
.observation-form .inline-label{display:block}
.observation-form .inline-label input{margin-top:5px;min-width:0;width:100%}
.observation-form .step-top{flex-wrap:wrap;gap:6px}
.observation-form .step-top input:first-child{flex:1 1 100%;min-width:0}
.observation-form .step-top .step-time{flex:0 0 60px;width:60px}
@media(max-width:720px){
  .observation-form{padding:20px 12px}
  .form-heading{font-size:21px}
  .form-identities{gap:8px 16px}
  .observation-rubric{font-size:13px}
  .observation-rubric th,.observation-rubric td{padding:8px 5px}
  .rubric-group{width:21%}.rubric-score{width:18%}
  .activity-record-grid{grid-template-columns:minmax(0,1fr)}
  .activity-record,.activity-assessment{padding:12px}
  .activity-assessment{border-left:0;border-top:1px solid #9295a3}
}
.editor-head>.back-btn{flex-shrink:0;white-space:nowrap}
/* Keep editable step names within narrow phone screens. */
.step-top input{min-width:0}.step-top .step-time{flex:0 0 62px;width:62px}.step-top span{flex-shrink:0}
/* Add/remove activity steps. */
.step-top .step-remove{flex-shrink:0;border:1px solid #f0d5d0;background:#fff;color:#c0392b;border-radius:8px;padding:5px 10px;font-size:12px}
.step-top .step-remove:hover:not(:disabled){background:#fdf3f1}
.step-top .step-remove:disabled{border-color:var(--line);color:#c3c6d4;cursor:not-allowed}
.step-add{display:block;width:100%;margin:10px 0;border:1px dashed #cfcaff;background:#fbfaff;color:var(--violet-dark);border-radius:12px;padding:10px;font-size:13px}
.step-add:hover:not(:disabled){background:#f3f1ff}
.step-add:disabled{border-color:var(--line);color:#c3c6d4;background:#fafafc;cursor:not-allowed}
/* Partial-adjustment panel: adjust one part without rewriting the whole plan. */
.adjust-panel{border:1px solid var(--line);background:#fbfbff;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.adjust-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adjust-label{font-weight:700;font-size:13px;color:var(--violet);flex-shrink:0}
.adjust-row input{flex:1 1 260px;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:0}
.adjust-row input:focus{border-color:#aba3ff}
.adjust-row button{flex-shrink:0}
.adjust-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.adjust-quick button{border:1px solid #dedcff;background:#fff;color:var(--violet-dark);border-radius:20px;padding:5px 12px;font-size:12px}
.adjust-quick button:hover{background:#f2f0ff}
.adjust-minutes{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.adjust-minutes select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff}
.adjust-status{margin-top:10px;font-size:13px;color:var(--muted)}
.adjust-status.ok{color:var(--green)}
.adjust-status.error{color:#c0392b}
@media(max-width:720px){
  .adjust-panel{padding:12px}
  .adjust-row input{flex:1 1 100%}
  .adjust-row button{width:100%}
  .adjust-minutes{margin-left:0;width:100%;justify-content:space-between}
}

/* ---------------------------------------------------------------- Auth view
   Shown before the app shell. Kept visually consistent with the editor cards
   so the transition after sign-in feels continuous. */
.auth-view{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;gap:18px}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:30px 28px 26px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-brand strong{display:block;font-size:16px;letter-spacing:.02em}
.auth-brand small{display:block;color:var(--muted);font-size:11px;margin-top:-2px}
.auth-tabs{display:flex;gap:6px;background:#f1f0fb;border-radius:12px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;border:0;background:transparent;color:var(--muted);padding:9px 0;border-radius:9px;font-size:14px;font-weight:600}
.auth-tab.is-active{background:#fff;color:var(--violet-dark);box-shadow:0 2px 8px rgba(85,80,160,.12)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field>span{font-size:12px;font-weight:600;color:var(--muted)}
.auth-field input{border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:#fcfcff;font-size:15px}
.auth-field input:focus{outline:none;border-color:#c3bcf7;box-shadow:0 0 0 3px rgba(102,87,232,.12)}
.auth-submit{margin-top:4px;width:100%;justify-content:center}
.auth-note{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.auth-foot{margin:0;color:var(--muted);font-size:12px;text-align:center;max-width:420px}
.topbar-actions{display:flex;align-items:center;gap:14px}
@media(max-width:560px){.auth-card{padding:24px 20px 22px;border-radius:16px}.auth-view{padding:20px 14px}}

/* The `hidden` attribute must win over layout rules. Without this, a rule like
   .auth-form{display:flex} overrides the attribute's display:none and both the
   login and register forms render at the same time. */
[hidden]{display:none!important}

/* The generated case is an editable view of the supplied observation form.
   Keep the application controls above it, while the form itself uses the
   reference document's white paper, Song type, square corners and grid. */
.editor-view{max-width:1160px}
.editor-view .editor-layout{display:block}
.editor-view .side-panel{display:none}
.observation-form{background:#fff;border:0;border-radius:0;box-shadow:none;padding:0 0 32px;color:#111;font-family:"SimSun","宋体",serif;font-size:16px;line-height:1.65}
.observation-form .form-heading{margin:4px 0 22px;text-align:center;font-size:28px;line-height:1.25;font-weight:700;letter-spacing:0;color:#111}
.observation-form .form-heading textarea{display:block;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:inherit;text-align:center;box-shadow:none;resize:none;overflow:hidden;overflow-wrap:anywhere}
.observation-form .form-heading textarea:focus{border:0;box-shadow:none;outline:1px dotted #777;outline-offset:3px}
.observation-form .form-identities{margin:0 0 24px;font-size:17px;line-height:1.45;white-space:nowrap;color:#111}
.observation-form .form-identities label{display:flex;align-items:baseline;gap:0;margin:0;min-width:0;font:inherit;color:inherit}
.observation-form .form-identities input{width:8em;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:inherit;box-shadow:none}
.observation-form .form-identities input::placeholder{color:inherit;opacity:1}
.observation-form .form-identities input:focus{outline:1px dotted #777;outline-offset:3px}
.observation-form .activity-name{display:flex;align-items:baseline;gap:8px;margin:0 0 28px;font-size:17px;font-weight:400;color:#111}
.observation-form .activity-name input{display:inline-block;flex:0 1 620px;width:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#111;font:inherit;line-height:1.45;box-shadow:none}
.observation-form .activity-name input:focus{border:0;box-shadow:none;outline:1px dotted #777;outline-offset:3px}
.observation-form .observation-rubric{width:100%;border-collapse:collapse;table-layout:fixed;margin:0 0 0;color:#111;font-size:16px;line-height:1.65}
.observation-form .observation-rubric .rubric-group{width:14%}
.observation-form .observation-rubric .rubric-score{width:19%}
.observation-form .observation-rubric th,.observation-form .observation-rubric td{border:1px solid #555;padding:8px 10px;vertical-align:middle;font-weight:400}
.observation-form .observation-rubric thead th{font-weight:700;text-align:center;padding:10px}
.observation-form .observation-rubric tbody th{text-align:center;font-weight:400}
.observation-form .observation-rubric tbody td:last-child:not([colspan]){text-align:center}
.observation-form .observation-rubric td[colspan="3"]{text-align:left}
.observation-form .observation-rubric label{display:inline;font:inherit;color:#111;font-weight:400}
.observation-form .observation-rubric textarea{display:block;width:100%;min-height:116px;margin:4px 0 0;padding:0;border:0;border-radius:0;background:transparent;color:#111;font:inherit;line-height:1.65;resize:vertical;box-shadow:none}
.observation-form .observation-rubric textarea:focus{outline:1px dotted #777;outline-offset:3px}
.observation-form .activity-record-grid{width:89%;display:grid;grid-template-columns:73% 27%;gap:0;margin:0;border:1px solid #555;border-top:0;color:#111}
.observation-form .activity-record,.observation-form .activity-assessment{min-width:0;padding:8px 10px}
.observation-form .activity-record{border-right:1px solid #555}
.observation-form .activity-record h2,.observation-form .activity-assessment h2{margin:0 0 8px;font-size:18px;line-height:1.5;font-weight:700;color:#111;letter-spacing:0}
.observation-form .activity-record h3{margin:12px 0 3px;font-size:16px;line-height:1.5;font-weight:700;color:#111}
.observation-form .long-text,.observation-form .inline-label input,.observation-form .teacher-fill textarea{border:0;border-radius:0;background:transparent;color:#111;font-family:inherit;font-size:16px;line-height:1.65;box-shadow:none}
.observation-form .long-text:focus,.observation-form .inline-label input:focus,.observation-form .teacher-fill textarea:focus{border:0;background:transparent;box-shadow:none;outline:1px dotted #777;outline-offset:3px}
.observation-form .inline-label{display:flex;align-items:baseline;gap:8px;margin:2px 0;font-size:16px;font-weight:400;color:#111}
.observation-form .inline-label input{flex:1;min-height:0;margin:0;padding:0}
.observation-form .activity-record textarea.long-text,.observation-form .activity-assessment textarea.long-text{display:block;width:100%;min-height:46px;margin:0;padding:0;resize:vertical}
.observation-form .step-editor{margin:4px 0 10px;padding:0;border:0;border-radius:0;background:transparent}
.observation-form .step-top{margin:0 0 3px;gap:5px}
.observation-form .step-top input{min-height:0;padding:0;border:0;border-bottom:1px dotted #777;border-radius:0;background:transparent;color:#111;font-family:inherit;font-weight:400}
.observation-form .step-time{flex:0 0 58px!important;width:58px;min-height:0;padding:0;border:0;border-bottom:1px dotted #777;border-radius:0;background:transparent;color:#111;font-family:inherit}
.observation-form .step-top span,.observation-form .step-remove,.observation-form .step-add{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.observation-form .step-editor textarea{min-height:42px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#111;font-family:inherit;font-size:16px;line-height:1.65}
.observation-form .step-editor textarea:focus{border:0;box-shadow:none;outline:1px dotted #777;outline-offset:3px}
.observation-form .step-label{display:block;margin:0;font-family:inherit;font-size:16px;line-height:1.65;font-weight:400;color:#111}
.observation-form .step-label textarea{display:block}
.observation-form .step-remove,.observation-form .step-add{font-size:12px}
.observation-form .activity-assessment .long-text{min-height:150px}
.observation-form .activity-assessment h2:nth-of-type(2){margin-top:18px}
@media(max-width:720px){
  .observation-form{font-size:15px}
  .observation-form .form-heading{font-size:24px}
  .observation-form .form-identities{font-size:14px;white-space:normal}
  .observation-form .activity-name{font-size:15px}
  .observation-form .observation-rubric{font-size:14px}
  .observation-form .observation-rubric th,.observation-form .observation-rubric td{padding:6px 5px}
  .observation-form .activity-record-grid{width:100%;grid-template-columns:1fr}
  .observation-form .activity-record{border-right:0;border-bottom:1px solid #555}
  .observation-form .activity-record-grid .activity-record,.observation-form .activity-record-grid .activity-assessment{padding:8px}
}