/*
==========================================================
PROPFIRM BOT
Connect Bot 2026 UI
Part 1 - Reset + Variables + Layout
==========================================================
*/

:root{

    --primary:#F3C623;
    --primary-dark:#d8aa00;
    --primary-light:#ffe16a;

    --bg:#0b0f19;
    --bg2:#111827;
    --card:#171f2f;
    --card2:#1f2937;

    --border:rgba(255,255,255,.08);

    --text:#ffffff;
    --text2:#b9c1d9;
    --text3:#7b849d;

    --green:#22c55e;
    --red:#ef4444;
    --blue:#3b82f6;
    --orange:#f59e0b;

    --radius:18px;

    --shadow:
        0 15px 40px rgba(0,0,0,.35);

    --transition:.35s ease;

}

/*=====================================
RESET
======================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:linear-gradient(
        180deg,
        #090d16,
        #101826,
        #0c1220
    );

    color:var(--text);

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*=====================================
LINKS
======================================*/

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input,
select,
textarea{

    font-family:inherit;

    outline:none;

}

/*=====================================
LAYOUT
======================================*/

/*=====================================
MAIN CONTENT
======================================*/

section{

    margin-bottom:28px;

}

.entitlement-notice{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 24px 24px;
    padding:18px 20px;
    border:1px solid rgba(243,198,35,.35);
    border-radius:16px;
    background:linear-gradient(110deg,rgba(243,198,35,.12),rgba(23,31,47,.9));
}

.entitlement-notice[hidden]{
    display:none;
}

.entitlement-icon,
.license-redeem-icon{
    display:grid;
    flex:0 0 auto;
    width:46px;
    height:46px;
    place-items:center;
    border-radius:14px;
    background:rgba(243,198,35,.16);
    color:var(--primary);
    font-size:20px;
}

.entitlement-copy strong{
    color:#ffe16a;
    font-size:16px;
}

.entitlement-copy p{
    margin-top:4px;
    font-size:13px;
}

body:not(.entitlement-ready) .dashboard{
    visibility:hidden;
}

.entitlement-loading{
    position:fixed;
    z-index:1000;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:#0b0f19;
    color:var(--text);
    text-align:center;
    font-size:16px;
}

.entitlement-loading[hidden]{
    display:none;
}

.license-redeem-dialog[open]{
    visibility:visible;
}

.license-redeem-dialog{
    width:min(460px,calc(100% - 32px));
    margin:auto;
    padding:0;
    border:1px solid rgba(243,198,35,.3);
    border-radius:20px;
    background:#111827;
    color:var(--text);
    box-shadow:0 25px 80px rgba(0,0,0,.6);
}

.license-redeem-dialog::backdrop{
    background:rgba(3,7,15,.78);
    backdrop-filter:blur(5px);
}

.license-redeem-content{
    padding:30px;
}

.license-redeem-icon{
    margin-bottom:16px;
}

.license-redeem-content h2{
    margin-bottom:8px;
    font-size:23px;
}

.license-redeem-content form{
    display:grid;
    gap:10px;
    margin-top:22px;
}

.license-redeem-content label{
    color:var(--text2);
    font-size:13px;
}

.license-redeem-content input{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#0b0f19;
    color:#fff;
}

.license-redeem-content input:focus{
    border-color:var(--primary);
}

.license-redeem-content button{
    min-height:48px;
    border-radius:10px;
    background:var(--primary);
    color:#111;
    font-weight:600;
}

.license-redeem-content button:disabled{
    cursor:wait;
    opacity:.7;
}

.license-redeem-message{
    min-height:22px;
    font-size:13px;
}

.license-redeem-message.error{
    color:#f87171;
}

.license-redeem-message.success{
    color:#4ade80;
}

.license-redeem-purchase{
    display:inline-block;
    margin-top:18px;
    color:#ffe16a;
    font-size:13px;
}

/*=====================================
GLASS CARD
======================================*/

.card,
.connected-account,
.accounts-section,
.bot-section,
.terminal-section{

    background:rgba(23,31,47,.85);

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

/*=====================================
HEADINGS
======================================*/

h1{

    font-size:34px;

    font-weight:700;

}

h2{

    font-size:25px;

    font-weight:700;

}

h3{

    font-size:18px;

    font-weight:600;

}

p{

    color:var(--text2);

    line-height:1.7;

}

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

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.section-header h2{

    margin-bottom:5px;

}

.section-header p{

    font-size:14px;

}

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

.primary-btn{

    background:var(--primary);

    color:#111;

    padding:13px 22px;

    border-radius:12px;

    font-weight:600;

    transition:var(--transition);

}

.primary-btn:hover{

    background:#ffd84d;

    transform:translateY(-3px);

}

.secondary-btn{

    background:#202b40;

    color:#fff;

    padding:12px 20px;

    border-radius:12px;

    transition:var(--transition);

}

.secondary-btn:hover{

    background:#2b3953;

}

.success-btn{

    background:var(--green);

    color:#fff;

    padding:13px 22px;

    border-radius:12px;

    transition:var(--transition);

}

.warning-btn{

    background:var(--orange);

    color:#fff;

    padding:13px 22px;

    border-radius:12px;

    transition:var(--transition);

}

.danger-btn{

    background:var(--red);

    color:#fff;

    padding:13px 22px;

    border-radius:12px;

    transition:var(--transition);

}

.success-btn:hover,
.warning-btn:hover,
.danger-btn:hover{

    transform:translateY(-3px);

    opacity:.92;

}

/*=====================================
UTILITY
======================================*/

.text-primary{

    color:var(--primary);

}

.text-success{

    color:var(--green);

}

.text-danger{

    color:var(--red);

}

.text-muted{

    color:var(--text3);

}

.hidden{

    display:none !important;

}
/*
==========================================================
PROPFIRM BOT
Connect Bot 2026 UI
Part 2 - Sidebar + Topbar
==========================================================
*/

/*=====================================
SIDEBAR
======================================*/


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

.topbar{

    display:flex;

    padding:20px 24px;

    align-items:center;

    margin-bottom:35px;

}

.topbar-left h1{

    font-size:34px;

    font-weight:700;

    color:#fff;

}

.topbar-left p{

    margin-top:6px;

    color:#9da7c2;

}

/*=====================================
TOP RIGHT
======================================*/

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/*=====================================
NOTIFICATION
======================================*/

.notification-btn{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#182234;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    transition:.3s;

}

.notification-btn:hover{

    background:var(--primary);

    color:#111;

    transform:rotate(10deg);

}

.notification-dot{

    position:absolute;

    top:13px;

    right:13px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ef4444;

    border:2px solid #182234;

}

/*=====================================
PROFILE
======================================*/

.profile{

    display:flex;

    align-items:center;

    gap:15px;

}

.avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        #ffdc5a
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111;

    font-weight:700;

    font-size:20px;

    box-shadow:

        0 10px 25px rgba(243,198,35,.35);

}

.avatar:hover{

    transform:scale(1.08);

}

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

.topbar-right>*{

    transition:.3s;

}
/*
==========================================================
PROPFIRM BOT
Connect Bot 2026 UI
Part 3 - Hero + Connected Account
==========================================================
*/

/*=====================================
HERO BANNER
======================================*/

.hero-banner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:45px;

    margin-bottom:30px;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    background:
        linear-gradient(
            135deg,
            #171f2f,
            #111827
        );

    border:1px solid rgba(255,255,255,.08);

}

.hero-banner::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(243,198,35,.08);

    right:-120px;

    top:-120px;

}

.hero-banner::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(243,198,35,.05);

    left:-60px;

    bottom:-60px;

}

/*=====================================
LEFT
======================================*/

.hero-left{

    flex:1;

    position:relative;

    z-index:2;

}

.hero-left h2{

    font-size:46px;

    line-height:1.2;

    margin:20px 0;

    color:#fff;

}

.hero-left p{

    max-width:620px;

    font-size:16px;

    color:#bfc7da;

    line-height:1.8;

}

/*=====================================
BADGE
======================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(243,198,35,.12);

    color:var(--primary);

    font-weight:600;

}

.hero-badge i{

    font-size:18px;

}

/*=====================================
RIGHT
======================================*/

.hero-right{

    position:relative;

    z-index:2;

}

/*=====================================
STATUS PILL
======================================*/

.connection-pill{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 28px;

    background:#182234;

    border-radius:60px;

    color:#fff;

    font-weight:600;

    box-shadow:0 12px 35px rgba(0,0,0,.30);

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

    animation:pulse 1.6s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.5);

    }

    100%{

        box-shadow:0 0 0 15px rgba(34,197,94,0);

    }

}

/*=====================================
CONNECTED ACCOUNT
======================================*/

.connected-account{

    padding:35px;

    margin-bottom:30px;

}

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

.account-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.account-title{

    display:flex;

    align-items:center;

    gap:20px;

}

.broker-logo{

    width:70px;

    height:70px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #ffd84d
    );

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.account-title h2{

    font-size:28px;

    margin-bottom:6px;

}

