:root{--navy:#1a365d;--navy-dk:#0f2444;--blue:#2b6cb0;--blue-lt:#bee3f8;--blue-tint:#ebf8ff;--orange:#ed8936;--orange-lt:#feebc8;--green:#38a169;--green-lt:#c6f6d5;--teal:#319795;--teal-lt:#b2f5ea;--yellow:#d69e2e;--gray-50:#f7fafc;--gray-100:#edf2f7;--gray-200:#e2e8f0;--gray-300:#cbd5e0;--gray-400:#a0aec0;--gray-500:#718096;--gray-600:#4a5568;--gray-700:#2d3748;--gray-800:#1a202c;--white:#fff;--text:#2d3748;--text-muted:#718096;--bg:#f7fafc;--surface:#fff;--border:#e2e8f0;--accent:#2b6cb0;--accent-hover:#2c5282;--danger:#c53030;--shadow-sm:0 1px 3px #00000014;--shadow:0 4px 12px #00000014;--shadow-lg:0 10px 25px #0000001a;--radius-sm:6px;--radius:10px;--radius-lg:16px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Georgia", "Times New Roman", serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.6}body{margin:0}h1,h2,h3{color:var(--navy);line-height:1.3}h1{font-size:2rem;font-weight:700}h2{font-size:1.5rem;font-weight:700}h3{font-size:1.15rem;font-weight:600}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--blue-tint);color:var(--navy)}.session-expired-banner{color:#744210;z-index:90;background:#fff5e6;border-bottom:2px solid #f0c674;align-items:center;gap:12px;padding:10px 20px;font-size:14px;display:flex;position:sticky;top:0}.session-expired-icon{font-size:18px}.session-expired-text{flex:1;align-items:baseline;gap:8px;display:flex}.session-expired-text strong{font-weight:700}.session-expired-close{cursor:pointer;color:#8a5a17;background:0 0;border:none;padding:0 6px;font-size:22px;line-height:1}.session-expired-close:hover{color:#5b3b08}.navbar{z-index:100;background:var(--navy);display:flex;position:sticky;top:0}.nav-accent{background:var(--orange);flex-shrink:0;width:5px}.nav-inner{flex:1;justify-content:space-between;align-items:center;gap:1rem;max-width:1280px;height:70px;margin:0 auto;padding:0 1.75rem;display:flex}.brand{align-items:center;gap:.75rem;text-decoration:none;display:flex}.brand-mark{background:var(--orange);width:38px;height:38px;color:var(--white);font-family:var(--font-display);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:inline-flex}.brand-text-wrap{flex-direction:column;gap:3px;line-height:1;display:flex}.brand-name{font-family:var(--font-display);color:var(--white);letter-spacing:-.01em;font-size:1.25rem;font-weight:700}.brand-tag{color:var(--orange);letter-spacing:.15em;font-size:.6rem;font-weight:700}.nav-links{align-items:center;gap:.25rem;display:flex}.nav-links a{color:var(--blue-lt);border-radius:var(--radius-sm);padding:.45rem .85rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .15s}.nav-links a:hover{color:var(--white);background:#ffffff14}.nav-links a.router-link-active,.nav-links a.router-link-exact-active{color:var(--white);background:#ffffff1f}.nav-divider{background:#fff3;width:1px;height:24px;margin:0 .5rem}.btn-logout{color:var(--blue-lt);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:1px solid #ffffff40;padding:.4rem .9rem;font-family:inherit;font-size:.8rem;font-weight:500;transition:all .15s}.btn-logout:hover{color:var(--white);background:#ffffff1a;border-color:#fff6}.btn-register{background:var(--orange)!important;color:var(--white)!important;padding:.45rem 1.1rem!important;font-weight:600!important}.btn-register:hover{background:#dd7a2a!important}.nav-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;padding:.5rem;display:none}.nav-toggle span{background:var(--white);width:22px;height:2px;display:block}main{background:var(--bg);min-height:calc(100vh - 310px)}.app-footer{background:var(--navy);color:var(--white);flex-direction:column;display:flex}.footer-accent{background:var(--orange);height:4px}.footer-inner{box-sizing:border-box;grid-template-columns:1.5fr 2fr;gap:3rem;width:100%;max-width:1280px;margin:0 auto;padding:3rem 1.75rem 2rem;display:grid}.footer-logo{align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.brand-mark-footer{background:var(--orange);width:32px;height:32px;color:var(--white);font-family:var(--font-display);border-radius:6px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:inline-flex}.footer-name{font-family:var(--font-display);color:var(--white);font-size:1.2rem;font-weight:700}.footer-tag{color:var(--blue-lt);max-width:380px;font-size:.9rem;line-height:1.6}.footer-cols{grid-template-columns:repeat(4,1fr);gap:2rem;display:grid}.footer-col{flex-direction:column;gap:.5rem;display:flex}.footer-col-title{color:var(--orange);letter-spacing:.15em;margin-bottom:.25rem;font-size:.7rem;font-weight:700}.footer-col a,.footer-col span{color:var(--blue-lt);font-size:.85rem;text-decoration:none;transition:color .15s}.footer-col a:hover{color:var(--white)}.footer-bottom{box-sizing:border-box;color:#bee3f899;border-top:1px solid #ffffff1a;justify-content:space-between;align-items:center;width:100%;max-width:1280px;margin:0 auto;padding:1.25rem 1.75rem;font-size:.78rem;display:flex}.footer-motto{color:var(--orange);font-style:italic}@media (width<=840px){.nav-inner{height:60px;padding:0 1rem}.brand-tag{display:none}.brand-name{font-size:1.1rem}.nav-toggle{display:flex}.nav-links{background:var(--navy-dk);border-bottom:3px solid var(--orange);flex-direction:column;gap:.25rem;padding:1rem;display:none;position:absolute;top:60px;left:0;right:0}.nav-links.open{display:flex}.nav-links a{width:100%;padding:.75rem 1rem}.nav-divider{display:none}.btn-logout{width:100%}.footer-inner{grid-template-columns:1fr;gap:2rem;padding:2rem 1rem 1.5rem}.footer-cols{grid-template-columns:repeat(2,1fr);gap:1.5rem}.footer-bottom{text-align:center;flex-direction:column;gap:.5rem;padding:1rem}}
