/**
 * Edelmetall-Vault: Frontend Settings Styles
 *
 * Styles für die Frontend-Einstellungsseite
 * 
 * @package EdelmetallVault
 * @since   1.2.0
 * @version 1.2.0 - Initial Settings Page
 */

/* ==========================================================================
   Settings Page Layout
   ========================================================================== */

.foursys-vault-page--settings {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--foursys-vault-space-lg);
}

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

/* ==========================================================================
   Settings Section
   ========================================================================== */

.foursys-vault-settings-section {
    background: var(--foursys-vault-bg-card);
    border-radius: var(--foursys-vault-radius-lg);
    overflow: hidden;
}

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

.foursys-vault-settings-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(199, 171, 123, 0.1);
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-gold);
}

.foursys-vault-settings-section__title-wrapper {
    flex: 1;
}

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

.foursys-vault-settings-section__description {
    margin: var(--foursys-vault-space-xs) 0 0;
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-settings-section__body {
    padding: var(--foursys-vault-space-lg);
}

/* ==========================================================================
   Theme Selection
   ========================================================================== */

.foursys-vault-theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--foursys-vault-space-md);
}

.foursys-vault-theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--foursys-vault-space-lg);
    background: var(--foursys-vault-bg-input);
    border: 2px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-lg);
    cursor: pointer;
    transition: all var(--foursys-vault-transition-fast);
}

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

.foursys-vault-theme-option--active {
    border-color: var(--foursys-vault-gold);
    background: rgba(199, 171, 123, 0.08);
}

.foursys-vault-theme-option--active::after {
    content: '';
    position: absolute;
    top: var(--foursys-vault-space-sm);
    right: var(--foursys-vault-space-sm);
    width: 24px;
    height: 24px;
    background: var(--foursys-vault-gold);
    border-radius: 50%;
    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='%23FFFFFF' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.foursys-vault-theme-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.foursys-vault-theme-preview {
    width: 100%;
    height: 100px;
    border-radius: var(--foursys-vault-radius-md);
    margin-bottom: var(--foursys-vault-space-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark Theme Preview */
.foursys-vault-theme-preview--dark {
    background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%);
    display: flex;
    flex-direction: column;
}

.foursys-vault-theme-preview--dark::before {
    content: '';
    height: 24px;
    background: #1A1A1A;
    border-bottom: 1px solid #333;
}

.foursys-vault-theme-preview--dark::after {
    content: '';
    flex: 1;
    margin: 8px;
    background: repeating-linear-gradient(
        90deg,
        #252525 0px,
        #252525 30%,
        transparent 30%,
        transparent 32%
    );
    border-radius: 4px;
}

/* Light Theme Preview */
.foursys-vault-theme-preview--light {
    background: linear-gradient(135deg, #F5F5F7 0%, #FFFFFF 100%);
    display: flex;
    flex-direction: column;
}

.foursys-vault-theme-preview--light::before {
    content: '';
    height: 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #D2D2D7;
}

.foursys-vault-theme-preview--light::after {
    content: '';
    flex: 1;
    margin: 8px;
    background: repeating-linear-gradient(
        90deg,
        #F0F0F2 0px,
        #F0F0F2 30%,
        transparent 30%,
        transparent 32%
    );
    border-radius: 4px;
}

/* Pro Theme Preview - Update v1.2.2 */
.foursys-vault-theme-preview--pro {
    background: linear-gradient(135deg, #1A1D23 0%, #0F1419 100%);
    display: flex;
    flex-direction: column;
    position: relative;
}

.foursys-vault-theme-preview--pro::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: #0F1419;
    border-right: 1px solid #374151;
}

.foursys-vault-theme-preview--pro::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    left: calc(25% + 8px);
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Pro Gold Theme Preview - Update v1.5.2 */
.foursys-vault-theme-preview--pro-gold {
    background: linear-gradient(135deg, #1A1D23 0%, #0F1419 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.foursys-vault-theme-preview--pro-gold::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: #0F1419;
    border-right: 3px solid #c0ab7e;
}

.foursys-vault-theme-preview--pro-gold::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    left: calc(25% + 8px);
    background: linear-gradient(135deg, #a07f3d 0%, #e7d38d 100%);
    border-radius: 6px;
}

/* Update v3.1.2: Dark Theme Preview */
.foursys-vault-theme-preview--dark-theme {
    background: linear-gradient(135deg, #0f1923 0%, #172c41 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.foursys-vault-theme-preview--dark-theme::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: #0a1219;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.foursys-vault-theme-preview--dark-theme::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    left: calc(25% + 8px);
    background: #172c41;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.foursys-vault-theme-option__label {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-vault-theme-option__description {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-secondary);
    text-align: center;
}

/* ==========================================================================
   Settings Form Elements
   ========================================================================== */

.foursys-vault-settings-row {
    display: flex;
    flex-direction: column;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-md) 0;
    border-bottom: 1px solid var(--foursys-vault-border);
}

.foursys-vault-settings-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.foursys-vault-settings-row:first-child {
    padding-top: 0;
}

.foursys-vault-settings-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.foursys-vault-settings-label {
    font-weight: 500;
    color: var(--foursys-vault-text-primary);
}

.foursys-vault-settings-hint {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-secondary);
    margin-top: var(--foursys-vault-space-xs);
}

/* Update v1.9.31: Sicherheitswarnung */
.foursys-vault-settings-hint--warning {
    display: flex;
    align-items: flex-start;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    margin-top: var(--foursys-vault-space-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--foursys-vault-radius-sm);
    color: #f59e0b;
    font-size: 0.8125rem;
}

.foursys-vault-settings-hint--warning svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.foursys-vault-settings-input {
    width: 100%;
    max-width: 300px;
}

.foursys-vault-settings-select {
    min-width: 180px;
}

/* ==========================================================================
   Export Section (innerhalb Einstellungen)
   ========================================================================== */

.foursys-vault-export-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--foursys-vault-space-md);
    margin-top: var(--foursys-vault-space-md);
}

.foursys-vault-export-card {
    display: flex;
    flex-direction: column;
    padding: var(--foursys-vault-space-lg);
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    transition: all var(--foursys-vault-transition-fast);
    cursor: pointer;
}

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

.foursys-vault-export-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(199, 171, 123, 0.1);
    border-radius: var(--foursys-vault-radius-md);
    color: var(--foursys-vault-gold);
    margin-bottom: var(--foursys-vault-space-md);
}

