/* ZAIRJA ORNAMENTS (Procedural CSS Patterns) */

/* 1. MASHRABIYA PATTERN (Sidebar Background) */
#rack-panel {
    background-color: var(--panel);
    background-image: 
        radial-gradient(var(--gold) 1px, transparent 1px),
        radial-gradient(var(--gold) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    /* Overlay for softness */
    box-shadow: inset -10px 0 20px rgba(212, 106, 67, 0.05);
}

/* 2. ZELLIGE BORDER (Top of Editor & Bottom of Rack) */
#editor-panel, .brand {
    position: relative;
}
#editor-panel::before, .brand::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background: repeating-linear-gradient(
        45deg,
        var(--cyan),
        var(--cyan) 10px,
        var(--panel) 10px,
        var(--panel) 20px,
        var(--gold) 20px,
        var(--gold) 30px,
        var(--panel) 30px,
        var(--panel) 40px
    );
    opacity: 0.6;
}
#editor-panel::before { top: 0; border-bottom: 1px solid var(--gold); }
.brand::after { bottom: 0; height: 4px; }

/* 3. FILIGREE BUTTONS (Intricate Corners) */
.global-btn, .editor-tools button {
    position: relative;
    border: 1px solid rgba(212, 106, 67, 0.3);
    background: linear-gradient(to bottom, #fff, #f9f4f0);
}
/* Corner Accents */
.global-btn::after {
    content: "";
    position: absolute;
    top: 2px; right: 2px; bottom: 2px; left: 2px;
    border: 1px dashed rgba(59, 138, 138, 0.3);
    pointer-events: none;
}

/* 4. FLOWER OF LIFE (Subtle texture for Headers) */
.rack-header, .editor-header {
    background-image: 
        radial-gradient(circle, rgba(212, 106, 67, 0.1) 2px, transparent 2.5px);
    background-size: 10px 10px;
}

/* 5. WOVEN FABRIC (Editor Background) */
#editor-panel {
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(212, 106, 67, 0.05) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(59, 138, 138, 0.05) 20px);
    background-size: 20px 20px;
}

/* 6. ORNATE SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { 
    background: #f2ede4; 
    border-left: 1px solid #d6cdc4;
}
::-webkit-scrollbar-thumb { 
    background-color: var(--gold);
    border-radius: 4px;
    border: 2px solid #f2ede4;
}

/* 7. TITLE GLOW (Rajasthan Sun) */
.brand {
    background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
}