*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:
        radial-gradient(
            circle at top,
            #0f172a,
            #020617 58%
        );

    color:#ffffff;

    font-family:
        Inter,
        Arial,
        sans-serif;

    min-height:100vh;

    padding:16px;

    overflow-x:hidden;
}

/* ========================= */
/* CONTAINER */
/* ========================= */

.container{

    width:100%;

    max-width:1920px;

    margin:auto;
}

/* ========================= */
/* HEADER */
/* ========================= */

.header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    flex-wrap:nowrap;

    margin-bottom:26px;
}

/* ========================= */
/* PROFESSIONAL BRAND BOX */
/* ========================= */

.brand-text-only{

    position:relative;

    flex:1;

    min-width:320px;

    max-width:520px;

    padding:18px 22px;

    border-radius:24px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(10,18,38,.98),
            rgba(8,14,28,.98)
        );

    border:
        1px solid rgba(56,189,248,.18);

    box-shadow:
        0 0 30px rgba(37,99,235,.10),
        inset 0 0 30px rgba(56,189,248,.03),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter:blur(10px);
}

/* TOP NEON LINE */

.brand-text-only::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #38bdf8,
            #60a5fa,
            transparent
        );

    box-shadow:
        0 0 12px rgba(56,189,248,.45);
}

/* BACKGROUND GLOW */

.brand-text-only::after{

    content:"";

    position:absolute;

    top:-100px;

    right:-80px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(56,189,248,.10),
            transparent 70%
        );

    pointer-events:none;
}

/* ========================= */
/* BRAND TITLE */
/* ========================= */

.brand-main-title{

    position:relative;

    z-index:2;

    font-size:24px;

    font-weight:900;

    line-height:1.15;

    margin-bottom:14px;

    letter-spacing:.3px;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #60a5fa,
            #7dd3fc
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 14px rgba(56,189,248,.22);
}

/* ========================= */
/* BRAND LINES */
/* ========================= */

.brand-line{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:8px;

    font-size:13px;

    line-height:1.6;
}

.brand-label{

    color:#94a3b8;

    font-weight:700;

    letter-spacing:.3px;

    min-width:92px;
}

.brand-value{

    color:#ffffff;

    font-weight:800;
}

.phone-number{

    color:#22c55e;

    text-shadow:
        0 0 10px rgba(34,197,94,.22);
}

.brand-line a{

    color:#38bdf8;

    text-decoration:none;

    font-weight:800;

    transition:.2s ease;
}

.brand-line a:hover{

    color:#7dd3fc;

    text-shadow:
        0 0 10px rgba(56,189,248,.35);
}

/* ========================= */
/* USER INFO BAR */
/* ========================= */

.user-top-info{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:16px;
}

.user-info-box{

    padding:10px 16px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(30,41,59,.95),
            rgba(15,23,42,.95)
        );

    border:
        1px solid rgba(56,189,248,.16);

    color:#cbd5e1;

    font-size:12px;

    font-weight:800;

    letter-spacing:.3px;

    pointer-events:none;

    user-select:none;

    box-shadow:
        inset 0 0 18px rgba(56,189,248,.03);
}

.user-info-box span{

    color:#38bdf8;

    margin-left:6px;
}

/* ========================= */
/* ACTION BUTTONS */
/* ========================= */

.header-actions{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

    flex:1;
}

/* ========================= */
/* BUTTON BASE */
/* ========================= */

.refresh-btn,
.clear-btn,
.signal-short{

    border:none;

    border-radius:18px;

    padding:14px 24px;

    min-width:150px;

    height:48px;

    color:#ffffff;

    cursor:pointer;

    font-size:13px;

    font-weight:800;

    letter-spacing:.3px;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

/* REFRESH */

.refresh-btn{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    box-shadow:
        0 0 22px rgba(37,99,235,.28);
}

/* CLEAR */

.clear-btn{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );

    box-shadow:
        0 0 22px rgba(239,68,68,.24);
}

/* STATISTICS BUTTON */

.header-actions .refresh-btn:nth-child(3){

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #facc15
        );

    color:#111827;

    box-shadow:
        0 0 22px rgba(250,204,21,.28);
}

/* LOGOUT */

.header-actions .signal-short{

    min-width:120px;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ff3b3b
        );

    box-shadow:
        0 0 18px rgba(239,68,68,.28);
}

.refresh-btn:hover,
.clear-btn:hover,
.signal-short:hover{

    transform:translateY(-2px);

    opacity:.96;
}

/* ========================= */
/* TOPBAR */
/* ========================= */

.topbar{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:18px;

    margin-bottom:26px;
}

/* ========================= */
/* CARDS */
/* ========================= */

.card{

    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.98),
            rgba(9,15,30,.98)
        );

    border:
        1px solid rgba(56,189,248,.16);

    border-radius:24px;

    padding:24px;

    overflow:hidden;

    transition:
        transform .18s ease,
        border .18s ease,
        box-shadow .18s ease;

    box-shadow:
        0 0 28px rgba(37,99,235,.08),
        inset 0 0 22px rgba(56,189,248,.03),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.card::before{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:160px;

    height:160px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(56,189,248,.10),
            transparent 70%
        );

    pointer-events:none;
}

.card::after{

    content:"";

    position:absolute;

    top:0;

    left:18px;

    width:70%;

    height:2px;

    border-radius:50px;

    background:
        linear-gradient(
            90deg,
            rgba(56,189,248,.75),
            transparent
        );

    box-shadow:
        0 0 14px rgba(56,189,248,.35);
}

.card:hover{

    transform:translateY(-3px);

    border:
        1px solid rgba(56,189,248,.30);

    box-shadow:
        0 0 35px rgba(56,189,248,.12),
        inset 0 0 24px rgba(56,189,248,.04);
}

.card-title{

    position:relative;

    z-index:2;

    color:#94a3b8;

    font-size:11px;

    letter-spacing:1.1px;

    margin-bottom:14px;

    text-transform:uppercase;
}

.card-value{

    position:relative;

    z-index:2;

    font-size:26px;

    font-weight:900;

    font-variant-numeric:
        tabular-nums;
}

/* ========================= */
/* CONNECTION */
/* ========================= */

.connection-box{

    display:flex;

    align-items:center;

    gap:18px;
}

.connection-button{

    width:72px;

    height:72px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 16px rgba(34,197,94,.28)
        );
}

.online-status{

    color:#22c55e;

    text-shadow:
        0 0 12px rgba(34,197,94,.45);
}

.offline-status{

    color:#ef4444;

    text-shadow:
        0 0 12px rgba(239,68,68,.4);
}

/* ========================= */
/* TITLES */
/* ========================= */

.table-title{

    margin:28px 0 14px;

    font-size:24px;

    font-weight:900;

    color:#ffffff;

    letter-spacing:.4px;

    text-shadow:
        0 0 14px rgba(255,255,255,.08);
}

/* ========================= */
/* TABLE WRAP */
/* ========================= */

.table-wrap{

    width:100%;

    overflow-x:auto;

    border-radius:24px;

    background:
        rgba(15,23,42,.96);

    border:
        1px solid rgba(56,189,248,.14);

    box-shadow:
        0 0 30px rgba(37,99,235,.08);
}

/* ========================= */
/* TABLE */
/* ========================= */

table{

    width:100%;

    min-width:1120px;

    border-collapse:collapse;
}

thead{

    background:
        linear-gradient(
            180deg,
            #13213b,
            #12203a
        );
}

th{

    padding:15px 10px;

    color:#7dd3fc;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    white-space:nowrap;
}

td{

    padding:15px 8px;

    text-align:center;

    font-size:13px;

    white-space:nowrap;

    border-top:
        1px solid rgba(255,255,255,.04);
}

tbody tr{

    background:#0f172a;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

tbody tr:nth-child(even){

    background:#111c33;
}

tbody tr:hover{

    background:#172554;

    box-shadow:
        inset 0 0 24px rgba(56,189,248,.08),
        0 0 18px rgba(56,189,248,.08);
}

/* ========================= */
/* SYMBOL */
/* ========================= */

.symbol{
	
	
    font-size:15px;

    font-weight:900;

    color:#ffd700;

    letter-spacing:1px;

    text-shadow:
        0 0 8px rgba(255,215,0,.5),
        0 0 18px rgba(255,215,0,.25);

}

.coin-name:hover{

    color:#fff2a8;

    text-shadow:
        0 0 10px rgba(255,215,0,.9),
        0 0 25px rgba(255,215,0,.5);
}

/* ========================= */
/* SIGNAL BUTTONS */
/* ========================= */

.signal-long,
.signal-short,
.signal-wait{

    border:none;

    border-radius:14px;

    min-width:100px;

    padding:12px 16px;

    color:#ffffff;

    font-size:12px;

    font-weight:800;

    letter-spacing:.3px;
}

/* LONG */

.signal-long{

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    box-shadow:
        0 0 16px rgba(34,197,94,.3);
}

/* SHORT */

.signal-short{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );

    box-shadow:
        0 0 16px rgba(34,197,94,.3);
}

/* WAIT */

.signal-wait{

    background:
        linear-gradient(
            135deg,
            #475569,
            #94a3b8
        );

    box-shadow:
        0 0 16px rgba(34,197,94,.3);
}

.signal-wait{

    background:
        linear-gradient(
            135deg,
            #475569,
            #94a3b8
        );
}


/* ========================= */
/* USER ACTION BUTTONS */
/* ========================= */