.account-title p{

    color:#9da7c2;

}

.account-badge{

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

    color:#22c55e;

    padding:10px 22px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

/*=====================================
ACCOUNT NUMBER
======================================*/

.account-number{

    margin-bottom:35px;

}

.account-number small{

    color:#8e97b0;

    display:block;

    margin-bottom:8px;

}

.account-number h1{

    font-size:clamp(22px, 3vw, 34px);

    letter-spacing:1.5px;

    color:var(--primary);

    overflow-wrap:anywhere;

}

/*=====================================
ACCOUNT META
======================================*/

.account-meta{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

    margin-bottom:35px;

}

.meta-item{

    background:#1b2434;

    padding:18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.05);

}

.meta-item span{

    display:block;

    color:#8d97b0;

    margin-bottom:10px;

    font-size:13px;

}

.meta-item strong{

    color:#fff;

    min-width:0;

    font-size:clamp(12px, 1vw, 14px);

    line-height:1.4;

    overflow-wrap:anywhere;

}

/*=====================================
ACCOUNT STATS
======================================*/

.account-stats{

    display:grid;

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

    gap:20px;

}

/*=====================================
STAT CARD
======================================*/

.stat-card{

    background:#1a2232;

    border-radius:18px;

    padding:22px;

    transition:.35s;

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

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:rgba(243,198,35,.35);

    box-shadow:

        0 18px 35px rgba(0,0,0,.30);

}

.stat-card i{

    width:55px;

    height:55px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(243,198,35,.12);

    color:var(--primary);

    font-size:22px;

    margin-bottom:18px;

}

.stat-card span{

    display:block;

    color:#97a1bc;

    margin-bottom:8px;

}

.stat-card h3{

    min-width:0;

    font-size:clamp(12px, 1.1vw, 16px);

    color:#fff;

    line-height:1.35;

    font-variant-numeric:tabular-nums;

    letter-spacing:0;

    white-space:nowrap;

}
/*
==========================================================
PROPFIRM BOT
Connect Bot 2026 UI
Part 4 - Trading Accounts + AI Bot
==========================================================
*/

/*=====================================
TRADING ACCOUNTS
======================================*/

.accounts-section{

    padding:28px;

}

.connection-toast{
    margin:0 0 18px;
    padding:14px 18px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:14px;
}

.connection-toast[hidden]{
    display:none;
}

.connection-toast.success{
    color:#bbf7d0;
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.3);
}

.connection-toast.error{
    color:#fecaca;
    background:rgba(239,68,68,.12);
    border-color:rgba(239,68,68,.3);
}

.empty-account{
    padding:18px 20px;
    border:1px dashed rgba(255,255,255,.16);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

.empty-account strong{
    display:block;
    margin-bottom:4px;
}

.empty-account p{
    font-size:13px;
}

.connection-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

.connection-summary-item{
    min-width:0;
}

.connection-summary-item span{
    display:block;
    margin-bottom:4px;
    color:var(--text3);
    font-size:12px;
}

.connection-summary-item strong{
    overflow-wrap:anywhere;
    font-variant-numeric:tabular-nums;
}

.connection-actions{
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding-top:12px;
    border-top:1px solid var(--border);
}

.connection-actions button{
    min-height:40px;
    padding:9px 14px;
    border-radius:10px;
    font-size:13px;
}

@media(max-width:640px){
    .connection-summary{
        grid-template-columns:1fr;
    }

    .connection-actions{
        grid-column:1;
    }
}

.daily-limits-panel{
    margin:24px;
    padding:24px;
    border:1px solid rgba(243,198,35,.22);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(23,31,47,.96),rgba(14,22,36,.96));
    box-shadow:var(--shadow);
}

.daily-limits-panel[hidden],
.daily-limit-setup-notice[hidden],
.daily-limit-unconfigured[hidden]{
    display:none;
}

.daily-limit-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
}

.daily-limit-actions[hidden],
.daily-limit-reset[hidden]{
    display:none;
}

.daily-limit-actions small{
    color:var(--text2);
    font-size:12px;
}

.daily-limit-reset{
    flex:none;
}

.daily-limits-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.daily-limits-heading h2{
    margin:7px 0 5px;
}

.daily-limits-heading p{
    max-width:720px;
    font-size:13px;
}

.daily-limit-status{
    flex:0 1 auto;
    max-width:100%;
    padding:9px 13px;
    border:1px solid rgba(34,197,94,.3);
    border-radius:999px;
    background:rgba(34,197,94,.1);
    color:#86efac;
    font-size:12px;
    font-weight:600;
    line-height:1.5;
    white-space:normal;
}

.daily-limit-status.is-blocked{
    border-color:rgba(239,68,68,.35);
    background:rgba(239,68,68,.12);
    color:#fca5a5;
}

.daily-limit-day{
    display:block;
    margin-top:8px;
    color:var(--text2);
    font-size:11px;
    text-align:right;
}

.daily-limit-pnl{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:22px 0 16px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.daily-limit-pnl span{
    color:var(--text2);
    font-size:13px;
}

.daily-limit-pnl-note{
    grid-column:1 / -1;
    color:var(--text2);
    font-size:12px;
    line-height:1.5;
}

.daily-limit-pnl strong{
    font-size:20px;
    font-variant-numeric:tabular-nums;
}

.daily-limit-pnl strong.is-positive{
    color:#4ade80;
}

.daily-limit-pnl strong.is-negative{
    color:#f87171;
}

.daily-limit-meters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.daily-limit-meter{
    min-width:0;
    padding:16px;
    border:1px solid var(--border);
    border-radius:13px;
    background:rgba(255,255,255,.025);
}

.daily-limit-meter-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.daily-limit-meter-heading span{
    color:var(--text2);
    font-size:13px;
}

.daily-limit-meter-heading span strong{
    margin-left:5px;
    color:#fff;
}

.daily-limit-meter-heading>strong{
    font-size:14px;
    font-variant-numeric:tabular-nums;
}

.daily-limit-track{
    height:11px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.1);
}

.daily-limit-fill{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#16a34a,#4ade80);
    background-size:200% 100%;
    animation:daily-limit-shimmer 2.2s linear infinite;
    transition:width .8s cubic-bezier(.2,.8,.2,1);
}

