/* ==========================================================================
   DEADLY-FEAR UNDERWORLD TERMINAL CORE ENGINE MASTER STYLESHEET (PART 1)
   ========================================================================== */

* {
    box-sizing: border-box;
}

:root {
    --bg: #06070a;
    --panel: #0d0f14;
    --panel2: #11141b;
    --red: #5a0c0c;
    --red2: #ff3333;
    --text: #9da5b4;
    --muted: #555555;
    --border: #2a0808;
    --gold: #ffaa00;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Courier New', Courier, monospace;
    min-height: 100vh;
}

/* LINKS */

a {
    color: #ff4a66;
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: #fff;
    text-shadow: 0 0 4px rgba(255, 51, 51, 0.4);
}

/* TOP BAR */

.topbar {
    min-height: 120px;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 28px;
    background: #0d0f14;
    border-bottom: 2px solid var(--border);
    box-shadow: 0 0 25px rgba(210, 15, 47, .18);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.brand {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 3px;
    flex-shrink: 0;
    color: #fff;
}

.brand span {
    color: var(--red2);
    text-shadow: 0 0 5px var(--red2);
}

.top-user {
    color: var(--muted);
    flex-shrink: 0;
    font-size: 11px;
    text-align: right;
}

.top-user strong {
    color: #fff;
    font-size: 13px;
}

/* MIDDLE BANNER CONTROLS */

.topbar-banner {
    width: 100%;
    text-align: center;
    margin: 0;
}

.topbar-banner-inner {
    display: block;
    width: min(1450px, calc(100% - 32px));
    margin: 0 auto;
}

.topbar-banner img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block;
    object-fit: contain !important;
}

/* MAIN PAGE LAYOUT */

.layout {
    display: flex;
    width: 100%;
    margin-top: 120px; 
    min-height: calc(100vh - 120px); 
    align-items: stretch;
}

/* LEFT SIDEBAR COMPONENTS */

.sidebar {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    background: #06070a;
    border-right: 2px solid rgba(255, 51, 51, 0.15);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    overflow-y: auto;
}

/* THEMATIC HORIZONTAL TOP DASHBOARD PANEL */
.player-card {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 14px 12px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 4px;
}

.player-card::before {
    content: 'OPERATIONAL HUD';
    position: absolute;
    top: -6px;
    left: 10px;
    background: var(--bg);
    padding: 0 5px;
    font-size: 8px;
    color: #666;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.hud-text-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hud-username {
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    margin: 5px 0 2px 0;
}

.hud-node {
    font-size: 9px;
    color: var(--red2);
    font-weight: bold;
}

.hud-wallet {
    font-size: 15px;
    color: #44ff44;
    font-weight: bold;
    font-family: monospace;
    margin-bottom: 12px;
    display: block;
    border-bottom: 1px solid #161920;
    padding-bottom: 8px;
}

.hud-bar-wrapper { 
    margin-bottom: 6px; 
}

.hud-bar-label { 
    font-size: 9px; 
    color: #888; 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 3px; 
    text-transform: uppercase;
}

.hud-bar-bg { 
    width: 100%; 
    height: 6px; 
    background: #141722; 
    border-radius: 2px; 
    overflow: hidden; 
    border: 1px solid #000; 
}

.hud-bar-fill { 
    height: 100%; 
    transition: width 0.4s ease; 
}
/* NAVIGATION ACCORDIONS */

nav {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.menu-group { 
    margin-bottom: 8px; 
}

.group-trigger {
    width: 100%;
    background: #0b0d13;
    border: 1px solid #1a1515;
    border-left: 3px solid #5a0c0c;
    color: #9da5b4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

.group-trigger:hover { 
    background: #12151f; 
    color: #fff; 
    border-left-color: var(--red2); 
}

.group-trigger::after { 
    content: '[+]'; 
    color: var(--red2); 
}

.group-trigger.active::after { 
    content: '[-]'; 
}

.group-trigger.active { 
    background: #0f121a; 
    color: #fff; 
    border-left-color: var(--red2); 
}

.group-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.25s ease-out; 
    background: rgba(6, 7, 10, 0.8); 
}

nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 14px;
    margin: 2px 0;
    border-radius: 0;
    color: #8a92a3;
    font-size: 12px;
    font-weight: bold;
}

nav a:hover {
    background: rgba(255, 51, 51, 0.03);
    color: var(--red2);
    border-left: 2px solid var(--red2);
    padding-left: 18px;
}