.user-action-btn{

    border:none;

    border-radius:16px;

    width:150px;

    height:48px;

    font-size:13px;

    font-weight:900;

    color:#ffffff;

    margin:6px 0;

    cursor:pointer;

    transition:.2s ease;
}

.user-action-btn:hover{

    transform:translateY(-2px);
}

/* CONNECTED */

.disconnect-online{

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    box-shadow:
        0 0 18px rgba(34,197,94,.28);
}

/* DISCONNECTED */

.disconnect-offline{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );

    box-shadow:
        0 0 18px rgba(239,68,68,.28);
}

/* EXTEND */

.extend-btn{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    box-shadow:
        0 0 18px rgba(37,99,235,.28);
}

/* DELETE */

.delete-btn{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ff3b3b
        );

    box-shadow:
        0 0 18px rgba(239,68,68,.28);
}

.devices-btn{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    color:#ffffff;

    border:none;

    font-weight:700;

    box-shadow:
        0 0 15px rgba(168,85,247,.35);

    transition:.2s;
}

.devices-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 22px rgba(168,85,247,.55);
}
/* ========================= */
/* BADGES */
/* ========================= */

.badge-bull,
.badge-bear,
.badge-neutral{

    display:inline-block;

    padding:7px 12px;

    border-radius:11px;

    font-size:12px;

    font-weight:800;
}

.badge-bull{

    background:
        rgba(34,197,94,.14);

    color:#22c55e;

    box-shadow:
        0 0 12px rgba(34,197,94,.1);
}

.badge-bear{

    background:
        rgba(239,68,68,.14);

    color:#ef4444;

    box-shadow:
        0 0 12px rgba(239,68,68,.1);
}

.badge-neutral{

    background:
        rgba(148,163,184,.14);

    color:#cbd5e1;
}

/* ========================= */
/* LEVERAGE */
/* ========================= */

.leverage{

    display:inline-block;

    padding:7px 12px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a855f7
        );

    color:#ffffff;

    font-size:12px;

    font-weight:800;

    box-shadow:
        0 0 16px rgba(168,85,247,.22);
}

/* ========================= */
/* COUNTDOWN */
/* ========================= */

.countdown{

    font-weight:900;

    font-size:14px;

    letter-spacing:.4px;
}

/* ========================= */
/* COLORS */
/* ========================= */

.green{

    color:#22c55e;

    font-weight:800;

    text-shadow:
        0 0 10px rgba(34,197,94,.2);
}

.red{

    color:#ef4444;

    font-weight:800;

    text-shadow:
        0 0 10px rgba(239,68,68,.18);
}

.yellow{

    color:#facc15;

    font-weight:800;

    text-shadow:
        0 0 10px rgba(250,204,21,.16);
}

.blue{

    color:#38bdf8;

    font-weight:800;

    text-shadow:
        0 0 10px rgba(56,189,248,.22);
}

/* ========================= */
/* SCROLLBAR */
/* ========================= */

::-webkit-scrollbar{

    width:8px;

    height:8px;
}

::-webkit-scrollbar-track{

    background:#0f172a;
}

::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{

    background:#475569;
}

/* ========================= */
/* LARGE TABLET */
/* ========================= */

@media(max-width:1200px){

    .header{

        flex-wrap:wrap;
    }

    .brand-text-only{

        max-width:100%;
    }

    .header-actions{

        width:100%;

        justify-content:flex-start;
    }
}

/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:900px){

    body{

        padding:12px;
    }

    .header{

        flex-direction:column;

        align-items:stretch;

        gap:16px;
    }

    .brand-text-only{

        width:100%;

        max-width:100%;

        min-width:unset;

        padding:18px;
    }

    .brand-main-title{

        font-size:22px;
    }

    .brand-line{

        font-size:12px;
    }

    .header-actions{

        width:100%;

        display:grid;

        grid-template-columns:
            repeat(auto-fit,minmax(160px,1fr));

        gap:12px;
    }

    .refresh-btn,
    .clear-btn,
    .signal-short{

        width:100%;
    }

    .user-top-info{

        flex-direction:column;
    }

    .user-info-box{

        width:100%;
    }

    .topbar{

        grid-template-columns:1fr;
    }

    table{

        min-width:930px;
    }
}

/* ========================= */
/* PHONE */
/* ========================= */

@media(max-width:600px){

    body{

        padding:10px;
    }

    .brand-text-only{

        padding:16px;

        border-radius:20px;
    }

    .brand-main-title{

        font-size:18px;

        line-height:1.3;
    }

    .brand-line{

        font-size:11px;

        gap:5px;

        margin-top:7px;
    }

    .brand-label{

        min-width:auto;
    }

    .header-actions{

        grid-template-columns:1fr;
    }

    .card{

        padding:18px;
    }

    .card-value{

        font-size:20px;
    }

    .connection-button{

        width:58px;

        height:58px;
    }

    table{

        min-width:860px;
    }

    th{

        font-size:10px;
    }

    td{

        font-size:11px;

        padding:11px 6px;
    }

    .signal-long,
    .signal-short,
    .signal-wait{

        min-width:70px;

        font-size:11px;
    }

    .user-action-btn{

        width:120px;

        height:42px;

        font-size:11px;
    }
}

/* ========================================================= */
/* ADMIN ACTION BUTTONS */
/* ========================================================= */

.action-buttons{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;
}

.user-action-btn{

    width:150px;

    height:44px;

    border:none;

    border-radius:16px;

    color:#fff;

    font-size:12px;

    font-weight:900;

    cursor:pointer;

    transition:.18s ease;

    letter-spacing:.4px;
}

.user-action-btn:hover{

    transform:translateY(-2px) scale(1.02);
}

/* ONLINE USER */

.disconnect-online{

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    box-shadow:
        0 0 18px rgba(34,197,94,.30);
}

/* OFFLINE USER */

.disconnect-offline{

    background:
        linear-gradient(
            135deg,
            #475569,
            #94a3b8
        );

    box-shadow:
        0 0 18px rgba(148,163,184,.18);
}

/* EXTEND */

.extend-btn{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    box-shadow:
        0 0 18px rgba(37,99,235,.28);
}

/* DELETE */

.delete-btn{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ff3b3b
        );

    box-shadow:
        0 0 18px rgba(239,68,68,.28);
}

/* ========================================================= */
/* CHECKBOX */
/* ========================================================= */

.checkbox-col{

    width:55px;

    text-align:center;
}

.custom-check{

    width:20px;

    height:20px;

    cursor:pointer;

    accent-color:#38bdf8;

    transform:scale(1.15);
}

/* ========================================================= */
/* BULK ACTION BAR */
/* ========================================================= */

.bulk-action-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    flex-wrap:wrap;

    padding:18px 22px;

    margin-bottom:18px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.98),
            rgba(9,15,30,.98)
        );

    border:
        1px solid rgba(56,189,248,.15);

    box-shadow:
        0 0 25px rgba(37,99,235,.08),
        inset 0 0 18px rgba(56,189,248,.03);
}

.bulk-left{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}

.bulk-title{

    color:#38bdf8;

    font-size:13px;

    font-weight:900;

    letter-spacing:.5px;
}

/* ========================================================= */
/* MODAL */
/* ========================================================= */

.modal-overlay{

    position:fixed;

    inset:0;

    background:
        rgba(2,6,23,.82);

    backdrop-filter:blur(8px);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;
}

.modal-overlay.active{

    display:flex;
}

.modal-box{

    width:92%;

    max-width:420px;

    padding:30px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.98),
            rgba(9,15,30,.98)
        );

    border:
        1px solid rgba(56,189,248,.18);

    box-shadow:
        0 0 40px rgba(37,99,235,.18),
        inset 0 0 24px rgba(56,189,248,.04);

    text-align:center;

    position:relative;

    overflow:hidden;
}

.modal-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #38bdf8,
            transparent
        );
}

.modal-title{

    font-size:24px;

    font-weight:900;

    margin-bottom:16px;

    color:#ffffff;
}

.modal-text{

    color:#cbd5e1;

    font-size:14px;

    line-height:1.8;

    margin-bottom:24px;
}

.modal-actions{

    display:flex;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;
}

.modal-btn{

    border:none;

    min-width:120px;

    height:46px;

    border-radius:16px;

    color:#fff;

    font-size:13px;

    font-weight:900;

    cursor:pointer;

    transition:.18s ease;
}

.modal-btn:hover{

    transform:translateY(-2px);
}

.modal-yes{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );

    box-shadow:
        0 0 18px rgba(239,68,68,.30);
}

.modal-no{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #38bdf8
        );

    box-shadow:
        0 0 18px rgba(37,99,235,.30);
}

/* ========================================================= */
/* ADMIN INPUT */
/* ========================================================= */

.admin-input{

    height:46px;

    min-width:180px;

    padding:0 16px;

    border-radius:14px;

    border:
        1px solid rgba(56,189,248,.15);

    background:
        rgba(15,23,42,.95);

    color:#ffffff;

    outline:none;

    font-size:13px;

    font-weight:700;

    transition:.18s ease;
}

.admin-input:focus{

    border:
        1px solid rgba(56,189,248,.40);

    box-shadow:
        0 0 18px rgba(56,189,248,.12);
}

/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media(max-width:900px){

    .action-buttons{

        gap:8px;
    }

    .user-action-btn{

        width:120px;

        height:40px;

        font-size:11px;
    }

    .bulk-action-bar{

        flex-direction:column;

        align-items:flex-start;
    }

    .modal-box{

        padding:24px;
    }
}

