:root{--blue-50: #eff6ff;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-800: #1e40af;--blue-900: #1e3a8a;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--danger-600: #dc2626;--danger-700: #b91c1c;--bg: #ffffff;--text: #111827}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,var(--blue-50),#ffffff 40%);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}a{color:var(--blue-700);text-decoration:none}a:hover{color:var(--blue-800)}h1,h2,h3{margin:.2rem 0 .6rem}button{border-radius:8px;border:1px solid var(--blue-700);padding:.6em 1em;font-size:.95rem;background-color:var(--blue-600);color:#fff;cursor:pointer;transition:background .2s ease,transform .05s ease}button:hover{background-color:var(--blue-700)}button:active{transform:translateY(1px)}button:disabled{opacity:.6;cursor:not-allowed}.container{width:100%;max-width:1280px;margin:0 auto;padding:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:640px){.container{padding:12px}}.layout{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:linear-gradient(90deg,var(--blue-700),var(--blue-600));color:#fff;box-shadow:0 2px 8px #00000014}.topbar .brand a{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px}.nav{display:flex;gap:8px;flex-wrap:wrap}.nav a{color:#e5ecff;text-decoration:none;padding:8px 10px;border-radius:8px}.nav a:hover{background:#ffffff1f}.nav a.active{background:#ffffff38;color:#fff}.content{flex:1;padding:16px;width:100%}.card{border:1px solid var(--gray-200);border-radius:12px;padding:16px;background:#fff;box-shadow:0 1px 2px #0000000a}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}.form{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:12px}.form .col-6{grid-column:span 6}.form .col-4{grid-column:span 4}.form .col-12,.form .full{grid-column:1 / -1}.label{font-size:.85rem;color:var(--gray-700);margin-bottom:4px;display:block}.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid var(--gray-300);border-radius:8px;background:#fff}.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--blue-200);border-color:var(--blue-400)}.help{color:var(--gray-500);font-size:.8rem}.button{padding:10px 14px;border:1px solid var(--blue-700);background:var(--blue-600);color:#fff;border-radius:8px;cursor:pointer}.button.secondary{background:var(--blue-700);border-color:var(--blue-800)}.button.danger{background:var(--danger-700);border-color:var(--danger-600)}.table-wrapper{width:100%;overflow-x:auto;background:#fff;border:1px solid var(--gray-200);border-radius:12px}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{border-bottom:1px solid var(--gray-200);padding:12px;text-align:left}.table thead th{background:var(--blue-50);color:var(--blue-900);position:sticky;top:0}.badge{display:inline-block;padding:4px 8px;background:var(--blue-100);color:var(--blue-800);border-radius:999px;font-size:12px}@media(max-width:900px){.form{grid-template-columns:repeat(6,1fr)}.form .col-6,.form .col-4{grid-column:span 6}}@media(max-width:640px){.nav{gap:6px}.content{padding:12px}.form{grid-template-columns:repeat(4,1fr)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}