@import url('./design-tokens.css');
/* ===== COMPONENTS ===== */
/* Reusable UI components */

@import url('./design-tokens.css');

/* ============================================================================
   UNIFIED BUTTON DESIGN SYSTEM
   ============================================================================
   Einheitliches Button-Design für die Hauptanwendung
   Version: 1.0.0
   ============================================================================ */

/* Standard 2026: Window Focus & Layering */
.unified-window.active-focus {
    box-shadow: var(--shadow-glow-primary), var(--shadow-xl) !important;
    border-color: var(--border-focus) !important;
    transform: scale(1.002);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* Global interaction lock: only top-most visible window remains interactive */
.window-passive-interaction {
    pointer-events: none !important;
}

/* Base Button Reset === */
.btn,
button.exp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-normal) var(--ease-in-out);
    background: var(--glass-bg-medium);
    color: var(--text-primary);
    backdrop-filter: blur(var(--glass-blur-md));
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn:focus,
button.exp-btn:focus {
    outline: none;
}

.btn:focus-visible,
button.exp-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.3);
}

.btn:hover,
button.exp-btn:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn:active,
button.exp-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn:disabled,
button.exp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* === Button Sizes === */
.btn-xs {
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 5px;
    gap: var(--spacing-xs);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: var(--radius-sm);
}

.btn-md {
    padding: 8px 16px;
    font-size: 12px;
}

.btn-lg {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 10px;
}

/* === Primary Button (Cyan/Blau) === */
.btn-primary,
button.exp-btn-primary {
    background: linear-gradient(180deg,
        rgba(var(--color-primary-light-rgb), 0.35) 0%,
        rgba(var(--color-primary-rgb), 0.25) 100%);
    border-color: rgba(var(--color-primary-light-rgb), 0.4);
    color: var(--color-primary-light);
    box-shadow:
        0 2px 8px rgba(var(--color-primary-light-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-primary:hover,
button.exp-btn-primary:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-primary-light-rgb), 0.45) 0%,
        rgba(var(--color-primary-rgb), 0.35) 100%);
    border-color: rgba(var(--color-primary-light-rgb), 0.6);
    color: var(--text-primary);
    box-shadow:
        0 4px 16px rgba(var(--color-primary-light-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* === Success Button (Grün) === */
.btn-success,
button.exp-btn-success {
    background: linear-gradient(180deg,
        rgba(var(--color-success-rgb), 0.35) 0%,
        rgba(var(--color-success-rgb), 0.25) 100%);
    border-color: rgba(var(--color-success-rgb), 0.4);
    color: var(--color-success-light);
    box-shadow:
        0 2px 8px rgba(var(--color-success-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-success:hover,
button.exp-btn-success:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-success-rgb), 0.45) 0%,
        rgba(var(--color-success-rgb), 0.35) 100%);
    border-color: rgba(var(--color-success-rgb), 0.6);
    color: var(--text-primary);
    box-shadow:
        0 4px 16px rgba(var(--color-success-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* === Danger Button (Rot) === */
.btn-danger,
button.exp-btn-danger {
    background: linear-gradient(180deg,
        rgba(var(--color-error-rgb), 0.35) 0%,
        rgba(var(--color-error-rgb), 0.25) 100%);
    border-color: rgba(var(--color-error-rgb), 0.4);
    color: var(--color-error-light);
    box-shadow:
        0 2px 8px rgba(var(--color-error-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-danger:hover,
button.exp-btn-danger:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-error-rgb), 0.45) 0%,
        rgba(var(--color-error-rgb), 0.35) 100%);
    border-color: rgba(var(--color-error-rgb), 0.6);
    color: var(--text-primary);
    box-shadow:
        0 4px 16px rgba(var(--color-error-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* === Warning Button (Orange/Amber) === */
.btn-warning,
button.exp-btn-warning {
    background: linear-gradient(180deg,
        rgba(var(--color-warning-rgb), 0.35) 0%,
        rgba(var(--color-warning-rgb), 0.25) 100%);
    border-color: rgba(var(--color-warning-rgb), 0.4);
    color: var(--color-warning);
    box-shadow:
        0 2px 8px rgba(var(--color-warning-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-warning:hover,
button.exp-btn-warning:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-warning-rgb), 0.45) 0%,
        rgba(var(--color-warning-rgb), 0.35) 100%);
    border-color: rgba(var(--color-warning-rgb), 0.6);
    color: var(--text-primary);
    box-shadow:
        0 4px 16px rgba(var(--color-warning-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   UNIFIED ACTION BUTTONS (Secondary CTAs)
   ============================================================================
   Standardisierte kleine Icons-Buttons für Management-Aktionen
   (Edit, Delete, Copy, etc.)
   ============================================================================ */

.action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border-light);
    background: var(--glass-bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    backdrop-filter: blur(var(--glass-blur-sm));
}

.action-btn i,
.action-btn span {
    font-size: 14px;
}

.action-btn:hover {
    background: var(--glass-bg-medium);
    border-color: var(--glass-border-strong);
    color: var(--text-primary);
    transform: scale(1.1) translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.action-btn:active {
    transform: scale(0.95);
}

.action-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.3);
}

/* Specific Action Variants */
.action-btn-edit:hover {
    background: rgba(var(--color-primary-rgb), 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

.action-btn-delete:hover {
    background: rgba(var(--color-error-rgb), 0.15);
    border-color: var(--color-error);
    color: var(--color-error-light);
}

.action-btn-success:hover {
    background: rgba(var(--color-success-rgb), 0.15);
    border-color: var(--color-success);
    color: var(--color-success-light);
}

.action-btn-copy:hover {
    background: rgba(var(--color-purple-rgb), 0.15);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.action-btn-primary:hover {
    background: rgba(var(--color-primary-rgb), 0.2);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
}

.action-btn-info:hover {
    background: rgba(var(--color-info-rgb), 0.15);
    border-color: var(--color-info);
    color: var(--color-info);
}

.action-btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--glass-border-strong);
    color: var(--text-primary);
}

.action-btn-refresh:hover {
    background: rgba(var(--color-success-rgb), 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.action-btn-settings:hover {
    background: rgba(100, 116, 139, 0.2);
    border-color: #94a3b8;
    color: #f1f5f9;
}

.action-btn-tts:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #d8b4fe;
}

/* === Button Layout Utilities === */
.action-group {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

/* === Ghost Button (Transparent) === */
.btn-ghost {
    background: transparent;
    border-color: var(--glass-border);
    color: var(--text-secondary);
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--glass-bg-medium);
    border-color: var(--glass-border-strong);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* === Icon-Only Button === */
.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

.btn-icon.btn-sm {
    padding: 6px;
    width: 28px;
    height: 28px;
}

.btn-icon.btn-lg {
    padding: 10px;
    width: 44px;
    height: 44px;
}

/* === Button with Icon === */
.btn img,
.btn svg,
button.exp-btn img,
button.exp-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}

.btn-sm img,
.btn-sm svg {
    width: 14px;
    height: 14px;
}

.btn-lg img,
.btn-lg svg {
    width: 18px;
    height: 18px;
}

/* === Loading State === */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

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

/* === Button Group === */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
    margin: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.btn-group .btn:not(:last-child) {
    border-right: none;
}

/* ============================================================================
   END UNIFIED BUTTON DESIGN SYSTEM
   ============================================================================ */

/* Entity-Context-Menü */
#entity-menu {
    position: absolute;
    background-color: var(--glass-bg-darker);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur-md));
    border-radius: var(--radius-sm);
    padding: 3px;
    font-size: var(--text-xs);
    z-index: 1004;
    display: none;
    min-width: 160px;
    box-shadow: var(--shadow-lg);
}

body.modal-open #entity-menu {
    display: none;
}

#entity-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#entity-menu li {
    padding: 6px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background-color var(--transition-fast);
}

#entity-menu li:hover {
    background-color: var(--glass-bg-strong);
}

#entity-menu li img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

#entity-menu li .menu-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    text-align: center;
    font-size: var(--text-base);
}

#entity-menu .menu-separator {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 0;
    padding: 0;
    cursor: default;
}

