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

body {
    font-family: 'Inter', sans-serif ;
    background: #0f212e;
    color: #ffffff;
    height: 100vh; overflow:hidden ;


}

.app-wrap {
    display:flex;
    flex-direction:column;
    height:100% ;
}

.top-bar {
    height: 56px ; 
    display:flex; flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 20px ;
    background: #1a2c38;
    border-bottom: 1px solid #2f4553;
}


.logo-area {
    font-size: 20px;
    font-weight:700; color:white;
    display: flex;
    align-items: center;
}

.author-link {
    font-size: 12px;
    font-weight: 600;
    color: #00e701;
    text-decoration: none;
    margin-left: 8px;
    transition: all 0.15s ease;
}
.author-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.beta-badge {
    position: absolute;
    top: -4px;
    right: -32px;
    font-size: 10px;
    color: #ed4163;
    font-weight: 800;
    transform: rotate(10deg);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}

.bal-area {
    display:flex;
    gap: 10px;
    align-items: center ;
    
    
}
.bal-lbl{ color:#b1bad3; font-size:14px; }


#balInpt {
    width: 180px; 
    height: 36px;
    background: #0f212e;
    border: 2px solid #2f4553;
    border-radius: 6px;
    color: white;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

.sm-btn {
    height: 36px;
    padding: 0 14px;
    background: #2f4553;
    border: none;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.sm-btn:hover { background: #3a5a6e; }

.stats-tgl-btn{ padding:8px 16px; background:#213743; border: 1px solid #2f4553; color:#b1bad3; border-radius:6px; cursor:pointer; }


.game-container{
    flex: 1 ; display:flex; overflow:hidden ; min-width: 0; width: 100%;
}


.sidebar{
    width: 250px;
    min-width: 190px;
    max-width: 260px;
    background: #213743; 
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap: 10px;
    overflow-y: auto;
    border-right: 1px solid #2f4553;
    flex-shrink: 0;
}

.game-main {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    position: relative;
    background: #0f212e;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-end;
}


.mode-tabs {
    display:flex; gap:4px; background: #0f212e; border: 1px solid #2f4553; border-radius: 8px; padding: 4px; position:relative;
}

.mode-tab {
    flex: 1; padding: 8px 12px; text-align: center; background:transparent; border:none;
    color: #b1bad3;
    cursor:pointer;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s ease;
}

.mode-tab.actve{ background:#213743; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    
.strat-icn {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    background: transparent; border:none; color:#b1bad3; cursor:pointer; font-size: 18px; border-radius: 6px ;
}

.strat-icn:hover{ color:white; background: #213743; }

.bet-grp { display:flex; flex-direction:column; gap:6px; }

.bet-lbl-row { display:flex; justify-content:space-between; font-size:12px; color:#b1bad3; }
.bet-usd { color:#b1bad3; }


.fld-lbl{ font-size: 12px; color: #b1bad3; margin-bottom: 2px ; }

.inpt-row {
    display: flex; background: #0f212e; border: 2px solid #2f4553; border-radius: 6px; overflow: hidden ;
}

.inpt-row input {
    flex: 1; background: transparent; border:none; color:white; padding: 10px 12px; font-size: 14px; outline:none; font-family: Inter;
}

.inpt-row input[type=number] { -moz-appearance: textfield; }

.bet-actions{ display:flex; align-items:center; gap:0; padding-right:8px; }

.bet-actions button { background:transparent; border:none; color:#b1bad3; cursor:pointer; padding:4px 8px; font-size:14px; font-weight:600; }
.bet-actions button:hover{ color: white ; }


.dvider { color:#2f4553; font-size:14px; }
.infty-btn { background:transparent; border:none; color:#b1bad3; cursor:pointer; font-size:20px; padding: 0 12px; }


.strat-grp{ display:flex; flex-direction:column; gap:6px ; }

select {
    background-color: #213743;
    border: 1px solid #2f4553;
    color: #ffffff;
    padding: 8px 28px 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b1bad3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    transition: border-color 0.15s ease;
}

#stratSelect, .run-select {
    width: 100%;
    background-color: #0f212e;
    border: 2px solid #2f4553;
}


.cond-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; margin-bottom: 12px ;
}
.cond-grid button{
    width:100%; aspect-ratio:1; background:#2f4553; border: 2px solid transparent; border-radius: 6px; color:#b1bad3; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.15s;
}

.cond-grid button.has-cond { border-color:#1475e1; color:white; background:#0f212e; }
.cond-grid button:hover{ border-color: #1475e1; }


.act-btn {
    width:100%; padding:10px; background:#2f4553; border:none; color:white; border-radius:4px; cursor:pointer; font-size:14px; font-weight:600; margin-bottom:4px; transition:background 0.15s ;
}
.act-btn:hover { background: #3a5a6e; }

.roll-btn{
    width:100%; padding:14px; background:#00e701; border:none; color:#0f212e; border-radius:6px; font-size:16px; font-weight:700; cursor:pointer; margin-top:auto; transition:all 0.15s;
}
.roll-btn:hover{ background:#00ff10; transform:scale(1.01); }
.roll-btn:active{ transform:scale(0.98); }


.autobet-btn {
    width:100%; padding:14px; background:#1475e1; border:none; color:white; border-radius:6px; font-size:16px; font-weight:700; cursor:pointer; margin-top:auto; transition:all 0.15s ;
}
.autobet-btn:hover { background: #1580f0 ; }
.autobet-btn.running { background: #ed4163; }
.autobet-btn.running:hover { background: #ff4d70; }


.recent-rolls {
    display:flex; gap:8px; padding: 10px 0; overflow-x:auto; min-height: 40px; scrollbar-width:none; margin-bottom:auto;
}
.recent-rolls::-webkit-scrollbar { display:none; }

.roll-pill {
    padding:6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; background:#213743; color: #b1bad3; white-space:nowrap; flex-shrink:0; animation: slideIn 0.3s ease;
}

.roll-pill.win { color: #00e701; }
.roll-pill.loss { color: #ed4163 ; }


.dice-area {
    position:relative; height:90px; margin: 0 20px; padding:0 6px;
}


.dice-obj { position:absolute; bottom:0; left:50%; transform: translateX(-50%); transition: left 0.4s ease; }

.dice-inner{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hex-shape {
    width: 50px; height: 58px; background:linear-gradient(135deg, #e8e8e8, #ffffff, #d0d0d0); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.dice-rslt { font-size:22px; font-weight:700; color:#00e701; }
.dice-obj.rolling .hex-shape { animation: diceRoll 0.3s ease; }
.dice-obj.win .dice-rslt{ color:#00e701; }
.dice-obj.loss .dice-rslt{ color:#ed4163; }

.slider-wrap{ padding: 10px 20px; }
.slider-nums { display:flex; justify-content:space-between; font-size: 13px; color:#b1bad3; margin-bottom:8px; padding:0 6px ; }

.slider-track {
    position:relative; height: 28px; border-radius: 30px; background: #0f212e; padding: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); overflow: hidden;
}

.track-fill { position:absolute; top:4px; height:20px; border-radius: 14px; transition: left 0.1s ease, width 0.1s ease; }
.green-fill { background: linear-gradient(90deg, #00e701, #00c801); }
.red-fill { background: linear-gradient(90deg, #ed4163, #d4203f); }

.slider-track input[type=range] {
    width: 100%; position: absolute; top:0; height: 100%; margin:0; -webkit-appearance:none; appearance:none; background:transparent; z-index:3; cursor:pointer;
}

.slider-track input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; width: 24px; height: 32px; background: #4c82fb; border-radius: 4px; border: 3px solid #6ea0ff; cursor:grab; box-shadow: 0 0 10px rgba(76,130,251,0.5); position:relative; margin-top:-4px ;
}
.slider-track input[type=range]::-webkit-slider-runnable-track { height:20px; background:transparent; }

.slider-track input[type=range]::-moz-range-thumb{
    width:24px; height:32px; background:#4c82fb; border-radius:4px; border:3px solid #6ea0ff; cursor:grab; box-shadow: 0 0 10px rgba(76,130,251,0.5);
}
.slider-track input[type=range]::-moz-range-track{ height:20px; background:transparent; }


.game-inpts { display:flex; flex-wrap:wrap; gap:8px; padding:10px 0; margin-top:auto; width:100%; }

.g-inpt{ flex:1; min-width:110px; display:flex; flex-direction:column; gap:4px; }
.g-lbl{ font-size:12px; color:#b1bad3; }

.g-inpt-row { display:flex; background: #213743; border: 2px solid #2f4553; border-radius: 4px; overflow:hidden; }

.g-inpt-row input { flex:1; background:transparent; border:none; color:white; padding:12px; font-size:16px; font-weight:500; outline:none; font-family:Inter; }

.g-btn{ background:transparent; border:none; border-left:1px solid #2f4553; color:#b1bad3; padding:8px 14px; cursor:pointer; font-size:16px; display:flex; align-items:center; }
.g-btn:hover { color:white; background:rgba(255,255,255,0.05); }
.swap-ico { font-size:18px; }


.stats-panel{
    position:fixed; right:20px; top:70px; width:640px; background:#213743; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:100; overflow:hidden; animation:fadeIn 0.2s ease ;
}


.stats-hdr { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-weight:600; color:white; border-bottom:1px solid #2f4553; }
.cls-btn { background:transparent; border:none; color:#b1bad3; cursor:pointer; font-size:20px; }

.stats-content { display:flex; padding:16px; gap:16px; }

.stats-body { flex:1; display:flex; flex-direction:column; gap:10px; }

.stats-row{ display:flex; gap:12px; margin-bottom:4px; }
.stat-bx{ flex:1; }


.s-lbl { display:block; font-size:11px; color:#b1bad3; margin-bottom:2px; }

.s-val { display:block; font-size:14px; font-weight:600; color:white; word-break:break-all; }
.s-val.grn { color:#00e701; }
.s-val.redd { color:#ed4163; }

.chart-box { flex:1.3; min-width:0; padding:0; }
.chart-box canvas { width:100%; height:275px; background:#0f212e; border-radius:8px; display:block; }

.rst-stats-btn { width:100%; margin-top:auto; padding:10px; background:#2f4553; border:none; color:white; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; transition:background 0.15s; }
.rst-stats-btn:hover { background:#3a5a6e; }



.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:200; animation:fadeIn 0.15s; }

.modal-box { width:580px; max-height:80vh; background:#213743; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.modal-hdr { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; font-size:18px; font-weight:600; color:white; border-bottom: 1px solid #2f4553 ; }


.modal-x{ background:transparent; border:none; color:#b1bad3; cursor:pointer; font-size:22px; }
.modal-body{ padding:20px; overflow-y:auto; flex:1; }

.strat-name-inpt { width:100%; padding:12px; background:#0f212e; border: 2px solid #2f4553; border-radius:4px; color:white; font-size:16px; font-weight:600; font-family:Inter; margin-bottom:16px; }
.conds-wrap { display:flex; flex-direction:column; gap:12px; }

.cond-block { background:#0f212e; border-radius:8px; overflow:hidden ; }

.cond-hdr-lbl{ padding: 12px 16px; font-size: 14px; font-weight: 600; color: white ; }
.cond-body { padding: 0 16px 16px; }

.cond-type-row { display:flex; gap:20px; margin-bottom:12px; }

.cond-type-row label { display:flex; align-items:center; gap:6px; color:#b1bad3; font-size:13px; cursor:pointer; }
.cond-type-row input[type=radio] { accent-color:#1475e1; width:16px; height:16px; }

.cond-row{ display:flex; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap ; }
.cond-row span { color: #b1bad3; font-size: 13px; }


.cond-row select, .cond-row input[type=number], .cond-row input[type=text] {
    background-color: #213743;
    border: 1px solid #3a5a6e;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.15s ease;
}

.cond-row select {
    padding-right: 28px;
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
}

.cond-row input[type=number], .cond-row input[type=text] {
    width: 80px;
}

.cond-row select:focus, .cond-row input:focus {
    border-color: #1475e1;
    box-shadow: 0 0 0 2px rgba(20, 117, 225, 0.2);
}

.cond-actions-row{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.min-btn {
    padding: 8px 16px;
    background: #213743;
    border: 1px solid #3a5a6e;
    color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.min-btn:hover { background: #2f4553; }

.del-btn {
    padding: 8px 16px;
    background: rgba(237, 65, 99, 0.15);
    border: 1px solid rgba(237, 65, 99, 0.4);
    color: #ed4163;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.del-btn:hover { background: #ed4163; color: #ffffff; }

.cond-mini { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#2f4553; border-radius:6px; }
.mini-txt { font-size:13px; color:white; flex:1; }

.mini-txt .outcome-hl { color: #f0a020; }
.mini-actions{ display:flex; gap:4px; }


.mini-actions button { width: 32px; height: 32px; background: #3a5a6e; border:none; color:#b1bad3; cursor:pointer; border-radius:4px; font-size:14px; }
.mini-actions button:hover { color:white; background: #4a6a7e; }

.add-cond-btn{ width:100%; padding:12px; background:#2f4553; border: 1px solid #4a6a7e; color:white; border-radius:6px; cursor:pointer; font-size:14px; font-weight:600; margin-top:8px; }
.add-cond-btn:hover { background: #3a5a6e; }

.cond-note { font-size:12px; color:#b1bad3; margin-top:8px; font-style:italic ; }

.act-desc { font-size:11px; color:#6b7d8e; margin-top:4px; line-height:1.5; }

.modal-ftr{ padding: 16px 20px; border-top: 1px solid #2f4553 ; }


.save-strat-btn { width: 100%; padding: 12px; background: #1475e1; border:none; color:white; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; }
.save-strat-btn:hover { background:#1580f0; }

@keyframes fadeIn{ from { opacity:0; } to { opacity:1; } }

@keyframes slideIn{ from { opacity:0; transform:translateX(20px); } to{ opacity:1; transform:translateX(0); } }
@keyframes diceRoll { 0%{ transform:translateY(-30px) rotate(0deg); opacity:0.5; } 50%{ transform:translateY(10px) rotate(180deg); opacity:0.8; } 100%{ transform:translateY(0) rotate(360deg); opacity:1; } }

@keyframes diceBounce { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield ; }

.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:#2f4553; border-radius:4px; }

input:focus, select:focus{ border-color:#1475e1; outline:none; }

.auto-secton { display:flex; flex-direction:column; gap:12px; }

.speed-grp {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.speed-presets {
    display: flex;
    gap: 4px;
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 8px;
    padding: 4px;
}

.spd-preset {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #b1bad3;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
}

.spd-preset:hover {
    color: #ffffff;
}

.spd-preset.actve, .spd-preset.active {
    background: #213743;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.speed-row { display:flex; align-items:center; gap:8px; width:100%; margin-top:2px; }
.spd-lbl { font-size:11px; color:#b1bad3; }
.speed-val { font-size:12px; color:#ffffff; font-weight:600; }
.speed-row input[type=range] {
    position: relative !important;
    top: auto !important;
    flex: 1;
    height: 6px !important;
    -webkit-appearance: none;
    appearance: none;
    background: #0f212e !important;
    border: 1px solid #2f4553;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.speed-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px !important;
    height: 14px !important;
    background: #1475e1 !important;
    border-radius: 50% !important;
    border: none !important;
    margin-top: -5px !important;
    cursor: pointer;
}
.speed-row input[type=range]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    background: #1475e1 !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer;
}
.speed-row input[type=range]::-webkit-slider-runnable-track {
    height: 6px !important;
    background: transparent !important;
    border-radius: 3px;
}

.sugg-row { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.game-sugg { margin-bottom:6px; justify-content:flex-start; }
.sugg-pill {
    padding: 3px 8px;
    background: #2f4553;
    border: 1px solid #3a5a6e;
    border-radius: 12px;
    color: #b1bad3;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sugg-pill:hover {
    background: #1475e1;
    border-color: #1475e1;
    color: #ffffff;
}

.ico-img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    filter: invert(1) brightness(2);
    margin-right: 6px;
    display: inline-block;
}

.ico-img.sm {
    width: 13px;
    height: 13px;
    margin-right: 4px;
}

.logo-ico {
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

.top-btns { display: flex; gap: 8px; align-items: center; }

.tip-btn {
    background: rgba(237, 65, 99, 0.15) !important;
    border: 1px solid rgba(237, 65, 99, 0.4) !important;
    color: #ed4163 !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
}
.tip-btn:hover {
    background: #ed4163 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(237, 65, 99, 0.4);
}

.tip-modal-box {
    width: 480px;
}
.tip-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tip-user-box {
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tip-lbl { font-size: 12px; color: #b1bad3; font-weight: 600; }
.tip-uname-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tip-uname {
    font-size: 20px;
    font-weight: 700;
    color: #00e701;
    letter-spacing: 0.5px;
}
.copy-uname-btn {
    padding: 8px 14px;
    background: #1475e1;
    border: none;
    color: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.copy-uname-btn:hover { background: #1580f0; }

.tip-instructions h3 {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}
.tip-instructions ol {
    margin-left: 20px;
    color: #b1bad3;
    font-size: 13px;
    line-height: 1.6;
}
.tip-instructions li b.grn-hl {
    color: #00e701;
}
.tip-thanks {
    margin-top: 12px;
    font-size: 12px;
    color: #b1bad3;
    font-style: italic;
}

.doc-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #213743;
    border: 1px solid #2f4553;
    color: #b1bad3;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
}
.doc-btn:hover {
    color: #ffffff;
    border-color: #1475e1;
    background: #1475e1;
    box-shadow: 0 0 10px rgba(20, 117, 225, 0.4);
}

.bug-btn:hover {
    color: #ffffff;
    border-color: #f0a020;
    background: #f0a020;
    box-shadow: 0 0 10px rgba(240, 160, 32, 0.4);
}

.bug-modal-box {
    width: 480px;
}
.bug-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bug-inpt {
    width: 100%;
    padding: 10px 12px;
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
}
.bug-inpt:focus {
    border-color: #1475e1;
}
textarea.bug-inpt {
    min-height: 110px;
    resize: vertical;
}

.mobile-warning-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 33, 46, 0.98);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(8px);
}

#tipModal, #bugModal {
    z-index: 10000 !important;
}

@media (max-width: 900px) {
    .mobile-warning-overlay {
        display: flex !important;
    }
}

@media (max-width: 1400px) {
    .sidebar { width: 230px; padding: 12px; }
    .assistant-sidebar { width: 290px; }
    .logo-area { font-size: 16px; }
    #balInpt { width: 140px; }
    .top-btns { gap: 4px; }
    .stats-tgl-btn { padding: 6px 10px; font-size: 12px; }
    .doc-btn { width: 32px; height: 32px; font-size: 14px; }
    .game-main { padding: 12px; }
    .slider-wrap { padding: 10px; }
    .game-inpts { gap: 8px; }
    .g-inpt-row input { padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 1150px) {
    .sidebar { width: 210px; padding: 10px; }
    .assistant-sidebar { width: 270px; }
    .bal-lbl { display: none; }
    .logo-area { font-size: 14px; }
    #balInpt { width: 120px; }
    .author-link { font-size: 11px; margin-left: 4px; }
    .stats-tgl-btn { padding: 6px 8px; font-size: 11px; }
}

.mobile-warning-box {
    background: #213743;
    border: 1px solid #2f4553;
    border-radius: 12px;
    padding: 30px 24px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}

.mobile-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.mobile-warning-box h2 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.mobile-warning-box p {
    font-size: 14px;
    color: #b1bad3;
    line-height: 1.5;
    margin-bottom: 10px;
}

.mobile-warning-box .sub-txt {
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    margin-top: 12px;
}

.mobile-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.mob-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tip-mob-btn {
    background: rgba(237, 65, 99, 0.2);
    border: 1px solid rgba(237, 65, 99, 0.4);
    color: #ed4163;
}
.tip-mob-btn:hover {
    background: #ed4163;
    color: #ffffff;
}

.doc-mob-btn {
    background: #1475e1;
    border: none;
    color: #ffffff;
}
.doc-mob-btn:hover {
    background: #1580f0;
}

.stats-hdr-left {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.stats-hdr-left span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}
.run-select {
    width: auto;
    background-color: #0f212e;
    border: 2px solid #2f4553;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 28px 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b1bad3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}
.multi-run-summary {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}
.peak-box {
    flex: 1;
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 6px;
    padding: 8px 10px;
}

.assistant-sidebar {
    width: 350px;
    height: 100%;
    background: #213743;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #2f4553;
    animation: fadeIn 0.2s ease;
    flex-shrink: 0;
}

.asst-hdr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #1a2c38;
    border-bottom: 1px solid #2f4553;
    gap: 8px;
}

.asst-nav-tabs {
    display: flex;
    align-items: center;
    flex: 1;
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}
.asst-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #b1bad3;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.asst-nav-tab.actve {
    background: #213743;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.asst-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ai-tab-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.ai-setup-card {
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-step-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #b1bad3;
    line-height: 1.4;
}
.ai-step-list b { color: #00e701; }
.ai-key-inpt {
    width: 100%;
    background: #213743;
    border: 1px solid #2f4553;
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-family: Inter;
    outline: none;
}
.ai-save-key-btn {
    width: 100%;
    padding: 10px;
    background: #00e701;
    border: none;
    color: #0f212e;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
}
.ai-chat-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
}
.ai-messages-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}
.ai-msg-bubble {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
}
.ai-msg-user {
    background: #1475e1;
    color: #ffffff;
    align-self: flex-end;
    max-width: 85%;
}
.ai-msg-bot {
    background: #0f212e;
    border: 1px solid #2f4553;
    color: #b1bad3;
    align-self: flex-start;
    max-width: 92%;
}
.ai-msg-bot b { color: #ffffff; }
.ai-chat-inpt-row {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #2f4553;
}
.ai-chat-inpt {
    flex: 1;
    background: #0f212e;
    border: 1px solid #2f4553;
    color: #ffffff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}
.ai-send-btn {
    background: #1475e1;
    border: none;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

.assistant-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.asst-card {
    background: #0f212e; border: 1px solid #2f4553; border-radius: 8px; padding: 12px;
}

.asst-hdr-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.asst-title { font-size: 11px; color: #b1bad3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.asst-val { font-size: 15px; font-weight: 700; color: #ffffff; margin-top: 2px; }
.asst-val.red { color: #ed4163; }
.asst-val.grn { color: #00e701; }
.asst-val.warn { color: #f0a020; }
.asst-sub { font-size: 11px; color: #b1bad3; margin-top: 4px; line-height: 1.4; }

.asst-badge { padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.asst-badge.high { background: rgba(237,65,99,0.2); color: #ed4163; border: 1px solid #ed4163; }
.asst-badge.med { background: rgba(240,160,32,0.2); color: #f0a020; border: 1px solid #f0a020; }
.asst-badge.low { background: rgba(0,231,1,0.2); color: #00e701; border: 1px solid #00e701; }

.asst-empty { font-size: 12px; color: #b1bad3; text-align: center; padding: 20px 10px; }

.mini-calc-card {
    background: #0f212e;
    border: 1px solid #1475e1;
    border-radius: 8px;
    padding: 12px;
}
.asst-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #b1bad3;
}
.asst-calc-inpt {
    width: 70px;
    background: #213743;
    border: 1px solid #2f4553;
    border-radius: 4px;
    color: #ffffff;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.asst-calc-pills {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.asst-pill {
    padding: 2px 6px;
    background: #213743;
    border: 1px solid #2f4553;
    border-radius: 4px;
    color: #b1bad3;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.asst-pill:hover, .asst-pill.active {
    background: #1475e1;
    border-color: #1475e1;
    color: #ffffff;
}
.asst-calc-res {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #2f4553;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.calc-res-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}
.calc-res-lbl { color: #b1bad3; }
.calc-res-val { color: #ffffff; font-weight: 600; }
.calc-res-val.grn { color: #00e701; }
.calc-res-val.red { color: #ed4163; }

.real-calc-card {
    background: #0f212e;
    border: 1px solid #2f4553;
    border-radius: 8px;
    padding: 12px;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
}
.real-calc-display {
    background: #1a2c38;
    border: 1px solid #2f4553;
    border-radius: 6px;
    padding: 8px 12px;
    text-align: right;
    margin-bottom: 10px;
}
.real-calc-expr {
    font-size: 11px;
    color: #b1bad3;
    min-height: 14px;
    overflow: hidden;
}
.real-calc-val {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    word-break: break-all;
}
.real-calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.r-btn {
    padding: 10px 0;
    background: #213743;
    border: 1px solid #2f4553;
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.r-btn:hover { background: #2f4553; }
.r-btn.op { background: #1475e1; border-color: #1475e1; }
.r-btn.op:hover { background: #1580f0; }
.r-btn.eq { background: #00e701; color: #0f212e; border-color: #00e701; font-weight: 700; }
.r-btn.eq:hover { background: #00ff10; }
.r-btn.clr { background: #ed4163; border-color: #ed4163; }
.r-btn.clr:hover { background: #ff4d70; }