@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
:root{--cdpi-blue:#0a2540;--cdpi-light-blue:#1c3d61;--cdpi-gold:#d4af37;--cdpi-accent:#32c5ff;--background:#f4f7f9;--surface:#fff;--text-main:#1a1a1a;--text-muted:#64748b;--danger:#ef4444;--success:#10b981}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);color:var(--text-main);flex-direction:column;min-height:100vh;font-family:Inter,-apple-system,sans-serif;display:flex}.glass{-webkit-backdrop-filter:blur(12px);background:#ffffffb3;border:1px solid #ffffff80;border-radius:16px;box-shadow:0 8px 32px #1f26870d}.glass-dark{-webkit-backdrop-filter:blur(12px);color:#fff;background:#0a2540d9;border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--cdpi-blue), var(--cdpi-light-blue));color:#fff;box-shadow:0 4px 12px #0a254033}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #0a25404d}.btn-gold{background:linear-gradient(135deg, #e6c25a, var(--cdpi-gold));color:var(--cdpi-blue);font-weight:600;box-shadow:0 4px 12px #d4af374d}.btn-gold:hover:not(:disabled){box-shadow:0 6px 16px #d4af3766}.btn-outline{border:2px solid var(--cdpi-blue);color:var(--cdpi-blue);background:0 0}.form-group{margin-bottom:20px}.form-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:.85rem;font-weight:600;display:block}.form-control{background:#ffffffe6;border:1px solid #0000001a;border-radius:8px;width:100%;padding:12px 16px;font-family:inherit;font-size:1rem;transition:all .2s}.form-control:focus{border-color:var(--cdpi-accent);outline:none;box-shadow:0 0 0 3px #32c5ff33}.form-select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-position:right 1rem center;background-repeat:no-repeat;background-size:1em}.container{max-width:1200px;margin:0 auto;padding:0 20px}main{flex:1;padding:40px 0}.header{background:#fff;justify-content:space-between;align-items:center;padding:16px 0;display:flex;box-shadow:0 1px 10px #0000000d}.header-logo{color:var(--cdpi-blue);align-items:center;gap:12px;font-size:1.5rem;font-weight:800;text-decoration:none;display:flex}.logo-accent{background:var(--cdpi-gold);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;display:flex}.page-title{color:var(--cdpi-blue);margin-bottom:8px;font-size:2rem}.page-subtitle{color:var(--text-muted);margin-bottom:32px}.dev-panel{padding:20px;font-family:Courier New,Courier,monospace;font-size:.85rem}.dev-panel h3{color:var(--cdpi-accent);align-items:center;gap:8px;margin-bottom:16px;font-family:Inter,sans-serif;font-size:1.1rem;display:flex}.code-block{color:#a6e22e;background:#0000004d;border:1px solid #ffffff1a;border-radius:8px;margin-bottom:20px;padding:16px;overflow-x:auto}.code-block code{white-space:pre-wrap;word-break:break-all}.grid-2{grid-template-columns:1fr;gap:32px;display:grid}@media (min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}.grid-3{grid-template-columns:1fr;gap:24px;display:grid}@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s forwards fadeIn}.alert{border-radius:8px;align-items:flex-start;gap:12px;margin-bottom:20px;padding:16px;display:flex}.alert-success{color:var(--success);background:#10b9811a;border:1px solid #10b98133}.alert-danger{color:var(--danger);background:#ef44441a;border:1px solid #ef444433}