#entity-menu .menu-separator:hover {
    background: var(--glass-border);
}

#entity-menu .menu-danger {
    color: var(--color-error-light);
}

#entity-menu .menu-danger:hover {
    background-color: rgba(var(--color-error-rgb), 0.2);
}

/* Glow-Sprites */
.glow-sprite {
    pointer-events: none;
}

/* Container für dat.GUI (Holografisches Design) */
#gui-container {
    position: absolute;
    top: 75px;
    right: 10px;
    z-index: var(--z-dropdown);
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    cursor: move;
    overflow: hidden;
    padding: 5px;
    min-height: 300px; /* Erhöhte Höhe für Schließen-Button */
}

.sort-icon {
    color: rgb(12, 189, 68);
    margin-right: 5px;
    cursor: pointer;
}

.category-label {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    color: black;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    min-width: 80px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Edit Modal */
#edit-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1005;
    width: 95%;
    max-width: 1500px;
    max-height: 95vh;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#edit-modal h2 {
    margin-top: 0;
    cursor: move;
    display: flex;
    align-items: center;
}

#edit-modal h2 img {
    width: 36px;
    height: 36px;
    margin-right: 8px;
}

#edit-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

#edit-form input[type="range"],
#edit-form input[type="number"],
#edit-form input[type="text"],
#edit-form textarea,
#edit-form textarea#userdata {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
}

#edit-form textarea,
#edit-form textarea#userdata {
    min-width: 400px;
}

#edit-form button {
    padding: 10px 15px;
    margin-top: 15px;
    margin-right: 10px;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 14px;
}

#edit-form button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

#edit-form button[type="submit"]:hover {
    background-color: #45a049;
}

#edit-form button#cancel-edit {
    background-color: #f44336;
    color: white;
}

#edit-form button#cancel-edit:hover {
    background-color: #da190b;
}

/* === Preset Action Buttons - uses unified button system === */
.preset-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(121, 211, 255, 0.35);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg,
        rgba(121, 211, 255, 0.2) 0%,
        rgba(100, 180, 255, 0.12) 100%);
    color: #a8e4ff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 0 auto;
    min-width: 80px;
    backdrop-filter: blur(var(--glass-blur-md));
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.preset-action-btn:hover {
    background: linear-gradient(180deg,
        rgba(121, 211, 255, 0.32) 0%,
        rgba(100, 180, 255, 0.22) 100%);
    border-color: rgba(121, 211, 255, 0.55);
    color: #c8f0ff;
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(121, 211, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.preset-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(121, 211, 255, 0.15);
}

#delete-preset-btn {
    background: linear-gradient(180deg,
        rgba(255, 100, 100, 0.2) 0%,
        rgba(220, 80, 80, 0.12) 100%);
    border-color: rgba(255, 100, 100, 0.35);
    color: #ffb0b0;
}

#delete-preset-btn:hover {
    background: linear-gradient(180deg,
        rgba(255, 100, 100, 0.32) 0%,
        rgba(220, 80, 80, 0.22) 100%);
    border-color: rgba(255, 100, 100, 0.55);
    color: #ffc8c8;
    box-shadow: 0 4px 12px rgba(255, 100, 100, 0.3);
}

/* Holografischer / Holo Button - special effect button */
.holo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    padding: 6px 12px;
    background: linear-gradient(180deg,
        rgba(0, 255, 255, 0.25) 0%,
        rgba(0, 200, 255, 0.15) 100%);
    border: 1px solid rgba(0, 255, 255, 0.45);
    border-radius: var(--radius-md);
    color: #00ffff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur-md));
    box-shadow:
        0 2px 8px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.holo-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: rotate(45deg);
    animation: shimmer 12s infinite linear;
    pointer-events: none;
}

