/**
 * Edelmetall-Vault: Frontend Styles
 *
 * Design: Dark Theme mit Gold-Akzent
 * 
 * @package EdelmetallVault
 * @since   0.5.0
 * @version 0.9.4 - Toast-Notifications hinzugefügt
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Farben */
    /* Update v0.6.2: Neue Gold-Farbtöne */
    --foursys-vault-gold: #c7ab7b;
    --foursys-vault-gold-light: #c9ad7c;
    --foursys-vault-gold-dark: #8e7b52;
    --foursys-vault-gold-gradient: linear-gradient(135deg, #c9ad7c 0%, #8e7b52 100%);
    
    --foursys-vault-bg-dark: #0D0D0D;
    --foursys-vault-bg-card: #1A1A1A;
    --foursys-vault-bg-input: #252525;
    --foursys-vault-bg-hover: #2A2A2A;
    
    --foursys-vault-text-primary: #FFFFFF;
    --foursys-vault-text-secondary: #A0A0A0;
    --foursys-vault-text-muted: #666666;
    
    --foursys-vault-border: #333333;
    --foursys-vault-border-focus: var(--foursys-vault-gold);
    
    --foursys-vault-success: #4CAF50;
    --foursys-vault-warning: #FF9800;
    --foursys-vault-error: #F44336;
    
    /* Scrollbar Update v0.6.8 */
    --foursys-vault-scrollbar-width: 6px;
    --foursys-vault-scrollbar-track: transparent;
    --foursys-vault-scrollbar-thumb: #444444;
    --foursys-vault-scrollbar-thumb-hover: #555555;
    
    /* Typografie */
    --foursys-vault-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --foursys-vault-font-mono: 'Space Mono', 'SF Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --foursys-vault-space-xs: 4px;
    --foursys-vault-space-sm: 8px;
    --foursys-vault-space-md: 16px;
    --foursys-vault-space-lg: 24px;
    --foursys-vault-space-xl: 32px;
    --foursys-vault-space-2xl: 48px;
    
    /* Border Radius */
    --foursys-vault-radius-sm: 4px;
    --foursys-vault-radius-md: 8px;
    --foursys-vault-radius-lg: 12px;
    --foursys-vault-radius-xl: 16px;
    
    /* Transitions */
    --foursys-vault-transition-fast: 150ms ease;
    --foursys-vault-transition-normal: 250ms ease;
}

/* ==========================================================================
   Slim Scrollbar (Update v0.6.8)
   ========================================================================== */

/* Webkit (Chrome, Safari, Edge) */
.foursys-vault ::-webkit-scrollbar,
.foursys-modal ::-webkit-scrollbar {
    width: var(--foursys-vault-scrollbar-width);
    height: var(--foursys-vault-scrollbar-width);
}

.foursys-vault ::-webkit-scrollbar-track,
.foursys-modal ::-webkit-scrollbar-track {
    background: var(--foursys-vault-scrollbar-track);
    border-radius: var(--foursys-vault-scrollbar-width);
}

.foursys-vault ::-webkit-scrollbar-thumb,
.foursys-modal ::-webkit-scrollbar-thumb {
    background: var(--foursys-vault-scrollbar-thumb);
    border-radius: var(--foursys-vault-scrollbar-width);
}

.foursys-vault ::-webkit-scrollbar-thumb:hover,
.foursys-modal ::-webkit-scrollbar-thumb:hover {
    background: var(--foursys-vault-scrollbar-thumb-hover);
}

.foursys-vault ::-webkit-scrollbar-corner,
.foursys-modal ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox */
.foursys-vault,
.foursys-vault *,
.foursys-modal,
.foursys-modal * {
    scrollbar-width: thin;
    scrollbar-color: var(--foursys-vault-scrollbar-thumb) var(--foursys-vault-scrollbar-track);
}

/* ==========================================================================
   Page Overflow Control (Update v1.0.2)
   Versteckt die Haupt-Scrollbar wenn Vault aktiv ist
   ========================================================================== */

body:has(.foursys-vault),
html:has(.foursys-vault) {
    overflow: hidden !important;
    height: 100vh;
}

/* ==========================================================================
   Base Container
   ========================================================================== */

.foursys-vault {
    font-family: var(--foursys-vault-font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-bg-dark);
    /* Update v0.6.8: Full-Height Dashboard */
    min-height: calc(100vh - 200px);
    /* Update v0.13.2: Border-Radius 0 für Full-Screen */
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.foursys-vault--dark {
    background: var(--foursys-vault-bg-dark);
}

.foursys-vault * {
    box-sizing: border-box;
}

/* Screen Reader Only */
.foursys-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;
}

/* Hidden-Attribut unterstützen */
.foursys-vault [hidden] {
    display: none !important;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.foursys-vault__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--foursys-vault-space-md);
    color: var(--foursys-vault-text-secondary);
    width: 100%;
    margin: 0 auto;
}

.foursys-vault__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--foursys-vault-border);
    border-top-color: var(--foursys-vault-gold);
    border-radius: 50%;
    animation: foursys-vault-spin 1s linear infinite;
}

@keyframes foursys-vault-spin {
    to { transform: rotate(360deg); }
}

.foursys-vault__error {
    text-align: center;
    color: var(--foursys-vault-error);
}

.foursys-vault__error svg {
    margin-bottom: var(--foursys-vault-space-md);
}

/* ==========================================================================
   Screen Container
   ========================================================================== */

.foursys-vault__screen {
    padding: var(--foursys-vault-space-lg);
    max-width: 480px;
    margin: 0 auto;
    /* Update v0.6.8: Screens füllen verfügbaren Platz */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Dashboard-Screen soll volle Breite haben - Update v0.9.1 */
.foursys-vault__screen--dashboard {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

/* ==========================================================================
   Login Required
   ========================================================================== */

.foursys-vault-login-required {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--foursys-vault-space-xl);
    text-align: center;
    background: var(--foursys-vault-bg-dark);
    border-radius: var(--foursys-vault-radius-xl);
}

.foursys-vault-login-required__icon {
    color: var(--foursys-vault-gold);
    margin-bottom: var(--foursys-vault-space-lg);
}

.foursys-vault-login-required__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 var(--foursys-vault-space-sm);
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-login-required__text {
    color: var(--foursys-vault-text-secondary);
    margin: 0 0 var(--foursys-vault-space-lg);
}

/* ==========================================================================
   Setup Screen
   ========================================================================== */

.foursys-vault-setup__header {
    text-align: center;
    margin-bottom: var(--foursys-vault-space-xl);
}

.foursys-vault-setup__icon {
    color: var(--foursys-vault-gold);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-vault-setup__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 var(--foursys-vault-space-sm);
    /* Update v0.6.2: Gold-Gradient für Titel */
    background: var(--foursys-vault-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.foursys-vault-setup__description {
    color: var(--foursys-vault-text-secondary);
    margin: 0;
}

.foursys-vault-setup__form {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-lg);
}

/* ==========================================================================
   Unlock Screen (Update v1.1.5, v1.1.6)
   ========================================================================== */

/* Update v1.1.6: Gradient über gesamten Bildschirm */
.foursys-vault:has(.foursys-vault-unlock) {
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(199, 171, 123, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(199, 171, 123, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 50%, #0D0D0D 100%);
}

.foursys-vault-unlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: var(--foursys-vault-space-xl);
    /* Transparenter Hintergrund - Gradient ist auf Parent */
    background: transparent;
}

.foursys-vault-unlock__container {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

/* Animiertes Vault-Icon */
.foursys-vault-unlock__icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--foursys-vault-space-xl);
    animation: foursys-vault-float 6s ease-in-out infinite;
}

.foursys-vault-unlock__svg {
    width: 100%;
    height: 100%;
}

/* Ring-Animationen */
.foursys-vault-unlock__ring {
    transform-origin: center;
}

.foursys-vault-unlock__ring--outer {
    opacity: 1;
}

.foursys-vault-unlock__ring--middle {
    opacity: 0.6;
}

.foursys-vault-unlock__ring--inner {
    opacity: 0.4;
}

/* Zentraler Punkt - Pulsieren */
.foursys-vault-unlock__center {
    transform-origin: center;
    animation: foursys-vault-center-pulse 2s ease-in-out infinite;
}

/* Fadenkreuz */
.foursys-vault-unlock__crosshairs {
    opacity: 0.8;
}

@keyframes foursys-vault-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes foursys-vault-center-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* Unlock-Animation beim Laden */
.foursys-vault-unlock--unlocking .foursys-vault-unlock__center {
    animation: foursys-vault-unlock-spin 0.8s linear infinite;
}

@keyframes foursys-vault-unlock-spin {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1); }
}

/* Legacy Keyframe für andere Elemente */
@keyframes foursys-vault-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.foursys-vault-unlock__keyhole {
    fill: var(--foursys-vault-gold);
}

/* Header */
.foursys-vault-unlock__header {
    text-align: center;
    margin-bottom: var(--foursys-vault-space-xl);
}

.foursys-vault-unlock__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--foursys-vault-space-sm);
    background: var(--foursys-vault-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.foursys-vault-unlock__subtitle {
    color: var(--foursys-vault-text-secondary);
    margin: 0;
    font-size: 1rem;
}

.foursys-vault-unlock__description {
    color: var(--foursys-vault-text-secondary);
    margin: 0;
}

/* Form */
.foursys-vault-unlock__form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-md);
}

/* Passwort-Eingabe mit integriertem Button */
.foursys-vault-unlock__password-group {
    margin-bottom: var(--foursys-vault-space-sm);
}

/* Update v1.1.7: !important für Theme-Kompatibilität */
.foursys-vault-unlock__input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
}

/* Update v1.3.5: Passwort-Eingabe heller Text - !important für Theme-Override */
.foursys-vault-unlock__input {
    flex: 1 !important;
    height: 48px !important;
    padding: 0 50px 0 18px !important;
    border: 1px solid var(--foursys-vault-gold) !important;
    border-radius: var(--foursys-vault-radius-md) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 1rem !important;
    font-family: var(--foursys-vault-font-mono) !important;
    transition: all 0.3s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.foursys-vault-unlock__input:focus {
    outline: none !important;
    border-color: var(--foursys-vault-gold-light) !important;
    box-shadow: 0 0 20px rgba(199, 171, 123, 0.2) !important;
}

.foursys-vault-unlock__input.error {
    border-color: var(--foursys-vault-error) !important;
    animation: foursys-vault-shake 0.5s ease !important;
}

@keyframes foursys-vault-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Update v1.1.7: Placeholder in hellem Grau (text-secondary = #A0A0A0) */
.foursys-vault-unlock__input::placeholder {
    color: var(--foursys-vault-text-secondary) !important;
    font-family: var(--foursys-vault-font-mono) !important;
    opacity: 1 !important;
}

/* WebKit Placeholder Override */
.foursys-vault-unlock__input::-webkit-input-placeholder {
    color: var(--foursys-vault-text-secondary) !important;
    opacity: 1 !important;
}

/* Firefox Placeholder Override */
.foursys-vault-unlock__input::-moz-placeholder {
    color: var(--foursys-vault-text-secondary) !important;
    opacity: 1 !important;
}

/* Update v1.1.7: Passwort-Toggle Button */
.foursys-vault-unlock__toggle-password {
    position: absolute !important;
    right: 68px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--foursys-vault-text-muted) !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}

.foursys-vault-unlock__toggle-password:hover {
    color: var(--foursys-vault-text-secondary) !important;
}

.foursys-vault-unlock__toggle-password svg {
    width: 20px !important;
    height: 20px !important;
}

.foursys-vault-unlock__eye-open[hidden],
.foursys-vault-unlock__eye-closed[hidden] {
    display: none !important;
}

/* Submit Button (Golden Arrow) - Update v1.1.7: !important */
.foursys-vault-unlock__submit-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border: none !important;
    border-radius: var(--foursys-vault-radius-md) !important;
    background: var(--foursys-vault-gold-gradient) !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.foursys-vault-unlock__submit-btn:hover:not(:disabled) {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 20px rgba(199, 171, 123, 0.4) !important;
}

.foursys-vault-unlock__submit-btn:disabled {
    opacity: 0.7 !important;
    cursor: wait !important;
}

.foursys-vault-unlock__arrow {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
}

.foursys-vault-unlock__spinner {
    animation: foursys-vault-spin 0.8s linear infinite !important;
}

.foursys-vault-unlock__spinner[hidden] {
    display: none !important;
}

.foursys-vault-unlock__submit-btn.is-loading .foursys-vault-unlock__arrow {
    display: none;
}

.foursys-vault-unlock__submit-btn.is-loading .foursys-vault-unlock__spinner {
    display: flex !important;
}

@keyframes foursys-vault-spin {
    to { transform: rotate(360deg); }
}

/* Security Note */
.foursys-vault-unlock__security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--foursys-vault-text-muted);
    font-size: 0.875rem;
    margin-top: var(--foursys-vault-space-md);
}

.foursys-vault-unlock__security-note svg {
    color: var(--foursys-vault-success);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .foursys-vault-unlock {
        padding: var(--foursys-vault-space-md);
    }
    
    .foursys-vault-unlock__icon {
        width: 100px;
        height: 100px;
    }
    
    .foursys-vault-unlock__title {
        font-size: 1.5rem;
    }
    
    /* Update v1.3.5: Passwort hell - maximale Spezifität für Theme-Override */
    .foursys-vault-unlock__input,
    .foursys-vault-unlock__input[type="password"],
    .foursys-vault-unlock__input[type="text"],
    input.foursys-vault-unlock__input {
        height: 44px !important;
        padding: 0 50px 0 14px !important;
        font-size: 0.9rem !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        opacity: 1 !important;
    }
    
    /* Placeholder separat */
    .foursys-vault-unlock__input::placeholder {
        color: #A0A0A0 !important;
        -webkit-text-fill-color: #A0A0A0 !important;
        opacity: 1 !important;
    }
    
    .foursys-vault-unlock__submit-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    
    .foursys-vault-unlock__link-btn {
        font-size: 0.8125rem;
        padding: 8px 16px;
    }
}

/* ==========================================================================
   Form Fields
   ========================================================================== */

.foursys-vault-field {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.foursys-vault-field__input-wrap--large .foursys-vault-field__input {
    height: 56px;
    font-size: 1.125rem;
    text-align: center;
    letter-spacing: 0.1em;
}

.foursys-vault-field__input {
    width: 100%;
    height: 48px;
    padding: 0 48px 0 var(--foursys-vault-space-md);
    font-family: inherit;
    font-size: 1rem;
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    transition: border-color var(--foursys-vault-transition-fast),
                box-shadow var(--foursys-vault-transition-fast);
}

.foursys-vault-field__input:focus {
    outline: none;
    border-color: var(--foursys-vault-border-focus);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.foursys-vault-field__input::placeholder {
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-field__input--error {
    border-color: var(--foursys-vault-error);
}

.foursys-vault-field__toggle {
    position: absolute;
    right: var(--foursys-vault-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--foursys-vault-text-muted);
    cursor: pointer;
    transition: color var(--foursys-vault-transition-fast);
}

.foursys-vault-field__toggle:hover {
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-field__error,
.foursys-vault-field__error-wrap {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    font-size: 0.875rem;
    color: var(--foursys-vault-error);
}

/* ==========================================================================
   Password Strength Indicator
   ========================================================================== */

.foursys-vault-strength {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-strength__bar {
    flex: 1;
    height: 4px;
    background: var(--foursys-vault-border);
    border-radius: 2px;
    overflow: hidden;
}

.foursys-vault-strength__fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width var(--foursys-vault-transition-normal),
                background-color var(--foursys-vault-transition-normal);
}

.foursys-vault-strength__fill.foursys-strength--weak {
    background-color: var(--foursys-vault-error);
}

.foursys-vault-strength__fill.foursys-strength--medium {
    background-color: var(--foursys-vault-warning);
}

.foursys-vault-strength__fill.foursys-strength--strong {
    background-color: var(--foursys-vault-success);
}

.foursys-vault-strength__fill.foursys-strength--very-strong {
    background: var(--foursys-vault-gold-gradient);
}

.foursys-vault-strength__label {
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 80px;
    text-align: right;
    color: var(--foursys-vault-text-secondary);
}

/* ==========================================================================
   Password Requirements List
   ========================================================================== */

.foursys-vault-requirements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--foursys-vault-space-xs) var(--foursys-vault-space-md);
}

.foursys-vault-requirements__item {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-muted);
    transition: color var(--foursys-vault-transition-fast);
}

.foursys-vault-requirements__item svg {
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity var(--foursys-vault-transition-fast);
}

.foursys-vault-requirements__item--valid {
    color: var(--foursys-vault-success);
}

.foursys-vault-requirements__item--valid svg {
    opacity: 1;
}

/* ==========================================================================
   Warning Box
   ========================================================================== */

.foursys-vault-warning {
    display: flex;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-md);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: var(--foursys-vault-radius-md);
}