nav a.active-link { 
    color: var(--red2) !important; 
    border-left: 2px solid var(--red2); 
    background: rgba(255, 51, 51, 0.02); 
}

.sidebar-player-link { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    font-size: 11px !important; 
    padding: 7px 14px !important; 
    color: #666 !important; 
    border-bottom: 1px solid #0d0f14; 
}

/* MAIN CONTENT */

.content {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 28px;
    overflow-x: hidden;
    background-color: var(--bg);
}

.content h1 {
    font-size: 24px;
    color: #fff;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(255, 51, 51, 0.2);
    padding-bottom: 10px;
}

.content p {
    color: #666;
    font-size: 12px;
    margin-bottom: 25px;
}

/* GRIDS */

.grid {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-bottom: 18px;
}

/* PANELS */

.panel,
.auth-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.panel h2, .panel h3 {
    margin-top: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #161920;
    padding-bottom: 8px;
}

.stats .panel span {
    color: var(--text);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
}

.stats .panel strong {
    display: block;
    font-size: 22px;
    margin-top: 8px;
}

/* GENERIC DATA TABLES */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 13px;
}

table th {
    background-color: #0b0d13;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    padding: 10px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

table td {
    padding: 12px 10px;
    border-bottom: 1px solid #161920;
    color: #b0b0b0;
    vertical-align: middle;
}

table tr:hover td {
    background-color: rgba(255, 51, 51, 0.01);
    color: #fff;
}

/* SYSTEM FORMS & INPUT CONSOLES */

label {
    display: block;
    margin: 14px 0 6px;
    color: var(--text);
    font-size: 12px;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    background: #090b10;
    color: white;
    border: 1px solid #2a303d;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--red2);
    outline: none;
    box-shadow: 0 0 5px rgba(255, 51, 51, 0.2);
    background-color: #161a26;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* BUTTONS */

button, input[type="submit"] {
    width: 100%;
    padding: 12px;
    margin-top: 18px;
    border: 1px solid rgba(255, 51, 51, 0.4);
    border-radius: 3px;
    background: var(--red);
    color: white;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

button:hover, input[type="submit"]:hover {
    background: var(--red2);
    border-color: var(--red2);
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.3);
}

button:disabled, input[type="submit"]:disabled {
    background-color: #222 !important;
    border-color: #333 !important;
    color: #555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: none !important;
}

button.btn-gold {
    background-color: #1a1910;
    border-color: #ffaa0044;
    color: var(--gold);
}

button.btn-gold:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

/* AUTH SYSTEM */

.auth-box {
    max-width: 450px;
    margin: 80px auto;
}

/* ALERTS */

.alert {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.alert.success {
    background-color: rgba(68, 255, 68, 0.1);
    border: 1px solid #44ff44;
    color: #44ff44;
}

.alert.error {
    background: rgba(255, 51, 51, 0.1);
    border: 1px solid var(--red2);
    color: var(--red2);
}

/* FOOTER */

.footer {
    width: 100%;
    text-align: center;
    padding: 20px;
    color: var(--text);
    border-top: 1px solid var(--border);
}

/* RESPONSIVE LAYOUT MEDIA QUERIES */

@media (max-width: 1000px) {
    .sidebar {
        flex: 0 0 260px;
        width: 260px;
        min-width: 260px;
    }
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content {
        padding: 20px;
    }
}

@media (max-width: 650px) {
    .topbar {
        height: auto;
        min-height: 65px;
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }
    .topbar-banner {
        margin: 5px 0;
        order: -1;
    }
    .layout {
        display: block;
        width: 100%;
        margin-top: 220px; 
    }
    .sidebar {
        width: 100%;
        min-width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        height: auto;
    }
    .content {
        width: 100%;
        min-width: 100%;
        padding: 18px;
    }
    .stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DEADLY-FEAR UNDERWORLD TERMINAL ANIMATION PACK CODES
   ========================================================================== */

/* 1. CRT SCAN MONITOR EFFECTS */
@keyframes crtFlicker {
    0% { opacity: 0.97; }
    50% { opacity: 1.0; }
    100% { opacity: 0.98; }
}
.layout {
    animation: crtFlicker 0.15s infinite;
}

/* 2. GLOWING HAZARD HIGHLIGHTS (For Vitals and Alerts) */
@keyframes neonPulseCrimson {
    0% { box-shadow: 0 0 2px #ff3333; }
    50% { box-shadow: 0 0 8px #ff3333, 0 0 15px rgba(255, 51, 51, 0.4); }
    100% { box-shadow: 0 0 2px #ff3333; }
}
.hud-bar-fill, .alert.error {
    animation: neonPulseCrimson 3s infinite ease-in-out;
}

/* Gold Value Glows */
@keyframes neonPulseGold {
    0% { text-shadow: 0 0 2px #ffaa00; }
    50% { text-shadow: 0 0 6px #ffaa00, 0 0 12px rgba(255, 170, 0, 0.5); }
    100% { text-shadow: 0 0 2px #ffaa00; }
}
.hud-wallet, .money, span[style*="color:#ffaa00"] {
    animation: neonPulseGold 4s infinite ease-in-out;
}

/* 3. HARDWARE RADAR SCANNER EFFECT */
@keyframes radarBlink {
    0% { opacity: 0.2; }
    50% { opacity: 1.0; color: #ff3333; }
    100% { opacity: 0.2; }
}
.sidebar-player-link span:first-child::before {
    content: '• ';
    animation: radarBlink 1.5s infinite;
    font-weight: bold;
}

/* 4. DIGITAL TEXT TYPING EFFECT */
@keyframes typingEffect {
    from { width: 0; }
    to { width: 100%; }
}
.content h1 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typingEffect 1.5s steps(30, end);
}

/* ========================================================================== 
   DEADLY FEAR UNIVERSAL UI SYSTEM v4
   Applies the modern dark/red visual language to legacy player + staff pages.
   ========================================================================== */
body.df-shell {
    --df-bg:#07090d;
    --df-panel:#0f131a;
    --df-panel-2:#141923;
    --df-panel-3:#0b0e14;
    --df-line:#252c38;
    --df-line-soft:#1b202a;
    --df-text:#f3f6fa;
    --df-muted:#8994a5;
    --df-dim:#596273;
    --df-red:#ef3340;
    --df-red-2:#ff5367;
    --df-green:#38d17f;
    --df-gold:#ffbd55;
    --df-blue:#5b9cff;
    margin:0 !important;
    background:
      radial-gradient(circle at 80% 0%, rgba(239,51,64,.08), transparent 27%),
      radial-gradient(circle at 0% 55%, rgba(91,156,255,.035), transparent 26%),
      #07090d !important;
    color:var(--df-text) !important;
    font-family:Arial,Helvetica,sans-serif !important;
}
body.df-shell a { color:#ff6072; text-decoration:none; }
body.df-shell a:hover { color:#fff; text-shadow:none; }
body.df-shell .topbar-banner {
    position:relative;
    padding:10px 0 !important;
    background:linear-gradient(180deg,#10141b 0%,#0a0d12 100%) !important;
    border-bottom:1px solid #2a303b;
    box-shadow:0 12px 34px rgba(0,0,0,.28);
}
body.df-shell .topbar-banner-inner {
    width:min(1450px,calc(100% - 32px));
    margin:0 auto;
}
body.df-shell .topbar-banner img {
    width:100% !important;
    height:auto !important;
    border-radius:8px;
    box-shadow:0 9px 28px rgba(0,0,0,.25);
}
body.df-shell .mcc-layout-wrapper {
    width:min(1450px,100%) !important;
    max-width:1450px !important;
    margin:0 auto !important;
    min-height:calc(100vh - 150px);
    align-items:stretch;
}
body.df-shell .mcc-content-frame,
body.df-shell main.content,
body.df-shell main.main-content {
    flex:1 1 auto;
    min-width:0;
    width:auto;
    padding:22px !important;
    background:transparent !important;
    color:var(--df-text) !important;
}
body.df-shell .df-legacy-page,
body.df-shell .df-legacy-page * { box-sizing:border-box; }
body.df-shell .df-legacy-page {
    font-family:Arial,Helvetica,sans-serif !important;
    line-height:1.5;
}
body.df-shell .df-legacy-page *:not(code):not(pre) {
    font-family:Arial,Helvetica,sans-serif !important;
}
body.df-shell .df-legacy-page > h1:first-child,
body.df-shell .df-legacy-page > h2:first-child {
    position:relative;
    margin:0 0 15px !important;
    padding:22px 24px 19px 28px !important;
    overflow:hidden;
    border:1px solid #2b303b !important;
    border-radius:12px !important;
    background:
      radial-gradient(circle at 92% 12%,rgba(239,51,64,.14),transparent 31%),
      linear-gradient(135deg,#121720,#0b0e14 68%,#0d1118) !important;
    box-shadow:0 18px 38px rgba(0,0,0,.22);
    color:#fff !important;
    font-size:clamp(23px,3vw,32px) !important;
    font-weight:900 !important;
    letter-spacing:-.5px !important;
    text-transform:none !important;
}
body.df-shell .df-legacy-page > h1:first-child::before,
body.df-shell .df-legacy-page > h2:first-child::before {
    content:"DEADLY FEAR // CITY NETWORK";
    display:block;
    margin-bottom:7px;
    color:#ff5367;
    font-size:9px;
    line-height:1;
    letter-spacing:1.35px;
    text-transform:uppercase;
}
body.df-shell .df-legacy-page > p:first-of-type {
    margin:-3px 0 17px !important;
    padding:0 3px;
    color:var(--df-muted) !important;
    font-size:12px !important;
    line-height:1.65 !important;
}
body.df-shell .df-legacy-page h2,
body.df-shell .df-legacy-page h3,
body.df-shell .df-legacy-page h4 { color:#f6f8fb !important; }
body.df-shell .df-legacy-page h2 { font-size:18px; }
body.df-shell .df-legacy-page h3 { font-size:14px; }
body.df-shell .df-legacy-page p,
body.df-shell .df-legacy-page small { color:var(--df-muted); }
body.df-shell .df-legacy-page hr { border:0 !important; border-top:1px solid var(--df-line) !important; }

body.df-shell .df-legacy-page .panel,
body.df-shell .df-legacy-page .mcc-panel-card,
body.df-shell .df-legacy-page .card,
body.df-shell .df-legacy-page fieldset {
    background:linear-gradient(180deg,#11161e,#0d1117) !important;
    border:1px solid var(--df-line) !important;
    border-radius:10px !important;
    box-shadow:0 12px 26px rgba(0,0,0,.16) !important;
    color:var(--df-text) !important;
}
body.df-shell .df-legacy-page .panel,
body.df-shell .df-legacy-page .mcc-panel-card,
body.df-shell .df-legacy-page .card { padding:17px !important; }
body.df-shell .df-legacy-page .grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px !important;
    align-items:start;
}
body.df-shell .df-legacy-page .grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
body.df-shell .df-legacy-page .grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }

body.df-shell .df-legacy-page table {
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    margin:12px 0 18px !important;
    overflow:hidden;
    border:1px solid var(--df-line) !important;
    border-radius:10px !important;
    background:#0d1117 !important;
    color:#dfe4eb !important;
    box-shadow:0 10px 26px rgba(0,0,0,.12);
}
body.df-shell .df-legacy-page thead tr,
body.df-shell .df-legacy-page th {
    background:#151a23 !important;
    color:#fff !important;
}
body.df-shell .df-legacy-page th {
    padding:11px 12px !important;
    border:0 !important;
    border-bottom:1px solid #313846 !important;
    font-size:9px !important;
    letter-spacing:.7px;
    text-transform:uppercase;
}
body.df-shell .df-legacy-page td {
    padding:11px 12px !important;
    border:0 !important;
    border-bottom:1px solid #1d232d !important;
    color:#aeb8c7 !important;
    font-size:11px !important;
}
body.df-shell .df-legacy-page tr:last-child td { border-bottom:0 !important; }
body.df-shell .df-legacy-page tbody tr { background:#0d1117 !important; }
body.df-shell .df-legacy-page tbody tr:nth-child(even) { background:#10151c !important; }
body.df-shell .df-legacy-page tbody tr:hover { background:#151b24 !important; }

body.df-shell .df-legacy-page label {
    display:block;
    margin:0 0 6px;
    color:#b9c2cf !important;
    font-size:10px !important;
    font-weight:800;
    letter-spacing:.25px;
}
body.df-shell .df-legacy-page input[type="text"],
body.df-shell .df-legacy-page input[type="email"],
body.df-shell .df-legacy-page input[type="password"],
body.df-shell .df-legacy-page input[type="number"],
body.df-shell .df-legacy-page input[type="search"],
body.df-shell .df-legacy-page input[type="url"],
body.df-shell .df-legacy-page select,
body.df-shell .df-legacy-page textarea {
    width:100%;
    max-width:100%;
    padding:10px 11px !important;
    border:1px solid #303744 !important;
    border-radius:7px !important;
    outline:none;
    background:#0a0d12 !important;
    color:#f4f7fb !important;
    font-size:12px !important;
    box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
body.df-shell .df-legacy-page textarea { min-height:110px; resize:vertical; }
body.df-shell .df-legacy-page input:focus,
body.df-shell .df-legacy-page select:focus,
body.df-shell .df-legacy-page textarea:focus {
    border-color:#9c2636 !important;
    box-shadow:0 0 0 3px rgba(239,51,64,.08) !important;
}
body.df-shell .df-legacy-page button,
body.df-shell .df-legacy-page input[type="submit"],
body.df-shell .df-legacy-page input[type="button"],
body.df-shell .df-legacy-page .btn,
body.df-shell .df-legacy-page a.button {
    min-height:38px;
    padding:9px 13px !important;
    border:1px solid #9d2335 !important;
    border-radius:7px !important;
    background:linear-gradient(180deg,#a82035,#741426) !important;
    color:#fff !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.25px;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(130,20,38,.16);
}
body.df-shell .df-legacy-page button:hover,
body.df-shell .df-legacy-page input[type="submit"]:hover,
body.df-shell .df-legacy-page .btn:hover,
body.df-shell .df-legacy-page a.button:hover { filter:brightness(1.12); transform:translateY(-1px); }
body.df-shell .df-legacy-page button:disabled,
body.df-shell .df-legacy-page input:disabled { opacity:.5; cursor:not-allowed; transform:none; }

body.df-shell .alert,
body.df-shell .df-legacy-page .alert {
    padding:11px 13px !important;
    margin:0 0 14px !important;
    border-radius:8px !important;
    font-size:10px !important;
    font-weight:800 !important;
    text-transform:none !important;
}
body.df-shell .alert.success { background:rgba(56,209,127,.08) !important; border:1px solid rgba(56,209,127,.25) !important; color:#6be3a1 !important; }
body.df-shell .alert.error { background:rgba(239,51,64,.08) !important; border:1px solid rgba(239,51,64,.26) !important; color:#ff7584 !important; }
body.df-shell .alert.info { background:rgba(91,156,255,.08) !important; border:1px solid rgba(91,156,255,.25) !important; color:#82b4ff !important; }

body.df-shell footer {
    width:min(1450px,100%) !important;
    max-width:1450px !important;
    margin:0 auto !important;
    padding:20px 18px 28px !important;
    border-top:1px solid #1f252f !important;
    color:#4f5968 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:9px !important;
    letter-spacing:.65px;
    text-transform:uppercase;
}

/* Legacy sidebar fallback. The newer sidebar has its own df-* component styles. */
body.df-shell .mcc-deadlyfear-sidebar {
    background:linear-gradient(180deg,#0c1016,#080a0f) !important;
    border-right:1px solid #242a34 !important;
    box-shadow:8px 0 30px rgba(0,0,0,.17) !important;
    font-family:Arial,Helvetica,sans-serif !important;
}
body.df-shell .mcc-deadlyfear-sidebar a {
    width:100%;
    padding:8px 9px !important;
    border-radius:6px;
    color:#9fa9b7 !important;
    font-family:Arial,Helvetica,sans-serif !important;
}
body.df-shell .mcc-deadlyfear-sidebar a:hover { background:#141922; color:#fff !important; }

@media(max-width:980px){
    body.df-shell .df-legacy-page .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    body.df-shell .df-legacy-page .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
    body.df-shell .mcc-layout-wrapper { display:block !important; }
    body.df-shell .mcc-content-frame,
    body.df-shell main.content,
    body.df-shell main.main-content { width:100% !important; padding:13px !important; }
    body.df-shell .df-legacy-page .grid,
    body.df-shell .df-legacy-page .grid-3,
    body.df-shell .df-legacy-page .grid-4 { grid-template-columns:1fr !important; }
    body.df-shell .df-legacy-page > h1:first-child,
    body.df-shell .df-legacy-page > h2:first-child { padding:18px 18px 16px 21px !important; border-radius:9px !important; }
    body.df-shell .df-legacy-page table { display:block; overflow-x:auto; white-space:nowrap; }
}

@media (max-width:760px) {
    body.df-shell .topbar-banner-inner { width:calc(100% - 16px); }
}