.holo-button:hover {
    background: linear-gradient(180deg,
        rgba(0, 255, 255, 0.35) 0%,
        rgba(0, 200, 255, 0.25) 100%);
    border-color: rgba(0, 255, 255, 0.65);
    transform: translateY(-2px);
    box-shadow:
        0 4px 16px rgba(0, 255, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.holo-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 255, 255, 0.2);
}

.holo-button img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}

.toggle-btn,
.fullscreen-btn,
.close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 14px;
    margin: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-btn:hover,
.fullscreen-btn:hover {
    background: rgba(121, 211, 255, 0.15);
    border-color: rgba(121, 211, 255, 0.35);
    color: #79d3ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(121, 211, 255, 0.2);
}

.close-btn:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff6b6b;
    transform: translateY(-1px);
}

/* Shimmer Animation used by holo-button */

/* Topbar quick buttons (migrated from styles.css) */
.app-topbar .quick button {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--txt);
    font-weight: 500;
    font-size: 10px;
    line-height: 1;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 10px;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 2px 8px rgba(0,0,0,0.2),
        0 1px 3px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    backdrop-filter: blur(var(--glass-blur-md));
}

.app-topbar .quick button::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.4) 0%,
        transparent 50%,
        rgba(255,255,255,0.2) 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-topbar .quick button:hover {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.14) 100%);
    border-color: color-mix(in srgb, var(--acc) 40%, rgba(255,255,255,0.35));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 4px 16px rgba(0,0,0,0.25),
        0 2px 6px rgba(0,0,0,0.35);
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--acc) 40%, transparent));
    text-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 0 8px color-mix(in srgb, var(--acc) 30%, transparent);
}

.app-topbar .quick button:hover::before { opacity: 1; }

.app-topbar .quick button:active {
    transform: translateY(0px) scale(0.98);
    background: linear-gradient(135deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.04) 50%,
        rgba(255,255,255,0.06) 100%);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 2px rgba(0,0,0,0.3),
        0 1px 3px rgba(0,0,0,0.2);
    transition: all 0.1s ease;
}

/* Theme-specific helper for theme toggle and active states are handled in layout/theme files */

/* === Edit Form Buttons (migrated from styles.css) === */
#edit-form button {
    padding: 10px 15px;
    margin-top: 15px;
    margin-right: 10px;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 14px;
}

#edit-form button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

#edit-form button[type="submit"]:hover {
    background-color: #45a049;
}

#edit-form button#cancel-edit {
    background-color: #f44336;
    color: white;
}

#edit-form button#cancel-edit:hover {
    background-color: #da190b;
}

/* === Reset Camera Button === */
.reset-camera-button {
    padding: 4px 10px;
    font-size: 10px;
    background: rgba(121, 211, 255, 0.08);
    border: 1px solid rgba(121, 211, 255, 0.25);
    border-radius: var(--radius-xs);
    color: rgba(121, 211, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.reset-camera-button:hover {
    background: rgba(121, 211, 255, 0.15);
    border-color: rgba(121, 211, 255, 0.45);
    color: #79d3ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(121, 211, 255, 0.2);
}

.reset-camera-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(121, 211, 255, 0.15);
}

/* === Disabled Delete Button for Base Entities === */
button[disabled].delete-base-entity {
    opacity: 0.3;
    cursor: not-allowed !important;
    background: rgba(100, 100, 100, 0.1) !important;
    border-color: rgba(100, 100, 100, 0.3) !important;
}

button[disabled].delete-base-entity:hover {
    transform: none !important;
    background: rgba(100, 100, 100, 0.1) !important;
}

/* ==================== HERO / STARTUP INFO BOX (migrated) ==================== */
#hero { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 900; }
#hero.hidden {
    display: none !important;
    visibility: hidden;
    pointer-events: none !important;
}
body.has-active-floating-window #hero,
body.has-active-floating-window #hero * {
    pointer-events: none !important;
}
#hero .hero-inner { text-align: center; padding: 22px 28px; backdrop-filter: blur(var(--glass-blur-md)); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border: 1px solid var(--glass-brd);
    box-shadow: var(--shadow); max-width: 760px; max-height: 85vh; overflow-y: auto; margin: 0 16px;
}
#hero .hero-inner { pointer-events: auto; }
#hero .cta { pointer-events: auto; }
#hero h1 { font-size: clamp(28px, 4vw, 48px); margin: 0 0 10px; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
#hero p { opacity: .86; margin: 0 0 18px; }
#hero .cta { display:flex; gap:10px; justify-content:center; flex-wrap: wrap; }
#hero .cta button { background: linear-gradient(180deg, rgba(121,211,255,.25), rgba(156,123,255,.2)); border: 1px solid rgba(255,255,255,.22);
    color: var(--txt); padding: 10px 14px; border-radius: 10px; cursor:pointer; }
#hero .cta button:hover { filter: brightness(1.1); }
@media (max-width: 900px){ #hero { align-content: start; padding-top: 140px; } }

/* What's New mini section in Hero */
#hero .whats-new {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid var(--glass-brd);
    color: var(--txt);
    text-align: left;
}
#hero .whats-new .wn-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
#hero .whats-new .wn-hide {
    font: inherit; color: var(--txt);
    background: var(--glass-bg-light);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer;
}
#hero .whats-new .wn-hide:hover { background: rgba(255,255,255,0.10); }
#hero .whats-new .wn-list { margin: 0; padding-left: 18px; }
#hero .whats-new .wn-list li { margin: 2px 0; }

