:root {
      --bg:#0f1221; 
      --card:#151936; 
      --muted:#9aa1b2; 
      --green:#31d0aa; 
      --red:#ff6b6b; 
      --primary:#7b8cff; 
      --text:#e6e9f2;
    }
    .wrap{
        max-width:980px;
        margin:40px auto;padding:16px}
    .title-chart{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:12px
    }
    .title-chart h1{
        font-size:24px;
        margin:0
    }
    .card{
        background:var(--card);
        border:1px solid rgba(255,255,255,.06);
        border-radius:16px;
        padding:16px;
        box-shadow:0 10px 30px rgba(0,0,0,.25)
    }

    .toolbar{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        align-items:center;
        margin-bottom:12px
    }
    .toolbar button{
        background:var(--primary);
        color:#fff;
        border:0;
        border-radius:10px;
        padding:10px 14px;
        font-weight:600;
        cursor:pointer;
        transition:.2s;
        box-shadow:0 6px 18px rgba(123,140,255,.35)
    }
    .toolbar button:hover{
        filter:brightness(1.05)
    }
    .secondary{
        background:transparent;
        border:1px solid rgba(255,255,255,.12);
        color:#e6e9f2;
        border: 0;
        border-radius: 10px;
        padding: 10px 14px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s;
        box-shadow: 0 6px 18px rgba(123, 140, 255, .35);
    }
    .toolbar button.danger{
        background:var(--red)
    }
    .kpi{
        display:flex;
        gap:16px;
        flex-wrap:wrap;
        margin-left:auto
    }
    .kpi .pill{
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
        padding:8px 12px;
        border-radius:10px;
        font-size:13px
    }

    .pill {
        color: white;
    }

    .pill .val{
        font-weight:700;
        color: white;
    }

    .chart-area{
        position:relative;
        height:360px
    }
    #chart{
        width:100%;
        height:100%
    }

    /* Плавающая сумма над точкой */
    .bubble{
        position:absolute;
        padding:8px 10px;
        border-radius:10px;
        font-size:12px;
        font-weight:700;
        pointer-events:none;
        opacity:0;
        transform:translate(-50%,-120%);
        transition:opacity .4s ease, transform .4s ease
    }
    .bubble.show{
        opacity:1;
        transform:translate(-50%,-140%)
    }
    .bubble.profit{
        background:rgba(49,208,170,.12);
        color:var(--green);
        border:1px solid rgba(49,208,170,.45)
    }
    .bubble.loss{
        background:rgba(255,107,107,.12);
        color:var(--red);
        border:1px solid rgba(255,107,107,.45)
    }

    .feed{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin-top:14px;
        max-height:180px;
        overflow:auto
    }
    .feed-item{
        display:flex;
        align-items:center;
        gap:10px;
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.07);
        border-left:4px solid transparent;
        padding:10px;
        border-radius:12px
    }


    
    .feed-item.profit{
        border-left-color:var(--green)
    }
    .feed-item.loss{
        border-left-color:var(--red)
    }
    .badge{
        font-size:12px;
        padding:4px 8px;
        border-radius:8px
    }
    .badge.profit{
        background:rgba(49,208,170,.16);
        color:var(--green)
    }
    .badge.loss{
        background:rgba(255,107,107,.16);
        color:var(--red)
    }
    .muted{
        color:var(--muted)
    }

    .text-deal {
        color:var(--muted)
    }

    .legend{
        display:flex;
        gap:12px;
        margin-top:8px;
        color:var(--muted);
        font-size:12px
    }
    .legend span{
        display:flex;
        align-items:center;
        gap:6px
    }
    .dot{
        width:8px;
        height:8px;
        border-radius:50%
    }
    .dot.g{
        background:var(--green)
    }
    .dot.r{
        background:var(--red)
    }

    /* Размытие и оверлей результата */
    .wrap.blurred .card{
        filter: blur(3px);
    }
    .overlay{
        position:fixed;
        inset:0;
        display:none;
        align-items:center;
        justify-content:center;
        background:rgba(0,0,0,.55);
        backdrop-filter: blur(3px);
        z-index:50
    }
    .overlay.show{
        display:flex
    }
    .result-card{
        background:var(--card);
        border:1px solid rgba(255,255,255,.12);
        border-radius:16px;
        max-width:720px;
        width:92%;
        padding:24px;
        text-align:center;
        box-shadow:0 10px 30px rgba(0,0,0,.35)
    }
    .result-card h2{
        margin:0 0 8px;
        font-size:28px;
        color: white;
    }
    .result-card .big{
        font-size:22px;
        font-weight:800;
        margin:10px 0 18px;
        color: white;
    }
    .result-actions{
        display:flex;
        gap:10px;
        justify-content:center
    }

    .installBtn {
        background: #7b8cff;
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 10px 14px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s;
        box-shadow: 0 6px 18px rgba(123, 140, 255, .35);
    }

    .getAccessBot{
        background: #7b8cff;
        color: #fff;
        border: 0;
        border-radius: 10px;
        padding: 10px 14px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s;
        box-shadow: 0 6px 18px rgba(123, 140, 255, .35);
    }


    /* Модалка установки */
    .modal{
        position:fixed;
        inset:0;
        display:none;
        align-items:center;
        justify-content:center;
        background:rgba(0,0,0,.55);
        z-index:60
    }
    .modal.show{
        display:flex
    }
    .modal-card{
        background:var(--card);
        border:1px solid rgba(255,255,255,.12);
        border-radius:16px;
        width:92%;
        max-width:520px;
        padding:20px;
        position:relative
    }
    .modal-card h3{
        margin:0 0 8px
    }
    .form-row{
        display:flex;
        gap:10px;
        flex-wrap:wrap
    }
    .form-row .field{
        flex:1 1 48%
    }
    .field label{
        display:block;
        font-size:12px;
        color:var(--muted);
        margin-bottom:6px
    }
    .field input{
        width:100%;
        padding:12px 12px;
        border-radius:10px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.04);
        color:var(--text)
    }
    .modal-actions{
        display:flex;
        gap:10px;
        justify-content:flex-end;
        margin-top:14px
    }
    .close-x{
        position:absolute;
        top:14px;
        right:16px;
        cursor:pointer;
        opacity:.8
    }

    .error-msg {
        margin-top: 6px;
        border: 1px solid red;
        padding: 10px 10px 10px 10px;
        color: rgb(239, 68, 68);
        border-radius: 10px 10px 10px 10px;
    }

    /* Спиннер на месте кнопки */
.ff-btn-spinner{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(0,0,0,.06);
}
.ff-btn-spinner .ff-spin{
  width:22px; height:22px; border-radius:50%;
  border:3px solid rgba(0,0,0,.18);
  border-top-color: currentColor;
  animation: ffspin .8s linear infinite;
}
@keyframes ffspin { to { transform: rotate(360deg); } }


.service-icon img {
    height: 200px
}