:root {
    /* ألوان الجامعة الرئيسية */
    --uod-blue: #3a6bc9;
    --uod-dark-blue: #1e3c8c;
    --uod-gold: rgb(212, 175, 54);
    --uod-light-gold: #FFD700;
    --uod-white: #FFFFFF;
    --uod-off-white: #F5F5F5;
    --uod-light-blue: #e8f0fe;
    --uod-light-gray: #f8fafc;
    --text-dim: rgba(156, 163, 175, 1);
    
    /* ألوان إضافية */
    --primary: #0056A6;
    --secondary: #F2B705;
    --accent: #2E8B57;
    --light: #F8FAFC;
    --dark: #1E3A8A;
    --text: #334155;
    --border: #E2E8F0;
    --font-white: #FFFFFF;
    --after-border: linear-gradient(to left, var(--primary), var(--secondary));
    --after-border-ltr: linear-gradient(to right, var(--primary), var(--secondary));
    --tw-text: rgba(156, 163, 175, 1);
     --navy: #0a1628;
    --deep-blue: rgb(13, 32, 69);
    --gold: #c9a227;
    --gold-light: #e8c547;
    --white: #ffffff;
    --cream: #f5f0e8;

    --gold:       #b8922a;
    --gold-lt:    #d4a93a;
    --gold-dim:   rgba(184,146,42,0.10);
    --gold-line:  rgba(184,146,42,0.28);
    --white:      #ffffff;
    --off-white:  #f5f7fc;
    --muted:      #6b7fa3;
    --border-ser:     rgba(11,25,49,0.09);

    --navy:      rgb(11, 25, 49);
    --navy-2:    #0f2040;
    --navy-3:    #162b52;
    --gold:      rgb(201, 162, 39);
    --gold-lt:   #e4bc45;
    --gold-dim:  rgba(201,162,39,0.12);
    --gold-line: rgba(201,162,39,0.30);
    --white:     #ffffff;
    --bg:        #0b1931;
    --bg-2:      #0f2040;
    --bg-3:      #081428;
    --muted:     #7a90b8;
    --border2:    rgba(255,255,255,0.07);
    --text:      #e8edf7;
    --card:      #0f2040;

    /* Journal specialty colors */
    --med-primary:   #1a6fa0;
    --med-light:     rgba(26,111,160,0.08);
    --med-line:      rgba(26,111,160,0.25);

    --sci-primary:   #1a7a4a;
    --sci-light:     rgba(26,122,74,0.08);
    --sci-line:      rgba(26,122,74,0.25);

    --hum-primary:   #6b3fa0;
    --hum-light:     rgba(107,63,160,0.08);
    --hum-line:      rgba(107,63,160,0.25);
}
.glow { 
    position: fixed; 
    pointer-events: none; 
    border-radius: 50%; 
}
.glow-1 { 
    top: -10%; 
    right: -10%; 
    width: 600px; 
    height: 600px; 
    background: radial-gradient(circle, rgba(201,162,39,0.04) 0%, transparent 68%); 
}
.glow-2 { 
    bottom: 0; 
    left: -10%; 
    width: 400px; 
    height: 400px; 
    background: radial-gradient(circle, rgba(24,95,165,0.06) 0%, transparent 70%); 
}


/* CONTROLS */
.controls {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 50px;
    border-bottom: 1px solid var(--border);
    background: var(--navy-2);
    flex-wrap: wrap;
}
.ctrl-btn {
    background: var(--navy); 
    border: 1px solid var(--border);
    color: var(--text); 
    font-size: 12px; 
    padding: 7px 16px; 
    border-radius: 2px;
    cursor: pointer; 
    transition: all 0.2s; 
    display: flex; 
    align-items: center; 
    gap: 6px;
}
.ctrl-btn:hover { 
    border-color: var(--gold-b); 
    color: var(--gold); 
}
.ctrl-btn svg { 
    width: 14px; 
    height: 14px; 
}
.ctrl-sep { 
    width: 1px; 
    height: 24px; 
    background: var(--border); 
}
.zoom-display {
    font-size: 12px; 
    color: var(--text-dim); 
    min-width: 44px; 
    text-align: center;
    font-family: 'Cormorant Garamond', serif; 
    font-size: 14px; 
    letter-spacing: 1px; 
    direction: ltr;
}

/* LEGEND */
.legend {
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-right: auto; 
    flex-wrap: wrap;
}
.leg-item { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 11px; 
    color: var(--text-dim);
 }
.leg-dot { 
    width: 8px;
    height: 8px; 
    border-radius: 2px; 
    flex-shrink: 0; 
}

/* CANVAS */
.canvas-wrap {
    flex: 1; 
    position: relative; 
    cursor: grab;
    background: linear-gradient(135deg, var(--navy) 0%, var(--uod-dark-blue) 100%);
    min-height: 100vh;
}
.canvas-wrap:active { 
    cursor: grabbing;
}

svg#tree {
    width: 100%; 
    min-height: calc(100vh - 100px);
    height: 100%;
    display: block;
}

/* NODE STYLES IN SVG */
.n0 rect { fill: #c9a227; rx: 2; }
.n0 text { fill: #080c14; font-weight: 900; font-size: 15px; }

.n1 rect { fill: #185FA5; }
.n1 text { fill: #fff; font-weight: 800; font-size: 14px; }

.n2 rect { fill: #0e1c28; stroke: #0F6E56; stroke-width: 1.5; }
.n2-top { fill: #0F6E56; }
.n2 text { fill: rgba(255,255,255,0.9); font-weight: 700; font-size: 12px; }

.n3 rect { fill: #0e1420; stroke: rgba(255,255,255,0.1); stroke-width: 1; }
.n3-top { fill: #c9a227; }
.n3 text { fill: rgba(255,255,255,0.75); font-weight: 700; font-size: 11px; }

.n4 rect { fill: rgba(14,20,32,0.9); stroke: rgba(255,255,255,0.05); stroke-width: 0.5; }
.n4-bar { fill: rgba(201,162,39,0.35); }
.n4 text { fill: rgba(255,255,255,0.55); font-weight: 500; font-size: 10.5px; }

.node-g { cursor: pointer; transition: opacity 0.2s; }
.node-g:hover .n0 rect,
.node-g:hover .n1 rect,
.node-g:hover .n2 rect,
.node-g:hover .n3 rect,
.node-g:hover .n4 rect { opacity: 0.88; }
.node-g:hover text { fill: #fff !important; }

.conn { stroke: rgba(201,162,39,0.25); stroke-width: 1; fill: none; }

/* TOOLTIP */
#tooltip {
position: fixed; z-index: 200;
background: var(--navy); border: 1px solid var(--gold-b);
padding: 10px 16px; border-radius: 2px;
font-size: 13px; color: var(--white);
pointer-events: none; opacity: 0; transition: opacity 0.2s;
max-width: 260px; line-height: 1.6;
border-top: 2px solid var(--gold);
}