.daily-limit-meter.loss .daily-limit-fill{
    background-image:linear-gradient(90deg,#dc2626,#fb7185);
}

.daily-limit-meter.is-near .daily-limit-fill{
    background-image:linear-gradient(90deg,#d97706,#fbbf24);
}

.daily-limit-meter.is-reached .daily-limit-fill{
    background-image:linear-gradient(90deg,#dc2626,#ef4444);
}

.daily-limit-meter small{
    display:block;
    margin-top:9px;
    color:var(--text3);
    font-size:11px;
}

.daily-limit-unconfigured{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:16px;
    padding:14px 16px;
    border:1px solid rgba(245,158,11,.3);
    border-radius:12px;
    background:rgba(245,158,11,.08);
}

.daily-limit-unconfigured p{
    color:#fde68a;
    font-size:13px;
}

.daily-limit-setup-notice{
    margin:0 0 18px;
    padding:14px 16px;
    border:1px solid rgba(245,158,11,.32);
    border-radius:12px;
    background:rgba(245,158,11,.09);
}

.daily-limit-setup-notice strong{
    color:#fde68a;
}

.daily-limit-setup-notice p{
    margin-top:4px;
    font-size:12px;
}

.daily-limit-input-group small{
    min-height:18px;
}

@keyframes daily-limit-shimmer{
    to{background-position:-200% 0}
}

@media(max-width:700px){
    .daily-limits-panel{
        margin:16px;
        padding:18px;
    }

    .daily-limits-heading{
        flex-direction:column;
        gap:12px;
    }

    .daily-limit-meters{
        grid-template-columns:1fr;
    }

    .daily-limit-unconfigured{
        align-items:stretch;
        flex-direction:column;
    }

    .daily-limit-actions{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(prefers-reduced-motion:reduce){
    .daily-limit-fill{
        animation:none;
        transition:none;
    }
}

.preferences-modal #tradingPreferencesForm{
    min-width:0;
    padding:0;
}

.preferences-modal .preference-symbols,
.preferences-modal .symbol-group,
.preferences-modal .symbol-grid,
.preferences-modal .preference-pair-settings,
.preferences-modal .preference-pair-list,
.preferences-modal .preference-risk-grid{
    min-width:0;
}

.preferences-modal .symbol-option{
    min-width:0;
}

@media(max-width:380px){
    html,
    body.trading-bot-page{
        min-width:0;
    }

    .trading-bot-page .modal{
        align-items:flex-start;
        padding:8px;
    }

    .trading-bot-page .preferences-modal{
        width:100%;
        max-width:none;
        max-height:calc(100dvh - 16px);
        padding:16px 14px;
        border-radius:16px;
    }

    .trading-bot-page .preferences-modal .modal-header{
        padding:8px 36px 16px 0;
    }

    .trading-bot-page .preferences-modal .modal-header h2{
        font-size:21px;
    }

    .trading-bot-page .preferences-modal .modal-header p,
    .trading-bot-page .preference-pair-settings-heading p{
        font-size:11px;
        overflow-wrap:anywhere;
    }

    .trading-bot-page .preferences-modal .symbol-grid{
        grid-template-columns:minmax(0,1fr);
    }

    .trading-bot-page .preferences-modal .symbol-group{
        margin:14px 0;
    }

    .trading-bot-page .preferences-modal .symbol-option{
        width:100%;
        padding:11px;
    }

    .trading-bot-page .preferences-modal .preference-pair-list{
        grid-template-columns:minmax(0,1fr);
    }

    .trading-bot-page .preference-pair-card .preference-pair-controls{
        grid-template-columns:minmax(0,1fr);
    }

    .trading-bot-page .preferences-warning{
        font-size:11px;
        overflow-wrap:anywhere;
    }

    .trading-bot-page .preferences-actions{
        flex-direction:column-reverse;
    }

    .trading-bot-page .preferences-actions button{
        width:100%;
    }
}

.accounts-grid{

    display:grid;

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

    gap:25px;

    margin-top:25px;

}

.saved-accounts-section{
    margin:24px 0;
    padding:22px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--card);
}

.saved-accounts-section .section-header{
    align-items:center;
}

.saved-accounts-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
    gap:12px;
    margin-top:18px;
}

.selected-account-notice{
    margin-top:10px;
    color:var(--text2);
    font-size:13px;
    font-weight:600;
}

.saved-accounts-empty{
    grid-column:1 / -1;
    margin:0;
    color:var(--text3);
}

.saved-mt5-account{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-width:0;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card2);
}

.saved-mt5-account.is-selected{
    border-color:var(--primary, #f3c623);
}

.saved-mt5-account-copy{
    min-width:0;
}

.saved-mt5-account-copy strong,
.saved-mt5-account-copy span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.saved-mt5-account-copy span{
    margin-top:4px;
    color:var(--text3);
    font-size:12px;
}

.saved-mt5-account button{
    flex:0 0 auto;
}

.saved-mt5-account-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
}

@media(max-width:640px){
    .saved-accounts-section{
        padding:16px;
    }

    .saved-accounts-section .section-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .saved-mt5-account{
        align-items:flex-start;
        flex-direction:column;
    }

    .saved-mt5-account-actions{
        width:100%;
        justify-content:flex-start;
    }
}

/*=====================================
ACCOUNT CARD
======================================*/

.account-card{

    position:relative;

    background:#1a2232;

    border-radius:22px;

    padding:28px;

    overflow:hidden;

    transition:.35s;

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

    cursor:pointer;

}

.account-card:hover{

    transform:translateY(-8px);

    border-color:rgba(243,198,35,.45);

    box-shadow:

        0 18px 45px rgba(0,0,0,.35);

}

.account-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #ffd84d
    );

}

/*=====================================
ACCOUNT TOP
======================================*/

.account-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.account-broker{

    display:flex;

    align-items:center;

    gap:15px;

}

.account-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(243,198,35,.12);

    color:var(--primary);

    font-size:24px;

}

.account-broker h3{

    font-size:20px;

    color:#fff;

    margin-bottom:4px;

}

.account-broker p{

    color:#9ca7c2;

    font-size:13px;

}

/*=====================================
STATUS
======================================*/

.status-badge{

    padding:8px 18px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

.status-connected{

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

    color:#22c55e;

}

.status-disconnected{

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

    color:#ef4444;

}

/*=====================================
ACCOUNT INFO
======================================*/

.account-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin:25px 0;

}

.account-info div{

    background:#141b28;

    padding:14px;

    border-radius:14px;

}

.account-info small{

    display:block;

    color:#8f99b0;

    margin-bottom:6px;

}

.account-info strong{

    color:#fff;

}

/*=====================================
BALANCE
======================================*/

.account-balance{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:20px;

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

}

.balance-box h2{

    color:var(--primary);

    font-size:28px;

}

.balance-box span{

    color:#8f99b0;

    font-size:13px;

}

/*=====================================
CARD BUTTONS
======================================*/

.account-actions{

    display:flex;

    gap:12px;

    margin-top:22px;

}

.account-actions button{

    flex:1;

    padding:12px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

}

/*=====================================
AI BOT SECTION
======================================*/

.bot-section{

    padding:35px;

}

.live-status{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    color:#22c55e;

}

.pulse{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

    animation:pulse 1.5s infinite;

}

/*=====================================
BOT GRID
======================================*/

.bot-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;

    margin:30px 0;

}

/*=====================================
BOT CARD
======================================*/

.bot-card{

    background:#1a2232;

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.35s;

    border:1px solid rgba(255,255,255,.05);

}

.bot-card:hover{

    transform:translateY(-6px);

    border-color:rgba(243,198,35,.4);

}

.bot-card i{

    width:65px;

    height:65px;

    margin:auto;

    margin-bottom:18px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(243,198,35,.12);

    color:var(--primary);

    font-size:28px;

}

.bot-card span{

    display:block;

    color:#97a1bc;

    margin-bottom:8px;

}

.bot-card h3{

    color:#fff;

    font-size:24px;

}

/*=====================================
BOT ACTIONS
======================================*/

.bot-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    justify-content:center;

    margin-top:35px;

}

.bot-actions button{

    min-width:170px;

    padding:15px 25px;

    border-radius:14px;

    font-size:15px;

    font-weight:600;

}
/*
==========================================================
PROPFIRM BOT
Connect Bot 2026 UI
Part 5 - AI Terminal
==========================================================
*/

/*=====================================
TERMINAL SECTION
======================================*/

.terminal-section{

    margin-top:30px;

    background:#171f2f;

    border-radius:22px;

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

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

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

.terminal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    background:#101826;

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

}

.terminal-header h2{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:20px;

    color:#fff;

}

.terminal-header h2 i{

    color:var(--primary);

}

.terminal-actions{

    display:flex;

    gap:12px;

}

.terminal-actions button{

    width:40px;

    height:40px;

    border-radius:10px;

    background:#1f2937;

    color:#fff;

    transition:.3s;

}

.terminal-actions button:hover{

    background:var(--primary);

    color:#111;

}

/*=====================================
TERMINAL WINDOW
======================================*/

.terminal{

    background:#090d16;

    color:#d4d4d4;

    height:360px;

    overflow-y:auto;

    padding:25px;

    font-family:Consolas, monospace;

    font-size:14px;

    line-height:1.9;

}

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

.terminal::-webkit-scrollbar{

    width:8px;

}

.terminal::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/*=====================================
LOG LINES
======================================*/

.terminal p{

    margin-bottom:10px;

    color:#d7dde8;

    animation:fadeLog .35s ease;

}

@keyframes fadeLog{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.log-info{

    color:#60a5fa;

}

.log-success{

    color:#22c55e;

}

.log-warning{

    color:#facc15;

}

.log-error{

    color:#ef4444;

}

.log-ai{

    color:var(--primary);

    font-weight:600;

}

/*=====================================
TERMINAL PROMPT
======================================*/

.prompt{

    color:#22c55e;

}

.cursor{

    display:inline-block;

    width:10px;

    background:#22c55e;

    margin-left:4px;

    animation:blink 1s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}

/*=====================================
SYSTEM STATUS
======================================*/

.system-status{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    padding:25px;

    background:#101826;

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

}

.system-box{

    background:#1b2434;

    padding:20px;

    border-radius:16px;

    text-align:center;

    transition:.3s;

}

.system-box:hover{

    transform:translateY(-5px);

    border:1px solid rgba(243,198,35,.35);

}

.system-box i{

    font-size:28px;

    color:var(--primary);

    margin-bottom:12px;

}

.system-box h3{

    font-size:24px;

    color:#fff;

    margin-bottom:5px;

}

.system-box span{

    color:#97a1bc;

    font-size:13px;

}

/*=====================================
LIVE STATUS BAR
======================================*/

.live-terminal-status{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 25px;

    background:#0c1220;

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

}

.live-terminal-status small{

    color:#97a1bc;

}

.live-terminal-status strong{

    color:var(--primary);

}

/*=====================================
CONNECTING ANIMATION
======================================*/

.connecting{

    display:flex;

    align-items:center;

    gap:10px;

    color:#22c55e;

}

.connecting .dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    animation:pulse 1.5s infinite;

}
/*
==========================================================
PROPFIRM BOT
Connect Bot 2026 UI
Part 6 - Modal + Forms + Responsive
==========================================================
*/

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

.modal{

    position:fixed;

    inset:0;

    background:rgba(5,10,20,.78);

    backdrop-filter:blur(12px);

    display:none;

    justify-content:center;

    align-items:center;

    padding:30px;

    z-index:9999;

}