.foursys-vault-export-card__title {
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-vault-export-card__description {
    font-size: 0.8125rem;
    color: var(--foursys-vault-text-secondary);
    flex: 1;
}

.foursys-vault-export-card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--foursys-vault-space-xs);
    margin-top: var(--foursys-vault-space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foursys-vault-gold);
}

.foursys-vault-export-card__action svg {
    transition: transform var(--foursys-vault-transition-fast);
}

.foursys-vault-export-card:hover .foursys-vault-export-card__action svg {
    transform: translateX(4px);
}

/* Update v2.1.7: Loading-Zustand für Export-Cards */
.foursys-vault-export-card--loading {
    pointer-events: none;
    opacity: 0.7;
}

.foursys-vault-export-card--loading .foursys-vault-export-card__action::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--foursys-vault-gold);
    border-top-color: transparent;
    border-radius: 50%;
    animation: foursys-vault-spin 0.8s linear infinite;
    margin-right: var(--foursys-vault-space-xs);
}

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

/* Update v2.2.0: Screen Reader Only - versteckt aber zugänglich für File-Input */
.foursys-vault-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;
}

/* Update v2.2.0: Label als Export-Card stylen */
label.foursys-vault-export-card {
    cursor: pointer;
}

label.foursys-vault-export-card:focus-within {
    outline: 2px solid var(--foursys-vault-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   Info/Privacy Notice Box
   ========================================================================== */

.foursys-vault-settings-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-md);
    background: rgba(199, 171, 123, 0.08);
    border: 1px solid rgba(199, 171, 123, 0.2);
    border-radius: var(--foursys-vault-radius-md);
    margin-top: var(--foursys-vault-space-lg);
}

