:root{--brand:#4f46e5}*{box-sizing:border-box}body{color:#111;margin:0;font-family:system-ui,sans-serif}form{flex-direction:column;gap:.75rem;display:flex}input,select,button{padding:.5rem;font-size:1rem}input,select{border:1px solid #bbb;border-radius:6px}button{background:var(--brand);color:#fff;cursor:pointer;border:0;border-radius:6px}button.secondary{color:#111;background:#eee}button:disabled{opacity:.6}a{color:var(--brand)}.error{color:#b00020}.ok{color:#1a7f37}.hint{color:#666;margin:0;font-size:.85rem}.brand{border-bottom:1px solid #eee;align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.narrow{max-width:360px;margin:3rem auto;padding:0 1rem}.shell{min-height:calc(100vh - 53px);display:flex}.shell nav{border-right:1px solid #eee;flex-direction:column;gap:.25rem;width:200px;padding:1rem;display:flex}.shell nav a{color:#111;border-radius:6px;padding:.5rem .75rem;text-decoration:none}.shell nav a.active{background:color-mix(in srgb, var(--brand) 12%, white);color:var(--brand);font-weight:600}.shell nav .spacer{flex:1}.shell main{flex:1;max-width:760px;padding:1.5rem 2rem}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid #eee;padding:.5rem}.row{align-items:center;gap:.5rem;display:flex}.row>input{flex:1}.preview{border:1px solid #ddd;border-radius:8px;flex-direction:column;gap:.5rem;padding:1rem;display:flex}