.modal.active{

    display:flex;

    animation:fadeModal .3s ease;

}

@keyframes fadeModal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.modal-content{

    width:100%;

    max-width:920px;

    max-height:90vh;

    overflow-y:auto;

    position:relative;

    background:
        radial-gradient(circle at 85% 0,rgba(243,198,35,.12),transparent 28%),
        linear-gradient(145deg,#182235,#101725 70%);

    border-radius:24px;

    border:1px solid rgba(243,198,35,.22);

    box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 50px rgba(243,198,35,.08);

}

.modal-content.large{

    max-width:980px;

}

.preferences-modal{
    padding:28px;
}

.preferences-modal .modal-header{
    padding:12px 45px 20px 0;
}

.preferences-modal .modal-header h2{
    color:var(--primary);
}

.preferences-modal .close{
    position:absolute;
    top:14px;
    right:18px;
    background:transparent;
    color:var(--text2);
    font-size:30px;
}

.preference-symbols{
    display:grid;
    gap:12px;
}

.preference-pair-settings{
    display:grid;
    gap:12px;
    margin-top:20px;
}

.preference-pair-settings-heading h3{
    margin:0 0 5px;
    color:var(--primary);
}

.preference-pair-settings-heading p{
    margin:0;
    color:var(--text3);
    font-size:12px;
    line-height:1.5;
}

.preference-pair-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:10px;
}

.preference-pair-card{
    display:grid;
    align-content:start;
    gap:9px;
    min-width:0;
    padding:13px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--panel-soft);
}

.preference-pair-card header{
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
}

.preference-pair-card h4{margin:0}
.preference-pair-card header span,
.preference-pair-card small{color:var(--text3);font-size:11px}
.preference-pair-card label{display:grid;gap:5px;color:var(--text2);font-size:12px}
.preference-pair-card .preference-pair-controls{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:9px}
.preference-pair-card .preference-pair-size{max-width:100%}
.preference-pair-card .preference-pair-risk{margin:0;padding:9px;border-radius:7px;background:rgba(255,255,255,.035);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.preference-pair-risk.safe{color:#a8f0be}
.preference-pair-risk.warning{color:#f5d77e}
.preference-pair-risk.error{color:#ffb1b1}

.preference-risk-grid{
    margin-top:18px;
}

.preferences-warning{
    padding:12px;
    border:1px solid rgba(243,198,35,.22);
    border-radius:8px;
    background:rgba(243,198,35,.07);
    font-size:13px;
}

.preferences-message{
    min-height:22px;
    color:var(--red);
}

.preferences-message.success{
    color:var(--green);
}

.preferences-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.preferences-modal .form-group small{
    color:var(--text3);
}

.connect-modal .modal-header{
    position:relative;
    padding:38px 70px 28px;
    text-align:left;
    background:rgba(8,13,23,.32);
}

.connect-modal .modal-header h2{
    margin:12px 0 6px;
    color:#fff;
    font-size:28px;
}

.connect-modal .modal-header p{
    max-width:680px;
    color:#aeb9ce;
    font-size:14px;
}

.modal-icon{
    display:flex;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(243,198,35,.3);
    border-radius:15px;
    background:rgba(243,198,35,.12);
    color:var(--primary);
    font-size:20px;
}

.modal-security-note{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:16px;
    color:#92a0b9;
    font-size:12px;
}

.modal-security-note i{
    color:#4ade80;
}

.connect-modal .close{
    z-index:2;
    top:20px;
    right:24px;
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    font-size:25px;
}

.connect-modal .steps{
    justify-content:flex-start;
    gap:14px;
    padding:22px 46px 4px;
}

.connect-modal .step{
    flex-direction:row;
    gap:10px;
    color:#9caac1;
    font-size:13px;
}

.connect-modal .step.active{
    color:#fff;
}

.connect-modal .circle{
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.08);
    font-size:13px;
}

.connect-modal .line{
    width:72px;
    height:2px;
}

.connect-modal form{
    padding:25px 46px 42px;
}

.connect-modal .form-grid{
    gap:20px 22px;
}

.connect-modal .form-group{
    gap:8px;
}

.connect-modal .form-group label{
    color:#e9edf5;
    font-size:13px;
}

.connect-modal .form-group input,
.connect-modal .form-group select{
    height:50px;
    border-radius:12px;
    background:#0b1220;
}

.field-hint{
    color:#8290a8;
    font-size:11px;
}

.connect-modal .setup-header{
    margin:10px 0 24px;
    padding:20px;
    border:1px solid rgba(243,198,35,.14);
    border-radius:16px;
    background:rgba(243,198,35,.05);
}

.connect-modal .setup-header h2{
    color:#ffe16a;
    font-size:20px;
}

.connect-modal .setup-header p{
    margin-top:5px;
    font-size:13px;
}

.connect-modal .continue-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    height:54px;
    margin-top:22px;
    border-radius:13px;
    font-size:15px;
}

.connect-modal .continue-btn:hover{
    transform:translateY(-1px);
}

.connect-modal button:disabled{
    cursor:not-allowed;
    opacity:.55;
}

.connect-modal button:disabled.is-loading{
    cursor:wait;
    opacity:.88;
}

.button-spinner{
    display:none;
    width:17px;
    height:17px;
    border:2px solid rgba(17,17,17,.25);
    border-top-color:#111;
    border-radius:50%;
}

.is-loading .button-spinner{
    display:inline-block;
    animation:buttonSpin .75s linear infinite;
}

.is-loading .button-icon{
    display:none;
}

@keyframes buttonSpin{
    to{transform:rotate(360deg);}
}

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

.modal-content::-webkit-scrollbar{

    width:8px;

}

.modal-content::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

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

.modal-header{

    padding:35px;

    text-align:center;

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

}

.modal-header h2{

    font-size:32px;

    margin-bottom:8px;

}

.modal-header p{

    color:#98a4be;

}

.close{

    position:absolute;

    right:30px;

    top:25px;

    font-size:30px;

    cursor:pointer;

    color:#fff;

    transition:.3s;

}

.close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

/*=====================================
STEP BAR
======================================*/

.steps{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:35px;

}

.step{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.circle{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#202b40;

    color:#fff;

    font-weight:700;

}

.step.active .circle{

    background:var(--primary);

    color:#111;

}

.line{

    width:120px;

    height:4px;

    border-radius:20px;

    background:#293449;

}

/*=====================================
FORM
======================================*/

form{

    padding:35px;

}

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.settings-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.full-width{

    grid-column:1/-1;

}

/*=====================================
FORM GROUP
======================================*/

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-group[hidden]{
    display:none;
}

.form-group label{

    color:#fff;

    font-weight:600;

}

.form-group input,

.form-group select{

    height:56px;

    background:#101826;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:14px;

    padding:0 18px;

    transition:.3s;

}

.form-static-value{
    min-height:56px;
    display:flex;
    align-items:center;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:#101826;
    color:#cbd5e1;
}

.form-group input:focus,

.form-group select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(243,198,35,.18);

}

/*=====================================
PASSWORD
======================================*/

.password-box{

    position:relative;

}

.password-box i{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#8d99b4;

    cursor:pointer;

}

/*=====================================
RADIOS
======================================*/

.account-type{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.account-type label{

    background:#101826;

    border:1px solid rgba(255,255,255,.08);

    padding:14px 20px;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

}

.account-type label:hover{

    border-color:var(--primary);

}

.account-type input{

    margin-right:8px;

}

/*=====================================
OPTION CARD
======================================*/

.option-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:30px;

}

.option-card{

    background:#101826;

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

    border-radius:18px;

    padding:22px;

}

.option-card h4{

    margin-bottom:18px;

}

/*=====================================
DIVIDER
======================================*/

.setup-divider{

    margin:40px 0 25px;

    text-align:center;

}

.setup-divider h3{

    color:var(--primary);

}

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

.continue-btn{
    text-align: center;

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #ffd84d
    );

    color:#111;

    font-size:17px;

    font-weight:700;

    margin-top:35px;

    transition:.35s;
    

}

.continue-btn:hover{
    text-align: center;

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(243,198,35,.35);

}

/*=====================================
MESSAGE
======================================*/

#messageBox{

    margin-top:20px;

    padding:15px;

    border-radius:12px;

    display:none;

}

#connectModal #messageBox.error{
    border:1px solid rgba(248,113,113,.45);
    background:rgba(127,29,29,.22);
    color:#fecaca;
    font-size:13px;
    line-height:1.5;
}

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