.foursys-vault-warning__icon {
    flex-shrink: 0;
    color: var(--foursys-vault-warning);
}

.foursys-vault-warning__content {
    flex: 1;
}

.foursys-vault-warning__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foursys-vault-warning);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-vault-warning__text {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-secondary);
    margin: 0;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.foursys-vault-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-checkbox--centered {
    justify-content: center;
}

.foursys-vault-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--foursys-vault-gold);
    cursor: pointer;
}

.foursys-vault-checkbox label {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    cursor: pointer;
    user-select: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.foursys-vault-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--foursys-vault-space-sm);
    /* Update v0.13.3: Gleiche Höhe wie Dropdowns */
    height: 40px;
    padding: 0 var(--foursys-vault-space-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--foursys-vault-radius-md);
    cursor: pointer;
    transition: background-color var(--foursys-vault-transition-fast),
                transform var(--foursys-vault-transition-fast),
                opacity var(--foursys-vault-transition-fast);
}

.foursys-vault-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.foursys-vault-btn--full {
    width: 100%;
}

.foursys-vault-btn--large {
    height: 56px;
    font-size: 1.125rem;
}

.foursys-vault-btn--primary {
    /* Update v0.6.9: Weiße Schrift auf Gold-Gradient */
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-gold-gradient);
}

.foursys-vault-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #d4b88a 0%, #9a8760 100%);
}

.foursys-vault-btn--primary:active:not(:disabled) {
    background: linear-gradient(135deg, #8e7b52 0%, #6b5c3d 100%);
    transform: translateY(1px);
}

.foursys-vault-btn--secondary {
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
}

.foursys-vault-btn--secondary:hover:not(:disabled) {
    background: var(--foursys-vault-bg-hover);
}

.foursys-vault-btn--loading {
    pointer-events: none;
}

.foursys-vault-btn__spinner {
    animation: foursys-vault-spin 1s linear infinite;
}

.foursys-vault-btn__spinner svg {
    display: block;
}

/* ==========================================================================
   Throttle Countdown
   ========================================================================== */

.foursys-vault-throttle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-md);
    font-size: 0.875rem;
    color: var(--foursys-vault-warning);
    background: rgba(255, 152, 0, 0.1);
    border-radius: var(--foursys-vault-radius-md);
}

/* Update v0.6.5: Divider zwischen Login und Meine Vaults */
.foursys-vault-unlock__divider {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
    margin: var(--foursys-vault-space-md) 0;
    color: var(--foursys-vault-text-muted);
    font-size: 0.8125rem;
}

.foursys-vault-unlock__divider::before,
.foursys-vault-unlock__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--foursys-vault-border);
}

/* Update v1.1.7: "Meine Vaults" Link-Button mit !important */
.foursys-vault-unlock__link-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: transparent !important;
    border: 1px solid var(--foursys-vault-border) !important;
    border-radius: var(--foursys-vault-radius-md) !important;
    color: var(--foursys-vault-text-secondary) !important;
    font-family: var(--foursys-vault-font-sans) !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    min-width: auto !important;
}

.foursys-vault-unlock__link-btn:hover {
    border-color: var(--foursys-vault-gold) !important;
    color: var(--foursys-vault-gold) !important;
    background: transparent !important;
}

/* ==========================================================================
   Login Required Screen - Update v1.6.8
   ========================================================================== */

.foursys-vault-unlock__info-text {
    text-align: center;
    color: var(--foursys-vault-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.foursys-vault-unlock__login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--foursys-vault-bg);
    background: linear-gradient(135deg, var(--foursys-vault-gold-light) 0%, var(--foursys-vault-gold) 50%, var(--foursys-vault-gold-dark) 100%);
    border: none;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(201, 173, 124, 0.3);
}

.foursys-vault-unlock__login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 173, 124, 0.4);
    color: var(--foursys-vault-bg);
    text-decoration: none;
}

.foursys-vault-unlock__login-btn:active {
    transform: translateY(0);
}

.foursys-vault-unlock__login-btn svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Dashboard Placeholder
   ========================================================================== */

.foursys-vault__dashboard-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: var(--foursys-vault-space-md);
}

.foursys-vault__dashboard-placeholder h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--foursys-vault-gold);
}

.foursys-vault__dashboard-placeholder p {
    color: var(--foursys-vault-text-secondary);
    margin: 0;
    max-width: 320px;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 480px) {
    /* Nur Dashboard randlos - Setup/Unlock behalten Padding */
    .foursys-vault__screen--dashboard {
        padding: 0;
    }
    
    .foursys-vault-setup__title,
    .foursys-vault-unlock__title {
        font-size: 1.5rem;
    }
    
    .foursys-vault-requirements {
        grid-template-columns: 1fr;
    }
    
    .foursys-vault-warning {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Modal Dialogs (Update v0.6.0)
   ========================================================================== */

body.foursys-modal-open {
    overflow: hidden;
}

.foursys-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--foursys-vault-space-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--foursys-vault-transition-normal),
                visibility var(--foursys-vault-transition-normal);
}

.foursys-modal--visible {
    opacity: 1;
    visibility: visible;
}

.foursys-modal--closing {
    opacity: 0;
}

.foursys-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.foursys-modal__container {
    position: relative;
    width: 100%;
    max-height: 90vh;
    background: var(--foursys-vault-bg-card);
    border-radius: var(--foursys-vault-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform var(--foursys-vault-transition-normal);
}

.foursys-modal--visible .foursys-modal__container {
    transform: translateY(0);
}

.foursys-modal--sm .foursys-modal__container {
    max-width: 400px;
}

.foursys-modal--md .foursys-modal__container {
    max-width: 520px;
}

.foursys-modal--lg .foursys-modal__container {
    max-width: 680px;
}

.foursys-modal--xl .foursys-modal__container {
    max-width: 900px;
}

.foursys-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--foursys-vault-space-lg);
    border-bottom: 1px solid var(--foursys-vault-border);
}

.foursys-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--foursys-vault-text-primary);
}

.foursys-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--foursys-vault-radius-sm);
    color: var(--foursys-vault-text-muted);
    cursor: pointer;
    transition: color var(--foursys-vault-transition-fast),
                background-color var(--foursys-vault-transition-fast);
}

.foursys-modal__close:hover {
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-bg-hover);
}

.foursys-modal__body {
    flex: 1;
    padding: var(--foursys-vault-space-lg);
    overflow-y: auto;
}

.foursys-modal__message {
    color: var(--foursys-vault-text-secondary);
    margin: 0 0 var(--foursys-vault-space-lg);
    line-height: 1.6;
}

.foursys-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-lg);
    border-top: 1px solid var(--foursys-vault-border);
}

.foursys-modal__summary {
    flex: 1;
    min-width: 0;
}

.foursys-modal__summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-modal__summary-date {
    font-weight: 500;
    color: var(--foursys-vault-gold);
}

.foursys-modal__summary-details {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foursys-modal__summary-details strong {
    color: var(--foursys-vault-text);
    font-weight: 600;
}

.foursys-modal__actions {
    display: flex;
    gap: var(--foursys-vault-space-sm);
    justify-content: flex-end;
    flex-shrink: 0;
}

.foursys-modal__actions--center {
    justify-content: center;
}

/* ==========================================================================
   Form Styles (Update v0.6.0, v0.20.0: Kompaktere Abstände)
   ========================================================================== */

.foursys-form {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-form__group {
    margin: 0;
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
}

.foursys-form__group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foursys-vault-gold);
    padding: 0 var(--foursys-vault-space-xs);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-form__group .foursys-form__field:not(:last-child) {
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-form__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.foursys-form__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foursys-vault-text-secondary);
}

.foursys-form__required {
    color: var(--foursys-vault-error);
}

.foursys-form__input-wrap {
    position: relative;
}

.foursys-form__input,
.foursys-form__select,
.foursys-form__textarea {
    /* Update v0.6.7: Komplett einheitliche Styles */
    display: block;
    width: 100%;
    padding: 12px var(--foursys-vault-space-md);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--foursys-vault-text-primary) !important;
    background-color: var(--foursys-vault-bg-dark) !important;
    border: 1px solid var(--foursys-vault-border) !important;
    border-radius: var(--foursys-vault-radius-sm);
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color var(--foursys-vault-transition-fast),
                box-shadow var(--foursys-vault-transition-fast);
}

/* Einheitliche Höhe für einzeilige Felder */
.foursys-form__input,
.foursys-form__select {
    height: 46px;
}

/* Textarea-spezifisch */
.foursys-form__textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

/* Focus-State für alle */
.foursys-form__input:focus,
.foursys-form__select:focus,
.foursys-form__textarea:focus {
    border-color: var(--foursys-vault-gold) !important;
    box-shadow: 0 0 0 2px rgba(199, 171, 123, 0.15);
}

/* Placeholder */
.foursys-form__input::placeholder,
.foursys-form__textarea::placeholder {
    color: var(--foursys-vault-text-muted) !important;
    opacity: 1;
}

/* Alle Input-Typen explizit */
input.foursys-form__input,
input.foursys-form__input[type="text"],
input.foursys-form__input[type="number"],
input.foursys-form__input[type="date"],
input.foursys-form__input[type="email"],
input.foursys-form__input[type="password"],
input.foursys-form__input[type="tel"],
input.foursys-form__input[type="url"],
input.foursys-form__input[type="search"],
textarea.foursys-form__textarea,
select.foursys-form__select {
    color: var(--foursys-vault-text-primary) !important;
    background-color: var(--foursys-vault-bg-dark) !important;
    border: 1px solid var(--foursys-vault-border) !important;
}

/* Autofill überschreiben */
.foursys-form__input:-webkit-autofill,
.foursys-form__input:-webkit-autofill:hover,
.foursys-form__input:-webkit-autofill:focus,
.foursys-form__input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--foursys-vault-bg-dark) inset !important;
    -webkit-text-fill-color: var(--foursys-vault-text-primary) !important;
    border: 1px solid var(--foursys-vault-border) !important;
    caret-color: var(--foursys-vault-text-primary) !important;
}

/* Date-Input */
.foursys-form__input[type="date"] {
    color-scheme: dark;
}

.foursys-form__input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* Number-Input ohne Spinner */
.foursys-form__input[type="number"]::-webkit-outer-spin-button,
.foursys-form__input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.foursys-form__input[type="number"] {
    -moz-appearance: textfield;
}

.foursys-form__input--error {
    border-color: var(--foursys-vault-error) !important;
}

.foursys-form__select {
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0A0A0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Update v0.6.1: Fix für Select-Optionen im Dark-Theme */
.foursys-form__select option {
    background-color: var(--foursys-vault-bg-card);
    color: var(--foursys-vault-text-primary);
    padding: 8px 12px;
}

.foursys-form__select option:hover,
.foursys-form__select option:focus,
.foursys-form__select option:checked {
    background-color: var(--foursys-vault-gold);
    color: var(--foursys-vault-bg-dark);
}

/* Firefox-spezifische Fixes */
@-moz-document url-prefix() {
    .foursys-form__select {
        color: var(--foursys-vault-text-primary);
        background-color: var(--foursys-vault-bg-dark);
    }
    
    .foursys-form__select option {
        background-color: #1A1A1A;
        color: #FFFFFF;
    }
}

/* Webkit (Chrome, Safari, Edge) - Dropdown-Styling */
.foursys-form__select::-webkit-scrollbar {
    width: 8px;
}

.foursys-form__select::-webkit-scrollbar-track {
    background: var(--foursys-vault-bg-dark);
}

.foursys-form__select::-webkit-scrollbar-thumb {
    background: var(--foursys-vault-border);
    border-radius: 4px;
}

.foursys-form__help {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
    margin: 0;
}

.foursys-form__error {
    font-size: 0.75rem;
    color: var(--foursys-vault-error);
}

.foursys-form__field--checkbox {
    flex-direction: row;
    align-items: flex-start;
}

.foursys-form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    cursor: pointer;
}

.foursys-form__checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--foursys-vault-gold);
}

.foursys-form__checkbox span {
    font-size: 0.9375rem;
    color: var(--foursys-vault-text-secondary);
    white-space: nowrap;
}

/* Update v0.20.0: Depot-Optionen Checkbox-Layout */
/* Update v1.9.26: Beide Sprachen unterstützen */
.foursys-form__group[data-group="Depot-Optionen"],
.foursys-form__group[data-group="DEPOT-OPTIONEN"],
.foursys-form__group[data-group="DEPOT OPTIONS"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--foursys-vault-space-md);
}

.foursys-form__group[data-group="Depot-Optionen"] .foursys-form__group-title,
.foursys-form__group[data-group="DEPOT-OPTIONEN"] .foursys-form__group-title,
.foursys-form__group[data-group="DEPOT OPTIONS"] .foursys-form__group-title {
    width: 100%;
    flex-shrink: 0;
}

.foursys-form__group[data-group="Depot-Optionen"] .foursys-form__field--checkbox,
.foursys-form__group[data-group="DEPOT-OPTIONEN"] .foursys-form__field--checkbox,
.foursys-form__group[data-group="DEPOT OPTIONS"] .foursys-form__field--checkbox {
    margin-bottom: 0;
    flex-shrink: 0;
}

.foursys-form__group[data-group="Depot-Optionen"] .foursys-form__field[data-field="provider"],
.foursys-form__group[data-group="Depot-Optionen"] .foursys-form__field[data-field="account_number"],
.foursys-form__group[data-group="DEPOT-OPTIONEN"] .foursys-form__field[data-field="provider"],
.foursys-form__group[data-group="DEPOT-OPTIONEN"] .foursys-form__field[data-field="account_number"],
.foursys-form__group[data-group="DEPOT OPTIONS"] .foursys-form__field[data-field="provider"],
.foursys-form__group[data-group="DEPOT OPTIONS"] .foursys-form__field[data-field="account_number"] {
    flex: 1;
    min-width: 150px;
}

.foursys-form__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-md);
}

.foursys-form__radio {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    cursor: pointer;
}

.foursys-form__radio input {
    accent-color: var(--foursys-vault-gold);
}

/* ==========================================================================
   Dashboard (Update v0.6.8)
   ========================================================================== */

/* max-width wird bereits oben bei .foursys-vault__screen--dashboard gesetzt */

.foursys-vault-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-lg);
    /* Update v0.6.8: Dashboard füllt verfügbaren Platz */
    flex: 1;
    min-height: 0;
}

.foursys-vault-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--foursys-vault-space-md);
    flex-shrink: 0;
}

.foursys-vault-dashboard__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    /* Update v0.6.2: Gold-Gradient für Titel */
    background: var(--foursys-vault-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.foursys-vault-dashboard__actions {
    display: flex;
    gap: var(--foursys-vault-space-sm);
}

/* Portfolio Summary */
.foursys-vault-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--foursys-vault-space-md);
}

.foursys-vault-summary__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    padding: var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-card);
    border-radius: var(--foursys-vault-radius-md);
    border: 1px solid var(--foursys-vault-border);
}

.foursys-vault-summary__label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-summary__value {
    font-family: var(--foursys-vault-font-mono);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-summary__item--xau { border-color: rgba(212, 175, 55, 0.3); }
.foursys-vault-summary__item--xag { border-color: rgba(192, 192, 192, 0.3); }
.foursys-vault-summary__item--xpt { border-color: rgba(229, 228, 226, 0.3); }
.foursys-vault-summary__item--xpd { border-color: rgba(206, 208, 221, 0.3); }

/* Transactions List Container - Update v0.6.8 */
#em-vault-transactions-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 calc(var(--foursys-vault-space-md) * -1);
    padding: 0 var(--foursys-vault-space-md);
}