/* ==================== RELEASE HISTORY (What's New) ==================== */
.wn-history { margin-top: 12px; }
.wn-history > summary { cursor: pointer; font-weight: 600; list-style: none; }
.wn-history[open] > summary { color: var(--acc); }
.wn-history-inner { margin-top: 8px; max-height: 480px; overflow-y: auto; padding-right:8px; }
.wn-rel { border:1px solid var(--glass-brd); border-radius:6px; padding:8px 10px; margin-bottom:10px; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); }
.wn-rel.current { border-color: var(--acc); box-shadow:0 0 0 1px color-mix(in oklab, var(--acc) 65%, transparent); }
.wn-rel h4 { margin:0 0 4px; font-size:13px; display:flex; gap:8px; align-items:center; }
.wn-rel h4 .ver { font-weight:700; }
.wn-rel h4 .date { font-weight:400; opacity:.75; }
.wn-rel h4 .days { font-weight:400; font-size:11px; background:rgba(255,255,255,0.1); padding:2px 6px; border-radius:12px; }
.wn-rel ul { margin:0 0 6px 18px; padding:0; }
.wn-rel ul li { margin:2px 0; }
.wn-rel .md { font-size:12px; line-height:1.4; margin-top:4px; }
.wn-rel .md h3 { font-size:12px; margin:6px 0 4px; }
.wn-rel .md code { background:rgba(0,0,0,0.35); padding:1px 4px; border-radius:4px; font-family: var(--font-mono, monospace); font-size:11px; }
.wn-rel .md strong { font-weight:600; }
.wn-rel .badge-new { background:#ff3b30; color:#fff; font-size:10px; padding:2px 6px; border-radius:10px; }

/* ==================== AI SUGGESTIONS UI ==================== */
.ai-suggestions-btn {
    border-color: rgba(156, 39, 176, 0.7) !important;
    background: linear-gradient(180deg, rgba(186, 104, 200, 0.55) 0%, rgba(156, 39, 176, 0.40) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 0 rgba(0, 0, 0, 0.25),
        0 6px 12px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.ai-suggestions-btn:hover {
    background: linear-gradient(180deg, rgba(186, 104, 200, 0.65) 0%, rgba(156, 39, 176, 0.50) 100%) !important;
}

.ai-suggestions-btn:active {
    box-shadow:
        inset 0 2px 0 rgba(0, 0, 0, 0.18),
        0 2px 0 rgba(0, 0, 0, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.22);
}

.ai-suggestions-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-suggestions-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.ai-suggestions-modal.hidden { display: none; }




/* ==================== THEME-SPECIFIC UI ELEMENT STYLES ==================== */

/* Glassmorphism for app windows (override late component CSS) */
.base-window,
.chat-window,
.entity-table-window,
#color-wheel-container,
#audio-controls {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
    border: 1px solid var(--glass-brd) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(var(--glass-blur-md));
    box-shadow: var(--shadow);
        transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Window Fullscreen Mode (CSS-based, not Browser Fullscreen API) */
.window-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: var(--z-max);
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    resize: none !important; /* Disable resize in fullscreen mode */
}

/* Theme-specific variants for quick visual difference */
body[data-theme="dark"] .app-topbar {
    background: linear-gradient(180deg, rgba(10,10,20,0.72), rgba(10,10,20,0.48));
    border-color: rgba(255,255,255,0.12);
}
body[data-theme="dark"] .base-window,
body[data-theme="dark"] .chat-window,
body[data-theme="dark"] .entity-table-window,
body[data-theme="dark"] #color-wheel-container,
body[data-theme="dark"] #audio-controls {
    background: linear-gradient(180deg, rgba(15,16,28,0.72), rgba(15,16,28,0.45)) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
/* body[data-theme="dark"] .brain-header,
body[data-theme="dark"] .chat-header,
body[data-theme="dark"] .entity-table-header,
body[data-theme="dark"] #color-wheel-header {
    background: linear-gradient(180deg, rgba(100, 116, 255, 0.18), rgba(99, 102, 241, 0.08)) !important;
    border-bottom-color: rgba(255,255,255,0.12) !important;
} */
body[data-theme="dark"] #hero .hero-inner {
    background: linear-gradient(180deg, rgba(15,16,28,0.72), rgba(15,16,28,0.45));
}
/* Neon & Solar share darker glass base with accent tint */
body[data-theme="neon"] .app-topbar,
body[data-theme="solar"] .app-topbar {
    background: linear-gradient(180deg, rgba(10,10,20,0.72), rgba(10,10,20,0.48));
    border-color: rgba(255,255,255,0.14);
}
body[data-theme="neon"] .base-window,
body[data-theme="neon"] .chat-window,
body[data-theme="neon"] .entity-table-window,
body[data-theme="neon"] #color-wheel-container,
body[data-theme="neon"] #audio-controls,
body[data-theme="solar"] .base-window,
body[data-theme="solar"] .chat-window,
body[data-theme="solar"] .entity-table-window,
body[data-theme="solar"] #color-wheel-container,
body[data-theme="solar"] #audio-controls {
    background: linear-gradient(180deg, rgba(20,10,30,0.75), rgba(20,10,30,0.5)) !important;
    border-color: rgba(255,255,255,0.14) !important;
}
body[data-theme="neon"] .brain-header,
body[data-theme="neon"] .chat-header,
body[data-theme="neon"] .entity-table-header,
body[data-theme="neon"] #color-wheel-header,
body[data-theme="solar"] .brain-header,
body[data-theme="solar"] .chat-header,
body[data-theme="solar"] .entity-table-header,
body[data-theme="solar"] #color-wheel-header {
    background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 22%, transparent), rgba(0,0,0,0.06)) !important;
    border-bottom-color: rgba(255,255,255,0.14) !important;
}
body[data-theme="neon"] #hero .hero-inner,
body[data-theme="solar"] #hero .hero-inner {
    background: linear-gradient(180deg, rgba(20,10,30,0.75), rgba(20,10,30,0.5));
}