@media(max-width:1100px){

.hero-banner,

.account-header{

    flex-direction:column;

    text-align:center;

}

.account-meta,

.account-stats,

.bot-grid,

.system-status,

.option-grid,

.settings-grid,

.form-grid{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.entitlement-notice{
    align-items:flex-start;
    margin:0 0 20px;
    padding:15px;
}

.license-redeem-content{
    padding:24px;
}

.account-meta,

.account-stats,

.bot-grid,

.system-status,

.option-grid,

.settings-grid,

.form-grid,

.accounts-grid{

    grid-template-columns:1fr;

}

.hero-left h2{

    font-size:32px;

}

.modal-content{

    width:100%;

    border-radius:18px;

}

.connect-modal .modal-header{
    padding:30px 24px 22px;
}

.connect-modal .steps{
    gap:8px;
    padding:18px 22px 0;
}

.connect-modal .step{
    font-size:11px;
}

.connect-modal .line{
    width:28px;
}

.connect-modal form{
    padding:20px 22px 30px;
}

.topbar{

    flex-direction:column;

    gap:20px;

    align-items:flex-start;

}

.section-header{

    flex-direction:column;

    gap:15px;

    align-items:flex-start;

}

.account-actions,

.bot-actions{

    flex-direction:column;

}

.account-actions button,

.bot-actions button{

    width:100%;

}

}
.ai-engine-card{

    background:linear-gradient(135deg,#171f2f,#111827);

    border-radius:25px;

    padding:45px;

    text-align:center;

    position:relative;

    overflow:hidden;
   

    border:1px solid rgba(255,255,255,.08);
   

}

.robot-wrapper{

    position:relative;

    width:170px;

    height:170px;

    margin:auto;

    margin-bottom:30px;

}

.robot-avatar{

    width:120px;

    height:120px;

    border-radius:50%;

    background:linear-gradient(135deg,#f3c623,#ffd84d);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111;

    font-size:55px;

    position:absolute;

    top:25px;

    left:25px;

    z-index:5;

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

    box-shadow:0 0 40px rgba(243,198,35,.35);

}

.orbit{

    position:absolute;

    border:2px solid rgba(243,198,35,.15);

    border-radius:50%;

}

.orbit1{

    width:170px;

    height:170px;

    animation:spin 12s linear infinite;

}

.orbit2{

    width:145px;

    height:145px;

    top:12px;

    left:12px;

    animation:spinReverse 9s linear infinite;

}

.orbit3{

    width:120px;

    height:120px;

    top:25px;

    left:25px;

    animation:spin 6s linear infinite;

}

.running-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    color:#22c55e;

    padding:12px 22px;

    border-radius:40px;

    font-weight:700;

    margin:20px 0;

}

.live-pulse{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22c55e;

    animation:pulseGlow 1.2s infinite;

}

.runtime-box{

    margin:30px auto;

    display:flex;

    justify-content:center;

    gap:12px;

    align-items:center;

    color:#c8d2ea;

    font-size:18px;

}

.runtime-box strong{

    color:#f3c623;

    font-size:24px;

}

.account-box{

    background:#202b40;

    padding:20px;

    border-radius:18px;

    margin:30px auto;

    max-width:320px;

}

.account-box small{

    color:#8d99b4;

}

.account-box h3{

    color:#fff;

    font-size:32px;

    margin-top:10px;

    letter-spacing:2px;

}

.status-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:35px 0;

}

.status-card{

    background:#1b2434;

    padding:20px;

    border-radius:16px;

}

.status-card small{

    color:#97a1bc;

}

.status-card strong{

    display:block;

    margin-top:8px;

    font-size:24px;

}

.engine-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:35px;

}

@keyframes robotFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes spinReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 0 rgba(34,197,94,.5);

    }

    100%{

        box-shadow:0 0 0 14px rgba(34,197,94,0);

    }

}

.market-notice{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin:0 0 28px;
    padding:18px 22px;
    background:rgba(243,198,35,.08);
    border:1px solid rgba(243,198,35,.28);
    border-radius:16px;
    color:var(--primary);
}

.market-notice > i{
    margin-top:4px;
    font-size:20px;
}

.market-notice strong{
    display:block;
    margin-bottom:4px;
    color:#ffe16a;
}

.market-notice p{
    color:var(--text2);
    font-size:14px;
}

.market-notice.weekend{
    background:rgba(245,158,11,.1);
    border-color:rgba(245,158,11,.4);
}

.market-notice.weekend > i,
.market-notice.weekend strong{
    color:#fbbf24;
}

.bot-card h3#selectedSymbolsSummary{
    font-size:16px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.bot-card h3#marketStatus{
    font-size:18px;
}

.market-selection-intro{
    margin:0 0 22px;
    padding:16px 18px;
    background:rgba(243,198,35,.06);
    border-left:3px solid var(--primary);
    border-radius:0 12px 12px 0;
    font-size:14px;
}

.signal-control-notice{
    margin:20px 0;
    padding:22px;
    border:1px solid rgba(243,198,35,.25);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(243,198,35,.09),rgba(14,20,34,.96));
}

.signal-control-notice h2{
    margin:10px 0 6px;
    color:var(--text);
}

.signal-control-notice p{
    max-width:760px;
    color:var(--text2);
}

.market-selection-intro strong{
    color:#ffe16a;
}

.symbol-catalog-controls{
    display:grid;
    gap:4px;
}

.symbol-catalog-controls input,
.preference-symbols > input[type="search"]{
    width:100%;
    min-height:46px;
    padding:11px 14px;
    color:var(--text);
    background:#101826;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
}

.symbol-catalog{
    max-height:420px;
    overflow:auto;
    padding-right:6px;
    overscroll-behavior:contain;
}

.symbol-catalog .symbol-group{
    margin:18px 0;
}

.symbol-group[hidden],
.symbol-option[hidden]{
    display:none;
}

.symbol-group{
    margin:22px 0;
}

.symbol-group h4{
    margin-bottom:12px;
    color:var(--text2);
    font-size:15px;
}

.symbol-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.symbol-option{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:72px;
    padding:12px 14px;
    background:#101826;
    border:1px solid rgba(255,255,255,.08);
    border-radius:13px;
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease;
}

.symbol-option:hover,
.symbol-option:focus-within{
    border-color:rgba(243,198,35,.6);
}

.symbol-option:has(input:checked){
    background:rgba(243,198,35,.1);
    border-color:var(--primary);
}

.symbol-option input{
    width:17px;
    height:17px;
    flex:0 0 auto;
    accent-color:var(--primary);
}

.symbol-option span{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.symbol-option strong{
    color:#fff;
    font-size:14px;
}

.symbol-option small{
    color:var(--text3);
    font-size:11px;
    line-height:1.4;
}

.symbol-selection-status{
    min-height:24px;
    margin-top:12px;
    color:var(--primary-light);
    font-size:13px;
}

@media(max-width:1100px){
    .symbol-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:768px){
    .symbol-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:480px){
    .symbol-grid{
        grid-template-columns:1fr;
    }
}
/*
==========================================================
BOT TRADING UI STYLES
=================================================== ===
*/

.bot-trading-section{
    margin:30px 0;
    background:#111827;
    border-radius:var(--radius);
    border:1px solid var(--border);
    padding:25px;
    box-shadow:var(--shadow);
}

.topbar-left h1{
    margin:5px 0 3px;
    font-size:clamp(25px,3vw,34px);
    letter-spacing:-.04em;
}

.topbar-left p{
    color:var(--text2);
    font-size:13px;
}

.terminal-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--primary);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.4px;
}

.terminal-eyebrow i{font-size:11px}

.bot-trading-section>.section-header{
    display:block;
    margin-bottom:18px;
    padding:2px 0 15px;
    border-bottom:1px solid var(--border);
}

.bot-trading-section>.section-header h2{
    margin:5px 0 3px;
    font-size:21px;
}

.bot-trading-section>.section-header p{
    color:var(--text2);
    font-size:12px;
}

.live-status-card{
    background:linear-gradient(135deg,#121a27 0%,#101621 100%);
    border:1px solid rgba(243,198,35,.26);
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
}

.status-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:10px;
    flex-wrap:wrap;
}

.live-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:20px;
    font-weight:600;
    font-size:14px;
    animation:pulse 2s infinite;
}

.live-status.offline{
    background:#333;
    color:#999;
    animation:none;
}

.live-status.live{
    background:var(--green);
    color:white;
}

.live-status.error{
    background:var(--red);
    color:white;
    animation:none;
}

@keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:.7;}
}

.metrics-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
    margin-bottom:20px;
}

.metric{
    background:rgba(8,13,22,.48);
    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;
    padding:15px;
    text-align:center;
}

html[data-theme="light"] .topbar-left p,
html[data-theme="light"] .bot-trading-section>.section-header p{
    color:#64748b;
}

html[data-theme="light"] .live-status-card,
html[data-theme="light"] .metric{
    background:#f8fafc;
}

.metric label{
    display:block;
    font-size:12px;
    color:#888;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.metric h3{
    font-size:20px;
    margin:0;
    color:var(--primary);
    font-weight:600;
}

.metric h3.trend-up{
    color:#22c55e;
}

.metric h3.trend-down{
    color:#ef4444;
}

.metric h3.trend-waiting,
.metric h3.trend-range{
    color:#aab3c5;
}