/* Transactions List */
/* Update v0.17.6: Border um jede Zeile statt gap */
.foursys-vault-transactions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.foursys-vault-transaction {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    margin-bottom: var(--foursys-vault-space-xs);
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-vault-transaction:last-child {
    margin-bottom: 0;
}

.foursys-vault-transaction:hover {
    background: var(--foursys-vault-bg-hover);
    border-color: var(--foursys-vault-gold);
}

.foursys-vault-transaction__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--foursys-vault-bg-input);
    border-radius: 50%;
}

.foursys-vault-transaction__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.foursys-vault-transaction__title {
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Update v1.0.0: Notes/Info dezent hinter dem Namen */
.foursys-vault-transaction__notes {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--foursys-vault-text-muted);
    margin-left: 0.5em;
    font-style: italic;
}

.foursys-vault-transaction__meta {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-transaction__values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.foursys-vault-transaction__amount {
    font-family: var(--foursys-vault-font-mono);
    font-weight: 600;
}

.foursys-vault-transaction__amount--positive {
    color: var(--foursys-vault-success);
}

.foursys-vault-transaction__amount--negative {
    color: var(--foursys-vault-error);
}

.foursys-vault-transaction__price {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-transaction__actions {
    display: flex;
    gap: var(--foursys-vault-space-xs);
    opacity: 1; /* Update v0.17.6: Immer sichtbar */
}

/* Update v0.17.6: Actions immer sichtbar, hover-Regel entfernt */

.foursys-vault-transaction__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--foursys-vault-radius-sm);
    color: var(--foursys-vault-text-muted);
    cursor: pointer;
    transition: color var(--foursys-vault-transition-fast),
                background-color var(--foursys-vault-transition-fast);
}

.foursys-vault-transaction__btn:hover {
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-bg-input);
}

.foursys-vault-transaction__btn--danger:hover {
    color: var(--foursys-vault-error);
}

/* Empty State */
.foursys-vault-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--foursys-vault-space-2xl);
    text-align: center;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-empty svg {
    margin-bottom: var(--foursys-vault-space-md);
    opacity: 0.5;
}

.foursys-vault-empty p {
    margin: 0;
}

.foursys-vault-empty__hint {
    font-size: 0.875rem;
    margin-top: var(--foursys-vault-space-xs) !important;
}

/* Danger Button */
.foursys-vault-btn--danger {
    color: var(--foursys-vault-text-primary);
    background: var(--foursys-vault-error);
}

.foursys-vault-btn--danger:hover:not(:disabled) {
    background: #ff5252;
}

/* ==========================================================================
   Responsive (Update v0.6.0)
   ========================================================================== */

@media (max-width: 640px) {
    .foursys-modal {
        padding: 0;
    }
    
    .foursys-modal__container {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .foursys-modal--sm .foursys-modal__container,
    .foursys-modal--md .foursys-modal__container,
    .foursys-modal--lg .foursys-modal__container,
    .foursys-modal--xl .foursys-modal__container {
        max-width: 100%;
    }
    
    /* Modal Footer: Zusammenfassung über Buttons auf Mobile */
    .foursys-modal__footer {
        flex-direction: column;
        gap: var(--foursys-vault-space-sm);
    }
    
    .foursys-modal__summary {
        width: 100%;
        text-align: center;
        padding-bottom: var(--foursys-vault-space-sm);
        border-bottom: 1px solid var(--foursys-vault-border);
        margin-bottom: var(--foursys-vault-space-xs);
    }
    
    .foursys-modal__summary-text {
        align-items: center;
    }
    
    .foursys-modal__footer .foursys-vault-btn {
        width: 100%;
    }
    
    .foursys-modal__actions {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .foursys-modal__actions .foursys-vault-btn {
        width: 100%;
    }
    
    .foursys-vault-dashboard__header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .foursys-vault-transaction {
        flex-wrap: wrap;
    }
    
    .foursys-vault-transaction__actions {
        opacity: 1;
        width: 100%;
        justify-content: flex-end;
        margin-top: var(--foursys-vault-space-sm);
        padding-top: var(--foursys-vault-space-sm);
        border-top: 1px solid var(--foursys-vault-border);
    }
}

/* ==========================================================================
   Portfolio Summary Erweiterung (Update v0.8.0)
   ========================================================================== */

.foursys-vault-summary__price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin-top: var(--foursys-vault-space-xs);
}

.foursys-vault-summary__change {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.foursys-vault-summary__change--positive {
    color: var(--foursys-vault-success);
}

.foursys-vault-summary__change--negative {
    color: var(--foursys-vault-error);
}

/* ==========================================================================
   Portfolio Details (Update v0.8.0)
   ========================================================================== */

.foursys-vault-portfolio-details {
    margin-top: var(--foursys-vault-space-lg);
    padding: var(--foursys-vault-space-lg);
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
}

.foursys-vault-portfolio-details__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--foursys-vault-space-lg);
}

@media (max-width: 640px) {
    .foursys-vault-portfolio-details__grid {
        grid-template-columns: 1fr;
        gap: var(--foursys-vault-space-md);
    }
}

.foursys-vault-portfolio-details__item {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-xs);
    text-align: center;
}

.foursys-vault-portfolio-details__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-portfolio-details__value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--foursys-vault-space-xs);
}

.foursys-vault-portfolio-details__value--large {
    font-size: 1.5rem;
    background: var(--foursys-vault-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.foursys-vault-portfolio-details__value--positive {
    color: var(--foursys-vault-success);
}

.foursys-vault-portfolio-details__value--negative {
    color: var(--foursys-vault-error);
}

.foursys-vault-portfolio-details__value small {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

.foursys-vault-portfolio-details__value svg {
    flex-shrink: 0;
}

.foursys-vault-portfolio-details__info {
    margin-top: var(--foursys-vault-space-md);
    padding-top: var(--foursys-vault-space-md);
    border-top: 1px solid var(--foursys-vault-border);
    text-align: center;
    color: var(--foursys-vault-text-muted);
    font-size: 0.75rem;
}

/* ==========================================================================
   Dashboard V2 - Professionelles Layout (Update v0.9.0)
   ========================================================================== */

.foursys-vault-dashboard {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--foursys-vault-space-lg) var(--foursys-vault-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-lg);
}

/* Header */
.foursys-vault-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-md);
}

.foursys-vault-dashboard__brand {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foursys-vault-gold);
}

.foursys-vault-dashboard__brand svg {
    stroke: var(--foursys-vault-gold);
    fill: var(--foursys-vault-gold);
}

.foursys-vault-dashboard__actions {
    display: flex;
    gap: var(--foursys-vault-space-sm);
    align-items: center;
}

/* Update v0.9.9: Währungs-Dropdown */
.foursys-vault-currency-select {
    position: relative;
}

.foursys-vault-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 0 var(--foursys-vault-space-xl) 0 var(--foursys-vault-space-md);
    font-family: var(--foursys-vault-font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foursys-vault-gold);
    background-color: var(--foursys-vault-bg-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c7ab7b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    cursor: pointer;
    transition: border-color var(--foursys-vault-transition-fast),
                background-color var(--foursys-vault-transition-fast);
}

.foursys-vault-select:hover {
    border-color: var(--foursys-vault-gold-dark);
    background-color: rgba(199, 171, 123, 0.05);
}

.foursys-vault-select:focus {
    outline: none;
    border-color: var(--foursys-vault-gold);
    box-shadow: 0 0 0 2px rgba(199, 171, 123, 0.2);
}

.foursys-vault-select option {
    background: var(--foursys-vault-bg-card);
    color: var(--foursys-vault-text-primary);
    padding: var(--foursys-vault-space-sm);
}

/* Stats Row (Top) - Update v0.9.1: Volle Breite */
/* Update v0.17.4: Konsistente Abstände */
/* Update v0.21.1: Abstände vereinheitlicht auf space-md */
.foursys-vault-stats {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--foursys-vault-space-md);
    margin-bottom: var(--foursys-vault-space-md);
    align-items: stretch; /* Update v1.5.18: Alle Karten gleich hoch */
}

@media (max-width: 1200px) {
    .foursys-vault-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .foursys-vault-stats {
        grid-template-columns: 1fr;
    }
}

/* Update v1.5.19: Sekundäre Karten mit Grid für exakte Ausrichtung */
.foursys-vault-stats__card {
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-lg);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--foursys-vault-space-xs);
}

/* Label in Zeile 1 */
.foursys-vault-stats__card > .foursys-vault-stats__label {
    grid-row: 1;
}

/* Value in Zeile 2 */
.foursys-vault-stats__card > .foursys-vault-stats__value {
    grid-row: 2;
}

/* Badge in Zeile 4 (unten) */
.foursys-vault-stats__card > .foursys-vault-stats__badge {
    grid-row: 4;
    align-self: end;
}

.foursys-vault-stats__card--primary {
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    border-color: var(--foursys-vault-gold-dark);
}

