/* ===================================================== */
/*                 ترمینال ایجنت‌ها                       */
/* ===================================================== */

.agt-app{

    max-width:1280px;

    width:100%;

    margin:0 auto;

    padding:28px 24px 60px;

    flex:1;

    overflow-y:auto;

    min-height:0;
}


/* ===================================================== */
/*                     عنوان صفحه                         */
/* ===================================================== */

.agt-hero{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:26px;
}

.agt-hero h1{

    font-size:26px;

    color:var(--jn-text-1);

    margin-bottom:8px;
}

.agt-hero p{

    font-size:13.5px;

    color:var(--jn-text-3);

    max-width:560px;

    line-height:1.9;
}

.agt-status-pill{

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 16px;

    border-radius:20px;

    background:rgba(var(--jn-overlay-rgb),.04);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    font-size:12.5px;

    font-weight:700;

    color:var(--jn-text-2);

    white-space:nowrap;
}

.agt-status-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--jn-text-3);
}

.agt-status-pill.running .agt-status-dot{

    background:var(--jn-green);

    box-shadow:0 0 10px rgba(var(--jn-green-rgb),.7);
}

.agt-status-pill.stopped .agt-status-dot{

    background:var(--jn-red);
}


/* ===================================================== */
/*                  کارت‌های آماری                        */
/* ===================================================== */

.agt-stats{

    display:grid;

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

    gap:16px;

    margin-bottom:34px;
}

.agt-stat-card{

    padding:18px 20px;

    border-radius:16px;

    background:rgba(var(--jn-overlay-rgb),.03);

    border:1px solid rgba(var(--jn-cyan-2-rgb),.12);
}

:root[data-theme="light"] .agt-stat-card,
:root[data-theme="light"] .agt-agent-card,
:root[data-theme="light"] .agt-panel{
    background:rgba(240,244,251,.62);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
}

.agt-stat-label{

    font-size:12px;

    color:var(--jn-text-3);

    margin-bottom:8px;
}

.agt-stat-value{

    font-size:20px;

    font-weight:800;

    color:var(--jn-text-1);
}


/* ===================================================== */
/*                عنوانِ بخش‌ها                            */
/* ===================================================== */

.agt-section-title{

    font-size:16px;

    font-weight:700;

    color:var(--jn-text-1);

    margin:0 0 16px;
}


/* ===================================================== */
/*                   ردیفِ شش ایجنت                       */
/* ===================================================== */

.agt-ledger{

    display:grid;

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

    gap:14px;

    margin-bottom:36px;
}

.agt-agent-card{

    padding:18px 16px;

    border-radius:16px;

    background:rgba(var(--jn-overlay-rgb),.03);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    text-align:center;

    transition:.25s;
}

.agt-agent-card.buy{

    border-color:rgba(var(--jn-green-rgb),.5);

    background:rgba(var(--jn-green-rgb),.06);
}

.agt-agent-card.sell{

    border-color:rgba(var(--jn-red-rgb),.5);

    background:rgba(var(--jn-red-rgb),.06);
}

.agt-agent-card.hold{

    border-color:rgba(var(--jn-gold-rgb),.4);

    background:rgba(var(--jn-gold-rgb),.05);
}

.agt-agent-card.disabled{

    opacity:.45;
}

.agt-agent-avatar{

    width:46px;

    height:46px;

    margin:0 auto 10px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    background:linear-gradient(135deg,var(--jn-cyan),var(--jn-purple));
}

.agt-agent-name{

    font-size:13px;

    font-weight:700;

    color:var(--jn-text-1);

    margin-bottom:6px;
}

.agt-agent-vote{

    font-size:12px;

    font-weight:800;

    letter-spacing:.5px;
}

.agt-agent-card.buy .agt-agent-vote{ color:var(--jn-green); }
.agt-agent-card.sell .agt-agent-vote{ color:var(--jn-red); }
.agt-agent-card.hold .agt-agent-vote{ color:var(--jn-gold); }
.agt-agent-card.disabled .agt-agent-vote{ color:var(--jn-text-3); }


/* ===================================================== */
/*                    ردیفِ پنل‌ها                         */
/* ===================================================== */