.bot-market-overview{
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
    gap:20px;
    margin:20px 0;
}

.market-overview-panel,
.pending-orders-panel{
    min-width:0;
    padding:18px;
    background:#0f0f1e;
    border:1px solid #333;
    border-radius:8px;
}

.market-overview-panel h3,
.pending-orders-panel h3{
    margin:0 0 6px;
    color:var(--primary);
    font-size:14px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.panel-hint{
    margin:0 0 14px;
    color:#9da7c2;
    font-size:12px;
    line-height:1.5;
}

.market-overview-list,
.pending-orders-list{
    display:grid;
    gap:10px;
}

.market-overview-row,
.pending-order-row{
    display:grid;
    grid-template-columns:minmax(90px, .6fr) minmax(80px, .55fr) minmax(0, 2fr);
    gap:10px;
    align-items:start;
    padding:11px 12px;
    background:#1a1a2e;
    border:1px solid #303247;
    border-radius:7px;
}

.market-overview-symbol,
.pending-order-symbol{
    color:#fff;
    font-weight:700;
}

.market-overview-trend{
    font-weight:700;
}

.market-overview-trend.up,
.pending-order-direction.buy{
    color:#22c55e;
}

.market-overview-trend.down,
.pending-order-direction.sell{
    color:#ef4444;
}

.market-overview-trend.range,
.market-overview-trend.unknown{
    color:#aab3c5;
}

.market-overview-reason,
.pending-order-reason{
    color:#aab3c5;
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.market-overview-details{
    display:grid;
    gap:8px;
    min-width:0;
}

.market-overview-strategies{
    display:grid;
    gap:5px;
}

.market-strategy-state{
    display:grid;
    gap:2px;
    padding:6px 8px;
    border-left:2px solid #3d465c;
    background:#141827;
}

.market-strategy-state strong{
    color:#e5c34a;
    font-size:10px;
    font-weight:600;
}

.market-strategy-state span{
    color:#9da7c2;
    font-size:10px;
    line-height:1.4;
}

.pending-order-row{
    grid-template-columns:minmax(85px, .7fr) minmax(95px, .7fr) minmax(0, 1.6fr);
}

.pending-order-details{
    display:grid;
    gap:4px;
    color:#cbd2e1;
    font-size:12px;
}

.market-empty{
    margin:0;
    padding:12px;
    color:#888;
    text-align:center;
    font-size:13px;
}

.chart-signals-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    margin-top:20px;
}

.chart-panel,
.signals-panel{
    background:#0f0f1e;
    border:1px solid #333;
    border-radius:8px;
    padding:15px;
}

.chart-panel h3,
.signals-panel h3{
    margin:0 0 15px 0;
    color:var(--primary);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.signals-list{
    max-height:400px;
    overflow-y:auto;
}

.signal-row{
    display:grid;
    grid-template-columns:20px 60px 70px 50px 50px 1fr;
    gap:8px;
    align-items:center;
    padding:8px;
    border-bottom:1px solid #222;
    font-size:11px;
    color:#ccc;
}

.signal-row:last-child{
    border-bottom:none;
}

.signal-reason{
    grid-column:1 / -1;
    color:#aab3c5;
    font-size:11px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.signal-dir{
    font-size:12px;
}

.signal-symbol{
    font-weight:600;
    color:var(--primary);
}

.signal-price{
    font-family:monospace;
    color:var(--green);
}

.signal-rr{
    color:var(--orange);
    font-weight:500;
}

.signal-conf{
    color:#888;
}

.signal-time{
    color:#666;
    font-size:10px;
    text-align:right;
}

.btn-sm{
    padding:6px 12px !important;
    font-size:12px !important;
    white-space:nowrap;
}

.limit-bar{
    background:#0f0f1e;
    border:1px solid #333;
    border-radius:6px;
    padding:12px;
    overflow:hidden;
}

.limit-bar .label{
    font-size:12px;
    color:#aaa;
    margin-bottom:6px;
    font-weight:500;
}

.bar-container{
    width:100%;
    height:20px;
    background:#1a1a2e;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #333;
}

.bar-container .bar{
    height:100%;
    background:linear-gradient(90deg,var(--green),#16a34a);
    width:0%;
    transition:width .3s ease;
    border-radius:10px;
}

.bar-container .bar.limit-reached{
    background:linear-gradient(90deg,var(--red),#dc2626);
    animation:alert-pulse .8s infinite;
}

@keyframes alert-pulse{
    0%,100%{opacity:1;}
    50%{opacity:.5;}
}

@media (max-width:768px){
    .chart-signals-layout{
        grid-template-columns:1fr;
    }
    .bot-market-overview{
        grid-template-columns:1fr;
    }
}

@media (max-width: 560px){
    .market-overview-row,
    .pending-order-row{
        grid-template-columns:1fr 1fr;
    }
    .market-overview-reason,
    .pending-order-reason{
        grid-column:1 / -1;
    }
}

/* Trading Bot account center */
.trading-bot-page{
    min-width:320px;
    overflow-x:hidden;
    background:#080b11;
}

.trading-bot-page .dashboard{
    min-width:0;
}

.trading-bot-page .main-content{
    min-width:0;
    padding:clamp(18px,3vw,38px);
    background:
        radial-gradient(ellipse at 82% 0,rgba(212,175,55,.07),transparent 34%),
        #080b11;
}

.trading-bot-page .topbar{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    min-width:0;
    align-items:center;
    flex-flow:row wrap;
    justify-content:space-between;
    gap:20px;
    margin:0 0 24px;
    padding:clamp(20px,3vw,30px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:linear-gradient(135deg,#111827,#0d121c);
    animation:botPanelEnter .65s both;
}

.trading-bot-page .topbar::before{
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(112deg,transparent 20%,rgba(243,198,35,.055) 48%,transparent 72%);
    content:"";
    transform:translateX(-100%);
    animation:botHeroSweep 1.4s .35s ease-out both;
}

.trading-bot-page .topbar-left{
    min-width:0;
    position:relative;
    z-index:1;
}

.trading-bot-page .topbar-left h1{
    margin-top:8px;
    font-size:clamp(27px,4vw,38px);
    letter-spacing:-.04em;
}

.trading-bot-page .topbar-left p{
    max-width:660px;
    line-height:1.6;
}

.trading-bot-page .topbar-right{
    position:relative;
    z-index:1;
    min-width:0;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
}

.trading-bot-page .trading-hero-art{
    position:absolute;
    z-index:0;
    top:50%;
    right:clamp(78px,14vw,205px);
    width:154px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    color:#f3c623;
    opacity:.72;
    pointer-events:none;
    transform:translateY(-50%);
}

.trading-bot-page .hero-orbit{
    position:absolute;
    display:block;
    border:1px solid rgba(243,198,35,.24);
    border-radius:50%;
}

.trading-bot-page .hero-orbit-outer{
    inset:3px;
    border-style:dashed;
    animation:botOrbit 24s linear infinite;
}

.trading-bot-page .hero-orbit-inner{
    inset:22px;
    border-color:rgba(243,198,35,.15);
    box-shadow:0 0 28px rgba(243,198,35,.08),inset 0 0 28px rgba(243,198,35,.06);
    animation:botOrbit 18s linear infinite reverse;
}

.trading-bot-page .hero-orbit-dot{
    position:absolute;
    top:13px;
    left:36px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ffe16a;
    box-shadow:0 0 15px rgba(243,198,35,.9);
    animation:botDotPulse 2.4s ease-in-out infinite;
}

.trading-bot-page .hero-core{
    display:grid;
    width:62px;
    aspect-ratio:1;
    place-items:center;
    border:1px solid rgba(243,198,35,.32);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(243,198,35,.18),rgba(16,22,32,.9));
    box-shadow:0 0 34px rgba(243,198,35,.14);
    font-size:23px;
    animation:botCoreFloat 4.8s ease-in-out infinite;
}

@keyframes botPanelEnter{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes botHeroSweep{
    to{transform:translateX(100%)}
}

@keyframes botOrbit{
    to{transform:rotate(360deg)}
}

@keyframes botDotPulse{
    50%{opacity:.45;box-shadow:0 0 5px rgba(243,198,35,.5)}
}

@keyframes botCoreFloat{
    50%{transform:translateY(-5px)}
}

.trading-bot-page .topbar-right .user-menu-actions{
    gap:8px;
}

.trading-bot-page .status-badge{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    padding:8px 13px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.trading-bot-page .saved-accounts-section,
.trading-bot-page .connected-account,
.trading-bot-page .accounts-section,
.trading-bot-page #botTradingSection{
    min-width:0;
    margin:0 0 18px;
    padding:clamp(18px,2.5vw,26px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:#101620;
    box-shadow:0 14px 38px rgba(0,0,0,.18);
    animation:botPanelEnter .55s both;
}

.trading-bot-page .saved-accounts-section{animation-delay:.08s}
.trading-bot-page .connected-account{animation-delay:.14s}
.trading-bot-page .accounts-section{animation-delay:.2s}
.trading-bot-page #botTradingSection{animation-delay:.26s}

.trading-bot-page .saved-mt5-account{
    transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}

@media(hover:hover){
    .trading-bot-page .saved-mt5-account:hover{
        border-color:rgba(243,198,35,.4);
        background:#192231;
        transform:translateY(-2px);
    }
}

.trading-bot-page .saved-accounts-section .section-header{
    display:flex;
    flex-flow:row wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.trading-bot-page .saved-accounts-section h2,
.trading-bot-page .accounts-section h2{
    margin:5px 0 4px;
    font-size:clamp(19px,2.5vw,24px);
}

.trading-bot-page .saved-accounts-section .section-header p,
.trading-bot-page .accounts-section .section-header p{
    max-width:690px;
    color:#9ca8ba;
    font-size:13px;
    line-height:1.6;
}

.trading-bot-page .selected-account-notice{
    margin-top:10px;
    font-size:12px;
    font-weight:500;
}

.account-selector-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.account-selector-actions button{
    min-height:42px;
    white-space:nowrap;
}

.trading-bot-page .saved-accounts-list{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:12px;
    margin-top:20px;
}

.trading-bot-page .saved-mt5-account{
    min-width:0;
    border-color:rgba(255,255,255,.08);
    background:#151c28;
}

.trading-bot-page .saved-mt5-account.is-selected{
    border-color:rgba(243,198,35,.7);
    box-shadow:inset 3px 0 #f3c623;
}

.trading-bot-page .connected-account{
    padding:clamp(20px,3vw,32px);
}

.trading-bot-page .account-header{
    flex-flow:row wrap;
    gap:16px;
    margin-bottom:22px;
}

.trading-bot-page .account-title{
    min-width:0;
    gap:14px;
}

.trading-bot-page .account-title h2{
    overflow-wrap:anywhere;
    font-size:clamp(19px,2.5vw,25px);
}

.trading-bot-page .account-title p{
    overflow-wrap:anywhere;
}

.trading-bot-page .broker-logo{
    width:54px;
    height:54px;
    flex:none;
    border-radius:15px;
    font-size:22px;
}

.trading-bot-page .account-badge{
    padding:8px 13px;
    font-size:11px;
}

.trading-bot-page .account-number{
    margin-bottom:20px;
}

.trading-bot-page .account-meta{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));
    gap:10px;
    margin-bottom:16px;
}

.trading-bot-page .meta-item{
    min-width:0;
    padding:14px;
    border:1px solid rgba(255,255,255,.06);
    background:#151c28;
}

.trading-bot-page .meta-item span{
    margin-bottom:6px;
}

.trading-bot-page .account-stats{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));
    gap:10px;
}

.trading-bot-page .stat-card{
    min-width:0;
    padding:16px;
    border-radius:14px;
    background:#151c28;
}

.trading-bot-page .stat-card i{
    width:38px;
    height:38px;
    margin-bottom:12px;
    font-size:16px;
}

.trading-bot-page .stat-card h3{
    white-space:normal;
    overflow-wrap:anywhere;
}

.trading-bot-page .connection-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    background:#151c28;
}

.trading-bot-page .connection-actions button{
    min-height:42px;
}

.trading-bot-page #botTradingSection{
    border-color:rgba(243,198,35,.22);
    background:linear-gradient(135deg,rgba(243,198,35,.07),#101620 55%);
}

.trading-bot-page #botTradingSection h2{
    margin:8px 0;
}

.trading-bot-page #botTradingSection p{
    max-width:800px;
    color:#b3bdcc;
    line-height:1.65;
}

.trading-bot-page .empty-account{
    color:#f5f7fa;
}

.trading-bot-page .empty-account p{
    color:#9ca8ba;
    line-height:1.5;
}

.connection-account-type{
    min-height:50px;
    align-items:stretch;
}

.connection-account-type label{
    flex:1;
    justify-content:center;
    min-height:44px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:#111722;
    color:#dbe2eb;
    cursor:pointer;
}

.connection-account-type label:has(input:checked){
    border-color:#d4af37;
    background:rgba(212,175,55,.11);
    color:#ffe16a;
}

.connection-account-type label{
    gap:8px;
    padding:9px 12px;
}

.connection-account-type label:has(input:checked){
    border-color:#d4af37;
    background:rgba(212,175,55,.11);
    color:#ffe16a;
}

.connection-account-type input{
    accent-color:#d4af37;
}

.connection-account-type input[type="radio"]{
    width:15px;
    height:15px;
    flex:none;
    padding:0;
}

.prop-firm-picker[hidden],
.prop-firm-configuration[hidden],
.prop-firm-review[hidden],
.prop-connected-rules[hidden],
.prop-lot-settings[hidden]{
    display:none;
}

.prop-firm-picker{
    min-width:0;
    gap:13px;
    padding:15px;
    border:1px solid rgba(212,175,55,.22);
    border-radius:14px;
    background:rgba(212,175,55,.045);
}

.prop-firm-picker h3,
.prop-firm-review h3{
    margin:0 0 4px;
    color:#f5d36b;
    font-size:15px;
}

.prop-firm-picker>div>p,
.prop-firm-review>p{
    color:#9ca8ba;
    font-size:11px;
    line-height:1.5;
}

.prop-firm-catalog-message{
    color:#bdc6d4;
    font-size:11px;
    line-height:1.5;
}

.prop-firm-retry{
    justify-self:start;
    min-height:34px;
    padding:7px 10px;
    font-size:10px;
}

.prop-firm-selected-preview{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    margin-top:8px;
    color:#f5d36b;
    font-size:12px;
}

.prop-firm-selected-preview[hidden]{
    display:none;
}

.prop-firm-selected-preview img{
    width:30px;
    height:30px;
    flex:none;
    object-fit:contain;
    border:1px solid rgba(212,175,55,.32);
    border-radius:8px;
    background:#fff;
}

.prop-firm-preview-mark{
    display:grid;
    width:30px;
    height:30px;
    flex:none;
    place-items:center;
    border:1px solid rgba(212,175,55,.32);
    border-radius:8px;
    background:#1c2028;
    color:#f5d36b;
    font-size:10px;
    font-weight:700;
}

.prop-firm-selected-preview strong{
    overflow-wrap:anywhere;
}

.prop-firm-configuration{
    display:grid;
    gap:11px;
}

.prop-firm-configuration>label{
    display:grid;
    gap:6px;
    color:#dce3ec;
    font-size:11px;
    font-weight:600;
}

.prop-firm-configuration select{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:9px;
    background:#111722;
    color:#f5f7fa;
}

.prop-firm-configuration select:disabled{
    opacity:.55;
}

.prop-published-rules{
    display:grid;
    gap:10px;
    min-width:0;
    padding:12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    background:#0d1118;
}

.prop-published-rules>strong{
    color:#f5d36b;
    font-size:11px;
    line-height:1.5;
}

.prop-published-rules>p{
    color:#9ca8ba;
    font-size:11px;
}

.prop-published-rules>a,
.prop-firm-source a{
    width:fit-content;
    color:#f5d36b;
    font-size:10px;
    text-decoration:underline;
    text-underline-offset:3px;
}

.prop-rule-list{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:7px 12px;
    margin:0;
}

.prop-rule-list dt{
    color:#98a4b5;
    font-size:10px;
}

.prop-rule-list dd{
    min-width:0;
    margin:0;
    color:#eef2f7;
    font-size:10px;
    font-weight:600;
    overflow-wrap:anywhere;
}

.prop-firm-review{
    display:grid;
    gap:9px;
    margin:4px 0 20px;
    padding:14px;
    border:1px solid rgba(212,175,55,.27);
    border-radius:13px;
    background:rgba(212,175,55,.055);
}

.prop-connected-rules{
    margin:0 0 22px;
    padding:16px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:14px;
    background:rgba(212,175,55,.045);
}

.prop-connected-rules h3,
.prop-lot-settings h3{
    margin:0 0 10px;
    color:#f5d36b;
    font-size:15px;
}

.prop-connected-rules .prop-published-rules{
    max-height:320px;
    overflow:auto;
}

.prop-lot-settings{
    display:grid;
    gap:8px;
    margin:0 0 18px;
    padding:16px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:14px;
    background:rgba(212,175,55,.045);
}

.prop-lot-settings p,
.prop-lot-settings small,
.prop-lot-settings label{
    color:#b9c1d9;
    font-size:12px;
    line-height:1.5;
}

.prop-lot-settings input{
    width:100%;
    min-height:42px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    background:#111722;
    color:#f5f7fa;
    font:inherit;
}

.prop-lot-settings input:focus,
.prop-firm-picker select:focus{
    border-color:#d4af37;
    box-shadow:0 0 0 3px rgba(212,175,55,.12);
}

.prop-rules-confirm{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:#e2e8f0;
    font-size:11px;
    line-height:1.5;
    cursor:pointer;
}

.prop-rules-confirm input{
    width:16px;
    height:16px;
    flex:none;
    margin-top:1px;
    accent-color:#d4af37;
}

.trading-bot-page .connect-modal .password-box{
    width:100%;
    min-width:0;
}

.trading-bot-page .connect-modal .password-box input{
    width:100%;
    min-width:0;
}

.verified-account-overview{
    margin:4px 0 22px;
    padding:16px;
    border:1px solid rgba(34,197,94,.26);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(34,197,94,.07),rgba(17,23,34,.92));
}

.verified-account-heading{
    display:flex;
    align-items:flex-start;
    gap:11px;
}

.verified-check{
    display:grid;
    width:30px;
    height:30px;
    flex:none;
    place-items:center;
    border:1px solid rgba(34,197,94,.4);
    border-radius:50%;
    color:#4ade80;
}

.verified-account-heading h3{
    margin:0 0 4px;
    color:#f5f7fa;
    font-size:15px;
}

.verified-account-heading p{
    color:#9ca8ba;
    font-size:11px;
    line-height:1.5;
}

.verified-account-details{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
}

.verified-account-details>div{
    min-width:0;
    padding:10px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:9px;
    background:rgba(10,14,21,.72);
}

.verified-account-details span,
.verified-account-details strong{
    display:block;
    overflow-wrap:anywhere;
}

.verified-account-details span{
    margin-bottom:4px;
    color:#8390a3;
    font-size:10px;
}

.verified-account-details strong{
    color:#fff;
    font-size:12px;
    font-variant-numeric:tabular-nums;
}

.verification-checklist{
    display:grid;
    gap:7px;
    margin-top:13px;
    padding:0;
    list-style:none;
}

.verification-checklist li{
    display:flex;
    align-items:center;
    gap:8px;
    color:#cbd5e1;
    font-size:11px;
}

.verification-checklist i{
    color:#4ade80;
    font-size:10px;
}

.trading-bot-page #connectModal{
    padding:20px;
    background:rgba(2,5,10,.82);
}

