/* Player account pages, Setting and the header "My Account" drop-down, as the reference (Bazi444sb.win, measured at a
   360px phone): Tahoma 14px, cards with the #2e4b5e → #243a48 head, the grey filter card, DataTables-style tables. */
.d4-page{padding:25px 2px 15px;font-family:Tahoma,Helvetica,sans-serif;color:#212529;font-size:14px;line-height:21px}
.d4-account .marquee{display:none} /* no news row on the account pages */

/* Account menu: 30px name bar, 39px rows (14.4px bold #2789ce), 23px boxed arrow, the red 46px LOGOUT bar */
.d4-account .d4-page:has(.d4-menu){padding:0 0 15px}
.d4-menu{background:none}
.d4-menu-name{display:flex;align-items:center;gap:7px;height:30px;padding:0 0 0 6.7px;background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff}
.d4-menu-name svg{flex:0 0 13px;width:13px;height:13px;fill:#fff}
.d4-menu-name span{font-size:13.44px;font-weight:500;line-height:29.568px;word-break:break-all}
.d4-menu nav{margin:0 0 20px}
.d4-menu-item{display:flex;align-items:center;justify-content:space-between;height:39.4px;padding:7.68px 7.44px 7.68px 8.52px;border-bottom:1px solid #e0e6e6;background:#fff;color:#2789ce;font-size:14.4px;font-weight:700;line-height:23.04px;text-decoration:none}
.d4-menu-item i{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border:1px solid #1e1e1e;border-radius:3.84px;background:#fff}
.d4-menu-item .d4-fa{color:#1e1e1e;font-size:15.6px;line-height:11.7px}.d4-menu-item .d4-fa .fa{font-weight:900} /* fa-angle-right fa-lg (Font Awesome 4.7) at 15.6px, as the reference */ /* the reference's Font Awesome angle-right as drawn: 8.4 x 12.7px on every phone */
.d4-logout{margin:0 0 19.2px}
.d4-logout button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border:0;background:linear-gradient(-180deg,#e93522 0,#be2414 100%);color:#fff;font:700 15.36px/23.04px Tahoma,Helvetica,sans-serif;cursor:pointer}
.d4-logout svg{width:14px;height:14px;fill:#fff}

/* Filter card: #e0e6e6, 2px black top border, radius 6px; 35px selects; 34px dd-mm-yyyy box + 40px grey calendar button */
.d4-filter{margin:0 0 32px;padding:10px 10px 2px;border:1px solid rgba(0,0,0,.176);border-top:2px solid #000501;border-bottom-color:#000501;border-radius:6px;background:#e0e6e6}
.d4-f-row{display:flex;gap:24px;margin:0 0 8px}
.d4-f-row>*{flex:1;min-width:0}
.d4-sel{height:35px;padding:6px 32px 6px 12px;border:1px solid #ccc;border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px 12px;color:#5c6873;font:14px/21px Tahoma,Helvetica,sans-serif;appearance:none;-webkit-appearance:none}
.d4-dp{position:relative;display:flex;height:34px}
.d4-dp-text{flex:1;min-width:0;height:34px;padding:0 0 0 6px;border:0;border-radius:4px 0 0 4px;background:#e5e7ea;color:#555;font:14px/15.4px Arial,Helvetica,sans-serif;cursor:pointer}
.d4-dp-text:focus{outline:none}
.d4-dp-btn{flex:0 0 40px;display:flex;align-items:center;justify-content:center;height:34px;padding:0;border:0;border-radius:0 4px 4px 0;background:#c8ced2;cursor:pointer}
.d4-dp-btn svg{width:15px;height:16px;fill:#000}
.d4-dp-btn svg path{fill:#000}
.d4-btn{height:35px;padding:6px 12px;border:1px solid #ccc;border-radius:4px;background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff;font:400 14px/21px Tahoma,Helvetica,sans-serif;cursor:pointer;white-space:nowrap}
.d4-btn:disabled{opacity:.65;cursor:default}
.d4-btn.grey{background:#c8ced3;color:#23282c}
.d4-f-row>.d4-get{flex:0 0 auto;min-width:158px;font-weight:700}

/* Calendar (the reference's date picker): white, "< Oct 2026 >", Mon - Sun, Sundays red, today underlined */
.d4-cal{position:absolute;left:0;top:calc(100% + 1px);z-index:50;width:252px;padding:0 0 4px;border:1px solid #ccc;border-radius:4px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);font-family:Arial,Helvetica,sans-serif;user-select:none}
.d4-cal-head{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 6px}
.d4-cal-head b{font-size:16px;font-weight:400;color:#000}
.d4-cal-head button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer}
.d4-cal-head button svg{width:14px;height:20px;fill:none;stroke:#000;stroke-width:3}
.d4-cal-head button:disabled svg{stroke:#ccc}
.d4-cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.d4-cal th{height:22px;padding:0;color:#333;font-size:13px;font-weight:400;text-align:center}
.d4-cal td{height:30px;padding:0;text-align:center}
.d4-cal td button{width:100%;height:100%;padding:0;border:0;background:none;color:#036;font:14px Arial,Helvetica,sans-serif;cursor:pointer}
.d4-cal td.sun button{color:#c30}
.d4-cal td.other button{color:#999}
.d4-cal td.other.sun button{color:#f58b8b}
.d4-cal td button:disabled{color:#ccc;cursor:default}
.d4-cal td.today button{text-decoration:underline}
.d4-cal td.sel button{background:#8ebfff;color:#fff}

/* Cards: white, 1px border, radius 6px; 35px head with the gradient */
.d4-card{margin:0 0 10px;border:1px solid rgba(0,0,0,.176);border-radius:6px;background:#fff;overflow:hidden}
.d4-card-head{position:relative;display:flex;align-items:center;height:35px;margin:0;padding:6px;border-bottom:1px solid rgba(0,0,0,.176);border-radius:3px 3px 0 0;background:linear-gradient(-180deg,#2e4b5e 0%,#243a48 82%);color:#fff;font-size:14px;font-weight:700;line-height:21px}
.d4-card>.d4-table-wrap,.d4-dt{padding:8px 10px 10px}
.d4-table-wrap{overflow-x:auto}
.d4-table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;line-height:21px}
.d4-table th{padding:10px;border:1px solid #c8ced3;background:#e0e6e6;color:#000;font-weight:700;text-align:center;white-space:nowrap}
.d4-table td{padding:8px 10px;border-bottom:1px solid #c8ced3;text-align:center;vertical-align:middle}
.d4-table .d4-empty{padding:14px;color:#212529}
.d4-table .d4-total td{font-weight:700;background:#f3f3f3}
.d4-bet-back td{background:#beddf4}
.d4-bet-lay td{background:#f3dce2}
.d4-pos{color:#508d0e;font-weight:700}
.d4-neg{color:#d0021b;font-weight:700}
.d4-tri{color:#6c7a89}
.d4-alert{margin:0 0 10px;padding:9px 12px;border:1px solid #f5c2c7;border-radius:4px;background:#f8d7da;color:#842029;font-size:14px}
.d4-alert.ok{border-color:#badbcc;background:#d1e7dd;color:#0f5132}

/* DataTables look (js/account.js): Show [10] entries, sortable heads, Showing x to y of z entries, First Previous n Next Last */
.d4-dt-length{margin:0 0 8px;text-align:center}
.d4-dt-length select{width:75px;height:30px;margin:0 4px;padding:4px;border:1px solid #dcdcdc;border-radius:3px;background:#fff;font:14px Tahoma,Helvetica,sans-serif}
.d4-dt .d4-table th.d4-sort{position:relative;padding-right:26px;cursor:pointer}
.d4-dt .d4-table th.d4-sort::before,.d4-dt .d4-table th.d4-sort::after{content:'';position:absolute;right:10px;border:4px solid transparent;opacity:.25}
.d4-dt .d4-table th.d4-sort::before{top:calc(50% - 9px);border-bottom:5px solid #000}
.d4-dt .d4-table th.d4-sort::after{top:calc(50% + 1px);border-top:5px solid #000}
.d4-dt .d4-table th.asc::before,.d4-dt .d4-table th.desc::after{opacity:.75}
.d4-dt-info{padding:10.57px 0 0;text-align:center}
.d4-dt-pages{display:flex;justify-content:center;flex-wrap:wrap;margin:7px 0 0;padding:3.5px 0 0}
.d4-dt-pages button{min-width:37px;height:37px;margin:0 0 0 2px;padding:7px 14px;border:1px solid transparent;border-radius:2px;background:none;color:#666;font:14px/21px Tahoma,Helvetica,sans-serif;cursor:pointer}
.d4-dt-pages button.current{border-color:#c8ced3;background:linear-gradient(#fff 0%,#dcdcdc 100%);color:#333}
.d4-dt-pages button:disabled{color:#666;cursor:default}

/* My Profile: label / value rows (14px, bold label), 1px #ccc lines, Edit in black with the pen icon */
.d4-dl{margin:0 0 16px;padding:5px 0 0}
.d4-dl dt,.d4-dl dd{margin:0 0 5px;padding:0 12px 5px 17px;border-bottom:1px solid #ccc;font-size:14px;line-height:21px}
.d4-dl dt{font-weight:700}
.d4-dl dd{font-weight:400}
.d4-pw{margin-right:16px}
.d4-edit{display:inline-flex;align-items:center;gap:4px;color:#000;font-size:14px;text-decoration:none;cursor:pointer}
.d4-edit svg{width:17px;height:15px;fill:#000}
.d4-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:60px 12px;background:rgba(0,0,0,.5)}
.d4-modal[hidden]{display:none}
.d4-modal-box{width:100%;max-width:500px;border-radius:4px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.4)}
.d4-modal-x{position:absolute;right:8px;top:2px;border:0;background:none;color:#fff;font-size:24px;cursor:pointer}
.d4-modal-body{padding:14px 14px 4px}
.d4-field{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;font-size:14px;font-weight:700;color:#1e1e1e}
.d4-field input{width:100%;height:35px;padding:0 10px;border:1px solid #ccc;border-radius:4px;background:#fff;color:#5c6873;font-size:14px}
.d4-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid #e4e7ea}

/* Setting (header gear): #eee card; orange 37px "Setting" head; 30px Theme / Stake bars; ten 38px circles in a rounded
   frame, five a row; Quick Stakes 4 a row in 2px blue-gradient frames; black 44px Save */
.d4-account .d4-page:has(.d4-setting){padding:0 0 15px}
.d4-setting{margin:0;background:#eee;box-shadow:0 0 1.08px rgba(0,0,0,.5)}
.d4-setting-title{display:flex;align-items:center;gap:8px;height:37px;margin:0;padding:0 6.72px;background:linear-gradient(#f6a21e 0,#efae4b 80%);color:#000;font:900 14.4px/37.44px "Segoe UI",Tahoma,sans-serif}
.d4-setting-title svg{width:16px;height:16px;fill:#000}
.d4-setting-bar{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 9.24px 0 6px;background:linear-gradient(-180deg,#2e4b5e 0,#243a48 82%);color:#fff;font:700 13.44px/29.57px "Segoe UI",Tahoma,sans-serif}
.d4-setting-default{display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer}
.d4-setting-default svg{width:12px;height:13px;fill:#fff}
.d4-swatches{display:grid;grid-template-columns:repeat(5,52px);justify-content:space-around;margin:7px 11px 9px 6px;padding:5px;border:1px solid rgba(255,255,255,.4);border-radius:30px}
.d4-swatch{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:7px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50px;background:#0b071f;cursor:pointer}
.d4-swatch i{display:block;width:30px;height:30px;border-radius:50px}
.d4-swatch.on{box-shadow:none} /* the reference marks no circle */
.d4-stakes{padding:6.72px 0 0 2.4px}
.d4-stakes h3{margin:7px 0 14px 4px;color:#243a48;font:700 15px/22.5px Tahoma,Helvetica,sans-serif}
.d4-stake-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 6px;padding:0 6px 6.72px 0}
.d4-stake-grid input{width:100%;height:39.25px;padding:0 6.72px;border:2px solid;border-image:conic-gradient(#6ca7ec,#2222b9,#6ca7ec,#2222b9,#6ca7ec,#2222b9,#6ca7ec) 1;border-radius:0;background:#fff;color:#212529;font:14.4px Helvetica,Tahoma,sans-serif;text-align:center;-moz-appearance:textfield}
.d4-stake-grid input::-webkit-outer-spin-button,.d4-stake-grid input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.d4-setting-save{padding:6px 6px 4px 2px}
.d4-save{width:100%;height:44px;padding:1px 12px;border:0;border-radius:5.76px;background:linear-gradient(-180deg,#000 0%,#000 100%);color:#fff;font:700 18px/27px Tahoma,Helvetica,sans-serif;cursor:pointer}

/* Header "My Account" drop-down (desktop) */
.d4-acct{position:relative;margin-left:12px}
.d4-acct-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.d4-acct-btn svg{width:16px;height:16px;fill:#fff}
.d4-acct-btn .d4-caret{width:9px;height:6px}
.d4-acct-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:1001;width:222px;padding-bottom:8px;border-radius:4px;background:#1f2c31;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.d4-acct-menu[hidden]{display:none}
.d4-acct-head{padding:8px 12px;border-radius:4px 4px 0 0;background:#e4e7ea;color:#1f2c31;font-size:14px;font-weight:700}
.d4-acct-menu a{display:flex;align-items:center;height:26px;padding:0 12px;color:#fff;font-size:13px;text-decoration:none}
.d4-acct-menu a:hover{background:rgba(255,255,255,.1)}
.d4-acct-logout{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 24px);height:30px;margin:8px 12px 0;border:1px solid #fff;border-radius:4px;background:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.d4-acct-logout svg{width:13px;height:13px;fill:#fff}

@media (max-width:700px){
    .d4-acct{display:none}
}
/* Activity Log: cells start-aligned, as the reference */
.d4-table-left td{text-align:left;padding:15px 10px 15px 12px}
.d4-cal th,.d4-cal td{border:0;background:none;box-shadow:none}

/* Phones: the reference sizes its Account menu, LOGOUT bar and Setting page by the screen width (vw: the values above are
   its sizes at 360px; at 412px they are 14% larger). Reports, profile and tables keep fixed px, as there. */
@media (max-width:700px){
    .d4-menu-name{height:8.213vw;padding-left:1.861vw;gap:1.944vw}
    .d4-menu-name svg{flex-basis:3.611vw;width:3.611vw;height:3.611vw}
    .d4-menu-name span{font-size:3.733vw;line-height:8.213vw}
    .d4-menu-item{height:10.942vw;padding:2.133vw 2.067vw 2.133vw 2.367vw;font-size:4vw;line-height:6.4vw}
    .d4-menu-item i{width:6.389vw;height:6.389vw;border-radius:1.067vw}
    .d4-logout button{height:12.778vw;gap:2.222vw;font-size:4.267vw;line-height:6.4vw}
    .d4-logout svg{width:3.889vw;height:3.889vw}
    .d4-setting-title{height:10.4vw;padding:0 1.867vw;gap:2.222vw;font-size:4vw;line-height:10.4vw}
    .d4-setting-title svg{width:4.444vw;height:4.444vw}
    .d4-setting-bar{height:8.213vw;padding:0 2.567vw 0 1.667vw;font-size:3.733vw;line-height:8.213vw}
    .d4-setting-default svg{width:3.333vw;height:3.611vw}
    .d4-stake-grid input{height:10.903vw;padding:0 1.867vw;font-size:4vw}
    .d4-save{font-size:5vw}
}
/* Setting, measured on the reference phone screenshot: the circle frame is 100px high (the second row touches its
   bottom edge), 4px between the rows, 25px above Save, a 16px refresh icon by "Default". */
.d4-swatches{height:100px;grid-auto-rows:52px;row-gap:4px;align-content:start;margin:7px 11px 12px 6px}
.d4-swatch{margin:7px auto}
.d4-setting-save{padding:16px 6px 4px 2px}
.d4-setting-default svg{width:16px;height:16px}
@media (max-width:700px){.d4-setting-default svg{width:4.444vw;height:4.444vw}}