/* =========================================
   1. CSS VARIABLEN (LIGHT & DARK THEMES)
   ========================================= */
:root { 
    /* Deine originalen Studio-Farben */
    --s4y-blue: #06319A; 
    --s4y-dark: #0E1015; 
    --s4y-accent: #2563eb; 
    --s4y-bg: #f1f5f9; 
    --s4y-border: #e2e8f0;
    --s4y-text: #334155;

    /* Neu zugeordnete Variablen für den Dark Mode Switch */
    --s4y-body-bg: #f5f5f7;
    --s4y-card-bg: #ffffff;
    --s4y-surface: #f8fafc;
    --s4y-surface-alt: #f1f5f9;
    --s4y-muted: #64748b;
    --s4y-muted-light: #94a3b8;
    --s4y-white: #ffffff;
    --s4y-shadow: 0 10px 30px rgba(0,0,0,0.05);
    --s4y-shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --s4y-btn-hover-shadow: 0 8px 15px rgba(6,49,154,0.2);
    --s4y-focus-ring: 0 0 0 3px rgba(6,49,154,0.1);
    
    /* Code & Chat spezifisch */
    --s4y-code-bg: #1e293b;
    --s4y-code-text: #e2e8f0;
    --s4y-inline-code-bg: rgba(0,0,0,0.05);
    --s4y-user-code-bg: rgba(255,255,255,0.2);
    
    /* Buttons & Alerts */
    --s4y-secondary-text: #475569;
    --s4y-danger-bg: #fee2e2;
    --s4y-danger-text: #dc2626;
    --s4y-danger-hover: #fca5a5;
    --s4y-success-bg: #e3f8e9;
    --s4y-success-text: #248a3d;
    --s4y-success-border: #ccebd5;
    --s4y-remove-bg: rgba(239, 68, 68, 0.9);
    
    /* Filter & Overlays */
    --s4y-logo-filter: none;
    --s4y-overlay-bg: rgba(255,255,255,0.85);
}

html[data-theme="dark"] {
    --s4y-blue: #3b82f6; 
    --s4y-dark: #f8fafc; 
    --s4y-accent: #60a5fa; 
    --s4y-bg: #0B0D11; 
    --s4y-border: #2a3142;
    --s4y-text: #cbd5e1;

    --s4y-body-bg: #0B0D11;
    --s4y-card-bg: #151821;
    --s4y-surface: #1e2433;
    --s4y-surface-alt: #2a3142;
    --s4y-muted: #94a3b8;
    --s4y-muted-light: #64748b;
    --s4y-white: #ffffff; 
    --s4y-shadow: 0 10px 30px rgba(0,0,0,0.4);
    --s4y-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --s4y-btn-hover-shadow: 0 8px 15px rgba(59,130,246,0.3);
    --s4y-focus-ring: 0 0 0 3px rgba(59,130,246,0.2);

    --s4y-code-bg: #090a0f;
    --s4y-code-text: #e2e8f0;
    --s4y-inline-code-bg: rgba(255,255,255,0.1);
    --s4y-user-code-bg: rgba(255,255,255,0.2);

    --s4y-secondary-text: #e2e8f0;
    --s4y-danger-bg: rgba(220, 38, 38, 0.1);
    --s4y-danger-text: #f87171;
    --s4y-danger-hover: rgba(220, 38, 38, 0.2);
    --s4y-success-bg: rgba(36, 138, 61, 0.15);
    --s4y-success-text: #4ade80;
    --s4y-success-border: rgba(36, 138, 61, 0.3);
    --s4y-remove-bg: rgba(239, 68, 68, 0.9);

    --s4y-logo-filter: brightness(0) invert(1);
    --s4y-overlay-bg: rgba(11, 13, 17, 0.85);
}

/* =========================================
   2. DEIN ORIGINAL CSS (Mit Variablen)
   ========================================= */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--s4y-text); background: var(--s4y-body-bg); margin: 0; padding: 20px; transition: background 0.3s ease, color 0.3s ease; }
.s4y-wrap { max-width: 1400px; margin: 0 auto; }
.s4y-card { background: var(--s4y-card-bg); padding: 30px; border-radius: 20px; box-shadow: var(--s4y-shadow); border: 1px solid var(--s4y-border); position: relative; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; }

/* HEADER & LOGO */
.s4y-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--s4y-border); transition: border-color 0.3s ease; }
.s4y-logo-wrap { display: flex; align-items: center; gap: 15px; }
.s4y-logo-svg { max-width: 220px; }
.s4y-logo-svg img { width: 100%; height: auto; display: block; filter: var(--s4y-logo-filter); transition: filter 0.3s ease; }
.s4y-logo-text { font-size: 28px; font-weight: 900; color: var(--s4y-blue); letter-spacing: -0.02em; text-transform: uppercase; transition: color 0.3s ease; }
.s4y-version { font-size: 10px; font-weight: 800; background: var(--s4y-blue); color: var(--s4y-white); padding: 2px 8px; border-radius: 4px; vertical-align: middle; transition: background 0.3s ease; }