.trading-bot-page .connect-modal{
    width:min(100%,520px);
    max-width:520px;
    max-height:min(860px,calc(100dvh - 40px));
    border:1px solid rgba(212,175,55,.28);
    border-radius:20px;
    background:#090a0c;
    box-shadow:0 28px 90px rgba(0,0,0,.72);
}

.trading-bot-page .connect-modal .modal-header{
    padding:28px 28px 18px;
    background:transparent;
}

.trading-bot-page .connect-modal .modal-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:transparent;
}

.trading-bot-page .connect-modal .modal-header h2{
    margin:8px 0;
    font-size:24px;
}

.trading-bot-page .connect-modal .modal-header p{
    font-size:12px;
    line-height:1.6;
}

.trading-bot-page .connect-modal .modal-security-note{
    margin-top:12px;
    font-size:11px;
    line-height:1.5;
}

.trading-bot-page .connect-modal .close{
    top:18px;
    right:18px;
}

.trading-bot-page .connect-modal .steps{
    justify-content:center;
    gap:12px;
    padding:10px 24px 0;
}

.trading-bot-page .connect-modal .step{
    gap:8px;
    font-size:11px;
}

.trading-bot-page .connect-modal .circle{
    width:28px;
    height:28px;
}

.trading-bot-page .connect-modal .line{
    width:34px;
}

