: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;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)}.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-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}.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}.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}.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)}}