/* TABS */
.s4y-tabs { display: flex; gap: 5px; margin-bottom: 25px; background: var(--s4y-surface); padding: 5px; border-radius: 12px; width: fit-content; transition: background 0.3s ease; }
.s4y-tab-link { padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--s4y-muted); transition: all 0.2s; font-size: 13px; }
.s4y-tab-link:hover { color: var(--s4y-dark); }
.s4y-tab-link.active { background: var(--s4y-card-bg); color: var(--s4y-blue); box-shadow: var(--s4y-shadow-sm); }

/* CHAT UI */
.s4y-chat-wrapper { display: flex; flex-direction: column; height: 600px; border: 1px solid var(--s4y-border); border-radius: 16px; overflow: hidden; background: var(--s4y-surface); transition: background 0.3s ease, border-color 0.3s ease; }
.s4y-chat-history { flex-grow: 1; overflow-y: auto; padding: 25px; display: flex; flex-direction: column; gap: 15px; }
.s4y-chat-msg { padding: 15px 20px; border-radius: 12px; max-width: 80%; font-size: 14px; line-height: 1.6; word-wrap: break-word; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
.s4y-chat-msg p { margin-top: 0; margin-bottom: 10px; }
.s4y-chat-msg p:last-child { margin-bottom: 0; }
.s4y-chat-msg pre { background: var(--s4y-code-bg); color: var(--s4y-code-text); padding: 15px; border-radius: 8px; overflow-x: auto; font-family: monospace; font-size: 13px; transition: background 0.3s ease; }
.s4y-chat-msg code { font-family: monospace; background: var(--s4y-inline-code-bg); padding: 2px 6px; border-radius: 4px; }
.s4y-chat-msg pre code { background: none; padding: 0; }
.s4y-chat-msg.ai { background: var(--s4y-card-bg); border: 1px solid var(--s4y-border); align-self: flex-start; border-bottom-left-radius: 2px; }
.s4y-chat-msg.user { background: var(--s4y-blue); color: var(--s4y-white); align-self: flex-end; border-bottom-right-radius: 2px; }
.s4y-chat-msg.user code { background: var(--s4y-user-code-bg); }
.s4y-chat-input-area { padding: 20px; background: var(--s4y-card-bg); border-top: 1px solid var(--s4y-border); display: flex; gap: 15px; align-items: flex-end; transition: background 0.3s ease, border-color 0.3s ease; }
.s4y-chat-input-area textarea { flex-grow: 1; border: 1px solid var(--s4y-border); border-radius: 12px; padding: 15px; resize: none; outline: none; font-family: inherit; font-size: 14px; max-height: 150px; background: var(--s4y-card-bg); color: var(--s4y-text); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.s4y-chat-input-area textarea:focus { border-color: var(--s4y-blue); }

/* GRID & FIELDS */
.s4y-main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }
.s4y-config-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; background: var(--s4y-surface); padding: 25px; border-radius: 16px; margin-bottom: 25px; transition: background 0.3s ease; }
.s4y-field { display: flex; flex-direction: column; gap: 6px; }
.s4y-field-full { grid-column: 1 / -1; }
.s4y-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s4y-muted-light); transition: color 0.3s ease;}
.s4y-input, .s4y-select { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--s4y-border); border-radius: 10px; font-size: 14px; transition: all 0.2s; background: var(--s4y-card-bg); color: var(--s4y-text); box-sizing: border-box; }
.s4y-input:focus, .s4y-select:focus { border-color: var(--s4y-blue); box-shadow: var(--s4y-focus-ring); outline: none; }

/* BUTTONS */
.s4y-btn { background: var(--s4y-blue); color: var(--s4y-white); border: none; height: 48px; padding: 0 28px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; text-decoration: none;}
.s4y-btn:hover { transform: translateY(-1px); box-shadow: var(--s4y-btn-hover-shadow); opacity: 0.9; }
.s4y-btn-secondary { background: var(--s4y-surface-alt); color: var(--s4y-secondary-text); border: 1px solid var(--s4y-border); }
.s4y-btn-secondary:hover { background: var(--s4y-border); color: var(--s4y-dark); }
.s4y-btn-danger { background: var(--s4y-danger-bg); color: var(--s4y-danger-text); border: 1px solid var(--s4y-danger-bg); }
.s4y-btn-danger:hover { background: var(--s4y-danger-hover); }

/* EDITOR */
.s4y-editor-wrap { background: var(--s4y-card-bg); border: 1px solid var(--s4y-border); border-radius: 16px; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; }
.s4y-editor-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background: var(--s4y-surface); border-bottom: 1px solid var(--s4y-border); transition: background 0.3s ease, border-color 0.3s ease; }
.s4y-editor-title { width: 100%; border: none; padding: 20px 25px; font-size: 24px; font-weight: 800; color: var(--s4y-dark); border-bottom: 1px solid var(--s4y-surface-alt); outline:none; box-sizing:border-box; background: transparent; transition: color 0.3s ease, border-color 0.3s ease; }
.s4y-editor-text { width: 100%; min-height: 550px; border: none; padding: 25px; line-height: 1.7; font-size: 16px; color: var(--s4y-text); resize: vertical; outline:none; box-sizing:border-box; background: transparent; transition: color 0.3s ease;}