@media(max-width:600px){

    .user-action-btn{

        width:100px;

        height:38px;

        font-size:10px;
    }

    .modal-title{

        font-size:20px;
    }

    .modal-text{

        font-size:12px;
    }

    .modal-btn{

        width:100%;
    }

    .admin-input{

        width:100%;

        min-width:unset;
    }
}
/* ========================= */
/* CONTACT */
/* ========================= */

.contact-box{

    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
}

/* ========================= */
/* ACTION BUTTONS */
/* ========================= */

.action-buttons{

    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
}

/* ========================= */
/* ROLE */
/* ========================= */

.role-admin{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:90px;

    padding:9px 14px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #facc15
        );

    color:#111827;

    font-size:12px;
    font-weight:900;

    box-shadow:
        0 0 18px rgba(250,204,21,.24);
}

.role-user{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:90px;

    padding:9px 14px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #334155,
            #475569
        );

    color:#ffffff;

    font-size:12px;
    font-weight:800;
}

/* ========================= */
/* EXPIRE */
/* ========================= */

.expire-box{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:9px 14px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(30,41,59,.95),
            rgba(15,23,42,.95)
        );

    border:
        1px solid rgba(56,189,248,.18);

    color:#7dd3fc;

    font-size:12px;
    font-weight:800;
}

/* ========================= */
/* DAYS */
/* ========================= */

.days-box{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:9px 14px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #1e293b,
            #334155
        );

    color:#ffffff;

    font-size:12px;
    font-weight:800;
}

/* ========================= */
/* DEVICE */
/* ========================= */

.device-online{

    color:#22c55e;
    font-weight:900;
}

.device-offline{

    color:#ef4444;
    font-weight:900;
}

/* ========================= */
/* BULK ACTIONS */
/* ========================= */

.user-table-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.bulk-actions{

    display:flex;
    gap:10px;
}

.delete-selected-btn{

    border:none;

    height:44px;

    padding:0 18px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ff3b3b
        );

    color:#ffffff;

    font-size:12px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 0 18px rgba(239,68,68,.24);
}

/* ========================= */
/* CHECKBOX */
/* ========================= */

input[type="checkbox"]{

    width:18px;
    height:18px;

    accent-color:#38bdf8;

    cursor:pointer;
}

/* ========================= */
/* MODAL */
/* ========================= */

.modal-overlay{

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.65);

    display:flex;

    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transition:.2s ease;

    z-index:9999;
}

.show-modal{

    opacity:1;
    visibility:visible;
}

.delete-modal{

    width:92%;
    max-width:420px;

    padding:28px;

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            rgba(15,23,42,.98),
            rgba(9,15,30,.98)
        );

    border:
        1px solid rgba(56,189,248,.18);

    box-shadow:
        0 0 40px rgba(37,99,235,.18);
}

.delete-modal-title{

    font-size:24px;
    font-weight:900;

    color:#ffffff;

    margin-bottom:12px;
}

.delete-modal-text{

    color:#94a3b8;

    font-size:14px;

    margin-bottom:24px;
}

.delete-modal-actions{

    display:flex;
    gap:14px;
}

.modal-no-btn,
.modal-yes-btn{

    flex:1;

    height:48px;

    border:none;

    border-radius:16px;

    font-size:13px;
    font-weight:900;

    cursor:pointer;
}

.modal-no-btn{

    background:
        linear-gradient(
            135deg,
            #334155,
            #475569
        );

    color:#ffffff;
}

.modal-yes-btn{

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ff3b3b
        );

    color:#ffffff;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:700px){

    .action-buttons{

        flex-direction:column;
    }

    .user-action-btn{

        width:100%;
    }

    .delete-modal{

        padding:22px;
    }
}

/* =========================
   WAIT REASONS
========================= */

.reason-badge-bull {
    background: #ff9800;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.reason-badge-bear {
    background: #03a9f4;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.badge-lowrr{

    background: linear-gradient(
        135deg,
        #ff9800,
        #ff5722
    );

    color:#fff;

    border-radius:16px;

    padding:4px 10px;

    font-weight:700;

    box-shadow:0 0 12px #ff9800;
}

.badge-lowhealth{

    background: linear-gradient(
        135deg,
        #ff1744,
        #b71c1c
    );

    color:#fff;

    border-radius:16px;

    padding:4px 10px;

    font-weight:700;

    box-shadow:0 0 12px #ff1744;
}

.reason-inside-cloud {
    background: #607d8b;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.reason-badge-extreme {
    background: #795548;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.reason-generic {
    background: #424242;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

/* =========================
   READY BASE
   ========================= */

.ready-box {

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px 10px;

    border-radius: 14px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .4px;

    text-transform: uppercase;

    color: #fff;

    margin-bottom: 4px;

    transition: all .25s ease;
}

/* =========================
   LONG READY
   ========================= */

.ready-long {

    background: linear-gradient(
        135deg,
        #16c784,
        #00e676
    );

    box-shadow:
        0 0 8px rgba(0,230,118,.45),
        0 0 16px rgba(22,199,132,.25);

    border: 1px solid rgba(0,255,170,.25);
}

/* =========================
   SHORT READY
   ========================= */

.ready-short {

    background: linear-gradient(
        135deg,
        #ff5252,
        #ff1744
    );

    box-shadow:
        0 0 8px rgba(255,23,68,.45),
        0 0 16px rgba(255,82,82,.25);

    border: 1px solid rgba(255,80,80,.25);
}

/* Hover */

.ready-long:hover {

    transform: translateY(-1px);
    box-shadow:
        0 0 12px rgba(0,230,118,.65),
        0 0 22px rgba(22,199,132,.35);
}

.ready-short:hover {

    transform: translateY(-1px);
    box-shadow:
        0 0 12px rgba(255,23,68,.65),
        0 0 22px rgba(255,82,82,.35);
}


.subscription-title{

    color:#111;
    font-weight:700;
    font-size:13px;
}

background:linear-gradient(
    135deg,
    #ff3b3b,
    #ff6b6b
);

.subscription-card{

    background:linear-gradient(
        145deg,
        rgba(8,18,45,.95),
        rgba(4,12,35,.95)
    );

    border:1px solid rgba(0,180,255,.25);

    border-radius:22px;

    padding:22px;

    position:relative;

    overflow:hidden;

    min-height:150px;

    box-shadow:
        0 0 20px rgba(0,180,255,.08),
        inset 0 0 15px rgba(0,180,255,.03);

}

/* خط نئون بالا */

.subscription-card::before{

    content:"";

    position:absolute;

    top:0;

    left:25px;

    width:110px;

    height:2px;

    background:#35c5ff;

    box-shadow:
        0 0 10px #35c5ff,
        0 0 20px #35c5ff;

}

/* Badge نقش */

.subscription-role{

    display:inline-block;

    padding:8px 16px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #8e45f1,
        #e33d3e
    );

    color:white;

    font-weight:700;

    font-size:13px;

    box-shadow:
        0 0 30px rgba(250,85,247,.45);

}

/* تعداد روز */

.subscription-days{

    margin-top:12px;

    display:TOP-block;

    padding:8px 14px;

    border-radius:25px;

    background:rgba(0,180,255,.08);

    border:1px solid rgba(0,180,255,.15);

    color:#38bdf8;

    font-weight:600;
	
	background:linear-gradient(
        135deg,
        #2873e6,
        #eda20f
    );

    color:white;

    font-weight:700;

    font-size:15px;

    box-shadow:
        0 0 18px rgba(168,85,247,.45);

}

/* کلمه DAYS */

.subscription-days span{

    margin-top:12px;

    display:inline-block;

    padding:8px 14px;

    border-radius:12px;

    background:rgba(0,180,255,.08);

    border:1px solid rgba(0,180,255,.15);

    color:#38bdf8;

    font-weight:600;

}

/* تاریخ */

.subscription-expire{

    margin-bottom:12px;

    display:inline-block;

    padding:8px 14px;

    border-radius:27px;

    background:rgba(0,180,255,.08);

    border:1px solid rgba(0,180,255,.15);

    color:#38bdf8;

    font-weight:600;
	
	background:linear-gradient(
        135deg,
        #22c55e,
        #f13738
    );

    color:white;

    font-weight:700;

    font-size:15px;

    box-shadow:
        0 0 18px rgba(168,85,247,.45);

}

}

/* عنوان */

.card-label{

    color:#7dd3fc;

    letter-spacing:2px;

    font-size:12px;

    font-weight:700;

    margin-bottom:12px;

}

.dashboard-cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}

.funding-box{

    animation: fundingPulse 2s infinite;

}

@keyframes fundingPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

.funding-long-crowded{

    display:inline-block;

    padding:4px 10px;

    border-radius:12px;

    background:rgba(255,120,120,.18);

    color:#ff7777;

    font-size:11px;

    font-weight:700;

    box-shadow:
        0 0 10px rgba(255,80,80,.25);
}

.funding-short-crowded{

    display:inline-block;

    padding:4px 10px;

    border-radius:12px;

    background:rgba(0,255,150,.15);

    color:#00ff99;

    font-size:11px;

    font-weight:700;

    box-shadow:
        0 0 10px rgba(0,255,150,.25);
}