.agt-viz-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;
}

@media(max-width:860px){

    .agt-viz-row{

        grid-template-columns:1fr;
    }
}

.agt-panel{

    padding:20px;

    border-radius:18px;

    background:rgba(var(--jn-overlay-rgb),.03);

    border:1px solid rgba(var(--jn-cyan-2-rgb),.12);
}

.agt-panel-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

    font-size:14px;

    font-weight:700;

    color:var(--jn-text-1);
}

.agt-panel-sub{

    font-size:11.5px;

    font-weight:600;

    color:var(--jn-text-3);
}

.agt-panel canvas,
.agt-panel svg{

    width:100%;

    height:auto;

    display:block;
}


/* ===================================================== */
/*                    جریانِ بازار (Vortex)                */
/* ===================================================== */

.agt-vortex-meta{

    display:flex;

    justify-content:space-around;

    margin-top:14px;

    gap:10px;
}

.agt-vortex-meta div{

    text-align:center;
}

.agt-vortex-meta span{

    display:block;

    font-size:11px;

    color:var(--jn-text-3);

    margin-bottom:4px;
}

.agt-vortex-meta b{

    font-size:14px;

    color:var(--jn-cyan);
}


/* ===================================================== */
/*                جریانِ اجرا (لیستِ معاملات)                */
/* ===================================================== */

.agt-stream-list{

    max-height:280px;

    overflow-y:auto;
}

.agt-stream-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:11px 6px;

    border-bottom:1px solid rgba(var(--jn-overlay-rgb),.06);

    font-size:12.5px;
}

.agt-stream-row:last-child{

    border-bottom:none;
}

.agt-stream-time{

    color:var(--jn-text-3);

    font-size:11.5px;
}

.agt-stream-profit{

    font-weight:800;
}

.agt-stream-profit.pos{ color:var(--jn-green); }
.agt-stream-profit.neg{ color:var(--jn-red); }


/* ===================================================== */
/*                      متنِ خالی                          */
/* ===================================================== */

.agt-placeholder{

    text-align:center;

    color:var(--jn-text-3);

    font-size:13px;

    padding:30px 0;

    grid-column:1/-1;
}


/* ===================================================== */
/*    تنظیماتِ ربات (منتقل‌شده از صفحه‌ی تنظیمات) —            */
/*    فیلدها، چک‌باکسِ اندیکاتورها، خط‌هایِ EMA، و مودالِ OTP       */
/* ===================================================== */

.set-field{

    margin-bottom:14px;
}

.set-field label{

    display:block;

    font-size:11.5px;

    color:var(--jn-text-3);

    margin-bottom:6px;
}

.set-field input{

    width:100%;

    font-family:inherit;

    font-size:12.5px;

    color:var(--jn-text-1);

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:10px;

    padding:10px 13px;

    outline:none;

    text-align:right;

    transition:border-color .2s;
}

.set-field input:focus{

    border-color:rgba(var(--jn-cyan-rgb),.5);
}

.set-field input::placeholder{

    color:var(--jn-text-3);
}

.set-field select{

    width:100%;

    font-family:inherit;

    font-size:12.5px;

    color:var(--jn-text-1);

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:10px;

    padding:10px 13px;

    outline:none;

    text-align:right;

    cursor:pointer;

    transition:border-color .2s;
}

.set-field select:focus{

    border-color:rgba(var(--jn-cyan-rgb),.5);
}

.set-help{

    margin:8px 2px 0;

    font-size:11px;

    line-height:1.9;

    color:var(--jn-text-3);
}

.indicator-check-list{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:10px;
}

.indicator-check-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 12px;

    border-radius:10px;

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    font-size:12.5px;

    color:var(--jn-text-2);

    cursor:pointer;
}

.indicator-check-item input{

    width:auto;

    accent-color:var(--jn-cyan);
}

.set-subfields{

    display:flex;

    gap:10px;

    margin-top:12px;
}

.indicator-row{

    display:flex;

    align-items:stretch;

    gap:8px;
}

.indicator-row .indicator-check-item{

    flex:1;
}