/* SIDEBAR */
.s4y-sidebar-sticky { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 20px; }

/* LOADING OVERLAY */
.s4y-overlay { position: absolute; inset: 0; background: var(--s4y-overlay-bg); backdrop-filter: blur(4px); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 20px; transition: background 0.3s ease;}
.s4y-loader { width: 48px; height: 48px; border: 5px solid var(--s4y-blue); border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; margin-bottom: 20px; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* FILE UPLOAD */
.s4y-upload-zone { border: 2px dashed var(--s4y-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--s4y-card-bg); position: relative; margin-top: 10px; }
.s4y-upload-zone:hover, .s4y-upload-zone.dragover { border-color: var(--s4y-blue); background: var(--s4y-focus-ring); }
.s4y-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.s4y-upload-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.s4y-preview-item { width: 80px; height: 80px; border-radius: 8px; border: 1px solid var(--s4y-border); position: relative; overflow: hidden; background: var(--s4y-surface); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--s4y-muted-light); text-align: center; padding: 5px; transition: background 0.3s ease, border-color 0.3s ease; }
.s4y-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.s4y-preview-item .remove { position: absolute; top: 2px; right: 2px; background: var(--s4y-remove-bg); color: var(--s4y-white); border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; font-weight: bold; }

/* UTILS */
.s4y-flex-center { display: flex; align-items: center; gap: 10px; }
.s4y-history-list { max-height: 400px; overflow-y: auto; }
.s4y-history-item { padding: 12px 15px; border-bottom: 1px solid var(--s4y-surface-alt); cursor: pointer; transition: 0.2s; font-size: 13px; color: var(--s4y-text); }
.s4y-history-item:hover { background: var(--s4y-surface); color: var(--s4y-blue); }
.s4y-tab-content { display: none; }
.s4y-tab-content.active { display: block; }
textarea.s4y-input { height: auto; padding: 12px 14px; min-height: 80px; resize: vertical; }

/* MEDIATHEK GRID */
.s4y-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.s4y-media-card { background: var(--s4y-card-bg); border: 1px solid var(--s4y-border); border-radius: 12px; overflow: hidden; display:flex; flex-direction:column; transition: background 0.3s ease, border-color 0.3s ease; }
.s4y-media-card img { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid var(--s4y-border); transition: border-color 0.3s ease; }
.s4y-media-actions { display: flex; justify-content: space-between; padding: 10px; background: var(--s4y-surface); transition: background 0.3s ease; }
.s4y-media-btn { padding: 6px 12px; font-size: 12px; height:auto; border-radius:6px; }

.s4y-copy-feedback { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: var(--s4y-dark); color: var(--s4y-card-bg); padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 700; z-index: 99999; display: none; box-shadow: var(--s4y-shadow); border: 1px solid var(--s4y-border); transition: background 0.3s ease, color 0.3s ease; }

/* =========================================
   3. LOGIN, THEME SWITCHER & ALERTS
   ========================================= */
.theme-switcher { display: flex; background: var(--s4y-card-bg); border: 1px solid var(--s4y-border); border-radius: 10px; padding: 4px; gap: 4px; align-items: center; transition: background 0.3s ease, border-color 0.3s ease; }
.theme-btn { background: transparent; border: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: var(--s4y-muted); transition: all 0.2s; }
.theme-btn:hover { color: var(--s4y-dark); background: var(--s4y-bg); }
.theme-btn.active { background: var(--s4y-surface); color: var(--s4y-blue); box-shadow: var(--s4y-shadow-sm); }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 0; background: var(--s4y-body-bg); margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: background 0.3s ease; }
.login-card { background: var(--s4y-card-bg); padding: 40px; border-radius: 20px; box-shadow: var(--s4y-shadow); border: 1px solid var(--s4y-border); text-align: center; width: 100%; max-width: 320px; box-sizing: border-box; transition: background 0.3s ease, border-color 0.3s ease; }
.login-logo { max-width: 200px; margin: 0 auto 20px auto; display: block; filter: var(--s4y-logo-filter); transition: filter 0.3s ease; }
.login-card h2 { margin: 0 0 5px 0; font-size: 24px; font-weight: 800; color: var(--s4y-dark); letter-spacing: -0.5px; transition: color 0.3s ease; }
.login-card p { color: var(--s4y-muted); font-size: 14px; margin-bottom: 25px; transition: color 0.3s ease; }

.s4y-alert { padding: 15px 20px; border-radius: 12px; margin-bottom: 25px; font-weight: 600; font-size: 14px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.s4y-alert-success { background: var(--s4y-success-bg); color: var(--s4y-success-text); border: 1px solid var(--s4y-success-border); }
.s4y-alert-error { background: var(--s4y-danger-bg); color: var(--s4y-danger-text); border: 1px solid var(--s4y-danger-hover); }

.s4y-badge { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: bold; transition: background 0.3s ease, color 0.3s ease; }
.s4y-badge-ok { background: var(--s4y-success-bg); color: var(--s4y-success-text); }
.s4y-badge-err { background: var(--s4y-danger-bg); color: var(--s4y-danger-text); }