/* ==================== KNOWLEDGE CHALLENGER THEME SUPPORT ==================== */
body[data-theme="dark"] #knowledge-challenger-window {
    background: linear-gradient(180deg, rgba(15,16,28,0.92), rgba(10,12,22,0.88)) !important;
    border-color: rgba(var(--color-primary-rgb), 0.3) !important;
}
body[data-theme="dark"] #knowledge-challenger-window .kc-header {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.12), rgba(2, 132, 199, 0.06)) !important;
}
body[data-theme="neon"] #knowledge-challenger-window,
body[data-theme="solar"] #knowledge-challenger-window {
    background: linear-gradient(180deg, rgba(20,10,30,0.92), rgba(15,8,25,0.88)) !important;
    border-color: rgba(var(--color-primary-rgb), 0.35) !important;
}
body[data-theme="neon"] #knowledge-challenger-window .kc-header,
body[data-theme="solar"] #knowledge-challenger-window .kc-header {
    background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 18%, transparent), rgba(0,0,0,0.06)) !important;
}

/* ==================== HERO / STARTUP INFO BOX ==================== */

/* Hero - Startup Info Box "Your AI Universe" */
#hero { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 900; }
#hero .hero-inner { text-align: center; padding: 22px 28px; backdrop-filter: blur(var(--glass-blur-md)); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border: 1px solid var(--glass-brd);
    box-shadow: var(--shadow); max-width: 760px; max-height: 85vh; overflow-y: auto; margin: 0 16px;
}
#hero .hero-inner { pointer-events: auto; }
#hero .cta { pointer-events: auto; }
#hero h1 { font-size: clamp(28px, 4vw, 48px); margin: 0 0 10px; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
#hero p { opacity: .86; margin: 0 0 18px; }
#hero .cta { display:flex; gap:10px; justify-content:center; flex-wrap: wrap; }
#hero .cta button { background: linear-gradient(180deg, rgba(121,211,255,.25), rgba(156,123,255,.2)); border: 1px solid rgba(255,255,255,.22);
    color: var(--txt); padding: 10px 14px; border-radius: 10px; cursor:pointer; }
#hero .cta button:hover { filter: brightness(1.1); }
@media (max-width: 900px){ #hero { align-content: start; padding-top: 140px; } }

/* What's New mini section in Hero - Version History */
#hero .whats-new {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid var(--glass-brd);
    color: var(--txt);
    text-align: left;
}
#hero .whats-new .wn-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 6px;
}
#hero .whats-new .wn-hide {
    font: inherit; color: var(--txt);
    background: var(--glass-bg-light);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer;
}
#hero .whats-new .wn-hide:hover { background: rgba(255,255,255,0.10); }
#hero .whats-new .wn-list { margin: 0; padding-left: 18px; }
#hero .whats-new .wn-list li { margin: 2px 0; }

/* Micro interactions */
button:active { transform: translateY(1px); }

/* ==================== COLLAPSIBLE RELEASE HISTORY ==================== */

/* Collapsible Release Cards */
.wn-rel { position:relative; }
.wn-rel h4 { cursor:pointer; }
.wn-rel h4 .arrow { width:10px; height:10px; display:inline-block; position:relative; margin-right:4px; }
.wn-rel h4 .arrow::before, .wn-rel h4 .arrow::after { content:""; position:absolute; inset:0; transform-origin:50% 50%; }
.wn-rel h4 .arrow::before { border:5px solid transparent; border-top-color:var(--acc); top:2px; left:0; transition: transform .25s ease; }
.wn-rel.collapsed h4 .arrow::before { transform:rotate(-90deg); }
.wn-rel .rel-body { overflow:hidden; transition: grid-template-rows .35s ease, opacity .35s ease; display:grid; grid-template-rows:1fr; }
.wn-rel.collapsed .rel-body { grid-template-rows:0fr; opacity:.25; }
.wn-rel .rel-body-inner { min-height:0; }
.wn-rel.collapsed { background:rgba(0,0,0,0.18); }
.wn-rel.collapsed h4 { opacity:.85; }
.wn-rel h4:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }

/* Tag Pills */
.tag-pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 6px 3px; border-radius:10px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }
.tag-hl { background:linear-gradient(90deg,#1e3856,#274d74); color:#9ad5ff; box-shadow:0 0 0 1px rgba(154,213,255,0.25); }
.tag-chg { background: var(--glass-bg-light); color:rgba(255,255,255,0.65); box-shadow:0 0 0 1px rgba(255,255,255,0.15); }

/* Current panel highlight list items already styled: refine marker */
.wn-list li.wn-hl { position:relative; padding-left:0; margin:4px 0 6px; list-style:disc; font-size:12.5px; font-weight:600; }
.wn-list li.wn-hl::before { display:none; }

/* Minor changes list items (history) */
.wn-rel ul li.wn-chg { list-style: circle; font-size:11px; opacity:.65; margin:2px 0 2px 18px; }
.wn-rel ul li.wn-chg strong { font-weight:500; }

/* Attach tags row inside each release card */
.wn-rel .tag-row { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; }

/* Distinguish highlight vs minor lists grouping */
.wn-rel ul.hl-list { margin-top:4px; }
.wn-rel ul.chg-list { margin-top:2px; }

/* ========== Migrated from legacy styles.css: Additional Table Controls & Tags ========== */
/* Mark edited numeric cells (Importance/Confidentiality) */
.entity-table td.value-col.changed {
    position: relative;
    box-shadow: inset 0 0 0 2px rgba(255, 214, 0, 0.65);
}
.entity-table td.value-col.changed::after {
    content: '•';
    position: absolute;
    top: 4px;
    right: 6px;
    color: #ffd600;
    font-size: 14px;
    opacity: 0.95;
}
.entity-table td.value-col.changed input[type="number"] {
    border-color: rgba(255, 214, 0, 0.85) !important;
    box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.25);
}

/* Larger entity name font */
.entity-table td.name-col {
    font-size: 1.12rem;
    font-weight: 600;
}

/* Uniform headers for windows - Migrated to window-header-unified.css */
/* .brain-header,
.chat-header,
.entity-table-header,
#color-wheel-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    cursor: move;
    user-select: none;
} */

/* Focus ring */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--radius-md); }

