:root{
  --bg:#0c100e;--panel:#141a16;--panel2:#1a211c;--line:#2b332d;--line2:#363f38;
  --ink:#f4f6f1;--mut:#a0aaa1;--dim:#6f7b72;--lime:#c1ff5e;--neg:#ff8a7a;--pos:#c1ff5e;--warn:#ffd990;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.45;
  padding:18px 14px 56px;max-width:980px;margin:0 auto;
  background-image:radial-gradient(1000px 400px at 50% -280px,rgba(193,255,94,.07),transparent);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.sitebar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 2px 14px;margin-bottom:14px;border-bottom:1px solid #2b332d}
.sitebar img{display:block;height:30px;width:auto}
.sitebar .back{font-size:13px;color:var(--mut);text-decoration:none}
.sitebar .back:hover{color:var(--lime)}

header{margin-bottom:16px}
.brand{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.22em}
.tag{font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:4px}

.notice{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--mut);line-height:1.55;margin-bottom:14px}
.notice b{color:var(--ink)}
.warnbox{background:#2a2113;border:1px solid #5c4413;color:var(--warn);border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:14px}
.srnote{min-height:20px;margin:0 0 8px;font-size:13px;color:var(--lime)}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:620px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.stat .v{font-family:var(--mono);font-size:22px;font-weight:700;margin:6px 0 2px;word-break:break-word}
.stat .s{font-size:11px;color:var(--mut);line-height:1.4}
.pos{color:var(--pos)}.neg{color:var(--neg)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.cardhead .h{margin:0}
.card>.h{margin-bottom:12px}
.linkbtn{background:none;border:0;color:var(--mut);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px;min-height:44px}
.linkbtn:hover{color:var(--lime)}

#chart svg{display:block;width:100%;height:auto}
.chartmsg{color:var(--mut);font-size:14px;padding:26px 8px;text-align:center}

.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:720px){.filters{grid-template-columns:repeat(3,1fr)}}
label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
input,select,textarea{display:block;width:100%;margin-top:5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:16px;letter-spacing:0;text-transform:none;padding:11px 12px;min-height:46px}
textarea{min-height:76px;resize:vertical}
input[type=date]{min-height:46px}
.hint{font-size:12px;color:var(--dim);margin:10px 0 0;min-height:16px}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:10px;border:1px solid #46503e;background:transparent;color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{border-color:var(--lime);color:var(--lime)}
.btn.main{background:var(--lime);border-color:var(--lime);color:#10160d}
.btn.main:hover{filter:brightness(1.06);color:#10160d}
.btn.danger{border-color:#7a3a30;color:var(--neg)}
.btn.danger:hover{border-color:var(--neg)}
.btn[disabled]{opacity:.55;cursor:wait}
.toolbar .btn{flex:1 1 150px}

#list{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:860px){#list{grid-template-columns:1fr 1fr}}
.bet{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.bet.won{border-left:3px solid var(--pos)}.bet.lost{border-left:3px solid var(--neg)}
.bet .top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--mut)}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:5px;border:1px solid var(--line2);color:var(--mut);white-space:nowrap}
.badge.won{color:var(--pos);border-color:#4d6a22}.badge.lost{color:var(--neg);border-color:#7a3a30}.badge.pending{color:var(--warn);border-color:#5c4413}
.bet .sel{font-size:17px;font-weight:700;word-break:break-word}
.bet .sel .ln{font-family:var(--mono);color:var(--lime);font-weight:500}
.bet .sub{font-size:13px;color:var(--mut);word-break:break-word}
.bet .num{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:13px;margin-top:2px}
.bet .num span b{color:var(--ink)}
.bet .snap{font-size:12px;color:var(--dim);line-height:1.5}
.bet .legs{margin:2px 0 0;padding:0 0 0 18px;font-size:13px;color:var(--mut)}
.bet .notes{font-size:13px;color:var(--mut);font-style:italic;word-break:break-word}
.bet .acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.bet .acts select{width:auto;flex:1 1 130px;margin:0;min-height:44px;font-size:14px;padding:8px 10px}
.bet .acts .btn{min-height:44px;flex:0 0 auto;padding:0 16px;font-size:13px}
.more{text-align:center;margin:14px 0}

.empty{background:var(--panel);border:1px dashed var(--line2);border-radius:14px;padding:30px 20px;text-align:center}
.empty h2{font-size:20px;margin-bottom:8px}
.empty p{color:var(--mut);max-width:520px;margin:0 auto 18px;font-size:14px;line-height:1.6}
.empty .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

details.notes{margin:22px 0 0;font-size:13px;color:var(--mut);line-height:1.65}
details.notes summary{cursor:pointer;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;padding:10px 0}
details.notes p{margin:8px 0 0}
details.notes b{color:var(--ink)}

.sitefoot{max-width:980px;margin:28px auto 0;padding:18px 0 0;border-top:1px solid #2b332d;font-size:12px;line-height:1.7;color:#a0aaa1}
.sitefoot a{color:#f4f6f1;text-underline-offset:3px}
.sitefoot a:hover{color:#c1ff5e}
.sitefoot p{margin:0 0 6px}

/* modal */
.modalback{position:fixed;inset:0;z-index:50;background:rgba(5,8,6,.82);display:flex;align-items:flex-start;justify-content:center;padding:14px;overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(620px,100%);margin:auto;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal h2{font-size:21px;letter-spacing:-.4px;margin-bottom:6px}
.modal>p{margin:0 0 14px;color:var(--mut);font-size:14px;line-height:1.55}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.modal label{margin:0 0 12px}
.fielderr{color:var(--neg);font-size:12px;min-height:0;margin:4px 0 0;letter-spacing:0;text-transform:none}
.formerr{background:#2b1511;border:1px solid #7a3a30;color:#ffb1a5;border-radius:10px;padding:10px 12px;font-size:14px;margin:0 0 12px}
.preview{font-family:var(--mono);font-size:12px;color:var(--mut);margin:-6px 0 12px;min-height:16px}
.preview.bad{color:var(--neg)}
.legrow{display:grid;grid-template-columns:1fr 90px 44px;gap:8px;margin-bottom:8px;align-items:start}
.legrow input{margin:0}
.legrow .btn{min-height:46px;padding:0;font-size:18px}
.mact{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.mact .btn{flex:1 1 140px}
.snapbox{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--mut);margin:0 0 12px;line-height:1.55}
.snapbox b{color:var(--ink)}
.rlist{margin:8px 0 0;padding:0 0 0 18px;font-size:13px;color:var(--mut)}

@media(max-width:480px){.stat .v{font-size:19px}.modal{padding:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* tabs */
.tabs{display:flex;gap:6px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.tab{flex:1 1 0;min-height:46px;background:none;border:0;border-bottom:3px solid transparent;color:var(--mut);font-size:14px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:0 8px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--lime);border-bottom-color:var(--lime)}
@media(min-width:620px){.tab{flex:0 0 140px}}

/* shared panel bits */
.panelnote{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--mut);line-height:1.55;margin-bottom:14px}
.panelnote b{color:var(--ink)}
.formula{font-family:var(--mono);font-size:12px;color:var(--mut);line-height:1.7;word-break:break-word}
.formula b{color:var(--ink)}
.subcard{margin-top:14px}
.frow2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media(min-width:560px){.frow2{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.frow3{grid-template-columns:1fr 1fr 1fr}}
.card label{margin:0 0 12px}
.card .fielderr{margin:4px 0 0}
.savedmsg{font-size:13px;color:var(--lime);min-height:18px;margin:8px 0 0}

/* usage bars */
.usage{display:grid;gap:10px;margin:2px 0 12px}
.usagerow .top{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--mut)}
.usagerow .top b{color:var(--ink);font-family:var(--mono);font-weight:700}
.track{height:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:5px}
.fill{height:100%;background:var(--lime);border-radius:999px;transition:width .2s}
.fill.warn{background:#ffd990}.fill.over{background:var(--neg)}
.warns{display:grid;gap:8px;margin:0}
.warnitem{border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.5}
.warnitem.warn{background:#2a2113;border:1px solid #5c4413;color:var(--warn)}
.warnitem.over{background:#2b1511;border:1px solid #7a3a30;color:#ffb1a5}
.okitem{font-size:14px;color:var(--mut);margin:0}

/* history */
.hist{display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;align-items:center}
.hrow .d{font-family:var(--mono);font-size:11px;color:var(--dim)}
.hrow .l{font-size:14px;word-break:break-word;grid-column:1}
.hrow .a{font-family:var(--mono);font-size:14px;font-weight:700;text-align:right;grid-column:2;grid-row:1/3}
.hrow .bal{font-family:var(--mono);font-size:11px;color:var(--mut);grid-column:2;text-align:right}
.hrow .hacts{grid-column:1/3;display:flex;gap:8px;margin-top:4px}
.hrow .hacts .btn{min-height:40px;padding:0 14px;font-size:13px}
.hrow.start{border-style:dashed}

/* clv */
.bet .clv{font-size:12px;line-height:1.55;border-top:1px dashed var(--line);padding-top:7px;margin-top:2px;color:var(--mut)}
.bet .clv b{color:var(--ink)}
.bet .clv .good{color:var(--pos)}.bet .clv .bad{color:var(--neg)}
.clvlist{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:860px){.clvlist{grid-template-columns:1fr 1fr}}

/* ad spaces (empty and invisible until an ad is placed inside) */
.ad-rail{display:none;position:fixed;top:110px;width:160px;max-height:calc(100vh - 130px);overflow:hidden;z-index:1}
.ad-left{right:calc(50% + 490px + 16px)}
.ad-right{left:calc(50% + 490px + 16px)}
@media(min-width:1364px){.ad-rail:has(*){display:block}}
.ad-top{display:none;margin:0 auto 18px;text-align:center}
@media(max-width:1363px){.ad-top:has(*){display:block}}

/* Bankroll tab: brighter, more colourful text (same layout) */
.stat .v.warn{color:var(--warn)}
#panel-bankroll .panelnote{color:#e3eae4;border-color:#46503e}
#panel-bankroll .panelnote b{color:var(--lime)}
#panel-bankroll .stat{border-left:3px solid var(--line2)}
#panel-bankroll .stat:has(.v.pos){border-left-color:var(--pos)}
#panel-bankroll .stat:has(.v.neg){border-left-color:var(--neg)}
#panel-bankroll .stat:has(.v.warn){border-left-color:var(--warn)}
#panel-bankroll .stat .k{color:#d3e2d5}
#panel-bankroll .stat .v{color:#ffffff}
#panel-bankroll .stat .v.pos{color:var(--pos)}
#panel-bankroll .stat .v.neg{color:var(--neg)}
#panel-bankroll .stat .v.warn{color:var(--warn)}
#panel-bankroll .stat .s{color:#d4dcd5}
#panel-bankroll .card .h{color:var(--lime)}
#panel-bankroll .formula{color:#dbe3dc}
#panel-bankroll .formula b{color:var(--lime)}
#panel-bankroll label{color:#d3e2d5}
#panel-bankroll .hint,#panel-bankroll .okitem{color:#c4cec6}
#panel-bankroll .usagerow .top{color:#dbe3dc}
#panel-bankroll .usagerow .top b{color:#ffffff}
#panel-bankroll .hrow{border-color:var(--line2)}
#panel-bankroll .hrow .d{color:#c4cec6}
#panel-bankroll .hrow .l{color:#ffffff}
#panel-bankroll .hrow .a{color:#ffffff}
#panel-bankroll .hrow .a.pos{color:var(--pos)}
#panel-bankroll .hrow .a.neg{color:var(--neg)}
#panel-bankroll .hrow .bal{color:#d3e2d5}
#panel-bankroll .savedmsg{color:var(--lime)}

/* green scrollbar (site-wide) */
html{scrollbar-color:#c1ff5e #0c100e}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#0c100e}
::-webkit-scrollbar-thumb{background:#c1ff5e;border-radius:8px;border:2px solid #0c100e}
::-webkit-scrollbar-thumb:hover{background:#d6ff8f}
::-webkit-scrollbar-corner{background:#0c100e}