.funding-neutral{

    display:inline-block;

    padding:4px 12px;

    border-radius:14px;

    background:rgba(80,140,255,.12);

    color:#6bbcff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    border:1px solid rgba(80,140,255,.20);

    box-shadow:
        0 0 12px rgba(80,140,255,.18);

    margin-top:3px;
}

.badge-choppy{
    background:#7c3aed;
    color:#fff;
    border-radius:18px;
    padding:4px 10px;
    font-weight:700;
}

.badge-range{
    background:#0ea5e9;
    color:#fff;
    border-radius:18px;
    padding:4px 10px;
    font-weight:700;
}

.badge-explosive{
    background:#f59e0b;
    color:#fff;
    border-radius:18px;
    padding:4px 10px;
    font-weight:700;
    animation:pulse 1.5s infinite;
}

.badge-exit{
    background:#dc2626;
    color:#fff;
    border-radius:18px;
    padding:4px 10px;
    font-weight:700;
}

.badge-fake{
    background:#ff00aa;
    color:#fff;
    border-radius:18px;
    padding:4px 10px;
    font-weight:700;
}

.badge-noise{

    background:#9c27b0;

    color:#fff;

    border-radius:12px;

    padding:4px 10px;

    font-weight:bold;

    box-shadow:0 0 12px #9c27b0;

}

.badge-trending{

    background:#22c55e;

    color:white;

    border-radius:12px;

    padding:4px 10px;

    font-weight:bold;

    box-shadow:0 0 12px #22c55e;

}

.badge-pullback-long{

    background:#00c853;

    color:white;

    border-radius:14px;

    padding:4px 10px;

    font-weight:bold;

    box-shadow:0 0 15px #00c853;
}

.badge-pullback-short{

    background:#ff1744;

    color:white;

    border-radius:14px;

    padding:4px 10px;

    font-weight:bold;

    box-shadow:0 0 15px #ff1744;
}
.modal-license{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    z-index:99999;

    justify-content:center;

    align-items:center;
}

.license-box{

    width:450px;

    max-width:95%;

    background:#0f172a;

    padding:30px;

    border-radius:20px;

    border:1px solid #38bdf8;

    text-align:center;
}
.modal-license{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.license-box{

    width:100%;

    max-width:450px;

    padding:35px;

    border-radius:25px;

    background:#0f172a;

    border:1px solid #38bdf8;

    text-align:center;
}

.license-box h2{

    color:#38bdf8;

    margin-bottom:15px;
}

.license-box p{

    color:#94a3b8;

    margin-bottom:20px;
}
.status-active{

    display:inline-block;

    padding:10px 20px;

    border-radius:15px;

    font-weight:800;

    letter-spacing:1px;

    color:#00ff88;

    border:1px solid #00ff88;

    background:rgba(0,255,136,0.08);

    box-shadow:
        0 0 10px rgba(0,255,136,.4),
        0 0 25px rgba(0,255,136,.3),
        inset 0 0 10px rgba(0,255,136,.15);

    text-shadow:
        0 0 8px rgba(0,255,136,.8);
}

/* ==========================================================
   TRADE TABLE - TYPE / FORECAST / RISK / TIMER
   ========================================================== */


/* ==========================================================
   TYPE CONTAINER
   ========================================================== */

.trade-type {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    line-height: 1.15;

}


/* ==========================================================
   TYPE BADGE BASE
   ========================================================== */

.trade-type-badge {

    display: inline-block;

    padding: 6px 13px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.5px;

    white-space: nowrap;

    text-transform: uppercase;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.12
    );

    box-shadow:
        0 0 6px rgba(
            255,
            255,
            255,
            0.10
        ),
        inset 0 0 8px rgba(
            255,
            255,
            255,
            0.04
        );

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}


.trade-type-badge:hover {

    transform: scale(1.04);

}


/* ==========================================================
   LONG
   ========================================================== */

.trade-type-long {

    color: #39ff88;

    background:
        rgba(
            0,
            255,
            120,
            0.10
        );

    border-color:
        rgba(
            57,
            255,
            136,
            0.65
        );

    text-shadow:
        0 0 5px rgba(
            57,
            255,
            136,
            0.85
        );

    box-shadow:
        0 0 7px rgba(
            57,
            255,
            136,
            0.35
        ),
        0 0 18px rgba(
            57,
            255,
            136,
            0.18
        ),
        inset 0 0 9px rgba(
            57,
            255,
            136,
            0.08
        );

}


/* ==========================================================
   SHORT
   ========================================================== */

.trade-type-short {

    color: #ff4d5a;

    background:
        rgba(
            255,
            50,
            70,
            0.10
        );

    border-color:
        rgba(
            255,
            77,
            90,
            0.65
        );

    text-shadow:
        0 0 5px rgba(
            255,
            77,
            90,
            0.85
        );

    box-shadow:
        0 0 7px rgba(
            255,
            77,
            90,
            0.35
        ),
        0 0 18px rgba(
            255,
            77,
            90,
            0.18
        ),
        inset 0 0 9px rgba(
            255,
            77,
            90,
            0.08
        );

}


/* ==========================================================
   EXPLOSIVE LONG
   ========================================================== */

.trade-type-explosive-long {

    color: #39ff88;

    background:
        linear-gradient(
            135deg,
            rgba(
                0,
                255,
                120,
                0.18
            ),
            rgba(
                0,
                120,
                60,
                0.08
            )
        );

    border-color:
        rgba(
            57,
            255,
            136,
            0.90
        );

    text-shadow:
        0 0 5px #39ff88,
        0 0 11px rgba(
            57,
            255,
            136,
            0.75
        );

    box-shadow:
        0 0 8px rgba(
            57,
            255,
            136,
            0.55
        ),
        0 0 22px rgba(
            57,
            255,
            136,
            0.30
        ),
        inset 0 0 12px rgba(
            57,
            255,
            136,
            0.10
        );

}


/* ==========================================================
   EXPLOSIVE SHORT
   ========================================================== */

.trade-type-explosive-short {

    color: #ff4655;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                40,
                60,
                0.18
            ),
            rgba(
                130,
                0,
                20,
                0.08
            )
        );

    border-color:
        rgba(
            255,
            70,
            85,
            0.90
        );

    text-shadow:
        0 0 5px #ff4655,
        0 0 11px rgba(
            255,
            70,
            85,
            0.75
        );

    box-shadow:
        0 0 8px rgba(
            255,
            70,
            85,
            0.55
        ),
        0 0 22px rgba(
            255,
            70,
            85,
            0.30
        ),
        inset 0 0 12px rgba(
            255,
            70,
            85,
            0.10
        );

}


/* ==========================================================
   PULLBACK LONG
   ========================================================== */

.trade-type-pullback-long {

    color: #4dff9a;

    background:
        rgba(
            40,
            255,
            130,
            0.09
        );

    border-color:
        rgba(
            77,
            255,
            154,
            0.60
        );

    text-shadow:
        0 0 5px rgba(
            77,
            255,
            154,
            0.80
        );

}


/* ==========================================================
   PULLBACK SHORT
   ========================================================== */

.trade-type-pullback-short {

    color: #ff6670;

    background:
        rgba(
            255,
            70,
            90,
            0.09
        );

    border-color:
        rgba(
            255,
            102,
            112,
            0.60
        );

    text-shadow:
        0 0 5px rgba(
            255,
            102,
            112,
            0.80
        );

}


/* ==========================================================
   BREAKOUT
   ========================================================== */

.trade-type-breakout {

    color: #55c7ff;

    background:
        rgba(
            50,
            180,
            255,
            0.10
        );

    border-color:
        rgba(
            85,
            199,
            255,
            0.65
        );

    text-shadow:
        0 0 6px rgba(
            85,
            199,
            255,
            0.85
        );

}


/* ==========================================================
   REVERSAL
   ========================================================== */

.trade-type-reversal {

    color: #d58cff;

    background:
        rgba(
            170,
            80,
            255,
            0.12
        );

    border-color:
        rgba(
            213,
            140,
            255,
            0.70
        );

    text-shadow:
        0 0 6px rgba(
            213,
            140,
            255,
            0.90
        );

    box-shadow:
        0 0 8px rgba(
            170,
            80,
            255,
            0.40
        ),
        0 0 18px rgba(
            170,
            80,
            255,
            0.20
        );

}


/* ==========================================================
   FORECAST
   ========================================================== */

.trade-forecast {

    margin-top: 4px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.35px;

    white-space: nowrap;

    opacity: 0.95;

}


.trade-forecast-long {

    color: #72ffad;

    text-shadow:
        0 0 4px rgba(
            114,
            255,
            173,
            0.65
        );

}


.trade-forecast-short {

    color: #ff7b84;

    text-shadow:
        0 0 4px rgba(
            255,
            123,
            132,
            0.65
        );

}


/* ==========================================================
   RISK
   ========================================================== */

.trade-risk {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-width: 72px;

    padding: 5px 8px;

    border-radius: 7px;

    font-weight: 900;

    font-size: 12px;

    line-height: 1;

}


.trade-risk-low {

    color: #39ff88;

    background:
        rgba(
            0,
            255,
            120,
            0.08
        );

    border:
        1px solid rgba(
            57,
            255,
            136,
            0.40
        );

    text-shadow:
        0 0 5px rgba(
            57,
            255,
            136,
            0.75
        );

}


.trade-risk-normal {

    color: #ffd84d;

    background:
        rgba(
            255,
            210,
            50,
            0.08
        );

    border:
        1px solid rgba(
            255,
            216,
            77,
            0.40
        );

    text-shadow:
        0 0 5px rgba(
            255,
            216,
            77,
            0.70
        );

}


