/* Diamond Hard Liquid Theme */

[data-theme="diamond-liquid"] {
    /* Base Variables Override */
    --color-bg-dark: #05070a; /* Deepest space blue */
    --color-surface: rgba(10, 15, 25, 0.4);
    --color-card: rgba(255, 255, 255, 0.03);
    --color-border: rgba(255, 255, 255, 0.2);

    --color-text: #ffffff;
    --color-text-muted: #b0c4de;

    /* Hard diamond corners globally */
    --radius-sm: 0px;
    --radius-md: 2px;
    --radius-lg: 2px;

    /* Sharper shadows for glass */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.6);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.8), inset 0 2px 5px rgba(255, 255, 255, 0.7);

    --theme-accent: #00f3ff;
    --theme-accent-glow: rgba(0, 243, 255, 0.6);
}

/* Background */
[data-theme="diamond-liquid"] body {
    background: #020305;
    background-attachment: fixed;
    color: var(--color-text);
}

/* Animated Prism Rays Background */
@keyframes prism-rotate {
    0% { transform: rotate(0deg) scale(2); }
    100% { transform: rotate(360deg) scale(2); }
}

@keyframes liquid-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

[data-theme="diamond-liquid"] body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Flowing ROYGBIV liquid base */
    background: linear-gradient(
        60deg,
        rgba(255,0,0,0.03),
        rgba(255,165,0,0.03),
        rgba(255,255,0,0.03),
        rgba(0,128,0,0.03),
        rgba(0,0,255,0.03),
        rgba(75,0,130,0.03),
        rgba(238,130,238,0.03),
        rgba(255,0,0,0.03)
    );
    background-size: 300% 300%;
    animation: liquid-shift 25s ease-in-out infinite;
    z-index: -2;
    pointer-events: none;
}

[data-theme="diamond-liquid"] body::after {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Rotating sharp volumetric rays */
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255,255,255,0.03) 5deg,
        transparent 15deg,
        rgba(0,243,255,0.02) 40deg,
        transparent 60deg,
        rgba(255,0,255,0.02) 110deg,
        transparent 130deg,
        rgba(255,255,255,0.04) 180deg,
        transparent 195deg,
        rgba(255,255,0,0.01) 240deg,
        transparent 280deg,
        rgba(255,255,255,0.02) 320deg,
        transparent 335deg,
        transparent 360deg
    );
    animation: prism-rotate 120s linear infinite;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* "Diamond Hard Liquid" Cards & Modals
 * NOTE: target .modal-content (the visible card) — not .modal (the
 * fixed-position overlay wrapper). Applying these styles to .modal
 * itself breaks position:fixed and collapses modals into block flow. */
[data-theme="diamond-liquid"] .profile-card,
[data-theme="diamond-liquid"] .wr-panel,
[data-theme="diamond-liquid"] .pm-root,
[data-theme="diamond-liquid"] .modal-content,
[data-theme="diamond-liquid"] .node-panel,
[data-theme="diamond-liquid"] .card-body {
    background:
        /* Subtle interior ROYGBIV dispersion */
        linear-gradient(135deg, rgba(255,0,0,0.015), rgba(255,165,0,0.01), rgba(255,255,0,0.01), rgba(0,128,0,0.01), rgba(0,0,255,0.015), rgba(75,0,130,0.01), rgba(238,130,238,0.015)),
        /* Base frosted glass */
        linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(40px) saturate(220%) brightness(110%);
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(110%);

    /* Razor sharp borders */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.4);

    /* Refracted chromatic aberration inside the bevels */
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 1px 0 0 rgba(255, 255, 255, 0.5),
        /* Rainbow bottom/right bevel refraction */
        inset -1px -1px 1px rgba(255, 0, 0, 0.2),
        inset -2px -2px 2px rgba(255, 255, 0, 0.1),
        inset -3px -3px 3px rgba(0, 255, 255, 0.1),
        inset -4px -4px 4px rgba(238, 130, 238, 0.05);

    border-radius: 2px; /* Extremely sharp corners */
    position: relative;
    overflow: hidden; /* Contains inner glows */
}

/* Sharp inner highlight */
[data-theme="diamond-liquid"] .profile-card::after,
[data-theme="diamond-liquid"] .wr-panel::after,
[data-theme="diamond-liquid"] .modal-content::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.05), inset 0 0 2px rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

/* Tabs - Sharp & Crystalline */
[data-theme="diamond-liquid"] .tab {
    background: transparent;
    color: var(--color-text-muted);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0; /* Boxy tabs */
    border: 1px solid transparent;
}

[data-theme="diamond-liquid"] .tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    border-top: 1px solid rgba(255,255,255,0.3);
}

[data-theme="diamond-liquid"] .tab.active {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        /* Subtle red/blue chromatic shifts on active tab */
        inset -1px 0 0 rgba(255,0,0,0.2),
        inset 1px 0 0 rgba(0,255,255,0.2);
}

/* Buttons - Diamond facets */
[data-theme="diamond-liquid"] .btn,
[data-theme="diamond-liquid"] button {
    border-radius: 2px !important;
}

[data-theme="diamond-liquid"] .btn-primary {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        /* RGB inner rim */
        inset -1px -1px 1px rgba(255,0,0,0.3),
        inset -2px -2px 2px rgba(0,0,255,0.2);
    color: #fff;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9em;
}

[data-theme="diamond-liquid"] .btn-primary:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    transform: translateY(-1px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 1),
        0 0 20px var(--theme-accent-glow),
        inset -1px -1px 1px rgba(255,0,0,0.4),
        inset -2px -2px 2px rgba(0,0,255,0.3);
    border-color: var(--theme-accent);
}

[data-theme="diamond-liquid"] .btn-secondary {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    color: var(--color-text-muted);
}

[data-theme="diamond-liquid"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Inputs - Crisp Recessed Facets */
[data-theme="diamond-liquid"] .form-input,
[data-theme="diamond-liquid"] .form-select,
[data-theme="diamond-liquid"] textarea {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px !important;
    color: #fff;
    box-shadow:
        inset 0 4px 10px rgba(0,0,0,0.8),
        inset 0 1px 2px rgba(0,0,0,0.9);
    transition: all 0.3s ease;
}

[data-theme="diamond-liquid"] .form-input:focus,
[data-theme="diamond-liquid"] .form-select:focus,
[data-theme="diamond-liquid"] textarea:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255,255,255,0.2);
    border-bottom-color: var(--theme-accent);
    box-shadow:
        inset 0 4px 10px rgba(0,0,0,0.8),
        0 2px 15px var(--theme-accent-glow);
    outline: none;
}

/* Typography & Info Layout */
[data-theme="diamond-liquid"] .info-label {
    color: var(--theme-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
    opacity: 0.8;
    /* Subtle rainbow text shadow */
    text-shadow: 1px 1px 0 rgba(255,0,0,0.3), -1px -1px 0 rgba(0,255,255,0.3);
}

[data-theme="diamond-liquid"] .card-title {
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8), 0 0 10px rgba(255,255,255,0.2);
    font-weight: 300; /* Thinner, more elegant header font weight */
    letter-spacing: 0.5px;
}

[data-theme="diamond-liquid"] .card-icon svg {
    stroke: #fff;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) drop-shadow(1px 1px 2px rgba(255,0,0,0.5)) drop-shadow(-1px -1px 2px rgba(0,255,255,0.5));
}

[data-theme="diamond-liquid"] .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}