:root{--bg-primary: hsl(0, 0%, 3%);--bg-secondary: hsl(0, 0%, 8%);--bg-tertiary: hsl(0, 0%, 12%);--bg-hover: hsl(0, 0%, 16%);--bg-active: hsl(0, 0%, 20%);--bg-light: hsl(0, 0%, 12%);--bg-lighter: hsl(0, 0%, 16%);--bg-lightest: hsl(0, 0%, 20%);--bg-selected: hsl(0, 0%, 25%);--text-primary: hsl(0, 0%, 95%);--text-secondary: hsl(0, 0%, 75%);--text-muted: hsl(0, 0%, 55%);--text-inverse: hsl(0, 0%, 10%);--accent-primary: hsl(210, 100%, 50%);--accent-success: hsl(140, 65%, 45%);--accent-warning: hsl(45, 100%, 60%);--accent-danger: hsl(0, 65%, 55%);--accent-info: hsl(200, 100%, 60%);--border-primary: hsl(0, 0%, 20%);--border-secondary: hsl(0, 0%, 25%);--border-tertiary: hsl(0, 0%, 30%);--border-color: hsl(0, 0%, 20%);--border-light: hsl(0, 0%, 25%);--border-hover: hsl(0, 0%, 35%);--border-selected: hsl(0, 0%, 40%);--shadow-light: rgba(0, 0, 0, .2);--shadow-medium: rgba(0, 0, 0, .4);--shadow-heavy: rgba(0, 0, 0, .6)}*{box-sizing:border-box}html{height:100vh;margin:0;padding:0;font-size:16px}body{height:100vh;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}app-root{display:flex;flex-direction:column;height:100vh;padding:20px;box-sizing:border-box;background-color:var(--bg-primary)}app-basic-character-info-component,app-nav-component{flex-shrink:0;margin-bottom:1rem}app-inventory-component{flex:1;min-height:0;overflow:hidden}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:600;margin:0 0 1rem}h1{font-size:2.5rem;font-weight:700;border-bottom:3px solid var(--accent-primary);padding-bottom:.5rem;margin-bottom:2rem}h2{font-size:2rem;border-bottom:2px solid var(--border-secondary);padding-bottom:.5rem;margin-bottom:1.5rem}h3{font-size:1.5rem;margin-bottom:1rem}p{color:var(--text-secondary);margin:0 0 1rem;line-height:1.6}input,textarea,select{background-color:var(--bg-tertiary);border:1px solid var(--border-primary);color:var(--text-primary);padding:12px 16px;border-radius:8px;font-size:14px;transition:all .2s ease}input::placeholder,textarea::placeholder,select::placeholder{color:var(--text-muted)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #0080ff1a;background-color:var(--bg-hover)}input:hover,textarea:hover,select:hover{border-color:var(--border-secondary)}input:disabled,textarea:disabled,select:disabled{opacity:.6;cursor:not-allowed}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;gap:8px}.btn:focus{outline:none;box-shadow:0 0 0 3px #ffffff1a}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.btn-primary{background-color:var(--accent-primary);color:#fff}.btn.btn-primary:hover{background-color:#0073e6;transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow-medium)}.btn.btn-secondary{background-color:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border-secondary)}.btn.btn-secondary:hover{background-color:var(--bg-active);border-color:var(--border-tertiary);transform:translateY(-1px)}.btn.btn-danger{background-color:var(--accent-danger);color:#fff}.btn.btn-danger:hover{background-color:#d22d2d;transform:translateY(-1px)}.card{background-color:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:12px;padding:24px;transition:all .2s ease}.card:hover{border-color:var(--border-secondary);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-light)}.text-primary{color:var(--text-primary)!important}.text-secondary{color:var(--text-secondary)!important}.text-muted{color:var(--text-muted)!important}.text-success{color:var(--accent-success)!important}.text-warning{color:var(--accent-warning)!important}.text-danger{color:var(--accent-danger)!important}.bg-primary{background-color:var(--bg-primary)!important}.bg-secondary{background-color:var(--bg-secondary)!important}.bg-tertiary{background-color:var(--bg-tertiary)!important}@media (max-width: 768px){html,body{height:auto;min-height:100vh;overflow-y:auto;overflow-x:hidden}app-root{height:auto;min-height:100vh;overflow:visible;padding:16px}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}.btn{padding:10px 16px;font-size:13px}.card{padding:20px 16px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease}.animate-slide-up{animation:slideInUp .3s ease}