.indicator-toggle-btn{

    flex-shrink:0;

    width:38px;

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:10px;

    color:var(--jn-text-3);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:border-color .2s, color .2s;
}

.indicator-toggle-btn:hover{

    color:var(--jn-cyan-text);

    border-color:rgba(var(--jn-cyan-rgb),.3);
}

.indicator-toggle-arrow{

    display:inline-block;

    font-size:13px;

    transition:transform .2s ease;
}

.indicator-toggle-btn.open .indicator-toggle-arrow{

    transform:rotate(180deg);
}

.indicator-params{

    overflow:hidden;

    max-height:0;

    opacity:0;

    margin-top:0 !important;

    padding-top:0 !important;

    padding-bottom:0 !important;

    border-width:0 !important;

    transition:max-height .32s ease, opacity .25s ease, margin-top .32s ease,
               padding .32s ease, border-width .2s ease;
}

.indicator-params.expanded{

    max-height:600px;

    opacity:1;

    margin-top:10px !important;

    padding:14px 14px 4px !important;

    border-width:1px !important;

    background:var(--jn-bg-2);

    border:1px solid rgba(var(--jn-overlay-rgb),.07);

    border-radius:12px;
}

.set-subfield{

    flex:1;
}

.set-subfield label{

    display:block;

    font-size:11px;

    color:var(--jn-text-3);

    margin-bottom:6px;
}

.set-subfield input{

    width:100%;

    font-family:inherit;

    font-size:12.5px;

    color:var(--jn-text-1);

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:10px;

    padding:10px 13px;

    outline:none;

    text-align:right;

    transition:border-color .2s;
}

.set-subfield input:focus{

    border-color:rgba(var(--jn-cyan-rgb),.5);
}

.ema-params{

    margin-top:12px;
}

