:root{--color-primary: #1B3A4B;--color-secondary: #3D7EA6;--color-accent: #E8654A;--color-bg: #FAFAF8;--color-bg-card: #FFFFFF;--color-bg-sand: #F5F0EB;--color-text-primary: #2C2C2A;--color-text-secondary: #6B6966;--color-text-muted: #9B9891;--color-border: #E2DDD8;--color-success: #2D8F5E;--color-warning: #D4922A;--color-danger: #C7453B;--color-error: #C7453B;--color-rating: #7C3AED;--font-heading: "Plus Jakarta Sans", system-ui, sans-serif;--font-body: "Plus Jakarta Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--sidebar-width: 260px;--sidebar-collapsed-width: 64px;--topbar-height: 60px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);color:var(--color-text-primary);background-color:var(--color-bg);line-height:1.6}a{color:var(--color-secondary);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:var(--font-body)}input{font-family:var(--font-body)}.app-layout{display:flex;min-height:100vh}.app-main{flex:1;display:flex;flex-direction:column;min-width:0}.app-content{flex:1;padding:32px;overflow-y:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;line-height:1.4;transition:background-color .15s,opacity .15s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:#2a4f63}.btn-secondary{background-color:var(--color-bg-sand);color:var(--color-text-primary)}.btn-secondary:hover:not(:disabled){background-color:#e8e2db}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background-color:#b33d34}.btn-ghost{background:none;color:var(--color-secondary);padding:6px 12px}.btn-ghost:hover:not(:disabled){background-color:var(--color-bg-sand)}.btn-block{width:100%}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.input-field{padding:10px 14px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;color:var(--color-text-primary);background:var(--color-bg-card);transition:border-color .15s;outline:none}.input-field:focus{border-color:var(--color-secondary)}.input-field::placeholder{color:var(--color-text-muted)}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}.card-title{font-size:1rem;font-weight:600;color:var(--color-text-primary);margin-bottom:8px}.error-message{color:var(--color-danger);font-size:.875rem;margin-top:8px}.success-message{color:var(--color-success);font-size:.875rem;margin-top:8px}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:90}.sidebar-overlay.visible{display:block}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-card{background:#fff;border-radius:var(--radius-lg);padding:24px;max-width:560px;width:calc(100% - 32px);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}@media(max-width:768px){.modal-card{width:calc(100% - 24px);padding:16px}.modal-overlay{padding:24px 12px 12px;align-items:flex-start}}@media(max-width:768px){.app-layout{flex-direction:column}.app-content{padding:16px!important}.sidebar-mobile-hidden{position:fixed;left:-100%;top:0;bottom:0;z-index:100;transition:left .25s ease}.sidebar-mobile-visible{position:fixed;left:0;top:0;bottom:0;z-index:100;transition:left .25s ease}header{padding:0 16px!important}.card{padding:16px!important}.card>div{overflow-x:auto}.card div[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.card div[style*="display: flex"][style*="justify-content: space-between"]:not([style*=position]){flex-wrap:wrap;gap:8px}}@media(max-width:480px){.app-content{padding:12px!important}.card{padding:12px!important;border-radius:var(--radius-md)!important}.card div[style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important}.card h2{font-size:1.25rem!important}.card h3{font-size:.9375rem!important}}