.foursys-vault-stats__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-stats__value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-stats__card--primary .foursys-vault-stats__value {
    background: var(--foursys-vault-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem; /* Update v1.5.15: Gleiche Größe wie Investiert/Ergebnis */
}

.foursys-vault-stats__value--change.positive {
    color: var(--foursys-vault-success);
}

.foursys-vault-stats__value--change.negative {
    color: var(--foursys-vault-error);
}

.foursys-vault-stats__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--foursys-vault-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

/* Update v1.5.21: Meta-Info (z.B. letztes Investitionsdatum) */
.foursys-vault-stats__meta {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
    font-family: var(--foursys-vault-font-mono);
    grid-row: 4;
    align-self: end;
    margin-bottom: 4px;
}

.foursys-vault-stats__badge.positive {
    background: rgba(76, 175, 80, 0.15);
    color: var(--foursys-vault-success);
}

.foursys-vault-stats__badge.negative {
    background: rgba(244, 67, 54, 0.15);
    color: var(--foursys-vault-error);
}

.foursys-vault-stats__chart {
    height: 40px;
    margin-top: var(--foursys-vault-space-sm);
    opacity: 0.6;
}

/* Sparkline SVG */
.foursys-vault-sparkline {
    width: 100%;
    height: 100%;
}

.foursys-vault-sparkline__line {
    fill: none;
    stroke: var(--foursys-vault-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.foursys-vault-sparkline__area {
    fill: url(#sparkline-gradient);
    opacity: 0.3;
}

/* Main Row (Middle) - Update v0.9.3: 50/50 Aufteilung */
.foursys-vault-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--foursys-vault-space-lg);
}

@media (max-width: 900px) {
    .foursys-vault-main {
        grid-template-columns: 1fr;
    }
}

/* Panel Base */
.foursys-vault-panel {
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-lg);
}

.foursys-vault-panel__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin: 0 0 var(--foursys-vault-space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

/* Update v0.21.0: Panel-Titel mit Ratio */
.foursys-vault-panel__title--with-ratio {
    justify-content: space-between;
}

.foursys-vault-panel__ratio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-panel__ratio-label {
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-panel__ratio-value {
    font-family: var(--foursys-vault-font-mono);
    font-weight: 700;
    color: var(--foursys-vault-gold);
    background: rgba(199, 171, 123, 0.1);
    padding: 2px 8px;
    border-radius: var(--foursys-vault-radius-sm);
}

.foursys-vault-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.foursys-vault-panel__badge--live {
    background: rgba(76, 175, 80, 0.15);
    color: var(--foursys-vault-success);
}

/* Update v1.0.12: Klickbares LIVE-Badge für manuelle Aktualisierung */
.foursys-vault-panel__badge--clickable {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.foursys-vault-panel__badge--clickable:hover {
    background: rgba(76, 175, 80, 0.3);
    transform: scale(1.05);
}

.foursys-vault-panel__badge--clickable:active {
    transform: scale(0.95);
}

.foursys-vault-panel__badge--clickable.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.foursys-vault-panel__badge--clickable.is-loading .foursys-vault-panel__badge-dot {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.foursys-vault-panel__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--foursys-vault-success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Holdings Grid - Update v0.9.3: Immer 2x2 für 4 Metalle */
.foursys-vault-holdings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--foursys-vault-space-md);
}

@media (max-width: 500px) {
    .foursys-vault-holdings {
        grid-template-columns: 1fr;
    }
}

.foursys-vault-holding {
    background: var(--foursys-vault-bg-dark);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    padding: var(--foursys-vault-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-xs);
}

.foursys-vault-holding__header {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-holding__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foursys-vault-holding__icon--xau {
    background: linear-gradient(135deg, #c9ad7c 0%, #8e7b52 100%);
}

.foursys-vault-holding__icon--xag {
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%);
}

.foursys-vault-holding__icon--xpt {
    background: linear-gradient(135deg, #E5E4E2 0%, #A9A9A9 100%);
}

.foursys-vault-holding__icon--xpd {
    background: linear-gradient(135deg, #CED0DD 0%, #8B8D94 100%);
}

.foursys-vault-holding__name {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-holding__name--xau { color: var(--foursys-vault-gold); }
.foursys-vault-holding__name--xag { color: #C0C0C0; }
.foursys-vault-holding__name--xpt { color: #E5E4E2; }
.foursys-vault-holding__name--xpd { color: #CED0DD; }

.foursys-vault-holding__weight {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-holding__value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-holding__change {
    font-size: 0.875rem;
    font-weight: 600;
}

.foursys-vault-holding__change--positive { color: var(--foursys-vault-success); }
.foursys-vault-holding__change--negative { color: var(--foursys-vault-error); }

.foursys-vault-holding__bar {
    height: 4px;
    background: var(--foursys-vault-border);
    border-radius: 2px;
    margin-top: var(--foursys-vault-space-sm);
    overflow: hidden;
}

.foursys-vault-holding__bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.foursys-vault-holding__bar-fill--xau { background: var(--foursys-vault-gold); }
.foursys-vault-holding__bar-fill--xag { background: #C0C0C0; }
.foursys-vault-holding__bar-fill--xpt { background: #E5E4E2; }
.foursys-vault-holding__bar-fill--xpd { background: #CED0DD; }

/* Leere Holdings - Update v0.9.3 */
.foursys-vault-holding--empty {
    opacity: 0.5;
}

.foursys-vault-holding--empty .foursys-vault-holding__value,
.foursys-vault-holding--empty .foursys-vault-holding__weight,
.foursys-vault-holding--empty .foursys-vault-holding__change {
    color: var(--foursys-vault-text-muted);
}

/* Rates */
.foursys-vault-rates {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-md);
}

.foursys-vault-rate {
    display: grid;
    /* Update v1.0.6: Grid-Layout mit Gewinn/Verlust-Spalte */
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-sm) 0;
    border-bottom: 1px solid var(--foursys-vault-border);
}

.foursys-vault-rate:last-child {
    border-bottom: none;
}

.foursys-vault-rate__metal {
    display: flex;
    flex-direction: column;
}

/* Update v3.0.5: Metallname oben (groß wie Preis), Code darunter (klein grau), keine Farbcodes */
.foursys-vault-rate__name {
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    font-size: 1rem;
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-rate__code {
    font-size: 0.7rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-rate__price {
    /* Update v0.13.2: Rechtsbündig */
    text-align: right;
    justify-self: end;
}

.foursys-vault-rate__value {
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-rate__unit {
    font-size: 0.7rem;
    color: var(--foursys-vault-text-muted);
}

/* Update v0.21.0: Preis pro Gramm */
.foursys-vault-rate__gram {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-secondary);
    margin-top: 2px;
}

.foursys-vault-rate__gram .foursys-vault-rate__unit {
    margin-left: 4px;
}

.foursys-vault-rate__change {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
    /* Update v0.13.2: Rechtsbündig */
    justify-self: end;
    text-align: right;
}

.foursys-vault-rate__change--positive { color: var(--foursys-vault-success); }
.foursys-vault-rate__change--negative { color: var(--foursys-vault-error); }

/* Update v1.0.7: Gewinn/Verlust-Spalte im Live-Kurse Widget (untereinander) */
.foursys-vault-rate__profit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    justify-self: end;
    font-family: var(--foursys-vault-font-mono);
    min-width: 100px;
    padding-right: var(--foursys-vault-space-sm);
}

.foursys-vault-rate__profit-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.foursys-vault-rate__profit-percent {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
}

.foursys-vault-rate__profit--positive { color: var(--foursys-vault-success); }
.foursys-vault-rate__profit--negative { color: var(--foursys-vault-error); }
.foursys-vault-rate__profit--neutral { color: var(--foursys-vault-text-muted); }

/* Update v1.0.12: € Betrag und % untereinander in einer Spalte */
.foursys-vault-rate__change-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    justify-self: end;
    font-family: var(--foursys-vault-font-mono);
    min-width: 110px;
    gap: 2px;
}

.foursys-vault-rate__change-column .foursys-vault-rate__profit-value {
    font-size: 0.85rem;
    font-weight: 600;
}

.foursys-vault-rate__change-column .foursys-vault-rate__change-percent {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.9;
}

.foursys-vault-rate__change-column--positive { color: var(--foursys-vault-success); }
.foursys-vault-rate__change-column--negative { color: var(--foursys-vault-error); }
.foursys-vault-rate__change-column--neutral { color: var(--foursys-vault-text-muted); }

.foursys-vault-rates__footer {
    font-size: 0.7rem;
    color: var(--foursys-vault-text-muted);
    padding-top: var(--foursys-vault-space-sm);
    border-top: 1px solid var(--foursys-vault-border);
}

/* Update v1.4.2: Live-Kurse Mobile Layout - Einheiten inline hinter Preis */
@media (max-width: 768px) {
    /* Mehr Padding für Live-Kurse Panel */
    .foursys-vault-panel--rates {
        padding: calc(var(--foursys-vault-space-sm) + 10px) !important;
    }
    
    .foursys-vault-rate {
        grid-template-columns: 55px 1fr auto;
        gap: var(--foursys-vault-space-xs);
        padding: calc(var(--foursys-vault-space-sm) + 3px) 0;
    }
    
    /* Update v1.4.2: Preis-Bereich - alles inline */
    .foursys-vault-rate__price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    
    /* Update v1.4.2: Hauptpreis + Einheit in einer Zeile */
    .foursys-vault-rate__value {
        font-size: 0.9rem;
        white-space: nowrap;
        display: inline;
    }
    
    /* Update v1.4.2: Einheit inline direkt hinter dem Preis */
    .foursys-vault-rate__unit {
        display: inline !important;
        font-size: 0.6rem;
        margin-left: 3px;
    }
    
    /* Update v1.4.2: Gramm-Preis + Einheit auch in einer Zeile */
    .foursys-vault-rate__gram {
        font-size: 0.7rem;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        white-space: nowrap;
    }
    
    .foursys-vault-rate__gram .foursys-vault-rate__unit {
        display: inline !important;
        font-size: 0.55rem;
        margin-left: 3px;
    }
    
    /* Nur Prozent anzeigen, € Betrag ausblenden */
    .foursys-vault-rate__change-column {
        min-width: 70px;
    }
    
    .foursys-vault-rate__change-column .foursys-vault-rate__profit-value {
        display: none;
    }
    
    .foursys-vault-rate__change-column .foursys-vault-rate__change-percent {
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    /* Update v3.0.5: Name groß, Code klein (Mobile) */
    .foursys-vault-rate__name {
        font-size: 0.9rem;
    }

    .foursys-vault-rate__code {
        font-size: 0.65rem;
    }
}

/* Bottom Row - Update v0.9.1: Bessere Proportionen */
.foursys-vault-bottom {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--foursys-vault-space-lg);
}

@media (max-width: 1200px) {
    .foursys-vault-bottom {
        grid-template-columns: 350px 1fr;
    }
}

@media (max-width: 900px) {
    .foursys-vault-bottom {
        grid-template-columns: 1fr;
    }
}

/* Allocation / Donut Chart */
.foursys-vault-allocation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--foursys-vault-space-lg);
}

.foursys-vault-allocation__chart {
    position: relative;
    width: 200px;
    height: 200px;
}

.foursys-vault-allocation__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.foursys-vault-allocation__total {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-gold);
}

.foursys-vault-allocation__legend {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-allocation__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foursys-vault-allocation__label {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-allocation__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.foursys-vault-allocation__dot--xau { background: var(--foursys-vault-gold); }
.foursys-vault-allocation__dot--xag { background: #C0C0C0; }
.foursys-vault-allocation__dot--xpt { background: #E5E4E2; }
.foursys-vault-allocation__dot--xpd { background: #CED0DD; }

.foursys-vault-allocation__name {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-allocation__percent {
    font-weight: 600;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
}

/* Transaction List V2 */
/* Update v1.3.3: Auto-Höhe, zeigt nur 4 Einträge */
.foursys-vault-transactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
    max-height: none;
    overflow-y: visible;
}

/* Update v1.3.3: Auf Mobile nur die ersten 4 Aktivitäten anzeigen */
@media (max-width: 768px) {
    .foursys-vault-transactions-list {
        max-height: none;
        overflow-y: visible;
    }
    
    .foursys-vault-transactions-list .foursys-vault-tx:nth-child(n+5) {
        display: none;
    }
}

.foursys-vault-tx {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-dark);
    border-radius: var(--foursys-vault-radius-md);
    transition: background var(--foursys-vault-transition-fast);
}

.foursys-vault-tx:hover {
    background: var(--foursys-vault-bg-hover);
}

.foursys-vault-tx__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.foursys-vault-tx__icon--buy {
    background: rgba(76, 175, 80, 0.15);
    color: var(--foursys-vault-success);
}

.foursys-vault-tx__icon--sell {
    background: rgba(244, 67, 54, 0.15);
    color: var(--foursys-vault-error);
}

.foursys-vault-tx__icon--deposit {
    background: rgba(33, 150, 243, 0.15);
    color: #2196F3;
}

.foursys-vault-tx__icon--withdrawal {
    background: rgba(255, 152, 0, 0.15);
    color: var(--foursys-vault-warning);
}

.foursys-vault-tx__info {
    flex: 1;
    min-width: 0;
}

.foursys-vault-tx__name {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foursys-vault-tx__meta {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-tx__amount {
    text-align: right;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
}

.foursys-vault-tx__amount--positive { color: var(--foursys-vault-success); }
.foursys-vault-tx__amount--negative { color: var(--foursys-vault-error); }

/* Empty State */
.foursys-vault-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--foursys-vault-space-2xl);
    text-align: center;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-empty-state svg {
    opacity: 0.3;
    margin-bottom: var(--foursys-vault-space-md);
}

/* ==========================================================================
   Toast Notifications - Update v0.9.4
   ========================================================================== */

.foursys-vault-notifications {
    position: fixed;
    bottom: var(--foursys-vault-space-lg);
    right: var(--foursys-vault-space-lg);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
    pointer-events: none;
}

@media (max-width: 480px) {
    .foursys-vault-notifications {
        bottom: var(--foursys-vault-space-md);
        right: var(--foursys-vault-space-md);
        left: var(--foursys-vault-space-md);
    }
}

.foursys-vault-toast {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
    min-width: 280px;
    max-width: 420px;
    padding: var(--foursys-vault-space-md) var(--foursys-vault-space-lg);
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease,
                transform 0.3s ease;
}

@media (max-width: 480px) {
    .foursys-vault-toast {
        min-width: auto;
        max-width: none;
    }
}

.foursys-vault-toast--visible {
    opacity: 1;
    transform: translateX(0);
}

.foursys-vault-toast--fade-out {
    opacity: 0;
    transform: translateX(100%);
}

/* Toast Types */
.foursys-vault-toast--success {
    border-left: 3px solid var(--foursys-vault-success);
}

.foursys-vault-toast--success .foursys-vault-toast__icon {
    color: var(--foursys-vault-success);
}

.foursys-vault-toast--error {
    border-left: 3px solid var(--foursys-vault-error);
}

.foursys-vault-toast--error .foursys-vault-toast__icon {
    color: var(--foursys-vault-error);
}

.foursys-vault-toast--warning {
    border-left: 3px solid var(--foursys-vault-warning);
}

.foursys-vault-toast--warning .foursys-vault-toast__icon {
    color: var(--foursys-vault-warning);
}

.foursys-vault-toast--info {
    border-left: 3px solid var(--foursys-vault-gold);
}

.foursys-vault-toast--info .foursys-vault-toast__icon {
    color: var(--foursys-vault-gold);
}

.foursys-vault-toast__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foursys-vault-toast__content {
    flex: 1;
    min-width: 0;
}

.foursys-vault-toast__message {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
    line-height: 1.4;
}

.foursys-vault-toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--foursys-vault-radius-sm);
    color: var(--foursys-vault-text-muted);
    cursor: pointer;
    transition: background-color var(--foursys-vault-transition-fast),
                color var(--foursys-vault-transition-fast);
}

.foursys-vault-toast__close:hover {
    background: var(--foursys-vault-bg-hover);
    color: var(--foursys-vault-text-primary);
}

/* ==========================================================================
   Chart.js Integration (Update v0.13.1)
   ========================================================================== */

/* Update v0.13.1: Globale Zeitraum-Dropdown */
.foursys-vault-period-dropdown {
    display: flex;
}

.foursys-vault-period-dropdown .foursys-vault-select {
    min-width: 100px;
}

/* Update v0.13.1: Charts Row - zwei Charts nebeneinander */
/* Update v0.17.4: Konsistente Abstände */
/* Update v0.21.1: Abstände vereinheitlicht auf space-md */
.foursys-vault-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--foursys-vault-space-md);
    margin-bottom: var(--foursys-vault-space-md);
}

/* Chart Panel */
.foursys-vault-panel--chart {
    background: var(--foursys-vault-bg-card);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-md);
}

/* Chart Container */
.foursys-vault-chart-container {
    position: relative;
    height: 220px;
    width: 100%;
}

.foursys-vault-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Update v0.13.1: Sparkline im Stats-Bereich - neben dem Wert */
/* Update v1.5.14: Größerer Sparkline für bessere Sichtbarkeit */
/* Update v1.5.16: Neue Struktur mit Header, Breakdown und Sparkline */
/* Update v1.5.17: Feste 50/50 Aufteilung, Sparkline unten ausgerichtet */
/* Update v1.5.18: Breakdown auf gleicher Höhe wie Prozent-Badge */
/* Update v1.5.19: Exakte Baseline-Ausrichtung mit anderen Karten */
.foursys-vault-stats__card--primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--foursys-vault-space-xs) var(--foursys-vault-space-md);
    align-items: start;
}

.foursys-vault-stats__header {
    display: contents;
}

.foursys-vault-stats__header .foursys-vault-stats__label {
    grid-column: 1;
    grid-row: 1;
}

.foursys-vault-stats__header .foursys-vault-stats__value {
    grid-column: 1;
    grid-row: 2;
}

.foursys-vault-stats__breakdown {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--foursys-vault-space-lg);
    grid-column: 1 / 3;
    grid-row: 4;
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
    font-family: var(--foursys-vault-font-mono);
    align-self: end;
    margin-bottom: 4px; /* Update v1.5.21: 4px höher für exakte Ausrichtung */
}

.foursys-vault-stats__breakdown-item {
    white-space: nowrap;
}

.foursys-vault-stats__sparkline {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 100%;
    min-height: 50px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.foursys-vault-stats__sparkline canvas {
    width: 100% !important;
    max-height: 60px;
}

/* Entferne alte Content-Wrapper Styles */
.foursys-vault-stats__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-shrink: 0;
}

.foursys-vault-stats__sparkline canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Allocation Chart Container */
.foursys-vault-allocation__chart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foursys-vault-allocation__chart canvas {
    max-width: 180px;
    max-height: 180px;
}

/* Allocation Center Overlay */
.foursys-vault-allocation__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.foursys-vault-allocation__total {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    font-family: var(--foursys-vault-font-mono);
}

/* Chart Loading State */
.foursys-vault-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--foursys-vault-text-muted);
}

/* Chart Empty State */
.foursys-vault-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--foursys-vault-text-muted);
    text-align: center;
    gap: var(--foursys-vault-space-xs);
}

/* Icon-only Button */
.foursys-vault-btn--icon {
    padding: var(--foursys-vault-space-sm);
    min-width: auto;
}

.foursys-vault-btn--icon span {
    display: none;
}

/* ==========================================================================
   Mobile Optimierungen (Update v0.13.1)
   ========================================================================== */

@media (max-width: 768px) {
    /* Kleinere Abstände auf Mobile */
    .foursys-vault-dashboard {
        padding: var(--foursys-vault-space-sm);
    }
    
    /* Header kompakter */
    .foursys-vault-dashboard__header {
        flex-wrap: wrap;
        gap: var(--foursys-vault-space-sm);
        padding: var(--foursys-vault-space-sm);
        margin-bottom: var(--foursys-vault-space-sm);
    }
    
    .foursys-vault-dashboard__brand span {
        display: none;
    }
    
    .foursys-vault-dashboard__actions {
        gap: var(--foursys-vault-space-xs);
    }
    
    /* Dropdowns kompakter */
    .foursys-vault-select {
        padding: var(--foursys-vault-space-xs) var(--foursys-vault-space-sm);
        font-size: 0.8125rem;
    }
    
    .foursys-vault-period-dropdown .foursys-vault-select {
        min-width: 80px;
    }
    
    /* Button Text nur im Header ausblenden auf Mobile */
    .foursys-vault-header .foursys-vault-btn__text {
        display: none;
    }
    
    .foursys-vault-header .foursys-vault-btn--primary {
        padding: var(--foursys-vault-space-sm);
    }
    
    /* Buttons in Modals und Setup/Unlock behalten volle Breite und Text */
    .foursys-modal .foursys-vault-btn,
    .foursys-vault__screen--setup .foursys-vault-btn,
    .foursys-vault__screen--unlock .foursys-vault-btn {
        width: 100%;
    }
    
    /* Stats kompakter */
    .foursys-vault-stats {
        gap: var(--foursys-vault-space-sm);
        margin-bottom: var(--foursys-vault-space-sm);
    }
    
    .foursys-vault-stats__card {
        padding: var(--foursys-vault-space-sm);
    }
    
    /* Update v1.5.17: Mobile Layout behält 50/50 Aufteilung */
    .foursys-vault-stats__card--primary {
        grid-template-columns: 1fr 1fr;
    }
    
    .foursys-vault-stats__breakdown {
        font-size: 0.7rem;
        gap: var(--foursys-vault-space-sm);
    }
    
    .foursys-vault-stats__sparkline {
        width: 100%;
        height: 40px;
        margin-top: var(--foursys-vault-space-xs);
    }
    
    .foursys-vault-stats__label {
        font-size: 0.625rem;
    }
    
    .foursys-vault-stats__value {
        font-size: 1.25rem;
    }
    
    /* Charts untereinander auf Mobile */
    .foursys-vault-charts-row {
        grid-template-columns: 1fr;
        gap: var(--foursys-vault-space-sm);
        margin-bottom: var(--foursys-vault-space-sm);
    }
    
    /* Update v1.3.7: Mehr Padding für Chart-Panels */
    .foursys-vault-panel--chart {
        padding: var(--foursys-vault-space-md);
    }
    
    /* Update v1.4.2: Charts 1,5x Höhe auf Mobile (270px statt 180px) */
    .foursys-vault-chart-container {
        height: 270px;
    }
    
    /* Update v1.3.7: Panels mit mehr Padding (+5px) */
    .foursys-vault-panel {
        padding: calc(var(--foursys-vault-space-sm) + 5px);
    }
    
    .foursys-vault-panel__title {
        font-size: 0.875rem;
        margin-bottom: var(--foursys-vault-space-sm);
    }
    
    /* Main Row */
    .foursys-vault-main {
        gap: var(--foursys-vault-space-sm);
        margin-bottom: var(--foursys-vault-space-sm);
    }
    
    /* Bottom Row */
    .foursys-vault-bottom {
        gap: var(--foursys-vault-space-sm);
    }
    
    /* Allocation kleiner */
    .foursys-vault-allocation__chart canvas {
        max-width: 140px;
        max-height: 140px;
    }
    
    .foursys-vault-allocation__total {
        font-size: 0.9375rem;
    }
    
    /* Update v1.3.8: Holdings gleiches Padding wie Hauptkarten */
    /* Update v1.4.0: Bottom-Padding +5px extra */
    .foursys-vault-holding {
        padding: calc(var(--foursys-vault-space-sm) + 5px);
        padding-bottom: calc(var(--foursys-vault-space-sm) + 10px);
    }
    
    /* Update v1.3.9: Transaktionen-Karten gleiches Padding wie Hauptkarten */
    .foursys-vault-transaction,
    .foursys-vault-tx {
        padding: calc(var(--foursys-vault-space-sm) + 5px);
    }
}

/* Extra kleine Bildschirme */
@media (max-width: 480px) {
    .foursys-vault-dashboard {
        padding: var(--foursys-vault-space-xs);
    }
    
    .foursys-vault-stats {
        grid-template-columns: 1fr;
    }
    
    .foursys-vault-stats__card--primary .foursys-vault-stats__sparkline {
        display: none;
    }
    
    /* Update v1.4.2: Charts 1,5x Höhe auf kleinsten Bildschirmen (225px statt 150px) */
    .foursys-vault-chart-container {
        height: 225px;
    }
}

/* ==========================================================================
   Dashboard-Widgets (Update v0.16.0)
   ========================================================================== */

/* Widget-Rows */
.foursys-vault-widgets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--foursys-vault-space-md);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-vault-inventory-row {
    margin-bottom: var(--foursys-vault-space-md);
}

/* Gemeinsame Widget-Styles */
.foursys-widget {
    padding: 0;
}

.foursys-widget__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-sm);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-widget__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