/* Tag Pills (refined) */
.tag-pill { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 6px 3px; border-radius:10px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }
.tag-hl { background:linear-gradient(90deg,#1e3856,#274d74); color:#9ad5ff; box-shadow:0 0 0 1px rgba(154,213,255,0.25); }
.tag-chg { background: var(--glass-bg-light); color:rgba(255,255,255,0.65); box-shadow:0 0 0 1px rgba(255,255,255,0.15); }

/* News badge indicator and category badges */
.wn-rel .badge-new { background:#ff3b30; color:#fff; font-size:10px; padding:2px 6px; border-radius:10px; }
.cat-badge { display:inline-block; font-size:9px; line-height:1; padding:3px 6px 4px; border-radius:8px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background: var(--glass-bg-light); color:rgba(255,255,255,0.7); box-shadow:0 0 0 1px rgba(255,255,255,0.12); }
.cat-nf .cat-badge { background:linear-gradient(90deg,#1e3c72,#2a5298); color:#b9dcff; box-shadow:0 0 0 1px rgba(120,180,255,0.35); }
.cat-fix .cat-badge { background:linear-gradient(90deg,#5a1d1d,#932828); color:#ffc9c9; box-shadow:0 0 0 1px rgba(255,120,120,0.35); }
.cat-ux .cat-badge { background:linear-gradient(90deg,#3b2f13,#a6781c); color:#ffe7b0; box-shadow:0 0 0 1px rgba(255,200,120,0.3); }
.cat-imp .cat-badge { background:linear-gradient(90deg,#123524,#1e7c4a); color:#b4ffd6; box-shadow:0 0 0 1px rgba(120,255,180,0.35); }
.cat-perf .cat-badge { background:linear-gradient(90deg,#102b3d,#165875); color:#b2edff; box-shadow:0 0 0 1px rgba(100,210,255,0.35); }
.cat-sec .cat-badge { background:linear-gradient(90deg,#222844,#3b4d89); color:#c2d8ff; box-shadow:0 0 0 1px rgba(140,180,255,0.35); }
.cat-ref .cat-badge { background:linear-gradient(90deg,#2e2e2e,#555); color:#e0e0e0; box-shadow:0 0 0 1px rgba(180,180,180,0.3); }
.cat-dep .cat-badge { background:linear-gradient(90deg,#3a2a18,#6a5334); color:#f5d9b4; box-shadow:0 0 0 1px rgba(230,190,120,0.35); }
.cat-rem .cat-badge { background:linear-gradient(90deg,#401a2a,#7a2f4d); color:#ffc0dd; box-shadow:0 0 0 1px rgba(255,140,200,0.35); }
.cat-docs .cat-badge { background:linear-gradient(90deg,#1e3a3a,#2d6d6d); color:#b9f7f7; box-shadow:0 0 0 1px rgba(140,230,230,0.35); }
.cat-badge { margin-left:2px; }

/* End of migrated blocks */

/* ========== Migrated from legacy styles.css: AI Suggestion Cards & Buttons ========== */
.ai-suggestion-card {
    background: linear-gradient(135deg, rgba(186, 104, 200, 0.08), rgba(156, 39, 176, 0.05));
    border: 1px solid rgba(186, 104, 200, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.ai-suggestion-card:hover {
    border-color: rgba(186, 104, 200, 0.5);
    box-shadow: 0 4px 16px rgba(186, 104, 200, 0.2);
    transform: translateY(-2px);
}

.ai-suggestion-card.unselected {
    opacity: 0.4;
    background: rgba(100, 100, 100, 0.1);
    border-color: var(--glass-border);
}

/* Card Header */
.ai-card-header { display:flex; align-items:center; gap:1rem; margin-bottom:0.75rem; }
.ai-card-checkbox { width:20px; height:20px; cursor:pointer; accent-color: #ba68c8; }
.ai-card-title { flex:1; margin:0; font-size:1.15rem; font-weight:600; color:#fff; }
.ai-card-badges { display:flex; gap:0.5rem; }
.ai-card-importance, .ai-card-confidentiality { padding:0.25rem 0.75rem; border-radius:6px; font-size:0.9rem; font-weight:600; }
.ai-card-importance.importance-high { background: rgba(76, 175, 80, 0.2); color: #81c784; }
.ai-card-importance.importance-medium { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }
.ai-card-importance.importance-low { background: rgba(158, 158, 158, 0.2); color: #bdbdbd; }
.ai-card-confidentiality.confidentiality-high { background: rgba(244, 67, 54, 0.2); color: #ef5350; }
.ai-card-confidentiality.confidentiality-medium { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }
.ai-card-confidentiality.confidentiality-low { background: rgba(100, 181, 246, 0.2); color: #64b5f6; }

/* Card Meta */
.ai-card-meta { display:flex; gap:1rem; margin-bottom:0.75rem; font-size:0.9rem; opacity:0.8; }
.ai-card-level { color: #64b5f6; }
.ai-card-parent { color: #ba68c8; }

/* Card Description */
.ai-card-description { margin:0 0 0.75rem 0; line-height:1.5; color: rgba(255,255,255,0.9); }

/* Card Reasoning */
.ai-card-reasoning { padding:0.75rem; background: rgba(0,0,0,0.3); border-left: 3px solid rgba(186,104,200,0.5); border-radius:6px; font-size:0.9rem; line-height:1.5; margin-bottom:0.75rem; }
.ai-card-reasoning strong { color: var(--acc); }

/* Card Tags */
.ai-card-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
.ai-tag { padding:0.25rem 0.75rem; background: rgba(100,181,246,0.15); border:1px solid rgba(100,181,246,0.3); border-radius:6px; font-size:0.85rem; color:#64b5f6; }

/* Modal Footer */
.ai-modal-footer { display:flex; gap:1rem; justify-content:flex-end; padding:1.5rem 2rem; border-top:1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); }

.ai-btn { padding:0.75rem 2rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; transition: all 0.2s ease; border:1px solid transparent; }
.ai-btn-secondary { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color:#fff; }
.ai-btn-secondary:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
.ai-btn-primary { background: linear-gradient(135deg, #ba68c8, #9c27b0); border-color: rgba(186,104,200,0.5); color:#fff; box-shadow: 0 4px 12px rgba(156,39,176,0.3); }
.ai-btn-primary:hover { background: linear-gradient(135deg, #ce93d8, #ba68c8); box-shadow: 0 6px 16px rgba(156,39,176,0.4); transform: translateY(-2px); }
.ai-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* End of AI Cards Migration */

/* ========== Migrated from legacy styles.css: Toasts & Readonly indicators ========== */
.entity-row-base:hover { background: rgba(121, 211, 255, 0.08) !important; }
.entity-row-user { background: rgba(156, 123, 255, 0.05) !important; border-left: 3px solid rgba(156, 123, 255, 0.4); }
.entity-row-user:hover { background: rgba(156, 123, 255, 0.08) !important; }

.field-readonly { opacity: 0.6; cursor: not-allowed !important; position: relative; }
.field-readonly::after { content: "🔒"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.75em; opacity: 0.5; }

.protection-warning { position: fixed; top: 20px; right: 20px; background: rgba(255, 100, 100, 0.95); color: white; padding: 1rem 1.5rem; border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: var(--z-dropdown); animation: slideInRight 0.3s ease; }

@keyframes slideInRight { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }

/* End migrated toast/readonly */

/* ===== Additional migrated controls (tooltips, profiling, health) ===== */
/* Tooltips for Close and Fullscreen Buttons (from legacy styles.css) */
.close-btn {
    position: relative;
}

.close-btn:hover::after {
    content: "Close";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

.fullscreen-btn {
    position: relative;
}

.fullscreen-btn:hover::after {
    content: "Fullscreen";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

/* Profiling window (compact variant used in dev view) */
#profiling-window {
    position: absolute;
    left: 1470px;
    top: 810px;
    width: 180px;
    height: 150px;
    padding: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid var(--glass-brd);
    border-radius: 14px;
    color: white;
    font-family: inherit;
    font-size: 8px;
    z-index: var(--z-dropdown);
    cursor: default;
    resize: both;
    min-width: 180px;
    min-height: 150px;
    max-width: 75vw;
    max-height: 75vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(var(--glass-blur-md));
    box-shadow: var(--shadow);
}

#profiling-window .brain-content {
    padding: 6px !important;
    overflow: auto;
}

#profiling-window .holo-button {
    font-size: 10px;
    padding: 4px 6px;
}

#profiling-window .holo-button { gap: var(--spacing-xs) !important; }
#profiling-window .holo-button svg { width: 16px; height: 16px; }

#profiling-window .brain-header { min-height: 34px; }

/* Health indicator dot for server status */
.health-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    background: #888; /* unknown */
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.health-ok { background: #1fd45e !important; box-shadow: 0 0 8px rgba(31, 212, 94, 0.9); }
.health-bad { background: #e04a42 !important; box-shadow: 0 0 8px rgba(224, 74, 66, 0.9); }

/* Editable Your Data cells in Entity Table (migrated) */
.entity-table th.userdata-col::after {
    content: ' ✎';
    opacity: 0.7;
    font-size: 0.9em;
}

.entity-table td.userdata-col .userdata-input {
    background: rgba(41, 182, 246, 0.08);
    border: 1px dashed rgba(41, 182, 246, 0.45);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    min-height: 24px;
    cursor: text;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.entity-table td.userdata-col .userdata-input:hover {
    background: rgba(41, 182, 246, 0.12);
    border-color: rgba(41, 182, 246, 0.65);
}

.entity-table td.userdata-col .userdata-input:focus {
    background: rgba(41, 182, 246, 0.16);
    border-color: #29b6f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(41, 182, 246, 0.25);
}

.entity-table td.userdata-col .userdata-input.changed {
    background: rgba(255, 214, 0, 0.18);
    border-color: rgba(255, 214, 0, 0.6);
}

/* End additional migrated controls */

/* ==================== TOPBAR BUTTON IMPROVEMENTS ==================== */

/* Base styling for topbar icon buttons */
.app-topbar .voice-icon-btn {
    position: relative;
    transition: all 0.25s ease;
    border-radius: 10px;
}

/* Hover effect - subtle glow */
.app-topbar .voice-icon-btn:hover {
    background: rgba(121, 211, 255, 0.1) !important;
    transform: translateY(-2px);
}

.app-topbar .voice-icon-btn:hover .voice-control-icon {
    filter: drop-shadow(0 0 8px rgba(121, 211, 255, 0.6)) !important;
}

/* Active state - window is open (Modern Neural Design 2026) */
.app-topbar .voice-icon-btn.active {
    background: rgba(121, 211, 255, 0.08) !important;
    border: 1px solid rgba(121, 211, 255, 0.2) !important;
    box-shadow:
        0 0 15px rgba(121, 211, 255, 0.1),
        inset 0 0 10px rgba(121, 211, 255, 0.05) !important;
    transform: translateY(-1px);
}

/* The Neural Thread Indicator - Small glowing bar at bottom */
.app-topbar .voice-icon-btn.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #79d3ff;
    border-radius: var(--radius-xs);
    box-shadow: 0 0 10px #79d3ff, 0 0 20px rgba(121, 211, 255, 0.5);
    animation: neural-thread-pulse 2s ease-in-out infinite;
}

@keyframes neural-thread-pulse {
    0%, 100% { opacity: 0.6; width: 20px; filter: blur(0.5px); }
    50% { opacity: 1; width: 28px; filter: blur(0px); }
}

.app-topbar .voice-icon-btn.active .voice-control-icon {
    filter: drop-shadow(0 0 12px rgba(121, 211, 255, 0.45)) !important;
    transform: scale(1.05);
}

/* Active + Hover */
.app-topbar .voice-icon-btn.active:hover {
    background: rgba(121, 211, 255, 0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(121, 211, 255, 0.2) !important;
}

/* Overrides for status synchronization colors */
.app-topbar .voice-icon-btn.active[data-group="tools"] { background: rgba(80, 200, 120, 0.08) !important; border-color: rgba(80, 200, 120, 0.3) !important; }
.app-topbar .voice-icon-btn.active[data-group="tools"]::after { background: #50c878; box-shadow: 0 0 10px #50c878; }

.app-topbar .voice-icon-btn.active[data-group="settings"] { background: rgba(168, 85, 247, 0.08) !important; border-color: rgba(168, 85, 247, 0.3) !important; }
.app-topbar .voice-icon-btn.active[data-group="settings"]::after { background: #a855f7; box-shadow: 0 0 10px #a855f7; }

/* Pulse animation for active buttons - removed in favor of Neural Thread */

/* Consistent icon sizing */
.app-topbar .voice-control-icon {
    width: 48px !important;
    height: 48px !important;
    transition: filter 0.25s ease, transform 0.25s ease;
}

/* ==================== UNIFIED WINDOW HEADER ==================== */

/* Base window header styling - applies to all windows */
.brain-header,
.scenery-settings-header,
.audio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(25, 30, 45, 0.95), rgba(20, 25, 38, 0.9));
    border-bottom: 1px solid rgba(121, 211, 255, 0.2);
    font-weight: 600;
    font-size: 13px;
    color: #e8ecf1;
    cursor: move;
    user-select: none;
    border-radius: var(--radius-lg) 12px 0 0;
    flex-shrink: 0;
    min-height: 38px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

/* Header hover effect */
.brain-header:hover,
.scenery-settings-header:hover,
.audio-header:hover {
    background: linear-gradient(180deg, rgba(30, 35, 50, 0.95), rgba(25, 30, 43, 0.9));
    border-bottom-color: rgba(121, 211, 255, 0.35);
}

/* Header title styling */
.brain-header .header-title,
.scenery-settings-header .header-title,
.audio-header .header-title {
    flex: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: left;
    padding-left: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Header controls container */
.brain-header .controls,
.scenery-settings-header .controls,
.audio-header .controls {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

/* Unified close/fullscreen button styling */
.brain-header .close-btn,
.brain-header .fullscreen-btn,
.scenery-settings-header .close-btn,
.audio-header .close-btn {
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.brain-header .close-btn:hover,
.scenery-settings-header .close-btn:hover,
.audio-header .close-btn:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff6b6b;
    transform: scale(1.05);
}

.brain-header .fullscreen-btn:hover {
    background: rgba(121, 211, 255, 0.15);
    border-color: rgba(121, 211, 255, 0.35);
    color: #79d3ff;
    transform: scale(1.05);
}

/* Fullscreen mode header adjustment */
.base-window.fullscreen .brain-header {
    border-radius: 0;
}

/* Theme-aware header colors */
body[data-theme="neon"] .brain-header,
body[data-theme="neon"] .scenery-settings-header {
    background: linear-gradient(180deg, rgba(30, 15, 45, 0.95), rgba(25, 12, 38, 0.9));
    border-bottom-color: rgba(255, 100, 255, 0.25);
}

body[data-theme="solar"] .brain-header,
body[data-theme="solar"] .scenery-settings-header {
    background: linear-gradient(180deg, rgba(45, 30, 15, 0.95), rgba(38, 25, 12, 0.9));
    border-bottom-color: rgba(255, 180, 100, 0.25);
}

/* XP FLOAT ANIMATION */
.xp-float {
    position: fixed;
    z-index: var(--z-max);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: xpFloatUp 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.xp-val {
    font-family: var(--font-sans, sans-serif);
    font-size: 24px;
    font-weight: 800;
    color: #ffcc00;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5);
}

.xp-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    margin-top: 4px;
}

@keyframes xpFloatUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -40px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -120px) scale(0.9);
    }
}



/* ============================================================================
   UNIFIED FORM ELEMENTS (System Design 2026)
   ============================================================================ */

select,
option,
input[type="text"],
input[type="number"],
input[type="search"],
textarea {
    background: rgba(15, 20, 35, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: #fff;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px; /* Reset to 14px */
    outline: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(var(--glass-blur-md));
}

select:hover,
input:hover,
textarea:hover {
    border-color: rgba(121, 211, 255, 0.4);
    background: rgba(25, 30, 50, 0.8);
}

select:focus,
input:focus,
textarea:focus {
    border-color: #79d3ff;
    box-shadow: 0 0 0 3px rgba(121, 211, 255, 0.2);
    background: rgba(30, 40, 60, 0.9);
}

option {
    background: #1a1e2e;
    color: #fff;
    padding: 10px;
}

/* Custom Select Arrow Styling where possible */
select {
    cursor: pointer;
    appearance: none;
    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='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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;
    padding-right: 35px;
}










/* Global Fix for 45-degree hover artifacts */
.app-topbar button:hover::before, .app-topbar button:hover::after { display: none !important; }
.app-topbar .voice-icon-btn:hover { background: rgba(255, 255, 255, 0.15) !important; transform: translateY(-2.5px) !important; }