.ema-lines-list{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.ema-line-row{

    display:flex;

    align-items:center;

    gap:8px;
}

.ema-line-row label{

    flex:1;

    font-size:11px;

    color:var(--jn-text-3);
}

.ema-line-row input{

    width:80px;

    font-family:inherit;

    font-size:12.5px;

    color:var(--jn-text-1);

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:10px;

    padding:10px 13px;

    outline:none;

    text-align:center;

    transition:border-color .2s;
}

.ema-line-row input:focus{

    border-color:rgba(var(--jn-cyan-rgb),.5);
}

.ema-line-remove-btn{

    background:rgba(var(--jn-red-rgb),.12);

    border:1px solid rgba(var(--jn-red-rgb),.35);

    color:var(--jn-red-2-text);

    border-radius:8px;

    width:32px;

    height:32px;

    cursor:pointer;

    font-size:14px;

    transition:.15s;
}

.ema-line-remove-btn:hover{

    background:rgba(var(--jn-red-rgb),.22);
}

.ema-line-add-btn{

    margin-top:10px;

    width:100%;

    background:rgba(var(--jn-cyan-rgb),.08);

    border:1px dashed rgba(var(--jn-cyan-rgb),.35);

    color:var(--jn-cyan-text);

    border-radius:10px;

    padding:9px;

    cursor:pointer;

    font-family:inherit;

    font-size:12px;

    transition:.15s;
}

.ema-line-add-btn:hover{

    background:rgba(var(--jn-cyan-rgb),.15);
}

.ema-line-add-btn:disabled{

    opacity:.4;

    cursor:not-allowed;
}

.ema-mode-row{

    margin-top:14px;

    padding-top:12px;

    border-top:1px dashed rgba(var(--jn-overlay-rgb),.1);
}

.ema-mode-row label{

    display:block;

    font-size:11px;

    color:var(--jn-text-3);

    margin-bottom:6px;
}

.ema-mode-row select{

    width:100%;

    font-family:inherit;

    font-size:12.5px;

    color:var(--jn-text-1);

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:10px;

    padding:10px 13px;

    outline:none;
}

.ema-mode-desc{

    margin:8px 0 0;

    font-size:11px;

    line-height:1.7;

    color:var(--jn-text-3);
}

.set-help-msg{

    min-height:14px;

    margin:10px 2px 0;

    font-size:11.5px;

    color:var(--jn-red-text);
}

.set-help-msg.success{

    color:var(--jn-green-2-text);
}

.set-btn{

    width:100%;

    font-family:inherit;

    font-size:13px;

    font-weight:800;

    padding:12px;

    border:none;

    border-radius:10px;

    color:var(--jn-ink);

    background:linear-gradient(90deg,var(--jn-cyan),var(--jn-purple));

    cursor:pointer;

    transition:filter .2s, transform .2s;
}

.set-btn:hover{

    filter:brightness(1.1);

    transform:translateY(-1px);
}

/* تا وقتی کاربر چیزی توی فرم عوض نکرده، دکمه غیرفعال و کم‌رنگه */
.set-btn:disabled{

    opacity:.4;

    cursor:not-allowed;

    filter:none;

    transform:none;
}

/* بعد از تاییدِ موفقِ پیامک و ذخیره‌شدنِ واقعیِ تنظیمات، یه لحظه */
/* پررنگ‌تر و نورانی‌تر می‌شه تا کاربر مطمئن بشه واقعاً اعمال شد */
.set-btn.save-glow{

    animation: agentsSetBtnSaveGlow 1.2s ease-in-out 2;
}

@keyframes agentsSetBtnSaveGlow{

    0%, 100%{
        filter:brightness(1);
        box-shadow:none;
    }

    50%{
        filter:brightness(1.35);
        box-shadow:0 0 22px rgba(var(--jn-cyan-rgb),.75), 0 0 10px rgba(var(--jn-purple-rgb),.55);
    }
}

.otp-modal-overlay{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(var(--jn-bg-0-rgb),.75);

    backdrop-filter:blur(6px);

    z-index:100;

    padding:20px;
}

.otp-modal-overlay.show{

    display:flex;
}

.otp-modal-card{

    width:100%;

    max-width:380px;

    padding:32px 30px;

    background:var(--jn-bg-1);

    border:1px solid rgba(var(--jn-cyan-rgb),.25);

    border-radius:20px;

    box-shadow:0 0 30px rgba(var(--jn-cyan-rgb),.12), 0 20px 60px rgba(0,0,0,.5);

    text-align:center;

    perspective:1000px;

    animation:otpModalFlipIn .5s cubic-bezier(.4,.2,.2,1);
}

.otp-modal-icon{

    font-size:42px;

    margin-bottom:12px;
}

.otp-modal-card h3{

    font-size:16px;

    margin-bottom:8px;

    background:linear-gradient(90deg,var(--jn-cyan),var(--jn-purple));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;
}

.otp-modal-phone{

    font-size:12.5px;

    color:var(--jn-text-3);

    margin-bottom:22px;

    font-variant-numeric:tabular-nums;
}

.otp-modal-phone strong{

    color:var(--jn-cyan-text);
}

.otp-modal-input input{

    text-align:center;

    letter-spacing:10px;

    font-size:20px;

    font-variant-numeric:tabular-nums;
}

.otp-modal-timer-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:10px 2px 18px;

    font-size:12.5px;
}

.otp-modal-timer{

    color:var(--jn-text-3);

    font-variant-numeric:tabular-nums;
}

.otp-modal-timer .num{

    color:var(--jn-cyan-text);

    font-weight:700;
}

.otp-modal-resend{

    background:none;

    border:none;

    font-family:inherit;

    font-size:12.5px;

    cursor:not-allowed;

    color:var(--jn-text-3);

    transition:color .2s;
}

.otp-modal-resend.active{

    color:var(--jn-cyan-text);

    cursor:pointer;
}

.otp-modal-cancel{

    display:block;

    width:100%;

    margin-top:12px;

    background:none;

    border:none;

    color:var(--jn-text-3);

    font-family:inherit;

    font-size:12.5px;

    cursor:pointer;
}

.otp-modal-cancel:hover{

    color:var(--jn-text-1);
}

@keyframes otpModalFlipIn{

    from{
        transform:rotateY(90deg);
        opacity:0;
    }

    to{
        transform:rotateY(0deg);
        opacity:1;
    }
}