/* Update v3.0.9: SVG-Icons statt Emojis */
.foursys-widget__icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.foursys-widget__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.foursys-widget__count {
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--foursys-vault-bg-input);
    color: var(--foursys-vault-text-secondary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Storage Widget */
.foursys-storage-widget__list {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-storage-widget__empty-state {
    text-align: center;
    padding: var(--foursys-vault-space-lg);
    color: var(--foursys-vault-text-secondary);
}

.foursys-storage-widget__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-xs);
}

.foursys-storage-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-md);
    transition: background var(--foursys-vault-transition-fast);
}

.foursys-storage-item:hover {
    background: rgba(0, 0, 0, 0.3);
}

.foursys-storage-item__header {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-storage-item__icon {
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.foursys-storage-item__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.foursys-storage-item__name {
    flex: 1;
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
}

.foursys-storage-item__percentage {
    font-size: 0.875rem;
    color: var(--foursys-vault-gold);
    font-weight: 600;
}

.foursys-storage-item__value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-storage-item__bar {
    height: 4px;
    /* Update v3.1.1: Konsistenter grauer Hintergrund */
    background: var(--foursys-vault-border);
    border-radius: 2px;
    margin-bottom: var(--foursys-vault-space-sm);
    overflow: hidden;
}

.foursys-storage-item__bar-fill {
    height: 100%;
    /* Update v3.1.1: Unifarben statt Gradient */
    background: #c09c54;
    border-radius: 2px;
    transition: width var(--foursys-vault-transition-normal);
}

.foursys-storage-item__metals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-xs);
}

/* Update v1.3.3: Storage Widget Mobile Overflow Fix */
@media (max-width: 768px) {
    .foursys-storage-widget__list {
        width: 100%;
        max-width: 100%;
    }
    
    .foursys-storage-item {
        max-width: 100%;
        overflow: hidden;
    }
    
    .foursys-storage-item__name {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Metal Badge */
.foursys-metal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--foursys-vault-text-secondary);
}

.foursys-metal-badge--xau {
    background: rgba(212, 175, 55, 0.15);
    color: #a68644;
}

.foursys-metal-badge--xag {
    background: rgba(192, 192, 192, 0.15);
    color: #555555;
}

.foursys-metal-badge--xpt {
    background: rgba(229, 228, 226, 0.15);
    color: #E5E4E2;
}

.foursys-metal-badge--xpd {
    background: rgba(107, 142, 167, 0.15);
    color: #6B8EA7;
}

/* ==========================================================================
   Wealth Calculator Widget (Update v1.0.0)
   ========================================================================== */

.foursys-wealth-calculator-widget {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-wealth-calculator__table-wrapper {
    overflow-x: auto;
}

.foursys-wealth-calculator-table {
    width: 100%;
}

/* Update v1.1.4: Einheitliche Zeilenhöhe - feste Höhe für alle Zeilen */
.foursys-wealth-calculator-table tbody tr {
    height: 48px !important;
}

.foursys-wealth-calculator-table tbody td {
    height: 48px !important;
    vertical-align: middle;
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md) !important;
    box-sizing: border-box;
}

.foursys-wealth-calculator-table thead th {
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md) !important;
}

/* Update v1.0.2: Spaltenüberschriften rechtsbündig (außer Metall) */
/* Update v1.1.4: Metall-Spalte explizit linksbündig */
.foursys-wealth-calculator-table th:first-child {
    text-align: left !important;
}
.foursys-wealth-calculator-table th:not(:first-child) {
    text-align: right;
}

.foursys-wealth-calculator__weight {
    font-family: var(--foursys-vault-font-mono);
    text-align: right;
}

/* Update v1.0.1: Kompaktere Preisfelder, v1.0.2: Padding 0 */
/* Update v1.1.4: Einheitliche Höhe für Input-Wrapper */
.foursys-wealth-calculator__price-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-sm);
    padding: 0px !important;
    height: auto;
    min-height: 24px;
    transition: border-color var(--foursys-vault-transition-fast);
}

.foursys-wealth-calculator__price-input-wrapper:focus-within {
    border-color: var(--foursys-vault-gold);
}

.foursys-wealth-calculator__price-input {
    width: 100px;
    background: transparent;
    border: none;
    color: #FFFFFF !important;
    font-family: var(--foursys-vault-font-mono);
    font-size: 0.9rem;
    text-align: right;
    padding: 2px !important;
    height: auto !important;
    -moz-appearance: textfield;
}

/* Update v1.0.2: Preis-Zelle rechtsbündig */
.foursys-wealth-calculator-table .foursys-inventory-table__cell--price {
    text-align: right;
}

.foursys-wealth-calculator__price-input::-webkit-outer-spin-button,
.foursys-wealth-calculator__price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.foursys-wealth-calculator__price-input:focus {
    outline: none;
}

.foursys-wealth-calculator__price-currency {
    color: var(--foursys-vault-text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.foursys-wealth-calculator__value {
    font-family: var(--foursys-vault-font-mono);
    font-weight: 600;
    text-align: right;
    color: var(--foursys-vault-gold);
}

.foursys-wealth-calculator__total-row {
    background: rgba(199, 171, 123, 0.1);
}

.foursys-wealth-calculator__total-label {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    text-align: right;
    padding-right: var(--foursys-vault-space-md);
}

.foursys-wealth-calculator__total-value {
    font-family: var(--foursys-vault-font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--foursys-vault-gold);
    text-align: right;
}

/* Update v1.0.2: Kein Abstand und keine Linie, direkt unter Ergebnis */
.foursys-wealth-calculator__hint {
    font-size: 0.8rem;
    color: var(--foursys-vault-text-muted);
    text-align: center;
    font-style: italic;
    margin-top: 0;
}

/* Update v2.4.5: Au/Ag Ratio Header */
/* Update v2.4.6: Ratio-Feld kompakter */
.foursys-wealth-calculator__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-sm);
}

.foursys-wealth-calculator__header .foursys-widget__title {
    margin: 10px, 0;
}

.foursys-wealth-calculator__ratio-wrapper {
    display: flex;
    align-items: center;
    gap: 3px;
}

.foursys-wealth-calculator__ratio-label {
    font-size: 0.7rem;
    color: var(--foursys-vault-text-secondary);
    font-weight: 500;
}

.foursys-wealth-calculator__ratio-input {
    width: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
    background: var(--foursys-vault-bg-input) !important;
    border: 1px solid var(--foursys-vault-border) !important;
    border-radius: var(--foursys-vault-radius-sm) !important;
    color: var(--foursys-vault-gold) !important;
    font-family: var(--foursys-vault-font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 2px 3px !important;
    height: 20px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: border-color var(--foursys-vault-transition-fast);
}

.foursys-wealth-calculator__ratio-input:focus {
    outline: none;
    border-color: var(--foursys-vault-gold);
}

.foursys-wealth-calculator__ratio-input::placeholder {
    color: var(--foursys-vault-text-muted);
    font-weight: 400;
}

/* Update v1.3.3: Wealth Calculator Mobile Overflow Fix */
/* Update v2.4.8: Mobile Styles komplett überarbeitet */
@media (max-width: 768px) {
    .foursys-wealth-calculator-widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ratio-Feld Mobile */
    .foursys-wealth-calculator__header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    
    .foursys-wealth-calculator__ratio-wrapper {
        flex-shrink: 0 !important;
    }
    
    .foursys-wealth-calculator__ratio-input {
        width: 42px !important;
        max-width: 42px !important;
        min-width: 42px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
        padding: 2px 4px !important;
    }
    
    .foursys-wealth-calculator__ratio-label {
        font-size: 0.75rem !important;
    }
    
    .foursys-wealth-calculator__table-wrapper {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .foursys-wealth-calculator-table {
        width: 100% !important;
        min-width: unset !important;
        table-layout: fixed !important;
    }
    
    /* Spaltenbreiten Mobile */
    .foursys-wealth-calculator-table th:nth-child(1),
    .foursys-wealth-calculator-table td:nth-child(1) {
        width: 18% !important;
        padding-left: 4px !important;
        padding-right: 2px !important;
    }
    
    .foursys-wealth-calculator-table th:nth-child(2),
    .foursys-wealth-calculator-table td:nth-child(2) {
        width: 20% !important;
        padding: 4px 8px 4px 2px !important;
    }
    
    .foursys-wealth-calculator-table th:nth-child(3),
    .foursys-wealth-calculator-table td:nth-child(3) {
        width: 30% !important;
        padding: 4px 2px !important;
    }
    
    .foursys-wealth-calculator-table th:nth-child(4),
    .foursys-wealth-calculator-table td:nth-child(4) {
        width: 32% !important;
        padding-right: 4px !important;
        padding-left: 2px !important;
    }
    
    /* Kleinere Font-Sizes Mobile */
    .foursys-wealth-calculator-table thead th {
        font-size: 0.65rem !important;
        padding: 6px 2px !important;
    }
    
    .foursys-wealth-calculator-table tbody td {
        font-size: 0.8rem !important;
        padding: 6px 2px !important;
    }
    
    /* Metall-Spalte kompakter */
    .foursys-wealth-calculator-table .foursys-metal-indicator {
        font-size: 0.75rem !important;
    }
    
    .foursys-wealth-calculator-table .foursys-metal-dot {
        width: 6px !important;
        height: 6px !important;
        margin-right: 3px !important;
    }
    
    /* Preis-Input Mobile - kompakter und rechtsbündig */
    .foursys-wealth-calculator__price-input-wrapper {
        padding: 0 !important;
        min-height: 24px !important;
        max-width: 65px !important;
    }
    
    .foursys-wealth-calculator__price-input {
        width: 38px !important;
        max-width: 38px !important;
        min-width: 38px !important;
        font-size: 0.75rem !important;
        padding: 2px 0 2px 2px !important;
        text-align: right !important;
        height: 22px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
    
    .foursys-wealth-calculator__price-currency {
        font-size: 0.7rem !important;
        padding-right: 2px !important;
        padding-left: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Wert-Spalte Mobile */
    .foursys-wealth-calculator__value {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
    
    /* Total-Row Mobile */
    .foursys-wealth-calculator__total-label {
        font-size: 0.8rem !important;
    }
    
    .foursys-wealth-calculator__total-value {
        font-size: 0.9rem !important;
    }
    
    /* Hint Mobile */
    .foursys-wealth-calculator__hint {
        font-size: 0.7rem !important;
    }
}

/* Inventory Widget */
.foursys-inventory-widget__controls {
    display: flex;
    gap: var(--foursys-vault-space-sm);
    flex-wrap: wrap;
}

.foursys-inventory-widget__filter,
.foursys-inventory-widget__sort {
    padding: 6px 12px;
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-sm);
    color: var(--foursys-vault-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.foursys-inventory-widget__filter:focus,
.foursys-inventory-widget__sort:focus {
    outline: none;
    border-color: var(--foursys-vault-gold);
}

.foursys-inventory-widget__table-wrapper {
    overflow-x: auto;
}

.foursys-inventory-widget__empty {
    text-align: center;
    padding: var(--foursys-vault-space-lg);
    color: var(--foursys-vault-text-secondary);
}

.foursys-inventory-widget__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-xs);
}

/* Inventory Table */
.foursys-inventory-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.foursys-inventory-table th,
.foursys-inventory-table td {
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    text-align: right;
    border: none;
    border-bottom: 1px solid var(--foursys-vault-border);
    /* Update v1.7.2: Feste Höhe entfernt - natürliche Höhe durch Padding + line-height */
    vertical-align: middle;
    line-height: 1.4;
}

.foursys-inventory-table th {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--foursys-vault-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.foursys-inventory-table__row {
    transition: background var(--foursys-vault-transition-fast);
    /* Update v1.7.2: Feste Höhe entfernt - Höhe wird durch Zelleninhalt bestimmt */
}

.foursys-inventory-table__row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.foursys-inventory-table__cell--product {
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
    text-align: left !important;
}

/* Update v1.0.3: Lagerort-Spalte linksbündig */
.foursys-inventory-table__cell--storage {
    text-align: left !important;
}

/* Update v1.0.3: Anzahl-Spalte nur ganze Zahlen */
.foursys-inventory-table__cell--count {
    text-align: right;
}

/* Update v1.0.3: PRODUKT und LAGERORT Header linksbündig */
.foursys-inventory-table th:nth-child(3),
.foursys-inventory-table th:nth-child(5) {
    text-align: left !important;
}

.foursys-inventory-table__product-name {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.foursys-inventory-table__vat-badge {
    display: inline-block;
    font-size: 0.625rem;
    background: rgba(46, 125, 50, 0.3);
    color: #4CAF50;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: var(--foursys-vault-space-xs);
    vertical-align: middle;
}

.foursys-inventory-table__cell--change.positive {
    color: var(--foursys-vault-success);
}

.foursys-inventory-table__cell--change.negative {
    color: var(--foursys-vault-error);
}

/* Metal Indicator */
.foursys-metal-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}

.foursys-metal-indicator--xau { color: var(--foursys-vault-gold); }
.foursys-metal-indicator--xag { color: #C0C0C0; }
.foursys-metal-indicator--xpt { color: #E5E4E2; }
.foursys-metal-indicator--xpd { color: #6B8EA7; }

/* Depot Widget */
.foursys-depot-widget__total {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-depot-widget__list {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-md);
}

.foursys-depot-widget__fees-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--foursys-vault-space-md);
    padding-top: var(--foursys-vault-space-md);
    border-top: 1px solid var(--foursys-vault-border);
    font-size: 0.875rem;
}

.foursys-depot-widget__fees-label {
    color: var(--foursys-vault-text-secondary);
}

.foursys-depot-widget__fees-value {
    color: var(--foursys-vault-warning);
}

/* Depot Card */
.foursys-depot-card {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.1), rgba(46, 125, 50, 0.02));
    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-md);
    transition: border-color var(--foursys-vault-transition-fast);
}

.foursys-depot-card:hover {
    border-color: rgba(46, 125, 50, 0.5);
}

.foursys-depot-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-depot-card__title {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-depot-card__icon {
    font-size: 1.25rem;
}

.foursys-depot-card__name {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

.foursys-depot-card__account {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
    font-family: var(--foursys-vault-font-mono);
}

.foursys-depot-card__provider {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-depot-card__holdings {
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-depot-card__empty {
    text-align: center;
    color: var(--foursys-vault-text-muted);
    padding: var(--foursys-vault-space-sm);
}

.foursys-depot-metal-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto auto;
    gap: var(--foursys-vault-space-sm);
    align-items: center;
    padding: var(--foursys-vault-space-xs) 0;
    border-bottom: 1px solid var(--foursys-vault-border);
}

.foursys-depot-metal-row:last-child {
    border-bottom: none;
}

.foursys-depot-metal-row__metal {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
}

.foursys-depot-metal-row__weight {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    text-align: right;
}

.foursys-depot-metal-row__value {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    text-align: right;
}

.foursys-depot-metal-row__change {
    font-size: 0.875rem;
    text-align: right;
}

.foursys-depot-metal-row__change--positive {
    color: var(--foursys-vault-success);
}

.foursys-depot-metal-row__change--negative {
    color: var(--foursys-vault-error);
}

.foursys-depot-metal-row__vat-badge {
    font-size: 0.625rem;
    background: rgba(46, 125, 50, 0.3);
    color: #4CAF50;
    padding: 2px 5px;
    border-radius: 3px;
}

.foursys-depot-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-sm);
    padding-top: var(--foursys-vault-space-sm);
    border-top: 1px solid rgba(46, 125, 50, 0.2);
}

.foursys-depot-card__total {
    display: flex;
    gap: var(--foursys-vault-space-sm);
}

.foursys-depot-card__total-label {
    color: var(--foursys-vault-text-secondary);
}

.foursys-depot-card__total-value {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

.foursys-depot-card__fees {
    font-size: 0.875rem;
}

.foursys-depot-card__fees-label {
    color: var(--foursys-vault-text-secondary);
}

.foursys-depot-card__fees-value {
    color: var(--foursys-vault-warning);
}

.foursys-depot-card__vat-info {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    margin-top: var(--foursys-vault-space-sm);
    padding-top: var(--foursys-vault-space-sm);
    border-top: 1px solid rgba(46, 125, 50, 0.2);
}

.foursys-depot-card__vat-badge {
    font-size: 0.75rem;
    background: rgba(46, 125, 50, 0.3);
    color: #4CAF50;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.foursys-depot-card__vat-hint {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

/* Responsive: Widget-Rows */
@media (max-width: 768px) {
    .foursys-vault-widgets-row {
        grid-template-columns: 1fr;
    }
    
    .foursys-depot-metal-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--foursys-vault-space-xs);
    }
    
    .foursys-depot-metal-row__metal {
        grid-column: 1 / -1;
    }
    
    .foursys-inventory-widget__controls {
        width: 100%;
    }
    
    .foursys-inventory-widget__filter,
    .foursys-inventory-widget__sort {
        flex: 1;
        min-width: 120px;
    }
    
    .foursys-inventory-table__product-name {
        max-width: 120px;
    }
}

/* ==========================================================================
   App Layout mit Sidebar (Update v0.17.0)
   Update v0.19.0: Fixed Sidebar und Header
   ========================================================================== */

.foursys-vault-app-layout {
    display: flex;
    height: 100vh;
    background: var(--foursys-vault-bg-dark);
    overflow: hidden;
}

/* Sidebar - Update v0.17.4: Scrollbare Navigation mit fixem Lock-Button */
.foursys-vault-sidebar {
    width: 240px;
    min-width: 240px;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border-right: 1px solid var(--foursys-vault-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
}

.foursys-vault-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-lg);
    border-bottom: 1px solid var(--foursys-vault-border);
}

/* Update v2.5.10: Klickbarer Brand-Bereich für Navigation zum Vault Manager */
.foursys-vault-sidebar__brand--clickable {
    text-decoration: none;
    cursor: pointer;
    transition: all var(--foursys-vault-transition-normal);
    position: relative;
}

.foursys-vault-sidebar__brand--clickable:hover {
    background: rgba(255, 255, 255, 0.03);
}

.foursys-vault-sidebar__brand--clickable:hover .foursys-vault-sidebar__title {
    color: var(--foursys-vault-gold);
}

/* Zurück-Pfeil-Icon (standardmäßig versteckt) */
.foursys-vault-sidebar__back-icon {
    opacity: 0;
    transform: translateX(5px);
    transition: all var(--foursys-vault-transition-normal);
    margin-left: auto;
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-sidebar__brand--clickable:hover .foursys-vault-sidebar__back-icon {
    opacity: 1;
    transform: translateX(0);
    color: var(--foursys-vault-gold);
}

.foursys-vault-sidebar__brand svg {
    color: var(--foursys-vault-gold);
}

.foursys-vault-sidebar__title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
}

/* Navigation - Update v0.17.4: Scrollable mit overflow */
.foursys-vault-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--foursys-vault-space-md) 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.foursys-vault-nav__item {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-lg);
    background: none;
    border: none;
    color: var(--foursys-vault-text-secondary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--foursys-vault-transition-fast);
    text-align: left;
    width: 100%;
}

.foursys-vault-nav__item:hover {
    color: var(--foursys-vault-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.foursys-vault-nav__item--active {
    color: var(--foursys-vault-gold);
    background: rgba(212, 175, 55, 0.1);
    border-right: 3px solid var(--foursys-vault-gold);
}

.foursys-vault-nav__item--active svg {
    stroke: var(--foursys-vault-gold);
}

/* Fokus-Styles für Navigation-Items */
.foursys-vault-nav__item:focus {
    outline: none;
}

.foursys-vault-nav__item:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.5);
    outline-offset: -2px;
}

.foursys-vault-nav__item--active:focus,
.foursys-vault-nav__item--active:focus-visible,
.foursys-vault-nav__item--active:active {
    color: var(--foursys-vault-gold);
    background: rgba(212, 175, 55, 0.1);
    border-right: 3px solid var(--foursys-vault-gold);
    outline: none;
}

/* Update v0.17.4: Lock-Button bleibt immer sichtbar */
.foursys-vault-nav__item--lock {
    margin-top: 0;
    border-top: 1px solid var(--foursys-vault-border);
    padding-top: var(--foursys-vault-space-md);
    padding-bottom: var(--foursys-vault-space-md);
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    flex-shrink: 0;
}

.foursys-vault-nav__item--lock:hover {
    color: var(--foursys-vault-error);
}

.foursys-vault-nav__spacer {
    flex: 1;
}

/* Main Content Area */
.foursys-vault-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 240px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Header */
.foursys-vault-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--foursys-vault-space-md) var(--foursys-vault-space-lg);
    background: var(--foursys-vault-bg-card);
    border-bottom: 1px solid var(--foursys-vault-border);
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}