.connection-progress{
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 28px 0;
    color:#9ca8ba;
    font-size:10px;
    font-weight:600;
}

.connection-progress>div{
    height:5px;
    flex:1;
    overflow:hidden;
    border-radius:5px;
    background:#242830;
}

.connection-progress>div>span{
    display:block;
    width:50%;
    height:100%;
    border-radius:inherit;
    background:#d4af37;
    transition:width .25s ease;
}

.trading-bot-page .connect-modal form{
    padding:18px 28px 26px;
}

.trading-bot-page .connect-modal .form-grid{
    grid-template-columns:1fr;
    gap:13px;
}

.trading-bot-page .connect-modal .form-group input,
.trading-bot-page .connect-modal .form-group select{
    min-width:0;
    height:46px;
    font-size:16px;
}

.trading-bot-page .connect-modal .setup-header{
    margin:4px 0 16px;
    padding:15px;
}

.trading-bot-page .connect-modal .setup-header h2{
    font-size:18px;
}

.trading-bot-page .connect-modal .setup-header p,
.trading-bot-page .market-selection-intro{
    font-size:12px;
    line-height:1.6;
}

.trading-bot-page .connect-modal .continue-btn{
    width:100%;
    min-height:48px;
    margin-top:16px;
}

.trading-bot-page .connect-modal .symbol-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.trading-bot-page .connect-modal .setup-actions{
    position:sticky;
    bottom:-1px;
    padding-top:12px;
    background:linear-gradient(180deg,rgba(9,10,12,0),#090a0c 24%);
}

@media(max-width:900px){
    .trading-bot-page .main-content{
        padding:20px;
    }

    .trading-bot-page .topbar{
        align-items:flex-start;
    }

    .trading-bot-page .topbar-right{
        justify-content:flex-start;
    }

    .trading-bot-page .trading-hero-art{
        right:78px;
        opacity:.38;
    }
}

@media(max-width:650px){
    .trading-bot-page .main-content{
        padding:14px;
    }

    .trading-bot-page .topbar{
        gap:14px;
        margin-bottom:14px;
        padding:18px;
        border-radius:15px;
    }

    .trading-bot-page .trading-hero-art{
        top:22px;
        right:14px;
        width:82px;
        opacity:.24;
        transform:none;
    }

    .trading-bot-page .hero-orbit-inner{inset:13px}
    .trading-bot-page .hero-orbit-dot{top:7px;left:19px;width:5px;height:5px}
    .trading-bot-page .hero-core{width:36px;border-radius:12px;font-size:15px}

    .trading-bot-page .topbar-left h1{
        font-size:28px;
    }

    .trading-bot-page .topbar-right{
        width:100%;
        justify-content:space-between;
        gap:8px;
    }

    .trading-bot-page .topbar-right .user-menu-actions{
        margin-left:auto;
    }

    .trading-bot-page .saved-accounts-section,
    .trading-bot-page .connected-account,
    .trading-bot-page .accounts-section,
    .trading-bot-page #botTradingSection{
        margin-bottom:13px;
        padding:16px;
        border-radius:15px;
    }

    .trading-bot-page .saved-accounts-section .section-header{
        flex-direction:column;
        align-items:stretch;
    }

    .account-selector-actions{
        width:100%;
    }

    .account-selector-actions button{
        flex:1;
        justify-content:center;
    }

    .trading-bot-page .account-header{
        align-items:flex-start;
        flex-direction:column;
        text-align:left;
    }

    .trading-bot-page .account-meta{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .trading-bot-page .account-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .trading-bot-page .connection-summary{
        grid-template-columns:1fr;
    }

    .trading-bot-page #connectModal{
        align-items:stretch;
        padding:0;
    }

    .trading-bot-page .connect-modal{
        width:100%;
        max-width:none;
        max-height:100vh;
        height:100vh;
        max-height:100dvh;
        height:100dvh;
        border:0;
        border-radius:0;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .trading-bot-page .connect-modal .modal-header{
        padding:22px 20px 14px;
    }

    .trading-bot-page .connect-modal form{
        padding:16px 20px 24px;
    }

    .connection-progress{
        padding-inline:20px;
    }
}

@media(max-width:380px){
    .trading-bot-page .main-content{
        padding:10px;
    }

    .trading-bot-page .account-meta{
        grid-template-columns:1fr;
    }

    .trading-bot-page .topbar-right .status-badge{
        padding:7px 10px;
    }

    .account-selector-actions button{
        padding-inline:10px;
        font-size:12px;
    }

    .trading-bot-page .connect-modal .steps{
        gap:7px;
        padding-inline:16px;
    }

    .trading-bot-page .connect-modal .step{
        font-size:10px;
    }

    .connection-account-type{
        flex-wrap:wrap;
    }

    .connection-account-type label{
        flex:1 1 100px;
        font-size:11px;
    }

    .prop-firm-picker{
        padding:12px;
    }

    .prop-rule-list{
        grid-template-columns:1fr;
        gap:3px;
    }

    .prop-rule-list dd{
        margin-bottom:5px;
    }
}

@media(prefers-reduced-motion:reduce){
    .trading-bot-page .topbar,
    .trading-bot-page .topbar::before,
    .trading-bot-page .hero-orbit-outer,
    .trading-bot-page .hero-orbit-inner,
    .trading-bot-page .hero-orbit-dot,
    .trading-bot-page .hero-core,
    .trading-bot-page .saved-accounts-section,
    .trading-bot-page .connected-account,
    .trading-bot-page .accounts-section,
    .trading-bot-page #botTradingSection{
        animation:none;
    }

    .trading-bot-page .saved-mt5-account{
        transition:none;
    }
}