.trade-risk-high {

    color: #ff5968;

    background:
        rgba(
            255,
            50,
            70,
            0.08
        );

    border:
        1px solid rgba(
            255,
            89,
            104,
            0.45
        );

    text-shadow:
        0 0 5px rgba(
            255,
            89,
            104,
            0.75
        );

}


/* ==========================================================
   COUNTDOWN
   ========================================================== */

.setup-countdown {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 76px;

    padding: 7px 10px;

    border-radius: 8px;

    font-family:
        "Roboto Mono",
        "Consolas",
        monospace;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

    color: #ffffff;

    background:
        rgba(
            90,
            90,
            110,
            0.14
        );

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.18
        );

    text-shadow:
        0 0 6px rgba(
            255,
            255,
            255,
            0.70
        );

    box-shadow:
        inset 0 0 8px rgba(
            255,
            255,
            255,
            0.04
        );

}


/* ==========================================================
   ACTIVE COUNTDOWN
   ========================================================== */

.setup-countdown.active {

    color: #6fdcff;

    border-color:
        rgba(
            90,
            205,
            255,
            0.55
        );

    text-shadow:
        0 0 6px rgba(
            90,
            205,
            255,
            0.90
        );

    box-shadow:
        0 0 8px rgba(
            90,
            205,
            255,
            0.25
        ),
        inset 0 0 8px rgba(
            90,
            205,
            255,
            0.06
        );

}


/* ==========================================================
   FINAL MINUTES
   ========================================================== */

.setup-countdown.warning {

    color: #ffd84d;

    border-color:
        rgba(
            255,
            216,
            77,
            0.60
        );

    text-shadow:
        0 0 7px rgba(
            255,
            216,
            77,
            0.90
        );

}


/* ==========================================================
   VERY CLOSE TO EXPIRATION
   ========================================================== */

.setup-countdown.danger {

    color: #ff5968;

    border-color:
        rgba(
            255,
            89,
            104,
            0.70
        );

    text-shadow:
        0 0 7px rgba(
            255,
            89,
            104,
            0.95
        );

    animation:
        tradeTimerPulse 0.9s
        ease-in-out
        infinite;

}


@keyframes tradeTimerPulse {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.65;

    }

}

/* ==========================================================
   FUNDING RATE — NEON MARKET STATE
   ========================================================== */

.funding-rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 3px 8px;

    border-radius: 6px;

    font-weight: 700;
    font-size: 12px;

    letter-spacing: 0.3px;

    background: rgba(20, 20, 30, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.12);

    text-shadow:
        0 0 4px currentColor,
        0 0 8px currentColor;

    box-shadow:
        0 0 5px currentColor,
        inset 0 0 5px rgba(255, 255, 255, 0.04);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ==========================================================
   NORMAL
   ========================================================== */

.funding-rate.normal {

    color: #00e5ff;

    border-color: rgba(0, 229, 255, 0.45);

    background:
        rgba(0, 229, 255, 0.07);

    box-shadow:
        0 0 5px rgba(0, 229, 255, 0.45),
        0 0 12px rgba(0, 229, 255, 0.18),
        inset 0 0 6px rgba(0, 229, 255, 0.08);
}


/* ==========================================================
   LONG CROWDED
   ========================================================== */

.funding-rate.long-crowded {

    color: #ffd000;

    border-color: rgba(255, 208, 0, 0.65);

    background:
        rgba(255, 208, 0, 0.08);

    box-shadow:
        0 0 6px rgba(255, 208, 0, 0.65),
        0 0 15px rgba(255, 208, 0, 0.25),
        inset 0 0 7px rgba(255, 208, 0, 0.08);
}


/* ==========================================================
   EXTREME LONG / LONG SQUEEZE
   ========================================================== */

.funding-rate.extreme-long {

    color: #ff1744;

    border-color: rgba(255, 23, 68, 0.85);

    background:
        rgba(255, 23, 68, 0.10);

    box-shadow:
        0 0 6px rgba(255, 23, 68, 0.8),
        0 0 18px rgba(255, 23, 68, 0.45),
        0 0 30px rgba(255, 23, 68, 0.20),
        inset 0 0 8px rgba(255, 23, 68, 0.10);

    animation: fundingLongSqueeze 1.2s infinite alternate;
}


/* ==========================================================
   SHORT CROWDED
   ========================================================== */

.funding-rate.short-crowded {

    color: #ff8a00;

    border-color: rgba(255, 138, 0, 0.65);

    background:
        rgba(255, 138, 0, 0.08);

    box-shadow:
        0 0 6px rgba(255, 138, 0, 0.65),
        0 0 15px rgba(255, 138, 0, 0.25),
        inset 0 0 7px rgba(255, 138, 0, 0.08);
}


/* ==========================================================
   EXTREME SHORT / SHORT SQUEEZE
   ========================================================== */

.funding-rate.extreme-short {

    color: #00ff88;

    border-color: rgba(0, 255, 136, 0.85);

    background:
        rgba(0, 255, 136, 0.09);

    box-shadow:
        0 0 6px rgba(0, 255, 136, 0.8),
        0 0 18px rgba(0, 255, 136, 0.45),
        0 0 30px rgba(0, 255, 136, 0.20),
        inset 0 0 8px rgba(0, 255, 136, 0.10);

    animation: fundingShortSqueeze 1.2s infinite alternate;
}


/* ==========================================================
   LONG SQUEEZE PULSE
   ========================================================== */

@keyframes fundingLongSqueeze {

    from {
        opacity: 0.78;

        box-shadow:
            0 0 5px rgba(255, 23, 68, 0.55),
            0 0 12px rgba(255, 23, 68, 0.25),
            inset 0 0 6px rgba(255, 23, 68, 0.08);
    }

    to {
        opacity: 1;

        box-shadow:
            0 0 8px rgba(255, 23, 68, 0.95),
            0 0 22px rgba(255, 23, 68, 0.65),
            0 0 35px rgba(255, 23, 68, 0.30),
            inset 0 0 9px rgba(255, 23, 68, 0.12);
    }
}


/* ==========================================================
   SHORT SQUEEZE PULSE
   ========================================================== */

@keyframes fundingShortSqueeze {

    from {
        opacity: 0.78;

        box-shadow:
            0 0 5px rgba(0, 255, 136, 0.55),
            0 0 12px rgba(0, 255, 136, 0.25),
            inset 0 0 6px rgba(0, 255, 136, 0.08);
    }

    to {
        opacity: 1;

        box-shadow:
            0 0 8px rgba(0, 255, 136, 0.95),
            0 0 22px rgba(0, 255, 136, 0.65),
            0 0 35px rgba(0, 255, 136, 0.30),
            inset 0 0 9px rgba(0, 255, 136, 0.12);
    }
}


/* ==========================================================
   MACD HISTOGRAM
   NEON MOMENTUM DISPLAY
   ========================================================== */