.foursys-vault-settings-notice__icon {
    flex-shrink: 0;
    color: var(--foursys-vault-gold);
}

.foursys-vault-settings-notice__text {
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
    line-height: 1.5;
}

.foursys-vault-settings-notice__text strong {
    color: var(--foursys-vault-text-primary);
}

/* ==========================================================================
   Save Button Area
   ========================================================================== */

.foursys-vault-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--foursys-vault-space-md);
    padding-top: var(--foursys-vault-space-lg);
    border-top: 1px solid var(--foursys-vault-border);
    margin-top: var(--foursys-vault-space-lg);
}

.foursys-vault-settings-saved {
    display: inline-flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    color: var(--foursys-vault-success);
    font-weight: 500;
    opacity: 0;
    transition: opacity var(--foursys-vault-transition-fast);
}

.foursys-vault-settings-saved--visible {
    opacity: 1;
}

/* ==========================================================================
   Responsive Anpassungen
   ========================================================================== */

@media (max-width: 767px) {
    .foursys-vault-page--settings {
        padding: var(--foursys-vault-space-md);
    }
    
    .foursys-vault-settings-section__header {
        padding: var(--foursys-vault-space-md);
    }
    
    .foursys-vault-settings-section__body {
        padding: var(--foursys-vault-space-md);
    }
    
    .foursys-vault-theme-options {
        grid-template-columns: 1fr;
    }
    
    .foursys-vault-settings-row--inline {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .foursys-vault-settings-select {
        width: 100%;
    }
    
    .foursys-vault-export-options {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Toggle Switch
   ========================================================================== */

.foursys-vault-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.foursys-vault-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.foursys-vault-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: 28px;
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-vault-toggle__slider::before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--foursys-vault-text-secondary);
    border-radius: 50%;
    transition: all var(--foursys-vault-transition-fast);
}

.foursys-vault-toggle input:checked + .foursys-vault-toggle__slider {
    background-color: rgba(199, 171, 123, 0.2);
    border-color: var(--foursys-vault-gold);
}

.foursys-vault-toggle input:checked + .foursys-vault-toggle__slider::before {
    transform: translateX(24px);
    background-color: var(--foursys-vault-gold);
}

.foursys-vault-toggle input:focus + .foursys-vault-toggle__slider {
    box-shadow: 0 0 0 3px rgba(199, 171, 123, 0.15);
}

/* Light Theme Toggle Anpassungen */
.foursys-vault[data-theme="light"] .foursys-vault-toggle__slider {
    background-color: var(--foursys-vault-bg-input);
    border-color: var(--foursys-vault-border);
}

.foursys-vault[data-theme="light"] .foursys-vault-toggle__slider::before {
    background-color: #AEAEB2;
}

.foursys-vault[data-theme="light"] .foursys-vault-toggle input:checked + .foursys-vault-toggle__slider {
    background-color: rgba(154, 123, 79, 0.15);
    border-color: var(--foursys-vault-gold);
}

.foursys-vault[data-theme="light"] .foursys-vault-toggle input:checked + .foursys-vault-toggle__slider::before {
    background-color: var(--foursys-vault-gold);
}

/* ==========================================================================
   PWA Installation Section
   Update v1.5.26: Neu
   ========================================================================== */

.foursys-vault-settings-section--pwa {
    background: linear-gradient(135deg, rgba(199, 171, 123, 0.05) 0%, rgba(199, 171, 123, 0.02) 100%);
    border: 1px solid rgba(199, 171, 123, 0.2);
}

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

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

.foursys-vault-pwa-benefit {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--foursys-vault-radius-md);
    font-size: 0.875rem;
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-pwa-benefit svg {
    color: var(--foursys-vault-gold);
    flex-shrink: 0;
}

.foursys-vault-pwa-install-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    align-self: flex-start;
    padding: var(--foursys-vault-space-md) var(--foursys-vault-space-lg);
    font-size: 1rem;
}

.foursys-vault-pwa-install-btn svg {
    width: 20px;
    height: 20px;
}

