:root{color-scheme:light;--bg: #f4f5f7;--panel: #ffffff;--border: #d8dce3;--text: #1f2937;--muted: #6b7280;--accent: #2563eb;--accent-text: #ffffff;--danger: #b91c1c;--ok: #166534;--mapped: #166534;--unmapped: #92400e;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app-shell{height:100%;display:flex;flex-direction:column;overflow:hidden}.topbar{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)}.created-session{flex-shrink:0;display:flex;align-items:flex-start;gap:.75rem;padding:.65rem 1rem;background:#ecfdf5;border-bottom:1px solid #bbf7d0;color:var(--ok)}.created-session-list{display:flex;flex-wrap:wrap;gap:.5rem}.created-session-item{display:flex;flex-wrap:wrap;gap:.3rem .65rem;padding:.35rem .55rem;border:1px solid #bbf7d0;border-radius:.35rem;background:#fff;font-size:.8rem}.created-session-name{font-weight:700}.created-session code,.create-template-error code{-webkit-user-select:all;user-select:all}.layout{flex:1;display:grid;grid-template-columns:320px 1fr;min-height:0;overflow:hidden}.sidebar{border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:hidden}.sidebar-controls{flex-shrink:0;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;border-bottom:1px solid var(--border)}.mapping-filter{margin:0;padding:.4rem .5rem;border:1px solid var(--border);border-radius:.35rem;display:flex;flex-wrap:wrap;gap:.65rem .9rem}.mapping-filter legend{padding:0 .25rem;font-size:.75rem;color:var(--muted)}.mapping-filter label{display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem;cursor:pointer}.subject-banner{display:flex;flex-direction:column;gap:.25rem;margin:0 .75rem;padding:.75rem 1rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.4rem}.subject-edit{margin:0 .75rem;padding:.75rem 1rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.4rem}.subject-label{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}.subject-text{font-size:1.15rem;font-weight:650;line-height:1.35;color:var(--text);word-break:break-word}.template-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.template-item{width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:transparent;padding:.75rem;display:flex;flex-direction:column;gap:.25rem}.template-item:hover{background:#eef2ff}.template-item.active{background:#dbeafe}.template-name{font-weight:600}.template-id{color:var(--muted);font-size:.8rem;word-break:break-all}.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.1rem .4rem;border-radius:.25rem;width:fit-content}.badge.mapped{background:#dcfce7;color:var(--mapped)}.badge.unmapped{background:#ffedd5;color:var(--unmapped)}.main{display:flex;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;padding:.75rem;background:var(--panel);border-bottom:1px solid var(--border)}.field{display:flex;flex-direction:column;gap:.25rem;min-width:160px}.field label{font-size:.8rem;color:var(--muted)}.field input,.field select,.field textarea{border:1px solid var(--border);border-radius:.35rem;padding:.4rem .5rem;background:#fff}.editor-pane{padding:.75rem;border-bottom:1px solid var(--border);background:var(--panel)}.editor-pane textarea{width:100%;min-height:160px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}.create-template-form{width:min(920px,calc(100% - 1.5rem));margin:.75rem auto;padding:1rem;display:flex;flex-direction:column;gap:.9rem;background:var(--panel);border:1px solid var(--border);border-radius:.5rem}.create-template-form h2,.create-template-form p{margin:0}.create-template-form p{margin-top:.35rem;color:var(--muted);line-height:1.45}.create-template-field{width:100%}.create-template-html{width:100%;min-height:360px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}.create-template-actions{display:flex;justify-content:flex-end;gap:.5rem}.create-template-error{margin:0}.preview-pane{flex:1;min-height:280px;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.preview-pane iframe{flex:1;width:100%;border:1px solid var(--border);background:#fff;border-radius:.35rem}.code-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.75rem;background:var(--panel);border-bottom:1px solid var(--border)}.code-toolbar-label{display:flex;align-items:center;gap:.6rem}.code-toolbar-actions{display:flex;flex-wrap:wrap;gap:.5rem}.dirty-badge{font-size:.75rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:#ffedd5;color:var(--unmapped)}.code-preview-row{min-height:460px;display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem}.code-pane{min-width:0;min-height:0;display:flex}.html-editor{flex:1;min-width:0;min-height:0}@media (max-width: 1100px){.code-preview-row{grid-template-columns:1fr}}.banner{padding:.5rem .75rem;border-radius:.35rem;margin:.5rem .75rem 0}.banner.error{background:#fee2e2;color:var(--danger)}.banner.ok{background:#dcfce7;color:var(--ok)}.banner.warn{background:#ffedd5;color:var(--unmapped)}.login-page{min-height:100vh;display:grid;place-items:center;padding:1rem}.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--border);border-radius:.5rem;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.primary{background:var(--accent);color:var(--accent-text);border:0;border-radius:.35rem;padding:.5rem .9rem}.secondary{background:#fff;border:1px solid var(--border);border-radius:.35rem;padding:.45rem .8rem}.danger{background:var(--danger);color:#fff;border:0;border-radius:.35rem;padding:.5rem .9rem}.empty{padding:2rem;color:var(--muted)}@media (max-width: 900px){.layout{grid-template-columns:1fr}.sidebar{max-height:40vh;border-right:0;border-bottom:1px solid var(--border)}.created-session{flex-direction:column}}