.foursys-vault-header__left {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-header__menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--foursys-vault-text-primary);
    cursor: pointer;
    padding: var(--foursys-vault-space-xs);
}

.foursys-vault-header__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin: 0;
}

.foursys-vault-header__actions {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    flex-wrap: wrap;
}

/* Page Container */
.foursys-vault-page-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--foursys-vault-space-lg);
}

/* Pages */
.foursys-vault-page {
    display: none;
}

.foursys-vault-page--active {
    display: block;
}

.foursys-vault-page__actions {
    margin-bottom: var(--foursys-vault-space-md);
}

/* Grids */
.foursys-vault-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--foursys-vault-space-md);
    margin-bottom: var(--foursys-vault-space-md);
    /* Update v1.3.3: Verhindert Overflow auf Mobile */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Update v1.3.1: Portfolio-Verteilung (1/3) + Letzte Aktivitäten (2/3) */
.foursys-vault-grid-2:has(.foursys-vault-panel--allocation) {
    grid-template-columns: 1fr 2fr;
}

@media (max-width: 768px) {
    .foursys-vault-grid-2:has(.foursys-vault-panel--allocation) {
        grid-template-columns: 1fr;
    }
}

/* Update v1.3.5: Portrait Smartphone - Mein Portfolio Widget anzeigen, Stats ausblenden */
@media (max-width: 768px) and (orientation: portrait) {
    /* Stats-Karten ausblenden */
    #em-vault-page-dashboard .foursys-vault-stats {
        display: none !important;
    }
    
    /* Mein Portfolio Widget anzeigen */
    #em-vault-page-dashboard .foursys-vault-panel--my-portfolio {
        display: block !important;
    }
    
    /* Portfolio-Verteilung und Letzte Aktivitäten Grid auf 1 Spalte */
    #em-vault-page-dashboard .foursys-vault-grid-2:has(.foursys-vault-panel--allocation) {
        grid-template-columns: 1fr;
    }
    
    /* Original Portfolio-Verteilung ausblenden (durch Mein Portfolio ersetzt) */
    #em-vault-page-dashboard .foursys-vault-panel--allocation {
        display: none !important;
    }
    
    /* Update v2.2.4: Bestände und Live-Kurse vertauschen in Portrait-Ansicht */
    /* Live-Kurse werden direkt nach Metall-Kursentwicklung angezeigt */
    #em-vault-page-dashboard .foursys-vault-grid-2:has(.foursys-vault-panel--holdings):has(.foursys-vault-panel--rates) {
        display: flex;
        flex-direction: column;
    }
    
    #em-vault-page-dashboard .foursys-vault-panel--rates {
        order: 1;
    }
    
    #em-vault-page-dashboard .foursys-vault-panel--holdings {
        order: 2;
    }
}

/* ==========================================================================
   Mein Portfolio Widget (Update v1.3.5) - Nur Portrait Mobile
   ========================================================================== */

.foursys-vault-panel--my-portfolio {
    display: none; /* Standardmäßig ausgeblendet */
    background: var(--foursys-vault-bg-card);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-lg);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-my-portfolio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--foursys-vault-space-lg);
}

/* Donut Chart Container */
.foursys-my-portfolio__chart {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.foursys-my-portfolio__chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.foursys-my-portfolio__chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

/* Update v1.3.7: Kleinere Schrift für Millionenbeträge */
.foursys-my-portfolio__total-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
}

/* Stats Bereich */
.foursys-my-portfolio__stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-my-portfolio__stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.foursys-my-portfolio__stat-label {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-my-portfolio__stat-value-group {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-my-portfolio__stat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--foursys-vault-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(244, 67, 54, 0.15);
    color: var(--foursys-vault-error);
}

.foursys-my-portfolio__stat-badge.positive {
    background: rgba(76, 175, 80, 0.15);
    color: var(--foursys-vault-success);
}

.foursys-my-portfolio__stat-main {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
    line-height: 1.1;
}

.foursys-my-portfolio__stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--foursys-vault-space-md);
    margin-top: var(--foursys-vault-space-sm);
    padding-top: var(--foursys-vault-space-md);
    border-top: 1px solid var(--foursys-vault-border);
}

.foursys-my-portfolio__stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.foursys-my-portfolio__stat-item .foursys-my-portfolio__stat-label {
    font-size: 0.75rem;
}

.foursys-my-portfolio__stat-item .foursys-my-portfolio__stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
}

.foursys-my-portfolio__stat-item .foursys-my-portfolio__stat-value.negative {
    color: var(--foursys-vault-error);
}

.foursys-my-portfolio__stat-item .foursys-my-portfolio__stat-value.positive {
    color: var(--foursys-vault-success);
}

/* Update v1.3.3: Storage/Wealth-Calculator Row - kein Overflow */
.foursys-vault-grid-2:has(.foursys-vault-panel--storage),
.foursys-vault-grid-2:has(.foursys-vault-panel--wealth-calculator) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .foursys-vault-grid-2:has(.foursys-vault-panel--storage) {
        grid-template-columns: 1fr;
    }
    
    .foursys-vault-grid-2 > .foursys-vault-panel {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Update v1.0.0: Single-Column Grid für Depot-Widget */
.foursys-vault-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--foursys-vault-space-md);
    margin-bottom: var(--foursys-vault-space-md);
}

/* Tabs */
.foursys-vault-tabs {
    display: flex;
    gap: var(--foursys-vault-space-xs);
    margin-bottom: var(--foursys-vault-space-md);
    padding-bottom: var(--foursys-vault-space-sm);
    border-bottom: 1px solid var(--foursys-vault-border);
    overflow-x: auto;
}

.foursys-vault-tabs__tab {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: none;
    border: none;
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-vault-tabs__tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-tabs__tab--active {
    background: var(--foursys-vault-gold);
    color: #000;
}

.foursys-vault-tabs__icon {
    font-size: 1rem;
}

/* Sidebar Overlay (Mobile) */
.foursys-vault-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.foursys-vault-sidebar-overlay--active {
    display: block;
}

/* ==========================================================================
   Products Page (Update v0.17.0)
   ========================================================================== */

.foursys-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--foursys-vault-space-md);
}

.foursys-product-card {
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-md);
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-product-card:hover {
    border-color: var(--foursys-vault-gold);
    transform: translateY(-2px);
}

.foursys-product-card__header {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-product-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.foursys-product-card__metal {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.foursys-product-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-product-card__details {
    display: flex;
    gap: var(--foursys-vault-space-sm);
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-product-card__amount {
    font-weight: 500;
}

.foursys-product-card__grams {
    color: var(--foursys-vault-text-muted);
}

.foursys-product-card__actions {
    display: flex;
    gap: var(--foursys-vault-space-xs);
    justify-content: flex-end;
    padding-top: var(--foursys-vault-space-sm);
    border-top: 1px solid var(--foursys-vault-border);
}

.foursys-product-card__btn {
    background: none;
    border: none;
    padding: var(--foursys-vault-space-xs);
    color: var(--foursys-vault-text-secondary);
    cursor: pointer;
    border-radius: var(--foursys-vault-radius-sm);
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-product-card__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--foursys-vault-text-primary);
}

.foursys-product-card__btn--delete:hover {
    color: var(--foursys-vault-error);
}

.foursys-products-empty {
    text-align: center;
    padding: var(--foursys-vault-space-2xl);
    color: var(--foursys-vault-text-secondary);
}

.foursys-products-empty svg {
    margin-bottom: var(--foursys-vault-space-md);
    opacity: 0.5;
}

.foursys-products-empty__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-sm);
}

/* Product Form */
.foursys-product-form__field {
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-product-form__field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-product-form__field input[type="text"],
.foursys-product-form__field input[type="number"] {
    width: 100%;
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-text-primary);
    font-size: 1rem;
}

.foursys-product-form__field input:focus {
    outline: none;
    border-color: var(--foursys-vault-gold);
}

.foursys-product-form__hint {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-xs);
}

.foursys-product-form__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-sm);
}

.foursys-product-form__radio {
    display: block;
    cursor: pointer;
}

.foursys-product-form__radio input {
    display: none;
}

.foursys-product-form__radio-label {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-product-form__radio input:checked + .foursys-product-form__radio-label {
    border-color: var(--foursys-vault-gold);
    background: rgba(212, 175, 55, 0.1);
    color: var(--foursys-vault-gold);
}

.foursys-product-form__radio-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

/* Textarea Styles für Notizen */
.foursys-product-form__field textarea {
    width: 100%;
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-text-primary);
    font-size: 1rem;
    font-family: var(--foursys-vault-font-sans);
    resize: vertical;
    min-height: 80px;
}

.foursys-product-form__field textarea:focus {
    outline: none;
    border-color: var(--foursys-vault-gold);
}

/* ==========================================================================
   Storage Locations (Update v0.18.2)
   ========================================================================== */

.foursys-storage-locations {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-lg);
}

.foursys-storage-locations__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-md);
}

.foursys-storage-locations__filters {
    display: flex;
    gap: var(--foursys-vault-space-xs);
    flex-wrap: wrap;
}

.foursys-filter-btn {
    padding: var(--foursys-vault-space-xs) var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-filter-btn:hover {
    background: var(--foursys-vault-bg-hover);
    border-color: var(--foursys-vault-gold);
}

.foursys-filter-btn--active {
    background: rgba(199, 171, 123, 0.15);
    border-color: var(--foursys-vault-gold);
    color: var(--foursys-vault-gold);
}

.foursys-storage-locations__count {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-storage-locations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--foursys-vault-space-md);
}

/* Location Card */
.foursys-location-card {
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-md);
    transition: all var(--foursys-vault-transition-fast);
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-md);
}

.foursys-location-card:hover {
    border-color: var(--foursys-vault-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.foursys-location-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.foursys-location-card__icon {
    /* Update v3.1.1: Icons 1.6x vergrößert */
    font-size: 3.2rem;
    line-height: 1;
}

.foursys-location-card__type {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.foursys-location-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-location-card__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin: 0;
}

.foursys-location-card__info {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-location-card__label {
    color: var(--foursys-vault-text-muted);
    font-weight: 500;
}

.foursys-location-card__notes {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-secondary);
    padding: var(--foursys-vault-space-xs);
    background: var(--foursys-vault-bg-input);
    border-radius: var(--foursys-vault-radius-sm);
    border-left: 2px solid var(--foursys-vault-gold);
    margin-top: var(--foursys-vault-space-xs);
}

.foursys-location-card__badge {
    margin-top: var(--foursys-vault-space-xs);
}

/* Update v0.19.1: Metall-Holdings in Lagerort-Karten */
/* Update v0.19.2: Ohne border-top, jetzt im Footer */
.foursys-location-card__holdings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-xs);
    flex: 1;
}