.macd-histogram {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 3px;

    padding: 2px 6px;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.2px;

    background: rgba(8, 12, 20, 0.65);

    border: 1px solid rgba(255,255,255,0.08);

    transition:
        color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* ==========================================================
   MACD POSITIVE
   CALM MOMENTUM
   ========================================================== */

.macd-hist-positive {
    color: #6ee7b7;

    text-shadow:
        0 0 3px rgba(110, 231, 183, 0.45),
        0 0 7px rgba(52, 211, 153, 0.22);

    animation: none;
}


/* ==========================================================
   MACD NEGATIVE
   CALM MOMENTUM
   ========================================================== */

.macd-hist-negative {
    color: #fb7185;

    text-shadow:
        0 0 3px rgba(251, 113, 133, 0.45),
        0 0 7px rgba(244, 63, 94, 0.22);

    animation: none;
}


/* ==========================================================
   ZERO HISTOGRAM
   ========================================================== */

.macd-hist-zero {

    color: #718096;

    opacity: 0.65;

    text-shadow:
        0 0 3px rgba(113,128,150,0.5);
}



/* ==========================================================
   FUNDING CELL
   ========================================================== */

.funding-cell {

    text-align: center;

    vertical-align: middle;

    white-space: nowrap;

}


/* ==========================================================
   FUNDING BADGE BASE
   ========================================================== */

.funding-cell .funding-badge {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 58px;

    padding: 3px 8px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.3px;

    background: rgba(8, 12, 20, 0.78);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.25s ease,
        text-shadow 0.25s ease;

}


/* ==========================================================
   FUNDING LABEL BASE
   ========================================================== */

.funding-cell .funding-label {

    display: inline-block;

    margin-top: 4px;

    font-size: 9px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.45px;

    text-transform: uppercase;

}


/* ==========================================================
   NORMAL
   ========================================================== */

.funding-cell .funding-normal {

    color: #00d9ff;

    border: 1px solid rgba(0, 217, 255, 0.40);

    background:
        rgba(0, 217, 255, 0.045);

    text-shadow:
        0 0 4px rgba(0, 217, 255, 0.90),
        0 0 8px rgba(0, 217, 255, 0.55);

    box-shadow:
        0 0 4px rgba(0, 217, 255, 0.25),
        inset 0 0 5px rgba(0, 217, 255, 0.04);

    animation:
        fundingNormalGlow 3s ease-in-out infinite;

}


.funding-cell .funding-label-normal {

    color: #00d9ff;

    text-shadow:
        0 0 4px rgba(0, 217, 255, 0.65);

}


/* ==========================================================
   LONG CROWDED
   ========================================================== */

.funding-cell .funding-long-crowded {

    color: #ffb300;

    border: 1px solid rgba(255, 179, 0, 0.65);

    background:
        rgba(255, 179, 0, 0.07);

    text-shadow:
        0 0 4px rgba(255, 179, 0, 0.95),
        0 0 9px rgba(255, 179, 0, 0.65);

    box-shadow:
        0 0 5px rgba(255, 179, 0, 0.30),
        inset 0 0 5px rgba(255, 179, 0, 0.05);

    animation:
        fundingLongCrowded 2.2s ease-in-out infinite;

}


.funding-cell .funding-label-long {

    color: #ffb300;

    text-shadow:
        0 0 4px rgba(255, 179, 0, 0.75);

}


/* ==========================================================
   LONG SQUEEZE
   ========================================================== */

.funding-cell .funding-long-squeeze {

    color: #ff1744;

    border: 1px solid rgba(255, 23, 68, 0.90);

    background:
        rgba(255, 23, 68, 0.10);

    text-shadow:
        0 0 5px rgba(255, 23, 68, 1),
        0 0 11px rgba(255, 23, 68, 0.85),
        0 0 18px rgba(255, 23, 68, 0.45);

    box-shadow:
        0 0 7px rgba(255, 23, 68, 0.65),
        0 0 18px rgba(255, 23, 68, 0.25),
        inset 0 0 7px rgba(255, 23, 68, 0.08);

    animation:
        fundingLongSqueeze 0.85s ease-in-out infinite;

}


.funding-cell .funding-label-long-squeeze {

    color: #ff1744;

    text-shadow:
        0 0 5px rgba(255, 23, 68, 0.90),
        0 0 9px rgba(255, 23, 68, 0.45);

    animation:
        fundingSqueezeLabel 0.85s ease-in-out infinite;

}


/* ==========================================================
   SHORT CROWDED
   ========================================================== */

.funding-cell .funding-short-crowded {

    color: #ff8a00;

    border: 1px solid rgba(255, 138, 0, 0.65);

    background:
        rgba(255, 138, 0, 0.07);

    text-shadow:
        0 0 4px rgba(255, 138, 0, 0.95),
        0 0 9px rgba(255, 138, 0, 0.65);

    box-shadow:
        0 0 5px rgba(255, 138, 0, 0.30),
        inset 0 0 5px rgba(255, 138, 0, 0.05);

    animation:
        fundingShortCrowded 2.2s ease-in-out infinite;

}


.funding-cell .funding-label-short {

    color: #ff8a00;

    text-shadow:
        0 0 4px rgba(255, 138, 0, 0.75);

}


/* ==========================================================
   SHORT SQUEEZE
   ========================================================== */

.funding-cell .funding-short-squeeze {

    color: #00ff88;

    border: 1px solid rgba(0, 255, 136, 0.90);

    background:
        rgba(0, 255, 136, 0.09);

    text-shadow:
        0 0 5px rgba(0, 255, 136, 1),
        0 0 11px rgba(0, 255, 136, 0.85),
        0 0 18px rgba(0, 255, 136, 0.45);

    box-shadow:
        0 0 7px rgba(0, 255, 136, 0.65),
        0 0 18px rgba(0, 255, 136, 0.25),
        inset 0 0 7px rgba(0, 255, 136, 0.08);

    animation:
        fundingShortSqueeze 0.85s ease-in-out infinite;

}


.funding-cell .funding-label-short-squeeze {

    color: #00ff88;

    text-shadow:
        0 0 5px rgba(0, 255, 136, 0.90),
        0 0 9px rgba(0, 255, 136, 0.45);

    animation:
        fundingSqueezeLabel 0.85s ease-in-out infinite;

}


/* ==========================================================
   UNAVAILABLE
   ========================================================== */

.funding-cell .funding-unavailable {

    color: #667085;

    border: 1px solid rgba(102, 112, 133, 0.30);

    background:
        rgba(102, 112, 133, 0.035);

    text-shadow:
        0 0 3px rgba(102, 112, 133, 0.40);

    opacity: 0.70;

}


.funding-cell .funding-label-unavailable {

    color: #667085;

    opacity: 0.70;

}


/* ==========================================================
   NORMAL GLOW
   ========================================================== */

@keyframes fundingNormalGlow {

    0%, 100% {

        opacity: 0.82;

        box-shadow:
            0 0 3px rgba(0, 217, 255, 0.20),
            inset 0 0 4px rgba(0, 217, 255, 0.03);

    }

    50% {

        opacity: 1;

        box-shadow:
            0 0 7px rgba(0, 217, 255, 0.38),
            0 0 13px rgba(0, 217, 255, 0.12),
            inset 0 0 5px rgba(0, 217, 255, 0.06);

    }

}


/* ==========================================================
   LONG CROWDED GLOW
   ========================================================== */

@keyframes fundingLongCrowded {

    0%, 100% {

        opacity: 0.82;

        box-shadow:
            0 0 4px rgba(255, 179, 0, 0.25),
            inset 0 0 4px rgba(255, 179, 0, 0.04);

    }

    50% {

        opacity: 1;

        box-shadow:
            0 0 8px rgba(255, 179, 0, 0.48),
            0 0 16px rgba(255, 179, 0, 0.18),
            inset 0 0 6px rgba(255, 179, 0, 0.07);

    }

}


/* ==========================================================
   LONG SQUEEZE
   ========================================================== */

@keyframes fundingLongSqueeze {

    0%, 100% {

        transform: scale(1);

        opacity: 0.82;

        box-shadow:
            0 0 5px rgba(255, 23, 68, 0.45),
            0 0 10px rgba(255, 23, 68, 0.18);

    }

    50% {

        transform: scale(1.045);

        opacity: 1;

        box-shadow:
            0 0 10px rgba(255, 23, 68, 0.90),
            0 0 22px rgba(255, 23, 68, 0.50),
            0 0 34px rgba(255, 23, 68, 0.20),
            inset 0 0 8px rgba(255, 23, 68, 0.10);

    }

}


/* ==========================================================
   SHORT CROWDED GLOW
   ========================================================== */

@keyframes fundingShortCrowded {

    0%, 100% {

        opacity: 0.82;

        box-shadow:
            0 0 4px rgba(255, 138, 0, 0.25),
            inset 0 0 4px rgba(255, 138, 0, 0.04);

    }

    50% {

        opacity: 1;

        box-shadow:
            0 0 8px rgba(255, 138, 0, 0.48),
            0 0 16px rgba(255, 138, 0, 0.18),
            inset 0 0 6px rgba(255, 138, 0, 0.07);

    }

}


/* ==========================================================
   SHORT SQUEEZE
   ========================================================== */

@keyframes fundingShortSqueeze {

    0%, 100% {

        transform: scale(1);

        opacity: 0.82;

        box-shadow:
            0 0 5px rgba(0, 255, 136, 0.45),
            0 0 10px rgba(0, 255, 136, 0.18);

    }

    50% {

        transform: scale(1.045);

        opacity: 1;

        box-shadow:
            0 0 10px rgba(0, 255, 136, 0.90),
            0 0 22px rgba(0, 255, 136, 0.50),
            0 0 34px rgba(0, 255, 136, 0.20),
            inset 0 0 8px rgba(0, 255, 136, 0.10);

    }

}


/* ==========================================================
   SQUEEZE LABEL PULSE
   ========================================================== */

@keyframes fundingSqueezeLabel {

    0%, 100% {

        opacity: 0.70;

    }

    50% {

        opacity: 1;

    }

}

/* ==========================================================
   RSI NEON STATUS
   ========================================================== */

/*
   NORMAL RSI
   35 < RSI < 65

   Standard dashboard neon.
   No blinking.
*/

.rsi-cell {
    text-align: center;
    vertical-align: middle;
}


.rsi-indicator {
    display: inline-block;

    min-width: 42px;

    padding: 4px 8px;

    border-radius: 7px;

    font-weight: 800;

    font-size: 14px;

    line-height: 1;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* ==========================================================
   RSI NORMAL
   ========================================================== */

.rsi-normal {

    color: #ffe600;

    background: rgba(255, 230, 0, 0.04);

    text-shadow:
        0 0 4px rgba(255, 230, 0, 0.85),
        0 0 9px rgba(255, 230, 0, 0.65),
        0 0 16px rgba(255, 230, 0, 0.40);

    box-shadow:
        0 0 5px rgba(255, 230, 0, 0.20);

}


/* ==========================================================
   RSI NEAR RESISTANCE
   65 <= RSI < 70
   ========================================================== */

.rsi-near-high {

    color: #ffb300;

    background: rgba(255, 179, 0, 0.06);

    text-shadow:
        0 0 5px rgba(255, 179, 0, 1),
        0 0 11px rgba(255, 179, 0, 0.85),
        0 0 20px rgba(255, 120, 0, 0.65);

    box-shadow:
        0 0 7px rgba(255, 179, 0, 0.45),
        inset 0 0 6px rgba(255, 179, 0, 0.12);

    animation:
        rsi-near-high-pulse 1.4s ease-in-out infinite;

}


/* ==========================================================
   RSI OVERBOUGHT / RESISTANCE
   RSI >= 70
   ========================================================== */

.rsi-overbought {

    color: #ff3b5c;

    background: rgba(255, 40, 70, 0.07);

    text-shadow:
        0 0 5px rgba(255, 59, 92, 1),
        0 0 12px rgba(255, 59, 92, 0.95),
        0 0 22px rgba(255, 0, 60, 0.75);

    box-shadow:
        0 0 8px rgba(255, 59, 92, 0.65),
        0 0 18px rgba(255, 0, 60, 0.35),
        inset 0 0 7px rgba(255, 59, 92, 0.15);

    animation:
        rsi-overbought-blink 0.85s ease-in-out infinite;

}


/* ==========================================================
   RSI NEAR SUPPORT
   30 < RSI <= 35
   ========================================================== */

.rsi-near-low {

    color: #00e5ff;

    background: rgba(0, 229, 255, 0.06);

    text-shadow:
        0 0 5px rgba(0, 229, 255, 1),
        0 0 11px rgba(0, 229, 255, 0.85),
        0 0 20px rgba(0, 180, 255, 0.65);

    box-shadow:
        0 0 7px rgba(0, 229, 255, 0.45),
        inset 0 0 6px rgba(0, 229, 255, 0.12);

    animation:
        rsi-near-low-pulse 1.4s ease-in-out infinite;

}


/* ==========================================================
   RSI OVERSOLD / SUPPORT
   RSI <= 30
   ========================================================== */

.rsi-oversold {

    color: #00ff9c;

    background: rgba(0, 255, 156, 0.07);

    text-shadow:
        0 0 5px rgba(0, 255, 156, 1),
        0 0 12px rgba(0, 255, 156, 0.95),
        0 0 22px rgba(0, 255, 130, 0.75);

    box-shadow:
        0 0 8px rgba(0, 255, 156, 0.65),
        0 0 18px rgba(0, 255, 130, 0.35),
        inset 0 0 7px rgba(0, 255, 156, 0.15);

    animation:
        rsi-oversold-blink 0.85s ease-in-out infinite;

}


/* ==========================================================
   RSI UNAVAILABLE
   ========================================================== */

.rsi-unavailable {

    color: #6f7d91;

    text-shadow:
        0 0 4px rgba(100, 120, 145, 0.35);

}


/* ==========================================================
   NEAR RESISTANCE ANIMATION
   ========================================================== */

@keyframes rsi-near-high-pulse {

    0%,
    100% {

        opacity: 0.72;

        text-shadow:
            0 0 4px rgba(255, 179, 0, 0.65),
            0 0 9px rgba(255, 179, 0, 0.45);

        box-shadow:
            0 0 4px rgba(255, 179, 0, 0.25);

    }

    50% {

        opacity: 1;

        text-shadow:
            0 0 6px rgba(255, 179, 0, 1),
            0 0 14px rgba(255, 179, 0, 0.95),
            0 0 24px rgba(255, 120, 0, 0.65);

        box-shadow:
            0 0 10px rgba(255, 179, 0, 0.65),
            0 0 18px rgba(255, 120, 0, 0.30);

    }

}


/* ==========================================================
   OVERBOUGHT BLINK
   ========================================================== */

@keyframes rsi-overbought-blink {

    0%,
    100% {

        opacity: 0.58;

        text-shadow:
            0 0 4px rgba(255, 59, 92, 0.55),
            0 0 9px rgba(255, 59, 92, 0.40);

        box-shadow:
            0 0 4px rgba(255, 59, 92, 0.25);

    }

    50% {

        opacity: 1;

        text-shadow:
            0 0 6px rgba(255, 59, 92, 1),
            0 0 15px rgba(255, 59, 92, 1),
            0 0 28px rgba(255, 0, 60, 0.85);

        box-shadow:
            0 0 11px rgba(255, 59, 92, 0.80),
            0 0 24px rgba(255, 0, 60, 0.45);

    }

}


/* ==========================================================
   NEAR SUPPORT ANIMATION
   ========================================================== */

@keyframes rsi-near-low-pulse {

    0%,
    100% {

        opacity: 0.72;

        text-shadow:
            0 0 4px rgba(0, 229, 255, 0.65),
            0 0 9px rgba(0, 229, 255, 0.45);

        box-shadow:
            0 0 4px rgba(0, 229, 255, 0.25);

    }

    50% {

        opacity: 1;

        text-shadow:
            0 0 6px rgba(0, 229, 255, 1),
            0 0 14px rgba(0, 229, 255, 0.95),
            0 0 24px rgba(0, 180, 255, 0.65);

        box-shadow:
            0 0 10px rgba(0, 229, 255, 0.65),
            0 0 18px rgba(0, 180, 255, 0.30);

    }

}


/* ==========================================================
   OVERSOLD BLINK
   ========================================================== */

@keyframes rsi-oversold-blink {

    0%,
    100% {

        opacity: 0.58;

        text-shadow:
            0 0 4px rgba(0, 255, 156, 0.55),
            0 0 9px rgba(0, 255, 156, 0.40);

        box-shadow:
            0 0 4px rgba(0, 255, 156, 0.25);

    }

    50% {

        opacity: 1;

        text-shadow:
            0 0 6px rgba(0, 255, 156, 1),
            0 0 15px rgba(0, 255, 156, 1),
            0 0 28px rgba(0, 255, 130, 0.85);

        box-shadow:
            0 0 11px rgba(0, 255, 156, 0.80),
            0 0 24px rgba(0, 255, 130, 0.45);

    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .rsi-near-high,
    .rsi-overbought,
    .rsi-near-low,
    .rsi-oversold {

        animation: none;

    }

}

/* ==========================================================
   SCORE DIRECTION NEON
   LONG  = GREEN
   SHORT = RED
   WAIT  = NEUTRAL
   ========================================================== */

.score-long,
.score-short,
.score-neutral {

    display: inline-block;

    font-weight: 800;

    font-size: 14px;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}


/* ==========================================================
   LONG SCORE — CALM HIGH READABILITY
   ========================================================== */

.score-long {
    color: #34d399;

    text-shadow:
        0 0 3px rgba(52, 211, 153, 0.45),
        0 0 7px rgba(52, 211, 153, 0.22);
}


/* ==========================================================
   SHORT SCORE — CALM HIGH READABILITY
   ========================================================== */

.score-short {
    color: #fb7185;

    text-shadow:
        0 0 3px rgba(251, 113, 133, 0.45),
        0 0 7px rgba(251, 113, 133, 0.22);
}


/* ==========================================================
   WAIT / NEUTRAL SCORE
   ========================================================== */

.score-neutral {

    color: #aeb8c7;

    text-shadow:
        0 0 4px rgba(174, 184, 199, 0.35);

}

/* ==========================================================
   CONFIDENCE NEON POWER
   ========================================================== */

.confidence-cell {

    text-align: center;

    vertical-align: middle;

}


.confidence-value {

    display: inline-block;

    min-width: 48px;

    padding: 4px 8px;

    border-radius: 7px;

    font-weight: 800;

    font-size: 14px;

    line-height: 1;

    color: #ffe600;

    transition:
        opacity 0.25s ease,
        text-shadow 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

}


/* ==========================================================
   LOW CONFIDENCE
   ========================================================== */

.confidence-low {

    opacity: 0.68;

    background: rgba(255, 230, 0, 0.025);

    text-shadow:
        0 0 3px rgba(255, 230, 0, 0.55),
        0 0 7px rgba(255, 230, 0, 0.30);

}


/* ==========================================================
   MEDIUM CONFIDENCE
   ========================================================== */

.confidence-medium {

    opacity: 0.84;

    background: rgba(255, 230, 0, 0.045);

    text-shadow:
        0 0 4px rgba(255, 230, 0, 0.80),
        0 0 9px rgba(255, 230, 0, 0.50),
        0 0 14px rgba(255, 230, 0, 0.25);

    box-shadow:
        0 0 5px rgba(255, 230, 0, 0.20);

}


/* ==========================================================
   CONFIDENCE — CALM HIGH-READABILITY
   ========================================================== */

.confidence-high {
    opacity: 0.96;

    background:
        rgba(255, 230, 0, 0.035);

    text-shadow:
        0 0 3px rgba(255, 220, 80, 0.45),
        0 0 7px rgba(255, 210, 50, 0.22);

    box-shadow:
        0 0 4px rgba(255, 220, 80, 0.14);
}


/* ==========================================================
   VERY HIGH CONFIDENCE
   ========================================================== */

.confidence-very-high {
    opacity: 1;

    background:
        rgba(255, 230, 0, 0.045);

    text-shadow:
        0 0 3px rgba(255, 225, 100, 0.55),
        0 0 8px rgba(255, 215, 70, 0.28);

    box-shadow:
        0 0 5px rgba(255, 220, 80, 0.18),
        inset 0 0 4px rgba(255, 220, 80, 0.04);

    transform: none;
}
/* ==========================================================
   ATR NEON
   ========================================================== */

.atr-cell {
    text-align: center;
    vertical-align: middle;
}

.atr-value {
    display: inline-block;

    min-width: 48px;

    padding: 4px 8px;

    border-radius: 7px;

    font-weight: 800;

    font-size: 13px;

    line-height: 1;

    transition:
        opacity 0.25s ease,
        text-shadow 0.25s ease,
        box-shadow 0.25s ease;
}


/* ==========================================================
   ATR NORMAL
   ========================================================== */

.atr-normal {

    color: #b8c7d9;

    background: rgba(150, 180, 210, 0.035);

    text-shadow:
        0 0 4px rgba(170, 195, 220, 0.55),
        0 0 8px rgba(150, 180, 210, 0.30);

}


/* ==========================================================
   ATR MEDIUM
   ========================================================== */

.atr-medium {

    color: #00d9ff;

    background: rgba(0, 217, 255, 0.045);

    text-shadow:
        0 0 4px rgba(0, 217, 255, 0.80),
        0 0 10px rgba(0, 217, 255, 0.55),
        0 0 16px rgba(0, 180, 255, 0.30);

    box-shadow:
        0 0 6px rgba(0, 217, 255, 0.25);

}


/* ==========================================================
   ATR HIGH
   ========================================================== */

.atr-high {

    color: #ffb300;

    background: rgba(255, 179, 0, 0.05);

    text-shadow:
        0 0 5px rgba(255, 179, 0, 0.90),
        0 0 11px rgba(255, 179, 0, 0.65),
        0 0 18px rgba(255, 130, 0, 0.35);

    box-shadow:
        0 0 7px rgba(255, 179, 0, 0.30);

}


/* ==========================================================
   ATR EXTREME
   ========================================================== */

.atr-extreme {

    color: #ff6b9a;

    background: rgba(255, 70, 130, 0.055);

    text-shadow:
        0 0 5px rgba(255, 107, 154, 1),
        0 0 12px rgba(255, 107, 154, 0.80),
        0 0 21px rgba(255, 50, 120, 0.50);

    box-shadow:
        0 0 8px rgba(255, 107, 154, 0.40),
        0 0 16px rgba(255, 50, 120, 0.20);

}

/* ==========================================================
   VWAP DISTANCE NEON
   ========================================================== */

.vwap-distance-cell {
    text-align: center;
    vertical-align: middle;
}

.vwap-distance {

    display: inline-block;

    min-width: 54px;

    padding: 4px 8px;

    border-radius: 7px;

    font-weight: 800;

    font-size: 13px;

    line-height: 1;

    transition:
        opacity 0.25s ease,
        text-shadow 0.25s ease,
        box-shadow 0.25s ease;
}


/* ==========================================================
   CLOSE TO VWAP
   ========================================================== */

.vwap-near {

    color: #c7d2e3;

    background: rgba(180, 195, 215, 0.035);

    text-shadow:
        0 0 4px rgba(190, 205, 225, 0.60),
        0 0 8px rgba(170, 190, 215, 0.30);

}


/* ==========================================================
   MEDIUM DISTANCE
   ========================================================== */

.vwap-medium {

    color: #7ee7ff;

    background: rgba(0, 210, 255, 0.045);

    text-shadow:
        0 0 4px rgba(126, 231, 255, 0.85),
        0 0 10px rgba(0, 210, 255, 0.60),
        0 0 17px rgba(0, 180, 255, 0.30);

    box-shadow:
        0 0 6px rgba(0, 210, 255, 0.25);

}


/* ==========================================================
   VWAP FAR
   CALM HIGH READABILITY
   ========================================================== */

.vwap-far {
    color: #c4b5fd;

    background:
        rgba(167, 139, 250, 0.045);

    text-shadow:
        0 0 3px rgba(196, 181, 253, 0.50),
        0 0 8px rgba(167, 139, 250, 0.24);

    box-shadow:
        0 0 5px rgba(167, 139, 250, 0.16);
}

/* ==========================================================
   ADX VALUE
   ========================================================== */

.adx-value {
    display: inline-block;

    font-weight: 800;
    font-size: 14px;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease,
        transform 0.25s ease;
}


/* ==========================================================
   ADX WEAK
   < 20
   RANGE / WEAK TREND
   ========================================================== */

.adx-weak {
    color: #94a3b8;

    text-shadow:
        0 0 3px rgba(148, 163, 184, 0.30);
}


/* ==========================================================
   ADX MEDIUM
   20 - 30
   DEVELOPING TREND
   ========================================================== */

.adx-medium {
    color: #67d9e8;

    text-shadow:
        0 0 3px rgba(103, 217, 232, 0.38),
        0 0 7px rgba(103, 217, 232, 0.16);
}


/* ==========================================================
   ADX STRONG
   30 - 50
   STRONG TREND
   ========================================================== */

.adx-strong {
    color: #a3e635;

    text-shadow:
        0 0 3px rgba(163, 230, 53, 0.42),
        0 0 8px rgba(163, 230, 53, 0.18);
}


/* ==========================================================
   ADX VERY STRONG
   > 50
   VERY POWERFUL TREND
   ========================================================== */

.adx-very-strong {
    color: #fbbf64;

    text-shadow:
        0 0 3px rgba(251, 191, 100, 0.48),
        0 0 8px rgba(251, 191, 100, 0.20);

    transform: none;
}

.volume-value {
    display: inline-block;
    font-weight: 800;
    font-size: 14px;
    transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}

.volume-low {
    color: #7f8a99;
    text-shadow:
        0 0 3px rgba(127, 138, 153, .35);
}

.volume-medium {
    color: #00d9ff;
    text-shadow:
        0 0 4px rgba(0, 217, 255, .75),
        0 0 9px rgba(0, 217, 255, .55);
}

/* ==========================================================
   VOLUME HIGH
   ========================================================== */

.volume-high {
    color: #bef264;

    text-shadow:
        0 0 3px rgba(190, 242, 100, 0.45),
        0 0 7px rgba(163, 230, 53, 0.20);
}

/* ==========================================================
   VOLUME VERY HIGH
   ========================================================== */

.volume-very-high {
    color: #6ee7b7;

    text-shadow:
        0 0 3px rgba(110, 231, 183, 0.50),
        0 0 8px rgba(52, 211, 153, 0.25);

    transform: none;
}

/* ==========================================================
   HUNT REVERSAL
   Purple Gradient - 3 Tone
   ========================================================== */

.trade-type-reversal {
    background: linear-gradient(
        135deg,
        #6d28d9 0%,
        #8b5cf6 50%,
        #a78bfa 100%
    );

    color: #ffffff;

    border: 1px solid rgba(196, 181, 253, 0.75);

    box-shadow:
        0 0 6px rgba(109, 40, 217, 0.45),
        0 0 14px rgba(139, 92, 246, 0.30);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35);

    font-weight: 800;
    letter-spacing: 0.4px;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


/* ==========================================================
   HUNT REVERSAL HOVER
   ========================================================== */

.trade-type-reversal:hover {

    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 0 8px rgba(109, 40, 217, 0.55),
        0 0 18px rgba(139, 92, 246, 0.40);
}


/* ==========================================================
   OPTIONAL:
   LONG / SHORT DIFFERENTIATION
   ========================================================== */

.trade-type-reversal-long {
    background: linear-gradient(
        135deg,
        #5b21b6 0%,
        #7c3aed 50%,
        #a78bfa 100%
    );
}


.trade-type-reversal-short {
    background: linear-gradient(
        135deg,
        #4c1d95 0%,
        #6d28d9 50%,
        #8b5cf6 100%
    );
}

/* =========================================================
   TRADER-PRO
   RUBIKA CHANNEL - ISOLATED RESPONSIVE STYLE
   ========================================================= */

.rubika-channel-box {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    margin: 10px 0 16px 0;
    padding: 8px 14px;

    font-family: inherit;
}


/* عنوان Rubika Channel */

.rubika-channel-label {
    display: inline-flex;
    align-items: center;

    color: #9aa9bd;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/* لینک کانال */

#rubika-channel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    box-sizing: border-box;

    padding: 6px 16px;

    border: 1px solid rgba(0, 246, 255, 0.75);
    border-radius: 8px;

    background: rgba(0, 246, 255, 0.055);

    color: #00f6ff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    text-shadow:
        0 0 5px rgba(0, 246, 255, 0.9),
        0 0 10px rgba(0, 246, 255, 0.55);

    box-shadow:
        0 0 6px rgba(0, 246, 255, 0.35),
        inset 0 0 7px rgba(0, 246, 255, 0.08);

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* Hover */

#rubika-channel-link:hover {
    color: #ffffff;

    background: rgba(0, 246, 255, 0.12);

    border-color: #00f6ff;

    text-shadow:
        0 0 5px #00f6ff,
        0 0 10px #00f6ff,
        0 0 18px #00f6ff,
        0 0 28px rgba(0, 246, 255, 0.7);

    box-shadow:
        0 0 8px rgba(0, 246, 255, 0.8),
        0 0 18px rgba(0, 246, 255, 0.45),
        inset 0 0 10px rgba(0, 246, 255, 0.12);

    transform: translateY(-1px);
}


/* کلیک */

#rubika-channel-link:active {
    transform: translateY(0);
}


/* Keyboard Focus */

#rubika-channel-link:focus-visible {
    outline: 1px solid #00f6ff;
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .rubika-channel-box {
        gap: 10px;
        margin-top: 10px;
        margin-bottom: 14px;
        padding: 7px 10px;
    }

    .rubika-channel-label {
        font-size: 12px;
    }

    #rubika-channel-link {
        min-height: 32px;
        padding: 5px 13px;
        font-size: 12px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .rubika-channel-box {
        width: 100%;

        justify-content: center;

        gap: 8px;

        margin: 8px 0 12px 0;
        padding: 6px 8px;
    }

    .rubika-channel-label {
        font-size: 11px;
    }

    #rubika-channel-link {
        min-height: 30px;

        padding: 5px 11px;

        font-size: 11px;

        border-radius: 7px;
    }
}