/* ============================================================
   THE CRYPT — dark purple / light gray / black, alt style
   ============================================================ */
:root {
    --crypt-black:       #0b0a0f;
    --crypt-black-raised:#141218;
    --crypt-black-elev:  #1c1922;
    --crypt-purple:      #6b2fb3;
    --crypt-purple-dim:  #3d1a66;
    --crypt-purple-glow: #9d4edd;
    --crypt-gray:        #c7c5cc;
    --crypt-gray-dim:    #8a8792;
}
body, html, #app {
    background: linear-gradient(160deg, var(--crypt-black) 0%, #100d16 60%, #050408 100%) !important;
    color: var(--crypt-gray) !important;
    font-family: "Segoe UI", "Noto Sans", system-ui, sans-serif;
}
header, .toolbar, #navbar {
    background: linear-gradient(90deg, var(--crypt-black-raised) 0%, var(--crypt-purple-dim) 150%) !important;
    border-bottom: 1px solid var(--crypt-purple-dim);
    box-shadow: 0 0 16px rgba(107,47,179,0.35);
    color: var(--crypt-gray) !important;
}
.title, #logo, .app-title {
    color: var(--crypt-gray) !important;
    text-shadow: 0 0 8px var(--crypt-purple-glow);
    letter-spacing: 0.5px;
}
button, .button, .action {
    background: var(--crypt-black-elev) !important;
    color: var(--crypt-gray) !important;
    border: 1px solid var(--crypt-purple-dim) !important;
    transition: all 0.2s ease;
}
button:hover, .button:hover, .action:hover {
    background: var(--crypt-purple-dim) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(157,78,221,0.6);
}
.primary, .save, button[type="submit"] {
    background: linear-gradient(120deg, var(--crypt-purple-dim), var(--crypt-purple)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 10px rgba(107,47,179,0.5);
}
.primary:hover, .save:hover, button[type="submit"]:hover {
    box-shadow: 0 0 18px rgba(157,78,221,0.8);
}
.item, .file-list .item, tr {
    background: transparent !important;
    color: var(--crypt-gray) !important;
    border-bottom: 1px solid rgba(107,47,179,0.15) !important;
}
.item:hover, tr:hover {
    background: var(--crypt-black-elev) !important;
    box-shadow: inset 3px 0 0 var(--crypt-purple);
}
.item.selected, tr.selected {
    background: rgba(107,47,179,0.25) !important;
    box-shadow: inset 3px 0 0 var(--crypt-purple-glow);
}
.item .icon, .material-icons {
    color: var(--crypt-purple-glow) !important;
}
#sidebar, .sidebar {
    background: var(--crypt-black-raised) !important;
    border-right: 1px solid var(--crypt-purple-dim);
}
.sidebar .link, .sidebar a {
    color: var(--crypt-gray-dim) !important;
}
.sidebar .link:hover, .sidebar .link.active, .sidebar a:hover {
    color: var(--crypt-gray) !important;
    background: rgba(107,47,179,0.15) !important;
    border-left: 3px solid var(--crypt-purple-glow);
}
#login, .login, .login-page {
    background: radial-gradient(ellipse at center, #150f1c 0%, var(--crypt-black) 70%, #020103 100%) !important;
}
.login input, #login input {
    background: var(--crypt-black-elev) !important;
    color: var(--crypt-gray) !important;
    border: 1px solid var(--crypt-purple-dim) !important;
}
.login input:focus, #login input:focus {
    border-color: var(--crypt-purple-glow) !important;
    box-shadow: 0 0 10px rgba(157,78,221,0.4);
}
.progress, progress { accent-color: var(--crypt-purple-glow) !important; }
.progress-bar, .progress > div {
    background: linear-gradient(90deg, var(--crypt-purple-dim), var(--crypt-purple-glow)) !important;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--crypt-black); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--crypt-purple-dim), var(--crypt-purple));
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--crypt-purple-glow); }
::selection { background: var(--crypt-purple-glow); color: #fff; }
.dialog, .modal, .card, .popup {
    background: var(--crypt-black-raised) !important;
    color: var(--crypt-gray) !important;
    border: 1px solid var(--crypt-purple-dim) !important;
    box-shadow: 0 0 24px rgba(0,0,0,0.6), 0 0 12px rgba(107,47,179,0.3) !important;
}