/* Update v0.19.2: Footer mit Holdings und Actions */
.foursys-location-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    padding-top: var(--foursys-vault-space-sm);
    border-top: 1px solid var(--foursys-vault-border);
}

/* Update v0.19.2: Anbieter unter dem Namen */
.foursys-location-card__provider {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    margin-top: calc(-1 * var(--foursys-vault-space-xs));
}

/* Update v0.19.2: Wert, Anteilsbalken und Prozent in Lagerort-Karten */
.foursys-location-card__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-location-card__title-row .foursys-location-card__name {
    flex: 1;
}

.foursys-location-card__percentage {
    font-size: 0.875rem;
    color: var(--foursys-vault-gold);
    font-weight: 600;
    white-space: nowrap;
}

.foursys-location-card__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foursys-vault-text-primary);
    margin-top: var(--foursys-vault-space-xs);
}

.foursys-location-card__bar {
    height: 4px;
    /* Update v3.1.1: Sichtbarer grauer Hintergrund für nicht ausgefüllten Teil */
    background: var(--foursys-vault-border);
    border-radius: 2px;
    margin-top: var(--foursys-vault-space-sm);
    overflow: hidden;
}

.foursys-location-card__bar-fill {
    height: 100%;
    /* Update v3.1.1: Unifarben statt Gradient */
    background: #c09c54;
    border-radius: 2px;
    transition: width var(--foursys-vault-transition-normal);
}

.foursys-badge {
    display: inline-block;
    padding: 2px var(--foursys-vault-space-sm);
    border-radius: var(--foursys-vault-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.foursys-badge--success {
    background: rgba(76, 175, 80, 0.2);
    color: var(--foursys-vault-success);
}

/* Update v0.19.2: Inline Badge für MwSt.-befreit neben dem Namen */
.foursys-badge--inline {
    margin-left: var(--foursys-vault-space-sm);
    vertical-align: middle;
    font-size: 0.65rem;
}

/* Update v0.19.2: Actions jetzt im Footer ohne eigene border */
.foursys-location-card__actions {
    display: flex;
    gap: var(--foursys-vault-space-xs);
    justify-content: flex-end;
}

.foursys-location-card__btn {
    padding: var(--foursys-vault-space-xs);
    background: transparent;
    border: none;
    color: var(--foursys-vault-text-secondary);
    cursor: pointer;
    border-radius: var(--foursys-vault-radius-sm);
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-location-card__btn:hover {
    background: var(--foursys-vault-bg-hover);
    color: var(--foursys-vault-gold);
}

.foursys-location-card__btn--delete:hover {
    color: var(--foursys-vault-error);
}

/* Empty State */
.foursys-storage-locations-empty {
    text-align: center;
    padding: var(--foursys-vault-space-2xl) var(--foursys-vault-space-md);
    color: var(--foursys-vault-text-secondary);
}

.foursys-storage-locations-empty svg {
    color: var(--foursys-vault-text-muted);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-storage-locations-empty p {
    margin: var(--foursys-vault-space-sm) 0;
}

.foursys-storage-locations-empty__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-sm);
}

/* ==========================================================================
   Activities Page (Update v0.17.4 - Gruppierung + Transaction-Widget-Style)
   ========================================================================== */

.foursys-activities-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-xl);
}

/* Jahr-Gruppe */
.foursys-year-group {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-lg);
}

.foursys-year-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--foursys-vault-space-md);
    border-bottom: 2px solid var(--foursys-vault-border);
}

.foursys-year-group__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foursys-vault-text-primary);
    margin: 0;
}

.foursys-year-group__summary {
    display: flex;
    gap: var(--foursys-vault-space-lg);
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-year-group__stat {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
}

.foursys-year-group__stat-label {
    color: var(--foursys-vault-text-muted);
}

.foursys-year-group__stat-value {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

.foursys-year-group__months {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-lg);
}

/* Monats-Gruppe */
.foursys-month-group {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-month-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--foursys-vault-space-sm) 0;
}

.foursys-month-group__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin: 0;
}

.foursys-month-group__summary {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-muted);
}

/* Transaktions-Liste innerhalb Monats-Gruppe - verwendet Dashboard-Transaction-Style */
/* Update v0.17.6: Ohne gap-background, da jede Zeile eigene Border hat */
.foursys-month-group__transactions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Activities verwenden die gleichen Klassen wie Dashboard-Transactions */
/* Keine eigenen Activity-Item-Klassen mehr nötig! */

.foursys-activities-empty {
    text-align: center;
    padding: var(--foursys-vault-space-2xl);
    color: var(--foursys-vault-text-secondary);
}

.foursys-activities-empty svg {
    margin-bottom: var(--foursys-vault-space-md);
    opacity: 0.5;
}

.foursys-activities-empty__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-sm);
}

/* ==========================================================================
   Activities Page Layout mit fixiertem Bestands-Panel (Update v0.20.0)
   ========================================================================== */

.foursys-vault-activities-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--foursys-vault-space-lg);
    align-items: start;
}

.foursys-vault-activities-main {
    min-width: 0;
}

/* Sidebar startet auf gleicher Höhe wie das Aktivitäten-Panel */
.foursys-vault-activities-sidebar {
    position: sticky;
    top: 0;
    height: fit-content;
    max-height: calc(100vh - var(--foursys-vault-space-2xl));
    align-self: start;
}

/* Panel in der Sidebar: Sticky-Verhalten für Scroll */
.foursys-vault-page--activities .foursys-vault-panel--sticky {
    position: relative;
    top: 0;
}