.foursys-vault-pwa-installed {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-md);
    background: rgba(52, 199, 89, 0.1);
    border-radius: var(--foursys-vault-radius-md);
    color: #34C759;
}

.foursys-vault-pwa-installed svg {
    flex-shrink: 0;
}

/* iOS Install Hint */
.foursys-vault-ios-hint {
    position: relative;
    padding: var(--foursys-vault-space-lg);
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-radius: var(--foursys-vault-radius-md);
}

.foursys-vault-ios-hint__close {
    position: absolute;
    top: var(--foursys-vault-space-sm);
    right: var(--foursys-vault-space-sm);
    padding: var(--foursys-vault-space-xs);
    background: transparent;
    border: none;
    color: var(--foursys-vault-text-secondary);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.foursys-vault-ios-hint__close:hover {
    opacity: 1;
}

.foursys-vault-ios-hint__content strong {
    display: block;
    margin-bottom: var(--foursys-vault-space-sm);
    color: #FF9500;
}

.foursys-vault-ios-hint__content ol {
    margin: 0;
    padding-left: var(--foursys-vault-space-lg);
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-ios-hint__content li {
    margin-bottom: var(--foursys-vault-space-xs);
}

/* Light Theme PWA */
.foursys-vault[data-theme="light"] .foursys-vault-pwa-benefit {
    background: rgba(0, 0, 0, 0.03);
}

.foursys-vault[data-theme="light"] .foursys-vault-pwa-installed {
    background: rgba(52, 199, 89, 0.1);
}

.foursys-vault[data-theme="light"] .foursys-vault-ios-hint {
    background: rgba(255, 149, 0, 0.05);
}

/* Pro Theme PWA */
.foursys-vault[data-theme="pro"] .foursys-vault-pwa-benefit,
.foursys-vault[data-theme="pro-gold"] .foursys-vault-pwa-benefit {
    background: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   PWA Installation Section - Update v1.7.1
   ========================================================================== */

/* PWA Status: Installiert */
.foursys-vault-pwa-status {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
    padding: var(--foursys-vault-space-lg);
    border-radius: var(--foursys-vault-radius-md);
}

.foursys-vault-pwa-status--installed {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.foursys-vault-pwa-status__icon {
    flex-shrink: 0;
}

.foursys-vault-pwa-status__icon--success {
    color: #34C759;
}

.foursys-vault-pwa-status__text strong {
    display: block;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-vault-pwa-status__text p {
    margin: 0;
    color: var(--foursys-vault-text-secondary);
    font-size: 0.875rem;
}

/* PWA Install Button Area */
.foursys-vault-pwa-install {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--foursys-vault-space-lg);
    padding: var(--foursys-vault-space-lg);
    background: linear-gradient(135deg, rgba(199, 171, 123, 0.1) 0%, rgba(199, 171, 123, 0.05) 100%);
    border: 1px solid rgba(199, 171, 123, 0.3);
    border-radius: var(--foursys-vault-radius-lg);
}

.foursys-vault-pwa-install__content {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-md);
}

.foursys-vault-pwa-install__icon {
    flex-shrink: 0;
    color: var(--foursys-vault-gold);
}

.foursys-vault-pwa-install__text strong {
    display: block;
    color: var(--foursys-vault-text-primary);
    margin-bottom: var(--foursys-vault-space-xs);
}

.foursys-vault-pwa-install__text p {
    margin: 0;
    color: var(--foursys-vault-text-secondary);
    font-size: 0.875rem;
}

.foursys-vault-pwa-install__btn {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    white-space: nowrap;
}

/* PWA Manual Instructions */
.foursys-vault-pwa-manual__intro {
    margin-bottom: var(--foursys-vault-space-lg);
    color: var(--foursys-vault-text-secondary);
}

.foursys-vault-pwa-manual__intro p {
    margin: 0;
}

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

.foursys-vault-pwa-instruction {
    background: var(--foursys-vault-bg-input);
    border: 1px solid var(--foursys-vault-border);
    border-radius: var(--foursys-vault-radius-md);
    overflow: hidden;
}

.foursys-vault-pwa-instruction__header {
    padding: var(--foursys-vault-space-md);
    background: rgba(199, 171, 123, 0.05);
    border-bottom: 1px solid var(--foursys-vault-border);
}

.foursys-vault-pwa-instruction__device {
    display: flex;
    align-items: center;
    gap: var(--foursys-vault-space-sm);
    font-weight: 600;
    color: var(--foursys-vault-text-primary);
}

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

.foursys-vault-pwa-instruction__steps {
    margin: 0;
    padding: var(--foursys-vault-space-md) var(--foursys-vault-space-md) var(--foursys-vault-space-md) calc(var(--foursys-vault-space-lg) + var(--foursys-vault-space-md));
    color: var(--foursys-vault-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.foursys-vault-pwa-instruction__steps li {
    margin-bottom: var(--foursys-vault-space-sm);
}

.foursys-vault-pwa-instruction__steps li:last-child {
    margin-bottom: 0;
}

.foursys-vault-pwa-instruction__icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 2px 4px;
    background: rgba(199, 171, 123, 0.15);
    border-radius: 4px;
    margin: 0 2px;
}

.foursys-vault-pwa-instruction__icon-inline svg {
    color: var(--foursys-vault-gold);
}

/* Info Notice Variante */
.foursys-vault-settings-notice--info {
    background: rgba(52, 120, 246, 0.08);
    border-color: rgba(52, 120, 246, 0.2);
}

.foursys-vault-settings-notice--info .foursys-vault-settings-notice__icon {
    color: #3478F6;
}

/* Light Theme Anpassungen */
.foursys-vault[data-theme="light"] .foursys-vault-pwa-install {
    background: linear-gradient(135deg, rgba(154, 123, 79, 0.08) 0%, rgba(154, 123, 79, 0.03) 100%);
    border-color: rgba(154, 123, 79, 0.2);
}

.foursys-vault[data-theme="light"] .foursys-vault-pwa-instruction {
    background: var(--foursys-vault-bg-card);
}

.foursys-vault[data-theme="light"] .foursys-vault-pwa-instruction__header {
    background: rgba(154, 123, 79, 0.05);
}

.foursys-vault[data-theme="light"] .foursys-vault-settings-notice--info {
    background: rgba(52, 120, 246, 0.05);
}

/* Pro Theme Anpassungen */
.foursys-vault[data-theme="pro"] .foursys-vault-pwa-install,
.foursys-vault[data-theme="pro-gold"] .foursys-vault-pwa-install {
    background: linear-gradient(135deg, rgba(199, 171, 123, 0.08) 0%, rgba(199, 171, 123, 0.03) 100%);
}

.foursys-vault[data-theme="pro"] .foursys-vault-pwa-instruction,
.foursys-vault[data-theme="pro-gold"] .foursys-vault-pwa-instruction {
    background: rgba(255, 255, 255, 0.02);
}

/* Responsive für PWA Section */
@media (max-width: 767px) {
    .foursys-vault-pwa-install {
        flex-direction: column;
        align-items: stretch;
    }
    
    .foursys-vault-pwa-install__content {
        flex-direction: column;
        text-align: center;
    }
    
    .foursys-vault-pwa-install__btn {
        justify-content: center;
    }
    
    .foursys-vault-pwa-status {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Settings Divider (v2.1.5)
   ========================================================================== */

.foursys-vault-settings-divider {
    border: none;
    height: 1px;
    background: var(--foursys-vault-border);
    margin: var(--foursys-vault-space-lg) 0;
}

/* Info Hint (v2.1.5) */
.foursys-vault-settings-hint--info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: var(--foursys-vault-space-sm) var(--foursys-vault-space-md);
    background: rgba(var(--foursys-vault-accent-rgb), 0.1);
    border-radius: var(--foursys-vault-radius);
    color: var(--foursys-vault-accent);
    font-size: var(--foursys-vault-text-sm);
}

.foursys-vault-settings-hint--info svg {
    flex-shrink: 0;
    margin-top: 2px;
}