/* ==========================================
   DevTools Hub
   Dark Theme
========================================== */

body.dark{

    --background:#0b1220;

    --card:#111827;

    --text:#f9fafb;

    --text-secondary:#9ca3af;

    --border:#374151;

    --shadow-sm:0 1px 3px rgba(0,0,0,.45);

    --shadow-md:0 12px 30px rgba(0,0,0,.45);

}

/* ==========================================
   Body
========================================== */

body.dark{

    background:var(--background);

    color:var(--text);

}

/* ==========================================
   Navbar
========================================== */

body.dark .navbar{

    background:var(--card);

    border-bottom:1px solid var(--border);

}

body.dark nav a{

    color:var(--text-secondary);

}

body.dark nav a:hover{

    color:white;

}

body.dark .nav-right button:hover{

    background:#1f2937;

}

/* ==========================================
   Cards
========================================== */

body.dark .editor-card,
body.dark .upload-card{

    background:var(--card);

    border-color:var(--border);

    box-shadow:var(--shadow-sm);

}

body.dark .editor-header{

    border-bottom:1px solid var(--border);

}

body.dark .icon-btn:hover{

    background:#1f2937;

}

/* ==========================================
   Toolbar
========================================== */

body.dark .toolbar button{

    background:var(--card);

    color:var(--text);

    border:1px solid var(--border);

}

body.dark .toolbar button:hover{

    box-shadow:var(--shadow-md);

}

body.dark .toolbar .primary{

    background:var(--primary);

    color:white;

}

body.dark .toolbar .primary:hover{

    background:var(--primary-hover);

}

/* ==========================================
   Upload
========================================== */

body.dark .upload-card:hover{

    border-color:var(--primary);

}

/* ==========================================
   Footer
========================================== */

body.dark footer{

    border-top:1px solid var(--border);

}

body.dark .footer-links a{

    color:var(--text-secondary);

}

body.dark .footer-links a:hover{

    color:white;

}

/* ==========================================
   CodeMirror
========================================== */

body.dark .CodeMirror{

    background:#0f172a;

    color:#f8fafc;

}

body.dark .CodeMirror-gutters{

    background:#0f172a;

    border-right:1px solid #334155;

}

body.dark .CodeMirror-cursor{

    border-left:1px solid white;

}

body.dark .CodeMirror-linenumber{

    color:#94a3b8;

}

/* ==========================================
   Scrollbar
========================================== */

body.dark ::-webkit-scrollbar-thumb{

    background:#475569;

}

body.dark ::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}