/* Bestände im Activities-Panel - einspaltig */
.foursys-vault-activities-holdings {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-activities-holding {
    background: var(--foursys-vault-bg-dark);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    padding: var(--foursys-vault-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-xs);
    transition: border-color var(--foursys-vault-transition-fast);
}

.foursys-vault-activities-holding:hover {
    border-color: var(--foursys-vault-border-hover);
}

.foursys-vault-activities-holding__header {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
}

.foursys-vault-activities-holding__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.foursys-vault-activities-holding__icon--xau {
    background: linear-gradient(135deg, #c9ad7c 0%, #8e7b52 100%);
}

.foursys-vault-activities-holding__icon--xag {
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%);
}

.foursys-vault-activities-holding__icon--xpt {
    background: linear-gradient(135deg, #E5E4E2 0%, #A9A9A9 100%);
}

.foursys-vault-activities-holding__icon--xpd {
    background: linear-gradient(135deg, #CED0DD 0%, #8B8D94 100%);
}

.foursys-vault-activities-holding__name {
    font-weight: 600;
    font-size: 0.9375rem;
}

.foursys-vault-activities-holding__name--xau { color: var(--foursys-vault-gold); }
.foursys-vault-activities-holding__name--xag { color: #C0C0C0; }
.foursys-vault-activities-holding__name--xpt { color: #E5E4E2; }
.foursys-vault-activities-holding__name--xpd { color: #CED0DD; }

.foursys-vault-activities-holding__weight {
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-vault-activities-holding__value {
    font-size: 1.375rem;
    font-weight: 700;
    font-family: var(--foursys-vault-font-mono);
    color: var(--foursys-vault-text-primary);
    letter-spacing: -0.02em;
}

.foursys-vault-activities-holding__change {
    font-size: 0.8125rem;
    font-weight: 600;
}

.foursys-vault-activities-holding__change--positive { color: var(--foursys-vault-success); }
.foursys-vault-activities-holding__change--negative { color: var(--foursys-vault-error); }

.foursys-vault-activities-holding__bar {
    height: 3px;
    background: var(--foursys-vault-border);
    border-radius: 2px;
    margin-top: var(--foursys-vault-space-xs);
    overflow: hidden;
}

.foursys-vault-activities-holding__bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.foursys-vault-activities-holding__bar-fill--xau { background: var(--foursys-vault-gold); }
.foursys-vault-activities-holding__bar-fill--xag { background: #C0C0C0; }
.foursys-vault-activities-holding__bar-fill--xpt { background: #E5E4E2; }
.foursys-vault-activities-holding__bar-fill--xpd { background: #CED0DD; }

/* Leere Holdings ausblenden */
.foursys-vault-activities-holding--empty {
    display: none;
}

/* Responsive: Unter 900px wird Sidebar unter die Liste verschoben */
@media (max-width: 900px) {
    .foursys-vault-activities-layout {
        grid-template-columns: 1fr;
    }
    
    .foursys-vault-activities-sidebar {
        position: relative;
        top: 0;
        order: -1; /* Sidebar oben anzeigen auf Mobile */
        max-height: none;
    }
    
    .foursys-vault-activities-holdings {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--foursys-vault-space-sm);
    }
}

@media (max-width: 500px) {
    .foursys-vault-activities-holdings {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Storage Page (Update v0.17.0)
   ========================================================================== */

.foursys-storage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--foursys-vault-space-md);
}

.foursys-storage-card {
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    padding: var(--foursys-vault-space-md);
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-storage-card:hover {
    border-color: var(--foursys-vault-gold);
}

.foursys-storage-card__header {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-storage-card__icon {
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.foursys-storage-card__icon svg {
    width: 2rem;
    height: 2rem;
}

.foursys-storage-card__info {
    flex: 1;
}

.foursys-storage-card__name {
    display: block;
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

.foursys-storage-card__type {
    display: block;
    font-size: 0.75rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-storage-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foursys-vault-gold);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-storage-card__holdings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--foursys-vault-space-xs);
}

.foursys-storage-card__metal {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.foursys-storage-card__metal .foursys-vault-holding__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.foursys-storage-card__empty {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
}

.foursys-storage-empty {
    text-align: center;
    padding: var(--foursys-vault-space-2xl);
    color: var(--foursys-vault-text-secondary);
}

.foursys-storage-empty svg {
    margin-bottom: var(--foursys-vault-space-md);
    opacity: 0.5;
}

.foursys-storage-empty__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-sm);
}

/* ==========================================================================
   Responsive: Sidebar Navigation (Update v0.17.0)
   ========================================================================== */

@media (max-width: 1024px) {
    .foursys-vault-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .foursys-vault-sidebar {
        position: fixed;
        top: 0;
        left: -240px;
        height: 100vh;
        transition: left var(--foursys-vault-transition-normal);
        z-index: 1000;
    }
    
    .foursys-vault-sidebar--open {
        left: 0;
    }
    
    .foursys-vault-main-content {
        margin-left: 0;
    }
    
    /* Header ohne seitliche Abstände auf Mobile */
    .foursys-vault-header {
        padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-sm);
    }
    
    .foursys-vault-header__menu-toggle {
        display: block;
    }
    
    .foursys-vault-header__title {
        font-size: 1rem;
    }
    
    .foursys-vault-header__actions {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    /* Seitencontainer randlos auf Mobile */
    .foursys-vault-page-container {
        padding: var(--foursys-vault-space-sm);
    }
    
    .foursys-vault-tabs {
        padding-bottom: var(--foursys-vault-space-xs);
    }
    
    .foursys-vault-tabs__tab {
        padding: var(--foursys-vault-space-xs) var(--foursys-vault-space-sm);
        font-size: 0.8125rem;
    }
    
    .foursys-products-grid {
        grid-template-columns: 1fr;
    }
    
    .foursys-activity-item {
        flex-wrap: wrap;
    }
    
    .foursys-activity-item__price {
        width: 100%;
        text-align: left;
        margin-top: var(--foursys-vault-space-xs);
        padding-top: var(--foursys-vault-space-xs);
        border-top: 1px solid var(--foursys-vault-border);
    }
}

/* ==========================================================================
   Inventar-Seite Styles (Update v0.17.2)
   ========================================================================== */

.foursys-inventory-empty {
    text-align: center;
    padding: var(--foursys-vault-space-2xl);
    color: var(--foursys-vault-text-secondary);
}

.foursys-inventory-empty svg {
    margin-bottom: var(--foursys-vault-space-md);
    opacity: 0.5;
}

.foursys-inventory-empty__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
    margin-top: var(--foursys-vault-space-sm);
}

.foursys-inventory-table-wrapper {
    overflow-x: auto;
}

/* ==========================================================================
   Update v0.18.1: Inventar-Gruppierung & Metall-Dots
   ========================================================================== */

/* Metall-Dots (für Tabs und Inventar) */
.foursys-metal-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.foursys-metal-dot--xau {
    background: linear-gradient(135deg, #c9ad7c 0%, #8e7b52 100%);
    box-shadow: 0 0 8px rgba(201, 173, 124, 0.4);
}

.foursys-metal-dot--xag {
    background: linear-gradient(135deg, #E0E0E0 0%, #A8A8A8 100%);
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.4);
}

.foursys-metal-dot--xpt {
    background: linear-gradient(135deg, #EFEFEF 0%, #C8C8C8 100%);
    box-shadow: 0 0 8px rgba(229, 228, 226, 0.4);
}

.foursys-metal-dot--xpd {
    background: linear-gradient(135deg, #8BA3B5 0%, #546F83 100%);
    box-shadow: 0 0 8px rgba(107, 142, 167, 0.4);
}

/* Update v3.1.0: Inline SVG-Icons für Metalle und Lagerorte */
.foursys-metal-svg {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    flex-shrink: 0;
}

.foursys-metal-badge .foursys-metal-svg {
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.foursys-storage-item__icon svg,
.foursys-depot-card__icon svg,
.foursys-location-card__icon svg {
    display: inline-block;
    vertical-align: middle;
}

/* Update v3.1.1: Lagerorte-Icons 1.6x vergrößert (20px → 32px) */
.foursys-location-card__icon svg {
    width: 32px;
    height: 32px;
}

.foursys-product-form__radio-icon svg {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

/* Inventar-Tabelle: Metall-Spalte mit Dot + Label */
/* Update v1.7.2: Komplett überarbeitet für einheitliche Zeilenhöhe */
/* Der Flex-Container ist jetzt im inneren DIV, nicht auf der TD */
.foursys-inventory-table__cell--metal {
    text-align: left !important;
}

/* Update v1.7.2: Innerer Container für Metall-Zelle mit Flex */
.foursys-inventory-table__metal-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Update v1.5.22: METALL Header linksbündig */
.foursys-inventory-table th:first-child {
    text-align: left !important;
}

.foursys-metal-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
}

/* Anzahl-Badge */
/* Update v1.5.23: Besserer Kontrast für alle Themes */
.foursys-inventory-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: rgba(160, 130, 70, 0.25);
    border: 1px solid rgba(160, 130, 70, 0.5);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #7A6B4E;
    font-family: var(--foursys-vault-font-mono);
}

/* Update v1.5.23: Theme-spezifische Anzahl-Badge Farben für Dark Theme */
.foursys-vault[data-theme="dark"] .foursys-inventory-count-badge {
    background: rgba(201, 173, 124, 0.2);
    border-color: rgba(201, 173, 124, 0.4);
    color: #C9AD7C;
}

/* Gruppierte Zeilen */
.foursys-inventory-table--grouped .foursys-inventory-table__row--group {
    background: rgba(255, 255, 255, 0.01);
}

.foursys-inventory-table--grouped .foursys-inventory-table__row--group:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Responsive Anpassungen für Inventar-Tabelle */
@media (max-width: 768px) {
    .foursys-inventory-table th,
    .foursys-inventory-table td {
        padding: var(--foursys-vault-space-xs) var(--foursys-vault-space-sm);
        font-size: 0.8125rem;
    }
    
    .foursys-inventory-table th {
        font-size: 0.6875rem;
    }
    
    .foursys-metal-label {
        font-size: 0.8125rem;
    }
    
    .foursys-inventory-count-badge {
        min-width: 28px;
        height: 24px;
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   Enhanced Transaction Form (v0.19.0)
   Desktop-optimiert mit Produkt- und Lagerortauswahl
   ========================================================================== */

/* Feld-Breiten für Desktop-Layout */
.foursys-form__field--full {
    grid-column: span 12;
}

.foursys-form__field--half {
    grid-column: span 6;
}

.foursys-form__field--third {
    grid-column: span 4;
}

/* Formular-Layout auf größeren Bildschirmen - Update v0.20.0: Kompaktere Abstände */
@media (min-width: 768px) {
    .foursys-form__fields,
    .foursys-form__group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
        margin-bottom: var(--foursys-vault-space-xs);
    }
    
    .foursys-form__fields > .foursys-form__field,
    .foursys-form__group > .foursys-form__field {
        margin-bottom: 0;
    }
    
    /* XL Modal für bessere Desktop-Nutzung */
    .foursys-modal--xl .foursys-modal__container {
        max-width: 900px;
        width: 95%;
    }
}

/* Mobile: Alle Felder full-width */
@media (max-width: 767px) {
    .foursys-form__field--full,
    .foursys-form__field--half,
    .foursys-form__field--third {
        grid-column: span 12;
    }
}

/* Produkt-Auswahl */
.foursys-form__product-select {
    position: relative;
}

.foursys-form__product-btn,
.foursys-form__storage-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--foursys-vault-space-md);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--foursys-vault-transition-normal);
}

.foursys-form__product-btn:hover,
.foursys-form__storage-btn:hover {
    border-color: var(--foursys-vault-border-focus);
    background: var(--foursys-vault-bg-hover);
}

.foursys-form__product-btn-text,
.foursys-form__storage-btn-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.foursys-form__product-btn svg,
.foursys-form__storage-btn svg {
    flex-shrink: 0;
    margin-left: var(--foursys-vault-space-sm);
    opacity: 0.5;
    transition: transform var(--foursys-vault-transition-fast);
}

.foursys-form__product-btn:hover svg,
.foursys-form__storage-btn:hover svg {
    opacity: 1;
}

/* Dropdown */
.foursys-form__product-dropdown,
.foursys-form__storage-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 350px;
    overflow-y: auto;
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.foursys-form__product-list,
.foursys-form__storage-list {
    padding: var(--foursys-vault-space-xs);
}

.foursys-form__product-item,
.foursys-form__storage-item {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-md);
    border-radius: var(--foursys-vault-radius-sm);
    cursor: pointer;
    transition: background var(--foursys-vault-transition-fast);
}

.foursys-form__product-item:hover,
.foursys-form__storage-item:hover {
    background: var(--foursys-vault-bg-hover);
}

.foursys-form__product-item-header {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-form__product-item-name {
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
}

.foursys-form__product-item-details {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    font-family: var(--foursys-vault-font-mono);
}

.foursys-form__storage-item {
    gap: var(--foursys-vault-space-md);
}

.foursys-form__storage-item-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.foursys-form__storage-item-content {
    flex: 1;
}

.foursys-form__storage-item-name {
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-form__storage-item-provider {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

/* Empty States */
.foursys-form__product-empty,
.foursys-form__storage-empty {
    padding: var(--foursys-vault-space-xl);
    text-align: center;
    color: var(--foursys-vault-text-secondary);
}

.foursys-form__product-empty p,
.foursys-form__storage-empty p {
    margin: 0 0 var(--foursys-vault-space-sm) 0;
}

.foursys-form__product-empty-hint,
.foursys-form__storage-empty-hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-muted);
}

/* Autocomplete */
.foursys-form__autocomplete {
    position: relative;
}

.foursys-form__autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: var(--foursys-vault-bg-card);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.foursys-form__autocomplete-item {
    padding: var(--foursys-vault-space-md);
    cursor: pointer;
    transition: background var(--foursys-vault-transition-fast);
}

.foursys-form__autocomplete-item:hover,
.foursys-form__autocomplete-item--active {
    background: var(--foursys-vault-bg-hover);
}

/* Verbesserte Gruppen-Darstellung - Update v0.20.0: Kompaktere Abstände */
.foursys-form__group {
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-form__group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foursys-vault-gold-light);
    margin-bottom: var(--foursys-vault-space-xs);
    padding: 0;
}

/* Verbesserte Input-Styles für bessere Desktop-UX */
.foursys-form__input,
.foursys-form__select,
.foursys-form__textarea {
    font-size: 0.9375rem;
    padding: 13px 16px;
    min-height: 48px;
    color: var(--foursys-vault-text-primary);
    background-color: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    line-height: 1.4;
    box-sizing: border-box;
}

.foursys-form__select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7ab7b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    padding-top: 13px;
    padding-bottom: 13px;
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Select Options Styling */
.foursys-form__select option {
    background-color: var(--foursys-vault-bg-card);
    color: var(--foursys-vault-text-primary);
    padding: 12px 16px;
    font-size: 0.9375rem;
}

.foursys-form__select option:hover,
.foursys-form__select option:focus {
    background-color: var(--foursys-vault-bg-hover);
}

.foursys-form__select option:checked {
    background: linear-gradient(135deg, rgba(199, 171, 123, 0.2) 0%, rgba(142, 123, 82, 0.2) 100%);
    color: var(--foursys-vault-gold-light);
    font-weight: 500;
}

/* Firefox spezifisch */
@-moz-document url-prefix() {
    .foursys-form__select {
        color: var(--foursys-vault-text-primary);
    }
    
    .foursys-form__select option {
        background-color: #1A1A1A;
        color: #FFFFFF;
    }
    
    .foursys-form__select option:checked {
        background-color: #2A2A2A;
        color: #c7ab7b;
    }
}

/* Webkit Select Dropdown Scrollbar */
.foursys-form__select::-webkit-scrollbar {
    width: 8px;
}

.foursys-form__select::-webkit-scrollbar-track {
    background: var(--foursys-vault-bg-dark);
}

.foursys-form__select::-webkit-scrollbar-thumb {
    background: var(--foursys-vault-scrollbar-thumb);
    border-radius: 4px;
}

.foursys-form__select::-webkit-scrollbar-thumb:hover {
    background: var(--foursys-vault-scrollbar-thumb-hover);
}

.foursys-form__input:focus,
.foursys-form__select:focus,
.foursys-form__textarea:focus {
    border-color: var(--foursys-vault-border-focus);
    box-shadow: 0 0 0 3px rgba(199, 171, 123, 0.1);
    outline: none;
}

/* Größere Touch-Targets auf Mobile */
@media (max-width: 767px) {
    .foursys-form__input,
    .foursys-form__select,
    .foursys-form__textarea,
    .foursys-form__product-btn,
    .foursys-form__storage-btn {
        padding: var(--foursys-vault-space-md) var(--foursys-vault-space-md);
        font-size: 16px; /* Verhindert Auto-Zoom auf iOS */
    }
    
    .foursys-form__group {
        padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
        margin-bottom: var(--foursys-vault-space-sm);
    }
}

/* Desktop: Kompakteres Spacing - Update v0.20.0 */
@media (min-width: 1024px) {
    .foursys-form__group {
        padding: var(--foursys-vault-space-md);
    }
    
    .foursys-modal__body {
        padding: var(--foursys-vault-space-lg);
    }
}


/* ==========================================================================
   Upgrade Overlay - Premium Feature Sperrung
   Update v1.8.4
   Update v1.8.5: Neue Struktur ohne Wrapper, direktes Overlay auf Element
   ========================================================================== */

/* Gesperrtes Element - Basis */
.foursys-vault-upgrade-locked {
    position: relative;
    pointer-events: none;
}

/* Mit Blur-Effekt - Inhalt wird unscharf */
.foursys-vault-upgrade-locked--blur > *:not(.foursys-vault-upgrade-overlay):not(.foursys-vault-upgrade-badge) {
    filter: blur(1px);
    opacity: 0.6;
}

/* Badge-Variante - nur leichter Effekt */
.foursys-vault-upgrade-locked--badge {
    opacity: 0.7;
}

.foursys-vault-upgrade-locked--badge:hover {
    opacity: 0.7;
}

/* Overlay im Element */
.foursys-vault-upgrade-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
    pointer-events: auto;
}

.foursys-vault-upgrade-overlay--top-right {
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--foursys-vault-space-md);
}

/* Upgrade Button */
.foursys-vault-upgrade-btn {
    background: var(--foursys-vault-gold-gradient);
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--foursys-vault-font-sans);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(199, 171, 123, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    pointer-events: auto;
}

.foursys-vault-upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(199, 171, 123, 0.4);
    color: #FFFFFF;
    text-decoration: none;
}

.foursys-vault-upgrade-btn:active {
    transform: translateY(0);
}

.foursys-vault-upgrade-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Badge-Variante für Theme-Karten etc. */
.foursys-vault-upgrade-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: var(--foursys-vault-gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(199, 171, 123, 0.4);
    z-index: 15;
    text-decoration: none;
    pointer-events: auto;
}

.foursys-vault-upgrade-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(199, 171, 123, 0.5);
}

.foursys-vault-upgrade-badge svg {
    width: 14px;
    height: 14px;
    color: #FFFFFF;
}

/* Gesperrte Theme-Option - spezifisch */
.foursys-vault-theme-option.foursys-vault-upgrade-locked {
    cursor: not-allowed;
}

.foursys-vault-theme-option.foursys-vault-upgrade-locked:hover {
    border-color: var(--foursys-vault-border);
    transform: none;
    box-shadow: none;
}

/* Gesperrte Export-Karten - Container hat Overlay */
.foursys-vault-export-options.foursys-vault-upgrade-locked .foursys-vault-export-card {
    opacity: 0.5;
    filter: grayscale(0.3);
}

/* Limit-Hinweis für Max Vaults */
.foursys-vault-limit-hint {
    color: var(--foursys-vault-text-secondary);
    font-size: 0.8125rem;
    margin-top: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: rgba(199, 171, 123, 0.1);
    border-radius: var(--foursys-vault-radius-sm);
    border-left: 3px solid var(--foursys-vault-gold);
}

/* Light Theme Anpassungen */
[data-theme="light"] .foursys-vault-upgrade-overlay {
    background: rgba(255, 255, 255, 0.3);
}

/* Pro Theme Anpassungen */
[data-theme="pro"] .foursys-vault-upgrade-overlay,
[data-theme="pro-gold"] .foursys-vault-upgrade-overlay {
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile Optimierungen */
@media (max-width: 767px) {
    .foursys-vault-upgrade-btn {
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    
    .foursys-vault-upgrade-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .foursys-vault-upgrade-badge {
        width: 24px;
        height: 24px;
    }
    
    .foursys-vault-upgrade-badge svg {
        width: 12px;
        height: 12px;
    }
}


/* Gesperrte Navigation Items */
.foursys-vault-nav__item--locked {
    opacity: 0.5;
    position: relative;
}

.foursys-vault-nav__item--locked::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23c7ab7b' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.foursys-vault-nav__item--locked:hover {
    background: transparent;
    color: var(--foursys-vault-text-secondary);
}

/* Mobile Anpassung für gesperrte Items */
@media (max-width: 767px) {
    .foursys-vault-nav__item--locked::after {
        right: 8px;
        width: 12px;
        height: 12px;
    }
}


/* ==========================================================================
   Portfolio Limit Modal - Update v1.9.0
   ========================================================================== */

.foursys-vault-limit-modal {
    text-align: center;
    padding: var(--foursys-vault-space-lg) var(--foursys-vault-space-md);
}

.foursys-vault-limit-modal__icon {
    margin-bottom: var(--foursys-vault-space-lg);
    color: var(--foursys-vault-warning);
}

.foursys-vault-limit-modal__icon svg {
    width: 64px;
    height: 64px;
}

.foursys-vault-limit-modal__message {
    font-size: 1rem;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-md);
    line-height: 1.6;
}

.foursys-vault-limit-modal__message strong {
    color: var(--foursys-vault-gold);
    font-weight: 600;
}

.foursys-vault-limit-modal__hint {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    margin: 0;
}

/* Footer zentriert */
.foursys-modal__footer--centered {
    justify-content: center;
}

.foursys-modal__footer--centered .foursys-modal__actions {
    gap: var(--foursys-vault-space-md);
}

/* Upgrade Button Styling */
.foursys-vault-btn--upgrade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--foursys-vault-gold-gradient);
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
}

.foursys-vault-btn--upgrade:hover {
    filter: brightness(1.1);
    text-decoration: none;
}

/* Light Theme Anpassungen */
[data-theme="light"] .foursys-vault-limit-modal__message {
    color: var(--foursys-vault-text-primary);
}

[data-theme="light"] .foursys-vault-limit-modal__hint {
    color: var(--foursys-vault-text-secondary);
}

/* Pro Theme Anpassungen */
[data-theme="pro"] .foursys-vault-limit-modal__message,
[data-theme="pro-gold"] .foursys-vault-limit-modal__message {
    color: #1F2937;
}

[data-theme="pro"] .foursys-vault-limit-modal__hint,
[data-theme="pro-gold"] .foursys-vault-limit-modal__hint {
    color: #6B7280;
}


/* ============================================
   DEMO-BANNER (Update v2.6.8)
   Unauffälliges Banner am unteren Bildschirmrand
   ============================================ */

/* ==========================================================================
   Update v2.8.0: Demo-Toast (oben rechts, persistent, wegklickbar)
   ========================================================================== */
.foursys-vault-demo-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid var(--foursys-vault-gold, #c7ab7b);
    border-radius: 8px;
    padding: 12px 40px 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 360px;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.foursys-vault-demo-toast__icon {
    display: flex;
    align-items: center;
    color: var(--foursys-vault-gold, #c7ab7b);
    flex-shrink: 0;
}

.foursys-vault-demo-toast__icon svg {
    width: 18px;
    height: 18px;
}

.foursys-vault-demo-toast__text {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.foursys-vault-demo-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.foursys-vault-demo-toast__close:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.foursys-vault-demo-toast__close svg {
    width: 16px;
    height: 16px;
}

/* Light Theme Anpassung */
[data-theme="light"] .foursys-vault-demo-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--foursys-vault-gold, #c7ab7b);
    color: #374151;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .foursys-vault-demo-toast__close {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .foursys-vault-demo-toast__close:hover {
    color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.05);
}

/* Pro/Pro-Gold Theme Anpassung */
[data-theme="pro"] .foursys-vault-demo-toast,
[data-theme="pro-gold"] .foursys-vault-demo-toast {
    background: rgba(26, 26, 46, 0.95);
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .foursys-vault-demo-toast {
        top: auto;
        bottom: 20px;
        right: 10px;
        left: 10px;
        max-width: none;
        font-size: 12px;
        padding: 10px 36px 10px 12px;
    }
    
    .foursys-vault-demo-toast__icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   Update v2.6.8: Demo-Passwort Hinweis im Unlock-Screen
   ========================================================================== */

.foursys-vault-unlock__demo-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    padding: 12px 16px;
    background: rgba(199, 171, 123, 0.1);
    border: 1px solid rgba(199, 171, 123, 0.3);
    border-radius: 8px;
}

.foursys-vault-unlock__demo-hint-icon {
    flex-shrink: 0;
    color: var(--foursys-vault-gold);
}

.foursys-vault-unlock__demo-hint-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.foursys-vault-unlock__demo-hint-label {
    font-size: 13px;
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-unlock__demo-hint-password {
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: var(--foursys-vault-gold);
    letter-spacing: 0.5px;
}

.foursys-vault-unlock__demo-hint-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--foursys-vault-gold);
    color: #1a1a2e;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.foursys-vault-unlock__demo-hint-copy:hover {
    background: var(--foursys-vault-gold-light);
    transform: translateY(-1px);
}

.foursys-vault-unlock__demo-hint-copy:active {
    transform: translateY(0);
}

/* Light Theme */
[data-theme="light"] .foursys-vault-unlock__demo-hint {
    background: rgba(199, 171, 123, 0.08);
    border-color: rgba(199, 171, 123, 0.25);
}

[data-theme="light"] .foursys-vault-unlock__demo-hint-password {
    background: rgba(0, 0, 0, 0.06);
    color: #8b6914;
}

/* Pro Themes */
[data-theme="pro"] .foursys-vault-unlock__demo-hint,
[data-theme="pro-gold"] .foursys-vault-unlock__demo-hint {
    background: rgba(199, 171, 123, 0.08);
    border-color: rgba(199, 171, 123, 0.2);
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
    .foursys-vault-unlock__demo-hint {
        padding: 10px 12px;
    }
    
    .foursys-vault-unlock__demo-hint-content {
        gap: 6px;
    }
    
    .foursys-vault-unlock__demo-hint-label {
        font-size: 12px;
    }
    
    .foursys-vault-unlock__demo-hint-password {
        font-size: 13px;
    }
}